@riosst100/pwa-marketplace 3.2.9 → 3.3.1

package/src/talons/AgeVerification/useAgeVerification.js

@@ -0,0 +1,126 @@
+import { useQuery, useLazyQuery } from '@apollo/client';
+import { useMemo, useEffect } from 'react';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './ageVerification.gql';
+
+export const useAgeVerification = props => {
+    const { pageType, product } = props;
+    
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getAgeVerificationConfigQuery, getMenuTopFiltersAttributesConfigDataQuery } = operations;
+
+    const { location } = globalThis;
+
+    const { data: storeConfigData } = useQuery(getMenuTopFiltersAttributesConfigDataQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const activeMenuTopFilterAttribute = useMemo(() => {
+        if (storeConfigData) {
+
+            const menuTopFiltersAttributes = storeConfigData.storeConfig.marketplace_menu_topfilters_attributes;
+            if (!menuTopFiltersAttributes) {
+                return null;
+            }
+
+            const menuTopFiltersAttributeCodes = Object.values(JSON.parse(menuTopFiltersAttributes)).map(
+                item => item.attribute_code
+            );
+
+            if (!menuTopFiltersAttributeCodes) {
+                return null;
+            }
+
+            let result = null;
+            
+            if (pageType == "CATEGORY") {
+                const params = new URLSearchParams(location.search);
+                if (!params.size) {
+                    return null;
+                }
+                
+                params.forEach((value, param) => {
+                    const attrCode = param.replace("[filter]", "");
+                    if (attrCode && menuTopFiltersAttributeCodes.includes(attrCode)) {
+                        const attrOptionLabel = value.split(",")[0];
+                        result = {
+                            attributeCode: attrCode,
+                            attributeOption: attrOptionLabel
+                        };
+                        
+                        return true;
+                    }
+                });
+            }
+
+            if (pageType == "PRODUCT" && product) {
+                product.custom_attributes.map(attr => {
+                    const attrCode = attr.attribute_metadata?.code;
+                    if (attrCode && menuTopFiltersAttributeCodes.includes(attrCode)) {
+                        let label = null;
+
+                        // SELECT / MULTISELECT
+                        if (attr?.selected_attribute_options?.attribute_option?.length) {
+                            label = attr.selected_attribute_options.attribute_option.length ?
+                            attr.selected_attribute_options.attribute_option.map(o => o.label)[0] : '';
+                            // label = labelArr?.attributeOption?.[0] ?? "";
+                        }
+
+                        // TEXT / NUMBER
+                        if (attr?.entered_attribute_value?.value) {
+                            label = attr.entered_attribute_value.value;
+                        }
+
+                        result = {
+                            attributeCode: attrCode,
+                            attributeOption: label
+                        };
+                    }
+                });
+            }
+
+            return result;
+        }
+    }, [storeConfigData, pageType, product]);
+    
+    const [getAgeVerificationConfig, { data, error, loading }] = useLazyQuery(
+        getAgeVerificationConfigQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    
+   useEffect(() => {
+        if (activeMenuTopFilterAttribute) {
+            getAgeVerificationConfig({
+                variables: {
+                    attributeCode: activeMenuTopFilterAttribute.attributeCode,
+                    attributeOption: activeMenuTopFilterAttribute.attributeOption
+                }
+            });
+        }
+    }, [activeMenuTopFilterAttribute, getAgeVerificationConfig]);
+
+    const ageVerificationConfig = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        
+        const getAgeVerificationConfig = data.getAgeVerificationConfig;
+        if (!getAgeVerificationConfig) {
+            return null;
+        }
+
+        return getAgeVerificationConfig;
+    }, [data]);
+
+    return {
+        error,
+        loading,
+        ageVerificationConfig
+    };
+};

package/src/talons/MessagesPage/messagesPage.gql.js

@@ -223,6 +223,10 @@ export const GET_CUSTOMER_SELLER_MESSAGES = gql`
                     total_pages
                 }
                 items {
+                    seller {
+                        name
+                        url_key
+                    }
                     message_id
                     subject
                     description

package/src/talons/RFQ/rfq.gql.js

@@ -94,6 +94,7 @@ export const GET_QUICK_RFQ_DETAIL_QUERY = gql`
             date_need_quote
             email
             expiry
+            image_url
             info_buy_request
             messages {
                 created_at
@@ -166,7 +167,14 @@ export const CONVERT_QUICK_RFQ_TO_CART_MUTATION = gql`
     }
 `;
 
+export const CREATE_CART = gql`
+    mutation createCart {
+        cartId: createEmptyCart
+    }
+`;
+
 export default {
+    createCartMutation: CREATE_CART,
     convertQuickrfqToCartMutation: CONVERT_QUICK_RFQ_TO_CART_MUTATION,
     sendRfqMessageMutation: SEND_RFQ_MESSAGE_MUTATION,
     getQuickRfqDetailQuery: GET_QUICK_RFQ_DETAIL_QUERY,

package/src/talons/RFQ/useRFQ.js

@@ -4,14 +4,23 @@ import { useCallback } from 'react';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './rfq.gql';
 
+import { useLocation } from 'react-router-dom';
+
 export const useRFQ = props => {
+	const { pathname } = useLocation();
+	const rfqQuoteId = pathname.split('/')[2];
+
+	console.log('rfqQuoteId',rfqQuoteId)
+
 	const operations = mergeOperations(DEFAULT_OPERATIONS, props?.operations);
+
 	const {
 		getQuickRfqListQuery,
 		getQuickRfqDetailQuery,
 		createQuickRfqMutation,
 		sendRfqMessageMutation,
-		convertQuickrfqToCartMutation
+		convertQuickrfqToCartMutation,
+		createCartMutation
 	} = operations;
 
 	const [fetchRfqList, rfqListState] = useLazyQuery(getQuickRfqListQuery, {
@@ -28,7 +37,20 @@ export const useRFQ = props => {
 
 	const [createQuickRfq, createState] = useMutation(createQuickRfqMutation);
 	const [sendRfqMessage, sendMessageState] = useMutation(sendRfqMessageMutation);
-	const [convertQuickrfqToCart, convertState] = useMutation(convertQuickrfqToCartMutation);
+
+	const [fetchCartId] = useMutation(createCartMutation);
+	// const [convertQuickrfqToCart, convertState] = useMutation(convertQuickrfqToCartMutation);
+	
+	const convertState = null;
+
+	const [
+        convertQuickrfqToCart,
+        {
+            data: addToCartResponseData,
+            error: errorAddingProductToCart,
+            loading: isAddProductLoading
+        }
+    ] = useMutation(convertQuickrfqToCartMutation);
 
 	const loadRfqList = useCallback(
 		variables => fetchRfqList({ variables }),
@@ -57,12 +79,15 @@ export const useRFQ = props => {
 		[sendRfqMessage]
 	);
 
-	const handleConvertQuickrfqToCart = useCallback(
-		quickrfqId => convertQuickrfqToCart({ variables: { quickrfqId } }),
-		[convertQuickrfqToCart]
-	);
+	const handleConvertQuickrfqToCart = useCallback(() => {
+		convertQuickrfqToCart({ variables: { quickrfqId: rfqQuoteId } })
+	}, [convertQuickrfqToCart, rfqQuoteId]);
 
 	return {
+		fetchCartId,
+		addToCartResponseData, 
+		isAddProductLoading, 
+		errorAddingProductToCart,
 		loadRfqList,
 		rfqListState,
 		loadRfqDetail,

package/src/talons/Seller/useSeller.js

@@ -154,7 +154,10 @@ export const useSeller = props => {
             }),
             timeout: 3000
         });
-        history.push('/messages');
+        if (result) {
+            var messageId = result?.data?.customerSendMessage.message_id;
+            history.push('/messages?id=' + messageId);
+        }
         return result?.data?.customerSendMessage;
     }, [sendMessage, refetchMessages, addToast, formatMessage]);
 

package/src/components/AgeVerification/ageVerificationModal.js

@@ -1,163 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import modalClasses from '@riosst100/pwa-marketplace/src/components/AgeVerification/ageVerificationModal.module.css';
-// import { AgeVerificationModalShimmer } from '@riosst100/pwa-marketplace/src/components/SellerCoupon';
-
-// Reuse day diff logic
-const dayDiff = (toDate) => {
-    if (!toDate) return null;
-    const end = new Date(toDate);
-    if (Number.isNaN(end.getTime())) return null;
-    const now = new Date();
-    const diffMs = end.setHours(23, 59, 59, 999) - now.getTime();
-    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
-    return diffDays;
-};
-
-// Simple portal root fallback
-const getPortalRoot = () => {
-    let root = document.getElementById('seller-coupon-portal');
-    if (!root) {
-        root = document.createElement('div');
-        root.id = 'seller-coupon-portal';
-        document.body.appendChild(root);
-    }
-    return root;
-};
-
-const AgeVerificationModal = ({
-    couponData,
-    couponError,
-    setCouponModalOpen,
-    couponModalOpen,
-    couponLoading,
-    isCopyAction,
-    triggerLabel = 'View Seller Coupons',
-    onSelectCoupon,
-    onTriggerRender, // optional custom trigger renderer
-    autoOpen = false, // auto open modal when mounted
-    closeOnClaim = true // close after claiming
-}) => {
-    // const [open, setOpen] = useState(false);
-    const [copied, setCopied] = useState(null);
-
-    const items = couponData?.sellerCoupons?.items || [];
-
-    const handleOpen = () => setCouponModalOpen(true);
-    const handleClose = () => setCouponModalOpen(false);
-
-    useEffect(() => {
-        if (!couponModalOpen) return;
-        const onKey = (e) => {
-            if (e.key === 'Escape') {
-                handleClose();
-            }
-        };
-        document.addEventListener('keydown', onKey);
-        return () => document.removeEventListener('keydown', onKey);
-    }, [couponModalOpen]);
-
-    const handleClaim = async (item) => {
-        try {
-            if (navigator?.clipboard?.writeText) {
-                await navigator.clipboard.writeText(item.code);
-            }
-        } catch (_) {
-            /* ignore */
-        }
-        console.log('item.code',item.code)
-        setCopied(item.code);
-        setTimeout(() => setCopied(null), 2000);
-        if (!isCopyAction) {
-            if (onSelectCoupon) onSelectCoupon(item);
-            if (closeOnClaim) handleClose();
-        }
-    };
-
-    // Auto open behavior
-    useEffect(() => {
-        if (autoOpen && !couponModalOpen) {
-            setCouponModalOpen(true);
-        }
-    }, [autoOpen, couponModalOpen]);
-
-    console.log('copied',copied)
-
-    const modal = couponModalOpen ? (
-        <div className={modalClasses.overlay} role="dialog" aria-modal="true" aria-label="Seller coupons list">
-            <div className={modalClasses.backdrop} onClick={handleClose} />
-            <div className={modalClasses.dialog}>
-                <div className={modalClasses.header}>
-                    <h2 className={modalClasses.title}>{isCopyAction ? 'Store Coupons' : 'Apply Coupon'}</h2>
-                    <button type="button" className={modalClasses.closeBtn} onClick={handleClose} aria-label="Close coupon modal">×</button>
-                </div>
-                <div className={modalClasses.body}>
-                    {/* {couponLoading && <AgeVerificationModalShimmer />} */}
-                    {!couponLoading && couponError && <p className={modalClasses.metaText}>Failed to load coupons.</p>}
-                    {!couponLoading && !couponError && !items.length && <p className={modalClasses.metaText}>No coupons available.</p>}
-                    {!couponLoading && !couponError && items.length > 0 && (
-                        <div className={modalClasses.stack}>
-                            {items.map(item => {
-                                const key = item.couponcode_id || item.coupon_id || item.code;
-                                const daysLeft = dayDiff(item.to_date);
-                                const expiryLabel = daysLeft === null
-                                    ? 'No expiry'
-                                    : daysLeft <= 0
-                                        ? 'Ends today'
-                                        : `Ends in ${daysLeft} day${daysLeft > 1 ? 's' : ''}`;
-                                const title = item.description || item.name || `Discount ${item.discount_amount || ''}`;
-                                return (
-                                    <div key={key} className={modalClasses.card} role="group" aria-label={`Coupon ${item.code}`}>
-                                        <div className={modalClasses.perf} aria-hidden="true" />
-                                        <div className={modalClasses.content}>
-                                            <div className={modalClasses.title}>{title}</div>
-                                            <div className={modalClasses.subtext}>Code: <span className={modalClasses.code}>{item.code}</span></div>
-                                            <div className={modalClasses.expiry}>{expiryLabel}</div>
-                                        </div>
-                                        <div className={modalClasses.divider} aria-hidden="true" />
-                                        <div className={modalClasses.actions}>
-                                            {isCopyAction ? <button
-                                                type="button"
-                                                className={copied === item.code ? modalClasses.claimedBtn : modalClasses.claimBtn}
-                                                onClick={() => handleClaim(item)}
-                                                aria-label={`Claim coupon ${item.code}`}
-                                            >
-                                                {copied === item.code ? 'Copied' : 'Claim'}
-                                            </button> : 
-                                            <button
-                                                type="button"
-                                                className={copied === item.code ? modalClasses.claimedBtn : modalClasses.claimBtn}
-                                                onClick={() => handleClaim(item)}
-                                                aria-label={`Apply coupon ${item.code}`}
-                                            >
-                                                {copied === item.code ? 'Applied' : 'Apply'}
-                                            </button>}
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
-    ) : null;
-
-    const trigger = onTriggerRender
-        ? onTriggerRender({ couponModalOpen, setCouponModalOpen, handleOpen })
-        : (
-            <button
-                type="button"
-                className={modalClasses.triggerBtn}
-                onClick={handleOpen}
-                aria-haspopup="dialog"
-                aria-expanded={couponModalOpen}
-            >
-                {triggerLabel}
-            </button>
-        );
-
-    return <>{onTriggerRender ? trigger : trigger}{couponModalOpen ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
-};
-
-export default AgeVerificationModal;

package/src/components/AgeVerification/sellerCoupon.js

@@ -1,119 +0,0 @@
-import React, { useMemo, useState, useCallback } from 'react';
-import classes from '@riosst100/pwa-marketplace/src/components/AgeVerification/sellerCoupon.module.css';
-import SellerCouponCheckout from '@riosst100/pwa-marketplace/src/components/SellerCoupon/sellerCouponCheckout';
-
-const dayDiff = (toDate) => {
-    if (!toDate) return null;
-    const end = new Date(toDate);
-    if (Number.isNaN(end.getTime())) return null;
-    const now = new Date();
-    const diffMs = end.setHours(23, 59, 59, 999) - now.getTime();
-    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
-    return diffDays;
-};
-
-const SellerCoupon = ({ couponData, couponError, couponLoading }) => {
-    if (couponLoading) {
-        return '';
-        // return <div className={classes.container}><p className={classes.metaText}>Loading coupons...</p></div>;
-    }
-
-    if (couponError) {
-        return '';
-        // return <div className={classes.container}><p className={classes.metaText}>Failed to load coupons.</p></div>;
-    }
-
-    const items = couponData?.sellerCoupons?.items || [];
-
-    if (!items.length) {
-        return '';
-        // return <div className={classes.container}><p className={classes.metaText}>No coupons available.</p></div>;
-    }
-
-    const [copied, setCopied] = useState(null);
-    const [couponModalOpen, setCouponModalOpen] = useState(false);
-
-    const handleClaim = async (code) => {
-        try {
-            if (navigator?.clipboard?.writeText) {
-                await navigator.clipboard.writeText(code);
-            }
-        } catch (_) {
-            // ignore clipboard issues
-        }
-        setCopied(code);
-        setTimeout(() => setCopied(null), 2000);
-    };
-
-    const handleViewCoupons = useCallback(() => {
-        setCouponModalOpen(true);
-    }, [setCouponModalOpen]);
-
-    return (
-        <section className={classes.container} aria-label="Seller coupons">
-            <div className={classes.scroller}>
-                {items.slice(0, 3).map(item => {
-                    const key = item.couponcode_id || item.coupon_id || item.code;
-                    const daysLeft = dayDiff(item.to_date);
-                    const expiryLabel = daysLeft === null
-                        ? 'No expiry'
-                        : daysLeft <= 0
-                            ? 'Ends today'
-                            : `Ends in ${daysLeft} day${daysLeft > 1 ? 's' : ''}`;
-
-                    const title = item.description || item.name || `Discount ${item.discount_amount || ''}`;
-
-                    return (
-                        <div className={classes.card} key={key} role="group" aria-label={`Coupon ${item.code}`}>
-                            <div className={classes.perf} aria-hidden="true" />
-                            <div className={classes.content}>
-                                <div className={classes.title}>{title}</div>
-                                <div className={classes.subtext}>Code: <span className={classes.code}>{item.code}</span></div>
-                                <div className={classes.expiry}>{expiryLabel}</div>
-                            </div>
-                            <div className={classes.divider} aria-hidden="true" />
-                            <div className={classes.actions}>
-                                <button
-                                    type="button"
-                                    className={copied === item.code ? classes.claimedBtn : classes.claimBtn}
-                                    onClick={() => handleClaim(item.code)}
-                                    aria-label={`Claim coupon ${item.code}`}
-                                >
-                                    {copied === item.code ? 'Copied' : 'Claim'}
-                                </button>
-                            </div>
-                        </div>
-                    );
-                })}
-                {couponModalOpen && (
-                    <SellerCouponCheckout
-                        couponData={couponData}
-                        couponLoading={couponLoading}
-                        couponError={couponError}
-                        autoOpen={true}
-                        closeOnClaim={true}
-                        couponModalOpen={couponModalOpen}
-                        setCouponModalOpen={setCouponModalOpen}
-                        onSelectCoupon={handleClaim}
-                        onTriggerRender={() => null}
-                        isCopyAction={true}
-                    />
-                )}
-                <div className={classes.viewAllCard} role="group" aria-label="View All Coupons">
-                    <div className={classes.actions}>
-                        <button
-                            type="button"
-                            className={classes.viewAllBtn}
-                            onClick={handleViewCoupons}
-                            aria-label="View All Coupons"
-                        >
-                            View All Coupons
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default SellerCoupon;