@riosst100/pwa-marketplace 1.6.2 → 1.6.4

package/package.json

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

package/src/components/AlphaFilter/alphaFilter.js

@@ -15,14 +15,31 @@ import ProductSort from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/
 import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
 
 const AlphaFilter = props => {
-    const {items, handleActiveLetter, activeLetter} = props;
+    const {items, handleActiveLetter, activeLetter, isSingles } = 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);
+            if (item) {
+                const { custom_attributes } = item;
+                if (custom_attributes) {
+                    let cardName = '';
+                    custom_attributes.some((attribute, index) => {
+                        const { attribute_metadata, entered_attribute_value, selected_attribute_options } = attribute
+                        if (attribute_metadata.code == "card_name") {
+                            cardName = selected_attribute_options.attribute_option[0].label;
+
+                            return true;
+                        }
+
+                        return false;
+                    });
+
+                    if (cardName) {
+                        const firstLetter = cardName.charAt(0).toUpperCase();
+                        acc[firstLetter] = acc[firstLetter] || [];
+                        acc[firstLetter].push(item);
+                    }
+                }
             }
 
             return acc;
@@ -34,7 +51,7 @@ const AlphaFilter = 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'];
 
-    return <>
+    return isSingles && <>
         <section className='single_list-indexing-container relative m-auto py-1'>
             <ul className='flex gap-2 justify-center flex-wrap'>
                 {alpha.map((letter, index) => (

package/src/components/ArraySearchInput/arraySearchInput.js

@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import { bool, shape, string } from 'prop-types';
+import { Form } from 'informed';
+import { useIntl } from 'react-intl';
+import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Autocomplete from '@magento/venia-ui/lib/components/SearchBar/autocomplete';
+import defaultClasses from './arraySearchInput.module.css';
+import Dropdown from '@riosst100/pwa-marketplace/src/components/Dropdown';
+import cn from 'classnames';
+import SearchField from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar/searchField';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import { useArraySearchInput } from '@riosst100/pwa-marketplace/src/talons/ArraySearchInput/useArraySearchInput';
+
+const ArraySearchInput = React.forwardRef((props, ref) => {
+    const { isOpen, placeholder, setSearchQuery, active, setActive } = props;
+    const talonProps = useArraySearchInput({ active });
+    // const fieldState = useFieldState('search_query');
+    const {
+        containerRef,
+        // handleChange,
+        handleFocus,
+        // handleSubmit,
+        initialValues,
+        isAutoCompleteOpen,
+        setIsAutoCompleteOpen,
+        valid
+    } = talonProps;
+
+    const handleSubmit = useCallback(
+        ({ search_query }) => {
+            return false;
+        },
+        []
+    );
+
+    const handleChange = useCallback(
+        value => {
+            // const hasValue = !!value;
+            // const isValid = hasValue && value.length > 2;
+
+            setSearchQuery(value)
+
+            
+
+            // setValid(isValid);
+            // setIsAutoCompleteOpen(hasValue);
+        },
+        [setSearchQuery]
+    );
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = isOpen ? classes.root_open : classes.root;
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={rootClassName} data-cy="ArraySearchInput-root" ref={ref}>
+            <div ref={containerRef} className={classes.container}>
+                <Form
+                    autoComplete="off"
+                    className={classes.form}
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                >
+                    <div
+                        className={cn(
+                            classes.search,
+                            'flex flex-row relative border border-gray-100 rounded-full'
+                        )}
+                    >
+                        <SearchField
+                            addLabel={formatMessage({
+                                id: 'global.clearText',
+                                defaultMessage: 'Clear Text'
+                            })}
+                            isSearchOpen={isAutoCompleteOpen}
+                            onChange={handleChange}
+                            onFocus={handleFocus}
+                        />
+                    </div>
+                </Form>
+            </div>
+        </div>
+    );
+});
+
+export default ArraySearchInput;
+
+ArraySearchInput.propTypes = {
+    classes: shape({
+        autocomplete: string,
+        container: string,
+        form: string,
+        root: string,
+        root_open: string,
+        search: string
+    }),
+    isOpen: bool
+};

package/src/components/ArraySearchInput/arraySearchInput.module.css

@@ -0,0 +1,48 @@
+.root {
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: justify-self-center from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: hidden from global; */
+    display: none;
+}
+
+.root_open {
+    composes: root;
+
+    composes: z-dropdown from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: grid from global; */
+    display: grid;
+}
+
+.form {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-stretch from global;
+    composes: w-full from global;
+}
+
+.container {
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-full from global;
+    composes: relative from global;
+    composes: w-full from global;
+}
+
+.search {
+    composes: relative from global;
+    padding-left: 20px;
+}
+
+.autocomplete {
+    composes: grid from global;
+    /* composes: relative from global; */
+    composes: z-menu from global;
+}

package/src/components/ArraySearchInput/index.js

@@ -0,0 +1 @@
+export { default } from './arraySearchInput';

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -1,6 +1,4 @@
-import React, { Fragment, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
 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';
@@ -11,22 +9,35 @@ 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';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
 
 const CollectibleGameSets = props => {
     const [active, setActive] = useState('all');
 
-    const [sortBy, setSortBy] = useState({
+    const [searchQuery, setSearchQuery] = useState('');
+
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
         sortText: 'All (A-Z)',
         value: 'all'
-    });
+    }});
+
+    const [currentSort] = sortProps;
+
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // console.log(currentSort)
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useCollectibleGameSets();
+    const talonProps = useCollectibleGameSets({ searchQuery, setActive, currentSort });
 
-    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets } = talonProps;
 
     if (loading && !collectibleGameSets)
         return <CollectibleGameSetsShimmer />;
@@ -37,12 +48,21 @@ const CollectibleGameSets = props => {
     }
 
     const setsLengthArr = [];
-    const groupByYear = [];
 
-    const setRelases = collectibleGameSets.map((setRelease, index) => {
-        const { release_type, sets } = setRelease;
+    const newCollectibleGameSets = searchQuery ? filteredCollectibleGameSets : collectibleGameSets;
+
+    // useEffect(() => {
+        if (collectibleGameSets) {
+            collectibleGameSets.map((setRelease, index) => {
+                const { release_type, sets } = setRelease;
+
+                setsLengthArr[release_type] = sets.length
+            })
+        }
+    // }, [collectibleGameSets])
 
-        setsLengthArr[release_type] = sets.length
+    const setRelases = newCollectibleGameSets.map((setRelease, index) => {
+        const { release_type, sets } = setRelease;
 
         const setsResult = [];
 
@@ -50,8 +70,6 @@ const CollectibleGameSets = props => {
             sets.map((set, index) => {
                 const { set_name, option_id, set_abbreviation, release_year } = set;
 
-                groupByYear[release_year] = set;
-
                 const categoryUrl = resourceUrl(
                     `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
                 );
@@ -67,7 +85,7 @@ const CollectibleGameSets = props => {
         return (
             <>
                 {active == "all" || active == release_type ?
-                <div id={"#tab_list_"+release_type.toLowerCase()} className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
                     <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
                         {release_type}
                     </div>
@@ -77,10 +95,13 @@ const CollectibleGameSets = props => {
         );
     });
 
-    // console.log(groupByYear)
-
     const handleActive = (val) => {
         setActive(val);
+
+        // 
+
+
+        setSearchQuery('')
     }
 
     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'];
@@ -91,12 +112,12 @@ const CollectibleGameSets = props => {
             'value': 'all'
         },
         {
-            'label': 'Newest',
+            'label': 'Latest Sets',
             'value': 'newest'
         },
         {
-            'label': 'All (Date)',
-            'value': 'all-date'
+            'label': 'By Date',
+            'value': 'date'
         }
     ];
 
@@ -114,9 +135,16 @@ const CollectibleGameSets = props => {
                 {title}
             </h1>
             <div className='border border-gray-100 px-6'>
+                {collectibleGameSets ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                        <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
+                    </div>
+                ) : ''}
                 {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>
@@ -129,7 +157,7 @@ const CollectibleGameSets = props => {
                                             handleActive('all')
                                         }}
                                     >
-                                        All
+                                        {active == 'all' ? <b>All</b> : 'All'}
                                     </button>
                                 </li>
                                 {alpha.map((letter, index) => (
@@ -145,7 +173,7 @@ const CollectibleGameSets = props => {
                                             }}
                                             disabled={setsLengthArr[letter] > 0 ? false : true}
                                         >
-                                            {letter}
+                                            {active == letter ? <b>{letter}</b> : letter}
                                         </button>
                                     </li>
                                 ))}
@@ -153,10 +181,10 @@ const CollectibleGameSets = props => {
                         </section>
                     </>
                 ) : ''}
-                <Divider className="mb-5 px-4" />
+                <Divider className="mb-5 px-4 mt-5" />
                 <section className='singles-container'>
                     <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
-                        {setRelases}
+                        {newCollectibleGameSets && newCollectibleGameSets.length ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found.</div>)}
                     </div>
                 </section>
             </div>

package/src/components/CollectibleGameSets/collectibleGameSets.module.css

@@ -1,3 +1,11 @@
+.toolbar {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
 .tabs {
     composes: flex from global;
     composes: flex-wrap from global;

package/src/components/CustomSortBy/customSortBy.js

@@ -156,12 +156,13 @@ const CustomSortBy = props => {
         });
 
     return (
-        <div
-            ref={elementRef}
-            className={classes.root}
-            data-cy="CustomSortBy-root"
-            aria-busy="false"
-        >
+        // <div
+        //     ref={elementRef}
+        //     className={classes.root}
+        //     data-cy="CustomSortBy-root"
+        //     aria-busy="false"
+        // >
+        <>
             <Button
                 priority={'low'}
                 classes={{
@@ -181,17 +182,14 @@ const CustomSortBy = props => {
                 </span>
                 <span className={cn(classes.desktopText, 'flex items-center gap-[15px]')}>
                     <span className={classes.sortText}>
-                        <FormattedMessage
-                            id={'productSort.sortByButton'}
-                            defaultMessage={'Sort by'}
-                        />
                         &nbsp;{currentSort.sortText}
                     </span>
                     <ArrowUp2 size={15} className={cn('text-gray-900 transition-all stroke-[#292D32]', expanded ? 'rotate-0' : 'rotate-180')} />
                 </span>
             </Button>
             {sortElements}
-        </div>
+        </>
+        // </div>
     );
 };
 

package/src/components/CustomSubCategory/subCategory.js

@@ -24,7 +24,7 @@ const SubCategory = props => {
         subCategory.push(
             <Link
                 key={index}
-                to={resourceUrl(path)}
+                to={path}
             >
                 <li className={classes.item}>{text}</li>
             </Link>

package/src/components/CustomSubCategoryPage/subCategoryPage.js

@@ -0,0 +1,132 @@
+import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './subCategoryPage.module.css';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { ShopByShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBy';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useSubCategoryPage } from '@riosst100/pwa-marketplace/src/talons/SubCategoryPage/useSubCategoryPage';
+
+const SubCategoryPage = props => {
+    const { categoryId } = props;
+    const [active, setActive] = useState('all');
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useSubCategoryPage({ searchQuery, setActive, categoryId });
+
+    const { error, loading, dataResult, categoryUrlSuffix, filteredAvailableGroups, availableGroups, alpha, category } = talonProps;
+
+    if (loading && !dataResult)
+        return <ShopByShimmer />;
+    if (error && !dataResult) return <ErrorView />;
+
+    if (!dataResult && !loading && !error) {
+        return <ShopByShimmer />;
+    }
+
+    const newAvailableGroups = searchQuery ? filteredAvailableGroups : availableGroups;
+
+    const setRelases = newAvailableGroups.map((group, index) => {
+        const optionsResult = [];
+
+        if (active === 'all' || active === group) {
+            dataResult[group].map((option, index) => {
+                const { name, url_path } = option;
+
+                optionsResult.push(<li className='list-none'>
+                    <Link to={'/' + url_path + categoryUrlSuffix} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {name}
+                    </Link>
+                </li>)
+            })
+
+            return (
+                <>
+                    {optionsResult ?
+                    <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                        <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
+                            {group}
+                        </div>
+                        <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
+                    </div> : ''}
+                </>
+            );
+        }
+        
+        return null;
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+        setSearchQuery('')
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{category ? category.name : 'Shop By'}</StoreTitle>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {category ? category.name : 'Shop By'}
+            </h1>
+            <div className='border border-gray-100 px-6'>
+                {dataResult ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                    </div>
+                ) : ''}
+                <>
+                    <section className='single_list-indexing-container relative m-auto py-10'>
+                        <ul className='flex gap-2 justify-center flex-wrap'>
+                            <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={() => {
+                                        handleActive('all')
+                                    }}
+                                >
+                                    {active == 'all' ? <b>All</b> : 'All'}
+                                </button>
+                            </li>
+                            {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 ',
+                                            availableGroups.includes(letter) > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                        )}
+                                        onClick={() => {
+                                            handleActive(letter)
+                                        }}
+                                        disabled={availableGroups.includes(letter) > 0 ? false : true}
+                                    >
+                                        {active == letter ? <b>{letter}</b> : letter}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </section>
+                </>
+                <Divider className="mb-5 px-4 mt-5" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {Object.keys(dataResult).length != 0 ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found.</div>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+};
+
+export default SubCategoryPage;

package/src/components/CustomSubCategoryPage/subCategoryPage.module.css

@@ -0,0 +1,46 @@
+.toolbar {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.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/FilterTop/FilterBlockList/filterTopItemGroup.module.css

@@ -2,7 +2,7 @@
     composes: flex from global;
     composes: flex-wrap from global;
     composes: mt-3 from global;
-    composes: gap-[15px] from global;
+    composes: gap-[10px] from global;
     margin-bottom: 10px;
     justify-content: center;
 }

package/src/components/FilterTop/filterTop.js

@@ -84,7 +84,7 @@ const FilterTop = props => {
     // });
     // const allowedFiltersArr = ['card_rarity','card_print_version','card_set', 'card_product_type'];
 
-    console.log(customFilters)
+    // console.log(customFilters)
 
     const filtersList = useMemo(
         () =>

package/src/components/ShopBy/index.js

@@ -0,0 +1,2 @@
+export { default } from './shopBy';
+export { default as ShopByShimmer } from './shopBy.shimmer';