@riosst100/pwa-marketplace 1.4.8 → 1.5.0

package/package.json

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -4,11 +4,13 @@ import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSelle
 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';
 
 const CollectibleGameSets = props => {
     const talonProps = useCollectibleGameSets();
 
-    const { error, loading, collectibleGameSets } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType } = talonProps;
 
     if (loading && !collectibleGameSets)
         return '';
@@ -28,21 +30,60 @@ const CollectibleGameSets = props => {
         );
     }
 
-    const sets = collectibleGameSets.map((set, index) => {
-        const { card_set } = set;
+    const setsLengthArr = [];
+
+    const setRelases = collectibleGameSets.map((setRelease, index) => {
+        const { release_type, sets } = setRelease;
+
+        const setsResult = [];
+
+        setsLengthArr[release_type] = sets.length
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id, set_abbreviation } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
+                );
+
+                setsResult.push(
+                    <li>
+                        <Link to={categoryUrl}>{set_name} <small style={{"color":"grey"}}>{set_abbreviation}</small></Link>
+                    </li>
+                );
+            });
+        }
+
         return (
             <>
-                <div><b>{card_set}</b></div>
+                <div id={"#tab_list_"+release_type.toLowerCase()}>
+                    <div className='text-[16px] pb-2'><b>{release_type}</b></div>
+                    <hr />
+                    <ul className='pt-2'>{setsResult}</ul>
+                </div>
             </>
         );
     });
 
+    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 (
         <Fragment>
-            <StoreTitle>Magic: The Gathering | Sets & Expansions</StoreTitle>
-            <h3>Sets & Expansions</h3>
-            <div>{sets}</div>
+            <StoreTitle>{"Magic: The Gathering" + " | " + (productType == "sealed-products" ? "Sets & Expansions" : "Singles Sets")}</StoreTitle>
+            <div className='text-[20px] pb-4 pt-5'><b>{productType == "sealed-products" ? "Sets & Expansions" : "Singles Sets"}</b></div>
+            {productType != "sealed-products" ? (
+                <>
+                    <div className='flex flex-wrap mb-3'>
+                        {alpha.map((val, index) => 
+                            setsLengthArr[val] > 0 ? (
+                            <a className="py-2 px-3 font-bold mr-1 border" href={"#tab_list_"+val.toLowerCase()}>{val}</a>
+                            ) : (<span className="py-2 px-3 font-bold mr-1 border" style={{"color":"grey"}}>{val}</span>)
+                        )}
+                    </div>
+                </>
+            ) : ''}
+            <div className='flex flex-wrap gap-[30px]'>{setRelases}</div>
         </Fragment>
     );
 };

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

@@ -18,15 +18,8 @@ const CustomFilters = props => {
 
     const { customFiltersData, categoryUrlSuffix, search, pathname } = talonProps;
 
-    // console.log(category.url_path)
-    // console.log(categoryUrlSuffix)
-
     const params = search ? JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') : {};
 
-    
-
-    // console.log(params)
-
     // create elements and params at the same time for efficiency
     const filterElements = useMemo(() => {
         const elements = [];
@@ -56,11 +49,6 @@ const CustomFilters = props => {
                     }
 
                     const finalParams = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
-
-                    // console.log(params)
-
-                    // console.log(finalParams);
-
                     const path = pathname + finalParams;
 
                     items.push(

package/src/intercept.js

@@ -99,7 +99,7 @@ module.exports = targets => {
     {
       exact: true,
       name: "CollectibleGameSetsPage",
-      pattern: "/games/collectible-game/:urlKey/sets",
+      pattern: "/games/collectible-game/:urlKey/:productType",
       path: require.resolve("./components/CollectibleGameSetsPage/index.js"),
       authed: false,
     },

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

@@ -186,7 +186,7 @@ const CategoryContent = props => {
                     </h1>
                     {categoryDescriptionElement}
                 </div>
-                <SubCategory filters={filters} children={children} />
+                {/* <SubCategory filters={filters} children={children} /> */}
                 <FilterTop filters={filters} category={category} />
                 {/* <AttributesBlock category={category} attributesBlock={attributesBlock} /> */}
                 {/* <section className='category_brand-slider my-5'>

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

@@ -6,17 +6,22 @@ export const GET_STORE_CONFIG_DATA = gql`
         storeConfig {
             store_code
             product_url_suffix
+            category_url_suffix
         }
     }
 `;
 
 export const GET_COLLECTIBLE_GAME_QUERY = gql`
-    query getCollectibleGameSets($categoryUrlKey: String!) {
-        collectibleGameSets(categoryUrlKey: $categoryUrlKey) {
-            card_set
-            card_game
-            card_set_abbreviation
-            card_release_year
+    query getCollectibleGameSets($categoryUrlKey: String!, $productType: String) {
+        collectibleGameSets(categoryUrlKey: $categoryUrlKey, productType: $productType) {
+            release_type
+            sets {
+                set_name
+                option_id
+                set_abbreviation
+                release_date
+                release_number
+            }
         }
     }
 `;

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -23,16 +23,20 @@ export const useCollectibleGameSets = props => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const slug = pathname.split('/').pop();
-    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
-    const categoryUrlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+    const pathnameArr = pathname.split('/');
+
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 2];
+    const productType = pathnameArr[pathnameArr.length - 1];
+    
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
 
     const { error, loading, data } = useQuery(getCollectibleGameQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !storeConfigData,
         variables: {
-            categoryUrlKey
+            categoryUrlKey: categoryUrlKey,
+            productType: productType
         }
     });
 
@@ -60,6 +64,9 @@ export const useCollectibleGameSets = props => {
     return {
         error,
         loading,
-        collectibleGameSets
+        collectibleGameSets,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType
     };
 };