@riosst100/pwa-marketplace 1.5.9 → 1.6.1

package/package.json

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

package/src/components/AlphaFilter/alphaFilter.js

@@ -0,0 +1,75 @@
+import React, { Fragment, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { useCollectibleGameSets } from '@riosst100/pwa-marketplace/src/talons/CollectibleGameSets/useCollectibleGameSets';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './alphaFilter.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { CollectibleGameSetsShimmer } from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets';
+import ProductSort from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+
+const AlphaFilter = props => {
+    const {items, handleActiveLetter} = props;
+
+    const groupSinglesFirstLetter = (data) => {
+        return data.reduce((acc, item) => {
+            if (item && item.name) {
+                const firstLetter = item.name.charAt(0).toUpperCase();
+                acc[firstLetter] = acc[firstLetter] || [];
+                acc[firstLetter].push(item);
+            }
+
+            return acc;
+        }, {});
+    }
+
+    const groupedSingles = items ? groupSinglesFirstLetter(items) : null;
+    const availableLetter = groupedSingles ? Object.keys(groupedSingles).sort() : [];
+    
+    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'];
+
+    return <>
+        <section className='single_list-indexing-container relative m-auto py-1'>
+            <ul className='flex gap-2 justify-center flex-wrap'>
+                {alpha.map((letter, index) => (
+                    <li key={index}>
+                        <button
+                            className={cn(
+                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                'leading-4 font-medium text-base ',
+                                availableLetter.includes(letter) ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                            )}
+                            onClick={() => {
+                                handleActiveLetter(letter)
+                            }}
+                            disabled={availableLetter.includes(letter) > 0 ? false : true}
+                        >
+                            {letter}
+                        </button>
+                    </li>
+                ))}
+                <li>
+                    <button
+                        className={cn(
+                            'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                            'leading-4 font-medium text-base hover_bg-gray-50'
+                        )}
+                        onClick={() => {
+                            handleActiveLetter('all')
+                        }}
+                    >
+                        All
+                    </button>
+                </li>
+            </ul>
+        </section>
+    </>
+}
+
+export default AlphaFilter;

package/src/components/AlphaFilter/alphaFilter.module.css

@@ -0,0 +1,38 @@
+.tabs {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.tabs_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;
+}
+
+.singlesWrapper {
+    column-count: 1;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesWrapper {
+        column-count: 2;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesWrapper {
+        column-count: 3;
+    }
+}

package/src/components/AlphaFilter/index.js

@@ -0,0 +1,2 @@
+export { default } from './alphaFilter';
+// export { default as CollectibleGameSetsShimmer } from './collectibleGameSets.shimmer';

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 = 7;
     
     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}>{"More " + 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

@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense, useMemo, useRef } from 'react';
+import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 
@@ -32,6 +32,7 @@ import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/Colle
 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';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -65,12 +66,34 @@ const CategoryContent = props => {
         filters,
         items,
         children,
+        parent,
         totalCount,
         totalPagesFromData,
         attributesBlock,
-        category
+        category,
+        virtualCategoryFilters
     } = talonProps;
 
+    const [activeLetter, setActiveLetter] = useState('all')
+
+    const handleActiveLetter = (val) => {
+        setActiveLetter(val);
+    }
+
+    const galleryItems = [];
+
+    useMemo(() => {
+            items && items.map((item, index) => {
+                if (item) {
+                    const firstLetter = item.name.charAt(0).toUpperCase();
+                    if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
+                        return galleryItems.push(item);
+                    }
+                }
+            }),
+        [items, activeLetter]
+    });
+
     const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
     const shouldRenderSidebarContent = useIsInViewport({
@@ -125,11 +148,11 @@ const CategoryContent = props => {
     ) : null;
 
     const categoryResultsHeading =
-        totalCount > 0 ? (
+    galleryItems.length > 0 ? (
             <FormattedMessage
                 id={'categoryContent.resultCount'}
                 values={{
-                    count: totalCount
+                    count: galleryItems.length
                 }}
                 defaultMessage={'{count} Results'}
             />
@@ -147,9 +170,9 @@ const CategoryContent = props => {
         }
 
         const gallery = totalPagesFromData ? (
-            <Gallery items={items} />
+            <Gallery items={galleryItems} activeLetter={activeLetter} />
         ) : (
-            <GalleryShimmer items={items} />
+            <GalleryShimmer items={galleryItems} />
         );
 
         const pagination = totalPagesFromData ? (
@@ -169,7 +192,8 @@ const CategoryContent = props => {
         isLoading,
         items,
         pageControl,
-        totalPagesFromData
+        totalPagesFromData,
+        activeLetter
     ]);
 
     const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
@@ -186,7 +210,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 +241,8 @@ const CategoryContent = props => {
                 </div>
                 {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
                     <>
-                        <SubCategory children={children} />
+                        {currentFilter && <AlphaFilter items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
+                        <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/Gallery/gallery.js

@@ -14,7 +14,7 @@ import { useGallery } from '@magento/peregrine/lib/talons/Gallery/useGallery';
  * @params {Array} props.items an array of items to render
  */
 const Gallery = props => {
-    const { items } = props;
+    const { items, activeLetter } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useGallery();
     const { storeConfig } = talonProps;
@@ -25,6 +25,10 @@ const Gallery = props => {
                 if (item === null) {
                     return <GalleryItemShimmer key={index} />;
                 }
+
+                const firstLetter = item.name.charAt(0).toUpperCase();
+
+                if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
                 return (
                     <GalleryItem
                         key={item.id}
@@ -32,8 +36,9 @@ const Gallery = props => {
                         storeConfig={storeConfig}
                     />
                 );
+                }
             }),
-        [items, storeConfig]
+        [items, storeConfig, activeLetter]
     );
 
     return (