@riosst100/pwa-marketplace 1.6.4 → 1.6.6

package/package.json

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -18,11 +18,31 @@ const CollectibleGameSets = props => {
 
     const [searchQuery, setSearchQuery] = useState('');
 
-    
-    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const shopby = query.get('shopby') || null;
+
+    let defaultSort = {
         sortText: 'All (A-Z)',
         value: 'all'
-    }});
+    };
+    
+    if (shopby == "release_year") {
+        defaultSort = {
+            sortText: 'All (By Year)',
+            value: 'date'
+        };
+    }
+
+    // if (productType == "expansion-sets") {
+    //     defaultSort = {
+    //         sortText: 'All (Expansion Sets)',
+    //         value: 'all'
+    //     };
+    // }
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
 
     const [currentSort] = sortProps;
 
@@ -37,7 +57,9 @@ const CollectibleGameSets = props => {
 
     const talonProps = useCollectibleGameSets({ searchQuery, setActive, currentSort });
 
-    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets, availableGroups } = talonProps;
+
+    console.log(availableGroups)
 
     if (loading && !collectibleGameSets)
         return <CollectibleGameSetsShimmer />;
@@ -104,9 +126,9 @@ const CollectibleGameSets = props => {
         setSearchQuery('')
     }
 
-    const alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
+    let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
 
-    const availableSortBy = [
+    let availableSortBy = [
         {
             'label': 'All (A-Z)',
             'value': 'all'
@@ -114,18 +136,46 @@ const CollectibleGameSets = props => {
         {
             'label': 'Latest Sets',
             'value': 'newest'
-        },
-        {
-            'label': 'By Date',
-            'value': 'date'
         }
     ];
 
+    if (shopby == "release_year") {
+        availableSortBy = [
+            {
+                'label': 'All (By Year)',
+                'value': 'date'
+            },
+            {
+                'label': 'Latest Sets',
+                'value': 'newest'
+            }
+        ];
+
+        alpha = availableGroups;
+    }
+
+    if (productType == "expansion-sets") {
+        // availableSortBy = [
+        //     {
+        //         'label': 'All (Expansion Sets)',
+        //         'value': 'all'
+        //     },
+        //     {
+        //         'label': 'Latest Sets',
+        //         'value': 'newest'
+        //     }
+        // ];
+
+        alpha = availableGroups
+    }
+
     let title = "All Sets";
     if (productType == "expansion-sets") {
         title = "Expansion Sets";
     } else if (productType == "artist") {
-        title = "Artist";
+        title = "By Artist";
+    } else if (shopby == "release_year") {
+        title = "By Year";
     }
 
     return (
@@ -143,44 +193,42 @@ const CollectibleGameSets = props => {
                         <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
                     </div>
                 ) : ''}
-                {productType != "expansion-sets" ? (
-                    <>
-                        <section className='single_list-indexing-container relative m-auto py-10'>
-                            <ul className='flex gap-2 justify-center flex-wrap'>
-                                <li>
+                <>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <ul className='flex gap-2 justify-center flex-wrap'>
+                            <li>
+                                <button
+                                    className={cn(
+                                        'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                        'leading-4 font-medium text-base hover_bg-gray-50'
+                                    )}
+                                    onClick={() => {
+                                        handleActive('all')
+                                    }}
+                                >
+                                    {active == 'all' ? <b>All</b> : 'All'}
+                                </button>
+                            </li>
+                            {alpha.map((letter, index) => (
+                                <li key={index}>
                                     <button
                                         className={cn(
                                             'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
-                                            'leading-4 font-medium text-base hover_bg-gray-50'
+                                            'leading-4 font-medium text-base ',
+                                            setsLengthArr[letter] > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
                                         )}
                                         onClick={() => {
-                                            handleActive('all')
+                                            handleActive(letter)
                                         }}
+                                        disabled={setsLengthArr[letter] > 0 ? false : true}
                                     >
-                                        {active == 'all' ? <b>All</b> : 'All'}
+                                        {active == letter ? <b>{letter}</b> : letter}
                                     </button>
                                 </li>
-                                {alpha.map((letter, index) => (
-                                    <li key={index}>
-                                        <button
-                                            className={cn(
-                                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
-                                                'leading-4 font-medium text-base ',
-                                                setsLengthArr[letter] > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
-                                            )}
-                                            onClick={() => {
-                                                handleActive(letter)
-                                            }}
-                                            disabled={setsLengthArr[letter] > 0 ? false : true}
-                                        >
-                                            {active == letter ? <b>{letter}</b> : letter}
-                                        </button>
-                                    </li>
-                                ))}
-                            </ul>
-                        </section>
-                    </>
-                ) : ''}
+                            ))}
+                        </ul>
+                    </section>
+                </>
                 <Divider className="mb-5 px-4 mt-5" />
                 <section className='singles-container'>
                     <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>

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

@@ -15,7 +15,7 @@ const CollectibleGameSets = props => {
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
             <div className='border border-gray-100 px-6'>
                 <center>
-                    <section className='single_list-indexing-container relative m-auto py-10'>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
                         <Shimmer width="95%" height="6vh" />
                     </section>
                 </center>

package/src/components/CustomSubCategoryPage/subCategoryPage.js

@@ -83,7 +83,7 @@ const SubCategoryPage = props => {
                     </div>
                 ) : ''}
                 <>
-                    <section className='single_list-indexing-container relative m-auto py-10'>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
                         <ul className='flex gap-2 justify-center flex-wrap'>
                             <li>
                                 <button

package/src/components/ProductListTab/productListTab.js

@@ -6,32 +6,45 @@ import defaultClasses from './productListTab.module.css';
 
 const ProductListTab = props => {
 
-    const classes = useStyle(defaultClasses, props.classes);
+    const { activeTab, setActiveTab } = props
 
-    const [activeTab, setActiveTab] = useState(null);
+    const classes = useStyle(defaultClasses, props.classes);
 
     let allProductClass = classes.firstButton;
     if (!activeTab) {
         allProductClass = classes.activeFirstButton;
     }
 
+    const productTabs = [
+        {
+            'label': 'All Products',
+            'value': 'all'
+        },
+        {
+            'label': 'Sale',
+            'value': 'sale'
+        },
+        {
+            'label': 'Pre Order',
+            'value': 'preorder'
+        },
+        {
+            'label': 'Auction',
+            'value': 'auction'
+        }
+    ];
+
     return (
         <div className={classes.root} aria-busy="true">
-            {/* <FormattedMessage
-                id={'searchPage.sortContainer'}
-                defaultMessage={'Items sorted by '}
-            />
-            <span className={classes.sortText}>
-                <FormattedMessage
-                    id={currentSort.sortId}
-                    defaultMessage={currentSort.sortText}
-                />
-            </span> */}
             <nav>
                 <ul className={classes.buttonContainer}>
-                    <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>
+                    {productTabs.map(({label, value}, index) => 
+                        <li key={index}>
+                            <button onClick={() => setActiveTab(value)} className={
+                                (index == 0 ? classes.firstButton : (index == productTabs.length-1 ? classes.lastButton : classes.middleButton)) + (activeTab == value ? ' ' + classes.activeButton : '')
+                            }>{label}</button>
+                        </li>
+                    )}
                 </ul>
             </nav>
         </div>

package/src/components/ProductListTab/productListTab.module.css

@@ -24,7 +24,6 @@
 }
 
 .activeButton {
-    composes: button;
     color: white;
     background-color: #4E31DB;
 }

package/src/components/ShopBy/shopBy.js

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

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

@@ -15,7 +15,7 @@ const ShopBy = props => {
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
             <div className='border border-gray-100 px-6'>
                 <center>
-                    <section className='single_list-indexing-container relative m-auto py-10'>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
                         <Shimmer width="95%" height="6vh" />
                     </section>
                 </center>

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

@@ -75,6 +75,7 @@ const CategoryContent = props => {
     } = talonProps;
 
     const [activeLetter, setActiveLetter] = useState('all')
+    const [activeTab, setActiveTab] = useState('all');
 
     const handleActiveLetter = (val) => {
         setActiveLetter(val);
@@ -164,7 +165,7 @@ const CategoryContent = props => {
     ) : null;
 
     const maybeProductsTabContainer = shouldShowProductListTab ? (
-        <ProductListTab />
+        <ProductListTab activeTab={activeTab} setActiveTab={setActiveTab} />
     ) : shouldShowProductListTabShimmer ? (
         <ProductListTabShimmer />
     ) : null;

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -76,7 +76,7 @@ export const useCollectibleGameSets = props => {
                             if (result) {
                                 result.sets.push(set)
                             } else {
-                                if (sortby == "date" || sortby == "newest" && sortbyData.length <= 5) {
+                                if (sortby == "date" || sortby == "newest" && sortbyData.length < 2) {
                                     sortbyData.push({
                                         'release_type': release_year,
                                         'sets': [set]
@@ -92,6 +92,8 @@ export const useCollectibleGameSets = props => {
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : collectibleGameSets.slice().sort((a, b) => a.release_type.toLowerCase().localeCompare(b.release_type.toLowerCase()));
     }, [data, sortby]);
 
+    const availableGroups = collectibleGameSets.map(({ release_type }) => release_type);
+
     // console.log(collectibleGameSets)
 
     const filteredCollectibleGameSets = useMemo(() => {
@@ -115,7 +117,7 @@ export const useCollectibleGameSets = props => {
 
                 if (newSets && newSets.length) {
                     filteredSets.push({
-                        'release_type': sortby == "date" ? set.release_year : release_type,
+                        'release_type': release_type,
                         'sets': newSets
                     })
                 }
@@ -138,6 +140,7 @@ export const useCollectibleGameSets = props => {
         filteredCollectibleGameSets,
         categoryUrlSuffix,
         categoryUrlKey,
-        productType
+        productType,
+        availableGroups
     };
 };