@riosst100/pwa-marketplace 1.6.9 → 1.7.1

package/package.json

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

package/src/componentOverrideMapping.js

@@ -45,4 +45,8 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/Main/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Main/index.js',
     [`@magento/venia-ui/lib/components/Footer/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Footer/index.js',
     [`@magento/venia-ui/lib/components/Newsletter/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Newsletter/index.js',
+    [`@magento/pagebuilder/lib/ContentTypes/Products/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/pagebuilder/lib/ContentTypes/Products/index.js',
+    [`@magento/venia-ui/lib/RootComponents/CMS/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/CMS/index.js',
+    [`@magento/pagebuilder/lib/ContentTypes/Slider/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/pagebuilder/lib/ContentTypes/Slider/index.js',
+    [`@magento/venia-ui/lib/components/App/app.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/App/app.js',
 };

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -51,16 +51,12 @@ const CollectibleGameSets = props => {
     //     value: 'all'
     // });
 
-    // console.log(currentSort)
-
     const classes = useStyle(defaultClasses);
 
     const talonProps = useCollectibleGameSets({ searchQuery, setActive, currentSort });
 
     const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets, availableGroups } = talonProps;
 
-    console.log(availableGroups)
-
     if (loading && !collectibleGameSets)
         return <CollectibleGameSetsShimmer />;
     if (error && !collectibleGameSets) return <ErrorView />;

package/src/components/FilterTop/filterTop.js

@@ -84,8 +84,6 @@ const FilterTop = props => {
     // });
     // const allowedFiltersArr = ['card_rarity','card_print_version','card_set', 'card_product_type'];
 
-    // console.log(customFilters)
-
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {

package/src/components/FilterTopBackup/CustomFilters/customFilters.js

@@ -49,7 +49,6 @@ const CustomFilters = props => {
         return elements;
     }, [filterState, removeItem]);
 
-    // console.log(activeFilters)\\
 
     // const handleClick = useCallback(() => {
     //     removeItem({ group, item });

package/src/components/ProductLabel/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import cn from 'classnames';
+
+const ProductLabel = (props) => {
+    const {
+        rootClassName = '',
+        item
+    } = props;
+
+    const preorderData = item ? item.preorder : null;
+    const isPreOrder = preorderData && preorderData.is_preorder ? true : false;
+
+    const auctionData = item ? item.auction_data : null;
+    const isAuction = auctionData && auctionData.is_auction ? true : false;
+
+    const priceRangeData = item?.price_range;
+
+    const salePrice = priceRangeData?.maximum_price?.discount?.amount_off;
+    const regularPrice = priceRangeData?.maximum_price?.regular_price?.value;
+    
+    return (
+        <div
+            className={cn(
+                'flex flex-row flex-wrap gap-y-1.5 gap-x-[5px] absolute p-[5px] z-[1]',
+                rootClassName
+            )}
+        >
+            {salePrice > 0 && <div className='bg-yellow-400 rounded px-2.5 py-[6px] w-fit top-0 left-0'>
+                <span className='text-white text-xs font-medium'>
+                    {salePrice/regularPrice*100}% off
+                </span>
+            </div>}
+            {isPreOrder && <div className='bg-darkblue-900 rounded px-2.5 py-[6px] w-fit top-0 left-0'>
+                <span className='text-white text-xs font-medium'>
+                    Pre Order
+                </span>
+            </div>}
+            {isAuction && <div className='bg-blue-700 rounded px-2.5 py-[6px] w-fit top-0 left-0'>
+                <span className='text-white text-xs font-medium'>
+                    Auction
+                </span>
+            </div>}
+        </div>
+    )
+}
+
+export default ProductLabel

package/src/components/ProductListTab/productListTab.js

@@ -1,12 +1,23 @@
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './productListTab.module.css';
+import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
+import CurrentTopFilter from '@riosst100/pwa-marketplace/src/components/FilterTop/CurrentTopFilters/currentTopFilter';
 
 const ProductListTab = props => {
 
-    const { activeTab, setActiveTab } = props
+    const { activeTab, setActiveTab, filters } = props
+
+    const talonProps = useFilterSidebar({ filters });
+    const {
+        filterApi,
+        filterState,
+        handleApply
+    } = talonProps;
+
+    const { toggleItem, removeItem } = filterApi;
 
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -22,11 +33,11 @@ const ProductListTab = props => {
         },
         {
             'label': 'Sale',
-            'value': 'sale'
+            'value': 'special_price'
         },
         {
             'label': 'Pre Order',
-            'value': 'preorder'
+            'value': 'lof_preorder'
         },
         {
             'label': 'Auction',
@@ -34,13 +45,48 @@ const ProductListTab = props => {
         }
     ];
 
+    const handleClickremove = useCallback((group, item) => {
+        removeItem({ group, item });
+        if (typeof handleApply === 'function') {
+            handleApply(group, item);
+        }
+    }, [removeItem, handleApply]);
+
+    const handleToggleItem = useCallback((group, item) => {
+        toggleItem({ group, item });
+        if (typeof handleApply === 'function') {
+            handleApply(group, item);
+        }
+    }, [toggleItem, handleApply]);
+
+    const handleClick = (targetGroup) => {
+            setActiveTab(targetGroup);
+
+            const item = { value: "1", label: 'Yes', title: 'Yes' };
+
+            for (const [group, items] of filterState) {
+                for (const item of items) {
+                    const { title, value } = item || {};
+                    const key = `${group}::${title}_${value}`;
+
+                    if (productTabs.some(e => e.value === group)) {
+                        handleClickremove(group, item)
+                    }
+                }
+            }
+
+            if (targetGroup != "all") {
+                handleToggleItem(targetGroup, item)
+            }
+        }
+
     return (
         <div className={classes.root} aria-busy="true">
             <nav>
                 <ul className={classes.buttonContainer}>
                     {productTabs.map(({label, value}, index) => 
                         <li key={index}>
-                            <button onClick={() => setActiveTab(value)} className={
+                            <button onClick={() => handleClick(value)} className={
                                 (index == 0 ? classes.firstButton : (index == productTabs.length-1 ? classes.lastButton : classes.middleButton)) + (activeTab == value ? ' ' + classes.activeButton : '')
                             }>{label}</button>
                         </li>

package/src/components/ProductListTab/productListTab.module.css

@@ -57,7 +57,7 @@
     composes: button;
     composes: text-colorDefault from global;
     composes: bg-white from global;
-    composes: border-r-0 from global;
+    /* composes: border-l-0 from global; */
     composes: border-gray-100 from global;
     composes: rounded-l-lg from global;
     border-radius: 6px 0px 0px 6px;

package/src/components/RelatedProduct/relatedProduct.js

@@ -86,7 +86,7 @@ const relatedProduct = (props) => {
                                 key={item.id}
                                 item={item}
                                 storeConfig={storeConfig}
-                                rootClassName="px-4 block"
+                                rootClassName="px-2 block"
                             />
                         )
                     })}

package/src/components/ShopBy/shopBy copy.js

@@ -0,0 +1,172 @@
+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 { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './shopBy.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+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 { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
+import { useShopBy } from '@riosst100/pwa-marketplace/src/talons/ShopBy/useShopBy';
+
+const ShopBy = props => {
+    const [active, setActive] = useState('all');
+
+    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'
+    // });
+
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useShopBy({ searchQuery, setActive, currentSort });
+
+    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets, availableGroups, attributeData, alpha, category } = talonProps;
+
+    if (loading && !dataResult)
+        return <ShopByShimmer />;
+    if (error && !dataResult) return <ErrorView />;
+
+    if (!dataResult && !loading && !error) {
+        return <ShopByShimmer />;
+    }
+
+    const newData = searchQuery ? filteredCollectibleGameSets : dataResult;
+
+    const setRelases = availableGroups.map((group, index) => {
+        const optionsResult = [];
+
+        if (active === 'all' || active === group) {
+            dataResult[group].map((option, index) => {
+                const { label, value } = option;
+
+                const categoryUrl = resourceUrl(
+                    `/${categoryUrlKey}${categoryUrlSuffix || ''}?${attributeData.attribute_code}[filter]=${label},${value}`
+                );
+
+                optionsResult.push(<li className='list-none'>
+                    <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {label}
+                    </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('')
+    }
+
+    let availableSortBy = [
+        {
+            'label': 'All (A-Z)',
+            'value': 'all'
+        }
+    ];
+
+    let title = "All Sets";
+    if (productType == "expansion-sets") {
+        title = "Expansion Sets";
+    } else if (productType == "artist") {
+        title = "Artist";
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {attributeData ? 'By ' + attributeData.label : '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>
+                        <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
+                    </div>
+                ) : ''}
+                {productType != "expansion-sets" ? (
+                    <>
+                        <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 ShopBy;

package/src/components/ShopBy/shopBy.js

@@ -102,7 +102,6 @@ const ShopBy = props => {
     //     value: 'all'
     // });
 
-    // console.log(currentSort)
 
     const classes = useStyle(defaultClasses);
 

package/src/components/ShopBySets/shopBySets.js

@@ -54,7 +54,6 @@ const ShopBySets = props => {
     //     value: 'all'
     // });
 
-    // console.log(currentSort)
 
     const classes = useStyle(defaultClasses);
 
@@ -113,7 +112,6 @@ const ShopBySets = props => {
             })
         }
 
-        // console.log('setsResult: '+setsResult.length);
         let setsResultSplitted = [];
         if (active == release_type || newCollectibleGameSets.length == 1) {
             setsResultSplitted = splitToNChunks(setsResult, 3);
@@ -201,7 +199,6 @@ const ShopBySets = props => {
         title = "By Year";
     }
 
-    console.log(availableGroups)
 
     return (
         <Fragment>

package/src/components/SportCardsSets/index.js

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