@riosst100/pwa-marketplace 1.6.0 → 1.6.1

package/package.json

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

@@ -16,7 +16,7 @@ const SubCategory = props => {
         normalizedData
     } = talonProps;
 
-    const maxSubCategory = 5;
+    const maxSubCategory = 7;
     
     const subCategory = [];
     
@@ -38,7 +38,7 @@ const SubCategory = props => {
             <Link
                 to={resourceUrl('/')}
             >
-                <li className={classes.item}>{"Other " + parent[0].name}</li>
+                <li className={classes.item}>{"More " + parent[0].name}</li>
             </Link>
         )
     }

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(() =>
@@ -73,6 +74,26 @@ const CategoryContent = props => {
         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({
@@ -127,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'}
             />
@@ -149,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 ? (
@@ -171,7 +192,8 @@ const CategoryContent = props => {
         isLoading,
         items,
         pageControl,
-        totalPagesFromData
+        totalPagesFromData,
+        activeLetter
     ]);
 
     const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
@@ -219,6 +241,7 @@ const CategoryContent = props => {
                 </div>
                 {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
                     <>
+                        {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/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 (