@riosst100/pwa-marketplace 1.5.8 → 1.6.0

package/package.json

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -100,11 +100,18 @@ const CollectibleGameSets = props => {
         }
     ];
 
+    let title = "All Sets";
+    if (productType == "expansion-sets") {
+        title = "Expansion Sets";
+    } else if (productType == "artist") {
+        title = "Artist";
+    }
+
     return (
         <Fragment>
-            <StoreTitle>{"Magic: The Gathering" + " | " + (productType == "expansion-sets" ? "Expansion Sets" : "All Sets")}</StoreTitle>
+            <StoreTitle>{title}</StoreTitle>
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                {productType == "expansion-sets" ? "Expansion Sets" : "All Sets"}
+                {title}
             </h1>
             <div className='border border-gray-100 px-6'>
                 {productType != "expansion-sets" ? (

package/src/components/FilterTop/CustomFilters/customFilter.js

@@ -26,9 +26,6 @@ const CustomFilter = props => {
         }
     );
 
-    console.log(group)
-    console.log(item)
-
     const normalizedData = [
         {
             'label': 'Sealed Products',
@@ -46,7 +43,9 @@ const CustomFilter = props => {
 
     const subCategory = [];
 
-    if (group == "card_set") {
+    const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+
+    if (customAttributeLandingPage.includes(group)) {
         normalizedData && normalizedData.map(({ label, path }, index) => {
             subCategory.push(
                 <Link

package/src/components/SubCategory/subCategory.js

@@ -1,14 +1,12 @@
 import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useSubCategory';
-import React, { useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import defaultClasses from './subCategory.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
-import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
 
 const SubCategory = props => {
-    const { children } = props;
+    const { children, parent } = props;
 
     const talonProps = useSubCategory({ children });
 
@@ -17,32 +15,35 @@ const SubCategory = props => {
     const {
         normalizedData
     } = talonProps;
+
+    const maxSubCategory = 5;
     
     const subCategory = [];
     
     normalizedData && normalizedData.map(({ text, path }, index) => {
+        if (index < maxSubCategory) {
+            subCategory.push(
+                <Link
+                    key={index}
+                    to={resourceUrl(path)}
+                >
+                    <li className={classes.item}>{text}</li>
+                </Link>
+            )
+        }
+    });
+
+    if (normalizedData.length > maxSubCategory) {
         subCategory.push(
             <Link
-                key={index}
-                to={resourceUrl(path)}
+                to={resourceUrl('/')}
             >
-                <li className={classes.item}>{text}</li>
+                <li className={classes.item}>{"Other " + parent[0].name}</li>
             </Link>
         )
-    });
+    }
 
     return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
-
-    // const [activeTab, setActiveTab] = useState('singles')
-
-    return (
-        <>
-            <ul className={classes.root}>
-                <li className={classes.item}>All Sets</li>
-                <li className={classes.item}>Expansion Sets</li>
-            </ul>
-        </>
-    )
 };
 
 export default SubCategory;

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -140,8 +140,8 @@ export const useFilterSidebar = props => {
                     // Add frontend input type
                     frontendInput.set(group, null);
                     // add items
-                    for (const { label, value } of options) {
-                        items.push({ title: stripHtml(label), value });
+                    for (const { label, value, path } of options) {
+                        items.push({ title: stripHtml(label), value, path });
                     }
                 }
                 itemsByGroup.set(group, items);

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -78,8 +78,20 @@ export const GET_CATEGORY_AVAILABLE_SORT_METHODS = gql`
     }
 `;
 
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            custommarketplace_plp_filters_virtualcategory
+        }
+    }
+`;
+
+
 export default {
     getCategoryContentQuery: GET_CATEGORY_CONTENT,
     getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
-    getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS
+    getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
@@ -26,10 +26,22 @@ export const useCategoryContent = props => {
     const {
         getCategoryContentQuery,
         getProductFiltersByCategoryQuery,
-        getCategoryAvailableSortMethodsQuery
+        getCategoryAvailableSortMethodsQuery,
+        getStoreConfigQuery
     } = operations;
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
+    
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const virtualCategoryFilters = useMemo(() => {
+        if (storeConfigData) {
+            const data = storeConfigData.storeConfig.custommarketplace_plp_filters_virtualcategory;
+            return data ? data.split(',') : [];
+        }
+    }, [storeConfigData]);
 
     const [getFilters, { data: filterData }] = useLazyQuery(
         getProductFiltersByCategoryQuery,
@@ -106,7 +118,8 @@ export const useCategoryContent = props => {
             children && children.map((category, index) => {
                 filterOptions.push({
                     'label': category.name,
-                    'value': category.uid
+                    'value': category.uid,
+                    'path': category.url_path
                 });
             });
 
@@ -117,6 +130,7 @@ export const useCategoryContent = props => {
             attribute_code: filter.attribute_code,
             count: filter.count,
             label: label,
+            position: filter.position,
             options: filterOptions.length ? filterOptions : filter.options
         };
 
@@ -172,6 +186,7 @@ export const useCategoryContent = props => {
         children,
         parent,
         attributesBlock,
-        category
+        category,
+        virtualCategoryFilters
     };
 };

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

@@ -65,10 +65,12 @@ const CategoryContent = props => {
         filters,
         items,
         children,
+        parent,
         totalCount,
         totalPagesFromData,
         attributesBlock,
-        category
+        category,
+        virtualCategoryFilters
     } = talonProps;
 
     const sidebarRef = useRef(null);
@@ -186,7 +188,7 @@ const CategoryContent = props => {
                 
                 const label = filterArr[0];
                 const optionId = filterArr[1];
-                if (key == "card_set") {
+                if (virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
                     activeFilters.push(
                         {
                             'label': label
@@ -217,7 +219,7 @@ const CategoryContent = props => {
                 </div>
                 {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
                     <>
-                        <SubCategory children={children} />
+                        <SubCategory parent={parent} children={children} />
                         {!currentFilter && <CustomSubCategory customSubCategory={category ? category.custom_subcategory : null} />}
                     </>
                 {/* ) : ( */}

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -20,7 +20,9 @@ const CurrentFilters = props => {
                 const { title, value } = item || {};
                 const key = `${group}::${title}_${value}`;
 
-                if (group != "card_set") {
+                const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+
+                if (!customAttributeLandingPage.includes(group)) {
                     elements.push(
                         <li key={key} className={classes.item}>
                             <CurrentFilter

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItem.js

@@ -71,7 +71,8 @@ FilterItem.propTypes = {
     group: string.isRequired,
     item: shape({
         title: string.isRequired,
-        value: oneOfType([number, string]).isRequired
+        value: oneOfType([number, string]).isRequired,
+        path: string
     }).isRequired,
     onChange: func
 };

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -26,9 +26,11 @@ const FilterItemRadio = props => {
 
     const handleOnchange = useCallback(
         e => {
-            removeGroup({ group });
-            if (e.target.value === item.value) {
-                toggleItem({ group, item });
+            if (group != "category_uid") {
+                removeGroup({ group });
+                if (e.target.value === item.value) {
+                    toggleItem({ group, item });
+                }
             }
             if (typeof onApply === 'function') {
                 onApply(group, item);
@@ -67,7 +69,8 @@ FilterItemRadio.propTypes = {
     item: shape({
         title: string.isRequired,
         value: oneOfType([number, string]).isRequired,
-        label: string
+        label: string,
+        path: string
     }).isRequired,
     onApply: func,
     labels: instanceOf(Map).isRequired

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadioGroup.js

@@ -76,7 +76,8 @@ FilterItemRadioGroup.propTypes = {
     items: arrayOf(
         shape({
             title: string.isRequired,
-            value: oneOfType([number, string]).isRequired
+            value: oneOfType([number, string]).isRequired,
+            path: string
         })
     ).isRequired,
     onApply: func,

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -10,6 +10,8 @@ import FilterBlock from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/
 import defaultClasses from './filterSidebar.module.css';
 import { Filter } from 'iconsax-react';
 import cn from 'classnames';
+import { useHistory } from 'react-router-dom';
+
 
 const SCROLL_OFFSET = 150;
 
@@ -52,6 +54,30 @@ const FilterSidebar = props => {
         [handleApply, filterRef]
     );
 
+    const history = useHistory();
+
+    const handleCategoryApplyFilter = useCallback(
+        (...args) => {
+            // const filterElement = filterRef.current;
+            // if (
+            //     filterElement &&
+            //     typeof filterElement.getBoundingClientRect === 'function'
+            // ) {
+                // const filterTop = filterElement.getBoundingClientRect().top;
+                // const windowScrollY =
+                //     window.scrollY + filterTop - SCROLL_OFFSET;
+                // window.scrollTo(0, windowScrollY);
+            // }
+
+            history.push('/'+args[1].path+'.html');
+
+            if (args[0] != "category_uid") {
+                handleApply(...args);
+            }
+        },
+        [handleApply, filterRef]
+    );
+
     const allowedFiltersArr = [];
 
     allowedFilters.length && allowedFilters.map((val, index) => {
@@ -65,6 +91,8 @@ const FilterSidebar = props => {
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
                 if (!allowedFiltersArr.length && group != "category_uid" || allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
+                    
+
                     return (
                         <FilterBlock
                             key={group}
@@ -74,7 +102,7 @@ const FilterSidebar = props => {
                             group={group}
                             items={items}
                             name={groupName}
-                            onApply={handleApplyFilter}
+                            onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
                             initialOpen={iteration < filterCountToOpen}
                         />
                     );