@riosst100/pwa-marketplace 1.8.7 → 1.8.9

package/package.json

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

package/src/components/CustomSubCategoryPage/subCategoryPage.js

@@ -69,12 +69,14 @@ const SubCategoryPage = props => {
         setSearchQuery('')
     }
 
+    const title = category ? 'All ' + category.parent[0].name : '';
+
     return (
         <Fragment>
-            <StoreTitle>{category ? category.name : 'Shop By'}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={category ? 'All ' + category.parent[0].name : ''} />
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={title} />
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                {category ? 'All ' + category.parent[0].name : ''}
+                {title}
             </h1>
             <div className='border border-gray-100 px-6'>
                 {dataResult ? (

package/src/components/FilterTopBackup/CustomFilters/customFilters.js

@@ -54,6 +54,8 @@ const CustomFilters = props => {
     //     removeItem({ group, item });
     // }, [group, item, removeItem]);
 
+    // console.log(customFiltersData)
+
     // create elements and params at the same time for efficiency
     const filterElements = useMemo(() => {
         const elements = [];

package/src/components/LegoSets/legoSets.js

@@ -23,7 +23,7 @@ const LegoSets = props => {
 
     const [active, setActive] = useState('all');
     const [activeTab, setActiveTab] = useState('all');
-
+    const [activeFilter, setActiveFilter] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
     
     const shopby = query.get('shopby') || null;
@@ -69,7 +69,7 @@ const LegoSets = props => {
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useLegoSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+    const talonProps = useLegoSets({ activeFilter, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
 
     const { error, loading, legoSets, categoryUrlSuffix, categoryUrlKey, productType, filteredLegoSets, availableGroups, category } = talonProps;
 
@@ -106,11 +106,11 @@ const LegoSets = props => {
     let allSetsTitle = "Sets";
     let attributeCode = "lego_set_name";
     let byYearTitle = "By Year";
-    if (shopby == "singles") {
-        attributeCode = "lego_set_name";
-        allSetsTitle = "Singles";
-        byYearTitle = "By Year";
-    }
+    // if (shopby == "singles") {
+    //     attributeCode = "lego_set_name";
+    //     // allSetsTitle = "Singles";
+    //     byYearTitle = "By Year";
+    // }
 
     const setRelases = newLegoSets && newLegoSets.length && newLegoSets.map((setRelease, index) => {
         const { group, sets } = setRelease;
@@ -127,7 +127,8 @@ const LegoSets = props => {
 
                 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}
+                        <b>{set_name}</b>
+                        <div style={{"fontSize": "12px"}}>589 Parts, 2 Minifigures</div>
                     </Link>
                 </li>)
             })
@@ -167,7 +168,8 @@ const LegoSets = props => {
 
     const handleActiveTab = (val) => {
         setActiveTab(val);
-        setActive('all')
+        setActive('all');
+        setActiveFilter('');
 
         setSearchQuery('')
     }
@@ -182,19 +184,26 @@ const LegoSets = props => {
     if (activeTab == "year") {
         title = "Sets | By Year";
     }
+    
+    const availableFilters = [
+        'Theme',
+        'Sub-Theme',
+        'Interest',
+        'Age Level'
+    ];
 
-    if (shopby == "singles") {
-        title = "Singles";
-        if (activeTab == "year") {
-            title = "Singles | By Year";
-        }
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        setActive('all');
+
+        setSearchQuery('')
     }
-    
 
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={title} />
+            <Breadcrumbs categoryId={categoryId} customPage={shopby == "singles" ? "Mini-Figures" : title} />
             <ul className={classes.nav}>
                 <li className={classes.nav_item}>
                     <button
@@ -215,10 +224,32 @@ const LegoSets = props => {
                     </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" && <ul className={classes.nav}>
+            {activeTab == "year" && availableGroups ? <ul className={classes.nav}>
                 {availableGroups.map((group, index) => (
                 <li key={index} className={classes.nav_item}>
                     <button
@@ -239,7 +270,7 @@ const LegoSets = props => {
                     {active == 'all' ? <b>All</b> : 'All'}
                 </button>
             </li>
-            </ul>}
+            </ul> : ''}
             <div className='border border-gray-100 px-6'>
                 {legoSets ? (
                     <div
@@ -250,7 +281,7 @@ const LegoSets = props => {
                     </div>
                 ) : ''}
                 <section className='single_list-indexing-container relative m-auto pt-5'>
-                    {activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
+                    {!activeFilter && activeTab != "year" && <ul className='flex gap-2 justify-center flex-wrap'>
                         <li>
                             <button
                                 className={cn(

package/src/components/NonSportCardsSets/index.js

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

package/src/components/NonSportCardsSets/nonSportCardsSets.js

@@ -0,0 +1,270 @@
+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 { useNonSportCardsSets } from '@riosst100/pwa-marketplace/src/talons/NonSportCardsSets/useNonSportCardsSets';
+import { Link, useLocation } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './nonSportCardsSets.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { NonSportCardsSetsShimmer } from '@riosst100/pwa-marketplace/src/components/NonSportCardsSets';
+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 NonSportCardsSets = props => {
+    const { categoryId } = props
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const activeParam = query.get('active_tab') || null;
+
+    const [active, setActive] = useState('all');
+    const [activeTab, setActiveTab] = useState(activeParam ? activeParam : 'leagues');
+    const [activeBrand, setActiveBrand] = useState('all');
+
+    const [searchQuery, setSearchQuery] = useState('');
+
+    let availableLeagues = [];
+    let availableBrands = [];
+    
+    const shopby = query.get('shopby') || null;
+    let setType = query.get('nsc_set_type[filter]') || null;
+    const brandsFilter = query.get('sc_brands[filter]') || null;
+
+    if (setType && setType.includes("Inserts")) {
+        setType = "Inserts";
+    }
+
+    let defaultSort = {
+        sortText: 'All (A-Z)',
+        value: 'all'
+    };
+    
+    if (shopby == "release_year") {
+        defaultSort = {
+            sortText: 'All (By Year)',
+            value: 'date'
+        };
+    }
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
+
+    const [currentSort] = sortProps;
+
+    const [sortBy, setSortBy] = useState({
+        sortText: 'All (A-Z)',
+        value: 'all'
+    });
+
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useNonSportCardsSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+
+    const { error, loading, nonSportCardsSets, categoryUrlSuffix, categoryUrlKey, productType, filteredNonSportCardsSets, availableGroups, category } = talonProps;
+
+    console.log(filteredNonSportCardsSets)
+
+    if (loading && !nonSportCardsSets)
+        return <NonSportCardsSetsShimmer />;
+    if (error && !nonSportCardsSets) return <ErrorView />;
+
+    if (!nonSportCardsSets && !loading && !error) {
+        return <NonSportCardsSetsShimmer />;
+    }
+
+    const setsLengthArr = [];
+
+    const newNonSportCardsSets = searchQuery ? filteredNonSportCardsSets : nonSportCardsSets;
+
+    // useEffect(() => {
+        if (newNonSportCardsSets && newNonSportCardsSets.length) {
+            newNonSportCardsSets.map((setRelease, index) => {
+                const { group, sets } = setRelease;
+
+                setsLengthArr[group] = sets.length
+            })
+        }
+    // }, [nonSportCardsSets])
+
+    if (nonSportCardsSets && nonSportCardsSets.length) {
+        nonSportCardsSets.map((setRelease, index) => {
+            const { group, sets } = setRelease;
+            // if (active == 'all' || active != "all" && active == group) {
+                if (sets.length) {
+                    sets.map((set, index) => {
+                        if (set.sc_league) {
+                            if (!availableLeagues.includes(set.sc_league)) {
+                                availableLeagues.push(set.sc_league)
+                            }
+                        }
+                    })
+                }
+            // }
+        })
+    }
+
+    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 shopbyUrl = "release";
+
+    const { search } = useLocation();
+
+    let filterSearchArr = search ? search.split('&') : [];
+    filterSearchArr = filterSearchArr.filter(function(data) {
+        return !data.includes('shopby');
+    })
+    let filterSearch = filterSearchArr.join('&')
+
+    if (!filterSearch.includes('?')) {
+        filterSearch = '?'+filterSearch;
+    }
+
+    let additionalFilter = '';
+
+    const setRelases = newNonSportCardsSets && newNonSportCardsSets.length && newNonSportCardsSets.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 || ''}?sc_${category?.url_key}_${shopbyUrl}[filter]=${set_name},${option_id}`
+                // );
+                const filter = 'nsc_' + category?.url_key + '_' + shopbyUrl + '[filter]=' + set_name + ',' + option_id;
+                const params = filterSearch ? filterSearch + '&' + filter + additionalFilter : '?' + filter + additionalFilter;
+
+                const categoryUrl = resourceUrl(
+                    `/${category.url_path}${categoryUrlSuffix || ''}${params}`
+                );
+
+                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 || newNonSportCardsSets.length == 1) {
+            setsResultSplitted = splitToNChunks(setsResult, 3);
+        }
+        
+        return (
+            <>
+                {active == "all" && newNonSportCardsSets.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 || newNonSportCardsSets.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);
+        setSearchQuery('')
+    }
+
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        setActive('all');
+
+        setSearchQuery('')
+    }
+
+    const handleSearchQuery = (val) => {
+        setSearchQuery(val)
+        setActive('all')
+    }
+
+    let brandName = brandsFilter ? brandsFilter.split(',')[0] : '';
+
+    let title = "By Release/Set";
+
+    if (setType && setType == "Inserts") {
+        title = "Insert Sets";
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={title} />
+            {shopby != "release_year" && productType != "expansion_sets" && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {title}
+            </h1>}
+            <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'>
+                {nonSportCardsSets ? (
+                    <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>
+                ) : ''}
+                <Divider className="mb-5 px-4 mt-5" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {newNonSportCardsSets && newNonSportCardsSets.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>
+    );
+    return '';
+}
+
+export default NonSportCardsSets;

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

package/src/components/ShopBy/shopBy.js

@@ -214,6 +214,13 @@ const ShopBy = props => {
         setSearchQuery('')
     }
 
+    // let availableSortBy = [
+    //     {
+    //         'label': 'All (A-Z)',
+    //         'value': 'all'
+    //     }
+    // ];
+
     let availableSortBy = [
         {
             'label': 'All (A-Z)',
@@ -239,7 +246,7 @@ const ShopBy = props => {
                         <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
                     </div>
                 ) : ''}
-                {shopby != "lego_age_level" && productType != "expansion-sets" ? (
+                {shopby != "trains_gauge" && shopby != "vehicles_scale" && shopby != "lego_theme" && shopby != "lego_subtheme" && shopby != "lego_interest" && shopby != "lego_age_level" && productType != "expansion-sets" ? (
                     <>
                         <section className='single_list-indexing-container relative m-auto pt-5'>
                             <ul className='flex gap-2 justify-center flex-wrap'>

package/src/components/ShopByVehicles/index.js

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