@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/package.json

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

package/src/componentOverrideMapping.js

@@ -13,6 +13,56 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',
     [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
     [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
+    [`@magento/peregrine/lib/talons/MegaMenu/megaMenu.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js',
+    [`@magento/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js',
+    [`@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js',
     [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
     [`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
-};
+    [`@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js',
+    [`@magento/venia-ui/lib/RootComponents/Category/categoryContent.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js',
+    [`@magento/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js',
+    [`@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',
+    [`@magento/venia-ui/lib/components/Breadcrumbs/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/index.js',
+    [`@magento/venia-ui/lib/RootComponents/Category/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/index.js',
+    [`@magento/venia-ui/lib/components/Gallery/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Gallery/index.js',
+    [`@magento/venia-ui/lib/components/FilterSidebar/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterSidebar/index.js',
+    [`@magento/venia-ui/lib/components/FilterModal/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/index.js',
+    [`@magento/venia-ui/lib/components/Checkbox/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Checkbox/index.js',
+    [`@magento/venia-ui/lib/components/ProductSort/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort/index.js',
+    [`@magento/venia-ui/lib/components/ProductFullDetail/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductFullDetail/index.js',
+    [`@magento/venia-ui/lib/components/ProductImageCarousel/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductImageCarousel/index.js',
+    [`@magento/venia-ui/lib/components/QuantityStepper/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper/index.js',
+    // [`@magento/venia-ui/lib/components/RichContent/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichContent/index.js',
+    [`@magento/venia-ui/lib/components/RadioGroup/radio.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js',
+    [`@magento/venia-ui/lib/components/Button/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Button/index.js',
+    [`@magento/venia-ui/lib/components/RichText/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichText/index.js',
+    [`@magento/venia-ui/lib/components/Main/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Main/index.js',
+    [`@magento/venia-ui/lib/components/Footer/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Footer/index.js',
+    [`@magento/venia-ui/lib/components/Newsletter/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Newsletter/index.js',
+    [`@magento/pagebuilder/lib/ContentTypes/Products/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/pagebuilder/lib/ContentTypes/Products/index.js',
+    [`@magento/venia-ui/lib/RootComponents/CMS/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/CMS/index.js',
+    [`@magento/pagebuilder/lib/ContentTypes/Slider/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/pagebuilder/lib/ContentTypes/Slider/index.js',
+    [`@magento/venia-ui/lib/components/App/app.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/App/app.js',
+    [`@magento/venia-ui/lib/components/SignIn/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SignIn/index.js',
+    [`@magento/venia-ui/lib/components/SignInPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SignInPage/index.js',
+    [`@magento/venia-ui/lib/components/Password/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Password/index.js',
+    [`@magento/venia-ui/lib/components/Password/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Password/index.js',
+    [`@magento/venia-ui/lib/components/CreateAccount/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CreateAccount/index.js',
+    [`@magento/venia-ui/lib/components/CreateAccountPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CreateAccountPage/index.js',
+    [`@magento/venia-ui/lib/components/Select/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Select/index.js',
+    [`@magento/venia-ui/lib/components/AccountMenu/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/AccountMenu/index.js',
+    [`@magento/venia-ui/lib/components/AccountInformationPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/AccountInformationPage/index.js',
+    [`@magento/venia-ui/lib/components/MyAccount/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MyAccount/index.js',
+    [`@magento/venia-ui/lib/components/CartPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/index.js',
+    [`@magento/venia-ui/lib/components/CheckoutPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CheckoutPage/index.js',
+    [`@magento/venia-ui/lib/components/Dialog/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Dialog/index.js',
+    [`@magento/venia-ui/lib/components/OrderHistoryPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/index.js',
+    [`@magento/venia-ui/lib/components/TextArea/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/TextArea/index.js',
+    [`@magento/venia-ui/lib/components/WishlistPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/WishlistPage/index.js',
+};

package/src/components/AccountLayout/accountlayout.module.css

@@ -0,0 +1,13 @@
+.menu {
+    flex-basis: 23%;
+}
+
+.blockContent {
+    width: 100%;
+}
+
+@media only screen and (min-width: 1024px) {
+    .blockContent {
+        width: calc(100% - 260px);
+    }
+}

package/src/components/AccountLayout/index.js

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import defaultClasses from './accountlayout.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { ArrowDown2 } from 'iconsax-react';
+import { useWindowSize } from '@magento/peregrine';
+import cn from 'classnames';
+import { useLocation } from 'react-router-dom';
+
+const AccountLayout = (props) => {
+    const { children } = props;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const toggleDropdown = () => setIsOpen(!isOpen);
+    const windowSize = useWindowSize();
+    const isTablet = windowSize.innerWidth <= 1023;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const location = useLocation();
+    const { pathname } = location
+
+    const [activeMenu, setActiveMenu] = useState(pathname);
+
+    const handleActiveMenu = () => {
+        setActiveMenu(pathname)
+    }
+
+    return (
+        <>
+            <div className='flex flex-col lg_flex-row lg_justify-between gap-[30px] mt-8 relative'>
+                {isTablet ? (
+                    <button
+                        onClick={toggleDropdown}
+                        className={cn(
+                            'text-[14px] font-medium flex justify-between items-center gap-x-4 border',
+                            'border-gray-100 border-solid rounded-md min-w-max px-2.5 py-3',
+                        )}
+                    >
+                        <span>My Account</span>
+                        <ArrowDown2
+                            size={14}
+                            className={cn(
+                                'text-colorDefault transition-all',
+                                isOpen ? 'rotate-180' : 'rotate-0',
+                            )}
+                        />
+                    </button>
+                ) : null}
+
+                <div
+                    className={cn(
+                        classes.menu,
+                        'hidden lg_block z-[1]',
+                        isTablet && isOpen ? 'absolute !block bg-white w-full top-14' : '',
+                    )}
+                >
+                    <div
+                        className={cn(
+                            'flex flex-col border border-gray-100 rounded-lg px-2.5 py-5 gap-y-2'
+                        )}
+                    >
+                        <li className="list-none">
+                            <Link
+                                to="/order-history"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/order-history' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.orderHistory'}
+                                    defaultMessage={'Order History'}
+                                />
+
+                            </Link>
+                        </li>
+                        <li className="list-none">
+                            <Link
+                                to="/quotes"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/quotes' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.Quotes'}
+                                    defaultMessage={'Quotes'}
+                                />
+
+                            </Link>
+                        </li>
+                        <li className="list-none">
+                            <Link
+                                to="/wishlist"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/wishlist' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.wishlist'}
+                                    defaultMessage={'Wishlist'}
+                                />
+
+                            </Link>
+                        </li>
+                        <li className="list-none">
+                            <Link
+                                to="/return"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/return' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.return'}
+                                    defaultMessage={'Return Request'}
+                                />
+
+                            </Link>
+                        </li>
+                        <li className="list-none">
+                            <Link
+                                to="/favorite-seller"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/favorite-seller' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.favoriteSeller'}
+                                    defaultMessage={'Favorite Seller'}
+                                />
+
+                            </Link>
+                        </li>
+                        <li className="list-none">
+                            <Link
+                                to="/address-book"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/address-book' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.addressBook'}
+                                    defaultMessage={'Address Book'}
+                                />
+
+                            </Link>
+                        </li>
+                        <li className="list-none">
+                            <Link
+                                to="/saved-payments"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/saved-payments' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.payments'}
+                                    defaultMessage={'Payments'}
+                                />
+
+                            </Link>
+                        </li>
+                        <li className="list-none">
+                            <Link
+                                to="/communications"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/communications' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.newsletter'}
+                                    defaultMessage={'Newsletter'}
+                                />
+
+                            </Link>
+                        </li>
+                        <li className="list-none">
+                            <Link
+                                to="/account-information"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/account-information' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.accountInformation'}
+                                    defaultMessage={'Account Information'}
+                                />
+
+                            </Link>
+                        </li>
+
+                    </div>
+                </div>
+                <div className={cn(classes.blockContent, 'block')}>
+                    {children}
+                </div>
+            </div >
+        </>
+    )
+}
+
+export default AccountLayout

package/src/components/AlphaFilter/alphaFilter.js

@@ -0,0 +1,103 @@
+import React, { Fragment, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
+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 './alphaFilter.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 AlphaFilter = props => {
+    const {items, handleActiveLetter, activeLetter, isSingles } = props;
+
+    const groupSinglesFirstLetter = (data) => {
+        return data.reduce((acc, item) => {
+            if (item) {
+                const { custom_attributes } = item;
+                if (custom_attributes) {
+                    let cardName = '';
+                    custom_attributes.some((attribute, index) => {
+                        const { attribute_metadata, entered_attribute_value, selected_attribute_options } = attribute
+                        if (attribute_metadata.code == "card_name") {
+                            cardName = selected_attribute_options.attribute_option[0].label;
+
+                            return true;
+                        }
+
+                        return false;
+                    });
+
+                    if (cardName) {
+                        const firstLetter = cardName.charAt(0).toUpperCase();
+                        acc[firstLetter] = acc[firstLetter] || [];
+                        acc[firstLetter].push(item);
+                    }
+                }
+            }
+
+            return acc;
+        }, {});
+    }
+
+    const groupedSingles = items ? groupSinglesFirstLetter(items) : null;
+    const availableLetter = groupedSingles ? Object.keys(groupedSingles).sort() : [];
+    
+    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'];
+
+    return isSingles && <>
+        <section className='single_list-indexing-container relative m-auto py-1'>
+            <ul className='flex gap-2 justify-center flex-wrap'>
+                {alpha.map((letter, index) => (
+                    <li key={index}>
+                        {activeLetter == letter ? <button
+                            className={cn(
+                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                'leading-4 font-medium text-base ',
+                                availableLetter.includes(letter) ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                            )}><b>{letter}</b></button> :
+                        <button
+                            className={cn(
+                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                'leading-4 font-medium text-base ',
+                                availableLetter.includes(letter) ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                            )}
+                            onClick={() => {
+                                handleActiveLetter(letter)
+                            }}
+                            disabled={availableLetter.includes(letter) > 0 ? false : true}
+                        >
+                            {letter}
+                        </button>}
+                    </li>
+                ))}
+                <li>
+                    {activeLetter == 'all' ? <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',
+                            )}><b>All</b></button> :
+                    <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={() => {
+                            handleActiveLetter('all')
+                        }}
+                    >
+                        All
+                    </button>}
+                </li>
+            </ul>
+        </section>
+    </>
+}
+
+export default AlphaFilter;

package/src/components/AlphaFilter/alphaFilter.module.css

@@ -0,0 +1,38 @@
+.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/AlphaFilter/alphaFilter.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-medium 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-medium 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-medium 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-medium 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-medium 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-medium 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/AlphaFilter/index.js

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

package/src/components/ArraySearchInput/arraySearchInput.js

@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import { bool, shape, string } from 'prop-types';
+import { Form } from 'informed';
+import { useIntl } from 'react-intl';
+import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Autocomplete from '@magento/venia-ui/lib/components/SearchBar/autocomplete';
+import defaultClasses from './arraySearchInput.module.css';
+import Dropdown from '@riosst100/pwa-marketplace/src/components/Dropdown';
+import cn from 'classnames';
+import SearchField from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar/searchField';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import { useArraySearchInput } from '@riosst100/pwa-marketplace/src/talons/ArraySearchInput/useArraySearchInput';
+
+const ArraySearchInput = React.forwardRef((props, ref) => {
+    const { isOpen, placeholder, setSearchQuery, active, setActive } = props;
+    const talonProps = useArraySearchInput({ active });
+    // const fieldState = useFieldState('search_query');
+    const {
+        containerRef,
+        // handleChange,
+        handleFocus,
+        // handleSubmit,
+        initialValues,
+        isAutoCompleteOpen,
+        setIsAutoCompleteOpen,
+        valid
+    } = talonProps;
+
+    const handleSubmit = useCallback(
+        ({ search_query }) => {
+            return false;
+        },
+        []
+    );
+
+    const handleChange = useCallback(
+        value => {
+            // const hasValue = !!value;
+            // const isValid = hasValue && value.length > 2;
+
+            setSearchQuery(value)
+
+            
+
+            // setValid(isValid);
+            // setIsAutoCompleteOpen(hasValue);
+        },
+        [setSearchQuery]
+    );
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = isOpen ? classes.root_open : classes.root;
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={rootClassName} data-cy="ArraySearchInput-root" ref={ref}>
+            <div ref={containerRef} className={classes.container}>
+                <Form
+                    autoComplete="off"
+                    className={classes.form}
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                >
+                    <div
+                        className={cn(
+                            classes.search,
+                            'flex flex-row relative border border-gray-100 rounded-full'
+                        )}
+                    >
+                        <SearchField
+                            addLabel={formatMessage({
+                                id: 'global.clearText',
+                                defaultMessage: 'Clear Text'
+                            })}
+                            isSearchOpen={isAutoCompleteOpen}
+                            onChange={handleChange}
+                            onFocus={handleFocus}
+                        />
+                    </div>
+                </Form>
+            </div>
+        </div>
+    );
+});
+
+export default ArraySearchInput;
+
+ArraySearchInput.propTypes = {
+    classes: shape({
+        autocomplete: string,
+        container: string,
+        form: string,
+        root: string,
+        root_open: string,
+        search: string
+    }),
+    isOpen: bool
+};

package/src/components/ArraySearchInput/arraySearchInput.module.css

@@ -0,0 +1,48 @@
+.root {
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: justify-self-center from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: hidden from global; */
+    display: none;
+}
+
+.root_open {
+    composes: root;
+
+    composes: z-dropdown from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: grid from global; */
+    display: grid;
+}
+
+.form {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-stretch from global;
+    composes: w-full from global;
+}
+
+.container {
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-full from global;
+    composes: relative from global;
+    composes: w-full from global;
+}
+
+.search {
+    composes: relative from global;
+    padding-left: 20px;
+}
+
+.autocomplete {
+    composes: grid from global;
+    /* composes: relative from global; */
+    composes: z-menu from global;
+}

package/src/components/ArraySearchInput/index.js

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