@riosst100/pwa-marketplace 1.7.4 → 1.7.6

package/package.json

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

package/src/components/CustomSubCategory/subCategory.js

@@ -20,16 +20,18 @@ const SubCategory = props => {
     
     const subCategory = [];
     
-    normalizedData && normalizedData.map(({ text, path }, index) => {
-        subCategory.push(
-            <Link
-                key={index}
-                to={path}
-            >
-                <li className={classes.item}>{text}</li>
-            </Link>
-        )
-    });
+    if (normalizedData && normalizedData.length) {
+        normalizedData.map(({ text, path }, index) => {
+            subCategory.push(
+                <Link
+                    key={index}
+                    to={path}
+                >
+                    <li className={classes.item}>{text}</li>
+                </Link>
+            )
+        });
+    }
 
     return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
 

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

@@ -31,7 +31,7 @@ const CurrentTopFilter = props => {
         }
     );
 
-    return (
+    return group != "shopby" ? (
         <span className={classes.item} data-cy="CurrentTopFilter-root">
             <Trigger
                 action={handleClick}
@@ -41,7 +41,7 @@ const CurrentTopFilter = props => {
                 All
             </Trigger>
         </span>
-    );
+    ) : '';
 };
 
 export default CurrentTopFilter;

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

@@ -12,7 +12,8 @@ const FilterBlockList = props => {
         items,
         onApply,
         filterNames,
-        originalFilterState
+        originalFilterState,
+        search
     } = props;
 
     const itemElements = useMemo(() => {
@@ -27,6 +28,7 @@ const FilterBlockList = props => {
                 items={items}
                 onApply={onApply}
                 labels={labels}
+                search={search}
                 filterNames={filterNames}
                 key={key}
             />

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

@@ -1,9 +1,10 @@
 import React, { useCallback } from 'react';
 import defaultClasses from './filterTopItem.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
+import { Link } from 'react-router-dom';
 
 const FilterTopItem = props => {
-    const { filterApi, group, item, onApply, labels, activeFilters } = props;
+    const { filterApi, group, item, onApply, labels, activeFilters, search } = props;
     const { removeGroup, toggleItem } = filterApi;
     const { title, value } = item;
 
@@ -26,10 +27,14 @@ const FilterTopItem = props => {
         [group, item, onApply, removeGroup, toggleItem]
     );
 
-    const element = activeFilters.includes(value) ? (
-        <span className={classes.item}><b>{title}</b></span>
+    const element = group == "shopby" ? (
+        <Link className={classes.item} to={search ? search + '&shopby=' + value : '?shopby=' + value}>{title}</Link>
     ) : (
-        <span className={classes.item} onClick={() =>handleOnchange(value)}>{title}</span>
+        activeFilters.includes(value) ? (
+            <span className={classes.item}><b>{title}</b></span>
+        ) : (
+            <span className={classes.item} onClick={() =>handleOnchange(value)}>{title}</span>
+        )
     )
 
     labels.set(element, label);

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

@@ -7,7 +7,7 @@ import defaultClasses from './filterTopItemGroup.module.css';
 import CurrentTopFilter from '@riosst100/pwa-marketplace/src/components/FilterTop/CurrentTopFilters/currentTopFilter';
 
 const FilterTopItemGroup = props => {
-    const { filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState } = props;
+    const { filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState, search } = props;
 
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -50,6 +50,7 @@ const FilterTopItemGroup = props => {
                     filterState={filterState}
                     group={group}
                     activeFilters={activeFilters}
+                    search={search}
                     item={item}
                     onApply={onApply}
                     labels={labels}
@@ -83,7 +84,7 @@ const FilterTopItemGroup = props => {
     return (
         <div className={classes.root}>
             {radioItems}
-            {filterElements && filterElements.length ? filterElements : <span className={classes.item}><b>All</b></span>}
+            {filterElements && filterElements.length ? filterElements : group != "shopby" ? (<span className={classes.item}><b>All</b></span>) : ''}
         </div>
     );
 };

package/src/components/FilterTop/filterTop.js

@@ -1,8 +1,8 @@
-import React, { useMemo, useCallback, useRef } from 'react';
+import React, { useMemo, useCallback, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterTop } from '@riosst100/pwa-marketplace/src/talons/FilterTop';
-
+import { useLocation } from 'react-router-dom';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
 import FilterTopBlock from './filterTopBlock';
@@ -10,6 +10,8 @@ import defaultClasses from './filterTop.module.css';
 import { Filter } from 'iconsax-react';
 import cn from 'classnames';
 import { useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 
 const SCROLL_OFFSET = 150;
@@ -33,6 +35,21 @@ const FilterTop = props => {
         customFilters
     } = talonProps;
 
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const [activeSportCardsSetsFilter, setActiveSportCardsSetsFilter] = useState('all');
+    const [activeBaseSetFilter, setActiveBaseSetFilter] = useState('all');
+
+    const { search } = useLocation();
+
+    // const filtersSearch = getFiltersFromSearch(search);
+
+    // console.log(search)
+
+    // filters.forEach((values, key) => {
+    //     newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+    // });
+
     const filterRef = useRef();
 
     const handleApplyFilter = useCallback(
@@ -84,6 +101,10 @@ const FilterTop = props => {
     // });
     // const allowedFiltersArr = ['card_rarity','card_print_version','card_set', 'card_product_type'];
 
+    // console.log(customFilters)
+
+    // console.log(filterItems)
+
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {
@@ -101,6 +122,7 @@ const FilterTop = props => {
                             originalFilterState={filterState}
                             filterFrontendInput={frontendInput}
                             group={group}
+                            search={search}
                             items={items}
                             name={groupName}
                             onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
@@ -122,7 +144,27 @@ const FilterTop = props => {
     );
 
     return (
-        <div>{filtersList}</div>
+        <div>
+            {/* <div className={classes.root}>
+            {sportCardsSetsFilter.map(({label, value}, index) => 
+                activeSportCardsSetsFilter == value ? <span className={classes.item}><b>{label}</b></span> : <span onClick={() => setActiveSportCardsSetsFilter(value)} className={classes.item}>{label}</span>
+            )}
+            </div>
+            <div className={classes.root}>
+            {activeSportCardsSetsFilter == "base_set" && baseSetFilter.map(({label, value}, index) => 
+                activeBaseSetFilter == value ? <span className={classes.item}><b>{label}</b></span> : <span onClick={() => setActiveBaseSetFilter(value)} className={classes.item}>{label}</span>
+            )}
+            </div> */}
+            {filtersList}
+            {/* {activeSportCardsSetsFilter == "inserts_parallel" && (
+                <>
+                    <div className={classes.root}>
+                        <Link to={'?shopby=inserts'} className={classes.item}>Inserts</Link>
+                        <Link to={'?shopby=parallel'} className={classes.item}>Parallel</Link>
+                    </div>
+                </>
+            )} */}
+        </div>
     );
 };
 

package/src/components/FilterTop/filterTop.module.css

@@ -2,7 +2,7 @@
     composes: flex from global;
     composes: flex-wrap from global;
     composes: mt-3 from global;
-    composes: gap-[15px] from global;
+    composes: gap-[10px] from global;
     margin-bottom: 10px;
     justify-content: center;
 }

package/src/components/FilterTop/filterTopBlock.js

@@ -24,7 +24,8 @@ const FilterTopBlock = props => {
         onApply,
         filterNames,
         initialOpen,
-        originalFilterState
+        originalFilterState,
+        search
     } = props;
 
     const { formatMessage } = useIntl();
@@ -42,6 +43,7 @@ const FilterTopBlock = props => {
             name={name}
             filterFrontendInput={filterFrontendInput}
             group={group}
+            search={search}
             items={items}
             filterNames={filterNames}
             onApply={onApply}

package/src/components/ShopBy/shopBy.js

@@ -107,7 +107,7 @@ const ShopBy = props => {
 
     const talonProps = useShopBy({ searchQuery, setActive, currentSort, categoryId, shopby });
 
-    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category } = talonProps;
+    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, activeFilters } = talonProps;
 
     if (loading && !dataResult)
         return <ShopByShimmer />;
@@ -190,10 +190,12 @@ const ShopBy = props => {
         }
     ];
 
+    console.log(activeFilters)
+
     return (
         <Fragment>
             <StoreTitle>{attributeData ? 'By ' + attributeData.label : 'Shop By'}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={'By ' + attributeData.label} />
+            <Breadcrumbs categoryId={categoryId} customPage={'By ' + attributeData.label} currentFilter={activeFilters} />
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {attributeData ? 'By ' + attributeData.label : 'Shop By'}
             </h1>

package/src/components/SubCategory/subCategory.js

@@ -20,7 +20,7 @@ const SubCategory = props => {
     
     const subCategory = [];
     
-    normalizedData && normalizedData.map(({ text, path }, index) => {
+    normalizedData && normalizedData.length && normalizedData.map(({ text, path }, index) => {
         if (index < maxSubCategory) {
             subCategory.push(
                 <Link

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -70,23 +70,30 @@ const Breadcrumbs = props => {
         );
     }
 
+    // console.log(currentFilter)
+
     const filterBreadcrumbsElement = [];
     
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
         currentProduct ? (
             filterBreadcrumbsElement.push(
+                <>
+                <span className={classes.divider}>{DELIMITER}</span>
                 <Link
                     key={index}
                     className={classes.link}
-                    to={resourceUrl(currentCategoryPath)}
+                    to={filter.path}
                     onClick={handleClick}
                 >
                     {filter.label}
                 </Link>
+                </>
             )
         ) : (
             customPage ? (
                 filterBreadcrumbsElement.push(
+                    <>
+                    <span className={classes.divider}>{DELIMITER}</span>
                     <Link
                         key={index}
                         className={classes.link}
@@ -95,6 +102,7 @@ const Breadcrumbs = props => {
                     >
                         {filter.label}
                     </Link>
+                    </>
                 )
             ) : filterBreadcrumbsElement.push(
                 <span key={index}>

package/src/talons/FilterTop/useFilterTop.js

@@ -173,33 +173,7 @@ export const useFilterTop = props => {
         const frontendInput = new Map();
         const itemsByGroup = new Map();
         const customFiltersMap = [];
-
-        const sortedFilters = sortFiltersArray([...filters]);
-
-        for (const filter of sortedFilters) {
-            const { options, label: name, attribute_code: group } = filter;
-
-            // If this aggregation is not a possible filter, just back out.
-            if (possibleFilters.has(group)) {
-                const items = [];
-
-                // add filter name
-                names.set(group, name);
-
-                // add filter key permutations
-                keys.add(`${group}[filter]`);
-
-                // Add frontend input type
-                frontendInput.set(group, null);
-                // add items
-                for (const { label, value, path } of options) {
-                    items.push({ title: stripHtml(label), value, path });
-                }
-
-                itemsByGroup.set(group, items);
-            }
-        }
-
+        
         if (customFiltersData) {
             customFiltersData.map(({ attribute_code, options }, index) => {
 

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

@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_SHOP_BY_DATA_QUERY = gql`
-    query getShopByData($categoryUrlKey: String!, $attributeCode: String) {
-        shopByData(categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode) {
+    query getShopByData($categoryUrlKey: String!, $attributeCode: String, $filters: ProductAttributeFilterInput!) {
+        shopByData(categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode, filters: $filters) {
             label
             count
             attribute_code
@@ -40,8 +40,22 @@ export const GET_CATEGORY_CONTENT = gql`
     }
 `;
 
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
     getShopByDataQuery: GET_SHOP_BY_DATA_QUERY,
-    getCategoryContentQuery: GET_CATEGORY_CONTENT
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
 };

package/src/talons/ShopBy/useShopBy.js

@@ -1,10 +1,11 @@
-import { useQuery } from '@apollo/client';
+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';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 export const useShopBy = props => {
 
@@ -13,8 +14,8 @@ export const useShopBy = props => {
     const { value: sortby } = currentSort
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, null);
-    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery } = operations;
-    const { pathname } = useLocation();
+    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
     // const [
     //     ,
     //     {
@@ -22,6 +23,11 @@ export const useShopBy = props => {
     //     }
     // ] = 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'
@@ -33,26 +39,97 @@ export const useShopBy = props => {
     
     const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
 
-    const { error, loading, data } = useQuery(getShopByDataQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        skip: !storeConfigData,
-        variables: {
-            categoryUrlKey: categoryUrlKey,
-            attributeCode: shopby
+    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);
+
+    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(() => {
+
+        
+
+        // 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
+            }
+        });
+    }, [
+        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 = !!data && loading;
+    // const isBackgroundLoading = !!queryResponse && loading;
 
     const originalDataResult = useMemo(() => {
-        if (!data) {
+        if (!queryResponse) {
             return null;
         }
         
-        const rawData = data.shopByData;
+        const rawData = queryResponse?.data?.shopByData;
         if (!rawData) {
             return null;
         }
@@ -72,14 +149,14 @@ export const useShopBy = props => {
         const sortbyData = [];
 
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
-    }, [data, sortby, searchQuery]);
+    }, [queryResponse, sortby, searchQuery]);
 
     const dataResult = useMemo(() => {
-        if (!data) {
+        if (!queryResponse) {
             return null;
         }
         
-        const rawData = data.shopByData;
+        const rawData = queryResponse?.data?.shopByData;
         if (!rawData) {
             return null;
         }
@@ -106,14 +183,14 @@ export const useShopBy = props => {
         const sortbyData = [];
 
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
-    }, [data, sortby, searchQuery]);
+    }, [queryResponse, sortby, searchQuery]);
 
     const availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
 
     const filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
 
 
-    const attributeData = data ? data.shopByData[0] : null
+    const attributeData = queryResponse?.data?.shopByData && queryResponse?.data?.shopByData.length ? queryResponse.data.shopByData[0] : null
 
     const { data: categoryData, loading: categoryLoading } = useQuery(
         getCategoryContentQuery,
@@ -133,8 +210,8 @@ export const useShopBy = props => {
             : null;
 
     return {
-        error,
-        loading,
+        // error,
+        // loading,
         dataResult,
     //     collectibleGameSets,
         filteredAvailableGroups,
@@ -143,7 +220,8 @@ export const useShopBy = props => {
         availableGroups,
         attributeData,
         alpha,
-        category
+        category,
+        activeFilters
     //     productType
     };
 };

package/src/talons/SubCategory/useSubCategory.js

@@ -36,7 +36,7 @@ export const useSubCategory = props => {
                 children.length &&
                 children
                     .map(category => ({
-                        text: category.name,
+                        text: category?.name || '',
                         path: getPath(
                             category.url_path,
                             categoryUrlSuffix