@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/components/AccountLayout/index.js

@@ -1,194 +0,0 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
-import defaultClasses from './accountlayout.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { ArrowDown2 } from 'iconsax-react';
-import { useWindowSize } from '@magento/peregrine';
-import cn from 'classnames';
-import { useLocation } from 'react-router-dom';
-
-const AccountLayout = (props) => {
-    const { children } = props;
-    const [isOpen, setIsOpen] = React.useState(false);
-    const toggleDropdown = () => setIsOpen(!isOpen);
-    const windowSize = useWindowSize();
-    const isTablet = windowSize.innerWidth <= 1023;
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const location = useLocation();
-    const { pathname } = location
-
-    const [activeMenu, setActiveMenu] = useState(pathname);
-
-    const handleActiveMenu = () => {
-        setActiveMenu(pathname)
-    }
-
-    return (
-        <>
-            <div className='flex flex-col lg_flex-row lg_justify-between gap-[30px] mt-8 relative'>
-                {isTablet ? (
-                    <button
-                        onClick={toggleDropdown}
-                        className={cn(
-                            'text-[14px] font-medium flex justify-between items-center gap-x-4 border',
-                            'border-gray-100 border-solid rounded-md min-w-max px-2.5 py-3',
-                        )}
-                    >
-                        <span>My Account</span>
-                        <ArrowDown2
-                            size={14}
-                            className={cn(
-                                'text-colorDefault transition-all',
-                                isOpen ? 'rotate-180' : 'rotate-0',
-                            )}
-                        />
-                    </button>
-                ) : null}
-
-                <div
-                    className={cn(
-                        classes.menu,
-                        'hidden lg_block z-[1]',
-                        isTablet && isOpen ? 'absolute !block bg-white w-full top-14' : '',
-                    )}
-                >
-                    <div
-                        className={cn(
-                            'flex flex-col border border-gray-100 rounded-lg px-2.5 py-5 gap-y-2'
-                        )}
-                    >
-                        <li className="list-none">
-                            <Link
-                                to="/order-history"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/order-history' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.orderHistory'}
-                                    defaultMessage={'Order History'}
-                                />
-
-                            </Link>
-                        </li>
-                        <li className="list-none">
-                            <Link
-                                to="/quotes"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/quotes' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.Quotes'}
-                                    defaultMessage={'Quotes'}
-                                />
-
-                            </Link>
-                        </li>
-                        <li className="list-none">
-                            <Link
-                                to="/wishlist"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/wishlist' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.wishlist'}
-                                    defaultMessage={'Wishlist'}
-                                />
-
-                            </Link>
-                        </li>
-                        <li className="list-none">
-                            <Link
-                                to="/favorite-seller"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/favorite-seller' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.favoriteSeller'}
-                                    defaultMessage={'Favorite Seller'}
-                                />
-
-                            </Link>
-                        </li>
-                        <li className="list-none">
-                            <Link
-                                to="/address-book"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/address-book' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.addressBook'}
-                                    defaultMessage={'Address Book'}
-                                />
-
-                            </Link>
-                        </li>
-                        <li className="list-none">
-                            <Link
-                                to="/saved-payments"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/saved-payments' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.payments'}
-                                    defaultMessage={'Payments'}
-                                />
-
-                            </Link>
-                        </li>
-                        <li className="list-none">
-                            <Link
-                                to="/communications"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/communications' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.newsletter'}
-                                    defaultMessage={'Newsletter'}
-                                />
-
-                            </Link>
-                        </li>
-                        <li className="list-none">
-                            <Link
-                                to="/account-information"
-                                className={cn(
-                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
-                                    activeMenu === '/account-information' ? 'bg-gray-150' : ''
-                                )}
-                            >
-                                <FormattedMessage
-                                    id={'myaccount.accountInformation'}
-                                    defaultMessage={'Account Information'}
-                                />
-
-                            </Link>
-                        </li>
-
-                    </div>
-                </div>
-                <div className={cn(classes.blockContent, 'block')}>
-                    {children}
-                </div>
-            </div >
-        </>
-    )
-}
-
-export default AccountLayout

package/src/components/AlphaFilter/alphaFilter.js

@@ -1,103 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
-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 './alphaFilter.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 ProductSort from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort';
-import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
-
-const AlphaFilter = props => {
-    const {items, handleActiveLetter, activeLetter, isSingles } = props;
-
-    const groupSinglesFirstLetter = (data) => {
-        return data.reduce((acc, item) => {
-            if (item) {
-                const { custom_attributes } = item;
-                if (custom_attributes) {
-                    let cardName = '';
-                    custom_attributes.some((attribute, index) => {
-                        const { attribute_metadata, entered_attribute_value, selected_attribute_options } = attribute
-                        if (attribute_metadata.code == "card_name") {
-                            cardName = selected_attribute_options.attribute_option[0].label;
-
-                            return true;
-                        }
-
-                        return false;
-                    });
-
-                    if (cardName) {
-                        const firstLetter = cardName.charAt(0).toUpperCase();
-                        acc[firstLetter] = acc[firstLetter] || [];
-                        acc[firstLetter].push(item);
-                    }
-                }
-            }
-
-            return acc;
-        }, {});
-    }
-
-    const groupedSingles = items ? groupSinglesFirstLetter(items) : null;
-    const availableLetter = groupedSingles ? Object.keys(groupedSingles).sort() : [];
-    
-    const 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'];
-
-    return isSingles && <>
-        <section className='single_list-indexing-container relative m-auto py-1'>
-            <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]',
-                                'leading-4 font-medium text-base ',
-                                availableLetter.includes(letter) ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
-                            )}
-                            onClick={() => {
-                                handleActiveLetter(letter)
-                            }}
-                            disabled={availableLetter.includes(letter) > 0 ? false : true}
-                        >
-                            {letter}
-                        </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]',
-                            'leading-4 font-medium text-base hover_bg-gray-50'
-                        )}
-                        onClick={() => {
-                            handleActiveLetter('all')
-                        }}
-                    >
-                        All
-                    </button>}
-                </li>
-            </ul>
-        </section>
-    </>
-}
-
-export default AlphaFilter;

package/src/components/AlphaFilter/alphaFilter.module.css

@@ -1,38 +0,0 @@
-.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;
-}
-
-@media screen and (min-width: 768px) {
-    .singlesWrapper {
-        column-count: 2;
-    }
-}
-
-@media screen and (min-width: 1023px) {
-    .singlesWrapper {
-        column-count: 3;
-    }
-}

package/src/components/AlphaFilter/alphaFilter.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 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-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/AlphaFilter/index.js

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

package/src/components/ArraySearchInput/arraySearchInput.js

@@ -1,100 +0,0 @@
-import React, { useCallback } from 'react';
-import { bool, shape, string } from 'prop-types';
-import { Form } from 'informed';
-import { useIntl } from 'react-intl';
-import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Autocomplete from '@magento/venia-ui/lib/components/SearchBar/autocomplete';
-import defaultClasses from './arraySearchInput.module.css';
-import Dropdown from '@riosst100/pwa-marketplace/src/components/Dropdown';
-import cn from 'classnames';
-import SearchField from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar/searchField';
-import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
-import { useArraySearchInput } from '@riosst100/pwa-marketplace/src/talons/ArraySearchInput/useArraySearchInput';
-
-const ArraySearchInput = React.forwardRef((props, ref) => {
-    const { isOpen, placeholder, setSearchQuery, active, setActive } = props;
-    const talonProps = useArraySearchInput({ active });
-    // const fieldState = useFieldState('search_query');
-    const {
-        containerRef,
-        // handleChange,
-        handleFocus,
-        // handleSubmit,
-        initialValues,
-        isAutoCompleteOpen,
-        setIsAutoCompleteOpen,
-        valid
-    } = talonProps;
-
-    const handleSubmit = useCallback(
-        ({ search_query }) => {
-            return false;
-        },
-        []
-    );
-
-    const handleChange = useCallback(
-        value => {
-            // const hasValue = !!value;
-            // const isValid = hasValue && value.length > 2;
-
-            setSearchQuery(value)
-
-            
-
-            // setValid(isValid);
-            // setIsAutoCompleteOpen(hasValue);
-        },
-        [setSearchQuery]
-    );
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const rootClassName = isOpen ? classes.root_open : classes.root;
-    const { formatMessage } = useIntl();
-
-    return (
-        <div className={rootClassName} data-cy="ArraySearchInput-root" ref={ref}>
-            <div ref={containerRef} className={classes.container}>
-                <Form
-                    autoComplete="off"
-                    className={classes.form}
-                    initialValues={initialValues}
-                    onSubmit={handleSubmit}
-                >
-                    <div
-                        className={cn(
-                            classes.search,
-                            'flex flex-row relative border border-gray-100 rounded-full'
-                        )}
-                    >
-                        <SearchField
-                            addLabel={formatMessage({
-                                id: 'global.clearText',
-                                defaultMessage: 'Clear Text'
-                            })}
-                            isSearchOpen={isAutoCompleteOpen}
-                            onChange={handleChange}
-                            onFocus={handleFocus}
-                        />
-                    </div>
-                </Form>
-            </div>
-        </div>
-    );
-});
-
-export default ArraySearchInput;
-
-ArraySearchInput.propTypes = {
-    classes: shape({
-        autocomplete: string,
-        container: string,
-        form: string,
-        root: string,
-        root_open: string,
-        search: string
-    }),
-    isOpen: bool
-};

package/src/components/ArraySearchInput/arraySearchInput.module.css

@@ -1,48 +0,0 @@
-.root {
-    composes: items-center from global;
-    composes: justify-items-center from global;
-    composes: justify-self-center from global;
-    composes: py-0 from global;
-    composes: w-full from global;
-
-    /* TODO @TW: review (B6) */
-    /* composes: hidden from global; */
-    display: none;
-}
-
-.root_open {
-    composes: root;
-
-    composes: z-dropdown from global;
-
-    /* TODO @TW: review (B6) */
-    /* composes: grid from global; */
-    display: grid;
-}
-
-.form {
-    composes: grid from global;
-    composes: items-center from global;
-    composes: justify-items-stretch from global;
-    composes: w-full from global;
-}
-
-.container {
-    composes: inline-flex from global;
-    composes: items-center from global;
-    composes: justify-center from global;
-    composes: max-w-full from global;
-    composes: relative from global;
-    composes: w-full from global;
-}
-
-.search {
-    composes: relative from global;
-    padding-left: 20px;
-}
-
-.autocomplete {
-    composes: grid from global;
-    /* composes: relative from global; */
-    composes: z-menu from global;
-}

package/src/components/ArraySearchInput/index.js

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

package/src/components/AttributesBlock/attributesBlock.js

@@ -1,54 +0,0 @@
-import { useAttributesBlock } from '@riosst100/pwa-marketplace/src/talons/AttributesBlock/useAttributesBlock';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-import defaultClasses from './attributesBlock.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-const AttributesBlock = props => {
-    const { attributesBlock, category } = props;
-
-    const talonProps = useAttributesBlock({ attributesBlock });
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const {
-        categoryUrlSuffix,
-        getPath
-    } = talonProps;
-    
-    const result = [];
-    
-    attributesBlock && attributesBlock.map(({ label, code, items }, index) => {
-
-        const itemsResult = [];
-
-        items && items.map(({ label, value }, index) => {
-            const path = resourceUrl(
-                `/${category.url_path}${categoryUrlSuffix || ''}?${code}[filter]=${label},${value}`
-            );
-
-            itemsResult.push(
-                <>
-                    <Link
-                            key={index}
-                            to={path}
-                        >
-                        <li className={classes.item}>{label}</li>
-                    </Link>
-                </>
-            )
-        });
-
-        result.push(
-            <span key={index}>
-                <div className={classes.title}>{label}</div>
-                <ul className={classes.root}>{itemsResult}</ul>
-            </span>
-        )
-    });
-
-    return result;
-};
-
-export default AttributesBlock;

package/src/components/AttributesBlock/attributesBlock.module.css

@@ -1,28 +0,0 @@
-.root {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: mt-3 from global;
-    composes: gap-[15px] from global;
-    margin-bottom: 30px;
-}
-
-.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;
-}
-
-.title {
-    composes: pb-3 from global;
-    composes: font-bold from global;
-    composes: text-[14px] from global;
-}