@riosst100/pwa-marketplace 1.4.8 → 1.4.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "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 } = talonProps;
 
     if (loading && !collectibleGameSets)
         return '';
@@ -28,11 +30,34 @@ const CollectibleGameSets = props => {
         );
     }
 
-    const sets = collectibleGameSets.map((set, index) => {
-        const { card_set } = set;
+    const setRelases = collectibleGameSets.map((setRelease, index) => {
+        const { release_type, sets } = setRelease;
+
+        const setsResult = [];
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
+                );
+
+                setsResult.push(
+                    <li>
+                        <Link to={categoryUrl}>{set_name}</Link>
+                    </li>
+                );
+            });
+        }
+
         return (
             <>
-                <div><b>{card_set}</b></div>
+                <div>
+                    <div className='text-[16px] pb-2'><b>{release_type}</b></div>
+                    <hr />
+                    <ul className='pt-2'>{setsResult}</ul>
+                </div>
             </>
         );
     });
@@ -41,8 +66,8 @@ const CollectibleGameSets = props => {
     return (
         <Fragment>
             <StoreTitle>Magic: The Gathering | Sets & Expansions</StoreTitle>
-            <h3>Sets & Expansions</h3>
-            <div>{sets}</div>
+            <div className='text-[20px] pb-4 pt-5'><b>Sets & Expansions</b></div>
+            <div className='flex flex-wrap gap-[30px]'>{setRelases}</div>
         </Fragment>
     );
 };

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,6 +6,7 @@ export const GET_STORE_CONFIG_DATA = gql`
         storeConfig {
             store_code
             product_url_suffix
+            category_url_suffix
         }
     }
 `;
@@ -13,10 +14,14 @@ export const GET_STORE_CONFIG_DATA = gql`
 export const GET_COLLECTIBLE_GAME_QUERY = gql`
     query getCollectibleGameSets($categoryUrlKey: String!) {
         collectibleGameSets(categoryUrlKey: $categoryUrlKey) {
-            card_set
-            card_game
-            card_set_abbreviation
-            card_release_year
+            release_type
+            sets {
+                set_name
+                option_id
+                set_abbreviation
+                release_date
+                release_number
+            }
         }
     }
 `;

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

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