@riosst100/pwa-marketplace 1.5.4 → 1.5.6

package/package.json

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

package/src/componentOverrideMapping.js

@@ -24,6 +24,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/RootComponents/Category/useCategory.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategory.js',
     [`@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js',
     [`@magento/peregrine/lib/talons/FilterModal/useFilterList.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/FilterModal/useFilterList.js',
+    [`@magento/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js',
     [`@magento/venia-ui/lib/components/FilterSidebar/filterSidebar.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js',
     [`@magento/venia-ui/lib/components/TextInput/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/TextInput/index.js',
     [`@magento/venia-ui/lib/components/Pagination/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination/index.js',

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -10,31 +10,33 @@ import defaultClasses from './collectibleGameSets.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import cn from 'classnames';
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { CollectibleGameSetsShimmer } from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets';
+import ProductSort from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
 
 const CollectibleGameSets = props => {
 
-    const { product_type } = props;
+    const { productType } = props;
 
     const [active, setActive] = useState('all');
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useCollectibleGameSets({ product_type });
+    const talonProps = useCollectibleGameSets({ productType });
 
-    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey } = talonProps;
 
     if (loading && !collectibleGameSets)
-        return '';
-    // return <SellerShimmer />;
+        return <CollectibleGameSetsShimmer />;
     if (error && !collectibleGameSets) return <ErrorView />;
 
     if (!collectibleGameSets) {
         return (
             <h1>
                 <FormattedMessage
-                    id={'seller.notFound'}
+                    id={'sets.notDataFound'}
                     defaultMessage={
-                        'Seller Not Found.'
+                        'No data found.'
                     }
                 />
             </h1>
@@ -43,6 +45,8 @@ const CollectibleGameSets = props => {
 
     const setsLengthArr = [];
 
+    const groupByYear = [];
+
     const setRelases = collectibleGameSets.map((setRelease, index) => {
         const { release_type, sets } = setRelease;
 
@@ -52,7 +56,9 @@ const CollectibleGameSets = props => {
 
         if (sets.length) {
             sets.map((set, index) => {
-                const { set_name, option_id, set_abbreviation } = set;
+                const { set_name, option_id, set_abbreviation, release_year } = set;
+
+                groupByYear[release_year] = set;
 
                 const categoryUrl = resourceUrl(
                     `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
@@ -79,18 +85,41 @@ const CollectibleGameSets = props => {
         );
     });
 
+    console.log(groupByYear)
+
     const handleActive = (val) => {
         setActive(val);
     }
 
     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'];
 
+    const [sortBy, setSortBy] = useState({
+        sortText: 'All (A-Z)',
+        value: 'all'
+    });
+
+    const availableSortBy = [
+        {
+            'label': 'All (A-Z)',
+            'value': 'all'
+        },
+        {
+            'label': 'Newest',
+            'value': 'newest'
+        },
+        {
+            'label': 'All (Date)',
+            'value': 'all-date'
+        }
+    ];
+
     return (
         <>
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {productType == "sealed-products" ? "Expansion Sets" : "All Sets"}
             </h1>
             <div className='border border-gray-100 px-6'>
+                <CustomSortBy sortProps={[sortBy, setSortBy]} availableSortMethods={availableSortBy} />
                 {productType != "sealed-products" ? (
                     <>
                         <section className='single_list-indexing-container relative m-auto py-10'>

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

package/src/components/CollectibleGameSets/index.js

@@ -1 +1,2 @@
 export { default } from './collectibleGameSets';
+export { default as CollectibleGameSetsShimmer } from './collectibleGameSets.shimmer';

package/src/components/CustomSortBy/customSortBy.js

@@ -0,0 +1,198 @@
+import React, { useMemo, useCallback } from 'react';
+import { ChevronDown as ArrowDown } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { array, arrayOf, shape, string } from 'prop-types';
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import SortItem from './customSortItem';
+import defaultClasses from './customSortBy.module.css';
+import Button from '@magento/venia-ui/lib/components/Button';
+// import Icon from '@magento/venia-ui/lib/components/Icon';
+import { ArrowUp2 } from 'iconsax-react';
+import cn from 'classnames';
+
+const CustomSortBy = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { availableSortMethods, sortProps } = props;
+    const [currentSort, setSort] = sortProps;
+    const { elementRef, expanded, setExpanded } = useDropdown();
+    const { formatMessage, locale } = useIntl();
+
+    const orderSortingList = useCallback(
+        list => {
+            return list.sort((a, b) => {
+                return a.text.localeCompare(b.text, locale, {
+                    sensitivity: 'base'
+                });
+            });
+        },
+        [locale]
+    );
+
+    const sortMethodsFromConfig = availableSortMethods
+        ? availableSortMethods
+            .map(method => {
+                const { value, label } = method;
+                if (value !== 'price' && value !== 'position') {
+                    return {
+                        id: `sortItem.${value}`,
+                        text: label,
+                        attribute: value,
+                        sortDirection: 'ASC'
+                    };
+                }
+            })
+            .filter(method => !!method)
+        : null;
+
+    // click event for menu items
+    const handleItemClick = useCallback(
+        sortAttribute => {
+            setSort(prevSort => {
+                return {
+                    sortText: sortAttribute.text,
+                    value: sortAttribute.attribute,
+                };
+            });
+            setExpanded(false);
+        },
+        [setExpanded, setSort]
+    );
+
+    const sortElements = useMemo(() => {
+        // should be not render item in collapsed mode.
+        if (!expanded) {
+            return null;
+        }
+
+        const defaultSortMethods = [
+            {
+                id: 'sortItem.relevance',
+                text: formatMessage({
+                    id: 'sortItem.relevance',
+                    defaultMessage: 'Best Match'
+                }),
+                attribute: 'relevance',
+                sortDirection: 'DESC'
+            },
+            {
+                id: 'sortItem.priceDesc',
+                text: formatMessage({
+                    id: 'sortItem.priceDesc',
+                    defaultMessage: 'Price: High to Low'
+                }),
+                attribute: 'price',
+                sortDirection: 'DESC'
+            },
+            {
+                id: 'sortItem.priceAsc',
+                text: formatMessage({
+                    id: 'sortItem.priceAsc',
+                    defaultMessage: 'Price: Low to High'
+                }),
+                attribute: 'price',
+                sortDirection: 'ASC'
+            }
+        ];
+
+        const allSortingMethods = sortMethodsFromConfig
+            ? sortMethodsFromConfig
+            : defaultSortMethods;
+
+        const itemElements = Array.from(allSortingMethods, sortItem => {
+            const { attribute, sortDirection } = sortItem;
+            const isActive =
+                currentSort.value === attribute;
+
+            const key = `${attribute}--${sortDirection}`;
+            return (
+                <li key={key} className={classes.menuItem}>
+                    <SortItem
+                        sortItem={sortItem}
+                        active={isActive}
+                        onClick={handleItemClick}
+                    />
+                </li>
+            );
+        });
+
+        return (
+            <div className={classes.menu}>
+                <ul className='flex flex-col gap-2'>{itemElements}</ul>
+            </div>
+        );
+    }, [
+        classes.menu,
+        classes.menuItem,
+        currentSort.sortAttribute,
+        currentSort.sortDirection,
+        currentSort.sortFromSearch,
+        expanded,
+        formatMessage,
+        handleItemClick,
+        orderSortingList,
+        sortMethodsFromConfig
+    ]);
+
+    // expand or collapse on click
+    const handleSortClick = () => {
+        setExpanded(!expanded);
+    };
+
+    const handleKeypress = e => {
+        if (e.code == 'Enter') {
+            setExpanded(expanded);
+        }
+    };
+    const result = expanded
+        ? formatMessage({
+            id: 'productSort.sortButtonExpanded',
+            defaultMessage: 'Sort Button Expanded'
+        })
+        : formatMessage({
+            id: 'productSort.sortButtonCollapsed',
+            defaultMessage: 'Sort Button Collapsed'
+        });
+
+    return (
+        <div
+            ref={elementRef}
+            className={classes.root}
+            data-cy="CustomSortBy-root"
+            aria-busy="false"
+        >
+            <Button
+                priority={'low'}
+                classes={{
+                    root_lowPriority: classes.sortButton
+                }}
+                onClick={handleSortClick}
+                data-cy="CustomSortBy-sortButton"
+                onKeyDown={handleKeypress}
+                aria-label={result}
+                className='border border-gray-100 border-solid rounded-[5px] p-2.5 flex gap-x-[15px]'
+            >
+                <span className={classes.mobileText}>
+                    <FormattedMessage
+                        id={'productSort.sortButton'}
+                        defaultMessage={'Sort'}
+                    />
+                </span>
+                <span className={cn(classes.desktopText, 'flex items-center gap-[15px]')}>
+                    <span className={classes.sortText}>
+                        <FormattedMessage
+                            id={'productSort.sortByButton'}
+                            defaultMessage={'Sort by'}
+                        />
+                        &nbsp;{currentSort.sortText}
+                    </span>
+                    <ArrowUp2 size={15} className={cn('text-gray-900 transition-all stroke-[#292D32]', expanded ? 'rotate-0' : 'rotate-180')} />
+                </span>
+            </Button>
+            {sortElements}
+        </div>
+    );
+};
+
+export default CustomSortBy;

package/src/components/CustomSortBy/customSortBy.module.css

@@ -0,0 +1,68 @@
+.root {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: 20px;
+}
+
+.menu {
+    composes: absolute from global;
+    composes: bg-clip-padding from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    composes: list-none from global;
+    composes: mb-0 from global;
+    composes: min-w-[10rem] from global;
+    composes: mt-0.5 from global;
+    composes: mx-0 from global;
+    composes: right-0 from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: text-colorDefault from global;
+    composes: text-left from global;
+    composes: top-[110%] from global;
+    composes: z-menu from global;
+    composes: p-2.5 from global;
+}
+
+.menuItem {
+    composes: hover_bg-gray-100 from global;
+    composes: rounded-[5px] from global;
+    composes: relative from global;
+}
+
+.sortButton {
+    composes: rounded-[5px] from global;
+    composes: p-2.5 from global;
+
+    composes: min-w-[154px] from global;
+}
+
+.desktopText {
+    composes: hidden from global;
+
+    composes: lg_inline-flex from global;
+}
+
+.sortText {
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
+    composes: text-base from global;
+}
+
+.desktopIconWrapper {
+    transform: translateX(10px);
+}
+
+.desktopIcon {
+    /* composes: icon from '../Icon/icon.module.css'; */
+
+    composes: stroke-gray-500 from global;
+}
+
+.mobileText {
+    composes: lg_hidden from global;
+}

package/src/components/CustomSortBy/customSortItem.js

@@ -0,0 +1,57 @@
+import React, { useCallback } from 'react';
+import { Check } from 'react-feather';
+import { bool, func, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './customSortItem.module.css';
+import cn from 'classnames';
+
+const CustomSortItem = props => {
+    const { active, onClick, sortItem } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(
+        e => {
+            // use only left click for selection
+            if (e.button === 0) {
+                onClick(sortItem);
+            }
+        },
+        [sortItem, onClick]
+    );
+
+    const handleKeyDown = useCallback(
+        e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick(sortItem);
+            }
+        },
+        [onClick, sortItem]
+    );
+
+    return (
+        <button
+            className={cn(classes.root, active ? `before_block before_h-[100%] before_w-[3px] before_bg-blue-700 before_left-[-10px] before_absolute` : '')}
+            data-cy={active ? 'CustomSortItem-activeButton' : 'CustomSortItem-button'}
+            onMouseDown={handleClick}
+            onKeyDown={handleKeyDown}
+        >
+            <span className={classes.content}>
+                <span className={classes.text}>{sortItem.text}</span>
+            </span>
+        </button>
+    );
+};
+
+CustomSortItem.propTypes = {
+    active: bool,
+    classes: shape({
+        content: string,
+        root: string,
+        text: string
+    }),
+    onClick: func
+};
+
+export default CustomSortItem;

package/src/components/CustomSortBy/customSortItem.module.css

@@ -0,0 +1,23 @@
+.root {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: w-full from global;
+}
+
+.content {
+    composes: items-center from global;
+    composes: grid from global;
+    composes: grid-cols-[1fr] from global;
+    composes: grid-flow-col from global;
+    composes: gap-3 from global;
+    composes: h-[30px] from global;
+    composes: px-3 from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+}
+
+.text {
+    composes: text-left from global;
+    composes: whitespace-nowrap from global;
+    composes: text-base from global;
+}

package/src/components/CustomSortBy/index.js

@@ -0,0 +1 @@
+export { default } from './customSortBy';

package/src/components/FilterTop/CustomFilters/customFilters.module.css

@@ -20,5 +20,4 @@
     composes: bg-white from global;
     composes: border-gray-100 from global;
     border-radius: 5px;
-    composes: shadow-type-1 from global;
 }

package/src/components/ProductListTab/productListTab.js

@@ -29,7 +29,7 @@ const ProductListTab = props => {
             </span> */}
             <nav>
                 <ul className={classes.buttonContainer}>
-                    <li><button className={allProductClass}>All Products</button></li>
+                    <li><button className={classes.activeFirstButton}>All Products</button></li>
                     <li><button className={classes.middleButton}>Pre Order</button></li>
                     <li><button className={classes.lastButton}>Auctions</button></li>
                 </ul>

package/src/components/SubCategory/subCategory.js

@@ -8,21 +8,39 @@ import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
 import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
 
 const SubCategory = props => {
-    // const { children } = props;
+    const { children } = props;
 
-    // const talonProps = useSubCategory({ children });
+    const talonProps = useSubCategory({ children });
 
     const classes = useStyle(defaultClasses, props.classes);
 
-    const [activeTab, setActiveTab] = useState('singles')
+    const {
+        normalizedData
+    } = talonProps;
+    
+    const subCategory = [];
+    
+    normalizedData && normalizedData.map(({ text, path }, index) => {
+        subCategory.push(
+            <Link
+                key={index}
+                to={resourceUrl(path)}
+            >
+                <li className={classes.item}>{text}</li>
+            </Link>
+        )
+    });
+
+    return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
+
+    // const [activeTab, setActiveTab] = useState('singles')
 
     return (
         <>
             <ul className={classes.root}>
-                <li className={classes.item} onClick={() => setActiveTab('singles')}>All Sets</li>
-                <li className={classes.item} onClick={() => setActiveTab('sealed-products')}>Expansion Sets</li>
+                <li className={classes.item}>All Sets</li>
+                <li className={classes.item}>Expansion Sets</li>
             </ul>
-            {activeTab == "singles" ? <CollectibleGameSets product_type={"singles"} /> : <CollectibleGameSets product_type={"sealed-products"} />}
         </>
     )
 };

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQuery } from '@apollo/client';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useFilterState } from '@magento/peregrine/lib/talons/FilterModal';
+import {
+    getSearchFromState,
+    getStateFromSearch,
+    sortFiltersArray,
+    stripHtml
+} from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/FilterModal/filterModal.gql';
+
+const DRAWER_NAME = 'filter';
+
+export const useFilterSidebar = props => {
+    const { filters } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getFilterInputsQuery } = operations;
+
+    const [isApplying, setIsApplying] = useState(false);
+    const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
+    const [filterState, filterApi] = useFilterState();
+    const prevDrawer = useRef(null);
+    const isOpen = drawer === DRAWER_NAME;
+
+    const history = useHistory();
+    const { pathname, search } = useLocation();
+
+    const { data: introspectionData } = useQuery(getFilterInputsQuery);
+
+    const attributeCodes = useMemo(
+        () => filters.map(({ attribute_code }) => attribute_code),
+        [filters]
+    );
+
+    // Create a set of disabled filters.
+    const DISABLED_FILTERS = useMemo(() => {
+        const disabled = new Set();
+        // Disable category filtering when not on a search page.
+        if (pathname !== '/search.html') {
+            // disabled.add('category_id');
+            // disabled.add('category_uid');
+        }
+
+        return disabled;
+    }, [pathname]);
+
+    // Get "allowed" filters by intersection of filter attribute codes and
+    // schema input field types. This restricts the displayed filters to those
+    // that the api will understand.
+    const possibleFilters = useMemo(() => {
+        const nextFilters = new Set();
+        const inputFields = introspectionData
+            ? introspectionData.__type.inputFields
+            : [];
+
+        // perform mapping and filtering in the same cycle
+        for (const { name } of inputFields) {
+            const isValid = attributeCodes.includes(name);
+            const isEnabled = !DISABLED_FILTERS.has(name);
+
+            if (isValid && isEnabled) {
+                nextFilters.add(name);
+            }
+        }
+
+        return nextFilters;
+    }, [DISABLED_FILTERS, attributeCodes, introspectionData]);
+
+    const isBooleanFilter = options => {
+        const optionsString = JSON.stringify(options);
+        return (
+            options.length <= 2 &&
+            (optionsString.includes(
+                JSON.stringify({
+                    __typename: 'AggregationOption',
+                    label: '0',
+                    value: '0'
+                })
+            ) ||
+                optionsString.includes(
+                    JSON.stringify({
+                        __typename: 'AggregationOption',
+                        label: '1',
+                        value: '1'
+                    })
+                ))
+        );
+    };
+
+    // iterate over filters once to set up all the collections we need
+    const [
+        filterNames,
+        filterKeys,
+        filterItems,
+        filterFrontendInput
+    ] = useMemo(() => {
+        const names = new Map();
+        const keys = new Set();
+        const frontendInput = new Map();
+        const itemsByGroup = new Map();
+
+        const sortedFilters = sortFiltersArray([...filters]);
+
+        for (const filter of sortedFilters) {
+            const { options, label: name, attribute_code: group } = filter;
+
+            // If this aggregation is not a possible filter, just back out.
+            if (possibleFilters.has(group)) {
+                const items = [];
+
+                // add filter name
+                names.set(group, name);
+
+                // add filter key permutations
+                keys.add(`${group}[filter]`);
+
+                // TODO: Get all frontend input type from gql if other filter input types are needed
+                // See https://github.com/magento-commerce/magento2-pwa/pull/26
+                if (isBooleanFilter(options)) {
+                    frontendInput.set(group, 'boolean');
+                    // add items
+                    items.push({
+                        title: 'No',
+                        value: '0',
+                        label: name + ':' + 'No'
+                    });
+                    items.push({
+                        title: 'Yes',
+                        value: '1',
+                        label: name + ':' + 'Yes'
+                    });
+                } else {
+                    // Add frontend input type
+                    frontendInput.set(group, null);
+                    // add items
+                    for (const { label, value } of options) {
+                        items.push({ title: stripHtml(label), value });
+                    }
+                }
+                itemsByGroup.set(group, items);
+            }
+        }
+
+        return [names, keys, itemsByGroup, frontendInput];
+    }, [filters, possibleFilters]);
+
+    // on apply, write filter state to location
+    useEffect(() => {
+        if (isApplying) {
+            const nextSearch = getSearchFromState(
+                search,
+                filterKeys,
+                filterState
+            );
+
+            // write filter state to history
+            history.push({ pathname, search: nextSearch });
+
+            // mark the operation as complete
+            setIsApplying(false);
+        }
+    }, [filterKeys, filterState, history, isApplying, pathname, search]);
+
+    const handleOpen = useCallback(() => {
+        toggleDrawer(DRAWER_NAME);
+    }, [toggleDrawer]);
+
+    const handleClose = useCallback(() => {
+        closeDrawer();
+    }, [closeDrawer]);
+
+    const handleApply = useCallback(() => {
+        setIsApplying(true);
+        handleClose();
+    }, [handleClose]);
+
+    const handleReset = useCallback(() => {
+        filterApi.clear();
+        setIsApplying(true);
+    }, [filterApi, setIsApplying]);
+
+    const handleKeyDownActions = useCallback(
+        event => {
+            // do not handle keyboard actions when the modal is closed
+            if (!isOpen) {
+                return;
+            }
+
+            switch (event.keyCode) {
+                // when "Esc" key fired -> close the modal
+                case 27:
+                    handleClose();
+                    break;
+            }
+        },
+        [isOpen, handleClose]
+    );
+
+    useEffect(() => {
+        const justOpened =
+            prevDrawer.current === null && drawer === DRAWER_NAME;
+        const justClosed =
+            prevDrawer.current === DRAWER_NAME && drawer === null;
+
+        // on drawer toggle, read filter state from location
+        if (justOpened || justClosed) {
+            const nextState = getStateFromSearch(
+                search,
+                filterKeys,
+                filterItems
+            );
+
+            filterApi.setItems(nextState);
+        }
+
+        // on drawer close, update the modal visibility state
+        if (justClosed) {
+            handleClose();
+        }
+
+        prevDrawer.current = drawer;
+    }, [drawer, filterApi, filterItems, filterKeys, search, handleClose]);
+
+    useEffect(() => {
+        const nextState = getStateFromSearch(search, filterKeys, filterItems);
+
+        filterApi.setItems(nextState);
+    }, [filterApi, filterItems, filterKeys, search]);
+
+    return {
+        filterApi,
+        filterItems,
+        filterKeys,
+        filterNames,
+        filterFrontendInput,
+        filterState,
+        handleApply,
+        handleClose,
+        handleKeyDownActions,
+        handleOpen,
+        handleReset,
+        isApplying,
+        isOpen
+    };
+};

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -29,6 +29,9 @@ export const GET_CATEGORY_CONTENT = gql`
                 description
                 url_key
                 url_path
+                allowed_filters {
+                    code
+                }
                 custom_landing_page
                 attributes_block {
                     label

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

@@ -85,12 +85,44 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getSortMethods]);
 
-    const filters = filterData ? filterData.products.aggregations : null;
+    const rawFilters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
     const children =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].children
             : null;
+
+    const filters = [];
+
+    rawFilters && rawFilters.map((filter, index) => {
+
+        const filterOptions = [];
+        let label = filter.label;
+        if (filter.attribute_code == "category_uid") {
+            children && children.map((category, index) => {
+                filterOptions.push({
+                    'label': category.name,
+                    'value': category.uid
+                });
+            });
+
+            label = category ? category.name : label;
+        }
+
+        const newFilter = {
+            attribute_code: filter.attribute_code,
+            count: filter.count,
+            label: label,
+            options: filterOptions.length ? filterOptions : filter.options
+        };
+
+        filters.push(newFilter);
+    });
+
     const attributesBlock = categoryData && categoryData.categories.items.length
     ? categoryData.categories.items[0].attributes_block
     : null;
@@ -102,10 +134,7 @@ export const useCategoryContent = props => {
         ? data.products.page_info.total_pages
         : null;
     const totalCount = data ? data.products.total_count : null;
-    const category =
-        categoryData && categoryData.categories.items.length
-            ? categoryData.categories.items[0]
-            : null;
+    
     const categoryName =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].name

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

@@ -94,7 +94,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar filters={filters} />
+        <FilterSidebar children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;
@@ -174,12 +174,34 @@ const CategoryContent = props => {
     const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
 
     const { search } = useLocation();
-    const activeFilters = getFiltersFromSearch(search);
+    const allActiveFilters = getFiltersFromSearch(search);
+
+    const activeFilters = [];
+
+    if (allActiveFilters && allActiveFilters.size > 0) {
+        allActiveFilters.forEach((value, key) => {
+            value.forEach((value) => {
+                const filterArr = value.split(',');
+                
+                const label = filterArr[0];
+                const optionId = filterArr[1];
+                if (key == "card_set") {
+                    activeFilters.push(
+                        {
+                            'label': label
+                        }
+                    )
+                }
+            })
+        });
+    }
+
+    const currentFilter = activeFilters && activeFilters.length ? activeFilters[activeFilters.length - 1].label : '';
 
     return (
         <Fragment>
-            <Breadcrumbs categoryId={categoryId} />
-            <StoreTitle>{categoryName}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} currentFilter={activeFilters} />
+            <StoreTitle>{currentFilter ? currentFilter : categoryName}</StoreTitle>
             <article className={classes.root} data-cy="CategoryContent-root">
                 <div className={classes.categoryHeader}>
                     <h1 aria-live="polite" className={classes.title}>
@@ -187,16 +209,16 @@ const CategoryContent = props => {
                             className={classes.categoryTitle}
                             data-cy="CategoryContent-categoryTitle"
                         >
-                            {categoryTitle}
+                            {currentFilter ? currentFilter : categoryTitle}
                         </span>
                     </h1>
                     {categoryDescriptionElement}
                 </div>
-                {activeFilters.size <= 0 && category && category.custom_landing_page ? (
+                {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
                     <>
-                        <SubCategory customLandingPage={category.custom_landing_page} />
+                        <SubCategory children={children} customLandingPage={category ? category.custom_landing_page : ''} />
                     </>
-                ) : (
+                {/* ) : ( */}
                     <>
                         {/* <SubCategory filters={filters} children={children} /> */}
                         <FilterTop filters={filters} category={category} />
@@ -232,7 +254,7 @@ const CategoryContent = props => {
                             </div>
                         </div>
                     </>
-                )}
+                {/* )} */}
             </article>
         </Fragment>
     );

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

@@ -10,7 +10,8 @@ import Shimmer from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/comp
 import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css';
 import { ArrowRight2 } from 'iconsax-react';
 import cn from 'classnames';
-
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
+import { useLocation } from 'react-router-dom';
 
 /**
  * Breadcrumbs! Generates a sorted display of category links.
@@ -21,7 +22,7 @@ import cn from 'classnames';
 const Breadcrumbs = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
-    const { categoryId, currentProduct } = props;
+    const { categoryId, currentProduct, currentFilter } = props;
 
     const talonProps = useBreadcrumbs({ categoryId });
 
@@ -69,13 +70,36 @@ const Breadcrumbs = props => {
         );
     }
 
+    const filterBreadcrumbsElement = [];
+    
+    currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
+        currentProduct ? (
+            filterBreadcrumbsElement.push(
+                <Link
+                    className={classes.link}
+                    to={resourceUrl(currentCategoryPath)}
+                    onClick={handleClick}
+                >
+                    {filter.label}
+                </Link>
+            )
+        ) : (
+            filterBreadcrumbsElement.push(
+                <>
+                    <span className={classes.divider}>{DELIMITER}</span>
+                    <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{filter.label}</span>
+                </>
+            )
+        );
+    });
+
     // 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 ? (
+    const currentCategoryLink = currentProduct || currentFilter && currentFilter.length ? (
         <Link
             className={classes.link}
-            to={resourceUrl(currentCategoryPath)}
+            to={'/'+resourceUrl(currentCategoryPath)}
             onClick={handleClick}
         >
             {currentCategory}
@@ -90,7 +114,7 @@ const Breadcrumbs = props => {
             <span className={classes.text}>{currentProduct}</span>
         </Fragment>
     ) : null;
-
+    
     return (
         <div className={classes.root} aria-live="polite" aria-busy="false">
             <Link className={classes.link} to="/">
@@ -99,6 +123,7 @@ const Breadcrumbs = props => {
             {links}
             <span className={classes.divider}>{DELIMITER}</span>
             {currentCategoryLink}
+            {filterBreadcrumbsElement}
             {currentProductNode}
         </div>
     );

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

@@ -20,16 +20,18 @@ const CurrentFilters = props => {
                 const { title, value } = item || {};
                 const key = `${group}::${title}_${value}`;
 
-                elements.push(
-                    <li key={key} className={classes.item}>
-                        <CurrentFilter
-                            group={group}
-                            item={item}
-                            removeItem={removeItem}
-                            onRemove={onRemove}
-                        />
-                    </li>
-                );
+                if (group != "card_set") {
+                    elements.push(
+                        <li key={key} className={classes.item}>
+                            <CurrentFilter
+                                group={group}
+                                item={item}
+                                removeItem={removeItem}
+                                onRemove={onRemove}
+                            />
+                        </li>
+                    );
+                }
             }
         }
 

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

@@ -245,7 +245,7 @@ const FilterList = props => {
 
 FilterList.defaultProps = {
     onApply: null,
-    itemCountToShow: 2
+    itemCountToShow: 5
 };
 
 FilterList.propTypes = {

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

@@ -19,7 +19,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen } = props;
+    const { filters, filterCountToOpen, allowedFilters } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -52,25 +52,33 @@ const FilterSidebar = props => {
         [handleApply, filterRef]
     );
 
+    const allowedFiltersArr = [];
+
+    allowedFilters.length && allowedFilters.map((val, index) => {
+        allowedFiltersArr.push(val.code);
+    });
+
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {
                 const blockState = filterState.get(group);
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
-                return (
-                    <FilterBlock
-                        key={group}
-                        filterApi={filterApi}
-                        filterState={blockState}
-                        filterFrontendInput={frontendInput}
-                        group={group}
-                        items={items}
-                        name={groupName}
-                        onApply={handleApplyFilter}
-                        initialOpen={iteration < filterCountToOpen}
-                    />
-                );
+                if (!allowedFiltersArr.length && group != "category_uid" || allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
+                    return (
+                        <FilterBlock
+                            key={group}
+                            filterApi={filterApi}
+                            filterState={blockState}
+                            filterFrontendInput={frontendInput}
+                            group={group}
+                            items={items}
+                            name={groupName}
+                            onApply={handleApplyFilter}
+                            initialOpen={iteration < filterCountToOpen}
+                        />
+                    );
+                }
             }),
         [
             filterApi,

package/src/talons/CollectibleGameSets/collectibleGameSets.gql.js

@@ -20,6 +20,7 @@ export const GET_COLLECTIBLE_GAME_QUERY = gql`
                 option_id
                 set_abbreviation
                 release_date
+                release_year
                 release_number
             }
         }

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -8,7 +8,7 @@ import DEFAULT_OPERATIONS from './collectibleGameSets.gql';
 
 export const useCollectibleGameSets = props => {
 
-    const { product_type } = props
+    const { productType } = props
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, null);
     const { getStoreConfigData, getCollectibleGameQuery } = operations;
@@ -28,11 +28,10 @@ export const useCollectibleGameSets = props => {
     const pathnameArr = pathname.split('/');
 
     const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
-    const productType = product_type ? product_type : 'singles';
     
     const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
 
-    const { error, loading, data } = useQuery(getCollectibleGameQuery, {
+    const { error: allSetsError, loading: allSetsLoading, data: allSetsData } = useQuery(getCollectibleGameQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !storeConfigData,
@@ -42,26 +41,31 @@ export const useCollectibleGameSets = props => {
         }
     });
 
-    const isBackgroundLoading = !!data && loading;
+    const { error: expansionSetsError, loading: expansionSetsLoading, data: expansionSetsData } = useQuery(getCollectibleGameQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            categoryUrlKey: categoryUrlKey,
+            productType: productType
+        }
+    });
+
+    const loading = !!allSetsData && allSetsLoading;
+    const error = !!allSetsData && allSetsError;
 
     const collectibleGameSets = useMemo(() => {
-        if (!data) {
+        if (!allSetsData) {
             return null;
         }
         
-        const collectibleGameSets = data.collectibleGameSets;
-
+        const collectibleGameSets = productType == "sealed-products" ? expansionSetsData.collectibleGameSets : allSetsData.collectibleGameSets;
         if (!collectibleGameSets) {
             return null;
         }
 
         return collectibleGameSets;
-    }, [data, categoryUrlKey]);
-
-    // Update the page indicator if the GraphQL query is in flight.
-    useEffect(() => {
-        setPageLoading(isBackgroundLoading);
-    }, [isBackgroundLoading, setPageLoading]);
+    }, [allSetsData, expansionSetsData, categoryUrlKey, productType]);
 
     return {
         error,