@riosst100/pwa-marketplace 2.9.0 → 2.9.2

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

@@ -20,6 +20,7 @@ import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSet
 import TrainsSets from '@riosst100/pwa-marketplace/src/components/TrainsSets/trainsSets';
 import SetsData from '@riosst100/pwa-marketplace/src/components/SetsData/setsData';
 import FilterContent from '@riosst100/pwa-marketplace/src/components/FilterContent/filterContent';
+import ShowMore from '@riosst100/pwa-marketplace/src/components/ShowMore/showMore';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -40,6 +41,7 @@ const Category = props => {
 
     const query = new URLSearchParams(location.search);
     const shopby = query.get('shopby') || null;
+    const show_more = query.get('show_more') || null;
     const filterby = query.get('filterby') || null;
     const showSubcategory = query.get('show_subcategory') || null;
 
@@ -125,7 +127,12 @@ const Category = props => {
                 isLoading={loading} /> : shopby == "card" ? <ShopByCard
                 categoryId={uid}
                 shopby={shopby}
-                isLoading={loading} /> : (shopby && shopby != "gauge" ? (
+                isLoading={loading} /> : (show_more ? (
+                    <ShowMore
+                    categoryId={uid}
+                    shopby={show_more}
+                    isLoading={loading} />
+                ) : shopby && shopby != "gauge" ? (
                     <ShopBy
                     categoryId={uid}
                     shopby={shopby}

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

@@ -163,12 +163,6 @@ const CategoryContent = props => {
         <FilterModal filters={filters} />
     ) : null;
 
-    // console.log('filters')
-    // console.log(filters)
-
-    // console.log('shouldShowFilterButtons')
-    // console.log(shouldShowFilterButtons)
-
     const sidebar = shouldShowFilterButtons ? (
         <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
     ) : shouldShowFilterShimmer ? (
@@ -289,7 +283,7 @@ const CategoryContent = props => {
 
     const currentFilter = activeFilters && activeFilters.length ? activeFilters[activeFilters.length - 1].label : '';
 
-    let title = activeFilters && activeFilters.length ? (
+    let title = category && !category.children.length && activeFilters && activeFilters.length ? (
         activeFilters.length > 1 ? 
             activeFilters[activeFilters.length - 1].label
          : currentFilter

package/src/talons/ShopBy/useShopBy.js

@@ -150,13 +150,11 @@ export const useShopBy = props => {
         }
         
         const rawData = queryResponse?.products?.aggregations;
-        if (!rawData) {
+        if (!rawData.length) {
             return null;
         }
 
         let options = rawData.find(item => item.attribute_code === shopby).options;
-        
-        // let options = rawData[0].options;
 
         const mappingData = options.reduce((acc, item) => {
             let firstLetter = item.label.charAt(0).toUpperCase();
@@ -182,7 +180,7 @@ export const useShopBy = props => {
         }
         
         const rawData = queryResponse?.products?.aggregations;
-        if (!rawData) {
+        if (!rawData.length) {
             return null;
         }
 

package/src/talons/ShopBy copy/useShopBy.js

@@ -0,0 +1,280 @@
+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 '@riosst100/pwa-marketplace/src/talons/ShowMore/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, getProductFiltersByCategoryQuery, getMasterAttributesQuery } = operations;
+    const { pathname, search } = useLocation();
+    // const [
+    //     ,
+    //     {
+    //         actions: { setPageLoading }
+    //     }
+    // ] = useAppContext();
+
+    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',
+        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 filters = getFiltersFromSearch(search);
+
+    const { newFilters, activeFilters } = useMemo(() => {
+        const resultFilters = {};
+        const resultActiveFilters = [];
+
+        if (filterTypeMap.size) {
+            filters.forEach((values, key) => {
+                resultFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+
+                if (key === "sc_baseball_release") {
+                    for (let item of values) {
+                        if (item) {
+                            const data = search.split('&');
+                            data.pop();
+                            resultActiveFilters.push({
+                                label: item.split(',')[0],
+                                path: data
+                            });
+                        }
+                    }
+                }
+            });
+        }
+
+        return { newFilters: resultFilters, activeFilters: resultActiveFilters };
+    }, [filterTypeMap]);
+
+    // 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.
+        // newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                filters: newFilters
+            }
+        });
+    }, [
+        runQuery, filterTypeMap, search
+    ]);
+
+    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?.products?.aggregations;
+        if (!rawData.length) {
+            return null;
+        }
+
+        let options = rawData.find(item => item.attribute_code === shopby).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?.products?.aggregations;
+        if (!rawData.length) {
+            return null;
+        }
+
+        let options = rawData.find(item => item.attribute_code === shopby).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;
+            });
+        }
+
+        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]);
+
+    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?.products?.aggregations && queryResponse?.products.aggregations.length ? queryResponse.products.aggregations.find(item => item.attribute_code === shopby) : null;
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const pageInfo = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+
+        return queryResponse.products.aggregations.find(item => item.attribute_code === shopby);
+    }, [queryResponse, shopby]);
+
+    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,
+        pageInfo
+    //     productType
+    };
+};

package/src/talons/ShowMore/showMore.gql.js

@@ -0,0 +1,98 @@
+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 getShowMoreData($search: String, $activeFilter: String, $categoryUrlKey: String!, $attributeCode: String, $filters: ProductAttributeFilterInput!) {
+        showMoreData(search: $search, activeFilter: $activeFilter, categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode, filters: $filters) {
+            page_info {
+                title
+                filter_group
+            }
+            data {
+                label
+                count
+                attribute_code
+                options {
+                    products_count
+                    label
+                    value
+                }
+                position
+            }
+        }
+    }
+`;
+
+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 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
+};