@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/components/FilterTop/FilterBlockList/filterTopItem.js

@@ -1,79 +0,0 @@
-import React, { useCallback } from 'react';
-import defaultClasses from './filterTopItem.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { Link } from 'react-router-dom';
-
-const FilterTopItem = props => {
-    const { setFilterBy, filterBy, filterApi, group, item, onApply, labels, activeFilters, search } = props;
-    const { removeGroup, toggleItem } = filterApi;
-    const { title, value } = item;
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const label = item.label ? item.label : item.title;
-
-    const handleOnchange = useCallback(
-        e => {
-            if (group != "category_uid") {
-                removeGroup({ group });
-                if (e === item.value) {
-                    toggleItem({ group, item });
-                }
-            }
-            setFilterBy('')
-            if (typeof onApply === 'function') {
-                onApply(group, item);
-            }
-        },
-        [group, item, onApply, removeGroup, toggleItem]
-    );
-
-    let filterSearchArr = search ? search.split('&') : [];
-    let categoryIdFilters = [];
-    let shopbyFilters = [];
-    if (filterSearchArr) {
-        categoryIdFilters = filterSearchArr.filter(function(data) {
-            return data && data.includes('cat_id');
-        })
-        shopbyFilters = filterSearchArr.filter(function(data) {
-            return data && data.includes('shopby');
-        })
-    }
-
-    // console.log(filterSearchArr)
-
-    // const catId = null;
-
-    const element = group == "filterby" ? (
-        filterBy == value ? (
-            <span className={classes.item}><b>{title}</b></span>
-        ) : (
-            <span className={classes.item} onClick={() => setFilterBy(value)}>{title}</span>
-        )
-    ) : group == "category" ? (
-        <Link className={classes.item} to={'/'+value}>{title}</Link>
-    ) : value == "shopby_all" ? (
-        <Link className={classes.item} to={search ? search + '&shopby=' + group : '?shopby=' + group}>{title}</Link>
-    ) : group == "shopby" || group == "shopby_with_all" ? (
-        <Link className={classes.item} to={search ? search + '&shopby=' + value : '?shopby=' + value}>{title}</Link>
-    ) : group == "cat_id" ? (
-        value == "all" && !categoryIdFilters.length || categoryIdFilters.length && categoryIdFilters[0].includes('cat_id='+value) ? (
-            <span className={classes.item}><b>{title}</b></span>
-        ) : (
-            value == "all" ? <Link className={classes.item} to={'#'}>{title}</Link> : 
-            <Link className={classes.item} to={'?cat_id=' + value + (shopbyFilters.length ? '&' + shopbyFilters[0] : '')}>{title}</Link>
-        )
-    ) : (
-        activeFilters && activeFilters.includes(value) ? (
-            <span className={classes.item}><b>{title}</b></span>
-        ) : (
-            <span className={classes.item} onClick={() =>handleOnchange(value)}>{title}</span>
-        )
-    )
-
-    labels.set(element, label);
-
-    return element;
-};
-
-export default FilterTopItem;

package/src/components/FilterTop/FilterBlockList/filterTopItem.module.css

@@ -1,14 +0,0 @@
-.item {
-    composes: px-4 from global;
-    composes: py-2 from global;
-    composes: transition-colors from global;
-    composes: duration-150 from global;
-    composes: border from global;
-    composes: border-solid from global;
-    composes: leading-normal from global;
-    composes: text-base from global;
-    composes: text-colorDefault from global;
-    composes: bg-white from global;
-    composes: border-gray-100 from global;
-    border-radius: 5px;
-}

package/src/components/FilterTop/FilterBlockList/filterTopItemGroup.js

@@ -1,95 +0,0 @@
-import React, { useMemo, useEffect } from 'react';
-import FilterTopItem from './filterTopItem';
-import { useFieldApi } from 'informed';
-import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './filterTopItemGroup.module.css';
-import CurrentTopFilter from '@riosst100/pwa-marketplace/src/components/FilterTop/CurrentTopFilters/currentTopFilter';
-
-const FilterTopItemGroup = props => {
-    const { setFilterBy, filterBy, filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState, search } = props;
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const currentGroup = group;
-    const { removeItem } = filterApi;
-    const activeFilters = [];
-
-    // Current Filters
-    const filterElements = useMemo(() => {
-        const elements = [];
-        for (const [group, items] of originalFilterState) {
-            for (const item of items) {
-                const { title, value } = item || {};
-                const key = `${group}::${title}_${value}`;
-
-                if (group === currentGroup) {
-                    activeFilters.push(item.value)
-                    elements.push(
-                        <CurrentTopFilter
-                            group={group}
-                            item={item}
-                            removeItem={removeItem}
-                            onRemove={onApply}
-                        />
-                    );
-                }
-            }
-        }
-
-        return elements;
-    }, [originalFilterState, removeItem, onApply]);
-
-    const radioItems = useMemo(() => {
-        return items.map(item => {
-            const code = `item-${group}-${item.value}`;
-            return (
-                <FilterTopItem
-                    key={code}
-                    setFilterBy={setFilterBy}
-                    filterBy={filterBy}
-                    filterApi={filterApi}
-                    filterState={filterState}
-                    group={group}
-                    activeFilters={activeFilters}
-                    search={search}
-                    item={item}
-                    onApply={onApply}
-                    labels={labels}
-                />
-            );
-        });
-    }, [filterApi, filterState, group, items, labels, onApply]);
-
-    const fieldValue = useMemo(() => {
-        if (filterState) {
-            for (const item of items) {
-                if (filterState.has(item)) {
-                    return item.value;
-                }
-            }
-        }
-
-        return null;
-    }, [filterState, items]);
-    const field = `item-${group}`;
-    const fieldApi = useFieldApi(field);
-    const fieldState = useFieldState(field);
-    useEffect(() => {
-        if (field && fieldValue === null) {
-            fieldApi.reset();
-        } else if (field && fieldValue !== fieldState.value) {
-            fieldApi.setValue(fieldValue);
-        }
-    }, [field, fieldApi, fieldState.value, fieldValue]);
-
-    return (
-        <div className={classes.root}>
-            {radioItems}
-            {filterElements && filterElements.length > 10 ? <span className={classes.item}><b>More Item</b></span> : ''}
-            {filterElements && filterElements.length ? filterElements : group && group != "character" && group != "product_series" && group != "scale" && group != "product_line" && group != "trains" && group != "franchise" && group != "brands" && group != "category" && group != "filterby" && group != "shopby" && group != "cat_id" ? (<span className={classes.item}><b>All</b></span>) : ''}
-        </div>
-    );
-};
-
-export default FilterTopItemGroup;

package/src/components/FilterTop/FilterBlockList/filterTopItemGroup.module.css

@@ -1,23 +0,0 @@
-.root {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: mt-3 from global;
-    composes: gap-[10px] from global;
-    margin-bottom: 10px;
-    /* justify-content: center; */
-}
-
-.item {
-    composes: px-4 from global;
-    composes: py-2 from global;
-    composes: transition-colors from global;
-    composes: duration-150 from global;
-    composes: border from global;
-    composes: border-solid from global;
-    composes: leading-normal from global;
-    composes: text-base from global;
-    composes: text-colorDefault from global;
-    composes: bg-white from global;
-    composes: border-gray-100 from global;
-    border-radius: 5px;
-}

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

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

package/src/components/FilterTop/filterTop.js

@@ -1,176 +0,0 @@
-import React, { useMemo, useCallback, useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { array, arrayOf, shape, string, number } from 'prop-types';
-import { useFilterTop } from '@riosst100/pwa-marketplace/src/talons/FilterTop';
-import { useLocation } from 'react-router-dom';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
-import FilterTopBlock from './filterTopBlock';
-import defaultClasses from './filterTop.module.css';
-import { Filter } from 'iconsax-react';
-import cn from 'classnames';
-import { useHistory } from 'react-router-dom';
-import { Link } from 'react-router-dom';
-import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
-
-
-const SCROLL_OFFSET = 150;
-
-/**
- * A view that displays applicable and applied filters.
- *
- * @param {Object} props.filters - filters to display
- */
-const FilterTop = props => {
-    const { shopby, filters, filterCountToOpen, allowedFilters, category } = props;
-    const [filterBy, setFilterBy] = useState('');
-
-    // console.log(filterBy)
-    const talonProps = useFilterTop({ shopby, filters, category, filterBy, setFilterBy });
-    const {
-        filterApi,
-        filterItems,
-        filterNames,
-        filterFrontendInput,
-        filterState,
-        handleApply,
-        handleReset,
-        customFilters
-    } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const [activeSportCardsSetsFilter, setActiveSportCardsSetsFilter] = useState('all');
-    const [activeBaseSetFilter, setActiveBaseSetFilter] = useState('all');
-
-    const { search } = useLocation();
-
-    // const filtersSearch = getFiltersFromSearch(search);
-
-    // console.log(search)
-
-    // filters.forEach((values, key) => {
-    //     newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-    // });
-
-    const filterRef = useRef();
-
-    const handleApplyFilter = useCallback(
-        (...args) => {
-            const filterElement = filterRef.current;
-            if (
-                filterElement &&
-                typeof filterElement.getBoundingClientRect === 'function'
-            ) {
-                const filterTop = filterElement.getBoundingClientRect().top;
-                const windowScrollY =
-                    window.scrollY + filterTop - SCROLL_OFFSET;
-                window.scrollTo(0, windowScrollY);
-            }
-
-            handleApply(...args);
-        },
-        [handleApply, filterRef]
-    );
-
-    const history = useHistory();
-
-    const handleCategoryApplyFilter = useCallback(
-        (...args) => {
-            // const filterElement = filterRef.current;
-            // if (
-            //     filterElement &&
-            //     typeof filterElement.getBoundingClientRect === 'function'
-            // ) {
-                // const filterTop = filterElement.getBoundingClientRect().top;
-                // const windowScrollY =
-                //     window.scrollY + filterTop - SCROLL_OFFSET;
-                // window.scrollTo(0, windowScrollY);
-            // }
-
-            history.push('/'+args[1].path+'.html');
-
-            if (args[0] != "category_uid") {
-                handleApply(...args);
-            }
-        },
-        [handleApply, filterRef]
-    );
-
-    // const allowedFiltersArr = [];
-
-    // allowedFilters.length && allowedFilters.map((val, index) => {
-    //     allowedFiltersArr.push(val.code);
-    // });
-    // const allowedFiltersArr = ['card_rarity','card_print_version','card_set', 'card_product_type'];
-
-    // console.log(customFilters)
-
-    // console.log(filterItems)
-
-    const filtersList = useMemo(
-        () =>
-            Array.from(filterItems, ([group, items], iteration) => {
-                const blockState = filterState.get(group);
-                const groupName = filterNames.get(group);
-                const frontendInput = filterFrontendInput.get(group);
-                
-                if (customFilters && customFilters.length && customFilters.includes(group)) {
-                    return (
-                        <FilterTopBlock
-                            key={group}
-                            setFilterBy={setFilterBy}
-                            filterBy={filterBy}
-                            filterNames={filterNames}
-                            filterApi={filterApi}
-                            filterState={blockState}
-                            originalFilterState={filterState}
-                            filterFrontendInput={frontendInput}
-                            group={group}
-                            search={search}
-                            items={items}
-                            name={groupName}
-                            onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
-                            initialOpen={iteration < filterCountToOpen}
-                        />
-                    );
-                }
-            }),
-        [
-            filterApi,
-            filterItems,
-            filterNames,
-            filterFrontendInput,
-            filterState,
-            filterCountToOpen,
-            customFilters,
-            handleApplyFilter
-        ]
-    );
-
-    return (
-        <div>
-            {/* <div className={classes.root}>
-            {sportCardsSetsFilter.map(({label, value}, index) => 
-                activeSportCardsSetsFilter == value ? <span className={classes.item}><b>{label}</b></span> : <span onClick={() => setActiveSportCardsSetsFilter(value)} className={classes.item}>{label}</span>
-            )}
-            </div>
-            <div className={classes.root}>
-            {activeSportCardsSetsFilter == "base_set" && baseSetFilter.map(({label, value}, index) => 
-                activeBaseSetFilter == value ? <span className={classes.item}><b>{label}</b></span> : <span onClick={() => setActiveBaseSetFilter(value)} className={classes.item}>{label}</span>
-            )}
-            </div> */}
-            {filtersList}
-            {/* {activeSportCardsSetsFilter == "inserts_parallel" && (
-                <>
-                    <div className={classes.root}>
-                        <Link to={'?shopby=inserts'} className={classes.item}>Inserts</Link>
-                        <Link to={'?shopby=parallel'} className={classes.item}>Parallel</Link>
-                    </div>
-                </>
-            )} */}
-        </div>
-    );
-};
-
-export default FilterTop;

package/src/components/FilterTop/filterTop.module.css

@@ -1,23 +0,0 @@
-.root {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: mt-3 from global;
-    composes: gap-[10px] from global;
-    margin-bottom: 10px;
-    /* justify-content: center; */
-}
-
-.item {
-    composes: px-4 from global;
-    composes: py-2 from global;
-    composes: transition-colors from global;
-    composes: duration-150 from global;
-    composes: border from global;
-    composes: border-solid from global;
-    composes: leading-normal from global;
-    composes: text-base from global;
-    composes: text-colorDefault from global;
-    composes: bg-white from global;
-    composes: border-gray-100 from global;
-    border-radius: 5px;
-}

package/src/components/FilterTop/filterTop.shimmer.js

@@ -1,24 +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 './filterTop.module.css';
-
-const FilterTop = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-
-    return (
-        <aside className={classes.root} aria-live="polite" aria-busy="true">
-            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
-        </aside>
-    );
-};
-
-FilterTop.propTypes = {
-    classes: shape({
-        root: string
-    })
-};
-
-export default FilterTop;

package/src/components/FilterTop/filterTopBlock.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import { arrayOf, shape, string, func, bool } from 'prop-types';
-import { useIntl } from 'react-intl';
-import { ChevronDown as ArrowDown, ChevronUp as ArrowUp } from 'react-feather';
-import { Form } from 'informed';
-
-import { useFilterBlock } from '@magento/peregrine/lib/talons/FilterModal';
-import setValidator from '@magento/peregrine/lib/validators/set';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import FilterBlockList from './FilterBlockList';
-import { ArrowUp2 } from 'iconsax-react';
-import cn from 'classnames';
-
-const FilterTopBlock = props => {
-    const {
-        filterApi,
-        filterState,
-        filterFrontendInput,
-        group,
-        items,
-        name,
-        onApply,
-        filterNames,
-        initialOpen,
-        originalFilterState,
-        search,
-        setFilterBy,
-        filterBy
-    } = props;
-
-    const { formatMessage } = useIntl();
-    const talonProps = useFilterBlock({
-        filterState,
-        items,
-        initialOpen
-    });
-
-    const list = <Form>
-        <FilterBlockList
-            setFilterBy={setFilterBy}
-            filterBy={filterBy}
-            filterApi={filterApi}
-            filterState={filterState}
-            originalFilterState={originalFilterState}
-            name={name}
-            filterFrontendInput={filterFrontendInput}
-            group={group}
-            search={search}
-            items={items}
-            filterNames={filterNames}
-            onApply={onApply}
-        />
-    </Form>
-
-    return list;
-};
-
-export default FilterTopBlock;

package/src/components/FilterTop/index.js

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

package/src/components/FilterTopBackup/CustomFilters/customFilter.js

@@ -1,83 +0,0 @@
-import React, { useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import { shape, string, func } from 'prop-types';
-import { X as Remove } from 'react-feather';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import Trigger from '@magento/venia-ui/lib/components/Trigger';
-import defaultClasses from './customFilter.module.css';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-
-import { Link } from 'react-router-dom';
-
-const CustomFilter = props => {
-    const { group, item, onRemove } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-    const { formatMessage } = useIntl();
-
-    const ariaLabel = formatMessage(
-        {
-            id: 'filterModal.action.clearFilterItem.ariaLabel',
-            defaultMessage: 'Clear filter "{name}"'
-        },
-        {
-            name: item.label ? item.label : item.title
-        }
-    );
-
-    const normalizedData = [
-        {
-            'label': 'Sealed Products',
-            'path': '/'
-        },
-        {
-            'label': 'Singles',
-            'path': '/'
-        },
-        {
-            'label': 'Supplies',
-            'path': '/'
-        }
-    ];
-
-    const subCategory = [];
-
-    const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
-
-    if (customAttributeLandingPage.includes(group)) {
-        normalizedData && normalizedData.map(({ label, path }, index) => {
-            subCategory.push(
-                <Link
-                    key={index}
-                    to={resourceUrl(path)}
-                >
-                    <li className={classes.item}>{label}</li>
-                </Link>
-            )
-        });
-    }
-
-
-    return (
-        <ul className={classes.root}>{subCategory}</ul>
-        // <span className={classes.root} data-cy="CustomFilter-root">
-        //     <span className={classes.text}>
-        //         {item.label ? item.label : item.title}
-        //     </span>
-        // </span>
-    );
-};
-
-export default CustomFilter;
-
-CustomFilter.defaultProps = {
-    onRemove: null
-};
-
-CustomFilter.propTypes = {
-    classes: shape({
-        root: string
-    }),
-    onRemove: func
-};

package/src/components/FilterTopBackup/CustomFilters/customFilter.module.css

@@ -1,22 +0,0 @@
-.root {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: mt-3 from global;
-    composes: gap-[15px] from global;
-    margin-bottom: 10px;
-}
-
-.item {
-    composes: px-4 from global;
-    composes: py-2 from global;
-    composes: transition-colors from global;
-    composes: duration-150 from global;
-    composes: border from global;
-    composes: border-solid from global;
-    composes: leading-normal from global;
-    composes: text-base from global;
-    composes: text-colorDefault from global;
-    composes: bg-white from global;
-    composes: border-gray-100 from global;
-    border-radius: 5px;
-}