@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/talons/ShopBy/useShopBy.js

@@ -0,0 +1,264 @@
+import { useQuery, useLazyQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './shopBy.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useShopBy = props => {
+
+    const { searchQuery, activeFilter, active, setActive, currentSort, categoryId, shopby } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
+    // const [
+    //     ,
+    //     {
+    //         actions: { setPageLoading }
+    //     }
+    // ] = useAppContext();
+
+    const [runQuery, queryResponse] = useLazyQuery(getShopByDataQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const pathnameArr = pathname.split('/');
+    
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    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 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
+                        }
+                    )
+                }   
+            }
+        }
+    });
+
+    useEffect(() => {
+
+        
+
+        // 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,
+                attributeCode: shopby,
+                activeFilter: activeFilter,
+                search: search
+            }
+        });
+    }, [
+        runQuery,
+        activeFilter,
+        shopby,
+        // categoryUrlKey,
+        // filters
+        // 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;
+
+    const originalDataResult = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+        
+        const rawData = queryResponse?.data?.shopByData;
+        if (!rawData) {
+            return null;
+        }
+        
+        let options = rawData[0].options;
+
+        const mappingData = options.reduce((acc, item) => {
+            let firstLetter = item.label.charAt(0).toUpperCase();
+            if (!alpha.includes(firstLetter)) {
+                firstLetter = '#';
+            }
+            if (shopby == "vehicles_year" || 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;
+        }, {});
+
+        const sortbyData = [];
+
+        return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
+    }, [queryResponse, sortby]);
+
+    const filteredOptions = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+        
+        const rawData = queryResponse?.data?.shopByData;
+        if (!rawData) {
+            return null;
+        }
+        
+        let options = rawData[0].options;
+
+        // const filteredSets = [];
+
+        // let filteredOptions = [];
+
+        // let mappingData = [];
+
+        if (searchQuery) {
+            if (active != "all") {
+                setActive('all');
+            }
+
+            return options.filter(function(option) {
+                return option.label.search(new RegExp(searchQuery, "i")) != -1;
+            });
+        }
+        // } else {
+
+        //     console.log(filteredOptions)
+
+           
+        // }
+
+        
+
+        // const sortbyData = [];
+
+        return options;
+    }, [queryResponse, searchQuery]);
+
+    const dataResult = useMemo(() => {
+        if (filteredOptions) {
+            return filteredOptions.reduce((acc, item) => {
+                let firstLetter = item.label.charAt(0).toUpperCase();
+                if (!alpha.includes(firstLetter)) {
+                    firstLetter = '#';
+                }
+                if (shopby == "vehicles_year" || 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;
+            }, {});
+        }
+
+        return filteredOptions;
+    }, [filteredOptions])
+
+    // console.log(dataResult)
+
+    let availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
+
+    let filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
+    
+    if (shopby == "vehicles_year" || 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
+
+    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;
+
+    return {
+        // error,
+        // loading,
+        dataResult,
+    //     collectibleGameSets,
+        filteredAvailableGroups,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        availableGroups,
+        attributeData,
+        alpha,
+        category,
+        activeFilters
+    //     productType
+    };
+};

package/src/talons/ShopByBrands/shopByBrands.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_LEGO_SETS_QUERY = gql`
+    query getShopByBrands($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
+        shopByBrands(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,
+    getShopByBrandsQuery: GET_LEGO_SETS_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+};

package/src/talons/ShopByBrands/shopByBrands.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_LEGO_SETS_QUERY = gql`
+    query getShopByBrands($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
+        shopByBrands(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,
+    getShopByBrandsQuery: GET_LEGO_SETS_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+};

package/src/talons/ShopByBrands/useShopByBrands.js

@@ -0,0 +1,218 @@
+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 './shopByBrands.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useShopByBrands = props => {
+
+    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getShopByBrandsQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
+    const [runQuery, queryResponse] = useLazyQuery(getShopByBrandsQuery, {
+        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(getShopByBrandsQuery, {
+    //     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);
+
+    // 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
+                        }
+                    )
+                }   
+            }
+        }
+    });
+
+    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 shopByBrands = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+
+        // console.log(data)
+        
+        const shopByBrands = queryResponse?.data?.shopByBrands;
+        if (!shopByBrands) {
+            return null;
+        }
+
+        return shopByBrands.slice().sort((a, b) =>a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
+    }, [queryResponse]);
+
+    const availableGroups = shopByBrands && shopByBrands.length ? shopByBrands.map(({ group }) => group) : [];
+
+    // const availableLeagues = shopByBrands && shopByBrands.length ? shopByBrands.map(({ sets }) => shopByBrands.map(({ sc_league }) => sc_league)) : [];
+// console.log(availableLeagues)
+    // sc_league
+
+    const filteredShopByBrands = useMemo(() => {
+        if (!shopByBrands) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            // useEffect(() => {
+            //     setActive('all')
+            // }, [active]);
+
+            shopByBrands.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 : shopByBrands;
+    }, [shopByBrands, 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(shopByBrands)
+
+    return {
+        error,
+        loading,
+        shopByBrands,
+        filteredShopByBrands,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType,
+        availableGroups,
+        category,
+        // availableLeagues
+    };
+};

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

@@ -0,0 +1,47 @@
+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_COLLECTIBLE_GAME_QUERY = gql`
+    query getShopByCard($categoryUrlKey: String!, $productType: String) {
+        shopByCard(categoryUrlKey: $categoryUrlKey, productType: $productType) {
+            release_type
+            sets {
+                set_name
+                option_id
+                set_abbreviation
+                release_date
+                release_year
+                release_number
+            }
+        }
+    }
+`;
+
+export const GET_SPORT_CARDS_SETS_QUERY = gql`
+    query getSportCardsSets($categoryUrlKey: String!, $setType: String) {
+        sportCardsSets(categoryUrlKey: $categoryUrlKey, setType: $setType) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getCollectibleGameQuery: GET_COLLECTIBLE_GAME_QUERY,
+    getSportCardsSetsQuery: GET_SPORT_CARDS_SETS_QUERY
+};