@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItem.js

@@ -0,0 +1,80 @@
+import React, { useCallback, useMemo } from 'react';
+import { func, number, oneOfType, shape, string } from 'prop-types';
+import setValidator from '@magento/peregrine/lib/validators/set';
+
+import FilterDefault from './filterDefault';
+
+const FilterItem = props => {
+    const { filterApi, filterState, group, item, onApply } = props;
+    const { toggleItem } = filterApi;
+    const { title, value } = item;
+    const isSelected = filterState && filterState.has(item);
+
+    // create and memoize an item that matches the tile interface
+    const tileItem = useMemo(
+        () => ({
+            label: title,
+            value_index: value
+        }),
+        [title, value]
+    );
+
+    const handleClick = useCallback(
+        e => {
+            // use only left click for selection
+            if (e.button !== 0) return;
+
+            toggleItem({ group, item });
+
+            if (typeof onApply === 'function') {
+                onApply(group, item);
+            }
+        },
+        [group, item, toggleItem, onApply]
+    );
+
+    const handleKeyDown = useCallback(
+        e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                toggleItem({ group, item });
+                if (typeof onApply === 'function') {
+                    onApply(group, item);
+                }
+            }
+        },
+        [group, item, onApply, toggleItem]
+    );
+
+    return (
+        <FilterDefault
+            isSelected={isSelected}
+            item={tileItem}
+            onMouseDown={handleClick}
+            onKeyDown={handleKeyDown}
+            group={group}
+            title={title}
+            value={value}
+        />
+    );
+};
+
+FilterItem.defaultProps = {
+    onChange: null
+};
+
+FilterItem.propTypes = {
+    filterApi: shape({
+        toggleItem: func.isRequired
+    }).isRequired,
+    filterState: setValidator,
+    group: string.isRequired,
+    item: shape({
+        title: string.isRequired,
+        value: oneOfType([number, string]).isRequired,
+        path: string
+    }).isRequired,
+    onChange: func
+};
+
+export default FilterItem;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import { func, number, oneOfType, shape, string, instanceOf } from 'prop-types';
+import Radio from '@magento/venia-ui/lib/components/RadioGroup/radio';
+import defaultClasses from './filterItemRadio.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { useIntl } from 'react-intl';
+
+const FilterItemRadio = props => {
+    const { filterApi, group, item, onApply, labels } = props;
+    const { removeGroup, toggleItem } = filterApi;
+    const { title, value } = item;
+    const classes = useStyle(defaultClasses);
+    const { formatMessage } = useIntl();
+
+    const label = item.label ? item.label : item.title;
+
+    const ariaLabel = formatMessage(
+        {
+            id: 'filterModal.item.applyFilter',
+            defaultMessage: 'Apply filter "{optionName}".'
+        },
+        {
+            optionName: label
+        }
+    );
+
+    const handleOnchange = useCallback(
+        e => {
+            if (group != "category_uid") {
+                removeGroup({ group });
+                if (e.target.value === item.value) {
+                    toggleItem({ group, item });
+                }
+            }
+            if (typeof onApply === 'function') {
+                onApply(group, item);
+            }
+        },
+        [group, item, onApply, removeGroup, toggleItem]
+    );
+
+    const element = (
+        <Radio
+            classes={classes}
+            id={`item-${group}-${value}`}
+            label={title}
+            value={value}
+            onChange={handleOnchange}
+            data-cy="FilterDefault-radio"
+            ariaLabel={ariaLabel}
+        />
+    );
+
+    labels.set(element, label);
+
+    return element;
+};
+
+FilterItemRadio.defaultProps = {
+    onApply: null
+};
+
+FilterItemRadio.propTypes = {
+    filterApi: shape({
+        toggleItem: func.isRequired,
+        removeGroup: func.isRequired
+    }).isRequired,
+    group: string.isRequired,
+    item: shape({
+        title: string.isRequired,
+        value: oneOfType([number, string]).isRequired,
+        label: string,
+        path: string
+    }).isRequired,
+    onApply: func,
+    labels: instanceOf(Map).isRequired
+};
+
+export default FilterItemRadio;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadioGroup.js

@@ -0,0 +1,87 @@
+import React, { useMemo, useEffect } from 'react';
+import {
+    arrayOf,
+    func,
+    number,
+    oneOfType,
+    shape,
+    string,
+    instanceOf
+} from 'prop-types';
+import setValidator from '@magento/peregrine/lib/validators/set';
+import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
+import FilterItemRadio from './filterItemRadio';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+const FilterItemRadioGroup = props => {
+    const { filterApi, filterState, group, items, onApply, labels } = props;
+
+    const radioItems = useMemo(() => {
+        return items.map(item => {
+            const code = `item-${group}-${item.value}`;
+            return (
+                <FilterItemRadio
+                    key={code}
+                    filterApi={filterApi}
+                    filterState={filterState}
+                    group={group}
+                    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 (
+        <RadioGroup field={field} data-cy="FilterDefault-radioGroup">
+            {radioItems}
+        </RadioGroup>
+    );
+};
+
+FilterItemRadioGroup.defaultProps = {
+    onApply: null
+};
+
+FilterItemRadioGroup.propTypes = {
+    filterApi: shape({
+        toggleItem: func.isRequired
+    }).isRequired,
+    filterState: setValidator,
+    group: string.isRequired,
+    items: arrayOf(
+        shape({
+            title: string.isRequired,
+            value: oneOfType([number, string]).isRequired,
+            path: string
+        })
+    ).isRequired,
+    onApply: func,
+    labels: instanceOf(Map).isRequired
+};
+
+export default FilterItemRadioGroup;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -0,0 +1,265 @@
+import React, { Fragment, Suspense, useMemo } from 'react';
+import { array, func, number, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+import setValidator from '@magento/peregrine/lib/validators/set';
+import { useFilterList } from '@magento/peregrine/lib/talons/FilterModal';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import FilterItem from './filterItem';
+import defaultClasses from './filterList.module.css';
+import FilterItemRadioGroup from './filterItemRadioGroup';
+
+const labels = new WeakMap();
+const labels2 = new WeakMap();
+
+const FilterOptionModal = React.lazy(() => import('@riosst100/pwa-marketplace/src/components/FilterOption/filterOptionModal'));
+
+const FilterList = props => {
+    const {
+        filterApi,
+        filterState,
+        filterFrontendInput,
+        name,
+        group,
+        itemCountToShow,
+        items,
+        onApply
+    } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useFilterList({ filterState, items, itemCountToShow });
+    const { isListExpanded, handleListToggle, handleShowMore, activeFilter, setActiveFilter } = talonProps;
+    const { formatMessage } = useIntl();
+
+    let data = items.reduce((r, e) => {
+        // get first letter of name of current element
+        let grouping = e.title[0];
+        // if there is no property in accumulator with this letter create it
+        if(!r[grouping]) r[grouping] = {grouping, children: [e]}
+        // if there is push current element to children array for that letter
+        else r[grouping].children.push(e);
+        // return accumulator
+        return r;
+    }, {})
+    
+    // since data at this point is an object, to get array of values
+    // we use Object.values method
+    let items2 = Object.values(data)
+
+    items2 = items2.sort((a, b) => a.grouping.localeCompare(b.grouping));
+
+    const groupingItemElements = useMemo(() => {
+        return items2.map((data, index) => {
+            const { grouping, children } = data;
+
+            const elements1 = [];
+
+            children.map((item, index) => {
+                const { title, value } = item;
+
+                const key = `item-${group}-${value}`;
+
+                // create an element for each item
+                elements1.push(
+                    <li
+                        key={key}
+                        className={classes.popupFilterItem}
+                        data-cy="FilterList-item"
+                    >
+                        <FilterItem
+                            filterApi={filterApi}
+                            filterState={filterState}
+                            group={group}
+                            item={item}
+                            onApply={onApply}
+                        />
+                    </li>
+                );
+
+                // associate each element with its normalized title
+                // titles are not unique, so use the element as the key
+                // labels2.set(element1, title.toUpperCase());
+
+                // return element2;
+            });
+
+            const element2 = <><ul><div><b>{grouping}</b></div>{elements1}</ul><br /></>;
+
+            return element2;
+        });
+    }, [
+        classes,
+        filterApi,
+        filterState,
+        filterFrontendInput,
+        name,
+        group,
+        items,
+        isListExpanded,
+        itemCountToShow,
+        onApply
+    ]);
+
+    // memoize item creation
+    // search value is not referenced, so this array is stable
+    const itemElements = useMemo(() => {
+        // if (filterFrontendInput === 'boolean') {
+            const key = `item-${group}`;
+            return (
+                <li
+                    key={key}
+                    className={classes.item}
+                    data-cy="FilterList-item"
+                >
+                    <FilterItemRadioGroup
+                        filterApi={filterApi}
+                        filterState={filterState}
+                        group={group}
+                        name={name}
+                        items={items}
+                        onApply={onApply}
+                        labels={labels}
+                    />
+                </li>
+            );
+        // }
+
+        return items.map((item, index) => {
+            const { title, value } = item;
+            const key = `item-${group}-${value}`;
+
+            if (!isListExpanded && index >= itemCountToShow) {
+                return null;
+            }
+
+            // create an element for each item
+            const element = (
+                <li
+                    key={key}
+                    className={classes.item}
+                    data-cy="FilterList-item"
+                >
+                    <FilterItem
+                        filterApi={filterApi}
+                        filterState={filterState}
+                        group={group}
+                        item={item}
+                        onApply={onApply}
+                    />
+                </li>
+            );
+
+            // associate each element with its normalized title
+            // titles are not unique, so use the element as the key
+            labels.set(element, title.toUpperCase());
+            return element;
+        });
+    }, [
+        classes,
+        filterApi,
+        filterState,
+        filterFrontendInput,
+        name,
+        group,
+        items,
+        isListExpanded,
+        itemCountToShow,
+        onApply
+    ]);
+
+    const showMoreLessItem = useMemo(() => {
+        if (items.length <= itemCountToShow) {
+            return null;
+        }
+
+        const label = isListExpanded
+            ? formatMessage({
+                id: 'filterList.showLess',
+                defaultMessage: 'Show Less'
+            })
+            : formatMessage({
+                id: 'filterList.showAll',
+                defaultMessage: 'Show All'
+            });
+
+        return (
+            <li className={classes.showMoreLessItem}>
+                <button
+                    onClick={handleListToggle}
+                    className={classes.showMoreLessButton}
+                    data-cy="FilterList-showMoreLessButton"
+                >
+                    {label}
+                </button>
+            </li>
+        );
+    }, [
+        isListExpanded,
+        handleListToggle,
+        items,
+        itemCountToShow,
+        formatMessage,
+        classes
+    ]);
+
+    const showMoreItem = useMemo(() => {
+        if (items.length <= itemCountToShow) {
+            return null;
+        }
+
+        const label = formatMessage({
+            id: 'filterList.viewAll',
+            defaultMessage: 'View All'
+        });
+
+        return (
+            <li className={classes.showMoreLessItem}>
+                <button
+                    onClick={handleShowMore}
+                    className={classes.showMoreLessButton}
+                    data-cy="FilterList-showMoreLessButton"
+                >
+                    {label}
+                </button>
+            </li>
+        );
+    }, [
+        handleShowMore,
+        items,
+        itemCountToShow,
+        formatMessage,
+        classes
+    ]);
+
+    return (
+        <Fragment>
+            <ul className={classes.items}>
+                {itemElements}
+                {showMoreItem}
+            </ul>
+            <Suspense fallback={null}>
+                {activeFilter && <FilterOptionModal groupingItemElements={groupingItemElements} setActiveFilter={setActiveFilter} />}
+            </Suspense>
+        </Fragment>
+    );
+};
+
+FilterList.defaultProps = {
+    onApply: null,
+    itemCountToShow: 5
+};
+
+FilterList.propTypes = {
+    classes: shape({
+        item: string,
+        items: string
+    }),
+    filterApi: shape({}),
+    filterState: setValidator,
+    name: string,
+    group: string,
+    items: array,
+    onApply: func,
+    itemCountToShow: number
+};
+
+export default FilterList;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.module.css

@@ -0,0 +1,28 @@
+.items {
+    composes: gap-[15px] from global;
+    composes: grid from global;
+    /* composes: -ml-1.5 from global; */
+    composes: py-2.5 from global;
+    grid-template-columns: 100%;
+    composes: border-t from global;
+    composes: border-gray-100 from global;
+}
+
+.showMoreLessItem {
+    composes: pl-1 from global;
+}
+
+.showMoreLessButton {
+    composes: text-base from global;
+    composes: underline from global;
+
+    composes: hover_no-underline from global;
+}
+
+.popupFilterItem {
+    border: 1px solid #e1e1e1;
+    padding: 10px;
+    border-radius: 5px;
+    width: 100%;
+    margin-top: 10px;
+}

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/index.js

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

package/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock.js

@@ -0,0 +1,135 @@
+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 FilterList from './FilterList';
+import defaultClasses from './filterBlock.module.css';
+import { ArrowUp2 } from 'iconsax-react';
+import cn from 'classnames';
+
+const FilterBlock = props => {
+    const {
+        filterApi,
+        filterState,
+        filterFrontendInput,
+        group,
+        items,
+        name,
+        onApply,
+        initialOpen
+    } = props;
+
+    const { formatMessage } = useIntl();
+    const talonProps = useFilterBlock({
+        filterState,
+        items,
+        initialOpen
+    });
+    const { handleClick, isExpanded } = talonProps;
+    const iconSrc = isExpanded ? ArrowUp : ArrowDown;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const itemAriaLabel = formatMessage(
+        {
+            id: 'filterModal.item.ariaLabel',
+            defaultMessage: 'Filter products by "{itemName}"'
+        },
+        {
+            itemName: name
+        }
+    );
+
+    const toggleItemOptionsAriaLabel = isExpanded
+        ? formatMessage(
+            {
+                id: 'filterModal.item.hideOptions',
+                defaultMessage: 'Hide "{itemName}" filter item options.'
+            },
+            {
+                itemName: name
+            }
+        )
+        : formatMessage(
+            {
+                id: 'filterModal.item.showOptions',
+                defaultMessage: 'Show "{itemName}" filter item options.'
+            },
+            {
+                itemName: name
+            }
+        );
+
+    const list = isExpanded ? (
+        <Form className={classes.list}>
+            <FilterList
+                filterApi={filterApi}
+                filterState={filterState}
+                name={name}
+                filterFrontendInput={filterFrontendInput}
+                group={group}
+                items={items}
+                onApply={onApply}
+            />
+        </Form>
+    ) : null;
+
+    return (
+        <li
+            className={classes.root}
+            aria-label={itemAriaLabel}
+            data-cy="FilterBlock-root"
+        >
+            <button
+                className={classes.trigger}
+                onClick={handleClick}
+                data-cy="FilterBlock-triggerButton"
+                type="button"
+                aria-expanded={isExpanded}
+                aria-label={toggleItemOptionsAriaLabel}
+            >
+                <span className={classes.header}>
+                    <span className={classes.name}>{name}</span>
+                    {/* <Icon src={iconSrc} /> */}
+                    <ArrowUp2
+                        size={15}
+                        className={cn('text-gray-900 transition-all stroke-[#292D32]', isExpanded ? 'rotate-0' : 'rotate-180')}
+                        variant="Outline"
+                    />
+                </span>
+            </button>
+            {list}
+        </li>
+    );
+};
+
+FilterBlock.defaultProps = {
+    onApply: null,
+    initialOpen: false
+};
+
+FilterBlock.propTypes = {
+    classes: shape({
+        header: string,
+        list: string,
+        name: string,
+        root: string,
+        trigger: string
+    }),
+    filterFrontendInput: string,
+    filterApi: shape({}).isRequired,
+    filterState: setValidator,
+    group: string.isRequired,
+    items: arrayOf(shape({})),
+    name: string.isRequired,
+    onApply: func,
+    initialOpen: bool
+};
+
+export default FilterBlock;

package/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock.module.css

@@ -0,0 +1,25 @@
+.root {
+    composes: grid from global;
+}
+
+.header {
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: py-2.5 from global;
+}
+
+.name {
+    composes: leading-[14px] from global;
+    composes: text-left from global;
+    composes: text-base from global;
+    composes: font-medium from global;
+}
+
+.list {}
+
+/* TODO @TW: cannot compose */
+.list:empty {
+    display: none;
+}