@riosst100/pwa-marketplace 1.6.1 → 1.6.3

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

@@ -0,0 +1,91 @@
+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 { filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState } = 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}
+                    filterApi={filterApi}
+                    filterState={filterState}
+                    group={group}
+                    activeFilters={activeFilters}
+                    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 ? filterElements : <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

@@ -1,13 +1,131 @@
-import React from 'react';
-import CustomFilters from './CustomFilters';
-
-const FilterTop = props => {
-    const { category } = props;
-    return (
-        <CustomFilters
-            category={category}
-        />
-    );
-};
-
-export default FilterTop;
+import React, { useMemo, useCallback, useRef } 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 { 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';
+
+
+const SCROLL_OFFSET = 150;
+
+/**
+ * A view that displays applicable and applied filters.
+ *
+ * @param {Object} props.filters - filters to display
+ */
+const FilterTop = props => {
+    const { filters, filterCountToOpen, allowedFilters } = props;
+    const talonProps = useFilterTop({ filters });
+    const {
+        filterApi,
+        filterItems,
+        filterNames,
+        filterFrontendInput,
+        filterState,
+        handleApply,
+        handleReset,
+        customFilters
+    } = talonProps;
+
+    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)
+
+    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}
+                            filterNames={filterNames}
+                            filterApi={filterApi}
+                            filterState={blockState}
+                            originalFilterState={filterState}
+                            filterFrontendInput={frontendInput}
+                            group={group}
+                            items={items}
+                            name={groupName}
+                            onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
+                            initialOpen={iteration < filterCountToOpen}
+                        />
+                    );
+                }
+            }),
+        [
+            filterApi,
+            filterItems,
+            filterNames,
+            filterFrontendInput,
+            filterState,
+            filterCountToOpen,
+            customFilters,
+            handleApplyFilter
+        ]
+    );
+
+    return (
+        <div>{filtersList}</div>
+    );
+};
+
+export default FilterTop;

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

@@ -1,58 +1,23 @@
-.root {
-    composes: bg-white from global;
-    composes: bottom-0 from global;
-    composes: hidden from global;
-    composes: max-w-modal from global;
-    composes: w-full from global;
-    composes: z-foreground from global;
-    grid-template-rows: 1fr 7rem;
-
-    composes: lg_grid from global;
-}
-
-.body {
-    composes: overflow-auto from global;
-}
-
-.header {
-    composes: flex from global;
-    composes: justify-between from global;
-    composes: pb-0 from global;
-    composes: pt-5 from global;
-    composes: px-5 from global;
-}
-
-.headerTitle {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: leading-none from global;
-    composes: text-lg from global;
-}
-
-.action {
-    composes: pb-0 from global;
-    composes: pt-xs from global;
-    composes: px-xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.action button {
-    /* composes: text-sm from global; */
-    font-size: 0.875rem;
-    /* composes: no-underline from global; */
-    text-decoration: none;
-}
-
-.blocks {
-    composes: pb-0 from global;
-    composes: pt-xs from global;
-    composes: px-xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.blocks > li:last-child {
-    /* composes: border-b-2 from global; */
-    /* composes: border-solid from global; */
-    /* composes: border-subtle from global; */
-    border-bottom: 2px solid rgb(var(--venia-global-color-border));
-}
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] 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 +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;
+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,54 @@
+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
+    } = props;
+
+    const { formatMessage } = useIntl();
+    const talonProps = useFilterBlock({
+        filterState,
+        items,
+        initialOpen
+    });
+
+    const list = <Form>
+        <FilterBlockList
+            filterApi={filterApi}
+            filterState={filterState}
+            originalFilterState={originalFilterState}
+            name={name}
+            filterFrontendInput={filterFrontendInput}
+            group={group}
+            items={items}
+            filterNames={filterNames}
+            onApply={onApply}
+        />
+    </Form>
+
+    return list;
+};
+
+export default FilterTopBlock;

package/src/components/FilterTop/index.js

@@ -1,2 +1,2 @@
-export { default } from './filterTop';
-export { default as FilterTopShimmer } from './filterTop.shimmer';
+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;
+}