@riosst100/pwa-marketplace 3.3.0 → 3.3.2

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/ProductFAQ/productFaq.gql.js

@@ -0,0 +1,39 @@
+import { gql } from '@apollo/client';
+
+export const GET_PRODUCT_FAQ_LIST_QUERY = gql`
+	query getProductFaqList($productId: Int!) {
+		productFaqList(product_id: $productId) {
+			question_id
+			seller_id
+			customer_name
+			customer_email
+			category_id
+			store_id
+			title
+			title_size
+			title_color
+			title_background
+			border_width
+			border_color
+			border_radius
+			body_color
+			body_background
+			margin_bottom
+			margin_left
+			icon
+			answer
+			status
+			position
+			creation_time
+			update_time
+			meta_keywords
+			meta_description
+			page_title
+		}
+	}
+`;
+
+export default {
+	getProductFaqListQuery: GET_PRODUCT_FAQ_LIST_QUERY,
+};
+

package/src/talons/ProductFAQ/useProductFAQ.js

@@ -0,0 +1,48 @@
+import { useLazyQuery } from '@apollo/client';
+import { useCallback } from 'react';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './productFaq.gql';
+
+export const useProductFAQ = props => {
+	const operations = mergeOperations(DEFAULT_OPERATIONS, props?.operations);
+	const { getProductFaqListQuery } = operations;
+
+	const [fetchProductFaqList, productFaqListState] = useLazyQuery(
+		getProductFaqListQuery,
+		{
+			fetchPolicy: 'network-only',
+			nextFetchPolicy: 'cache-first',
+			notifyOnNetworkStatusChange: true,
+			errorPolicy: 'all'
+		}
+	);
+
+	const loadProductFaqList = useCallback(
+		variables => {
+			const id = variables && variables.productId;
+			const parsedId = typeof id === 'number' ? id : parseInt(id, 10);
+			if (isNaN(parsedId)) {
+				return Promise.resolve(null);
+			}
+			return fetchProductFaqList({ variables: { productId: parsedId } });
+		},
+		[fetchProductFaqList]
+	);
+
+	return {
+		loadProductFaqList,
+		productFaqListState,
+		startPolling:
+			productFaqListState && productFaqListState.startPolling
+				? productFaqListState.startPolling
+				: undefined,
+		stopPolling:
+			productFaqListState && productFaqListState.stopPolling
+				? productFaqListState.stopPolling
+				: undefined
+	};
+};
+
+export default useProductFAQ;
+

package/src/talons/RFQ/useRFQ.js

@@ -10,8 +10,6 @@ export const useRFQ = props => {
 	const { pathname } = useLocation();
 	const rfqQuoteId = pathname.split('/')[2];
 
-	console.log('rfqQuoteId',rfqQuoteId)
-
 	const operations = mergeOperations(DEFAULT_OPERATIONS, props?.operations);
 
 	const {

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;

package/src/components/AgeVerification/sellerCouponCheckout.js

@@ -1,164 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import listClasses from '@riosst100/pwa-marketplace/src/components/AgeVerification/sellerCoupon.module.css';
-import modalClasses from '@riosst100/pwa-marketplace/src/components/AgeVerification/sellerCouponCheckout.module.css';
-import { SellerCouponCheckoutShimmer } 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 SellerCouponCheckout = ({
-    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 && <SellerCouponCheckoutShimmer />}
-                    {!couponLoading && couponError && <p className={listClasses.metaText}>Failed to load coupons.</p>}
-                    {!couponLoading && !couponError && !items.length && <p className={listClasses.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={listClasses.card} role="group" aria-label={`Coupon ${item.code}`}>
-                                        <div className={listClasses.perf} aria-hidden="true" />
-                                        <div className={listClasses.content}>
-                                            <div className={listClasses.title}>{title}</div>
-                                            <div className={listClasses.subtext}>Code: <span className={listClasses.code}>{item.code}</span></div>
-                                            <div className={listClasses.expiry}>{expiryLabel}</div>
-                                        </div>
-                                        <div className={listClasses.divider} aria-hidden="true" />
-                                        <div className={listClasses.actions}>
-                                            {isCopyAction ? <button
-                                                type="button"
-                                                className={copied === item.code ? listClasses.claimedBtn : listClasses.claimBtn}
-                                                onClick={() => handleClaim(item)}
-                                                aria-label={`Claim coupon ${item.code}`}
-                                            >
-                                                {copied === item.code ? 'Copied' : 'Claim'}
-                                            </button> : 
-                                            <button
-                                                type="button"
-                                                className={copied === item.code ? listClasses.claimedBtn : listClasses.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 SellerCouponCheckout;