@riosst100/pwa-marketplace 3.1.8 → 3.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/SellerDetail/sellerDetail.js

@@ -76,7 +76,7 @@ const SellerDetail = props => {
         [
             {
                 id: 'product-tab',
-                title: 'All Products',
+                title: 'Products',
                 content: 
                 <SellerProducts 
                     sellerId={seller?.seller_id} 

package/src/components/SellerMegaMenu/sellerMegaMenu.js

@@ -31,11 +31,10 @@ const SellerMegaMenu = (props) => {
         handleClickOutside
     } = useSellerMegaMenu({ mainNavRef });
     
-    const allowedCategoryUids = props.allowedCategoryUids || ['NTI=', 'NTA=', 'NTM=', 'MjY='];
+    // const allowedCategoryUids = props.allowedCategoryUids || ['NTI=', 'NTA=', 'NTM=', 'MjY='];
 
     const filteredChildren = Array.isArray(megaMenuData?.children)
-        ? megaMenuData.children.filter(c => allowedCategoryUids.includes(c.uid))
-        : [];
+        ? megaMenuData.children : [];
 
     const [mainNavWidth, setMainNavWidth] = useState(0);
     const shouldRenderItems = useIsInViewport({

package/src/components/SellerMegaMenu/sellerMegaMenuItem.js

@@ -65,21 +65,7 @@ const SellerMegaMenuItem = props => {
     const arrow = <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />;
 
     const children = useMemo(() => {
-        return category.children.length || category.name == "Lego" ? (
-            <SellerSubmenu
-                isFocused={isFocused}
-                sellerSubMenuState={sellerSubMenuState}
-                items={category.children}
-                seller={seller}
-                parentCategory={category}
-                shopByItems={category.shop_by}
-                mainNavWidth={mainNavWidth}
-                handleCloseSellerSubMenu={handleCloseSellerSubMenu}
-                categoryUrlSuffix={categoryUrlSuffix}
-                onNavigate={onNavigate}
-                arrow={arrow}
-            />
-        ) : null;
+        return null;
     }, [
         category,
         isFocused,
@@ -124,7 +110,6 @@ const SellerMegaMenuItem = props => {
         >
             <Link
                 {...linkAttributes}
-                onKeyDown={handleKeyDown}
                 className={cn(
                     isActive ? classes.sellerMegaMenuLinkActive : classes.sellerMegaMenuLink,
                     titleClassName,
@@ -132,12 +117,9 @@ const SellerMegaMenuItem = props => {
                 )}
                 data-cy="SellerMegaMenu-SellerMegaMenuItem-link"
                 to={'/seller/' + seller?.url_key + categoryUrl}
-                onClick={onNavigate}
             >
                 {category.name}
-                {/* {maybeDownArrowIcon} */}
             </Link>
-            {children}
         </div>
     );
 };

package/src/components/SellerProducts/productContent.js

@@ -85,7 +85,7 @@ const ProductContent = props => {
     const shouldShowFilterShimmer = filters === null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar children={[]} filters={filters} />
+        <FilterSidebar category={category} children={[]} filters={filters} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;
@@ -266,11 +266,6 @@ const ProductContent = props => {
                         </span>
                     </h1>
                 </div>
-                <>
-                    {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
-                    {shopby != "gauge" && category?.name != "Collectible Card Games" ? <SubCategory parent={parent} children={children} /> : ''}
-                    
-                </>
                 <FilterTop shopby={shopby} filters={filters} category={category} children={children} />
             </div>
             <div className='w-full flex items-start gap-x-[30px]'>

package/src/intercept.js

@@ -87,6 +87,20 @@ module.exports = targets => {
       authed: true,
       redirectTo: "/sign-in"
     },
+    {
+      exact: true,
+      name: "HelpCenter",
+      pattern: "/help-center",
+      path: require.resolve("./components/HelpCenter/index.js"),
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "HelpCenterQuestionDetail",
+      pattern: "/help-center/question/:questionId",
+      path: require.resolve("./components/HelpCenter/questionDetail.js"),
+      authed: false,
+    },
     {
       exact: true,
       name: "VerifyEmailPage",

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -12,7 +12,7 @@ const CurrentFilters = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
 
-    const defaultTopFilterAttrCode = category.default_top_filter.attribute_code;
+    const defaultTopFilterAttrCode = category && category.default_top_filter ? category.default_top_filter.attribute_code : null;
 
     // create elements and params at the same time for efficiency
     const filterElements = useMemo(() => {

package/src/overwrites/venia-ui/lib/components/Footer/sampleData.js

@@ -10,7 +10,7 @@ const getToKnowUsLinks = new Map()
     .set('About TCG Collective', null)
     .set('Career', '/')
     .set('Contact Us', '/')
-    .set('Help Center', '/')
+    .set('Help Center', '/help-center')
     .set('Intelectual Property Claims', '/');
 
 const aboutLinks = new Map()

package/src/talons/SellerMegaMenu/megaMenu.gql.js

@@ -10,9 +10,9 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_MEGA_MENU = gql`
-    query getMegaMenu {
+    query getSellerMegaMenu {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        categoryList {
+        sellerCategories {
             uid
             name
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
@@ -22,22 +22,10 @@ export const GET_MEGA_MENU = gql`
                 name
                 position
                 url_path
-                custom_submenu {
-                    name
-                    attribute {
-                        code
-                        value
-                    }
-                    path
-                }
-                shop_by {
-                    name
-                    code
-                    items {
-                        name
-                        option_id
-                        url_path
-                    }
+                default_top_filter {
+                    attribute_code
+                    label
+                    value
                 }
                 # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 children {
@@ -46,6 +34,11 @@ export const GET_MEGA_MENU = gql`
                     name
                     position
                     url_path
+                    default_top_filter {
+                        attribute_code
+                        label
+                        value
+                    }
                     custom_submenu {
                         name
                         attribute {

package/src/talons/SellerMegaMenu/useSellerMegaMenu.js

@@ -1,5 +1,5 @@
 import { useMemo, useState, useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import { useInternalLink } from '@magento/peregrine/lib/hooks/useInternalLink';
 
 import { useQuery } from '@apollo/client';
@@ -8,6 +8,7 @@ import { useEventListener } from '@magento/peregrine/lib/hooks/useEventListener'
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './megaMenu.gql';
 
+
 /**
  * The useSellerMegaMenu talon complements the SellerMegaMenu component.
  *
@@ -107,9 +108,65 @@ export const useSellerMegaMenu = (props = {}) => {
     );
 
     const megaMenuData = useMemo(() => {
-        return data ? processData(data.categoryList[0]) : {};
+        return data ? processData(data.sellerCategories[0]) : {};
     }, [data, processData]);
 
+    const category = useMemo(() => {
+        return Array.isArray(megaMenuData?.children)
+        ? megaMenuData.children[0]
+        : [];
+    }, [megaMenuData]);
+
+    const history = useHistory();
+
+    const setQueryParam = ({ history, location, parameter, replace, value }) => {
+        const { search } = location;
+        const queryParams = new URLSearchParams(search);
+
+        queryParams.set(parameter, value);
+        const destination = { search: queryParams.toString() };
+
+        if (replace) {
+            history.replace(destination);
+        } else {
+            history.push(destination);
+        }
+    };
+
+    const setDefaultSubcategoryAndTopFilter = useCallback(
+        (value, searchParam, replace = false) => {
+            // Update the query parameter.
+            setQueryParam({
+                history,
+                location,
+                parameter: searchParam,
+                replace,
+                value: value
+            });
+        },
+        [history, location]
+    );
+
+    useEffect(() => {
+        const { search } = location;
+
+        // if (category && category.default_top_filter) {
+        //     const defaultTopFilter = category.default_top_filter;
+
+        //     const attrCode = defaultTopFilter.attribute_code;
+        //     const label = defaultTopFilter.label;
+        //     const value = defaultTopFilter.value;
+
+        //     if (!search.includes(attrCode)) {
+        //         setDefaultSubcategoryAndTopFilter(
+        //             label + ',' + value, 
+        //             attrCode + '[filter]', 
+        //             true
+        //         );
+        //     }
+        // }
+    }, [category, location, setDefaultSubcategoryAndTopFilter]);
+
     const findActiveCategory = useCallback(
         (pathname, category) => {
             if (isActive(category)) {

package/src/talons/SellerProducts/productContent.gql.js

@@ -35,6 +35,11 @@ export const GET_CATEGORY_CONTENT = gql`
                 url_key
                 url_path
                 prefixes
+                default_top_filter {
+                    attribute_code
+                    label
+                    value
+                }
                 parent {
                     uid
                     name

package/src/talons/SellerProducts/useProductContent.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
-
+import { useLocation, useHistory } from 'react-router-dom';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 
@@ -48,6 +48,8 @@ export const useProductContent = props => {
         }
     );
 
+    
+
     const { data: categoryData, loading: categoryLoading } = useQuery(
         getCategoryContentQuery,
         {
@@ -60,6 +62,9 @@ export const useProductContent = props => {
         }
     );
 
+    console.log('categoryData',categoryData)
+    console.log('categoryId',categoryId)
+
     const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {
@@ -94,6 +99,7 @@ export const useProductContent = props => {
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0]
             : null;
+            console.log('categorycategory',category)
     const children =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].children
@@ -101,6 +107,59 @@ export const useProductContent = props => {
 
     const filters = [];
 
+    const history = useHistory();
+    const location = useLocation();
+
+    const setQueryParam = ({ history, location, parameter, replace, value }) => {
+        const { search } = location;
+        const queryParams = new URLSearchParams(search);
+
+        queryParams.set(parameter, value);
+        const destination = { search: queryParams.toString() };
+
+        if (replace) {
+            history.replace(destination);
+        } else {
+            history.push(destination);
+        }
+    };
+
+    const setDefaultSubcategoryAndTopFilter = useCallback(
+        (value, searchParam, replace = false) => {
+            // Update the query parameter.
+            setQueryParam({
+                history,
+                location,
+                parameter: searchParam,
+                replace,
+                value: value
+            });
+        },
+        [history, location]
+    );
+
+    console.log('category category',category)
+
+    useEffect(() => {
+        const { search } = location;
+
+        if (category && category.default_top_filter) {
+            const defaultTopFilter = category.default_top_filter;
+
+            const attrCode = defaultTopFilter.attribute_code;
+            const label = defaultTopFilter.label;
+            const value = defaultTopFilter.value;
+
+            if (!search.includes(attrCode)) {
+                setDefaultSubcategoryAndTopFilter(
+                    label + ',' + value, 
+                    attrCode + '[filter]', 
+                    true
+                );
+            }
+        }
+    }, [category, location, setDefaultSubcategoryAndTopFilter]);
+
     rawFilters && rawFilters.map((filter, index) => {
 
         const filterOptions = [];