@riosst100/pwa-marketplace 3.0.0 → 3.0.3

package/src/components/SellerCoupon/sellerCoupon.module.css

@@ -0,0 +1,110 @@
+.container{
+    margin:16px 0;
+    padding:0 8px;
+}
+.heading{
+    font-size:18px;
+    font-weight:600;
+    margin:0 0 8px;
+    color:#111
+}
+.metaText{
+    color:#666;
+    margin:0;
+}
+.scroller{
+    display:flex;
+    gap:16px;
+    overflow-x:auto;
+    padding:8px 4px 12px;
+    scroll-snap-type:x mandatory;
+}
+.card{
+    position:relative;
+    background:#fff8f1;
+    border:1px solid #ffb891;
+    border-left:none;
+    min-width:260px;
+    max-width:320px;
+    display:flex;
+    align-items:stretch;
+    padding:0 12px 0 24px;
+    scroll-snap-align:start;
+    overflow:hidden;
+    --border-color:#ffb891;
+}
+.perf{
+        position:absolute;
+        inset:0 auto 0 0;
+        width:4px;
+        background:#fff;
+        /* border-top-left-radius:8px;
+        border-bottom-left-radius:8px; */
+        pointer-events:none;
+}
+.card::before{
+    content:"";
+    position:absolute;
+    top:0;bottom:0;left:0px;
+    z-index:9;
+    width:1px;
+    background:repeating-linear-gradient(to bottom,#ffb891 0,#ffb891 0px,transparent 6px,transparent 10px);
+}
+.perf:before{
+        content:"";
+        position:absolute;
+        inset:0;
+        background:
+            radial-gradient(circle at 0 .375rem, transparent 0, transparent .1875rem, var(--border-color) .1875rem, var(--border-color) .25rem, transparent .25rem) repeat-y;
+        background-size:1rem 0.66rem;
+        background-position:0 0;
+}
+.content{
+    flex:1 1 auto;
+    padding:10px 12px 10px 0;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+}
+.title{
+    color:#f76b1c;
+    font-weight:700;
+    margin-bottom:4px;
+}
+.subtext{
+    color:#444;
+    font-size:13px;
+    margin-bottom:4px;
+}
+.code{
+    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+    font-weight:600;
+}
+.expiry{
+    color:#a94442;
+    font-size:12px;
+}
+.actions{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    padding:10px 0;
+}
+.claimBtn{
+    background: #f76b1c;
+    color:#fff;
+    border:none;
+    border-radius:6px;
+    padding:8px 18px;
+    font-weight:600;
+    cursor:pointer;
+}
+.claimBtn:hover{
+    background:#f26313;
+}
+.divider{
+    width:1px;
+    background:repeating-linear-gradient(to bottom,#ffb891 0,#ffb891 5px,transparent 5px,transparent 10px);
+    align-self:stretch;
+    margin:0 12px 0 4px;
+}

package/src/components/SellerCoupon/sellerCouponCheckout.js

@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import listClasses from './sellerCoupon.module.css';
+import modalClasses from './sellerCouponCheckout.module.css';
+
+// 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,
+    couponLoading,
+    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 = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    useEffect(() => {
+        if (!open) return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                handleClose();
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [open]);
+
+    const handleClaim = async (item) => {
+        try {
+            if (navigator?.clipboard?.writeText) {
+                await navigator.clipboard.writeText(item.code);
+            }
+        } catch (_) {
+            /* ignore */
+        }
+        setCopied(item.code);
+        setTimeout(() => setCopied(null), 2000);
+        if (onSelectCoupon) onSelectCoupon(item);
+        if (closeOnClaim) handleClose();
+    };
+
+    // Auto open behavior
+    useEffect(() => {
+        if (autoOpen && !open) {
+            setOpen(true);
+        }
+    }, [autoOpen, open]);
+
+    const modal = open ? (
+        <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}>Seller Coupons</h2>
+                    <button type="button" className={modalClasses.closeBtn} onClick={handleClose} aria-label="Close coupon modal">×</button>
+                </div>
+                <div className={modalClasses.body}>
+                    {couponLoading && <p className={listClasses.metaText}>Loading coupons...</p>}
+                    {!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}>
+                                            <button
+                                                type="button"
+                                                className={listClasses.claimBtn}
+                                                onClick={() => handleClaim(item)}
+                                                aria-label={`Claim coupon ${item.code}`}
+                                            >
+                                                {copied === item.code ? 'Copied' : 'Claim'}
+                                            </button>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    ) : null;
+
+    const trigger = onTriggerRender
+        ? onTriggerRender({ open, setOpen, handleOpen })
+        : (
+            <button
+                type="button"
+                className={modalClasses.triggerBtn}
+                onClick={handleOpen}
+                aria-haspopup="dialog"
+                aria-expanded={open}
+            >
+                {triggerLabel}
+            </button>
+        );
+
+    return <>{onTriggerRender ? trigger : trigger}{open ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
+};
+
+export default SellerCouponCheckout;

package/src/components/SellerCoupon/sellerCouponCheckout.module.css

@@ -0,0 +1,85 @@
+.overlay{
+    position:fixed;
+    inset:0;
+    z-index:1000;
+    display:flex;
+    align-items:flex-start;
+    justify-content:center;
+    padding:5vh 24px;
+    font-family:inherit
+}
+.backdrop{
+    position:absolute;
+    inset:0;
+    background:rgba(0,0,0,.4);
+    backdrop-filter:blur(2px)
+}
+.dialog{
+    position:relative;
+    background:#fff;
+    border-radius:12px;
+    box-shadow:0 8px 32px rgba(0,0,0,.25);
+    width:clamp(320px,80vw,370px);
+    max-height:90vh;
+    display:flex;
+    flex-direction:column
+}
+.header{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    padding:16px 20px;
+    border-bottom:1px solid #eee
+}
+.title{
+    font-size:20px;
+    font-weight:600;
+    margin:0;
+    color:#333
+}
+.closeBtn{
+    background:none;
+    border:none;
+    font-size:24px;
+    line-height:1;
+    cursor:pointer;
+    color:#777;
+    padding:4px 8px;
+    border-radius:6px
+}
+.closeBtn:hover{
+    background:#f5f5f5;
+    color:#222
+}
+.body{
+    padding:16px 20px;
+    overflow:auto
+}
+.triggerBtn{
+    background:#f76b1c;
+    color:#fff;
+    border:none;
+    padding:10px 18px;
+    border-radius:8px;
+    font-weight:600;
+    cursor:pointer
+}
+.triggerBtn:hover{
+    background:#f26313
+}
+/* Vertical stack wrapper for existing sellerCoupon card styles */
+.stack{
+    display:flex;
+    flex-direction:column;
+    gap:16px;
+    padding:4px 2px 12px;
+}
+@media (max-width:640px){
+    .dialog{
+        width:92vw;
+        padding-bottom:8px
+    }
+    .grid{
+        grid-template-columns:repeat(auto-fill,minmax(160px,1fr))
+    }
+}

package/src/components/SellerDetail/sellerDetail.js

@@ -36,7 +36,7 @@ const SellerDetail = props => {
         mapSeller
     });
 
-    const { error, loading, seller, favoriteSellerButtonProps } = talonProps;
+    const { error, loading, seller, favoriteSellerButtonProps, couponData, couponError, couponLoading } = talonProps;
     const history = useHistory();
 
     if (loading && !seller)
@@ -77,7 +77,14 @@ const SellerDetail = props => {
             {
                 id: 'product-tab',
                 title: 'All Products',
-                content: <SellerProducts sellerId={seller?.seller_id} seller={seller} />
+                content: 
+                <SellerProducts 
+                    sellerId={seller?.seller_id} 
+                    seller={seller} 
+                    couponData={couponData}
+                    couponLoading={couponLoading}
+                    couponError={couponError} 
+                />
             },
             {
                 id: 'store-information',
@@ -207,3 +214,4 @@ const SellerDetail = props => {
 
 export default SellerDetail;
 
+

package/src/components/SellerProducts/sellerProducts.js

@@ -19,6 +19,7 @@ import NonSportCardsSets from '@riosst100/pwa-marketplace/src/components/NonSpor
 import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSets';
 import TrainsSets from '@riosst100/pwa-marketplace/src/components/TrainsSets/trainsSets';
 import SetsData from '@riosst100/pwa-marketplace/src/components/SetsData/setsData';
+import SellerCoupon from '@riosst100/pwa-marketplace/src/components/SellerCoupon'
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -26,8 +27,7 @@ const MESSAGES = new Map().set(
 );
 
 const SellerProducts = props => {
-    const { sellerId, seller } = props;
-
+    const { sellerId, seller, couponData, couponLoading, couponError } = props;
     const uid = null;
     
     const { formatMessage } = useIntl();
@@ -83,6 +83,7 @@ const SellerProducts = props => {
 
     return (
         <Fragment>
+            <SellerCoupon couponData={couponData} couponError={couponError} couponLoading={couponLoading} />
             {showSubcategory ? (
                 <SubCategoryPage
                 categoryId={uid}
@@ -147,3 +148,4 @@ SellerProducts.defaultProps = {
 };
 
 export default SellerProducts;
+

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { setCheckoutState } from '@magento/peregrine/lib/store/actions/cart';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
@@ -55,6 +55,8 @@ export const usePriceSummary = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getPriceSummaryQuery, initCheckoutSplitCartMutation, createCartMutation } = operations;
 
+    const { setIsProceedToCheckout } = props;
+
     const apolloClient = useApolloClient();
 
     const [{ cartId }, { createSellerCart, createCart, removeCart }] = useCartContext();
@@ -84,6 +86,12 @@ export const usePriceSummary = (props = {}) => {
 
     const [fetchCartId] = useMutation(createCartMutation);
 
+    useEffect(() => {
+        if (initCheckoutSplitCartLoading) {
+            setIsProceedToCheckout(true);
+        }
+    }, [initCheckoutSplitCartLoading])
+
     const handleProceedToCheckout = useCallback(async(props) => {
         const { sellerUrl } = props;
 
@@ -125,6 +133,7 @@ export const usePriceSummary = (props = {}) => {
         hasItems: data && !!data.cart.items.length,
         isCheckout,
         isLoading: !!loading,
+        initCheckoutSplitCartLoading: initCheckoutSplitCartLoading,
         flatData: flattenData(data)
     };
 };

package/src/overwrites/peregrine/lib/talons/CartPage/useCartPage.js

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLazyQuery } from '@apollo/client';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/CartPage/cartPage.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+/**
+ * This talon contains logic for a cart page component.
+ * It performs effects and returns prop data for rendering the component.
+ *
+ * This talon performs the following effects:
+ *
+ * - Manages the updating state of the cart while cart details data is being fetched
+ *
+ * @function
+ *
+ * @param {Object} props
+ * @param {CartPageQueries} props.queries GraphQL queries
+ *
+ * @returns {CartPageTalonProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
+ */
+export const useCartPage = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getCartDetailsQuery } = operations;
+
+    const [{ cartId }] = useCartContext();
+    const [{ isSignedIn }] = useUserContext();
+
+    const [isProceedToCheckout, setIsProceedToCheckout] = useState(false);
+
+    const [isCartUpdating, setIsCartUpdating] = useState(false);
+    const [wishlistSuccessProps, setWishlistSuccessProps] = useState(null);
+
+    const [fetchCartDetails, { called, data, loading }] = useLazyQuery(
+        getCartDetailsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            errorPolicy: 'all'
+        }
+    );
+
+    const hasItems = !!data?.cart?.total_quantity;
+    const shouldShowLoadingIndicator = called && loading && !hasItems;
+
+    const cartItems = useMemo(() => {
+        return data?.cart?.items || [];
+    }, [data]);
+
+    const onAddToWishlistSuccess = useCallback(successToastProps => {
+        setWishlistSuccessProps(successToastProps);
+    }, []);
+
+    const [, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        if (!called && cartId) {
+            fetchCartDetails({ variables: { cartId } });
+        }
+
+        // Let the cart page know it is updating while we're waiting on network data.
+        setIsCartUpdating(loading);
+    }, [fetchCartDetails, called, cartId, loading]);
+
+    useEffect(() => {
+        if (called && cartId && !loading) {
+            dispatch({
+                type: 'CART_PAGE_VIEW',
+                payload: {
+                    cart_id: cartId,
+                    products: cartItems
+                }
+            });
+        }
+    }, [called, cartItems, cartId, loading, dispatch]);
+
+    return {
+        cartItems,
+        hasItems,
+        isCartUpdating,
+        isGuestCheckout: !isSignedIn,
+        fetchCartDetails,
+        onAddToWishlistSuccess,
+        setIsCartUpdating,
+        shouldShowLoadingIndicator,
+        wishlistSuccessProps,
+        isProceedToCheckout,
+        setIsProceedToCheckout
+    };
+};
+
+/** JSDoc type definitions */
+
+/**
+ * GraphQL formatted string queries used in this talon.
+ *
+ * @typedef {Object} CartPageQueries
+ *
+ * @property {GraphQLAST} getCartDetailsQuery Query for getting the cart details.
+ *
+ * @see [cartPage.gql.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/cartPage.gql.js}
+ * for queries used in Venia
+ */
+
+/**
+ * Props data to use when rendering a cart page component.
+ *
+ * @typedef {Object} CartPageTalonProps
+ *
+ * @property {Array<Object>} cartItems An array of item objects in the cart.
+ * @property {boolean} hasItems True if the cart has items. False otherwise.
+ * @property {boolean} isCartUpdating True if the cart is updating. False otherwise.
+ * @property {function} setIsCartUpdating Callback function for setting the updating state of the cart page.
+ * @property {boolean} shouldShowLoadingIndicator True if the loading indicator should be rendered. False otherwise.
+ */

package/src/overwrites/peregrine/lib/talons/CheckoutPage/checkoutPage.extended.gql.js

@@ -2,6 +2,17 @@ import { gql } from '@apollo/client';
 import { CheckoutPageFragment } from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql';
 import { ItemsReviewFragment } from '@magento/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReviewFragments.gql';
 
+// Local fragment to include seller_url for each item.
+export const ITEM_SELLER_FRAGMENT = gql`
+    fragment ItemSellerFragment on Cart {
+        items {
+            seller {
+                seller_url
+            }
+        }
+    }
+`;
+
 export const CREATE_CART = gql`
     mutation createCart {
         cartId: createEmptyCart
@@ -52,9 +63,11 @@ export const GET_ORDER_DETAILS = gql`
                 }
             }
             ...ItemsReviewFragment
+            ...ItemSellerFragment
         }
     }
     ${ItemsReviewFragment}
+    ${ITEM_SELLER_FRAGMENT}
 `;
 
 export const GET_CHECKOUT_DETAILS = gql`
@@ -63,10 +76,12 @@ export const GET_CHECKOUT_DETAILS = gql`
             id
             ...CheckoutPageFragment
             ...ItemsReviewFragment
+            ...ItemSellerFragment
         }
     }
     ${CheckoutPageFragment}
     ${ItemsReviewFragment}
+    ${ITEM_SELLER_FRAGMENT}
 `;
 
 export const GET_CUSTOMER = gql`
@@ -84,5 +99,6 @@ export default {
     getCheckoutDetailsQuery: GET_CHECKOUT_DETAILS,
     getCustomerQuery: GET_CUSTOMER,
     getOrderDetailsQuery: GET_ORDER_DETAILS,
-    placeOrderMutation: PLACE_ORDER
+    placeOrderMutation: PLACE_ORDER,
+    itemSellerFragment: ITEM_SELLER_FRAGMENT
 };

package/src/overwrites/peregrine/lib/talons/Header/useCartTrigger.js

@@ -0,0 +1,82 @@
+import { useCallback, useState, useEffect } from 'react';
+import { useQuery } from '@apollo/client';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+
+/**
+ * Routes to hide the mini cart on.
+ */
+// const DENIED_MINI_CART_ROUTES = ['/checkout'];
+const DENIED_MINI_CART_ROUTES = [];
+
+/**
+ *
+ * @param {DocumentNode} props.queries.getItemCountQuery query to get the total cart items count
+ *
+ * @returns {
+ *      itemCount: Number,
+ *      miniCartIsOpen: Boolean,
+ *      handleLinkClick: Function,
+ *      handleTriggerClick: Function,
+ *      miniCartRef: Function,
+ *      hideCartTrigger: Function,
+ *      setMiniCartIsOpen: Function
+ *  }
+ */
+export const useCartTrigger = props => {
+    const {
+        queries: { getItemCountQuery }
+    } = props;
+
+    const [{ cartId }] = useCartContext();
+    const history = useHistory();
+    const location = useLocation();
+    const [isHidden, setIsHidden] = useState(() =>
+        DENIED_MINI_CART_ROUTES.includes(location.pathname)
+    );
+
+    const {
+        elementRef: miniCartRef,
+        expanded: miniCartIsOpen,
+        setExpanded: setMiniCartIsOpen,
+        triggerRef: miniCartTriggerRef
+    } = useDropdown();
+
+    const { data } = useQuery(getItemCountQuery, {
+        fetchPolicy: 'cache-and-network',
+        variables: {
+            cartId
+        },
+        skip: !cartId,
+        errorPolicy: 'all'
+    });
+
+    const itemCount = data?.cart?.total_summary_quantity_including_config || 0;
+
+    const handleTriggerClick = useCallback(() => {
+        // Open the mini cart.
+        setMiniCartIsOpen(isOpen => !isOpen);
+    }, [setMiniCartIsOpen]);
+
+    const handleLinkClick = useCallback(() => {
+        // Send the user to the cart page.
+        history.push('/cart');
+    }, [history]);
+
+    useEffect(() => {
+        setIsHidden(DENIED_MINI_CART_ROUTES.includes(location.pathname));
+    }, [location]);
+
+    return {
+        handleLinkClick,
+        handleTriggerClick,
+        itemCount,
+        miniCartIsOpen,
+        miniCartRef,
+        hideCartTrigger: isHidden,
+        setMiniCartIsOpen,
+        miniCartTriggerRef
+    };
+};