@riosst100/pwa-marketplace 1.4.9 → 1.5.0

package/package.json

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -10,7 +10,7 @@ import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 const CollectibleGameSets = props => {
     const talonProps = useCollectibleGameSets();
 
-    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType } = talonProps;
 
     if (loading && !collectibleGameSets)
         return '';
@@ -30,14 +30,18 @@ const CollectibleGameSets = props => {
         );
     }
 
+    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;
+                const { set_name, option_id, set_abbreviation } = set;
 
                 const categoryUrl = resourceUrl(
                     `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
@@ -45,7 +49,7 @@ const CollectibleGameSets = props => {
 
                 setsResult.push(
                     <li>
-                        <Link to={categoryUrl}>{set_name}</Link>
+                        <Link to={categoryUrl}>{set_name} <small style={{"color":"grey"}}>{set_abbreviation}</small></Link>
                     </li>
                 );
             });
@@ -53,7 +57,7 @@ const CollectibleGameSets = props => {
 
         return (
             <>
-                <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>
@@ -62,11 +66,23 @@ const CollectibleGameSets = props => {
         );
     });
 
+    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>
-            <div className='text-[20px] pb-4 pt-5'><b>Sets & Expansions</b></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/talons/CollectibleGameSets/collectibleGameSets.gql.js

@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_COLLECTIBLE_GAME_QUERY = gql`
-    query getCollectibleGameSets($categoryUrlKey: String!) {
-        collectibleGameSets(categoryUrlKey: $categoryUrlKey) {
+    query getCollectibleGameSets($categoryUrlKey: String!, $productType: String) {
+        collectibleGameSets(categoryUrlKey: $categoryUrlKey, productType: $productType) {
             release_type
             sets {
                 set_name

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

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