@riosst100/pwa-marketplace 3.2.9 → 3.3.1

package/src/components/RFQ/modalRfq.js

@@ -30,15 +30,42 @@ const RFQModalForm = (props) => {
 
     // Upload File with remove capability
     const [uploadedFiles, setUploadedFiles] = useState([]);
+    // Calculate safe raw-size limit to keep base64 payload under 2MB
+    const GRAPHQL_BASE64_LIMIT = 2 * 1024 * 1024;
+    const SAFE_RAW_LIMIT = Math.floor((GRAPHQL_BASE64_LIMIT * 3) / 4) - 8 * 1024;
+    const estimateBase64Size = size => Math.ceil((4 * size) / 3);
+
     const onDrop = useCallback((accepted) => {
-        setUploadedFiles(prev => [...prev, ...accepted]);
-    }, []);
+        const safe = [];
+        const rejected = [];
+        accepted.forEach(f => {
+            const est = estimateBase64Size(f.size || 0);
+            if (est <= GRAPHQL_BASE64_LIMIT) {
+                safe.push(f);
+            } else {
+                rejected.push({ name: f.name || f.path, size: f.size });
+            }
+        });
+        if (safe.length) {
+            setUploadedFiles(prev => [...prev, ...safe]);
+        }
+        if (rejected.length) {
+            addToast({
+                type: 'error',
+                message: formatMessage({
+                    id: 'productFullDetail.rfqFileTooLarge',
+                    defaultMessage: 'One or more files are too large. Max ~1.5MB each.'
+                }),
+                timeout: 4000
+            });
+        }
+    }, [addToast, formatMessage]);
 
     const {
         getRootProps,
         getInputProps,
         isDragActive
-    } = useDropzone({ onDrop });
+    } = useDropzone({ onDrop, maxSize: SAFE_RAW_LIMIT, multiple: true });
 
     const handleRemoveFile = useCallback((index) => {
         setUploadedFiles(prev => prev.filter((_, i) => i !== index));
@@ -59,8 +86,60 @@ const RFQModalForm = (props) => {
         </div>
     ));
 
+    // Helper: convert File to base64 string (without data URL prefix)
+    const toBase64 = useCallback(
+        file =>
+            new Promise((resolve, reject) => {
+                try {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        const result = reader.result;
+                        // reader.result is a Data URL: "data:<mime>;base64,<payload>"
+                        const base64 = typeof result === 'string' && result.includes(',')
+                            ? result.split(',')[1]
+                            : '';
+                        resolve(base64);
+                    };
+                    reader.onerror = reject;
+                    reader.readAsDataURL(file);
+                } catch (e) {
+                    reject(e);
+                }
+            }),
+        []
+    );
+
     const handleSubmit = useCallback(async values => {
-        console.log('[RFQ] submit values', values);
+        // console.log('[RFQ] submit values', values);
+        // Prepare base64 conversions if any files were uploaded
+        let filesPayload = undefined;
+        if (uploadedFiles && uploadedFiles.length) {
+            // Hard guard: abort if any file would exceed limit after base64 encoding
+            const oversize = uploadedFiles.find(f => estimateBase64Size(f.size || 0) > GRAPHQL_BASE64_LIMIT);
+            if (oversize) {
+                addToast({
+                    type: 'error',
+                    message: formatMessage({
+                        id: 'productFullDetail.rfqFileTooLargeSubmit',
+                        defaultMessage: 'A selected file is too large (limit ~1.5MB).' 
+                    }),
+                    timeout: 4000
+                });
+                return;
+            }
+            try {
+                const base64List = await Promise.all(
+                    uploadedFiles.map(file => toBase64(file))
+                );
+                filesPayload = uploadedFiles.map((file, i) => ({
+                    file_name: (file && (file.name || file.path)) || '',
+                    file_type: (file && file.type) ? file.type : 'application/octet-stream',
+                    base64: base64List[i] || ''
+                }));
+            } catch (e) {
+                console.error('[RFQ] file base64 conversion failed', e);
+            }
+        }
         const input = {
             product_id: productId,
             quantity: values.quote_qty ? Number(values.quote_qty) : undefined,
@@ -70,24 +149,16 @@ const RFQModalForm = (props) => {
                 ? Number(values.quote_price_per_unit)
                 : undefined,
             date_need_quote: startDate ? startDate.toISOString() : undefined,
-            files: uploadedFiles.length
-                ? uploadedFiles.map(file => ({
-                    file_name: (file && (file.name || file.path)) || '',
-                    // Browsers do not expose real file system paths; use name as a stable placeholder
-                    file_path: (file && (file.path || file.name)) || '',
-                    // Ensure a valid MIME string; default if missing
-                    file_type: (file && file.type) ? file.type : 'application/octet-stream'
-                }))
-                : undefined
+            files: filesPayload
         };
 
-            console.log('[RFQ] input payload', input);
+            // console.log('[RFQ] input payload', input);
 
         Object.keys(input).forEach(key => input[key] === undefined && delete input[key]);
 
         try {
             const result = await handleCreateQuickRfq(input);
-            console.log('[RFQ] mutation result', result);
+            // console.log('[RFQ] mutation result', result);
             addToast({
                 type: 'success',
                 message: formatMessage({
@@ -108,7 +179,7 @@ const RFQModalForm = (props) => {
                 timeout: 4000
             });
         }
-    }, [uploadedFiles, addToast, formatMessage, handleCreateQuickRfq, setOpen, startDate]);
+    }, [uploadedFiles, addToast, formatMessage, handleCreateQuickRfq, setOpen, startDate, toBase64]);
 
     return (
         <>
@@ -271,6 +342,7 @@ const RFQModalForm = (props) => {
                                         color="#f76b1c"
                                     />
                                     <div className='mt-2 text-blue-600'>Drop files or click here to upload</div>
+                                    <div className='mt-1 text-gray-500 text-xs'>Max size per file ~1.5MB (transport limit 2MB)</div>
                                 </div>
                                 {files && files.length > 0 && (
                                     <div className="wfp--dropzone__file-list mt-4">
@@ -288,7 +360,7 @@ const RFQModalForm = (props) => {
                                     }}
                                     type="button"
                                     onClick={() => {
-                                        console.log('[RFQ] Cancel clicked, closing modal');
+                                        // console.log('[RFQ] Cancel clicked, closing modal');
                                         setOpen(false);
                                     }}
                                 >
@@ -307,7 +379,7 @@ const RFQModalForm = (props) => {
                                     }}
                                     type="button"
                                     onPress={() => {
-                                        console.log('[RFQ] Submit pressed, calling formApi.submitForm()');
+                                        // console.log('[RFQ] Submit pressed, calling formApi.submitForm()');
                                         formApi.submitForm();
                                     }}
                                     disabled={createState?.loading}

package/src/components/RFQPage/quoteDetail.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import Image from '@magento/venia-ui/lib/components/Image';
-import { Link, useParams, useLocation } from 'react-router-dom';
+import { useParams, useLocation, useHistory } from 'react-router-dom';
 import Button from '@magento/venia-ui/lib/components/Button';
 import ChatContent from '../LiveChat/chatContent';
 import cn from 'classnames';
@@ -10,16 +10,51 @@ import { Send } from 'iconsax-react';
 import Price from '@magento/venia-ui/lib/components/Price';
 import { useRFQ } from '@riosst100/pwa-marketplace/src/talons/RFQ/useRFQ';
 import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { useToasts } from '@magento/peregrine/lib';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import {
+    useApolloClient
+} from '@apollo/client';
 
 const quoteDetail = () => {
+    const history = useHistory();
+
     const { formatMessage } = useIntl();
     const { urlKey } = useParams();
     const location = useLocation();
     const locationRfq = location && location.state && location.state.rfq ? location.state.rfq : null;
-    const { loadRfqDetail, rfqDetailState, handleSendRfqMessage, startDetailPolling, stopDetailPolling, handleConvertQuickrfqToCart } = useRFQ();
+    const { fetchCartId, addToCartResponseData, isAddProductLoading, errorAddingProductToCart, loadRfqDetail, rfqDetailState, handleSendRfqMessage, startDetailPolling, stopDetailPolling, handleConvertQuickrfqToCart } = useRFQ();
+
+    const apolloClient = useApolloClient();
+    const [{ cartId }, { createCart, removeCart }] = useCartContext();
+
+    useEffect(async() => {
+        if (
+            addToCartResponseData 
+            && !isAddProductLoading 
+            && !errorAddingProductToCart
+        ) {
+            try {
+                await removeCart();
+                await apolloClient.clearCacheData(apolloClient, 'cart');
+
+                // masked_cart_id
+                await createCart({ fetchCartId });
+
+                history.push('/checkout');
+            } catch (cleanupErr) {
+                // eslint-disable-next-line no-console
+                console.log(cleanupErr);
+            }
+
+            
+        }
+    }, [history, fetchCartId, apolloClient, removeCart, createCart, addToCartResponseData, errorAddingProductToCart, isAddProductLoading]);
+
     const [messageText, setMessageText] = useState('');
     const [isSending, setIsSending] = useState(false);
     const [sendError, setSendError] = useState(null);
+    
     const detailData = rfqDetailState && rfqDetailState.data ? rfqDetailState.data.quickrfqDetail : null;
     const detailLoading = rfqDetailState ? rfqDetailState.loading : false;
     const detailError = rfqDetailState ? rfqDetailState.error : null;
@@ -27,10 +62,9 @@ const quoteDetail = () => {
         id: 'Quotes.pageTitleTextQuoteDetail',
         defaultMessage: 'Quote Detail'
     });
-
-    // prefer image from info_buy_request if available; otherwise use placeholder
-    const urlImage = 'https://pwa-tcgcollective.local:8255/media/catalog/product/s/-/s-l1600_6__1.jpg?auto=webp&format=pjpg&width=495&height=618.75&fit=cover';
-
+    
+    const placeholderImage = 'https://pwa-tcgcollective.local:8255/media/catalog/product/s/-/s-l1600_6__1.jpg?auto=webp&format=pjpg&width=495&height=618.75&fit=cover';
+    
     useEffect(() => {
         if (!locationRfq) {
             const fromParam = urlKey ? parseInt(urlKey, 10) : NaN;
@@ -311,8 +345,8 @@ const quoteDetail = () => {
                 <div className='relative flex w-full md_w-6/12 justify-center flex-col mb-10 md_mb-0'>
                     <Image
                         alt='product image'
-                        className="relative max-w-[300px]"
-                        src={urlImage}
+                        className="relative max-w-[200px]"
+                        src={rfq && rfq.image_url ? rfq.image_url : placeholderImage}
                         classes={{
                             root: ' relative self-center mb-5'
                         }}
@@ -334,32 +368,15 @@ const quoteDetail = () => {
                         classes={{
                             content: 'capitalize text-[16px] font-medium'
                         }}
-                        disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue)}
+                        // disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue) || status === 'Done'}
                         aria-busy={isConverting}
-                        onPress={async () => {
-                            const qid = quickrfqIdValue;
-                            if (!qid || isNaN(qid)) return;
-                            try {
-                                setConvertError(null);
-                                setConvertSuccess(null);
-                                setIsConverting(true);
-                                const res = await handleConvertQuickrfqToCart(qid);
-                                const payload = res && res.data && res.data.convertQuickrfqToCart ? res.data.convertQuickrfqToCart : null;
-                                if (payload && payload.status) {
-                                    setConvertSuccess(payload.message || 'Converted to cart.');
-                                } else {
-                                    setConvertError('Failed to convert quote to cart.');
-                                }
-                            } catch (e) {
-                                setConvertError('Failed to convert quote to cart.');
-                            } finally {
-                                setIsConverting(false);
-                            }
-                        }}
+                        onClick={handleConvertQuickrfqToCart}
                     >
                         {isConverting
                             ? formatMessage({ id: 'Quotes.converting', defaultMessage: 'Add To Cart…' })
-                            : formatMessage({ id: 'Quotes.addToCart', defaultMessage: 'Add To Cart' })}
+                            : status === 'Done'
+                                ? formatMessage({ id: 'Quotes.completed', defaultMessage: 'Completed' })
+                                : formatMessage({ id: 'Quotes.addToCart', defaultMessage: 'Add To Cart' })}
                     </Button>
                     {convertError ? (
                         <div className='text-red-600 text-[12px] mt-2 text-center'>{convertError}</div>

package/src/components/ShowMore/showMore.js

@@ -82,25 +82,28 @@ const ShowMore = props => {
     if (shopby == 'sc_brands') {
         additionalFilter = '&shopby=release&active_tab=brand';
     }
-
+    
     const setRelases = newAvailableGroups && newAvailableGroups.length && newAvailableGroups.map((group, index) => {
         const optionsResult = [];
 
         if (active === 'all' || active === group) {
             dataResult[group] && dataResult[group].length && dataResult[group].map((option, index) => {
                 const { count, label, value } = option;
+                
+                const attrCodeParam = attributeData.attribute_code + '[filter]';
+                const attrValParam = label + ',' + value;
 
-                const filter = attributeData.attribute_code + '[filter]=' + label + ',' + value;
-                const params = filterSearch ? filterSearch + '&' + filter + additionalFilter : '?' + filter + additionalFilter;
+                const params = new URLSearchParams();
+                params.set(attrCodeParam, attrValParam);
 
                 const categoryUrl = resourceUrl(
-                    `/${category?.url_path}${categoryUrlSuffix || ''}${params}`
+                    `/${category?.url_path}${categoryUrlSuffix || ''}${'?' + params.toString()}`
                 );
 
                 optionsResult.push(<li key={index} className='list-none'>
                     <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-0">
                         {label}
-                         {/* <span className='text-[12px]'>({count})</span> */}
+                        {/* <span className='text-[12px]'>({count})</span> */}
                     </Link>
                 </li>)
             });

package/src/intercept.js

@@ -185,6 +185,7 @@ module.exports = targets => {
       pattern: "/favorite-seller",
       path: require.resolve("./components/FavoriteSellerPage/index.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -192,6 +193,7 @@ module.exports = targets => {
       pattern: "/quotes",
       path: require.resolve("./components/RFQPage/index.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -199,6 +201,7 @@ module.exports = targets => {
       pattern: "/quotes/:urlKey",
       path: require.resolve("./components/RFQPage/quoteDetailPage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -206,6 +209,7 @@ module.exports = targets => {
       pattern: "/return",
       path: require.resolve("./components/RMAPage/index.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -213,6 +217,7 @@ module.exports = targets => {
       pattern: "/return/select",
       path: require.resolve("./components/RMAPage/RMASelectPage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -220,6 +225,7 @@ module.exports = targets => {
       pattern: "/return/view/:urlKey",
       path: require.resolve("./components/RMAPage/RMADetailPage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -227,6 +233,7 @@ module.exports = targets => {
       pattern: "/return/create/:urlKey",
       path: require.resolve("./components/RMAPage/RMACreatePage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -234,6 +241,7 @@ module.exports = targets => {
       pattern: "/order-history/view/:urlKey",
       path: require.resolve("./components/OrderDetail/orderDetailPage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -241,6 +249,7 @@ module.exports = targets => {
       pattern: "/messages",
       path: require.resolve("./components/MessagesPage/index.js"),
       authed: true,
+      redirectTo: "/sign-in"
     }
   ];
 

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategory.js

@@ -107,10 +107,6 @@ export const useCategory = props => {
         loading: introspectionLoading
     } = useQuery(getFilterInputsQuery);
 
-    // console.log(introspectionCalled)
-    // console.log(introspectionLoading)
-    // console.log(introspectionData)
-
     // Create a type map we can reference later to ensure we pass valid args
     // to the graphql query.
     // For example: { category_id: 'FilterEqualTypeInput', price: 'FilterRangeTypeInput' }

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.js

@@ -21,6 +21,7 @@ import TrainsSets from '@riosst100/pwa-marketplace/src/components/TrainsSets/tra
 import SetsData from '@riosst100/pwa-marketplace/src/components/SetsData/setsData';
 import FilterContent from '@riosst100/pwa-marketplace/src/components/FilterContent/filterContent';
 import ShowMore from '@riosst100/pwa-marketplace/src/components/ShowMore/showMore';
+import AgeVerification from '@riosst100/pwa-marketplace/src/components/AgeVerification'
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -205,6 +206,7 @@ const Category = props => {
     return (
         <Fragment>
             <Meta name="description" content={metaDescription} />
+            <AgeVerification pageType="CATEGORY" />
             {categoryContent}
         </Fragment>
     );

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useEffect, Suspense, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 

package/src/overwrites/venia-ui/lib/RootComponents/Product/product.js

@@ -8,6 +8,7 @@ import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
 import ProductFullDetail from '@magento/venia-ui/lib/components/ProductFullDetail';
 import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
 import ProductShimmer from '@magento/venia-ui/lib/RootComponents/Product/product.shimmer';
+import AgeVerification from '@riosst100/pwa-marketplace/src/components/AgeVerification'
 
 /*
  * As of this writing, there is no single Product query type in the M2.3 schema.
@@ -46,6 +47,7 @@ const Product = props => {
         <Fragment>
             <StoreTitle>{product.name}</StoreTitle>
             <Meta name="description" content={product.meta_description} />
+            <AgeVerification pageType="PRODUCT" product={product} />
             <ProductFullDetail product={product} />
         </Fragment>
     );

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -31,29 +31,6 @@ const Adapter = props => {
         return null;
     }
 
-    // console.log('isMaintenance',isMaintenance)
-
-    // useEffect(() => {
-    //     const fetchData = async () => {
-    //         axios.get(apiBase).then((response) => {
-    //             // setIsMaintenance(false)
-    //         }).catch((error) => {
-    //             const status = error.response.status;
-    //             if (status != 200) {
-    //                 console.log('status',status)
-    //                 return <MaintenancePage />;
-    //                 // setIsMaintenance(true)
-    //             }
-    //         });
-    //     };
-    
-    //     fetchData();
-   
-
-    // if (isMaintenance) {
-    //     return <MaintenancePage />;
-    // }
-
     const websiteCodes = [];
     const websiteStores = useMemo(() => ({}), []);
     const storeCurrencies = useMemo(() => ({}), []);

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -41,13 +41,13 @@ import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel
 import RFQ from '@riosst100/pwa-marketplace/src/components/RFQ';
 import LinkToOtherStores from '@riosst100/pwa-marketplace/src/components/LinkToOtherStores';
 import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
-import { useLocation } from 'react-router-dom';
 import Icon from '@magento/venia-ui/lib/components/Icon';
 import { ShoppingCart } from 'react-feather';
 import MessagesModal from '@riosst100/pwa-marketplace/src/components/LiveChat/MessagesModal';
 import SellerOperations from '@riosst100/pwa-marketplace/src/talons/Seller/seller.gql';
 
-import AgeVerificationModal from '@riosst100/pwa-marketplace/src/components/AgeVerification/ageVerificationModal';
+import { useLocation, useHistory } from 'react-router-dom';
+import AgeVerification from '@riosst100/pwa-marketplace/src/components/AgeVerification'
 
 import { totalListings, lowestPrice } from '@riosst100/pwa-marketplace/src/components/CrossSeller/crossSellerBuy';
 
@@ -87,6 +87,8 @@ const ProductDetailsCollapsible = (props) => {
 const ProductFullDetail = props => {
     const { product } = props;
 
+    const history = useHistory();
+
     const { search } = useLocation();
 
     const params = new URLSearchParams(search);
@@ -174,7 +176,10 @@ const ProductFullDetail = props => {
             message: formatMessage({ id: 'messages.messageSent', defaultMessage: 'Message sent successfully.' }),
             timeout: 3000
         });
-        await refetchMessages({ fetchPolicy: 'network-only' });
+        if (result) {
+            var messageId = result?.data?.customerSendMessage.message_id;
+            history.push('/messages?id=' + messageId);
+        }
         return result?.data?.customerSendMessage;
     };
 
@@ -812,7 +817,7 @@ const ProductFullDetail = props => {
         <Fragment>
             {breadcrumbs}
             {productPreviewMessages}
-            {/* <AgeVerificationModal /> */}
+            <AgeVerification />
             <Form
                 className={classes.root}
                 data-cy="ProductFullDetail-root"

package/src/talons/AgeVerification/ageVerification.gql.js

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+export const GET_AGE_VERIFICATION_CONFIG_QUERY = gql`
+    query GetAgeVerificationConfig(
+        $attributeCode: String
+        $attributeOption: String
+    ) {
+        getAgeVerificationConfig(
+            attribute_code: $attributeCode
+            attribute_option: $attributeOption
+        ) {
+            status
+            minimum_age
+        }
+    }
+`;
+
+export const GET_CATALOG_CONFIG_DATA_QUERY = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            marketplace_menu_topfilters_attributes
+        }
+    }
+`;
+
+export default {
+    getAgeVerificationConfigQuery: GET_AGE_VERIFICATION_CONFIG_QUERY,
+    getMenuTopFiltersAttributesConfigDataQuery: GET_CATALOG_CONFIG_DATA_QUERY
+};