@riosst100/pwa-marketplace 1.8.8 → 1.9.0

package/src/components/ShopByVehicles/index.js

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

package/src/components/ShopByVehicles/shopByVehicles.js

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

package/src/components/ShopByVehicles/shopByVehicles.module.css

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

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

package/src/components/SocialLogin/img/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="24" viewBox="0 0 13 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.35849 23.9999V13.0523H12.0332L12.5833 8.78588H8.35849V6.06189C8.35849 4.82668 8.70154 3.98482 10.473 3.98482L12.7322 3.98377V0.167932C12.3413 0.116127 11.0003 0 9.44014 0C6.18279 0 3.95274 1.98818 3.95274 5.63957V8.786H0.268555V13.0524H3.95263V24L8.35849 23.9999Z" fill="#3C5A9A"/>
+</svg>

package/src/components/SocialLogin/img/google.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7602 12.2667C23.7602 11.28 23.6802 10.56 23.5069 9.81334H12.2402V14.2666H18.8535C18.7202 15.3733 18.0002 17.04 16.4002 18.1599L16.3778 18.309L19.9401 21.0687L20.1869 21.0933C22.4535 19 23.7602 15.92 23.7602 12.2667Z" fill="#4285F4"/>
+<path d="M12.2402 24C15.4802 24 18.2002 22.9333 20.1869 21.0933L16.4002 18.1599C15.3869 18.8666 14.0269 19.3599 12.2402 19.3599C9.06692 19.3599 6.37361 17.2667 5.41352 14.3733L5.27279 14.3853L1.56864 17.252L1.5202 17.3866C3.49352 21.3066 7.54686 24 12.2402 24Z" fill="#34A853"/>
+<path d="M5.41352 14.3733C5.16019 13.6267 5.01358 12.8266 5.01358 12C5.01358 11.1733 5.16019 10.3733 5.40019 9.62666L5.39348 9.46764L1.64292 6.55491L1.5202 6.61328C0.706906 8.23997 0.240234 10.0667 0.240234 12C0.240234 13.9333 0.706906 15.7599 1.5202 17.3866L5.41352 14.3733Z" fill="#FBBC05"/>
+<path d="M12.2402 4.63997C14.4935 4.63997 16.0135 5.6133 16.8802 6.42669L20.2669 3.12C18.1869 1.18667 15.4802 0 12.2402 0C7.54686 0 3.49352 2.69331 1.5202 6.61328L5.40019 9.62666C6.37361 6.73333 9.06692 4.63997 12.2402 4.63997Z" fill="#EB4335"/>
+</svg>

package/src/components/SocialLogin/img/instagram.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_310_25353)">
+<path d="M16.5 0H7.5C5.51088 0 3.60322 0.790176 2.1967 2.1967C0.790176 3.60322 0 5.51088 0 7.5L0 16.5C0 18.4891 0.790176 20.3968 2.1967 21.8033C3.60322 23.2098 5.51088 24 7.5 24H16.5C18.4891 24 20.3968 23.2098 21.8033 21.8033C23.2098 20.3968 24 18.4891 24 16.5V7.5C24 5.51088 23.2098 3.60322 21.8033 2.1967C20.3968 0.790176 18.4891 0 16.5 0ZM21.75 16.5C21.75 19.395 19.395 21.75 16.5 21.75H7.5C4.605 21.75 2.25 19.395 2.25 16.5V7.5C2.25 4.605 4.605 2.25 7.5 2.25H16.5C19.395 2.25 21.75 4.605 21.75 7.5V16.5Z" fill="url(#paint0_linear_310_25353)"/>
+<path d="M12 6C10.4087 6 8.88258 6.63214 7.75736 7.75736C6.63214 8.88258 6 10.4087 6 12C6 13.5913 6.63214 15.1174 7.75736 16.2426C8.88258 17.3679 10.4087 18 12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6ZM12 15.75C11.0058 15.7488 10.0527 15.3533 9.34966 14.6503C8.64666 13.9473 8.25119 12.9942 8.25 12C8.25 9.9315 9.933 8.25 12 8.25C14.067 8.25 15.75 9.9315 15.75 12C15.75 14.067 14.067 15.75 12 15.75Z" fill="url(#paint1_linear_310_25353)"/>
+<path d="M18.4499 6.34998C18.8914 6.34998 19.2494 5.99203 19.2494 5.55048C19.2494 5.10892 18.8914 4.75098 18.4499 4.75098C18.0083 4.75098 17.6504 5.10892 17.6504 5.55048C17.6504 5.99203 18.0083 6.34998 18.4499 6.34998Z" fill="url(#paint2_linear_310_25353)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_310_25353" x1="2.196" y1="21.804" x2="21.804" y2="2.196" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC107"/>
+<stop offset="0.507" stop-color="#F44336"/>
+<stop offset="0.99" stop-color="#9C27B0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_310_25353" x1="7.758" y1="16.242" x2="16.242" y2="7.758" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC107"/>
+<stop offset="0.507" stop-color="#F44336"/>
+<stop offset="0.99" stop-color="#9C27B0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_310_25353" x1="17.8844" y1="6.11598" x2="19.0154" y2="4.98498" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC107"/>
+<stop offset="0.507" stop-color="#F44336"/>
+<stop offset="0.99" stop-color="#9C27B0"/>
+</linearGradient>
+<clipPath id="clip0_310_25353">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/SocialLogin/img/wechat.svg

@@ -0,0 +1,15 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_310_25358)">
+<path d="M24.5 15C24.5 11.6865 21.1415 9 17 9C12.8585 9 9.5 11.6865 9.5 15C9.5 18.3135 12.8585 21 17 21C17.681 21 18.329 20.904 18.9575 20.7675L23 22.5L21.602 19.7055C23.354 18.6075 24.5 16.9185 24.5 15Z" fill="#8BC34A"/>
+<path d="M9.5 1.5C4.529 1.5 0.5 4.8585 0.5 9C0.5 11.388 1.847 13.506 3.9365 14.877L2.75 17.25L5.9825 15.8655C6.6755 16.1115 7.3955 16.314 8.165 16.4085C8.057 15.9467 8.00165 15.4742 8 15C8 10.8645 12.0365 7.5 17 7.5C17.4545 7.5 17.8985 7.5375 18.3365 7.5915C17.5445 4.1235 13.892 1.5 9.5 1.5Z" fill="#8BC34A"/>
+<path d="M6.5 7.125C7.12132 7.125 7.625 6.62132 7.625 6C7.625 5.37868 7.12132 4.875 6.5 4.875C5.87868 4.875 5.375 5.37868 5.375 6C5.375 6.62132 5.87868 7.125 6.5 7.125Z" fill="#FAFAFA"/>
+<path d="M12.5 7.125C13.1213 7.125 13.625 6.62132 13.625 6C13.625 5.37868 13.1213 4.875 12.5 4.875C11.8787 4.875 11.375 5.37868 11.375 6C11.375 6.62132 11.8787 7.125 12.5 7.125Z" fill="#FAFAFA"/>
+<path d="M14.75 14.625C15.3713 14.625 15.875 14.1213 15.875 13.5C15.875 12.8787 15.3713 12.375 14.75 12.375C14.1287 12.375 13.625 12.8787 13.625 13.5C13.625 14.1213 14.1287 14.625 14.75 14.625Z" fill="#FAFAFA"/>
+<path d="M19.25 14.625C19.8713 14.625 20.375 14.1213 20.375 13.5C20.375 12.8787 19.8713 12.375 19.25 12.375C18.6287 12.375 18.125 12.8787 18.125 13.5C18.125 14.1213 18.6287 14.625 19.25 14.625Z" fill="#FAFAFA"/>
+</g>
+<defs>
+<clipPath id="clip0_310_25358">
+<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/SocialLogin/img/weibo.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="24" viewBox="0 0 30 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5224 11.5056C22.1038 11.3785 21.8165 11.2963 22.0341 10.7465C23.6374 6.47504 19.614 5.94561 15.4072 7.74702C15.4072 7.74702 14.4551 8.16146 14.7013 7.41063C15.1651 5.9128 15.0954 4.66152 14.3732 3.93522C12.732 2.2899 8.3618 3.9967 4.6153 7.7432C1.81267 10.5455 0.183594 13.5202 0.183594 16.0931C0.183594 21.009 6.49062 24.0002 12.6578 24.0002C20.7455 24.0002 26.1253 19.3019 26.1253 15.572C26.1294 13.315 24.2295 12.0347 22.5224 11.5056Z" fill="#E6162D"/>
+<path d="M12.6788 22.2356C7.75458 22.7239 3.50349 20.496 3.18366 17.2665C2.84663 9.47054 19.8201 7.79591 21.0086 15.502C21.3329 18.7356 17.5988 21.7514 12.6788 22.2356Z" fill="#F1F1F1"/>
+<path d="M27.7877 2.59835C25.8343 0.431877 22.954 -0.392857 20.295 0.173212C19.6796 0.304455 19.2897 0.911936 19.4209 1.52324C19.5522 2.13868 20.1555 2.52859 20.7709 2.39735C24.9433 1.47577 28.6089 5.54337 27.2666 9.59473C26.8403 11.0311 28.9358 11.7099 29.433 10.2965C30.2683 7.71336 29.7433 4.7626 27.7877 2.59835Z" fill="#FF9933"/>
+<path d="M24.3692 9.67119C24.8862 9.83525 25.436 9.5562 25.6042 9.03919C26.5408 6.29039 23.9847 3.45559 21.156 4.11118C20.6265 4.22203 20.2901 4.74732 20.401 5.27644C20.516 5.80588 21.0372 6.14227 21.5621 6.02727C22.1941 5.89188 22.8835 6.08875 23.347 6.60162C23.8108 7.11863 23.9379 7.8204 23.7369 8.43585C23.5731 8.94904 23.8522 9.503 24.3692 9.67119Z" fill="#FF9933"/>
+<path d="M13.1668 13.0196C10.8238 12.4083 8.17699 13.5777 7.15953 15.6416C6.12137 17.7466 7.12672 20.0854 9.49038 20.8487C11.9442 21.6406 14.8331 20.426 15.8382 18.1569C16.8311 15.9331 15.5919 13.6475 13.1668 13.0196ZM11.3778 18.3952C10.3428 20.0552 7.50771 19.1811 8.60799 17.1681C9.6366 15.5362 12.4424 16.3826 11.3778 18.3952ZM12.9492 16.3845C12.5947 17.0276 11.4813 16.7263 11.8824 15.9576C12.2385 15.3256 13.327 15.6136 12.9492 16.3845Z" fill="black"/>
+</svg>

package/src/components/SocialLogin/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Content from './socialLogin';
+
+const index = (props) => {
+    return (
+        <Content {...props} />
+    )
+}
+
+export default index

package/src/components/SocialLogin/socialLogin.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Image from '@magento/venia-ui/lib/components/Image';
+import GoogleIcon from './img/google.svg';
+import FacebookIcon from './img/facebook.svg';
+import InstagramIcon from './img/instagram.svg';
+import WechatIcon from './img/wechat.svg';
+import WeiboIcon from './img/weibo.svg';
+
+const socialLogin = () => {
+    return (
+        <div className='relative flex w-full justify-between items-center'>
+            <Button
+                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
+            >
+                <Image
+                    alt='google'
+                    className="relative"
+                    src={GoogleIcon}
+                />
+            </Button>
+            <Button
+                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
+            >
+                <Image
+                    alt='facebook'
+                    className="relative"
+                    src={FacebookIcon}
+                />
+            </Button>
+            <Button
+                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
+            >
+                <Image
+                    alt='instagram'
+                    className="relative"
+                    src={InstagramIcon}
+                />
+            </Button>
+            <Button
+                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
+            >
+                <Image
+                    alt='wechat'
+                    className="relative"
+                    src={WechatIcon}
+                />
+            </Button>
+            <Button
+                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
+            >
+                <Image
+                    alt='weibo'
+                    className="relative"
+                    src={WeiboIcon}
+                />
+            </Button>
+
+            <style global jsx>
+                {`
+                    img[loading="eager"] {
+                        display: contents;
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
+
+export default socialLogin

package/src/components/SportCardsSets/sportCardsSets.js

@@ -206,6 +206,11 @@ const SportCardsSets = props => {
         setSearchQuery('')
     }
 
+    const handleSearchQuery = (val) => {
+        setSearchQuery(val)
+        setActive('all')
+    }
+
     let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
     
     let brandName = brandsFilter ? brandsFilter.split(',')[0] : '';
@@ -303,7 +308,7 @@ const SportCardsSets = props => {
                     <div
                         className={classes.toolbar}
                     >
-                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
                         {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
                     </div>
                 ) : ''}

package/src/components/TrainsSets/index.js

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