@riosst100/pwa-marketplace 2.4.6 → 2.4.8

package/src/components/SellerMegaMenu/sellerSubmenuColumn.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './sellerSubmenuColumn.module.css';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+
+/**
+ * The SellerSubmenuColumn component displays columns with categories in submenu
+ *
+ * @param {MegaMenuCategory} props.category
+ * @param {function} props.onNavigate - function called when clicking on Link
+ */
+const SellerSubmenuColumn = props => {
+    const {
+        category,
+        categoryUrlSuffix,
+        onNavigate,
+        seller,
+        handleCloseSellerSubMenu,
+        arrow
+    } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const categoryUrl = resourceUrl(
+        '/seller/' + seller?.url_key + `/${category.url_path}${categoryUrlSuffix || ''}`
+    );
+
+    let children = null;
+    let childrenItems = '';
+
+    if (category.children.length) {
+        childrenItems = category.children.map((subCategory, index) => {
+            const { url_path, isActive, name } = subCategory;
+            const categoryUrl = resourceUrl(
+                `/${url_path}${categoryUrlSuffix || ''}`
+            );
+
+            // setting keyboardProps if it is last child of that category
+            const keyboardProps =
+                index === category.children.length - 1
+                    ? props.keyboardProps
+                    : {};
+
+            const customMenuItems = subCategory.custom_submenu;
+
+            let result = [];
+            if (customMenuItems && customMenuItems.length) {
+                customMenuItems.map((submenu, index) => {
+                    const {name} = submenu;
+                    result.push(
+                        <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
+                            <Link
+                                {...keyboardProps}
+                                className={isActive ? classes.linkActive : classes.link}
+                                data-cy="SellerMegaMenu-SellerSubmenuColumn-link"
+                                to={categoryUrl}
+                                onClick={() => {
+                                    handleCloseSellerSubMenu();
+                                    onNavigate();
+                                }}
+                            >
+                                {name}
+                            </Link>
+                        </li>
+                    )
+                })
+            } else {
+                result.push(
+                    <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
+                        <Link
+                            {...keyboardProps}
+                            className={isActive ? classes.linkActive : classes.link}
+                            data-cy="SellerMegaMenu-SellerSubmenuColumn-link"
+                            to={categoryUrl}
+                            onClick={() => {
+                                handleCloseSellerSubMenu();
+                                onNavigate();
+                            }}
+                        >
+                            {name}
+                        </Link>
+                    </li>
+                );
+            }
+
+            return result;
+        });
+    }
+
+    if (category.custom_submenu && category.custom_submenu.length) {
+        childrenItems = category.custom_submenu.map((subCategory, index) => {
+            const { path, isActive, name } = subCategory;
+            const categoryUrl = resourceUrl(
+                '/seller/' + seller?.url_key + `/${path}`
+            );
+
+            // setting keyboardProps if it is last child of that category
+            const keyboardProps =
+                index === category.children.length - 1
+                    ? props.keyboardProps
+                    : {};
+
+            let result = [];
+
+            result.push(
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
+                    <Link
+                        {...keyboardProps}
+                        className={isActive ? classes.linkActive : classes.link}
+                        data-cy="SellerMegaMenu-SellerSubmenuColumn-link"
+                        to={categoryUrl}
+                        onClick={() => {
+                            handleCloseSellerSubMenu();
+                            onNavigate();
+                        }}
+                    >
+                        {name}
+                    </Link>
+                </li>
+            );
+
+            return result;
+        });
+    }
+
+    if (childrenItems) {
+        children = <ul className={classes.submenuChild}>{childrenItems}</ul>;
+    }
+
+    // setting keyboardProps if category does not have any sub-category
+    const keyboardProps = category.children.length ? {} : props.keyboardProps;
+
+    return (
+        <div className={classes.sellerSubmenuColumn}>
+            <Link
+                {...keyboardProps}
+                className={classes.link}
+                data-cy="SellerMegaMenu-SellerSubmenuColumn-link"
+                to={categoryUrl}
+                onClick={() => {
+                    handleCloseSellerSubMenu();
+                    onNavigate();
+                }}
+            >
+                <span className={classes.heading}>{category.name}</span>
+            </Link>
+            {children}
+        </div>
+    );
+};
+
+export default SellerSubmenuColumn;
+
+SellerSubmenuColumn.propTypes = {
+    category: PropTypes.shape({
+        children: PropTypes.array,
+        uid: PropTypes.string.isRequired,
+        include_in_menu: PropTypes.number,
+        isActive: PropTypes.bool.isRequired,
+        name: PropTypes.string.isRequired,
+        path: PropTypes.array.isRequired,
+        position: PropTypes.number.isRequired,
+        url_path: PropTypes.string.isRequired
+    }).isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired,
+    handleCloseSellerSubMenu: PropTypes.func.isRequired
+};

package/src/components/SellerMegaMenu/sellerSubmenuColumn.module.css

@@ -0,0 +1,33 @@
+.sellerSubmenuColumn {
+    /* composes: max-w-[235px] from global; */
+    composes: pl-4 pt-2 from global;
+}
+
+.heading {
+    composes: font-medium from global;
+}
+
+.link {
+    composes: whitespace-nowrap from global;
+
+    composes: focus_underline from global;
+
+    composes: hover_underline from global;
+
+    align-items: center;
+    composes: inline-flex from global;
+}
+
+.linkActive {
+    composes: underline from global;
+    align-items: center;
+    composes: inline-flex from global;
+}
+
+.submenuChild {
+    composes: mt-0 from global;
+}
+
+.submenuChildItem {
+    composes: mb-0 from global;
+}

package/src/components/SellerProducts/productContent.js

@@ -23,6 +23,12 @@ import { FormattedMessage } from 'react-intl';
 import NoProductsFound from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/NoProductsFound';
 import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
 import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
+import SellerMegaMenu from '@riosst100/pwa-marketplace/src/components/SellerMegaMenu';
+import AlphaFilter from '@riosst100/pwa-marketplace/src/components/AlphaFilter';
+import CustomSubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/customSubCategory';
+import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
+import { useLocation, useHistory } from 'react-router-dom';
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 const FilterSidebar = React.lazy(() =>
     import('@magento/venia-ui/lib/components/FilterSidebar')
@@ -30,12 +36,18 @@ const FilterSidebar = React.lazy(() =>
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 
+const FilterTop = React.lazy(() =>
+    import('@riosst100/pwa-marketplace/src/components/FilterTop')
+);
+
 const ProductContent = props => {
     const {
         categoryId,
         data,
+        shopby,
         pageControl,
         sortProps,
+        seller,
         isLoading,
         pageSize
     } = props;
@@ -63,6 +75,9 @@ const ProductContent = props => {
         availableSortMethods,
         filters,
         items,
+        category,
+        children,
+        categoryName,
         totalPagesFromData
     } = talonProps;
 
@@ -111,6 +126,10 @@ const ProductContent = props => {
         <FilterModal filters={filters} />
     ) : null;
 
+    const handleActiveLetter = (val) => {
+        setActiveLetter(val);
+    }
+
     const galleryItems = [];
 
     useMemo(() => {
@@ -189,18 +208,71 @@ const ProductContent = props => {
         totalPagesFromData,
         activeLetter
     ]);
+    
+    const { search } = useLocation();
+    const allActiveFilters = getFiltersFromSearch(search);
+
+    const activeFilters = [];
+
+    let isSingles = false;
+
+    const urlKey = category?.url_key;
+
+    if (allActiveFilters && allActiveFilters.size > 0) {
+        allActiveFilters.forEach((value, key) => {
+            value.forEach((value) => {
+                const filterArr = value.split(',');
+                
+                const label = filterArr[0];
+                const optionId = filterArr[1];
+                if (label == "Singles") {
+                    isSingles = true;
+                }
+                if (key == "bricks_categories" || key == "sc_sports_categories" || key == "card_game" || key == "product_line" && urlKey == "brands" || key == "product_line" && urlKey == "franchise" || key == "franchise" && urlKey == "brands" || key == "franchise" && urlKey == "franchise" || key == "brands" && urlKey == "franchise" || key == "brands" && urlKey == "brands" || virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
+                    activeFilters.push(
+                        {
+                            'label': label,
+                            'code': key,
+                            'option_id': optionId
+                        }
+                    )
+                }
+            })
+        });
+    }
+
+    const currentFilter = activeFilters && activeFilters.length ? activeFilters[activeFilters.length - 1].label : '';
+
+    let title = categoryName;
 
     return (
         <>
             <div className='w-full mb-[30px]'>
-                <div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
-                    <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
-                        <span class='relative w-fit font-medium text-[14px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
-                    </Link>
-                    <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
-                        <span class='relative w-fit font-medium text-[14px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
-                    </Link>
+                <SellerMegaMenu
+                    rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
+                    sellerMegaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
+                    seller={seller}
+                    titleClassName={cn('font-normal leading-[20px]')}
+                />
+            </div>
+            <div className='w-full mb-[0px]'>
+                <div className={classes.categoryHeader}>
+                    <h1 aria-live="polite" className={classes.title}>
+                        <span
+                            className={classes.categoryTitle}
+                            data-cy="CategoryContent-categoryTitle"
+                        >
+                            {title}
+                        </span>
+                    </h1>
                 </div>
+                <>
+                    {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
+                    {!currentFilter && <CustomSubCategory categoryName={category ? category.name : null} customSubCategory={category ? category.custom_subcategory : null} />}
+                    {shopby != "gauge" && category?.name != "Collectible Card Games" ? <SubCategory parent={parent} children={children} /> : ''}
+                    
+                </>
+                <FilterTop shopby={shopby} filters={filters} category={category} children={children} allowedFilters={category ? category.allowed_filters : []} />
             </div>
             <div className='w-full flex items-start gap-x-[30px]'>
                 <div className={classes.contentWrapper}>

package/src/components/SellerProducts/sellerProducts.js

@@ -26,7 +26,7 @@ const MESSAGES = new Map().set(
 );
 
 const SellerProducts = props => {
-    const { sellerId } = props;
+    const { sellerId, seller } = props;
 
     const uid = null;
     
@@ -36,6 +36,7 @@ const SellerProducts = props => {
 
     const query = new URLSearchParams(location.search);
     const shopby = query.get('shopby') || null;
+    const showSubcategory = query.get('show_subcategory') || null;
 
     const talonProps = useSellerProducts({
         sellerId: sellerId,
@@ -50,6 +51,7 @@ const SellerProducts = props => {
         productData,
         pageControl,
         sortProps,
+        categoryId,
         pageSize,
         categoryNotFound
     } = talonProps;
@@ -77,19 +79,56 @@ const SellerProducts = props => {
         );
     }
 
+    const allowedShopby = ['card_artist'];
+
     return (
         <Fragment>
-            <ProductContent
-            categoryId={uid}
-            sellerId={sellerId}
-            classes={classes}
-            data={productData?.productsBySellerId}
-            shopby={shopby}
-            isLoading={loading}
-            pageControl={pageControl}
-            sortProps={sortProps}
-            pageSize={pageSize}
-            />
+            {showSubcategory ? (
+                <SubCategoryPage
+                categoryId={uid}
+                isLoading={loading} />
+            ) : (
+                allowedShopby.includes(shopby) ? <ShopBy
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "release_year" || shopby == "secret_lair" || shopby == "expansion_sets" || shopby == "sets" || shopby == "release" ? <SetsData
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby && parentCategoryUrlKey == "non-sports-cards" ? <NonSportCardsSets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "release_year" ? <ShopBySets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "card" ? <ShopByCard
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : (shopby && shopby != "gauge" ? (
+                    <ShopBy
+                    categoryId={uid}
+                    shopby={shopby}
+                    isLoading={loading} />
+                ) : (
+                    <ProductContent
+                    categoryId={categoryId}
+                    sellerId={sellerId}
+                    seller={seller}
+                    classes={classes}
+                    data={productData?.productsBySellerId}
+                    shopby={shopby}
+                    isLoading={loading}
+                    pageControl={pageControl}
+                    sortProps={sortProps}
+                    pageSize={pageSize}
+                    />
+                ))
+            )}
         </Fragment>
     );
 };

package/src/intercept.js

@@ -101,6 +101,20 @@ module.exports = targets => {
       path: require.resolve("./components/SellerPage/index.js"),
       authed: false,
     },
+    {
+      exact: true,
+      name: "SellerProductCategoriesPage",
+      pattern: "/seller/:urlKey/:categoryUrlKey",
+      path: require.resolve("./components/SellerPage/index.js"),
+      authed: false,
+    },
+     {
+      exact: true,
+      name: "SellerProductCategoriesPage",
+      pattern: "/seller/:urlKey/:categoryUrlKey/:childCategoryUrlKey",
+      path: require.resolve("./components/SellerPage/index.js"),
+      authed: false,
+    },
     {
       exact: true,
       name: "CollectibleGameSetsPage",

package/src/overwrites/peregrine/lib/context/cart.js

@@ -0,0 +1,136 @@
+import React, {
+    createContext,
+    useContext,
+    useEffect,
+    useMemo,
+    useCallback
+} from 'react';
+import { connect } from 'react-redux';
+import { useMutation } from '@apollo/client';
+import gql from 'graphql-tag';
+
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import actions from '@magento/peregrine/lib/store/actions/cart/actions';
+import * as asyncActions from '@magento/peregrine/lib/store/actions/cart/asyncActions';
+import bindActionCreators from '@magento/peregrine/lib/util/bindActionCreators';
+import { useEventListener } from '@magento/peregrine/lib/hooks/useEventListener';
+import BrowserPersistence from '@magento/peregrine/lib/util/simplePersistence';
+
+const CartContext = createContext();
+
+const isCartEmpty = cart =>
+    !cart || !cart.details.items || cart.details.items.length === 0;
+
+const getTotalQuantity = items =>
+    items.reduce((total, item) => total + item.quantity, 0);
+
+const CartContextProvider = props => {
+    const { actions, asyncActions, cartState, children } = props;
+
+    // Make deeply nested details easier to retrieve and provide empty defaults
+    const derivedDetails = useMemo(() => {
+        if (isCartEmpty(cartState)) {
+            return {
+                currencyCode: 'USD',
+                numItems: 0,
+                subtotal: 0
+            };
+        } else {
+            return {
+                currencyCode: cartState.details.prices.grand_total.currency,
+                numItems: getTotalQuantity(cartState.details.items),
+                subtotal: cartState.details.prices.grand_total.value
+            };
+        }
+    }, [cartState]);
+
+    const cartApi = useMemo(
+        () => ({
+            actions,
+            ...asyncActions
+        }),
+        [actions, asyncActions]
+    );
+
+    const contextValue = useMemo(() => {
+        const derivedCartState = {
+            ...cartState,
+            isEmpty: isCartEmpty(cartState),
+            derivedDetails
+        };
+
+        return [derivedCartState, cartApi];
+    }, [cartApi, cartState, derivedDetails]);
+
+    const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
+    const [removeSplitCart] = useMutation(REMOVE_SPLIT_CART_MUTATION);
+    const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
+
+    // Storage listener to force a state update if cartId changes from another browser tab.
+    const storageListener = useCallback(() => {
+        const storage = new BrowserPersistence();
+        const currentCartId = storage.getItem('cartId');
+        const { cartId } = cartState;
+        if (cartId && currentCartId && cartId !== currentCartId) {
+            globalThis.location && globalThis.location.reload();
+        }
+    }, [cartState]);
+
+    useEventListener(globalThis, 'storage', storageListener);
+
+    useEffect(() => {
+        // cartApi.getCartDetails initializes the cart if there isn't one.
+        cartApi.getCartDetails({
+            fetchCartId,
+            fetchCartDetails,
+            removeSplitCart
+        });
+    }, [cartApi, fetchCartDetails, fetchCartId]);
+
+    return (
+        <CartContext.Provider value={contextValue}>
+            {children}
+        </CartContext.Provider>
+    );
+};
+
+const mapStateToProps = ({ cart }) => ({ cartState: cart });
+
+const mapDispatchToProps = dispatch => ({
+    actions: bindActionCreators(actions, dispatch),
+    asyncActions: bindActionCreators(asyncActions, dispatch)
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(CartContextProvider);
+
+export const useCartContext = () => useContext(CartContext);
+
+/**
+ * We normally do not keep GQL queries in Peregrine. All components should pass
+ * queries to talons/hooks. This is an exception to the rule because it would
+ * be unecessarily complex to pass these queries to the context provider.
+ */
+const CREATE_CART_MUTATION = gql`
+    mutation createCart {
+        cartId: createEmptyCart
+    }
+`;
+
+const REMOVE_SPLIT_CART_MUTATION = gql`
+    mutation removeSplitCart($input: removeSplitCartInput!) {
+        removeSplitCart(input: $input)
+    }
+`;
+
+const CART_DETAILS_QUERY = gql`
+    query checkUserIsAuthed($cartId: String!) {
+        cart(cart_id: $cartId) {
+            # The purpose of this query is to check that the user is authorized
+            # to query on the current cart. Just fetch "id" to keep it small.
+            id
+        }
+    }
+`;