@riosst100/pwa-marketplace 1.5.6 → 1.5.8

package/package.json

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -15,36 +15,28 @@ import ProductSort from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/
 import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
 
 const CollectibleGameSets = props => {
-
-    const { productType } = props;
-
     const [active, setActive] = useState('all');
 
+    const [sortBy, setSortBy] = useState({
+        sortText: 'All (A-Z)',
+        value: 'all'
+    });
+
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useCollectibleGameSets({ productType });
+    const talonProps = useCollectibleGameSets();
 
-    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType } = talonProps;
 
     if (loading && !collectibleGameSets)
         return <CollectibleGameSetsShimmer />;
     if (error && !collectibleGameSets) return <ErrorView />;
 
-    if (!collectibleGameSets) {
-        return (
-            <h1>
-                <FormattedMessage
-                    id={'sets.notDataFound'}
-                    defaultMessage={
-                        'No data found.'
-                    }
-                />
-            </h1>
-        );
+    if (!collectibleGameSets && !loading && !error) {
+        return <CollectibleGameSetsShimmer />;
     }
 
     const setsLengthArr = [];
-
     const groupByYear = [];
 
     const setRelases = collectibleGameSets.map((setRelease, index) => {
@@ -93,11 +85,6 @@ const CollectibleGameSets = props => {
 
     const alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
 
-    const [sortBy, setSortBy] = useState({
-        sortText: 'All (A-Z)',
-        value: 'all'
-    });
-
     const availableSortBy = [
         {
             'label': 'All (A-Z)',
@@ -114,14 +101,15 @@ const CollectibleGameSets = props => {
     ];
 
     return (
-        <>
+        <Fragment>
+            <StoreTitle>{"Magic: The Gathering" + " | " + (productType == "expansion-sets" ? "Expansion Sets" : "All Sets")}</StoreTitle>
             <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                {productType == "sealed-products" ? "Expansion Sets" : "All Sets"}
+                {productType == "expansion-sets" ? "Expansion Sets" : "All Sets"}
             </h1>
             <div className='border border-gray-100 px-6'>
-                <CustomSortBy sortProps={[sortBy, setSortBy]} availableSortMethods={availableSortBy} />
-                {productType != "sealed-products" ? (
+                {productType != "expansion-sets" ? (
                     <>
+                        <CustomSortBy sortProps={[sortBy, setSortBy]} availableSortMethods={availableSortBy} />
                         <section className='single_list-indexing-container relative m-auto py-10'>
                             <ul className='flex gap-2 justify-center flex-wrap'>
                                 <li>
@@ -165,8 +153,8 @@ const CollectibleGameSets = props => {
                     </div>
                 </section>
             </div>
-        </>
+        </Fragment>
     );
-};
+}
 
 export default CollectibleGameSets;

package/src/components/SubCategory/customSubCategory.js

@@ -0,0 +1,35 @@
+import { useCustomSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useCustomSubCategory';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './customSubCategory.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const CustomSubCategory = props => {
+    const { customSubCategory } = props;
+
+    const talonProps = useCustomSubCategory({ customSubCategory });
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        normalizedData
+    } = talonProps;
+    
+    const subCategory = [];
+    
+    normalizedData && normalizedData.map(({ text, path }, index) => {
+        subCategory.push(
+            <Link
+                key={index}
+                to={resourceUrl(path)}
+            >
+                <li className={classes.item}>{text}</li>
+            </Link>
+        )
+    });
+
+    return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
+};
+
+export default CustomSubCategory;

package/src/components/SubCategory/customSubCategory.module.css

@@ -0,0 +1,22 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 10px;
+}
+
+.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/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -32,7 +32,10 @@ export const GET_CATEGORY_CONTENT = gql`
                 allowed_filters {
                     code
                 }
-                custom_landing_page
+                custom_subcategory {
+                    name
+                    path
+                }
                 attributes_block {
                     label
                     code

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

@@ -31,6 +31,7 @@ import BrandSlider from '@riosst100/pwa-marketplace/src/components/BrandSlider';
 import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
 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';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -216,7 +217,8 @@ const CategoryContent = props => {
                 </div>
                 {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
                     <>
-                        <SubCategory children={children} customLandingPage={category ? category.custom_landing_page : ''} />
+                        <SubCategory children={children} />
+                        {!currentFilter && <CustomSubCategory customSubCategory={category ? category.custom_subcategory : null} />}
                     </>
                 {/* ) : ( */}
                     <>

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -8,8 +8,6 @@ import DEFAULT_OPERATIONS from './collectibleGameSets.gql';
 
 export const useCollectibleGameSets = props => {
 
-    const { productType } = props
-
     const operations = mergeOperations(DEFAULT_OPERATIONS, null);
     const { getStoreConfigData, getCollectibleGameQuery } = operations;
     const { pathname } = useLocation();
@@ -27,11 +25,12 @@ export const useCollectibleGameSets = props => {
 
     const pathnameArr = pathname.split('/');
 
-    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
+    const productType = pathnameArr[pathnameArr.length - 1].replace('.html','');
     
     const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
 
-    const { error: allSetsError, loading: allSetsLoading, data: allSetsData } = useQuery(getCollectibleGameQuery, {
+    const { error, loading, data } = useQuery(getCollectibleGameQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !storeConfigData,
@@ -41,31 +40,24 @@ export const useCollectibleGameSets = props => {
         }
     });
 
-    const { error: expansionSetsError, loading: expansionSetsLoading, data: expansionSetsData } = useQuery(getCollectibleGameQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        skip: !storeConfigData,
-        variables: {
-            categoryUrlKey: categoryUrlKey,
-            productType: productType
-        }
-    });
-
-    const loading = !!allSetsData && allSetsLoading;
-    const error = !!allSetsData && allSetsError;
+    const isBackgroundLoading = !!data && loading;
 
     const collectibleGameSets = useMemo(() => {
-        if (!allSetsData) {
+        if (!data) {
             return null;
         }
         
-        const collectibleGameSets = productType == "sealed-products" ? expansionSetsData.collectibleGameSets : allSetsData.collectibleGameSets;
+        const collectibleGameSets = data.collectibleGameSets;
         if (!collectibleGameSets) {
             return null;
         }
 
         return collectibleGameSets;
-    }, [allSetsData, expansionSetsData, categoryUrlKey, productType]);
+    }, [data, categoryUrlKey]);
+
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
 
     return {
         error,

package/src/talons/SubCategory/useCustomSubCategory.js

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './subCategory.gql';
+
+const getPath = (path, suffix) => {
+    if (path) {
+        return `/${path}${suffix || ''}`;
+    }
+
+    // If there is no path this is just a dead link.
+    return '#';
+};
+
+export const useCustomSubCategory = props => {
+    const { customSubCategory } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    const normalizedData = useMemo(() => {
+        if (customSubCategory) {
+            return (
+                customSubCategory.length &&
+                customSubCategory
+                    .map(category => ({
+                        text: category.name,
+                        path: `/${category.path}`
+                    }))
+            );
+        }
+    }, [categoryUrlSuffix, customSubCategory]);
+
+    return {
+        normalizedData: normalizedData || []
+    };
+};