@riosst100/pwa-marketplace 1.5.9 → 1.6.0

package/package.json

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

@@ -43,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/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,
@@ -174,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