@riosst100/pwa-marketplace 1.6.9 → 1.7.0

package/package.json

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

package/src/components/ProductLabel/index.js

@@ -0,0 +1,39 @@
+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;
+    
+    return (
+        <div
+            className={cn(
+                'flex flex-row flex-wrap gap-y-1.5 gap-x-[5px] absolute p-[5px] z-[1]',
+                rootClassName
+            )}
+        >
+            {/* <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'>
+                    10% 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>}
+            {/* <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);
 
@@ -26,7 +37,7 @@ const ProductListTab = props => {
         },
         {
             'label': 'Pre Order',
-            'value': 'preorder'
+            'value': 'lof_preorder'
         },
         {
             'label': 'Auction',
@@ -34,13 +45,50 @@ const ProductListTab = props => {
         }
     ];
 
+    const handleClickremove = useCallback((group, item) => {
+        console.log(group)
+        console.log(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/ShopBy/shopBy copy.js

@@ -0,0 +1,173 @@
+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'
+    // });
+
+    // console.log(currentSort)
+
+    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/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -148,6 +148,66 @@ export const useFilterSidebar = props => {
             }
         }
 
+        const productTabs = [
+            {
+                'label': 'All Products',
+                'value': 'all',
+                'path': '',
+                'options': [
+                    {'value':'0','label':'No','title':'No'},
+                    {'value':'1','label':'Yes','title':'Yes'}
+                ]
+            },
+            {
+                'label': 'Sale',
+                'value': 'sale',
+                'path': '',
+                'options': [
+                    {'value':'0','label':'No','title':'No'},
+                    {'value':'1','label':'Yes','title':'Yes'}
+                ]
+            },
+            {
+                'label': 'Preorder',
+                'value': 'lof_preorder',
+                'path': '',
+                'options': [
+                    {'value':'0','label':'No','title':'No'},
+                    {'value':'1','label':'Yes','title':'Yes'}
+                ]
+            },
+            {
+                'label': 'Auction',
+                'value': 'auction',
+                'path': '',
+                'options': [
+                    {'value':'0','label':'No','title':'No'},
+                    {'value':'1','label':'Yes','title':'Yes'}
+                ]
+            }
+        ];
+
+        if (productTabs) {
+            productTabs.map(({ value, options }, index) => {
+                
+
+                const items = [];
+
+                names.set(value, '');
+                frontendInput.set(value, null);
+
+                // add filter key permutations
+                keys.add(`${value}[filter]`);
+
+                // add items
+                for (const { label, value, path } of options) {
+                    items.push({ title: stripHtml(label), value, path });
+                }
+
+                itemsByGroup.set(value, items);
+            })
+        }
+
         return [names, keys, itemsByGroup, frontendInput];
     }, [filters, possibleFilters]);
 

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -555,7 +555,8 @@ export const useProductFullDetail = props => {
         sku: product.sku,
         term_and_conditions: product.term_and_conditions,
         shipping_policy: product.shipping_policy,
-        return_policy: product.return_policy
+        return_policy: product.return_policy,
+        preorder: product.preorder
     };
 
     const sellerDetails = {

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -16,6 +16,11 @@ export const ProductsFragment = gql`
             id
             uid
             name
+            preorder {
+                is_preorder
+                preorder_notes
+                preorder_availability
+            }
             seller {
                 name
             }

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -54,6 +54,11 @@ export const ProductDetailsFragment = gql`
             }
         }
         sku
+        preorder {
+            is_preorder
+            preorder_notes
+            preorder_availability
+        }
         term_and_conditions
         shipping_policy
         return_policy

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

@@ -108,13 +108,25 @@ const CategoryContent = props => {
                     }
 
                     if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
-                        return galleryItems.push(item);
+                        if (activeTab == "preorder") {
+                            const preorderData = item.preorder;
+                            if (preorderData) {
+                                const isPreOrder = preorderData && preorderData.is_preorder ? true : false;
+                                if (isPreOrder) {
+                                    return galleryItems.push(item);
+                                }
+                            }
+                        } else {
+                            return galleryItems.push(item);
+                        }
                     }
                 }
             }),
-        [items, activeLetter]
+        [items, activeLetter, activeTab]
     });
 
+    console.log(galleryItems)
+
     const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
     const shouldRenderSidebarContent = useIsInViewport({
@@ -162,8 +174,8 @@ const CategoryContent = props => {
         <SortedByContainerShimmer />
     ) : null;
 
-    const maybeProductsTabContainer = shouldShowProductListTab ? (
-        <ProductListTab activeTab={activeTab} setActiveTab={setActiveTab} />
+    const maybeProductsTabContainer = !isLoading ? (
+        <ProductListTab filters={filters} activeTab={activeTab} setActiveTab={setActiveTab} />
     ) : shouldShowProductListTabShimmer ? (
         <ProductListTabShimmer />
     ) : null;

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -6,6 +6,7 @@
     composes: gap-[6px] from global;
     composes: my-[10px] from global;
     padding-top: 20px;
+    margin-bottom: 40px;
 }
 
 .text {

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -20,7 +20,7 @@ const CurrentFilters = props => {
                 const { title, value } = item || {};
                 const key = `${group}::${title}_${value}`;
 
-                const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+                const customAttributeLandingPage = ['card_set', 'sc_baseball_release','auction','sale','lof_preorder'];
 
                 if (!customAttributeLandingPage.includes(group)) {
                     elements.push(

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -90,6 +90,9 @@ const FilterSidebar = props => {
                 const blockState = filterState.get(group);
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
+
+                const hideFilters = ['lof_preorder','auction','sale'];
+                if (!hideFilters.includes(group)) {
                 // if (!allowedFilters && !allowedFiltersArr.length && group != "category_uid" || allowedFilters && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
                     
 
@@ -106,7 +109,7 @@ const FilterSidebar = props => {
                             initialOpen={iteration < filterCountToOpen}
                         />
                     );
-                // }
+                }
             }),
         [
             filterApi,

package/src/overwrites/venia-ui/lib/components/Gallery/item.js

@@ -14,6 +14,7 @@ import GalleryItemShimmer from './item.shimmer';
 import defaultClasses from './item.module.css';
 import WishlistGalleryButton from '@magento/venia-ui/lib/components/Wishlist/AddToListButton';
 
+import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel';
 import AddToCartButton from './addToCartButton';
 // eslint-disable-next-line no-unused-vars
 import Rating from '@magento/venia-ui/lib/components/Rating';
@@ -21,6 +22,7 @@ import cn from 'classnames';
 import { Verify } from 'iconsax-react';
 import Star from './star';
 
+
 // The placeholder image is 4:5, so we should make sure to size our product
 // images appropriately.
 const IMAGE_WIDTH = 300;
@@ -96,7 +98,8 @@ const GalleryItem = props => {
             className={rootClassName}
         >
             <div data-cy="GalleryItem-root" className={cn(classes.root, 'border border-gray-100 rounded-lg hover_shadow-type-1 ')} ref={itemRef}>
-                <div className={cn('item-product')}>
+                <div className={cn('item-product relative z-[1]')}>
+                    <ProductLabel item={item} />
                     <Link
                         aria-label={name}
                         onClick={handleLinkClick}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/preOrderDetail.js

@@ -1,10 +1,22 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cn from 'classnames';
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 
 const preOrderInfo = (props) => {
-    const { className } = props
-    return (
+    const { className, productDetails } = props
+
+    const preorderData = productDetails ? productDetails.preorder : null;
+
+    console.log(preorderData)
+    const isPreOrder = preorderData && preorderData.is_preorder ? true : false;
+    const preOrderNotes = preorderData ? preorderData.preorder_notes : null;
+    const preOrderAvailableDate = preorderData ? new Date(preorderData.preorder_availability) : null;
+
+    // console.log(preOrderNotes)
+    // console.log(productDetails)
+    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+
+    return isPreOrder ? (
         <>
             <div
                 className={cn(
@@ -12,13 +24,14 @@ const preOrderInfo = (props) => {
                     className
                 )}
             >
-                <div className='flex flex-row justify-between'>
+                <div className='flex flex-row justify-between gap-[20px]'>
                     <div className='flex flex-col gap-2.5'>
                         <div className='text-[14px] font-medium text-gray-500'>
                             Release Date
                         </div>
                         <div className='text-[16px] font-semibold text-colorDefault text-center'>
-                            27, February 2024
+                            {preOrderAvailableDate ? preOrderAvailableDate.getDate() + ', ' + month[preOrderAvailableDate.getMonth()] + ' ' + preOrderAvailableDate.getFullYear() : 'No Release Date.'}
+                            {/* 27, February 2024 */}
                         </div>
                     </div>
                     <Divider className="w-[1px] h-[50px]" />
@@ -40,13 +53,12 @@ const preOrderInfo = (props) => {
                         </div>
                     </div>
                 </div>
-
-                <p>
-                    Notes : Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh viverra non semper suscipit posuere a pede.
-                </p>
+                {preOrderNotes && <p>
+                    Notes : {preOrderNotes}
+                </p>}
             </div>
         </>
-    )
+    ) : ''
 }
 
 export default preOrderInfo

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -34,6 +34,7 @@ import PreorderDetail from './components/preOrderDetail';
 import AuctionDetail from './components/auctionDetail';
 import CrossSeller from '@riosst100/pwa-marketplace/src/components/CrossSeller';
 import RelatedProduct from '@riosst100/pwa-marketplace/src/components/RelatedProduct';
+import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel';
 
 // Correlate a GQL error message to a field. GQL could return a longer error
 // string but it may contain contextual info such as product id. We can use
@@ -200,29 +201,6 @@ const ProductFullDetail = props => {
     // Error message for screen reader
     const cartActionContent = isSupportedProductType ? (
         <section className={cn(classes.actButton, 'flex gap-x-[30px]')}>
-
-            <Button
-                data-cy="ProductFullDetail-addToCartButton"
-                disabled={isAddToCartDisabled}
-                aria-disabled={isAddToCartDisabled}
-                aria-label={
-                    isEverythingOutOfStock
-                        ? formatMessage({
-                            id: 'productFullDetail.outOfStockProduct',
-                            defaultMessage:
-                                'This item is currently out of stock'
-                        })
-                        : ''
-                }
-                classes={{
-                    content: 'normal-case font-semibold text-[16px]'
-                }}
-                priority="low"
-                type="submit"
-            >
-                Buy Now
-            </Button>
-
             <Button
                 data-cy="ProductFullDetail-addToCartButton"
                 disabled={isAddToCartDisabled}
@@ -445,7 +423,8 @@ const ProductFullDetail = props => {
                 data-cy="ProductFullDetail-root"
                 onSubmit={handleAddToCart}
             >
-                <section className={classes.leftContainer}>
+                <section className={cn(classes.leftContainer, 'relative')}>
+                    <ProductLabel item={productDetails} />
                     <Carousel images={mediaGalleryEntries} />
                     <div className='product_group-actions flex gap-x-[18px] gap-y-4 justify-center items-center mt-5'>
                         <Suspense fallback={null}>
@@ -529,8 +508,8 @@ const ProductFullDetail = props => {
                                     value={productDetails.price.value}
                                 />
                             </p>
-                            <AuctionDetail className="auction_detail-container" />
-                            <PreorderDetail className={'preorder_detail-container'} />
+                            {/* <AuctionDetail className="auction_detail-container" /> */}
+                            <PreorderDetail productDetails={productDetails} className={'preorder_detail-container'} />
                             <small className='shipping-calculation-notes text-gray-200 text-xs'>
                                 Shipping method is calculated on checkout
                             </small>