@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/components/MiniatureGameSets/miniatureGameSets.js

@@ -1,297 +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 { useMiniatureGameSets } from '@riosst100/pwa-marketplace/src/talons/MiniatureGameSets/useMiniatureGameSets';
-import { Link } from 'react-router-dom';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-import defaultClasses from './miniatureGameSets.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import cn from 'classnames';
-import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
-import { MiniatureGameSetsShimmer } from '@riosst100/pwa-marketplace/src/components/MiniatureGameSets';
-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 Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
-
-const MiniatureGameSets = props => {
-    const { categoryId } = props
-
-    const { location } = globalThis;
-
-    const query = new URLSearchParams(location.search);
-
-    const [active, setActive] = useState('all');
-    const [activeTab, setActiveTab] = useState('all');
-
-    const [searchQuery, setSearchQuery] = useState('');
-    
-    const shopby = query.get('shopby') || null;
-    const setType = query.get('set_type') || 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'
-    //     };
-    // }
-    
-    // Sorting
-    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
-    const [currentSort] = sortProps;
-    // const [sortBy, setSortBy] = useState({
-    //     sortText: 'All (A-Z)',
-    //     value: 'all'
-    // });
-
-    // let availableSortBy = [
-    //     {
-    //         'label': 'All (A-Z)',
-    //         'value': 'all'
-    //     },
-    //     {
-    //         'label': 'By Year',
-    //         'value': 'newest'
-    //     }
-    // ];
-
-    const classes = useStyle(defaultClasses);
-
-    const talonProps = useMiniatureGameSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
-
-    const { error, loading, miniatureGameSets, categoryUrlSuffix, categoryUrlKey, productType, filteredMiniatureGameSets, availableGroups, category } = talonProps;
-
-    if (loading && !miniatureGameSets)
-        return <MiniatureGameSetsShimmer />;
-    if (error && !miniatureGameSets) return <ErrorView />;
-
-    if (!miniatureGameSets && !loading && !error) {
-        return <MiniatureGameSetsShimmer />;
-    }
-
-    const setsLengthArr = [];
-
-    const newMiniatureGameSets = searchQuery ? filteredMiniatureGameSets : miniatureGameSets;
-
-    // useEffect(() => {
-        if (miniatureGameSets && miniatureGameSets.length) {
-            miniatureGameSets.map((setRelease, index) => {
-                const { group, sets } = setRelease;
-
-                setsLengthArr[group] = sets.length
-            })
-        }
-    // }, [miniatureGameSets])
-
-    const splitToNChunks = (array, n) => {
-        let result = [];
-        for (let i = n; i > 0; i--) {
-            result.push(array.splice(0, Math.ceil(array.length / i)));
-        }
-        return result;
-    }
-
-    let allSetsTitle = "Sets";
-    let attributeCode = "lego_set_name";
-    let byYearTitle = "By Year";
-    if (shopby == "singles") {
-        attributeCode = "lego_set_name";
-        allSetsTitle = "Singles";
-        byYearTitle = "By Year";
-    }
-
-    const setRelases = newMiniatureGameSets && newMiniatureGameSets.length && newMiniatureGameSets.map((setRelease, index) => {
-        const { group, sets } = setRelease;
-
-        const setsResult = [];
-
-        if (sets.length) {
-            sets.map((set, index) => {
-                const { set_name, option_id, release_year } = set;
-
-                const categoryUrl = resourceUrl(
-                    `/${category?.url_path}${categoryUrlSuffix || ''}?${attributeCode}[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}
-                    </Link>
-                </li>)
-            })
-        }
-
-        let setsResultSplitted = [];
-        if (active == group || newMiniatureGameSets.length == 1) {
-            setsResultSplitted = splitToNChunks(setsResult, 3);
-        }
-        
-        return (
-            <>
-                {active == "all" && newMiniatureGameSets.length > 1 ?
-                <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
-                    <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' >
-                        {group}
-                    </div>
-                    <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
-                </div> : ''}
-                {active == group || newMiniatureGameSets.length == 1 ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
-                    <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
-                        {index == 0 ? <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2'>{group}</div> : 
-                        <div className='singles_item_group_letter text-xl font-medium pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
-                        <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
-                    </div>
-                )
-                 : ''}
-            </>
-        );
-    });
-
-    const handleActive = (val) => {
-        setActive(val);
-
-        setSearchQuery('')
-    }
-
-    const handleActiveTab = (val) => {
-        setActiveTab(val);
-        setActive('all')
-
-        setSearchQuery('')
-    }
-    const handleSearchQuery = (val) => {
-        setSearchQuery(val)
-        setActive('all')
-    }
-
-    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 title = "Sets";
-    if (activeTab == "year") {
-        title = "Sets | By Year";
-    }
-
-    if (shopby == "singles") {
-        title = "Singles";
-        if (activeTab == "year") {
-            title = "Singles | By Year";
-        }
-    }
-    
-
-    return (
-        <Fragment>
-            <StoreTitle>{title}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={title} />
-            <ul className={classes.nav}>
-                <li className={classes.nav_item}>
-                    <button
-                        onClick={() => {
-                            handleActiveTab('year')
-                        }}
-                    >
-                        {activeTab == 'year' ? <b>{byYearTitle}</b> : byYearTitle}
-                    </button>
-                </li>
-                <li className={classes.nav_item}>
-                    <button
-                        onClick={() => {
-                            handleActiveTab('all')
-                        }}
-                    >
-                        {activeTab == 'all' ? <b>{allSetsTitle}</b> : allSetsTitle}
-                    </button>
-                </li>
-            </ul>
-            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                {title}
-            </h1>
-            {activeTab == "year" && <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>
-            ))}
-            <li className={classes.nav_item}>
-                <button
-                    onClick={() => {
-                        handleActive('all')
-                    }}
-                >
-                    {active == 'all' ? <b>All</b> : 'All'}
-                </button>
-            </li>
-            </ul>}
-            <div className='border border-gray-100 px-6'>
-                {miniatureGameSets ? (
-                    <div
-                        className={classes.toolbar}
-                    >
-                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
-                        {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
-                    </div>
-                ) : ''}
-                <section className='single_list-indexing-container relative m-auto pt-5'>
-                    {activeTab != "year" && <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)}>
-                        {newMiniatureGameSets && newMiniatureGameSets.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 MiniatureGameSets;

package/src/components/MiniatureGameSets/miniatureGameSets.module.css

@@ -1,76 +0,0 @@
-.nav {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    margin: 50px 0 30px 0;
-    composes: gap-[10px] from global;
-}
-
-.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-[15px] 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;
-    display: flex;
-    width: 100%;
-    flex-wrap: wrap;
-    flex-direction: row;
-}
-
-.singlesGroupWrapper {
-    width: 100%;
-}
-
-@media screen and (min-width: 768px) {
-    .singlesGroupWrapper {
-        width: 50%;
-    }
-}
-
-@media screen and (min-width: 1023px) {
-    .singlesGroupWrapper {
-        width: 33.33%;
-    }
-}

package/src/components/MiniatureGameSets/miniatureGameSets.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 './miniatureGameSets.module.css';
-import cn from 'classnames';
-import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
-
-const MiniatureGameSets = 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 MiniatureGameSets;

package/src/components/Modal/index.js

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

package/src/components/Modal/modal.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { blackTransparent } from '@riosst100/pwa-marketplace/src/theme/vars'
-
-const modal = (props) => {
-    const {
-        open = false, setOpen = () => { }, children = null,
-        rootClassName = '', className = '', closeOutside = false,
-    } = props;
-
-
-    return (
-        <>
-            {open && (
-                <div
-                    className={cn(
-                        'block overflow-hidden fixed top-0 right-0 left-0 z-dialog',
-                        'justify-center items-center w-full h-full bg-[#11182780]',
-                        rootClassName,
-                    )}
-                    onClick={() => {
-                        closeOutside ? setOpen(!open) : '';
-                    }}
-                >
-                    <div
-                        className={cn(
-                            'relative p-4 w-full min-h-[360px] max-w-md max-h-full',
-                            'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg',
-                            className
-                        )}
-                    >
-
-                        {children}
-                    </div>
-                    <style global jsx>
-                        {`
-                            body {
-                                overflow: hidden !important;
-                            }
-                        `}
-                    </style>
-                </div>
-            )}
-        </>
-    )
-}
-
-export default modal

package/src/components/MtgSinglesPage/index.js

@@ -1,62 +0,0 @@
-import React, { useState } from 'react';
-import Content from './mtgSingles';
-
-const index = (props) => {
-    const [active, setActive] = useState('all')
-    const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(i + 65));
-
-    const singles = [
-        { id: 1, name: "Amonkhet" },
-        { id: 2, name: "ApocalypseAPC" },
-        { id: 3, name: "AmonkhetAKH" },
-        { id: 4, name: "Rivals of IxalanRIX" },
-        { id: 5, name: "Rise of the EldraziROE" },
-        { id: 5, name: "Ravnica Remastered - VariantsRVR2" },
-        { id: 5, name: "Streets of New CapennaSNC" },
-        { id: 5, name: "Streets of New Capenna CommanderNCC" },
-        { id: 5, name: "ChroniclesCHR" },
-        { id: 5, name: "Commander 2019C19" },
-        { id: 5, name: "Commander - OversizedCMD2" },
-        { id: 5, name: "Throne of Eldraine - VariantsELD2" },
-        { id: 5, name: "TormentTOR" },
-        { id: 6, name: "Dominaria UnitedDMU" },
-        { id: 7, name: "Double Masters2XM" },
-        { id: 8, name: "WorldwakeWWK" },
-        { id: 8, name: "World ChampionshipWCHP" },
-        { id: 8, name: "Welcome Deck 2017W17" },
-        { id: 8, name: "ZendikarZEN" },
-        { id: 8, name: "Zendikar Rising - VariantsZNR2" },
-        { id: 8, name: "Visions" },
-        { id: 8, name: "Zendikar Rising ExpeditionsZNE" },
-    ];
-
-    const groupSinglesFirstLetter = (items) => {
-        return items.reduce((acc, item) => {
-            const firstLetter = item.name.charAt(0).toUpperCase();
-            acc[firstLetter] = acc[firstLetter] || [];
-            acc[firstLetter].push(item);
-            return acc;
-        }, {});
-    }
-
-    const groupedSingles = groupSinglesFirstLetter(singles);
-    const availableLetter = Object.keys(groupedSingles).sort();
-
-    const handleActive = (val) => {
-        setActive(val);
-    }
-
-    const contentProps = {
-        letters,
-        groupedSingles,
-        availableLetter,
-        active,
-        handleActive,
-        ...props
-    }
-    return (
-        <Content {...contentProps} />
-    )
-}
-
-export default index

package/src/components/MtgSinglesPage/mtgSingles.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
-import cn from 'classnames';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './singles.module.css';
-import { Link } from 'react-router-dom'
-
-const mtgSingles = (props) => {
-    const { letters, groupedSingles, active, handleActive, availableLetter } = props;
-
-    const classes = useStyle(defaultClasses);
-
-    return (
-        <>
-            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                MTG Singles
-            </h1>
-            <div className='border border-gray-100 px-6'>
-                <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')
-                                }}
-                            >
-                                All
-                            </button>
-                        </li>
-                        {letters.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 ',
-                                        !availableLetter.includes(letter) ? 'bg-gray-100 text-gray-400' : 'hover_bg-gray-50',
-                                    )}
-                                    onClick={() => {
-                                        handleActive(letter)
-                                    }}
-                                    disabled={!availableLetter.includes(letter)}
-                                >
-                                    {letter}
-                                </button>
-                            </li>
-                        ))}
-                    </ul>
-                </section>
-                <Divider className="mb-5 px-4" />
-                <section className='singles-container'>
-                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
-                        {availableLetter.map((initialLetter, index) => (
-                            <>
-                                {active === 'all' || active === initialLetter ? (
-                                    <div className='singles_group-wrapper mb-4 px-4 inline-block w-full' key={index}>
-                                        <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' >
-                                            {initialLetter}
-                                        </div>
-                                        <div
-                                            className={cn(
-                                                'singles_item-list flex flex-col'
-                                            )}
-                                        >
-                                            {groupedSingles[initialLetter].map((item, index) => (
-                                                <li key={index} className='list-none'>
-                                                    <Link
-                                                        to="/"
-                                                        className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2"
-                                                    >
-                                                        {item.name}
-                                                    </Link>
-                                                </li>
-                                            ))}
-                                        </div>
-                                    </div>
-                                ) : null}
-                            </>
-                        ))}
-                    </div>
-                </section>
-            </div>
-        </>
-    )
-}
-
-export default mtgSingles

package/src/components/MtgSinglesPage/singles.module.css

@@ -1,15 +0,0 @@
-.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/NonSportCardsSets/index.js

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