@riosst100/pwa-marketplace 1.6.1 → 1.6.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {
@@ -11,7 +11,8 @@
   "dependencies": {
     "axios": "^1.6.5",
     "iconsax-react": "^0.0.8",
-    "react-phone-number-input": "^3.3.9"
+    "react-phone-number-input": "^3.3.9",
+    "react-slick": "^0.30.2"
   },
   "license": "MIT",
   "private": false

package/src/components/AlphaFilter/alphaFilter.js

@@ -15,7 +15,7 @@ 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} = props;
+    const {items, handleActiveLetter, activeLetter} = props;
 
     const groupSinglesFirstLetter = (data) => {
         return data.reduce((acc, item) => {
@@ -39,6 +39,12 @@ const AlphaFilter = props => {
             <ul className='flex gap-2 justify-center flex-wrap'>
                 {alpha.map((letter, index) => (
                     <li key={index}>
+                        {activeLetter == letter ? <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',
+                            )}><b>{letter}</b></button> :
                         <button
                             className={cn(
                                 'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
@@ -51,10 +57,15 @@ const AlphaFilter = props => {
                             disabled={availableLetter.includes(letter) > 0 ? false : true}
                         >
                             {letter}
-                        </button>
+                        </button>}
                     </li>
                 ))}
                 <li>
+                    {activeLetter == 'all' ? <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',
+                            )}><b>All</b></button> :
                     <button
                         className={cn(
                             'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
@@ -65,7 +76,7 @@ const AlphaFilter = props => {
                         }}
                     >
                         All
-                    </button>
+                    </button>}
                 </li>
             </ul>
         </section>

package/src/components/AlphaFilter/alphaFilter.shimmer.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './collectibleGameSets.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const CollectibleGameSets = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
+            <div className='border border-gray-100 px-6'>
+                <center>
+                    <section className='single_list-indexing-container relative m-auto py-10'>
+                        <Shimmer width="95%" height="6vh" />
+                    </section>
+                </center>
+                <Divider className="mb-5 px-4" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        <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' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <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' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <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' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <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' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <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' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <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' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+};
+
+export default CollectibleGameSets;

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -77,7 +77,7 @@ const CollectibleGameSets = props => {
         );
     });
 
-    console.log(groupByYear)
+    // console.log(groupByYear)
 
     const handleActive = (val) => {
         setActive(val);

package/src/components/CrossSeller/crossSellerBuy.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Item from './item';
+
+const crossSellerBuy = () => {
+    return (
+        <>
+            <h3 className='capitalize font-semibold text-xl mb-[30px]'>
+                Also Available
+            </h3>
+            <div className='flex flex-col gap-y-5'>
+                {[...Array(6)].map(() => (
+                    <Item />
+                ))}
+            </div>
+        </>
+    )
+}
+
+export default crossSellerBuy

package/src/components/CrossSeller/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Content from './crossSellerBuy';
+
+const index = () => {
+
+    const contentProps = {
+
+    }
+
+    return (
+        <Content {...contentProps} />
+    )
+}
+
+export default index

package/src/components/CrossSeller/item.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Form } from 'informed';
+import Button from '@magento/venia-ui/lib/components/Button';
+import Image from '@magento/venia-ui/lib/components/Image';
+import QuantityStepper from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper';
+import Verify from './verifyIcon';
+import Star from './starIcon';
+import logoImage from './logo_seller.png';
+
+const item = () => {
+    return (
+        <>
+            <div className='flex flex-col gap-y-4 lg_flex-row justify-between bg-white rounded-lg border border-gray-100 p-[15px]'>
+                <div className='seller_info-container flex flex-row gap-x-[15px]'>
+                    <div className='logo_wrapper w-[100px] h-[100px]'>
+                        <Image
+                            alt='seller name'
+                            className="relative mt-[-5px]"
+                            src={logoImage}
+                        />
+                    </div>
+                    <div className='flex flex-col gap-y-[15px]'>
+                        <div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
+                            <div className='seller_name text-lg font-semibold leading-6'>
+                                Zen Market
+                            </div>
+                            <div className='seller_badge flex flex-row gap-x-[5px] items-center leading-6'>
+                                <Verify />
+                                <span className='text-xs font-medium text-gray-600-transparent capitalize'>
+                                    Verified
+                                </span>
+                            </div>
+                        </div>
+                        <div className='rating_sales flex flex-row gap-x-[5px] items-center'>
+                            <Star />
+                            <span className='font-normal text-[14px] text-gray-200'>
+                                4.7 (Sales 120)
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='price_container'>
+                    <div className='price text-lg font-semibold'>
+                        $34.19
+                    </div>
+                    <span className='shipping_note text-xs text-gray-200'>
+                        Shipping method is calculated on checkout
+                    </span>
+                </div>
+
+                <div className='form_wrapper'>
+                    <Form
+                        data-cy="FormAddToCartCrossSeller"
+                        onSubmit={() => { }}
+                        className="flex flex-row gap-x-7"
+                    >
+                        <QuantityStepper
+                            min={1}
+                        // message={'error quantity'}
+                        />
+                        <Button
+                            data-cy="addToCartButton"
+                            classes={{
+                                content: 'normal-case font-semibold text-[16px]'
+                            }}
+                            priority="high"
+                            type="button"
+                        >
+                            Add To Cart
+                        </Button>
+                    </Form>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default item

package/src/components/CrossSeller/starIcon.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const starIcon = () => {
+    return (
+        <>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.00985 2.04754L9.03651 4.10087C9.17651 4.38671 9.54985 4.66087 9.86485 4.71337L11.7257 5.02254C12.9157 5.22087 13.1957 6.08421 12.3382 6.93587L10.8915 8.38254C10.6465 8.62754 10.5123 9.10004 10.5882 9.43837L11.0023 11.2292C11.329 12.6467 10.5765 13.195 9.32235 12.4542L7.57818 11.4217C7.26318 11.235 6.74401 11.235 6.42318 11.4217L4.67901 12.4542C3.43068 13.195 2.67235 12.6409 2.99901 11.2292L3.41318 9.43837C3.48901 9.10004 3.35485 8.62754 3.10985 8.38254L1.66318 6.93587C0.811513 6.08421 1.08568 5.22087 2.27568 5.02254L4.13651 4.71337C4.44568 4.66087 4.81901 4.38671 4.95901 4.10087L5.98568 2.04754C6.54568 0.933372 7.45568 0.933372 8.00985 2.04754Z" fill="#F7C317" stroke="#F7C317" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+
+        </>
+    )
+}
+
+export default starIcon

package/src/components/CrossSeller/verifyIcon.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const verifyIcon = () => (
+    <>
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8.9584 2.04185C9.5334 1.55018 10.4751 1.55018 11.0584 2.04185L12.3751 3.17518C12.6251 3.39185 13.0917 3.56685 13.4251 3.56685H14.8417C15.7251 3.56685 16.4501 4.29185 16.4501 5.17518V6.59185C16.4501 6.91685 16.6251 7.39185 16.8417 7.64185L17.9751 8.95851C18.4667 9.53351 18.4667 10.4752 17.9751 11.0585L16.8417 12.3752C16.6251 12.6252 16.4501 13.0918 16.4501 13.4252V14.8418C16.4501 15.7252 15.7251 16.4502 14.8417 16.4502H13.4251C13.1001 16.4502 12.6251 16.6252 12.3751 16.8418L11.0584 17.9752C10.4834 18.4668 9.54173 18.4668 8.9584 17.9752L7.64173 16.8418C7.39173 16.6252 6.92506 16.4502 6.59173 16.4502H5.15006C4.26673 16.4502 3.54173 15.7252 3.54173 14.8418V13.4168C3.54173 13.0918 3.36673 12.6252 3.1584 12.3752L2.0334 11.0502C1.55007 10.4752 1.55007 9.54185 2.0334 8.96685L3.1584 7.64185C3.36673 7.39185 3.54173 6.92518 3.54173 6.60018V5.16685C3.54173 4.28351 4.26673 3.55851 5.15006 3.55851H6.59173C6.91673 3.55851 7.39173 3.38351 7.64173 3.16685L8.9584 2.04185Z" fill="#4E31DB" stroke="#4E31DB" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M6.9834 10.0001L8.99173 12.0167L13.0167 7.9834" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </>
+)
+
+export default verifyIcon

package/src/components/CustomSortBy/productSort.module.css

@@ -0,0 +1,65 @@
+.root {
+    composes: relative from global;
+    composes: ml-2xs from global;
+}
+
+.menu {
+    composes: absolute from global;
+    composes: bg-clip-padding from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    composes: list-none from global;
+    composes: mb-0 from global;
+    composes: min-w-[10rem] from global;
+    composes: mt-0.5 from global;
+    composes: mx-0 from global;
+    composes: right-0 from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: text-colorDefault from global;
+    composes: text-left from global;
+    composes: top-[110%] from global;
+    composes: z-menu from global;
+    composes: p-2.5 from global;
+}
+
+.menuItem {
+    composes: hover_bg-gray-100 from global;
+    composes: rounded-[5px] from global;
+    composes: relative from global;
+}
+
+.sortButton {
+    composes: rounded-[5px] from global;
+    composes: p-2.5 from global;
+
+    composes: min-w-[154px] from global;
+}
+
+.desktopText {
+    composes: hidden from global;
+
+    composes: lg_inline-flex from global;
+}
+
+.sortText {
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
+    composes: text-base from global;
+}
+
+.desktopIconWrapper {
+    transform: translateX(10px);
+}
+
+.desktopIcon {
+    /* composes: icon from '../Icon/icon.module.css'; */
+
+    composes: stroke-gray-500 from global;
+}
+
+.mobileText {
+    composes: lg_hidden from global;
+}

package/src/components/CustomSortBy/productSort.shimmer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './productSort.shimmer.module.css';
+
+const ProductSortShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer
+                classes={{ root_button: classes.sortButtonShimmer }}
+                type="button"
+            />
+        </div>
+    );
+};
+
+ProductSortShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        sortButtonShimmer: string
+    })
+};
+
+export default ProductSortShimmer;

package/src/components/CustomSortBy/productSort.shimmer.module.css

@@ -0,0 +1,10 @@
+.root {
+    composes: root from './productSort.module.css';
+}
+
+.sortButtonShimmer {
+    /* composes: root_button from '../Shimmer/shimmer.module.css'; */
+    composes: sortButton from './productSort.module.css';
+
+    composes: lg_min-w-[12rem] from global;
+}

package/src/components/CustomSubCategory/subCategory.js

@@ -0,0 +1,48 @@
+import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useSubCategory';
+import React, { useState } 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 talonProps = useSubCategory({ children });
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        normalizedData
+    } = talonProps;
+    
+    const subCategory = [];
+    
+    normalizedData && normalizedData.map(({ text, path }, index) => {
+        subCategory.push(
+            <Link
+                key={index}
+                to={resourceUrl(path)}
+            >
+                <li className={classes.item}>{text}</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/components/CustomSubCategory/subCategory.module.css

@@ -0,0 +1,22 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 10px;
+}
+
+.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;
+}

package/src/components/FilterTop/CurrentTopFilters/currentTopFilter.js

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { shape, string, func } from 'prop-types';
+import { X as Remove } from 'react-feather';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Trigger from '@magento/venia-ui/lib/components/Trigger';
+import defaultClasses from '../FilterBlockList/filterTopItem.module.css';
+
+const CurrentTopFilter = props => {
+    const { group, item, removeItem, onRemove } = props;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(() => {
+        removeItem({ group, item });
+        if (typeof onRemove === 'function') {
+            onRemove(group, item);
+        }
+    }, [group, item, removeItem, onRemove]);
+
+    const ariaLabel = formatMessage(
+        {
+            id: 'filterModal.action.clearFilterItem.ariaLabel',
+            defaultMessage: 'Clear filter "{name}"'
+        },
+        {
+            name: item.label ? item.label : item.title
+        }
+    );
+
+    return (
+        <span className={classes.item} data-cy="CurrentTopFilter-root">
+            <Trigger
+                action={handleClick}
+                aria-label={ariaLabel}
+                data-cy="CurrentTopFilter-trigger"
+            >
+                All
+            </Trigger>
+        </span>
+    );
+};
+
+export default CurrentTopFilter;

package/src/components/FilterTop/CurrentTopFilters/currentTopFilter.module.css

@@ -0,0 +1,22 @@
+.root {
+    min-height: 24px;
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: font-semibold from global;
+    composes: gap-2xs from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: px-2 from global;
+    composes: py-1 from global;
+    composes: rounded-md from global;
+    /* composes: text-white from global; */
+    composes: text-base from global;
+}
+
+/* TODO @TW: cannot compose */
+.root svg {
+    /* composes: stroke-white from global; */
+    stroke: rgb(var(--venia-global-color-gray-600));
+}

package/src/components/FilterTop/CurrentTopFilters/currentTopFilters.js

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import { func, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CurrentTopFilter from './currentTopFilter';
+import defaultClasses from '../FilterBlockList/filterTopItem.module.css';
+
+const CurrentTopFilters = props => {
+    const { filterApi, filterState, onRemove, currentGroup } = props;
+    const { removeItem } = filterApi;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    // create elements and params at the same time for efficiency
+    const filterElements = useMemo(() => {
+        const elements = [];
+        for (const [group, items] of filterState) {
+            for (const item of items) {
+                const { title, value } = item || {};
+                const key = `${group}::${title}_${value}`;
+
+                const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+
+                if (group === currentGroup && !customAttributeLandingPage.includes(group)) {
+                    elements.push(
+                        <CurrentTopFilter
+                            group={group}
+                            item={item}
+                            removeItem={removeItem}
+                            onRemove={onRemove}
+                        />
+                    );
+                }
+            }
+        }
+
+        return elements;
+    }, [filterState, removeItem, onRemove]);
+
+    const currentFiltersAriaLabel = formatMessage({
+        id: 'filterModal.currentFilters.ariaLabel',
+        defaultMessage: 'Current Filters'
+    });
+
+    return filterElements && filterElements.length ? filterElements : <span className={classes.item}><b>All</b></span>
+};
+
+export default CurrentTopFilters;

package/src/components/FilterTop/CurrentTopFilters/currentTopFilters.module.css

@@ -0,0 +1,21 @@
+.root {
+    composes: px-[10px] from global;
+    composes: py-2 from global;
+    composes: overflow-auto from global;
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: gap-2 from global;
+}
+
+/* TODO @TW: cannot compose */
+.root:empty {
+    display: none;
+}
+
+.item {
+    composes: float-left from global;
+    composes: pb-0 from global;
+    composes: pl-0 from global;
+    composes: pr-2 from global;
+    composes: pt-2 from global;
+}

package/src/components/FilterTop/CurrentTopFilters/index.js

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