@riosst100/pwa-marketplace 1.7.4 → 1.7.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "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/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/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/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