@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/components/BrandSlider/brandSlider.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import Slider from "react-slick";
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+import cn from 'classnames';
+import Item from './item';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+const CustomArrow = (props) => {
+    const { isNext = true, onClick, className } = props;
+    return (
+        <span
+            className={cn(
+                className,
+                'custom_arrow rounded-full w-10 h-10 p-2.5 bg-white hover_!bg-white z-[1] !border !border-solid !border-gray-100 before_hidden',
+                isNext ? 'right-2 lg_right-4' : 'left-2 lg_left-4',
+            )}
+            onClick={onClick}
+        >
+            {isNext ? (
+                <ArrowRight2 className='' size="20" color={primary900} />
+            ) : (
+                <ArrowLeft2 size="20" color={primary900} />
+            )}
+        </span>
+    )
+}
+
+const brandSlider = (props) => {
+
+    const settings = {
+        dots: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 5,
+        slidesToScroll: 1,
+        nextArrow: <CustomArrow />,
+        prevArrow: <CustomArrow isNext={false} />,
+        centerPadding: "60px",
+        responsive: [
+            {
+                breakpoint: 1023,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 767,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 576,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    };
+    return (
+        <div className='brand_items-container flex flex-col gap-x-4 gap-y-5'>
+            <div className='text-[18px] font-medium'>
+                Shop by brands
+            </div>
+            <Slider {...settings}>
+                {[...Array(9)].map(() => {
+                    return (
+                        <Item {...props} />
+                    )
+                })}
+            </Slider>
+            <style global jsx>
+                {`
+                    .brand_items-container .slick-slider {
+                        margin: 0 -8px;
+                    }
+                    @media only screen and (min-width: 1024px) {
+                        .brand_items-container .slick-slider {
+                            margin: 0 -16px;
+                        }
+                    }
+                `}
+            </style>
+        </div>
+    )
+}
+
+export default brandSlider

package/src/components/BrandSlider/index.js

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

package/src/components/BrandSlider/item.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import cn from 'classnames';
+
+const Item = (props) => {
+    const {
+        name = 'Tamashii Nations', rootClassName, onClick = () => { },
+        className = "",
+    } = props;
+
+    const initialName = (name) => {
+        if (!name) return ""; // Handle empty names
+
+        const words = name.split(" ");
+        let initials = "";
+
+        for (const word of words) {
+            initials += word.charAt(0).toUpperCase();
+        }
+
+        return initials;
+    }
+    return (
+        <div className={cn('brand-item-container px-2 lg_px-4', rootClassName)} onClick={onClick}>
+            <div
+                className={cn(
+                    'm-auto flex flex-col',
+                    'w-full max-w-[250px]',
+                    'relative rounded-lg border border-gray-100 bg-white',
+                    className,
+                )}
+            >
+                <div className="brand_logo-wrapper w-full min-h-[120px] rounded-t-lg">
+
+                </div>
+                <div
+                    className={cn(
+                        'bg-darkblue-900 text-white uppercase text-lg font-bold leading-5 absolute min-w-[60px] text-center',
+                        'p-5 rounded-md top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2'
+                    )}
+                >
+                    {initialName(name)}
+                </div>
+                <div className='brand_name-wrapper flex items-center justify-center w-full min-h-[110px]'>
+                    <span className='text-base font-medium'>
+                        {name}
+                    </span>
+                </div>
+                <style global jsx>
+                    {`
+                        .brand_logo-wrapper {
+                            background: rgb(217, 217, 217);
+                            background: linear-gradient(180deg, rgb(217, 217, 217) 0%, rgba(217, 217, 217, 0) 100%);
+                        }
+                    `}
+                </style>
+            </div>
+        </div>
+    )
+}
+
+export default Item;

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -0,0 +1,252 @@
+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';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './collectibleGameSets.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { CollectibleGameSetsShimmer } from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets';
+import 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 [searchQuery, setSearchQuery] = useState('');
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const shopby = query.get('shopby') || null;
+
+    let defaultSort = {
+        sortText: 'All (A-Z)',
+        value: 'all'
+    };
+    
+    if (shopby == "release_year") {
+        defaultSort = {
+            sortText: 'All (By Year)',
+            value: 'date'
+        };
+    }
+
+    // if (productType == "expansion_sets") {
+    //     defaultSort = {
+    //         sortText: 'All (Expansion Sets)',
+    //         value: 'all'
+    //     };
+    // }
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
+
+    const [currentSort] = sortProps;
+
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useCollectibleGameSets({ searchQuery, setActive, currentSort });
+
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets, availableGroups } = talonProps;
+
+    if (loading && !collectibleGameSets)
+        return <CollectibleGameSetsShimmer />;
+    if (error && !collectibleGameSets) return <ErrorView />;
+
+    if (!collectibleGameSets && !loading && !error) {
+        return <CollectibleGameSetsShimmer />;
+    }
+
+    const setsLengthArr = [];
+
+    const newCollectibleGameSets = searchQuery ? filteredCollectibleGameSets : collectibleGameSets;
+
+    // useEffect(() => {
+        if (collectibleGameSets) {
+            collectibleGameSets.map((setRelease, index) => {
+                const { release_type, sets } = setRelease;
+
+                setsLengthArr[release_type] = sets.length
+            })
+        }
+    // }, [collectibleGameSets])
+
+    const setRelases = newCollectibleGameSets.map((setRelease, index) => {
+        const { release_type, sets } = setRelease;
+
+        const setsResult = [];
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id, set_abbreviation, release_year } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
+                );
+
+                setsResult.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">
+                        {set_name} <small style={{"color":"grey"}}>{set_abbreviation}</small>
+                    </Link>
+                </li>)
+            })
+        }
+        
+        return (
+            <>
+                {active == "all" || active == release_type ?
+                <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                    <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' >
+                        {release_type}
+                    </div>
+                    <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                </div> : ''}
+            </>
+        );
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+
+        // 
+
+
+        setSearchQuery('')
+    }
+
+    let 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'];
+
+    let availableSortBy = [
+        {
+            'label': 'All (A-Z)',
+            'value': 'all'
+        },
+        {
+            'label': 'Latest Sets',
+            'value': 'newest'
+        }
+    ];
+
+    if (shopby == "release_year") {
+        availableSortBy = [
+            {
+                'label': 'All (By Year)',
+                'value': 'date'
+            },
+            {
+                'label': 'Latest Sets',
+                'value': 'newest'
+            }
+        ];
+
+        // alpha = availableGroups;
+    }
+
+    if (productType == "expansion_sets") {
+        // availableSortBy = [
+        //     {
+        //         'label': 'All (Expansion Sets)',
+        //         'value': 'all'
+        //     },
+        //     {
+        //         'label': 'Latest Sets',
+        //         'value': 'newest'
+        //     }
+        // ];
+
+        // alpha = availableGroups
+    }
+
+    let title = "All Sets";
+    if (productType == "expansion_sets") {
+        title = "Expansion Sets";
+    } else if (productType == "artist") {
+        title = "By Artist";
+    } else if (shopby == "release_year") {
+        title = "By Year";
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            {shopby != "release_year" && productType != "expansion_sets" && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {title}
+            </h1>}
+            {shopby == "release_year" || productType == "expansion_sets" && <ul className={classes.nav}>
+                {availableGroups.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActive(group)
+                        }}
+                    >
+                        {active == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+            ))}
+            </ul>}
+            <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>
+                ) : ''}
+                <>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <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 ',
+                                            setsLengthArr[letter] > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                        )}
+                                        onClick={() => {
+                                            handleActive(letter)
+                                        }}
+                                        disabled={setsLengthArr[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)}>
+                        {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>
+        </Fragment>
+    );
+}
+
+export default CollectibleGameSets;

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

@@ -0,0 +1,69 @@
+.nav {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[10px] from global;
+    margin-bottom: 10px;
+}
+
+.nav_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;
+}
+
+.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-[10px] 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/CollectibleGameSets/collectibleGameSets.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 pt-5'>
+                        <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-medium 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-medium 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-medium 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-medium 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-medium 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-medium 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/index.js

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

package/src/components/CollectibleGameSetsPage/collectibleGameSetsPage.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
+
+const CollectibleGameSetsPage = () => {
+    return (
+        <CollectibleGameSets />
+    )
+}
+
+export default CollectibleGameSetsPage;

package/src/components/CollectibleGameSetsPage/index.js

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

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-medium 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-medium 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-medium'>
+                        $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-medium 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,11 @@
+import React from 'react'
+
+const starIcon = ({ width = 14, height = 14 }) => {
+    return (
+        <>
+            <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="#F7C317"><path d="m13.73 3.51 1.76 3.52c.24.49.88.96 1.42 1.05l3.19.53c2.04.34 2.52 1.82 1.05 3.28l-2.48 2.48c-.42.42-.65 1.23-.52 1.81l.71 3.07c.56 2.43-.73 3.37-2.88 2.1l-2.99-1.77c-.54-.32-1.43-.32-1.98 0l-2.99 1.77c-2.14 1.27-3.44.32-2.88-2.1l.71-3.07c.13-.58-.1-1.39-.52-1.81l-2.48-2.48c-1.46-1.46-.99-2.94 1.05-3.28l3.19-.53c.53-.09 1.17-.56 1.41-1.05l1.76-3.52c.96-1.91 2.52-1.91 3.47 0Z" stroke="#F7C317" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
+        </>
+    )
+}
+
+export default starIcon