@riosst100/pwa-marketplace 1.8.7 → 1.8.9

package/src/talons/NonSportCardsSets/useNonSportCardsSets.js

@@ -0,0 +1,238 @@
+import { useQuery, useLazyQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './nonSportCardsSets.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useNonSportCardsSets = props => {
+
+    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getNonSportCardsSetsQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
+    const [runQuery, queryResponse] = useLazyQuery(getNonSportCardsSetsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const pathnameArr = pathname.split('/');
+
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const parentCategoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
+    const productType = shopby;
+    
+    
+
+    // const { error, loading, data } = useQuery(getNonSportCardsSetsQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first',
+    //     skip: !storeConfigData,
+    //     variables: {
+    //         categoryUrlKey: categoryUrlKey,
+    //         setType: setType
+    //     }
+    // });
+    const { data: introspectionData } = 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);
+
+    // console.log(search)
+
+    // Construct the filter arg object.
+    const newFilters = {};
+    filters.forEach((values, key) => {
+        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+// console.log(key)
+// console.log(values)
+        
+        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
+                    //     }
+                    // )
+                }   
+            }
+        }
+    });
+
+    useEffect(() => {
+        // console.log("MASUK")
+
+        // if (queryResponse.data) {
+
+        
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        // newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                filters: newFilters,
+                categoryUrlKey: categoryUrlKey,
+                setType: setType,
+                shopby: shopby
+            }
+        });
+    // }
+    }, [
+        runQuery,
+        // queryResponse
+        // filterTypeMap,
+        // search,
+        // newFilters,
+        // shopby,
+        // categoryUrlKey
+    ]);
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    const nonSportCardsSets = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+        
+        const nonSportCardsSets = queryResponse?.data?.nonSportCardsSets;
+        if (!nonSportCardsSets) {
+            return null;
+        }
+
+        // const sortbyData = [];
+        // if (nonSportCardsSets) {
+        // nonSportCardsSets.map((setRelease, index) => {
+        //     const { group, sets } = setRelease;
+        //     if (sets.length) {
+        //         sets.map((set, index) => {
+        //             const { release_year } = set;
+        //             // if (release_year) {
+        //             //     // groupingSetsByYear.splice(release_year, 0, set);
+        //                 // const result = sortbyData.find(item => item.group === release_year);
+
+        //             //     // groupingSetsByYear[release_year] = set;
+        //             //     if (result) {
+        //             //         result.sets.push(set)
+        //             //     } else {
+        //             //         // if (sortby == "date" || sortby == "newest" && sortbyData.length < 2) {
+        //             //             sortbyData.push({
+        //             //                 'group': release_year,
+        //             //                 'sets': [set]
+        //             //             })
+        //             //         // }
+        //             //     }
+        //             // }
+        //         })
+        //     }
+        // })
+
+        return nonSportCardsSets.slice().sort((a, b) => b.group.toLowerCase().localeCompare(a.group.toLowerCase()));
+    }, [queryResponse]);
+
+    const availableGroups = nonSportCardsSets && nonSportCardsSets.length ? nonSportCardsSets.map(({ group }) => group) : [];
+
+    const filteredNonSportCardsSets = useMemo(() => {
+        if (!nonSportCardsSets) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            // setActive('all')
+
+            nonSportCardsSets.map(({ group, sets }, index) => {
+                const newSets = sets.filter(function(set) {
+                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group.search(new RegExp(searchQuery, "i")) != -1;
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'group': group,
+                        'sets': newSets
+                    })
+                }
+            })
+        }
+
+        // if (activeFilter && activeFilter != "all") {
+        //     nonSportCardsSets.map(({ group, sets }, index) => {
+        //         const newSets = sets.filter(function(set) {
+        //             return set.sc_league == activeFilter;
+        //             // return set.set_name.includes(searchQuery);
+        //         });
+
+        //         if (newSets && newSets.length) {
+        //             filteredSets.push({
+        //                 'group': group,
+        //                 'sets': newSets
+        //             })
+        //         }
+        //     })
+        // }
+
+        return searchQuery ? filteredSets : nonSportCardsSets;
+    }, [nonSportCardsSets, searchQuery]);
+
+    // useEffect(() => {
+    //     setPageLoading(isBackgroundLoading);
+    // }, [isBackgroundLoading, setPageLoading]);
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+
+    const error = queryResponse?.error;
+    const loading = queryResponse?.loading;
+
+    return {
+        error,
+        loading,
+        nonSportCardsSets,
+        filteredNonSportCardsSets,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType,
+        availableGroups,
+        category
+    };
+};

package/src/talons/ShopBy/useShopBy.js

@@ -1,7 +1,6 @@
 import { useQuery, useLazyQuery } from '@apollo/client';
 import { useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './shopBy.gql';
@@ -141,6 +140,9 @@ export const useShopBy = props => {
             if (!alpha.includes(firstLetter)) {
                 firstLetter = '#';
             }
+            if (shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
+                firstLetter = '#';
+            }
             acc[firstLetter] = acc[firstLetter] || [];
             acc[firstLetter].push(item);
             return acc;
@@ -199,6 +201,9 @@ export const useShopBy = props => {
                 if (!alpha.includes(firstLetter)) {
                     firstLetter = '#';
                 }
+                if (shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
+                    firstLetter = '#';
+                }
                 acc[firstLetter] = acc[firstLetter] || [];
                 acc[firstLetter].push(item);
                 return acc;
@@ -210,9 +215,14 @@ export const useShopBy = props => {
 
     // console.log(dataResult)
 
-    const availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
+    let availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
 
-    const filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
+    let filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
+    
+    if (shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
+        availableGroups = ['#'];
+        filteredAvailableGroups = ['#'];
+    }
 
 
     const attributeData = queryResponse?.data?.shopByData && queryResponse?.data?.shopByData.length ? queryResponse.data.shopByData[0] : null

package/src/talons/ShopByVehicles/shopByVehicles.gql.js

@@ -0,0 +1,59 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_SHOP_BY_DATA_QUERY = gql`
+    query getShopByVehicles($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
+        shopByVehicles(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                url_key
+                url_path
+            }
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getShopByVehiclesQuery: GET_SHOP_BY_DATA_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+};

package/src/talons/ShopByVehicles/useShopByVehicles.js

@@ -0,0 +1,222 @@
+import { useQuery, useLazyQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './shopByVehicles.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useShopByVehicles = props => {
+
+    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getShopByVehiclesQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
+    const [runQuery, queryResponse] = useLazyQuery(getShopByVehiclesQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const pathnameArr = pathname.split('/');
+
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const parentCategoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
+    const productType = shopby;
+    
+    
+
+    // const { error, loading, data } = useQuery(getShopByVehiclesQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first',
+    //     skip: !storeConfigData,
+    //     variables: {
+    //         categoryUrlKey: categoryUrlKey,
+    //         setType: setType
+    //     }
+    // });
+    const { data: introspectionData } = 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);
+
+    // console.log(search)
+
+    // Construct the filter arg object.
+    const newFilters = {};
+    filters.forEach((values, key) => {
+        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+// console.log(key)
+// console.log(values)
+        
+        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
+                        }
+                    )
+                }   
+            }
+        }
+    });
+
+    useEffect(() => {
+        // console.log("MASUK")
+
+        // if (queryResponse.data) {
+
+        
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        // newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                filters: newFilters,
+                categoryUrlKey: categoryUrlKey,
+                activeTab: activeTab,
+                shopby: shopby,
+                activeFilter: activeFilter
+            }
+        });
+    // }
+    }, [
+        runQuery,
+        activeTab,
+        activeFilter
+        // queryResponse
+        // filterTypeMap,
+        // search,
+        // newFilters,
+        // shopby,
+        // categoryUrlKey
+    ]);
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    // { data: queryResponse, error, loading }
+
+    
+
+    // console.log(data)
+
+    // const isBackgroundLoading = !!data && loading;
+
+    const availableLeagues = [];
+
+    // console.log(queryResponse.data)
+
+    const shopByVehicles = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+
+        // console.log(data)
+        
+        const shopByVehicles = queryResponse?.data?.shopByVehicles;
+        if (!shopByVehicles) {
+            return null;
+        }
+
+        return shopByVehicles.slice().sort((a, b) =>a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
+    }, [queryResponse]);
+
+    const availableGroups = shopByVehicles && shopByVehicles.length ? shopByVehicles.map(({ group }) => group) : [];
+
+    // const availableLeagues = shopByVehicles && shopByVehicles.length ? shopByVehicles.map(({ sets }) => shopByVehicles.map(({ sc_league }) => sc_league)) : [];
+// console.log(availableLeagues)
+    // sc_league
+
+    const filteredShopByVehicles = useMemo(() => {
+        if (!shopByVehicles) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            // useEffect(() => {
+            //     setActive('all')
+            // }, [active]);
+
+            shopByVehicles.map(({ group, sets }, index) => {
+                const newSets = sets.filter(function(set) {
+                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group.search(new RegExp(searchQuery, "i")) != -1;
+                    // return set.set_name.includes(searchQuery);
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'group': group,
+                        'sets': newSets
+                    })
+                }
+            })
+        }
+
+        return searchQuery ? filteredSets : shopByVehicles;
+    }, [shopByVehicles, searchQuery]);
+
+    // useEffect(() => {
+    //     setPageLoading(isBackgroundLoading);
+    // }, [isBackgroundLoading, setPageLoading]);
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+
+    const error = queryResponse?.error;
+    const loading = queryResponse?.loading;
+
+    // console.log(shopByVehicles)
+
+    return {
+        error,
+        loading,
+        shopByVehicles,
+        filteredShopByVehicles,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType,
+        availableGroups,
+        category,
+        // availableLeagues
+    };
+};

package/src/talons/SportCardsSets/sportCardsSets.gql.js

@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_SPORT_CARDS_SETS_QUERY = gql`
-    query getSportCardsSets($categoryUrlKey: String!, $setType: String, $filters: ProductAttributeFilterInput!) {
-        sportCardsSets(categoryUrlKey: $categoryUrlKey, setType: $setType, filters: $filters) {
+    query getSportCardsSets($categoryUrlKey: String!, $shopby: String, $setType: String, $filters: ProductAttributeFilterInput!) {
+        sportCardsSets(categoryUrlKey: $categoryUrlKey, shopby: $shopby, setType: $setType, filters: $filters) {
             group
             sets {
                 set_name

package/src/talons/SportCardsSets/useSportCardsSets.js

@@ -66,12 +66,12 @@ export const useSportCardsSets = props => {
                     // console.log(item.split(',')[0])
                     const data = search.split('&');
                     data.pop();
-                    activeFilters.push(
-                        {
-                            'label': item.split(',')[0],
-                            'path': data
-                        }
-                    )
+                    // activeFilters.push(
+                    //     {
+                    //         'label': item.split(',')[0],
+                    //         'path': data
+                    //     }
+                    // )
                 }   
             }
         }
@@ -92,7 +92,8 @@ export const useSportCardsSets = props => {
             variables: {
                 filters: newFilters,
                 categoryUrlKey: categoryUrlKey,
-                setType: setType
+                setType: setType,
+                shopby: shopby
             }
         });
     // }
@@ -173,7 +174,7 @@ export const useSportCardsSets = props => {
             })
         }
 
-        return sportCardsSets.slice().sort((a, b) => b.group.toLowerCase().localeCompare(a.group.toLowerCase()));
+        return sortby == "release" ? sportCardsSets.slice().sort((a, b) => b.group.toLowerCase().localeCompare(a.group.toLowerCase())) : sportCardsSets.slice().sort((a, b) => a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
     }, [queryResponse, activeTab]);
 
     const availableGroups = sportCardsSets && sportCardsSets.length ? sportCardsSets.map(({ group }) => group) : [];
@@ -191,12 +192,11 @@ export const useSportCardsSets = props => {
 
         if (searchQuery) {
 
-            setActive('all')
+            // setActive('all')
 
             sportCardsSets.map(({ group, sets }, index) => {
                 const newSets = sets.filter(function(set) {
                     return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group.search(new RegExp(searchQuery, "i")) != -1;
-                    // return set.set_name.includes(searchQuery);
                 });
 
                 if (newSets && newSets.length) {