@riosst100/pwa-marketplace 3.0.9 → 3.1.1

package/package.json

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

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

@@ -4,7 +4,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import { Link } from 'react-router-dom';
 
 const FilterTopItem = props => {
-    const { setFilterBy, filterBy, filterApi, group, item, onApply, labels, activeFilters, search } = props;
+    const { selectedOption, setFilterBy, filterBy, filterApi, group, item, onApply, labels, activeFilters, search } = props;
     const { removeGroup, toggleItem, clear } = filterApi;
     const { title, value } = item;
 
@@ -76,6 +76,7 @@ const FilterTopItem = props => {
 
     // console.log('--filterSearch--')
     // console.log(filterSearch)
+    // console.log('pathname',pathname)
 
     const element = group == "filterby" ? (
         filterBy == value ? (
@@ -84,7 +85,7 @@ const FilterTopItem = props => {
             <span className={classes.item} onClick={() => setFilterBy(value)}>{title}</span>
         )
     ) : group == "category" ? (
-        <Link className={classes.item} to={'/'+value}>{title}</Link>
+        selectedOption == value ? <span className={classes.item}><b>{title}</b></span> : <Link className={classes.item} to={'/'+value}>{title}</Link>
     ) : value == "shopby_all" ? (
         <Link className={classes.item} to={search ? filterSearch + '&show_more=' + group : '?show_more=' + group}>{title}</Link>
     ) : group == "shopby" || group == "shopby_with_all" ? (

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

@@ -5,6 +5,7 @@ import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInforme
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './filterTopItemGroup.module.css';
 import CurrentTopFilter from '@riosst100/pwa-marketplace/src/components/FilterTop/CurrentTopFilters/currentTopFilter';
+import { useLocation } from 'react-router-dom';
 
 const FilterTopItemGroup = props => {
     const { customFiltersData, setFilterBy, filterBy, filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState, search } = props;
@@ -15,6 +16,9 @@ const FilterTopItemGroup = props => {
     const { removeItem } = filterApi;
     const activeFilters = [];
 
+    const location = useLocation();
+    const { pathname } = location
+
     // Current Filters
     const filterElements = useMemo(() => {
         const elements = [];
@@ -41,11 +45,19 @@ const FilterTopItemGroup = props => {
     }, [originalFilterState, removeItem, onApply]);
 
     const radioItems = useMemo(() => {
+        let selected = items.find(item => pathname.includes(item.value));
+        if (!selected) {
+            selected = items[0];
+        }
+
+        const selectedOption = selected ? selected.value : null;
+
         return items.map(item => {
             const code = `item-${group}-${item.value}`;
             return (
                 <FilterTopItem
                     key={code}
+                    selectedOption={selectedOption}
                     setFilterBy={setFilterBy}
                     filterBy={filterBy}
                     filterApi={filterApi}
@@ -59,7 +71,7 @@ const FilterTopItemGroup = props => {
                 />
             );
         });
-    }, [filterApi, filterState, group, items, labels, onApply]);
+    }, [pathname, filterApi, filterState, group, items, labels, onApply]);
 
     const fieldValue = useMemo(() => {
         if (filterState) {
@@ -87,7 +99,9 @@ const FilterTopItemGroup = props => {
                     
 
     const customFilterData = useMemo(() => {
-        const filtered = customFiltersData.filters.filter(item => item.attribute_code === group);
+        const filterNull = customFiltersData.filters.filter(item => item !== null);
+        // console.log('customFiltersData',customFiltersData)
+        const filtered = filterNull.filter(item => item.attribute_code === group);
         // console.log('filtered ' + group,filtered);
         if (filtered) {
             // console.log('filtered ' + group,filtered);

package/src/components/SellerMegaMenu/shopByColumn.module.css

@@ -0,0 +1,27 @@
+.submenuColumn {
+    /* composes: max-w-[235px] from global; */
+    composes: p-5 from global;
+}
+
+.heading {
+    /* composes: font-medium from global; */
+    font-weight: 600;
+}
+
+.link {
+    composes: whitespace-nowrap from global;
+    composes: focus_underline from global;
+    composes: hover_underline from global;
+}
+
+.linkActive {
+    composes: underline from global;
+}
+
+.submenuChild {
+    composes: mt-0 from global;
+}
+
+.submenuChildItem {
+    composes: mb-3 from global;
+}

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

@@ -314,7 +314,7 @@ const CategoryContent = props => {
                     <>
                         {/* {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />} */}
                         {!currentFilter && <CustomSubCategory categoryName={category ? category.name : null} customSubCategory={category ? category.custom_subcategory : null} />}
-                        {shopby != "gauge" && category?.name != "Collectible Card Games" ? <SubCategory parent={parent} children={children} /> : ''}
+                        {/* {shopby != "gauge" && category?.name != "Collectible Card Games" ? <SubCategory parent={parent} children={children} /> : ''} */}
                     </>
                 {/* ) : ( */}
                     <>

package/src/talons/FilterTop/filterTop.gql.js

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_CUSTOM_FILTERS = gql`
-    query GetCustomFilters($search: String, $filterBy: String, $shopby: String, $category: String, $filters: ProductAttributeFilterInput) {
-        customSubFilters(search: $search, filterBy: $filterBy, shopby: $shopby, category: $category, filters: $filters) {
+    query GetCustomFilters($search: String, $filterBy: String, $shopby: String, $categoryId: String, $category: String, $filters: ProductAttributeFilterInput) {
+        customSubFilters(search: $search, filterBy: $filterBy, shopby: $shopby, categoryId: $categoryId, category: $category, filters: $filters) {
             filter_id
             filters {
                 label

package/src/talons/FilterTop/useFilterTop.js

@@ -78,6 +78,7 @@ export const useFilterTop = props => {
             variables: {
                 filters: newFilters,
                 category: category?.url_path,
+                categoryId: category?.uid,
                 shopby: shopby,
                 filterBy: filterBy,
                 search: search
@@ -183,27 +184,36 @@ export const useFilterTop = props => {
         const frontendInput = new Map();
         const itemsByGroup = new Map();
         const customFiltersMap = [];
+
+        // console.log('customFiltersData',customFiltersData)
         
         if (customFiltersData && customFiltersData.filters) {
-            customFiltersData.filters.map(({ attribute_code, options }, index) => {
+            customFiltersData.filters.map((data, index) => {
 
-                customFiltersMap.push(attribute_code)
-                
+                if (data) {
+                    // console.log(data)
+                    const { attribute_code, options } = data;
 
-                const items = [];
+                    // console.log(attribute_code)
 
-                names.set(attribute_code, '');
-                frontendInput.set(attribute_code, null);
+                    customFiltersMap.push(attribute_code)
+                    
 
-                // add filter key permutations
-                keys.add(`${attribute_code}[filter]`);
+                    const items = [];
 
-                // add items
-                for (const { label, value, path } of options) {
-                    items.push({ title: stripHtml(label), value, path });
-                }
+                    names.set(attribute_code, '');
+                    frontendInput.set(attribute_code, null);
+
+                    // add filter key permutations
+                    keys.add(`${attribute_code}[filter]`);
 
-                itemsByGroup.set(attribute_code, items);
+                    // add items
+                    for (const { label, value, path } of options) {
+                        items.push({ title: stripHtml(label), value, path });
+                    }
+
+                    itemsByGroup.set(attribute_code, items);
+                }
             })
         }