@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/components/BrandSlider/brandSlider.js

@@ -1,91 +0,0 @@
-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

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

package/src/components/BrandSlider/item.js

@@ -1,61 +0,0 @@
-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

@@ -1,252 +0,0 @@
-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

@@ -1,69 +0,0 @@
-.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

@@ -1,50 +0,0 @@
-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

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

package/src/components/CollectibleGameSetsPage/collectibleGameSetsPage.js

@@ -1,10 +0,0 @@
-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

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

package/src/components/CrossSeller/crossSellerBuy.js

@@ -1,19 +0,0 @@
-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

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

package/src/components/CrossSeller/item.js

@@ -1,79 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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