@riosst100/pwa-marketplace 2.2.3 → 2.2.4

package/package.json

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

package/src/components/FilterTop/CurrentTopFilters/currentTopFilter.js

@@ -31,7 +31,7 @@ const CurrentTopFilter = props => {
         }
     );
 
-    return group && group != "character" && group != "product_series" && group != "scale" && group != "product_line" && group != "filterby" && group != "trains" && group != "franchise" && group != "brands" && group != "category" && group != "shopby" ? (
+    return group && group != "card_game" && group != "character" && group != "product_series" && group != "scale" && group != "product_line" && group != "filterby" && group != "trains" && group != "franchise" && group != "brands" && group != "category" && group != "shopby" ? (
         <span className={classes.item} data-cy="CurrentTopFilter-root">
             <Trigger
                 action={handleClick}

package/src/components/FilterTop/CurrentTopFilters/currentTopFilters.js

@@ -21,7 +21,7 @@ const CurrentTopFilters = props => {
                 const { title, value } = item || {};
                 const key = `${group}::${title}_${value}`;
 
-                const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+                const customAttributeLandingPage = ['card_game','card_set', 'sc_baseball_release'];
 
                 if (group === currentGroup && !customAttributeLandingPage.includes(group)) {
                     elements.push(

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

@@ -43,7 +43,7 @@ const CustomFilter = props => {
 
     const subCategory = [];
 
-    const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+    const customAttributeLandingPage = ['card_game','card_set', 'sc_baseball_release'];
 
     if (customAttributeLandingPage.includes(group)) {
         normalizedData && normalizedData.map(({ label, path }, index) => {

package/src/components/FilterTop/FilterBlockList/filterTopItem.js

@@ -44,6 +44,36 @@ const FilterTopItem = props => {
 
     // const catId = null;
 
+    // const newSearch = (search) => {
+    //     console.log(search)
+
+    //     let filterSearchArr = search ? search.split('&') : [];
+    //     filterSearchArr = filterSearchArr.filter(function(data) {
+    //         return !data.includes('shopby');
+    //     })
+    //     let filterSearch = filterSearchArr.join('&')
+
+    //     if (!filterSearch.includes('?')) {
+    //         filterSearch = '?'+filterSearch;
+    //     }
+
+    //     return result;
+    // }
+
+    let newfilterSearchArr = search ? search.split('&') : [];
+    newfilterSearchArr = newfilterSearchArr.filter(function(data) {
+        return data.includes('card_game%5Bfilter%5D');
+    });
+    
+    let filterSearch = newfilterSearchArr.join('&')
+
+    if (!filterSearch.includes('?')) {
+        filterSearch = '?'+filterSearch;
+    }
+
+    // console.log('--filterSearch--')
+    // console.log(filterSearch)
+
     const element = group == "filterby" ? (
         filterBy == value ? (
             <span className={classes.item}><b>{title}</b></span>
@@ -53,9 +83,9 @@ const FilterTopItem = props => {
     ) : group == "category" ? (
         <Link className={classes.item} to={'/'+value}>{title}</Link>
     ) : value == "shopby_all" ? (
-        <Link className={classes.item} to={search ? search + '&shopby=' + group : '?shopby=' + group}>{title}</Link>
+        <Link className={classes.item} to={search ? filterSearch + '&shopby=' + group : '?shopby=' + group}>{title}</Link>
     ) : group == "shopby" || group == "shopby_with_all" ? (
-        <Link className={classes.item} to={search ? search + '&shopby=' + value : '?shopby=' + value}>{title}</Link>
+        <Link className={classes.item} to={search ? filterSearch + '&shopby=' + value : '?shopby=' + value}>{title}</Link>
     ) : group == "cat_id" ? (
         value == "all" && !categoryIdFilters.length || categoryIdFilters.length && categoryIdFilters[0].includes('cat_id='+value) ? (
             <span className={classes.item}><b>{title}</b></span>

package/src/components/FilterTop/FilterBlockList/filterTopItemGroup.js

@@ -87,7 +87,7 @@ const FilterTopItemGroup = props => {
         <div className={classes.root}>
             {radioItems}
             {filterElements && filterElements.length > 10 ? <span className={classes.item}><b>More Item</b></span> : ''}
-            {filterElements && filterElements.length ? filterElements : group && group != "character" && group != "product_series" && group != "scale" && group != "product_line" && group != "trains" && group != "franchise" && group != "brands" && group != "category" && group != "filterby" && group != "shopby" && group != "cat_id" ? (<span className={classes.item}><b>All</b></span>) : ''}
+            {filterElements && filterElements.length ? filterElements : group && group != "character" && group != "product_series" && group != "scale" && group != "product_line" && group != "trains" && group != "franchise" && group != "brands" && group != "category" && group != "card_game" && group != "filterby" && group != "shopby" && group != "cat_id" ? (<span className={classes.item}><b>All</b></span>) : ''}
         </div>
     );
 };

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

@@ -43,7 +43,7 @@ const CustomFilter = props => {
 
     const subCategory = [];
 
-    const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+    const customAttributeLandingPage = ['card_game','card_set', 'sc_baseball_release'];
 
     if (customAttributeLandingPage.includes(group)) {
         normalizedData && normalizedData.map(({ label, path }, index) => {

package/src/components/SetsData/setsData.js

@@ -13,12 +13,15 @@ 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';
+import { useLocation } from 'react-router-dom';
 
 const SetsData = props => {
     const { categoryId } = props
 
     const { location } = globalThis;
 
+    const { search } = useLocation();
+
     const query = new URLSearchParams(location.search);
 
     const [active, setActive] = useState('all');
@@ -40,13 +43,6 @@ const SetsData = props => {
             value: 'date'
         };
     }
-
-    // if (productType == "expansion_sets") {
-    //     defaultSort = {
-    //         sortText: 'All (Expansion Sets)',
-    //         value: 'all'
-    //     };
-    // }
     
     // Sorting
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
@@ -112,6 +108,17 @@ const SetsData = props => {
     //     byYearTitle = "By Year";
     // }
 
+    let newfilterSearchArr = search ? search.split('&') : [];
+    newfilterSearchArr = newfilterSearchArr.filter(function(data) {
+        return !data.includes(attributeCode + '%5Bfilter%5D') && !data.includes('shopby');
+    });
+    
+    let filterSearch = newfilterSearchArr.join('&')
+
+    if (!filterSearch.includes('?')) {
+        filterSearch = '?'+filterSearch;
+    }
+
     const setRelases = newSetsData && newSetsData.length && newSetsData.map((setRelease, index) => {
         const { group, sets } = setRelease;
 
@@ -122,7 +129,7 @@ const SetsData = props => {
                 const { set_name, option_id, release_year } = set;
 
                 const categoryUrl = resourceUrl(
-                    `/${category?.url_path}${categoryUrlSuffix || ''}?${attributeCode}[filter]=${set_name},${option_id}`
+                    `/${category?.url_path}${categoryUrlSuffix || ''}${filterSearch || ''}&${attributeCode}[filter]=${set_name},${option_id}`
                 );
 
                 setsResult.push(<li className='list-none'>
@@ -179,7 +186,7 @@ const SetsData = props => {
 
     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'];
 
-    let title = pageInfo ? pageInfo.title : 'All Sets';
+    let title = pageInfo ? pageInfo.title : 'All S2ets';
     if (activeTab == "year") {
         title = "Sets | By Year";
     }

package/src/components/ShopByBrands/shopByBrands.js

@@ -40,13 +40,6 @@ const ShopByBrands = props => {
             value: 'date'
         };
     }
-
-    // if (productType == "expansion_sets") {
-    //     defaultSort = {
-    //         sortText: 'All (Expansion Sets)',
-    //         value: 'all'
-    //     };
-    // }
     
     // Sorting
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});

package/src/components/ShopByCard/shopByCard.js

@@ -13,10 +13,14 @@ 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';
+import { useLocation } from 'react-router-dom';
 
 const ShopByCard = props => {
     const { categoryId } = props
 
+    const { search } = useLocation();
+
+
     const [active, setActive] = useState('all');
 
     const [searchQuery, setSearchQuery] = useState('');
@@ -37,13 +41,6 @@ const ShopByCard = props => {
             value: 'date'
         };
     }
-
-    // if (productType == "expansion_sets") {
-    //     defaultSort = {
-    //         sortText: 'All (Expansion Sets)',
-    //         value: 'all'
-    //     };
-    // }
     
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
 
@@ -90,6 +87,17 @@ const ShopByCard = props => {
         return result;
     }
 
+    let newfilterSearchArr = search ? search.split('&') : [];
+    newfilterSearchArr = newfilterSearchArr.filter(function(data) {
+        return !data.includes('card_name%5Bfilter%5D') && !data.includes('shopby');
+    });
+    
+    let filterSearch = newfilterSearchArr.join('&')
+
+    if (!filterSearch.includes('?')) {
+        filterSearch = '?'+filterSearch;
+    }
+
     const setRelases = newShopByCard.length && newShopByCard.map((setRelease, index) => {
         const { release_type, sets } = setRelease;
 
@@ -100,7 +108,7 @@ const ShopByCard = props => {
                 const { set_name, option_id, set_abbreviation, release_year } = set;
 
                 const categoryUrl = resourceUrl(
-                    `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_name[filter]=${set_name},${option_id}`
+                    `/games/${categoryUrlKey}${categoryUrlSuffix || ''}${filterSearch || ''}&card_name[filter]=${set_name},${option_id}`
                 );
 
                 setsResult.push(<li className='list-none'>
@@ -174,21 +182,6 @@ const ShopByCard = props => {
         // alpha = availableGroups;
     }
 
-    if (productType == "expansion_sets") {
-        // availableSortBy = [
-        //     {
-        //         'label': 'All (Expansion Sets)',
-        //         'value': 'all'
-        //     },
-        //     {
-        //         'label': 'Latest Sets',
-        //         'value': 'newest'
-        //     }
-        // ];
-
-        // alpha = availableGroups
-    }
-
     let title = "By Card Name";
 
     return (

package/src/components/ShopBySets/shopBySets.js

@@ -37,13 +37,6 @@ const ShopBySets = props => {
             value: 'date'
         };
     }
-
-    // if (productType == "expansion_sets") {
-    //     defaultSort = {
-    //         sortText: 'All (Expansion Sets)',
-    //         value: 'all'
-    //     };
-    // }
     
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
 
@@ -175,24 +168,14 @@ const ShopBySets = props => {
         // alpha = availableGroups;
     }
 
-    if (productType == "expansion_sets") {
-        // availableSortBy = [
-        //     {
-        //         'label': 'All (Expansion Sets)',
-        //         'value': 'all'
-        //     },
-        //     {
-        //         'label': 'Latest Sets',
-        //         'value': 'newest'
-        //     }
-        // ];
-
-        // alpha = availableGroups
-    }
+    console.log('==productType')
+    console.log(productType)
 
-    let title = "All Sets";
+    let title = "A2ll Sets";
     if (productType == "expansion_sets") {
         title = "Expansion Sets";
+    } else if (productType == "secret_lair") {
+        title = "Secret Lair";
     } else if (productType == "artist") {
         title = "By Artist";
     } else if (shopby == "release_year") {
@@ -203,11 +186,11 @@ const ShopBySets = props => {
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={shopby == "expansion_sets" ? "Expansion Sets" : (shopby == "release_year" ? "By Year" : "All Sets")} />
-            {shopby != "release_year" && productType != "expansion_sets" && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+            <Breadcrumbs categoryId={categoryId} customPage={shopby == "secret_lair" ? "Secret Lair" : (shopby == "expansion_sets" ? "Expansion Sets" : (shopby == "release_year" ? "By Year" : "All Set3s"))} />
+            {shopby != "release_year" && productType != "secret_lair" && productType != "expansion_sets" && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {title}
             </h1>}
-            {shopby == "release_year" || productType == "expansion_sets" ? <ul className={classes.nav}>
+            {shopby == "release_year" || productType == "secret_lair" || productType == "expansion_sets" ? <ul className={classes.nav}>
                 {availableGroups.map((group, index) => (
                 <li key={index} className={classes.nav_item}>
                     <button

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

@@ -94,7 +94,7 @@ const Category = props => {
                 allowedShopby.includes(shopby) ? <ShopBy
                 categoryId={uid}
                 shopby={shopby}
-                isLoading={loading} /> : shopby == "release_year" || shopby == "expansion_sets" || shopby == "sets" ? <SetsData
+                isLoading={loading} /> : shopby == "release_year" || shopby == "secret_lair" || shopby == "expansion_sets" || shopby == "sets" ? <SetsData
                 categoryId={uid}
                 shopby={shopby}
                 isLoading={loading} /> : shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets

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

@@ -82,19 +82,19 @@ const CategoryContent = props => {
         if (category) {
             const urlKey = category.url_key;
             if (urlKey == "collectible-game") {
-                history.replace('/games/collectible-game/magic-the-gathering.html')
+                // history.replace('/games/collectible-game/magic-the-gathering.html')
             }
 
             if (urlKey == "sport-cards") {
-                history.replace('/cards/sport-cards/baseball.html')
+                // history.replace('/cards/sport-cards/baseball.html')
             }
 
             if (urlKey == "non-sports-cards") {
-                history.replace('/cards/non-sports-cards/comics.html')
+                // history.replace('/cards/non-sports-cards/comics.html')
             }
 
             if (urlKey == "lego") {
-                history.replace('/lego/lego-sets.html')
+                // history.replace('/lego/lego-sets.html')
             }
         }
     }, [category]);
@@ -263,7 +263,7 @@ const CategoryContent = props => {
                 if (label == "Singles") {
                     isSingles = true;
                 }
-                if (key == "product_line" && urlKey == "brands" || key == "product_line" && urlKey == "franchise" || key == "franchise" && urlKey == "brands" || key == "franchise" && urlKey == "franchise" || key == "brands" && urlKey == "franchise" || key == "brands" && urlKey == "brands" || virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
+                if (key == "card_game" || key == "product_line" && urlKey == "brands" || key == "product_line" && urlKey == "franchise" || key == "franchise" && urlKey == "brands" || key == "franchise" && urlKey == "franchise" || key == "brands" && urlKey == "franchise" || key == "brands" && urlKey == "brands" || virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
                     activeFilters.push(
                         {
                             'label': label,
@@ -308,7 +308,7 @@ const CategoryContent = props => {
                     <>
                         {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
                         {!currentFilter && <CustomSubCategory categoryName={category ? category.name : null} customSubCategory={category ? category.custom_subcategory : null} />}
-                        {shopby != "gauge" ? <SubCategory parent={parent} children={children} /> : ''}
+                        {shopby != "gauge" && category?.name != "Collectible Card Games" ? <SubCategory parent={parent} children={children} /> : ''}
                         
                     </>
                 {/* ) : ( */}

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -20,7 +20,7 @@ const CurrentFilters = props => {
                 const { title, value } = item || {};
                 const key = `${group}::${title}_${value}`;
 
-                const customAttributeLandingPage = ['card_set', 'sc_baseball_release','auction','special_price','lof_preorder','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
+                const customAttributeLandingPage = ['card_game','card_set', 'sc_baseball_release','auction','special_price','lof_preorder','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
 
                 // if (!customAttributeLandingPage.includes(group)) {
                     elements.push(

package/src/talons/ShopByCard/shopByCard.gql.js

@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_COLLECTIBLE_GAME_QUERY = gql`
-    query getShopByCard($categoryUrlKey: String!, $productType: String) {
-        shopByCard(categoryUrlKey: $categoryUrlKey, productType: $productType) {
+    query getShopByCard($categoryUrlKey: String!, $productType: String, $filters: ProductAttributeFilterInput!) {
+        shopByCard(categoryUrlKey: $categoryUrlKey, productType: $productType, filters: $filters) {
             release_type
             sets {
                 set_name
@@ -40,8 +40,22 @@ export const GET_SPORT_CARDS_SETS_QUERY = gql`
     }
 `;
 
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
     getCollectibleGameQuery: GET_COLLECTIBLE_GAME_QUERY,
-    getSportCardsSetsQuery: GET_SPORT_CARDS_SETS_QUERY
+    getSportCardsSetsQuery: GET_SPORT_CARDS_SETS_QUERY,
+    getFilterInputsQuery: GET_FILTER_INPUTS
 };

package/src/talons/ShopByCard/useShopByCard.js

@@ -5,6 +5,7 @@ import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './shopByCard.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 export const useShopByCard = props => {
 
@@ -13,8 +14,9 @@ export const useShopByCard = props => {
     const { value: sortby } = currentSort
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, null);
-    const { getStoreConfigData, getCollectibleGameQuery } = operations;
-    const { pathname } = useLocation();
+    const { getStoreConfigData, getFilterInputsQuery, getCollectibleGameQuery } = operations;
+    const { pathname, search } = useLocation();
+
     const [
         ,
         {
@@ -34,11 +36,50 @@ export const useShopByCard = props => {
     
     const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
 
+    const {
+        called: introspectionCalled,
+        data: introspectionData,
+        loading: introspectionLoading
+    } = useQuery(getFilterInputsQuery);
+
+    const filterTypeMap = useMemo(() => {
+        const typeMap = new Map();
+        if (introspectionData) {
+            introspectionData.__type.inputFields.forEach(({ name, type }) => {
+                typeMap.set(name, type.name);
+            });
+        }
+        return typeMap;
+    }, [introspectionData]);
+
+    const filters = getFiltersFromSearch(search);
+
+    const newFilters = {};
+    filters.forEach((values, key) => {
+        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+        if (key == "sc_baseball_release") {
+            for(let item of values) {
+                if(item) {
+                    // console.log(item.split(',')[0])
+                    const data = search.split('&');
+                    data.pop();
+                    activeFilters.push(
+                        {
+                            'label': item.split(',')[0],
+                            'path': data
+                        }
+                    )
+                }   
+            }
+        }
+    });
+
     const { error, loading, data } = useQuery(getCollectibleGameQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !storeConfigData,
         variables: {
+            filters: newFilters,
             categoryUrlKey: categoryUrlKey,
             productType: productType
         }