@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

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

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

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

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

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

package/src/components/FilterTop/filterTop.js

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+.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;
+}