@riosst100/pwa-marketplace 2.6.9 → 2.7.0

package/package.json

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

package/src/components/ShopBy/shopBy.js

@@ -110,9 +110,7 @@ const ShopBy = props => {
 
     const talonProps = useShopBy({ activeFilter, searchQuery, active, setActive, currentSort, categoryId, shopby });
 
-    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, activeFilters, pageInfo } = talonProps;
-
-    console.log('dataResult SHOPBY', dataResult)
+    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, pageInfo } = talonProps;
 
     if (loading) {
         return <ShopByShimmer />;
@@ -153,7 +151,7 @@ const ShopBy = props => {
 
         if (active === 'all' || active === group) {
             dataResult[group] && dataResult[group].length && dataResult[group].map((option, index) => {
-                const { products_count, label, value } = option;
+                const { count, label, value } = option;
 
                 const filter = attributeData.attribute_code + '[filter]=' + label + ',' + value;
                 const params = filterSearch ? filterSearch + '&' + filter + additionalFilter : '?' + filter + additionalFilter;
@@ -164,7 +162,7 @@ const ShopBy = props => {
 
                 optionsResult.push(<li key={index} className='list-none'>
                     <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-0">
-                        {label} <span className='text-[12px]'>({products_count})</span>
+                        {label} <span className='text-[12px]'>({count})</span>
                     </Link>
                 </li>)
             });
@@ -174,8 +172,6 @@ const ShopBy = props => {
                 optionsResultSplitted = splitToNChunks(optionsResult, 3);
             }
 
-            // console.log(dataResult)
-
             const all = active == "all" ? (
                 newAvailableGroups.length == 1 ? (
                     optionsResultSplitted && optionsResultSplitted.length && optionsResultSplitted.map((data, index) => (
@@ -234,7 +230,7 @@ const ShopBy = props => {
     ];
     
     // const title = attributeData ? (attributeData.attribute_code == "sc_baseball_parallel" ? "Parallel Sets" : (attributeData.attribute_code == "sc_baseball_inserts" ? "Insert Sets" : attributeData.label)) : "Shop By"
-    const title = pageInfo ? pageInfo.title : '';
+    const title = pageInfo ? pageInfo.label : '';
 
     let availableFilterOption = [];
 
@@ -283,8 +279,6 @@ const ShopBy = props => {
         ];
     }
 
-    // console.log(category)
-
     if (shopby == "brands" || shopby == "product_line") {
         if (category && category?.url_path.includes('anime-figures')) {
             availableFilterOption = [
@@ -340,7 +334,32 @@ const ShopBy = props => {
         setSearchQuery('')
     }
 
-    // console.log(category)
+    const activeFilters = [];
+        
+    const allActiveFilters = getFiltersFromSearch(search);
+
+    if (allActiveFilters && allActiveFilters.size > 0) {
+        allActiveFilters.forEach((value, key) => {
+            value.forEach((value) => {
+                const filterArr = value.split(',');
+                
+                const label = filterArr[0];
+                const optionId = filterArr[1];
+                if (label == "Singles") {
+                    isSingles = true;
+                }
+                if (key == "bricks_categories" || key == "sc_sports_categories" || 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,
+                            'code': key,
+                            'option_id': optionId
+                        }
+                    )
+                }
+            })
+        });
+    }
 
     return (
         <Fragment>

package/src/talons/ShopBy/shopBy.gql.js

@@ -60,9 +60,39 @@ export const GET_FILTER_INPUTS = gql`
     }
 `;
 
+export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
+    query getProductMainFiltersByCategory(
+        $filters: ProductAttributeFilterInput!
+    ) {
+        products(filter: $filters) {
+            aggregations {
+                label
+                count
+                attribute_code
+                options {
+                    label
+                    value
+                    count
+                }
+                position
+            }
+        }
+    }
+`;
+
+export const GET_MASTER_ATTRIBUTES = gql`
+    query GetMasterAttributes {
+        masterAttributes {
+            attribute_code
+        }
+    }
+`;
+
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
     getShopByDataQuery: GET_SHOP_BY_DATA_QUERY,
     getCategoryContentQuery: GET_CATEGORY_CONTENT,
     getFilterInputsQuery: GET_FILTER_INPUTS,
+    getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
+    getMasterAttributesQuery: GET_MASTER_ATTRIBUTES
 };

package/src/talons/ShopBy/useShopBy.js

@@ -13,7 +13,7 @@ export const useShopBy = props => {
     const { value: sortby } = currentSort
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, null);
-    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery, getFilterInputsQuery, getProductFiltersByCategoryQuery, getMasterAttributesQuery } = operations;
     const { pathname, search } = useLocation();
     // const [
     //     ,
@@ -22,10 +22,18 @@ export const useShopBy = props => {
     //     }
     // ] = useAppContext();
 
-    const [runQuery, {data: queryResponse, loading, error}] = useLazyQuery(getShopByDataQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
+    const [runQuery, { data: queryResponse, loading, error }] = useLazyQuery(
+        getProductFiltersByCategoryQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    // const [runQuery, {data: queryResponse, loading, error}] = useLazyQuery(getShopByDataQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first'
+    // });
 
     const { data: storeConfigData } = useQuery(getStoreConfigData, {
         fetchPolicy: 'cache-and-network',
@@ -50,35 +58,8 @@ export const useShopBy = props => {
         return typeMap;
     }, [introspectionData]);
 
-    // const activeFilters = [];
-
-    // if (!filterTypeMap.size) {
-    //     return;
-    // }
-
     const filters = getFiltersFromSearch(search);
 
-    // Construct the filter arg object.
-    // 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 { newFilters, activeFilters } = useMemo(() => {
         const resultFilters = {};
         const resultActiveFilters = [];
@@ -105,9 +86,46 @@ export const useShopBy = props => {
         return { newFilters: resultFilters, activeFilters: resultActiveFilters };
     }, [filterTypeMap]);
 
-    useEffect(() => {
+    // MASTER ATTRIBUTES
+    const {
+        called: masterAttributesCalled,
+        data: masterAttributesData,
+        loading: masterAttributesLoading
+    } = useQuery(getMasterAttributesQuery,
+    {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
 
+    const masterAttributes = useMemo(() => {
+        const masterAttributes = [];
         
+        if (masterAttributesData) {
+            masterAttributesData.masterAttributes.forEach(({ attribute_code }) => {
+                masterAttributes.push(attribute_code);
+            });
+        }
+
+        return masterAttributes;
+    }, [masterAttributesData]);
+
+    useEffect(() => {
+
+        if (!filterTypeMap.size) {
+            return;
+        }
+
+        const filters = getFiltersFromSearch(search);
+
+        const mainAttributes = ['card_game'];
+
+        // Construct the filter arg object.
+        const newFilters = {};
+        filters.forEach((values, key) => {
+            if (mainAttributes.includes(key)) {
+                newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+            }
+        });
 
         // Use the category uid for the current category page regardless of the
         // applied filters. Follow-up in PWA-404.
@@ -115,37 +133,13 @@ export const useShopBy = props => {
 
         runQuery({
             variables: {
-                filters: newFilters,
-                categoryUrlKey: categoryUrlKey,
-                attributeCode: shopby,
-                activeFilter: activeFilter,
-                search: search
+                filters: newFilters
             }
         });
     }, [
-        runQuery,
-        activeFilter,
-        shopby,
-        // categoryUrlKey,
-        // filters
-        // filterTypeMap,
-        search
+        runQuery, filterTypeMap, search
     ]);
 
-    // console.log(activeFilters)
-
-    
-
-    // const { error, loading, data } = useQuery(getShopByDataQuery, {
-    //     fetchPolicy: 'cache-and-network',
-    //     nextFetchPolicy: 'cache-first',
-    //     skip: !storeConfigData,
-    //     variables: {
-    //         categoryUrlKey: categoryUrlKey,
-    //         attributeCode: shopby
-    //     }
-    // });
-
     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'];
 
     // const isBackgroundLoading = !!queryResponse && loading;
@@ -155,12 +149,14 @@ export const useShopBy = props => {
             return null;
         }
         
-        const rawData = queryResponse?.shopByData?.data;
+        const rawData = queryResponse?.products?.aggregations;
         if (!rawData) {
             return null;
         }
+
+        let options = rawData.find(item => item.attribute_code === shopby).options;
         
-        let options = rawData[0].options;
+        // let options = rawData[0].options;
 
         const mappingData = options.reduce((acc, item) => {
             let firstLetter = item.label.charAt(0).toUpperCase();
@@ -181,17 +177,16 @@ export const useShopBy = props => {
     }, [queryResponse, sortby]);
 
     const filteredOptions = useMemo(() => {
-        console.log('queryResponse', queryResponse)
         if (!queryResponse) {
             return null;
         }
         
-        const rawData = queryResponse?.shopByData?.data;
+        const rawData = queryResponse?.products?.aggregations;
         if (!rawData) {
             return null;
         }
-        
-        let options = rawData[0].options;
+
+        let options = rawData.find(item => item.attribute_code === shopby).options;
 
         // const filteredSets = [];
 
@@ -208,22 +203,10 @@ export const useShopBy = props => {
                 return option.label.search(new RegExp(searchQuery, "i")) != -1;
             });
         }
-        // } else {
-
-        //     console.log(filteredOptions)
-
-           
-        // }
-
-        
-
-        // const sortbyData = [];
 
         return options;
     }, [queryResponse, searchQuery]);
 
-    console.log('filteredOptions',filteredOptions)
-
     const dataResult = useMemo(() => {
         if (filteredOptions) {
             return filteredOptions.reduce((acc, item) => {
@@ -241,9 +224,7 @@ export const useShopBy = props => {
         }
 
         return filteredOptions;
-    }, [filteredOptions])
-
-    console.log('dataResult',dataResult)
+    }, [filteredOptions]);
 
     let availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
 
@@ -255,7 +236,7 @@ export const useShopBy = props => {
     }
 
 
-    const attributeData = queryResponse?.shopByData?.data && queryResponse?.shopByData.data.length ? queryResponse.shopByData.data[0] : null
+    const attributeData = queryResponse?.products?.aggregations && queryResponse?.products.aggregations.length ? queryResponse.products.aggregations.find(item => item.attribute_code === shopby) : null;
 
     const { data: categoryData, loading: categoryLoading } = useQuery(
         getCategoryContentQuery,
@@ -274,8 +255,8 @@ export const useShopBy = props => {
             return null;
         }
 
-        return queryResponse?.shopByData?.page_info;
-    }, [queryResponse]);
+        return queryResponse.products.aggregations.find(item => item.attribute_code === shopby);
+    }, [queryResponse, shopby]);
 
     const category =
         categoryData && categoryData.categories.items.length