@riosst100/pwa-marketplace 1.9.4 → 1.9.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "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 != "toys_franchise" && group != "toys_brands" && 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 != "toys_franchise" && group != "toys_brands" && 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/components/ShopByBrands/index.js

@@ -0,0 +1,2 @@
+export { default } from './shopByBrands';
+export { default as ShopByBrandsShimmer } from './shopByBrands.shimmer';

package/src/components/ShopByBrands/legoSets.shimmer.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './legoSets.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const ShopByBrands = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
+            <div className='border border-gray-100 px-6'>
+                <center>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <Shimmer width="95%" height="6vh" />
+                    </section>
+                </center>
+                <Divider className="mb-5 px-4" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+};
+
+export default ShopByBrands;

package/src/components/ShopByBrands/shopByBrands.js

@@ -0,0 +1,327 @@
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { useShopByBrands } from '@riosst100/pwa-marketplace/src/talons/ShopByBrands/useShopByBrands';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './shopByBrands.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { ShopByBrandsShimmer } from '@riosst100/pwa-marketplace/src/components/ShopByBrands';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+
+const ShopByBrands = props => {
+    const { categoryId } = props
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+
+    const [active, setActive] = useState('all');
+    const [activeTab, setActiveTab] = useState('all');
+    const [activeFilter, setActiveFilter] = useState('');
+    const [searchQuery, setSearchQuery] = useState('');
+    
+    const shopby = query.get('shopby') || null;
+    const setType = query.get('set_type') || null;
+
+    let defaultSort = {
+        sortText: 'All (A-Z)',
+        value: 'all'
+    };
+    
+    if (shopby == "release_year") {
+        defaultSort = {
+            sortText: 'All (By Year)',
+            value: 'date'
+        };
+    }
+
+    // if (productType == "expansion_sets") {
+    //     defaultSort = {
+    //         sortText: 'All (Expansion Sets)',
+    //         value: 'all'
+    //     };
+    // }
+    
+    // Sorting
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
+    const [currentSort] = sortProps;
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // let availableSortBy = [
+    //     {
+    //         'label': 'All (A-Z)',
+    //         'value': 'all'
+    //     },
+    //     {
+    //         'label': 'By Year',
+    //         'value': 'newest'
+    //     }
+    // ];
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useShopByBrands({ activeFilter, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+
+    const { error, loading, shopByBrands, categoryUrlSuffix, categoryUrlKey, productType, filteredShopByBrands, availableGroups, category } = talonProps;
+
+    if (loading && !shopByBrands)
+        return <ShopByBrandsShimmer />;
+    if (error && !shopByBrands) return <ErrorView />;
+
+    if (!shopByBrands && !loading && !error) {
+        return <ShopByBrandsShimmer />;
+    }
+
+    const setsLengthArr = [];
+
+    const newShopByBrands = searchQuery ? filteredShopByBrands : shopByBrands;
+
+    // useEffect(() => {
+        if (shopByBrands && shopByBrands.length) {
+            shopByBrands.map((setRelease, index) => {
+                const { group, sets } = setRelease;
+
+                setsLengthArr[group] = sets.length
+            })
+        }
+    // }, [shopByBrands])
+
+    const splitToNChunks = (array, n) => {
+        let result = [];
+        for (let i = n; i > 0; i--) {
+            result.push(array.splice(0, Math.ceil(array.length / i)));
+        }
+        return result;
+    }
+
+    let allSetsTitle = "Sets";
+    let attributeCode = "lego_set_name";
+    let byYearTitle = "By Year";
+    // if (shopby == "singles") {
+    //     attributeCode = "lego_set_name";
+    //     // allSetsTitle = "Singles";
+    //     byYearTitle = "By Year";
+    // }
+
+    const setRelases = newShopByBrands && newShopByBrands.length && newShopByBrands.map((setRelease, index) => {
+        const { group, sets } = setRelease;
+
+        const setsResult = [];
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id, release_year } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/${category?.url_path}${categoryUrlSuffix || ''}?${attributeCode}[filter]=${set_name},${option_id}`
+                );
+
+                setsResult.push(<li className='list-none'>
+                    <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {set_name}
+                    </Link>
+                </li>)
+            })
+        }
+
+        let setsResultSplitted = [];
+        if (active == group || newShopByBrands.length == 1) {
+            setsResultSplitted = splitToNChunks(setsResult, 3);
+        }
+        
+        return (
+            <>
+                {active == "all" && newShopByBrands.length > 1 ?
+                <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                    <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
+                        {group}
+                    </div>
+                    <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                </div> : ''}
+                {active == group || newShopByBrands.length == 1 ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
+                    <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                        {index == 0 ? <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2'>{group}</div> : 
+                        <div className='singles_item_group_letter text-xl font-semibold pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
+                        <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                    </div>
+                )
+                 : ''}
+            </>
+        );
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+
+        setSearchQuery('')
+    }
+
+    const handleActiveTab = (val) => {
+        setActiveTab(val);
+        setActive('all');
+        setActiveFilter('');
+
+        setSearchQuery('')
+    }
+    const handleSearchQuery = (val) => {
+        setSearchQuery(val)
+        setActive('all')
+    }
+
+    let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
+
+    let title = "Sets";
+    if (activeTab == "year") {
+        title = "Sets | By Year";
+    }
+    
+    const availableFilters = [
+        'Theme',
+        'Sub-Theme',
+        'Interest',
+        'Age Level'
+    ];
+
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        setActive('all');
+
+        setSearchQuery('')
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={shopby == "singles" ? "Mini-Figures" : title} />
+            <ul className={classes.nav}>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('year')
+                        }}
+                    >
+                        {activeTab == 'year' ? <b>{byYearTitle}</b> : byYearTitle}
+                    </button>
+                </li>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('all')
+                        }}
+                    >
+                        {activeTab == 'all' ? <b>{allSetsTitle}</b> : allSetsTitle}
+                    </button>
+                </li>
+            </ul>
+            {shopby == "lego_set_name" && activeTab == "all" ? <><ul className={classes.nav}>
+                {availableFilters.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveFilter(group)
+                        }}
+                    >
+                        {activeFilter == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+            ))}<li className={classes.nav_item}>
+            <button
+                onClick={() => {
+                    handleActiveFilter('')
+                }}
+            >
+                {!activeFilter ? <b>A-Z</b> : 'A-Z'}
+            </button>
+        </li></ul>
+            
+                </> : ''}
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {title}
+            </h1>
+            {activeTab == "year" && availableGroups ? <ul className={classes.nav}>
+                {availableGroups.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActive(group)
+                        }}
+                    >
+                        {active == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+            ))}
+            <li className={classes.nav_item}>
+                <button
+                    onClick={() => {
+                        handleActive('all')
+                    }}
+                >
+                    {active == 'all' ? <b>All</b> : 'All'}
+                </button>
+            </li>
+            </ul> : ''}
+            <div className='border border-gray-100 px-6'>
+                {shopByBrands ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
+                        {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
+                    </div>
+                ) : ''}
+                <section className='single_list-indexing-container relative m-auto pt-5'>
+                    {!activeFilter && activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
+                        <li>
+                            <button
+                                className={cn(
+                                    'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                    'leading-4 font-medium text-base hover_bg-gray-50'
+                                )}
+                                onClick={() => {
+                                    handleActive('all')
+                                }}
+                            >
+                                {active == 'all' ? <b>All</b> : 'All'}
+                            </button>
+                        </li>
+                        {alpha.map((letter, index) => (
+                            <li key={index}>
+                                <button
+                                    className={cn(
+                                        'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                        'leading-4 font-medium text-base ',
+                                        setsLengthArr[letter] > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                    )}
+                                    onClick={() => {
+                                        handleActive(letter)
+                                    }}
+                                    disabled={setsLengthArr[letter] > 0 ? false : true}
+                                >
+                                    {active == letter ? <b>{letter}</b> : letter}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>}
+                </section>
+                <Divider className="mb-5 px-4 mt-5" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {newShopByBrands && newShopByBrands.length ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found.</div>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+}
+
+export default ShopByBrands;

package/src/components/ShopByBrands/shopByBrands.module.css

@@ -0,0 +1,76 @@
+.nav {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    margin: 50px 0 30px 0;
+    composes: gap-[10px] from global;
+}
+
+.nav_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.toolbar {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.tabs {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.tabs_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.singlesWrapper {
+    column-count: 1;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.singlesGroupWrapper {
+    width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesGroupWrapper {
+        width: 50%;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesGroupWrapper {
+        width: 33.33%;
+    }
+}

package/src/components/ShopByBrands/shopByBrands.shimmer.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './shopByBrands.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const ShopByBrands = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
+            <div className='border border-gray-100 px-6'>
+                <center>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <Shimmer width="95%" height="6vh" />
+                    </section>
+                </center>
+                <Divider className="mb-5 px-4" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+};
+
+export default ShopByBrands;

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/category.js

@@ -17,7 +17,7 @@ import SportCardsSets from '@riosst100/pwa-marketplace/src/components/SportCards
 import NonSportCardsSets from '@riosst100/pwa-marketplace/src/components/NonSportCardsSets/nonSportCardsSets';
 import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSets';
 import TrainsSets from '@riosst100/pwa-marketplace/src/components/TrainsSets/trainsSets';
-import ShopByVehicles from '@riosst100/pwa-marketplace/src/components/ShopByVehicles/shopByVehicles';
+import ShopByBrands from '@riosst100/pwa-marketplace/src/components/ShopByBrands/shopByBrands';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -88,7 +88,10 @@ const Category = props => {
                 categoryId={uid}
                 isLoading={loading} />
             ) : (
-                shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
+                shopby == "all_brands" ? <ShopByBrands
+                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

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]);
@@ -266,7 +266,7 @@ const CategoryContent = props => {
                 if (label == "Singles") {
                     isSingles = true;
                 }
-                if (key == "toys_franchise" && urlKey == "franchise" || key == "toys_brands" && urlKey == "brands" || 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,
@@ -286,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;
 
@@ -313,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-1')}>
                     <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/shopByColumn.js

@@ -51,7 +51,7 @@ const ShopByColumn = props => {
             ;
 
             return (
-                <li key={index} className={cn(classes.submenuChildItem, 'mt-4')}>
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
                     <Link
                         {...keyboardProps}
                         // className={isActive ? classes.linkActive : classes.link}

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

@@ -3,7 +3,7 @@
     composes: bg-white from global;
     composes: left-0 from global;
     composes: px-3 from global;
-    composes: py-5 from global;
+    composes: py-1 from global;
     composes: right-0 from global;
     top: 130px;
     box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
@@ -41,7 +41,7 @@
 
 .submenuItems {
     composes: grid from global;
-    composes: grid-cols-4 from global;
+    composes: grid-cols-6 pb-2 from global;
     /* composes: justify-between from global; */
     /* composes: ml-auto from global; */
     /* composes: mr-auto from global; */

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

@@ -74,7 +74,7 @@ const SubmenuColumn = props => {
             ) : '';
 
             return (
-                <li key={index} className={cn(classes.submenuChildItem, 'mt-4')}>
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
                     {customMenuItems.length ? (
                         <>
                             <Link

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

@@ -1,6 +1,6 @@
 .submenuColumn {
     /* composes: max-w-[235px] from global; */
-    composes: p-2 from global;
+    composes: pl-4 pt-2 from global;
 }
 
 .heading {

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(

package/src/talons/ShopByBrands/shopByBrands.gql.js

@@ -0,0 +1,59 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_LEGO_SETS_QUERY = gql`
+    query getShopByBrands($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
+        shopByBrands(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                url_key
+                url_path
+            }
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getShopByBrandsQuery: GET_LEGO_SETS_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+};

package/src/talons/ShopByBrands/shopByBrands.js

@@ -0,0 +1,59 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_LEGO_SETS_QUERY = gql`
+    query getShopByBrands($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
+        shopByBrands(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                url_key
+                url_path
+            }
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getShopByBrandsQuery: GET_LEGO_SETS_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+};

package/src/talons/ShopByBrands/useShopByBrands.js

@@ -0,0 +1,218 @@
+import { useQuery, useLazyQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './shopByBrands.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useShopByBrands = props => {
+
+    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getShopByBrandsQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
+    const [runQuery, queryResponse] = useLazyQuery(getShopByBrandsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const pathnameArr = pathname.split('/');
+
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const parentCategoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
+    const productType = shopby;
+    
+    
+
+    // const { error, loading, data } = useQuery(getShopByBrandsQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first',
+    //     skip: !storeConfigData,
+    //     variables: {
+    //         categoryUrlKey: categoryUrlKey,
+    //         setType: setType
+    //     }
+    // });
+    const { data: introspectionData } = useQuery(getFilterInputsQuery);
+
+    const filterTypeMap = useMemo(() => {
+        const typeMap = new Map();
+        if (introspectionData) {
+            introspectionData.__type.inputFields.forEach(({ name, type }) => {
+                typeMap.set(name, type.name);
+            });
+        }
+        return typeMap;
+    }, [introspectionData]);
+    const filters = getFiltersFromSearch(search);
+
+    // Construct the filter arg object.
+    const newFilters = {};
+    filters.forEach((values, key) => {
+        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+        
+        if (key == "sc_baseball_release") {
+            for(let item of values) {
+                if(item) {
+                    // console.log(item.split(',')[0])
+                    const data = search.split('&');
+                    data.pop();
+                    activeFilters.push(
+                        {
+                            'label': item.split(',')[0],
+                            'path': data
+                        }
+                    )
+                }   
+            }
+        }
+    });
+
+    useEffect(() => {
+        // console.log("MASUK")
+
+        // if (queryResponse.data) {
+
+        
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        // newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                filters: newFilters,
+                categoryUrlKey: categoryUrlKey,
+                activeTab: activeTab,
+                shopby: shopby,
+                activeFilter: activeFilter
+            }
+        });
+    // }
+    }, [
+        runQuery,
+        activeTab,
+        activeFilter
+        // queryResponse
+        // filterTypeMap,
+        // search,
+        // newFilters,
+        // shopby,
+        // categoryUrlKey
+    ]);
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    // { data: queryResponse, error, loading }
+
+    
+
+    // console.log(data)
+
+    // const isBackgroundLoading = !!data && loading;
+
+    const availableLeagues = [];
+
+    // console.log(queryResponse.data)
+
+    const shopByBrands = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+
+        // console.log(data)
+        
+        const shopByBrands = queryResponse?.data?.shopByBrands;
+        if (!shopByBrands) {
+            return null;
+        }
+
+        return shopByBrands.slice().sort((a, b) =>a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
+    }, [queryResponse]);
+
+    const availableGroups = shopByBrands && shopByBrands.length ? shopByBrands.map(({ group }) => group) : [];
+
+    // const availableLeagues = shopByBrands && shopByBrands.length ? shopByBrands.map(({ sets }) => shopByBrands.map(({ sc_league }) => sc_league)) : [];
+// console.log(availableLeagues)
+    // sc_league
+
+    const filteredShopByBrands = useMemo(() => {
+        if (!shopByBrands) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            // useEffect(() => {
+            //     setActive('all')
+            // }, [active]);
+
+            shopByBrands.map(({ group, sets }, index) => {
+                const newSets = sets.filter(function(set) {
+                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group.search(new RegExp(searchQuery, "i")) != -1;
+                    // return set.set_name.includes(searchQuery);
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'group': group,
+                        'sets': newSets
+                    })
+                }
+            })
+        }
+
+        return searchQuery ? filteredSets : shopByBrands;
+    }, [shopByBrands, searchQuery]);
+
+    // useEffect(() => {
+    //     setPageLoading(isBackgroundLoading);
+    // }, [isBackgroundLoading, setPageLoading]);
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+
+    const error = queryResponse?.error;
+    const loading = queryResponse?.loading;
+
+    // console.log(shopByBrands)
+
+    return {
+        error,
+        loading,
+        shopByBrands,
+        filteredShopByBrands,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType,
+        availableGroups,
+        category,
+        // availableLeagues
+    };
+};