@riosst100/pwa-marketplace 1.6.5 → 1.6.7

package/package.json

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -18,11 +18,31 @@ const CollectibleGameSets = props => {
 
     const [searchQuery, setSearchQuery] = useState('');
 
-    
-    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const shopby = query.get('shopby') || 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'
+    //     };
+    // }
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
 
     const [currentSort] = sortProps;
 
@@ -37,7 +57,9 @@ const CollectibleGameSets = props => {
 
     const talonProps = useCollectibleGameSets({ searchQuery, setActive, currentSort });
 
-    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets, availableGroups } = talonProps;
+
+    console.log(availableGroups)
 
     if (loading && !collectibleGameSets)
         return <CollectibleGameSetsShimmer />;
@@ -104,9 +126,9 @@ const CollectibleGameSets = props => {
         setSearchQuery('')
     }
 
-    const 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 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'];
 
-    const availableSortBy = [
+    let availableSortBy = [
         {
             'label': 'All (A-Z)',
             'value': 'all'
@@ -114,26 +136,67 @@ const CollectibleGameSets = props => {
         {
             'label': 'Latest Sets',
             'value': 'newest'
-        },
-        {
-            'label': 'By Year',
-            'value': 'date'
         }
     ];
 
+    if (shopby == "release_year") {
+        availableSortBy = [
+            {
+                'label': 'All (By Year)',
+                'value': 'date'
+            },
+            {
+                'label': 'Latest Sets',
+                'value': 'newest'
+            }
+        ];
+
+        // alpha = availableGroups;
+    }
+
+    if (productType == "expansion_sets") {
+        // availableSortBy = [
+        //     {
+        //         'label': 'All (Expansion Sets)',
+        //         'value': 'all'
+        //     },
+        //     {
+        //         'label': 'Latest Sets',
+        //         'value': 'newest'
+        //     }
+        // ];
+
+        // alpha = availableGroups
+    }
+
     let title = "All Sets";
-    if (productType == "expansion-sets") {
+    if (productType == "expansion_sets") {
         title = "Expansion Sets";
     } else if (productType == "artist") {
-        title = "Artist";
+        title = "By Artist";
+    } else if (shopby == "release_year") {
+        title = "By Year";
     }
 
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
-            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+            {shopby != "release_year" && productType != "expansion_sets" && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {title}
-            </h1>
+            </h1>}
+            {shopby == "release_year" || productType == "expansion_sets" && <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>
+            ))}
+            </ul>}
             <div className='border border-gray-100 px-6'>
                 {collectibleGameSets ? (
                     <div
@@ -143,44 +206,42 @@ const CollectibleGameSets = props => {
                         <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
                     </div>
                 ) : ''}
-                {productType != "expansion-sets" ? (
-                    <>
-                        <section className='single_list-indexing-container relative m-auto py-10'>
-                            <ul className='flex gap-2 justify-center flex-wrap'>
-                                <li>
+                <>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <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 hover_bg-gray-50'
+                                            'leading-4 font-medium text-base ',
+                                            setsLengthArr[letter] > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
                                         )}
                                         onClick={() => {
-                                            handleActive('all')
+                                            handleActive(letter)
                                         }}
+                                        disabled={setsLengthArr[letter] > 0 ? false : true}
                                     >
-                                        {active == 'all' ? <b>All</b> : 'All'}
+                                        {active == letter ? <b>{letter}</b> : letter}
                                     </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>
-                    </>
-                ) : ''}
+                            ))}
+                        </ul>
+                    </section>
+                </>
                 <Divider className="mb-5 px-4 mt-5" />
                 <section className='singles-container'>
                     <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>

package/src/components/CollectibleGameSets/collectibleGameSets.module.css

@@ -1,3 +1,26 @@
+.nav {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[10px] from global;
+    margin-bottom: 10px;
+}
+
+.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;
@@ -10,7 +33,7 @@
     composes: flex from global;
     composes: flex-wrap from global;
     composes: mt-3 from global;
-    composes: gap-[15px] from global;
+    composes: gap-[10px] from global;
     margin-bottom: 30px;
 }
 

package/src/components/CollectibleGameSets/collectibleGameSets.shimmer.js

@@ -15,7 +15,7 @@ const CollectibleGameSets = props => {
             <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 py-10'>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
                         <Shimmer width="95%" height="6vh" />
                     </section>
                 </center>

package/src/components/CustomSubCategoryPage/subCategoryPage.js

@@ -11,6 +11,7 @@ import { ShopByShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBy'
 import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
 import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
 import { useSubCategoryPage } from '@riosst100/pwa-marketplace/src/talons/SubCategoryPage/useSubCategoryPage';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
 
 const SubCategoryPage = props => {
     const { categoryId } = props;
@@ -71,8 +72,9 @@ const SubCategoryPage = props => {
     return (
         <Fragment>
             <StoreTitle>{category ? category.name : 'Shop By'}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={category ? 'All ' + category.parent[0].name : ''} />
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                {category ? category.name : 'Shop By'}
+                {category ? 'All ' + category.parent[0].name : ''}
             </h1>
             <div className='border border-gray-100 px-6'>
                 {dataResult ? (
@@ -83,7 +85,7 @@ const SubCategoryPage = props => {
                     </div>
                 ) : ''}
                 <>
-                    <section className='single_list-indexing-container relative m-auto py-10'>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
                         <ul className='flex gap-2 justify-center flex-wrap'>
                             <li>
                                 <button

package/src/components/ShopBy/shopBy.js

@@ -172,9 +172,10 @@ const ShopBy = props => {
 
     return (
         <Fragment>
-            <StoreTitle>{attributeData ? category.name + ' | ' + attributeData.label : 'Shop By'}</StoreTitle>
+            <StoreTitle>{attributeData ? 'By ' + attributeData.label : 'Shop By'}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={'By ' + attributeData.label} />
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                {attributeData ? category.name + ' | ' + attributeData.label : 'Shop By'}
+                {attributeData ? 'By ' + attributeData.label : 'Shop By'}
             </h1>
             <div className='border border-gray-100 px-6'>
                 {dataResult ? (
@@ -187,7 +188,7 @@ const ShopBy = props => {
                 ) : ''}
                 {productType != "expansion-sets" ? (
                     <>
-                        <section className='single_list-indexing-container relative m-auto py-10'>
+                        <section className='single_list-indexing-container relative m-auto pt-5'>
                             <ul className='flex gap-2 justify-center flex-wrap'>
                                 <li>
                                     <button

package/src/components/ShopBy/shopBy.module.css

@@ -10,7 +10,7 @@
     composes: flex from global;
     composes: flex-wrap from global;
     composes: mt-3 from global;
-    composes: gap-[15px] from global;
+    composes: gap-[10px] from global;
     margin-bottom: 30px;
 }
 

package/src/components/ShopBy/shopBy.shimmer.js

@@ -15,7 +15,7 @@ const ShopBy = props => {
             <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 py-10'>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
                         <Shimmer width="95%" height="6vh" />
                     </section>
                 </center>

package/src/components/ShopBySets/index.js

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

package/src/components/ShopBySets/shopBySets.js

@@ -0,0 +1,269 @@
+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 { useCollectibleGameSets } from '@riosst100/pwa-marketplace/src/talons/CollectibleGameSets/useCollectibleGameSets';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './shopBySets.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { ShopBySetsShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBySets';
+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 ShopBySets = props => {
+    const { categoryId } = props
+
+    const [active, setActive] = useState('all');
+
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const shopby = query.get('shopby') || 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'
+    //     };
+    // }
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
+
+    const [currentSort] = sortProps;
+
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // console.log(currentSort)
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useCollectibleGameSets({ searchQuery, setActive, currentSort, shopby });
+
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets, availableGroups } = talonProps;
+
+    if (loading && !collectibleGameSets)
+        return <ShopBySetsShimmer />;
+    if (error && !collectibleGameSets) return <ErrorView />;
+
+    if (!collectibleGameSets && !loading && !error) {
+        return <ShopBySetsShimmer />;
+    }
+
+    const setsLengthArr = [];
+
+    const newCollectibleGameSets = searchQuery ? filteredCollectibleGameSets : collectibleGameSets;
+
+    // useEffect(() => {
+        if (collectibleGameSets && collectibleGameSets.length) {
+            collectibleGameSets.map((setRelease, index) => {
+                const { release_type, sets } = setRelease;
+
+                setsLengthArr[release_type] = sets.length
+            })
+        }
+    // }, [collectibleGameSets])
+
+    const setRelases = newCollectibleGameSets.length && newCollectibleGameSets.map((setRelease, index) => {
+        const { release_type, sets } = setRelease;
+
+        const setsResult = [];
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id, set_abbreviation, release_year } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[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} <small style={{"color":"grey"}}>{set_abbreviation}</small>
+                    </Link>
+                </li>)
+            })
+        }
+        
+        return (
+            <>
+                {active == "all" || active == release_type ?
+                <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' >
+                        {release_type}
+                    </div>
+                    <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                </div> : ''}
+            </>
+        );
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+
+        // 
+
+
+        setSearchQuery('')
+    }
+
+    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 availableSortBy = [
+        {
+            'label': 'All (A-Z)',
+            'value': 'all'
+        },
+        {
+            'label': 'Latest Sets',
+            'value': 'newest'
+        }
+    ];
+
+    if (shopby == "release_year") {
+        availableSortBy = [
+            {
+                'label': 'All (By Year)',
+                'value': 'date'
+            },
+            {
+                'label': 'Latest Sets',
+                'value': 'newest'
+            }
+        ];
+
+        // alpha = availableGroups;
+    }
+
+    if (productType == "expansion_sets") {
+        // availableSortBy = [
+        //     {
+        //         'label': 'All (Expansion Sets)',
+        //         'value': 'all'
+        //     },
+        //     {
+        //         'label': 'Latest Sets',
+        //         'value': 'newest'
+        //     }
+        // ];
+
+        // alpha = availableGroups
+    }
+
+    let title = "All Sets";
+    if (productType == "expansion_sets") {
+        title = "Expansion Sets";
+    } else if (productType == "artist") {
+        title = "By Artist";
+    } else if (shopby == "release_year") {
+        title = "By Year";
+    }
+
+    console.log(availableGroups)
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={shopby == "expansion_sets" ? "Expansion Sets" : (shopby == "release_year" ? "By Year" : "All Sets")} />
+            {shopby != "release_year" && productType != "expansion_sets" && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {title}
+            </h1>}
+            {shopby == "release_year" || productType == "expansion_sets" ? <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'>
+                {collectibleGameSets ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                        <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
+                    </div>
+                ) : ''}
+                {shopby == "sets" && <>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <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)}>
+                        {newCollectibleGameSets && newCollectibleGameSets.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 ShopBySets;

package/src/components/ShopBySets/shopBySets.module.css

@@ -0,0 +1,68 @@
+.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;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesWrapper {
+        column-count: 2;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesWrapper {
+        column-count: 3;
+    }
+}

package/src/components/ShopBySets/shopBySets.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 './shopBySets.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const ShopBySets = 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 ShopBySets;

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

@@ -11,6 +11,7 @@ import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { useIntl } from 'react-intl';
 import ShopBy from '@riosst100/pwa-marketplace/src/components/ShopBy/shopBy';
 import SubCategoryPage from '@riosst100/pwa-marketplace/src/components/CustomSubCategoryPage/subCategoryPage';
+import ShopBySets from '@riosst100/pwa-marketplace/src/components/ShopBySets/shopBySets';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -66,7 +67,6 @@ const Category = props => {
             />
         );
     }
-    console.log(categoryData)
 
     return (
         <Fragment>
@@ -76,7 +76,10 @@ const Category = props => {
                 categoryId={uid}
                 isLoading={loading} />
             ) : (
-                shopby ? (
+                shopby == "sets" || shopby == "expansion_sets" || shopby == "release_year" ? <ShopBySets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : (shopby ? (
                     <ShopBy
                     categoryId={uid}
                     shopby={shopby}
@@ -91,7 +94,7 @@ const Category = props => {
                     sortProps={sortProps}
                     pageSize={pageSize}
                     />
-                )
+                ))
             )}
         </Fragment>
     );

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

@@ -284,7 +284,7 @@ const CategoryContent = props => {
                         <div className={classes.contentWrapper}>
                             <div ref={sidebarRef} className={classes.sidebar}>
                                 <Suspense fallback={<FilterSidebarShimmer />}>
-                                    {shouldRenderSidebarContent && category && !category.hide_filters ? sidebar : null}
+                                    {shouldRenderSidebarContent && category ? sidebar : null}
                                 </Suspense>
                             </div>
                             <div className={classes.categoryContent}>

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

@@ -22,7 +22,7 @@ import { useLocation } from 'react-router-dom';
 const Breadcrumbs = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
-    const { categoryId, currentProduct, currentFilter } = props;
+    const { categoryId, currentProduct, customPage, currentFilter } = props;
 
     const talonProps = useBreadcrumbs({ categoryId });
 
@@ -85,7 +85,18 @@ const Breadcrumbs = props => {
                 </Link>
             )
         ) : (
-            filterBreadcrumbsElement.push(
+            customPage ? (
+                filterBreadcrumbsElement.push(
+                    <Link
+                        key={index}
+                        className={classes.link}
+                        to={resourceUrl(currentCategoryPath)}
+                        onClick={handleClick}
+                    >
+                        {filter.label}
+                    </Link>
+                )
+            ) : filterBreadcrumbsElement.push(
                 <span key={index}>
                     <span className={classes.divider}>{DELIMITER}</span>
                     <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{filter.label}</span>
@@ -97,7 +108,7 @@ const Breadcrumbs = props => {
     // If we have a "currentProduct" it means we're on a PDP so we want the last
     // category text to be a link. If we don't have a "currentProduct" we're on
     // a category page so it should be regular text.
-    const currentCategoryLink = currentProduct || currentFilter && currentFilter.length ? (
+    const currentCategoryLink = customPage || currentProduct || currentFilter && currentFilter.length ? (
         <Link
             className={classes.link}
             to={'/'+resourceUrl(currentCategoryPath)}
@@ -115,6 +126,13 @@ const Breadcrumbs = props => {
             <span className={classes.text}>{currentProduct}</span>
         </Fragment>
     ) : null;
+
+    const customPageNode = customPage ? (
+        <Fragment>
+            <span className={classes.divider}>{DELIMITER}</span>
+            <span className={classes.text}>{customPage}</span>
+        </Fragment>
+    ) : null;
     
     return (
         <div className={classes.root} aria-live="polite" aria-busy="false">
@@ -126,6 +144,7 @@ const Breadcrumbs = props => {
             {currentCategoryLink}
             {filterBreadcrumbsElement}
             {currentProductNode}
+            {customPageNode}
         </div>
     );
 };

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -8,7 +8,7 @@ import DEFAULT_OPERATIONS from './collectibleGameSets.gql';
 
 export const useCollectibleGameSets = props => {
 
-    const { searchQuery, setActive, currentSort } = props
+    const { searchQuery, setActive, currentSort, shopby } = props
 
     const { value: sortby } = currentSort
 
@@ -31,8 +31,8 @@ export const useCollectibleGameSets = props => {
 
     const pathnameArr = pathname.split('/');
 
-    const categoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
-    const productType = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const productType = shopby;
     
     const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
 
@@ -92,6 +92,8 @@ export const useCollectibleGameSets = props => {
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : collectibleGameSets.slice().sort((a, b) => a.release_type.toLowerCase().localeCompare(b.release_type.toLowerCase()));
     }, [data, sortby]);
 
+    const availableGroups = collectibleGameSets && collectibleGameSets.length ? collectibleGameSets.map(({ release_type }) => release_type) : [];
+
     // console.log(collectibleGameSets)
 
     const filteredCollectibleGameSets = useMemo(() => {
@@ -115,7 +117,7 @@ export const useCollectibleGameSets = props => {
 
                 if (newSets && newSets.length) {
                     filteredSets.push({
-                        'release_type': sortby == "date" ? set.release_year : release_type,
+                        'release_type': release_type,
                         'sets': newSets
                     })
                 }
@@ -138,6 +140,7 @@ export const useCollectibleGameSets = props => {
         filteredCollectibleGameSets,
         categoryUrlSuffix,
         categoryUrlKey,
-        productType
+        productType,
+        availableGroups
     };
 };

package/src/talons/SubCategoryPage/subCategoryPage.gql.js

@@ -20,6 +20,10 @@ export const GET_CATEGORY_CONTENT = gql`
                 name
                 url_key
                 url_path
+                parent {
+                    uid
+                    name
+                }
                 children {
                     uid
                     name