@riosst100/pwa-marketplace 1.9.3 → 1.9.5

package/package.json

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

package/src/components/FilterTop/CurrentTopFilters/currentTopFilter.js

@@ -31,7 +31,7 @@ const CurrentTopFilter = props => {
         }
     );
 
-    return group != "trains" && group != "trains_gauge" && group != "category" && group != "shopby" ? (
+    return group && group != "toys_character" && group != "toys_product_series" && group != "toys_scale" && group != "toys_product_line" && group != "filterby" && group != "trains" && group != "toys_franchise" && group != "toys_brands" && group != "trains_gauge" && group != "category" && group != "shopby" ? (
         <span className={classes.item} data-cy="CurrentTopFilter-root">
             <Trigger
                 action={handleClick}

package/src/components/FilterTop/FilterBlockList/filterBlockList.js

@@ -13,13 +13,17 @@ const FilterBlockList = props => {
         onApply,
         filterNames,
         originalFilterState,
-        search
+        search,
+        setFilterBy,
+        filterBy
     } = props;
 
     const itemElements = useMemo(() => {
         const key = `item-${group}`;
         return (
             <FilterTopItemGroup
+                setFilterBy={setFilterBy}
+                filterBy={filterBy}
                 filterApi={filterApi}
                 filterState={filterState}
                 group={group}

package/src/components/FilterTop/FilterBlockList/filterTopItem.js

@@ -4,7 +4,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import { Link } from 'react-router-dom';
 
 const FilterTopItem = props => {
-    const { filterApi, group, item, onApply, labels, activeFilters, search } = props;
+    const { setFilterBy, filterBy, filterApi, group, item, onApply, labels, activeFilters, search } = props;
     const { removeGroup, toggleItem } = filterApi;
     const { title, value } = item;
 
@@ -20,6 +20,7 @@ const FilterTopItem = props => {
                     toggleItem({ group, item });
                 }
             }
+            setFilterBy('')
             if (typeof onApply === 'function') {
                 onApply(group, item);
             }
@@ -27,8 +28,16 @@ const FilterTopItem = props => {
         [group, item, onApply, removeGroup, toggleItem]
     );
 
-    const element = group == "category" ? (
+    const element = group == "filterby" ? (
+        filterBy == value ? (
+            <span className={classes.item}><b>{title}</b></span>
+        ) : (
+            <span className={classes.item} onClick={() => setFilterBy(value)}>{title}</span>
+        )
+    ) : group == "category" ? (
         <Link className={classes.item} to={'/'+value}>{title}</Link>
+    ) : value == "all_brands" ? (
+        <Link className={classes.item} to={search ? search + '&shopby=' + 'all_brands' : '?shopby=' + 'all_brands'}>{title}</Link>
     ) : group == "shopby" || group == "shopby_with_all" ? (
         <Link className={classes.item} to={search ? search + '&shopby=' + value : '?shopby=' + value}>{title}</Link>
     ) : (

package/src/components/FilterTop/FilterBlockList/filterTopItemGroup.js

@@ -7,7 +7,7 @@ import defaultClasses from './filterTopItemGroup.module.css';
 import CurrentTopFilter from '@riosst100/pwa-marketplace/src/components/FilterTop/CurrentTopFilters/currentTopFilter';
 
 const FilterTopItemGroup = props => {
-    const { filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState, search } = props;
+    const { setFilterBy, filterBy, filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState, search } = props;
 
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -46,6 +46,8 @@ const FilterTopItemGroup = props => {
             return (
                 <FilterTopItem
                     key={code}
+                    setFilterBy={setFilterBy}
+                    filterBy={filterBy}
                     filterApi={filterApi}
                     filterState={filterState}
                     group={group}
@@ -85,7 +87,7 @@ const FilterTopItemGroup = props => {
         <div className={classes.root}>
             {radioItems}
             {filterElements && filterElements.length > 10 ? <span className={classes.item}><b>More Item</b></span> : ''}
-            {filterElements && filterElements.length ? filterElements : group != "trains" && group != "trains_gauge" && group != "category" && group != "shopby" ? (<span className={classes.item}><b>All</b></span>) : ''}
+            {filterElements && filterElements.length ? filterElements : group && group != "toys_character" && group != "toys_product_series" && group != "toys_scale" && group != "toys_product_line" && group != "trains" && group != "trains_gauge" && group != "toys_franchise" && group != "toys_brands" && group != "category" && group != "filterby" && group != "shopby" ? (<span className={classes.item}><b>All</b></span>) : ''}
         </div>
     );
 };

package/src/components/FilterTop/filterTop.js

@@ -23,7 +23,10 @@ const SCROLL_OFFSET = 150;
  */
 const FilterTop = props => {
     const { shopby, filters, filterCountToOpen, allowedFilters, category } = props;
-    const talonProps = useFilterTop({ shopby, filters, category });
+    const [filterBy, setFilterBy] = useState('');
+
+    // console.log(filterBy)
+    const talonProps = useFilterTop({ shopby, filters, category, filterBy, setFilterBy });
     const {
         filterApi,
         filterItems,
@@ -116,6 +119,8 @@ const FilterTop = props => {
                     return (
                         <FilterTopBlock
                             key={group}
+                            setFilterBy={setFilterBy}
+                            filterBy={filterBy}
                             filterNames={filterNames}
                             filterApi={filterApi}
                             filterState={blockState}

package/src/components/FilterTop/filterTopBlock.js

@@ -25,7 +25,9 @@ const FilterTopBlock = props => {
         filterNames,
         initialOpen,
         originalFilterState,
-        search
+        search,
+        setFilterBy,
+        filterBy
     } = props;
 
     const { formatMessage } = useIntl();
@@ -37,6 +39,8 @@ const FilterTopBlock = props => {
 
     const list = <Form>
         <FilterBlockList
+            setFilterBy={setFilterBy}
+            filterBy={filterBy}
             filterApi={filterApi}
             filterState={filterState}
             originalFilterState={originalFilterState}

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

@@ -56,6 +56,11 @@ export const useCategory = props => {
 
     const sortProps = useSort({ sortFromSearch: false });
     const [currentSort] = sortProps;
+    
+    const { pathname } = useLocation();
+
+    const pathnameArr = pathname.split('/');
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
 
     // Keep track of the sort criteria so we can tell when they change.
     const previousSort = useRef(currentSort);
@@ -132,7 +137,9 @@ export const useCategory = props => {
 
         // Use the category uid for the current category page regardless of the
         // applied filters. Follow-up in PWA-404.
-        newFilters['category_uid'] = { eq: id };
+        if (categoryUrlKey != "brands" && categoryUrlKey != "franchise") {
+            newFilters['category_uid'] = { eq: id };
+        }
 
         runQuery({
             variables: {

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

@@ -93,8 +93,8 @@ const CategoryContent = props => {
                 history.replace('/cards/non-sports-cards/comics.html')
             }
 
-            if (urlKey == "age-level" || urlKey == "lego" || urlKey == "minifigures" || urlKey == "sub-theme" || urlKey == "theme" || urlKey == "interest") {
-                history.replace('/lego-toys/lego/sets.html')
+            if (urlKey == "lego") {
+                history.replace('/lego/lego-sets.html')
             }
         }
     }, [category]);
@@ -254,6 +254,7 @@ const CategoryContent = props => {
     // console.log(allActiveFilters)
 
     // console.log(virtualCategoryFilters)
+    const urlKey = category?.url_key;
 
     if (allActiveFilters && allActiveFilters.size > 0) {
         allActiveFilters.forEach((value, key) => {
@@ -265,7 +266,7 @@ const CategoryContent = props => {
                 if (label == "Singles") {
                     isSingles = true;
                 }
-                if (virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
+                if (key == "toys_product_line" && urlKey == "brands" || key == "toys_product_line" && urlKey == "franchise" || key == "toys_franchise" && urlKey == "brands" || key == "toys_franchise" && urlKey == "franchise" || key == "toys_brands" && urlKey == "franchise" || key == "toys_brands" && urlKey == "brands" || virtualCategoryFilters.includes(key)) {
                     activeFilters.push(
                         {
                             'label': label,
@@ -285,7 +286,7 @@ const CategoryContent = props => {
 
     let title = activeFilters && activeFilters.length ? (
         activeFilters.length > 1 ? 
-            activeFilters.map(u => u.label).join(': ')
+            activeFilters[activeFilters.length - 1].label
          : currentFilter
     ) : categoryName;
 
@@ -312,8 +313,9 @@ const CategoryContent = props => {
                 {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
                     <>
                         {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
-                        {shopby != "gauge" ? <SubCategory parent={parent} children={children} /> : ''}
                         {!currentFilter && <CustomSubCategory categoryName={category ? category.name : null} customSubCategory={category ? category.custom_subcategory : null} />}
+                        {shopby != "gauge" ? <SubCategory parent={parent} children={children} /> : ''}
+                        
                     </>
                 {/* ) : ( */}
                     <>

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

@@ -30,7 +30,7 @@ const CustomSubmenuColumn = props => {
             );
 
             return (
-                <li key={index} className={cn(classes.submenuChildItem, 'mb-1.5')}>
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-4')}>
                     <Link
                         className={classes.link}
                         data-cy="MegaMenu-CustomSubmenuColumn-link"
@@ -47,10 +47,29 @@ const CustomSubmenuColumn = props => {
             );
         });
 
-        children = <ul className={cn(classes.submenuChild, 'pt-1')}>{childrenItems}</ul>;
+        children = <>
+        <ul className={cn(classes.submenuChild, 'pt-1')}><span className={classes.heading}>Categories</span>{childrenItems}</ul>
+        </>;
     }
 
     return children;
+    // return (
+    //     <div className={classes.submenuColumn}>
+    //         <Link
+    //             // {...keyboardProps}
+    //             className={classes.link}
+    //             data-cy="MegaMenu-SubmenuColumn-link"
+    //             // to={categoryUrl}
+    //             // onClick={() => {
+    //                 // handleCloseSubMenu();
+    //                 // onNavigate();
+    //             // }}
+    //         >
+    //             <span className={classes.heading}>{category.name}</span>
+    //         </Link>
+    //         {children}
+    //     </div>
+    // );
 };
 
 export default CustomSubmenuColumn;

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

@@ -7,6 +7,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenu.module.css';
 import SubmenuColumn from './submenuColumn';
 import ShopByColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn';
+import CustomSubmenuColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn';
 import cn from 'classnames';
 
 /**
@@ -44,6 +45,29 @@ const Submenu = props => {
         ? classes.submenu_active
         : classes.submenu_inactive;
 
+    // const subMenus = items.map((category, index) => {
+    //     const keyboardProps =
+    //         index === items.length - 1 ? talonProps.keyboardProps : {};
+    //     return (
+    //         <SubmenuColumn
+    //             index={index}
+    //             keyboardProps={keyboardProps}
+    //             key={category.uid}
+    //             category={category}
+    //             categoryUrlSuffix={categoryUrlSuffix}
+    //             onNavigate={onNavigate}
+    //             arrow={arrow}
+    //             handleCloseSubMenu={handleCloseSubMenu}
+    //         />
+    //     );
+    // });
+    // const subMenus = <CustomSubmenuColumn
+    //     categoryUrlSuffix={categoryUrlSuffix}
+    //     onNavigate={onNavigate}
+    //     arrow={arrow}
+    //     handleCloseSubMenu={handleCloseSubMenu}
+    //     customMenuItems={items}
+    // />;
     const subMenus = items.map((category, index) => {
         const keyboardProps =
             index === items.length - 1 ? talonProps.keyboardProps : {};
@@ -61,7 +85,16 @@ const Submenu = props => {
         );
     });
 
-    // const shopByItems = [
+    // const shopByItems2 = [
+    //     {
+    //         name: 'Shop By Franchise',
+    //         items: [
+    //             {
+    //                 name: 'Hasbro',
+    //                 url: '/'
+    //             }
+    //         ]
+    //     },
     //     {
     //         name: 'Shop By Franchise',
     //         items: [
@@ -101,10 +134,12 @@ const Submenu = props => {
                 <div
                     className={cn(
                         classes.submenuItems,
-                        'grid grid-cols-4',
+                        'grid grid-cols-6',
                     )}
                 >
-                    {subMenus}
+                    {shopByItems.length ? (<div className={classes.submenuColumn}>
+                        {subMenus}
+                    </div>) : subMenus}
                     {shopBy}
                 </div>
             </div>

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

@@ -41,7 +41,7 @@
 
 .submenuItems {
     composes: grid from global;
-    composes: grid-cols-4 from global;
+    composes: grid-cols-6 from global;
     /* composes: justify-between from global; */
     /* composes: ml-auto from global; */
     /* composes: mr-auto from global; */

package/src/talons/FilterTop/filterTop.gql.js

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_CUSTOM_FILTERS = gql`
-    query GetCustomFilters($shopby: String, $category: String!, $filters: ProductAttributeFilterInput!) {
-        customSubFilters(shopby: $shopby, category: $category, filters: $filters) {
+    query GetCustomFilters($filterBy: String, $shopby: String, $category: String!, $filters: ProductAttributeFilterInput!) {
+        customSubFilters(filterBy: $filterBy, shopby: $shopby, category: $category, filters: $filters) {
             label
             count
             attribute_code

package/src/talons/FilterTop/useFilterTop.js

@@ -21,7 +21,7 @@ import DEFAULT_OPERATIONS from './filterTop.gql';
 const DRAWER_NAME = 'filter';
 
 export const useFilterTop = props => {
-    const { filters, category, shopby } = props;
+    const { filters, category, shopby, filterBy, setFilterBy } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getFilterInputsQuery, getCustomFilters } = operations;
@@ -78,14 +78,16 @@ export const useFilterTop = props => {
             variables: {
                 filters: newFilters,
                 category: category?.url_path,
-                shopby: shopby
+                shopby: shopby,
+                filterBy: filterBy
             }
         });
     }, [
         runQuery,
         filterTypeMap,
         search,
-        category
+        category,
+        filterBy
     ]);
 
     const attributeCodes = useMemo(