@riosst100/pwa-marketplace 1.3.8 → 1.4.0

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -91,6 +91,9 @@ export const useCategoryContent = props => {
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].children
             : null;
+    const attributesBlock = categoryData && categoryData.categories.items.length
+    ? categoryData.categories.items[0].attributes_block
+    : null;
     const parent =
     categoryData && categoryData.categories.items.length
         ? categoryData.categories.items[0].parent
@@ -99,6 +102,10 @@ export const useCategoryContent = props => {
         ? data.products.page_info.total_pages
         : null;
     const totalCount = data ? data.products.total_count : null;
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
     const categoryName =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].name
@@ -134,6 +141,8 @@ export const useCategoryContent = props => {
         totalCount,
         totalPagesFromData,
         children,
-        parent
+        parent,
+        attributesBlock,
+        category
     };
 };

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css

@@ -20,6 +20,7 @@
 
 .categoryTitle {
     composes: font-semibold from global;
+    composes: text-[20px] from global;
 }
 
 .heading {
@@ -46,7 +47,7 @@
     composes: mx-0 from global;
     composes: my-xs from global;
     composes: text-center from global;
-    composes: text-[14px] from global;
+    composes: text-base from global;
     composes: lg_m-0 from global;
     composes: lg_text-left from global;
     composes: py-4 from global;

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -25,6 +25,7 @@ import NoProductsFound from './NoProductsFound';
 import cn from 'classnames';
 import ProductListTab, { ProductListTabShimmer } from '@riosst100/pwa-marketplace/src/components/ProductListTab';
 import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
+import AttributesBlock from '@riosst100/pwa-marketplace/src/components/AttributesBlock/attributesBlock';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -56,7 +57,9 @@ const CategoryContent = props => {
         items,
         children,
         totalCount,
-        totalPagesFromData
+        totalPagesFromData,
+        attributesBlock,
+        category
     } = talonProps;
 
     const sidebarRef = useRef(null);
@@ -179,6 +182,7 @@ const CategoryContent = props => {
                     {categoryDescriptionElement}
                 </div>
                 <SubCategory children={children} />
+                <AttributesBlock category={category} attributesBlock={attributesBlock} />
                 <div className={classes.contentWrapper}>
                     <div ref={sidebarRef} className={classes.sidebar}>
                         <Suspense fallback={<FilterSidebarShimmer />}>

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -9,24 +9,24 @@
 }
 
 .text {
-    composes: text-[13px] from global;
+    composes: text-base from global;
     composes: leading-[13px] from global;
     composes: text-blue-700 from global;
     composes: font-medium from global;
 }
 
 .divider {
-    composes: text-[13px] from global;
+    composes: text-base from global;
     composes: leading-[13px] from global;
 }
 
 .link {
-    composes: text-[13px] from global;
+    composes: text-base from global;
     composes: leading-[13px] from global;
     composes: text-gray-200 from global;
 }
 
 .currentCategory {
-    composes: text-[13px] from global;
+    composes: text-base from global;
     composes: leading-[13px] from global;
 }

package/src/overwrites/venia-ui/lib/components/Checkbox/checkbox.module.css

@@ -44,7 +44,7 @@
     composes: justify-self-start from global;
     composes: text-colorDefault from global;
     grid-area: label;
-    composes: text-[13px] from global;
+    composes: text-base from global;
 }
 
 /* When the input is disabled, update the cursor on the sibling label element. */

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css

@@ -11,7 +11,7 @@
     composes: py-2 from global;
     composes: rounded-md from global;
     /* composes: text-white from global; */
-    composes: text-[13px] from global;
+    composes: text-base from global;
 }
 
 /* TODO @TW: cannot compose */

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -102,7 +102,7 @@ const FilterList = props => {
     // memoize item creation
     // search value is not referenced, so this array is stable
     const itemElements = useMemo(() => {
-        if (filterFrontendInput === 'boolean') {
+        // if (filterFrontendInput === 'boolean') {
             const key = `item-${group}`;
             return (
                 <li
@@ -121,7 +121,7 @@ const FilterList = props => {
                     />
                 </li>
             );
-        }
+        // }
 
         return items.map((item, index) => {
             const { title, value } = item;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.module.css

@@ -13,7 +13,7 @@
 }
 
 .showMoreLessButton {
-    composes: text-sm from global;
+    composes: text-base from global;
     composes: underline from global;
 
     composes: hover_no-underline from global;

package/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock.module.css

@@ -13,7 +13,7 @@
 .name {
     composes: leading-[14px] from global;
     composes: text-left from global;
-    composes: text-[14px] from global;
+    composes: text-base from global;
     composes: font-semibold from global;
 }
 

package/src/overwrites/venia-ui/lib/components/FilterModal/filterModal.module.css

@@ -67,7 +67,7 @@
 
 /* TODO @TW: cannot compose */
 .action button {
-    /* composes: text-sm from global; */
+    /* composes: text-base from global; */
     font-size: 0.875rem;
     /* composes: no-underline from global; */
     text-decoration: none;

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css

@@ -30,7 +30,7 @@
     composes: flex from global;
     composes: items-center from global;
     composes: leading-normal from global;
-    composes: text-[16px] from global;
+    composes: text-[14px] from global;
     composes: font-semibold from global;
     composes: px-2.5 from global;
     composes: mb-2.5 from global;
@@ -43,8 +43,9 @@
 
 /* TODO @TW: cannot compose */
 .action button {
-    /* composes: text-sm from global; */
-    font-size: 13px;
+    /* composes: text-base from global; */
+    font-size: 12px;
+    /* composes: text-[13px] from global; */
     /* composes: no-underline from global; */
     font-weight: 500;
     text-decoration: underline;

package/src/overwrites/venia-ui/lib/components/Gallery/item.module.css

@@ -73,7 +73,7 @@
 
 .name {
     composes: font-medium from global;
-    composes: text-[14px] from global;
+    composes: text-base from global;
     composes: mb-[18px] from global;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -85,7 +85,7 @@
 .name,
 .price {
     composes: text-colorDefault from global;
-    composes: text-[16px] from global;
+    composes: text-[14px] from global;
     composes: font-semibold from global;
     min-height: 1rem;
 }
@@ -103,7 +103,7 @@
     composes: items-center from global;
     composes: justify-start from global;
     composes: p-3 from global;
-    composes: text-sm from global;
+    composes: text-base from global;
     composes: text-subtle from global;
     composes: w-full from global;
 }

package/src/overwrites/venia-ui/lib/components/Gallery/star.js

@@ -3,7 +3,7 @@ import React from 'react'
 export const star = () => {
     return (
         <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M8.00887 2.04754L9.03554 4.10087C9.17554 4.38671 9.54887 4.66087 9.86387 4.71337L11.7247 5.02254C12.9147 5.22087 13.1947 6.08421 12.3372 6.93587L10.8905 8.38254C10.6455 8.62754 10.5114 9.10004 10.5872 9.43837L11.0014 11.2292C11.328 12.6467 10.5755 13.195 9.32137 12.4542L7.5772 11.4217C7.2622 11.235 6.74304 11.235 6.4222 11.4217L4.67804 12.4542C3.4297 13.195 2.67137 12.6409 2.99804 11.2292L3.4122 9.43837C3.48804 9.10004 3.35387 8.62754 3.10887 8.38254L1.6622 6.93587C0.810536 6.08421 1.0847 5.22087 2.2747 5.02254L4.13554 4.71337C4.4447 4.66087 4.81804 4.38671 4.95804 4.10087L5.9847 2.04754C6.5447 0.933372 7.4547 0.933372 8.00887 2.04754Z" fill="#F7C317" stroke="#F7C317" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M8.00887 2.04754L9.03554 4.10087C9.17554 4.38671 9.54887 4.66087 9.86387 4.71337L11.7247 5.02254C12.9147 5.22087 13.1947 6.08421 12.3372 6.93587L10.8905 8.38254C10.6455 8.62754 10.5114 9.10004 10.5872 9.43837L11.0014 11.2292C11.328 12.6467 10.5755 13.195 9.32137 12.4542L7.5772 11.4217C7.2622 11.235 6.74304 11.235 6.4222 11.4217L4.67804 12.4542C3.4297 13.195 2.67137 12.6409 2.99804 11.2292L3.4122 9.43837C3.48804 9.10004 3.35387 8.62754 3.10887 8.38254L1.6622 6.93587C0.810536 6.08421 1.0847 5.22087 2.2747 5.02254L4.13554 4.71337C4.4447 4.66087 4.81804 4.38671 4.95804 4.10087L5.9847 2.04754C6.5447 0.933372 7.4547 0.933372 8.00887 2.04754Z" fill="#F7C317" stroke="#F7C317" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
 
     )

package/src/overwrites/venia-ui/lib/components/Header/accountTrigger.js

@@ -66,8 +66,8 @@ const AccountTrigger = props => {
                         })}
                         shouldIndicateLoading={true}
                     /> */}
-                    <User size="30" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
-                    <span className='text-sm text-darkblue-900 font-semibold'>
+                    <User size="25" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                    <span className='text-base font-semibold'>
                         {formatMessage({
                             id: 'accountTrigger.buttonFallback',
                             defaultMessage: 'Sign In'

package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.js

@@ -7,7 +7,7 @@ import { useCartTrigger } from '@magento/peregrine/lib/talons/Header/useCartTrig
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Icon from '@magento/venia-ui/lib/components/Icon';
-import defaultClasses from '@magento/venia-ui/lib/components/Header/cartTrigger.module.css';
+import defaultClasses from './cartTrigger.module.css';
 import { GET_ITEM_COUNT_QUERY } from '@magento/venia-ui/lib/components/Header/cartTrigger.gql';
 import cn from 'classnames';
 import { ShoppingCart } from 'iconsax-react';
@@ -50,7 +50,7 @@ const CartTrigger = props => {
         <span
             className={cn(
                 classes.counter,
-                'bg-yellow-300 min-w-[18px] min-h-[18px] text-[13px] font-regular leading-[18px] text-darkblue-900 top-[-5px]',
+                'bg-yellow-300 min-w-[18px] min-h-[18px] text-base font-regular leading-[18px] top-[-5px]',
                 '!left-auto right-[0px]'
             )}
             data-cy="CartTrigger-counter"
@@ -76,7 +76,7 @@ const CartTrigger = props => {
                     data-cy="CartTrigger-trigger"
                 >
                     {/* <Icon src={ShoppingCartIcon} /> */}
-                    <ShoppingCart size="30" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                    <ShoppingCart size="25" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
                     {maybeItemCounter}
                 </button>
             </div>

package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.module.css

@@ -0,0 +1,47 @@
+.counter {
+    composes: absolute from global;
+    composes: bg-brand-dark from global;
+    composes: font-semibold from global;
+    composes: leading-tight from global;
+    composes: left-sm from global;
+    composes: min-w-[1.25rem] from global;
+    composes: px-1 from global;
+    composes: py-0 from global;
+    composes: rounded-full from global;
+    composes: text-white from global;
+    composes: top-1.5 from global;
+}
+
+.trigger {
+    composes: root from '@magento/venia-ui/lib/components/clickable.module.css';
+
+    composes: content-center from global;
+    composes: flex from global;
+    composes: h-[3rem] from global;
+    composes: justify-center from global;
+    composes: min-w-[3rem] from global;
+    composes: relative from global;
+    composes: z-foreground from global;
+}
+
+.triggerContainer {
+    composes: hidden from global;
+    composes: items-center from global;
+    composes: h-lg from global;
+
+    composes: lg_grid from global;
+}
+
+.triggerContainer_open {
+    composes: triggerContainer;
+
+    composes: shadow-headerTrigger from global;
+}
+
+.link {
+    composes: trigger;
+
+    composes: flex from global;
+
+    composes: lg_hidden from global;
+}

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -81,7 +81,7 @@ const Header = props => {
                                 className={''}
                                 data-cy="Header-logoContainer"
                             >
-                                <div><b>TCG Collective</b></div>
+                                <div className='text-[14px]'><b>TCG Collective</b></div>
                                 <small>Bringing Collectors Together</small>
                             </Link>
                         </div>
@@ -106,7 +106,7 @@ const Header = props => {
                 <MegaMenu
                     rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
                     megaMenuItemClassname={cn('px-0 py-[15px] leading-[20px]')}
-                    titleClassName={cn('font-medium leading-[20px] text-darkblue-900')}
+                    titleClassName={cn('font-medium leading-[20px]')}
                 />
             </header>
             <OnlineIndicator

package/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js

@@ -62,7 +62,7 @@ const StoreSwitcher = props => {
         groups.push(
             <ul
                 role="listbox"
-                className={cn(classes.groupList, 'text-[13px]')}
+                className={cn(classes.groupList, 'text-base')}
                 key={key}
                 data-cy="StoreSwitcher-group"
             >
@@ -75,13 +75,13 @@ const StoreSwitcher = props => {
         <div className={cn(classes.root, 'leading-[16px]')} data-cy="StoreSwitcher-root">
             <button
                 data-cy="StoreSwitcher-triggerButton"
-                className={cn(classes.trigger, 'text-[13px]')}
+                className={cn(classes.trigger, 'text-base')}
                 aria-label={currentStoreName || ''}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
                 aria-expanded={storeMenuIsOpen}
             >
-                <span className='flex flex-row gap-[5px] items-center leading-[16px] text-darkblue-900'>
+                <span className='flex flex-row gap-[5px] items-center leading-[16px]'>
                     {currentStoreName || ''}
                     {!hasOnlyOneStore ? (
                         <ArrowUp2 size="12" color={darkBlue} className={cn(storeMenuIsOpen ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
@@ -93,8 +93,8 @@ const StoreSwitcher = props => {
                 className={menuClassName}
                 data-cy="StoreSwitcher-menu"
             >
-                <div className={cn(classes.groups, 'text-darkblue-900')}>
-                    <span className='flex font-medium px-4 py-1 w-full text-[14px]'>
+                <div className={classes.groups}>
+                    <span className='flex font-medium px-4 py-1 w-full text-base'>
                         Language
                     </span>
                     {groups}

package/src/overwrites/venia-ui/lib/components/Header/wishlistTrigger.js

@@ -14,7 +14,7 @@ const wishlistTrigger = () => {
                 className={''}
                 data-cy="wishlistLink"
             >
-                <Heart size="30" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                <Heart size="25" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
             </Link>
         </div>
     )

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js

@@ -67,6 +67,7 @@ const MegaMenuItem = props => {
                 isFocused={isFocused}
                 subMenuState={subMenuState}
                 items={category.children}
+                parentCategory={category}
                 shopByItems={category.shop_by}
                 mainNavWidth={mainNavWidth}
                 handleCloseSubMenu={handleCloseSubMenu}

package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.js

@@ -1,28 +1,40 @@
-import React from 'react';
+import React, { useMemo } 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 './shopByColumn.module.css';
+import defaultClasses from './submenuColumn.module.css';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 
 const ShopByColumn = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
+    const { formatMessage } = useIntl();
+
     const {
-        shopBy
+        shopBy,
+        category,
+        categoryUrlSuffix,
+        handleCloseSubMenu,
+        onNavigate
     } = props;
 
-    // const categoryUrl = resourceUrl(
-    //     `/${category.url_path}${categoryUrlSuffix || ''}`
-    // );
+    const { url_path } = category;
+
     let items = null;
 
+    const itemCountToShow = 4;
+
     if (shopBy.items.length) {
         const childrenItems = shopBy.items.map((shopByItem, index) => {
-    //         const { url_path, isActive, name } = shopByItem;
-            const { name } = shopByItem;
+
+            if (index >= itemCountToShow) {
+                return null;
+            }
+
+            const { name, option_id } = shopByItem;
     //         const categoryUrl = resourceUrl(
     //             `/${url_path}${categoryUrlSuffix || ''}`
     //         );
@@ -33,6 +45,10 @@ const ShopByColumn = props => {
                     ? props.keyboardProps
                     : {};
 
+            const categoryUrl = resourceUrl(
+                `/${url_path}${categoryUrlSuffix || ''}?${shopBy.code}[filter]=${name},${option_id}`
+            );
+
             return (
                 <li key={index} className={classes.submenuChildItem}>
                     <Link
@@ -40,8 +56,11 @@ const ShopByColumn = props => {
                         // className={isActive ? classes.linkActive : classes.link}
                         className={classes.link}
                         data-cy="MegaMenu-ShopByColumn-link"
-                        // to={categoryUrl}
-                        // onClick={onNavigate}
+                        to={categoryUrl}
+                        onClick={() => {
+                            handleCloseSubMenu();
+                            onNavigate();
+                        }}
                     >
                         {name}
                     </Link>
@@ -52,22 +71,48 @@ const ShopByColumn = props => {
         items = <ul className={classes.submenuChild}>{childrenItems}</ul>;
     }
 
+    const viewAll = useMemo(() => {
+        if (shopBy.items.length <= itemCountToShow) {
+            return null;
+        }
+
+        const label = formatMessage({
+            id: 'filterList.viewAll',
+            defaultMessage: 'View All'
+        });
+
+        const categoryUrl = resourceUrl(
+            `/shop/${shopBy.code}`
+        );
+
+        return (
+            <li className={classes.submenuChildItem}>
+                <Link
+                    // className={isActive ? classes.linkActive : classes.link}
+                    className={classes.link}
+                    data-cy="MegaMenu-ShopByColumn-link"
+                    to={categoryUrl}
+                    onClick={handleCloseSubMenu}
+                >
+                    {label}
+                </Link>
+            </li>
+        );
+    }, [
+        // handleViewAll,
+        shopBy,
+        itemCountToShow,
+        formatMessage,
+        // classes
+    ]);
+
     return (
-        <div className={classes.ShopByColumn}>
-            {/* <Link
-                {...keyboardProps}
-                className={classes.link}
-                data-cy="MegaMenu-ShopByColumn-link"
-                to={categoryUrl}
-                onClick={() => {
-                    handleCloseSubMenu();
-                    onNavigate();
-                }}
-            >
-                <span className={classes.heading}>{category.name}</span>
-            </Link> */}
-            <span className={classes.heading}>{shopBy.name}</span>
-            {items}
+        <div className={classes.submenuItems}>
+            <div className={classes.submenuColumn}>
+                <span className={classes.heading}>{shopBy.name}</span>
+                {items}
+                {viewAll}
+            </div>
         </div>
     );
 };

package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.module.css

@@ -1,4 +1,4 @@
-.shopByColumn {
+.submenuColumn {
     composes: max-w-[235px] from global;
     composes: p-5 from global;
 }
@@ -9,9 +9,7 @@
 
 .link {
     composes: whitespace-nowrap from global;
-
     composes: focus_underline from global;
-
     composes: hover_underline from global;
 }
 
@@ -20,7 +18,7 @@
 }
 
 .submenuChild {
-    composes: mt-5 from global;
+    composes: mt-0 from global;
 }
 
 .submenuChildItem {

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js

@@ -24,6 +24,7 @@ const Submenu = props => {
         subMenuState,
         handleCloseSubMenu,
         categoryUrlSuffix,
+        parentCategory,
         onNavigate
     } = props;
     const PADDING_OFFSET = 20;
@@ -76,9 +77,10 @@ const Submenu = props => {
             <ShopByColumn
                 index={index}
                 keyboardProps={keyboardProps}
-                // key={category.uid}
+                key={shopBy.code}
+                category={parentCategory}
                 shopBy={shopBy}
-                // categoryUrlSuffix={categoryUrlSuffix}
+                categoryUrlSuffix={categoryUrlSuffix}
                 onNavigate={onNavigate}
                 handleCloseSubMenu={handleCloseSubMenu}
             />
@@ -87,11 +89,12 @@ const Submenu = props => {
 
     return (
         <div className={subMenuClassname}>
-            <div
-                className={classes.submenuItems}
-                style={{ minWidth: mainNavWidth + PADDING_OFFSET }}
-            >
-                {subMenus}
+            <div className={classes.submenuContainer}>
+                <div
+                    className={classes.submenuItems}
+                >
+                    {subMenus}
+                </div>
                 {shopBy}
             </div>
         </div>

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css

@@ -1,16 +1,24 @@
 .submenu {
     composes: absolute from global;
     composes: bg-white from global;
-    composes: flex-wrap from global;
-    composes: justify-between from global;
     composes: left-0 from global;
     composes: px-3 from global;
     composes: py-5 from global;
     composes: right-0 from global;
-    top: 133px;
+    top: 130px;
     box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
 }
 
+.submenuContainer {
+    composes: w-full from global;
+    composes: max-w-[1210px] from global;
+    composes: flex-wrap from global;
+    composes: justify-start from global;
+    composes: mx-[auto] from global;
+    composes: flex from global;
+    composes: gap-[15px] from global;
+}
+
 /* TODO @TW: cannot compose */
 .submenu::before {
     box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100));
@@ -30,14 +38,13 @@
 
 .submenu_active {
     composes: submenu;
-    composes: flex from global;
 }
 
 .submenuItems {
     composes: flex from global;
     composes: flex-wrap from global;
-    composes: justify-between from global;
-    composes: ml-auto from global;
-    composes: mr-auto from global;
+    /* composes: justify-between from global; */
+    /* composes: ml-auto from global; */
+    /* composes: mr-auto from global; */
     composes: flex-col from global;
 }

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js

@@ -48,7 +48,10 @@ const SubmenuColumn = props => {
                         className={isActive ? classes.linkActive : classes.link}
                         data-cy="MegaMenu-SubmenuColumn-link"
                         to={categoryUrl}
-                        onClick={onNavigate}
+                        onClick={() => {
+                            handleCloseSubMenu();
+                            onNavigate();
+                        }}
                     >
                         {name}
                     </Link>