@riosst100/pwa-marketplace 1.9.6 → 1.9.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {
@@ -12,10 +12,10 @@
     "axios": "^1.6.5",
     "iconsax-react": "^0.0.8",
     "react-countdown": "^2.3.5",
-    "react-phone-number-input": "^3.3.9",
-    "react-slick": "^0.30.2",
     "react-datepicker": "4.10.0",
-    "react-dropzone": "^14.2.3"
+    "react-dropzone": "^14.2.3",
+    "react-phone-number-input": "^3.3.9",
+    "react-slick": "^0.30.2"
   },
   "license": "MIT",
   "private": false

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

@@ -31,7 +31,7 @@ const CurrentTopFilter = props => {
         }
     );
 
-    return group && group != "toys_character" && group != "toys_product_series" && group != "toys_scale" && group != "toys_product_line" && group != "filterby" && group != "trains" && group != "toys_franchise" && group != "toys_brands" && group != "trains_gauge" && group != "category" && group != "shopby" ? (
+    return group && group != "toys_character" && group != "toys_product_series" && group != "toys_scale" && group != "toys_product_line" && group != "filterby" && group != "trains" && group != "toys_franchise" && group != "toys_brands" && group != "category" && group != "shopby" ? (
         <span className={classes.item} data-cy="CurrentTopFilter-root">
             <Trigger
                 action={handleClick}

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

@@ -28,6 +28,22 @@ const FilterTopItem = props => {
         [group, item, onApply, removeGroup, toggleItem]
     );
 
+    let filterSearchArr = search ? search.split('&') : [];
+    let categoryIdFilters = [];
+    let shopbyFilters = [];
+    if (filterSearchArr) {
+        categoryIdFilters = filterSearchArr.filter(function(data) {
+            return data && data.includes('cat_id');
+        })
+        shopbyFilters = filterSearchArr.filter(function(data) {
+            return data && data.includes('shopby');
+        })
+    }
+
+    // console.log(filterSearchArr)
+
+    // const catId = null;
+
     const element = group == "filterby" ? (
         filterBy == value ? (
             <span className={classes.item}><b>{title}</b></span>
@@ -36,12 +52,19 @@ const FilterTopItem = props => {
         )
     ) : group == "category" ? (
         <Link className={classes.item} to={'/'+value}>{title}</Link>
-    ) : value == "all_brands" ? (
-        <Link className={classes.item} to={search ? search + '&shopby=' + 'all_brands' : '?shopby=' + 'all_brands'}>{title}</Link>
+    ) : value == "shopby_all" ? (
+        <Link className={classes.item} to={search ? search + '&shopby=' + group : '?shopby=' + group}>{title}</Link>
     ) : group == "shopby" || group == "shopby_with_all" ? (
         <Link className={classes.item} to={search ? search + '&shopby=' + value : '?shopby=' + value}>{title}</Link>
+    ) : group == "cat_id" ? (
+        value == "all" && !categoryIdFilters.length || categoryIdFilters.length && categoryIdFilters[0].includes('cat_id='+value) ? (
+            <span className={classes.item}><b>{title}</b></span>
+        ) : (
+            value == "all" ? <Link className={classes.item} to={'#'}>{title}</Link> : 
+            <Link className={classes.item} to={'?cat_id=' + value + (shopbyFilters.length ? '&' + shopbyFilters[0] : '')}>{title}</Link>
+        )
     ) : (
-        activeFilters.includes(value) ? (
+        activeFilters && activeFilters.includes(value) ? (
             <span className={classes.item}><b>{title}</b></span>
         ) : (
             <span className={classes.item} onClick={() =>handleOnchange(value)}>{title}</span>

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

@@ -87,7 +87,7 @@ const FilterTopItemGroup = props => {
         <div className={classes.root}>
             {radioItems}
             {filterElements && filterElements.length > 10 ? <span className={classes.item}><b>More Item</b></span> : ''}
-            {filterElements && filterElements.length ? filterElements : group && group != "toys_character" && group != "toys_product_series" && group != "toys_scale" && group != "toys_product_line" && group != "trains" && group != "trains_gauge" && group != "toys_franchise" && group != "toys_brands" && group != "category" && group != "filterby" && group != "shopby" ? (<span className={classes.item}><b>All</b></span>) : ''}
+            {filterElements && filterElements.length ? filterElements : group && group != "toys_character" && group != "toys_product_series" && group != "toys_scale" && group != "toys_product_line" && group != "trains" && group != "toys_franchise" && group != "toys_brands" && group != "category" && group != "filterby" && group != "shopby" && group != "cat_id" ? (<span className={classes.item}><b>All</b></span>) : ''}
         </div>
     );
 };

package/src/components/FilterTop/filterTop.js

@@ -114,8 +114,8 @@ const FilterTop = props => {
                 const blockState = filterState.get(group);
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
+                
                 if (customFilters && customFilters.length && customFilters.includes(group)) {
-
                     return (
                         <FilterTopBlock
                             key={group}

package/src/components/ShopBy/shopBy.js

@@ -31,6 +31,7 @@ import { useLocation } from 'react-router-dom';
 import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 import CustomSubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/customSubCategory';
 import AlphaFilter from '@riosst100/pwa-marketplace/src/components/AlphaFilter';
+import ShopByFilters from '@riosst100/pwa-marketplace/src/components/ShopByFilters';
 
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
@@ -133,6 +134,9 @@ const ShopBy = props => {
     filterSearchArr = filterSearchArr.filter(function(data) {
         return !data.includes('shopby');
     })
+    filterSearchArr = filterSearchArr.filter(function(data) {
+        return !data.includes('trains_roadname_country');
+    })
     let filterSearch = filterSearchArr.join('&')
 
     if (!filterSearch.includes('?')) {
@@ -335,10 +339,14 @@ const ShopBy = props => {
         setSearchQuery('')
     }
 
+    // console.log(category)
+
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
             <Breadcrumbs categoryId={categoryId} customPage={title} currentFilter={activeFilters} />
+            {category.url_path.includes('model-railway') && <FilterTop shopby={shopby} filters={[]} category={category} children={[]} allowedFilters={category ? category.allowed_filters : []} />}
+            {/* <ShopByFilters handleActiveFilter={handleActiveFilter} activeFilter={activeFilter} category={category} /> */}
             {availableFilterOption.length ? 
                 <ul className={classes.nav}>
                     {availableFilterOption.map((filter, index) => (

package/src/components/ShopByFilters/index.js

@@ -0,0 +1 @@
+export { default } from './shopByFilters';

package/src/components/ShopByFilters/shopByFilters.js

@@ -0,0 +1,74 @@
+import React from 'react';
+// import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+// import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+// import { useShopByFilters } from '@riosst100/pwa-marketplace/src/talons/ShopByFilters/useShopByFilters';
+// import { Link } from 'react-router-dom';
+// import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './shopByFilters.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+// import cn from 'classnames';
+// import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+// import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+// import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+// import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
+// import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+
+const ShopByFilters = props => {
+    const { activeFilter, handleActiveFilter, category } = props;
+
+    const classes = useStyle(defaultClasses);
+
+    // const talonProps = useShopByFilters({ activeFilter, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+
+    // const { error, loading, shopByBrands, categoryUrlSuffix, categoryUrlKey, productType, filteredShopByBrands, availableGroups, category } = talonProps;
+
+    // if (loading && !shopByBrands)
+    //     return <ShopByBrandsShimmer />;
+    // if (error && !shopByBrands) return <ErrorView />;
+
+    // if (!shopByBrands && !loading && !error) {
+    //     return <ShopByBrandsShimmer />;
+    // }
+
+    // url_path
+    
+    let availableShopByFilters = [];
+    
+    if (category.url_path.includes('model-railway')) {
+        availableShopByFilters = [
+            'N Scale',
+            'HO Scale',
+            'O Scale',
+            'G Scale',
+            'S Scale',
+            'Z Scale'
+        ];
+    }
+
+    return (
+        <ul className={classes.nav}>
+            {availableShopByFilters.map((label, index) => (
+            <li key={index} className={classes.nav_item}>
+                <button
+                    onClick={() => {
+                        handleActiveFilter(label)
+                    }}
+                >
+                    {activeFilter == label ? <b>{label}</b> : label}
+                </button>
+            </li>
+            ))}
+            <li className={classes.nav_item}>
+                <button
+                    onClick={() => {
+                        handleActiveFilter('')
+                    }}
+                >
+                    {!activeFilter ? <b>All</b> : 'All'}
+                </button>
+            </li>
+        </ul>
+    );
+}
+
+export default ShopByFilters;

package/src/components/ShopByFilters/shopByFilters.module.css

@@ -0,0 +1,21 @@
+.nav {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    margin: 50px 0 30px 0;
+    composes: gap-[10px] from global;
+}
+
+.nav_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}

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

@@ -88,18 +88,12 @@ const Category = props => {
                 categoryId={uid}
                 isLoading={loading} />
             ) : (
-                shopby == "all_brands" ? <ShopByBrands
-                categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
+                shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
                 categoryId={uid}
                 shopby={shopby}
                 isLoading={loading} /> : shopby && parentCategoryUrlKey == "non-sports-cards" ? <NonSportCardsSets
                 categoryId={uid}
                 shopby={shopby}
-                isLoading={loading} /> : shopby == "trains_brands" || shopby == "trains_roadname" ? <TrainsSets
-                categoryId={uid}
-                shopby={shopby}
                 isLoading={loading} /> : shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
                 categoryId={uid}
                 shopby={shopby}

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

@@ -266,7 +266,7 @@ const CategoryContent = props => {
                 if (label == "Singles") {
                     isSingles = true;
                 }
-                if (key == "toys_product_line" && urlKey == "brands" || key == "toys_product_line" && urlKey == "franchise" || key == "toys_franchise" && urlKey == "brands" || key == "toys_franchise" && urlKey == "franchise" || key == "toys_brands" && urlKey == "franchise" || key == "toys_brands" && urlKey == "brands" || virtualCategoryFilters.includes(key)) {
+                if (key == "toys_product_line" && urlKey == "brands" || key == "toys_product_line" && urlKey == "franchise" || key == "toys_franchise" && urlKey == "brands" || key == "toys_franchise" && urlKey == "franchise" || key == "toys_brands" && urlKey == "franchise" || key == "toys_brands" && urlKey == "brands" || virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
                     activeFilters.push(
                         {
                             'label': label,

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

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

package/src/talons/FilterTop/useFilterTop.js

@@ -79,7 +79,8 @@ export const useFilterTop = props => {
                 filters: newFilters,
                 category: category?.url_path,
                 shopby: shopby,
-                filterBy: filterBy
+                filterBy: filterBy,
+                search: search
             }
         });
     }, [

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($activeFilter: String, $categoryUrlKey: String!, $attributeCode: String, $filters: ProductAttributeFilterInput!) {
-        shopByData(activeFilter: $activeFilter, categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode, filters: $filters) {
+    query getShopByData($search: String, $activeFilter: String, $categoryUrlKey: String!, $attributeCode: String, $filters: ProductAttributeFilterInput!) {
+        shopByData(search: $search, activeFilter: $activeFilter, categoryUrlKey: $categoryUrlKey, attributeCode: $attributeCode, filters: $filters) {
             label
             count
             attribute_code

package/src/talons/ShopBy/useShopBy.js

@@ -93,7 +93,8 @@ export const useShopBy = props => {
                 filters: newFilters,
                 categoryUrlKey: categoryUrlKey,
                 attributeCode: shopby,
-                activeFilter: activeFilter
+                activeFilter: activeFilter,
+                search: search
             }
         });
     }, [
@@ -103,7 +104,7 @@ export const useShopBy = props => {
         // categoryUrlKey,
         // filters
         // filterTypeMap,
-        // search
+        search
     ]);
 
     // console.log(activeFilters)