@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/components/FilterOption/FilterOptionModal.module.css

@@ -0,0 +1,90 @@
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: fixed from global;
+    composes: grid from global;
+    composes: grid-rows-autoFirst from global;
+    composes: h-full from global;
+    composes: left-auto from global;
+    composes: max-w-modal from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-dialog from global;
+    transform: scale(1.15);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+    transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+
+    composes: lg_h-auto from global;
+    composes: lg_max-h-modal from global;
+    composes: lg_max-w-[740px] from global;
+    composes: lg_top-[5vh] from global;
+}
+
+@media (max-width: 959px) {
+    .root {
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@media (min-width: 960px) {
+    /* TODO @TW: review */
+    .root {
+        left: calc(50% - 370px);
+    }
+}
+
+.root_open {
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: shadow-modal from global;
+    transform: scale(1);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+@media (max-width: 959px) {
+    .root_open {
+        composes: root;
+
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.body {
+    composes: overflow-auto from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+
+    composes: lg_px-md from global;
+}
+
+.header {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-between from global;
+    composes: p-3.5 from global;
+
+    composes: lg_px-md from global;
+    composes: lg_py-3.5 from global;
+}
+
+.headerText {
+    composes: self-center from global;
+    composes: text-subtle from global;
+}

package/src/components/FilterOption/filterOptionModal.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { object, shape, string } from 'prop-types';
+import { X as CloseIcon } from 'react-feather';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { Portal } from '@magento/venia-ui/lib/components/Portal';
+import defaultClasses from './FilterOptionModal.module.css';
+import { useFilterOptionModal } from '@riosst100/pwa-marketplace/src/talons/FilterOption/useFilterOptionModal';
+
+const FilterOptionModal = props => {
+    const { classes: propClasses, groupingItemElements, setActiveFilter } = props;
+    const talonProps = useFilterOptionModal({ setActiveFilter });
+    const { handleClose, isOpen } = talonProps;
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const rootClass = isOpen ? classes.root_open : classes.root;
+
+    // Unmount the form to force a reset back to original values on close
+    const bodyElement = isOpen ? (
+        groupingItemElements
+    ) : null;
+
+    return (
+        <Portal>
+            <aside className={rootClass}>
+                {/* <div className={classes.header}>
+                    <span className={classes.headerText}>
+                        <FormattedMessage
+                            id={'checkoutPage.editShippingInfo'}
+                            defaultMessage={'Edit Shipping Information'}
+                        />
+                    </span>
+                    <button
+                        className={classes.closeButton}
+                        onClick={handleClose}
+                    >
+                        <Icon src={CloseIcon} />
+                    </button>
+                </div> */}
+                <div className={classes.body}>{bodyElement}</div>
+            </aside>
+        </Portal>
+    );
+};
+
+export default FilterOptionModal;

package/src/components/FilterOptionModal/filterOptionModal.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { object, shape, string } from 'prop-types';
+import { X as CloseIcon } from 'react-feather';
+import { useEditModal } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/useEditModal';
+
+import { useStyle } from '../../../classify';
+import Icon from '../../Icon';
+import { Portal } from '../../Portal';
+import AddressForm from './AddressForm';
+import defaultClasses from './editModal.module.css';
+
+
+const EditModal = props => {
+    const { classes: propClasses, shippingData, onSuccess } = props;
+    const talonProps = useEditModal();
+    const { handleClose, isOpen } = talonProps;
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const rootClass = isOpen ? classes.root_open : classes.root;
+
+    // Unmount the form to force a reset back to original values on close
+    const bodyElement = isOpen ? (
+        <AddressForm
+            onSuccess={onSuccess}
+            afterSubmit={handleClose}
+            onCancel={handleClose}
+            shippingData={shippingData}
+        />
+    ) : null;
+
+    return (
+        <Portal>
+            <aside className={rootClass}>
+                <div className={classes.header}>
+                    <span className={classes.headerText}>
+                        <FormattedMessage
+                            id={'checkoutPage.editShippingInfo'}
+                            defaultMessage={'Edit Shipping Information'}
+                        />
+                    </span>
+                    <button
+                        className={classes.closeButton}
+                        onClick={handleClose}
+                    >
+                        <Icon src={CloseIcon} />
+                    </button>
+                </div>
+                <div className={classes.body}>{bodyElement}</div>
+            </aside>
+        </Portal>
+    );
+};
+
+export default EditModal;
+
+EditModal.propTypes = {
+    classes: shape({
+        root: string,
+        root_open: string,
+        body: string,
+        header: string,
+        headerText: string
+    }),
+    shippingData: object
+};

package/src/components/FilterTop/CurrentTopFilters/currentTopFilter.js

@@ -0,0 +1,47 @@
+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 '../FilterBlockList/filterTopItem.module.css';
+
+const CurrentTopFilter = props => {
+    const { group, item, removeItem, onRemove } = props;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(() => {
+        removeItem({ group, item });
+        if (typeof onRemove === 'function') {
+            onRemove(group, item);
+        }
+    }, [group, item, removeItem, onRemove]);
+
+    const ariaLabel = formatMessage(
+        {
+            id: 'filterModal.action.clearFilterItem.ariaLabel',
+            defaultMessage: 'Clear filter "{name}"'
+        },
+        {
+            name: item.label ? item.label : item.title
+        }
+    );
+
+    return group && group != "character" && group != "product_series" && group != "scale" && group != "product_line" && group != "filterby" && group != "trains" && group != "franchise" && group != "brands" && group != "category" && group != "shopby" ? (
+        <span className={classes.item} data-cy="CurrentTopFilter-root">
+            <Trigger
+                action={handleClick}
+                aria-label={ariaLabel}
+                data-cy="CurrentTopFilter-trigger"
+            >
+                All
+            </Trigger>
+        </span>
+    ) : '';
+};
+
+export default CurrentTopFilter;

package/src/components/FilterTop/CurrentTopFilters/currentTopFilter.module.css

@@ -0,0 +1,22 @@
+.root {
+    min-height: 24px;
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: font-medium from global;
+    composes: gap-2xs from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: px-2 from global;
+    composes: py-1 from global;
+    composes: rounded-md from global;
+    /* composes: text-white from global; */
+    composes: text-base from global;
+}
+
+/* TODO @TW: cannot compose */
+.root svg {
+    /* composes: stroke-white from global; */
+    stroke: rgb(var(--venia-global-color-gray-600));
+}

package/src/components/FilterTop/CurrentTopFilters/currentTopFilters.js

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import { func, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CurrentTopFilter from './currentTopFilter';
+import defaultClasses from '../FilterBlockList/filterTopItem.module.css';
+
+const CurrentTopFilters = props => {
+    const { filterApi, filterState, onRemove, currentGroup } = props;
+    const { removeItem } = filterApi;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    // create elements and params at the same time for efficiency
+    const filterElements = useMemo(() => {
+        const elements = [];
+        for (const [group, items] of filterState) {
+            for (const item of items) {
+                const { title, value } = item || {};
+                const key = `${group}::${title}_${value}`;
+
+                const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+
+                if (group === currentGroup && !customAttributeLandingPage.includes(group)) {
+                    elements.push(
+                        <CurrentTopFilter
+                            group={group}
+                            item={item}
+                            removeItem={removeItem}
+                            onRemove={onRemove}
+                        />
+                    );
+                }
+            }
+        }
+
+        return elements;
+    }, [filterState, removeItem, onRemove]);
+
+    const currentFiltersAriaLabel = formatMessage({
+        id: 'filterModal.currentFilters.ariaLabel',
+        defaultMessage: 'Current Filters'
+    });
+
+    return filterElements && filterElements.length ? filterElements : <span className={classes.item}><b>All</b></span>
+};
+
+export default CurrentTopFilters;

package/src/components/FilterTop/CurrentTopFilters/currentTopFilters.module.css

@@ -0,0 +1,21 @@
+.root {
+    composes: px-[10px] from global;
+    composes: py-2 from global;
+    composes: overflow-auto from global;
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: gap-2 from global;
+}
+
+/* TODO @TW: cannot compose */
+.root:empty {
+    display: none;
+}
+
+.item {
+    composes: float-left from global;
+    composes: pb-0 from global;
+    composes: pl-0 from global;
+    composes: pr-2 from global;
+    composes: pt-2 from global;
+}

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

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

package/src/components/FilterTop/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/FilterTop/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;
+}

package/src/components/FilterTop/CustomFilters/customFilters.js

@@ -0,0 +1,132 @@
+import React, { useCallback, useMemo } from 'react';
+import { func, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CustomFilter from './customFilter';
+import defaultClasses from './customFilters.module.css';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { Link } from 'react-router-dom';
+import { useCustomFilters } from '@riosst100/pwa-marketplace/src/talons/CustomFilters/useCustomFilters';
+
+const CustomFilters = props => {
+    const { onRemove, clearAll, category, filters } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    const talonProps = useCustomFilters({ filters });
+
+    const { 
+        customFiltersData, 
+        categoryUrlSuffix, 
+        search, 
+        pathname,
+        filterApi,
+        // filterItems,
+        // filterNames,
+        // filterFrontendInput,
+        filterState
+     } = talonProps;
+
+    const params = search ? JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') : {};
+
+    const { removeItem } = filterApi;
+
+    const activeFilters = useMemo(() => {
+        const elements = [];
+        for (const [group, items] of filterState) {
+            for (const item of items) {
+                elements.push(
+                    {
+                        group: group,
+                        item: item,
+                        removeItem: removeItem
+                    }
+                );
+            }
+        }
+
+        return elements;
+    }, [filterState, removeItem]);
+
+    // console.log(activeFilters)\\
+
+    // const handleClick = useCallback(() => {
+    //     removeItem({ group, item });
+    // }, [group, item, removeItem]);
+
+    // create elements and params at the same time for efficiency
+    const filterElements = useMemo(() => {
+        const elements = [];
+        customFiltersData && customFiltersData.map((filter, index) => {
+            const { label, attribute_code, options } = filter || {};
+
+            const group = attribute_code;
+
+            // const handleClick = useCallback(() => {
+            //     removeItem({ group, item });
+            //     if (typeof onRemove === 'function') {
+            //         onRemove(group, item);
+            //     }
+            // }, [group, item, removeItem, onRemove]);
+
+            if (options.length) {
+                const items = [];
+                options.map((item, index) => {
+                    const { label, value } = item
+                    // const path = '/';
+
+                    // const path = resourceUrl(
+                    //     `/${category.url_path}${categoryUrlSuffix || ''}?${attribute_code}[filter]=${label},${value}`
+                    // );
+                    // const keyAttr = `${attribute_code}[filter]`;
+
+                    if (params) {
+                        Object.keys(params).forEach(function(key, index) {
+                            if (index > 1) {
+                                delete params[key];
+                            }
+                        });
+                    }
+
+                    if (value != "all") {
+                        params[`${attribute_code}[filter]`] = `${label},${value}`;
+                    }
+
+                    const finalParams = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
+                    const path = pathname + finalParams;
+
+                    if (value != "all") {
+                        items.push(
+                            <li key={index}>
+                                <Link
+                                    to={path}
+                                >
+                                    <span className={classes.item}>{label}</span>
+                                </Link>
+                            </li>
+                        )
+                    } else {
+                        items.push(
+                            <li key={index}>
+                                <span className={classes.item} onClick={removeItem({ group, item })}>{label}</span>
+                            </li>
+                        )
+                    }
+                });
+
+                elements.push(
+                    <ul key={index} className={classes.root}>{items}</ul>
+                );
+            }
+        })
+
+        return elements;
+    }, [customFiltersData]);
+
+    return (
+        <>{filterElements}</>
+    );
+};
+
+export default CustomFilters;

package/src/components/FilterTop/CustomFilters/customFilters.module.css

@@ -0,0 +1,23 @@
+.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/CustomFilters/index.js

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

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

@@ -0,0 +1,56 @@
+import React, { Fragment, useMemo } from 'react';
+import FilterTopItemGroup from './filterTopItemGroup';
+
+const labels = new WeakMap();
+
+const FilterBlockList = props => {
+    const {
+        filterApi,
+        filterState,
+        name,
+        group,
+        items,
+        onApply,
+        filterNames,
+        originalFilterState,
+        search,
+        setFilterBy,
+        filterBy
+    } = props;
+
+    const itemElements = useMemo(() => {
+        const key = `item-${group}`;
+        return (
+            <FilterTopItemGroup
+                setFilterBy={setFilterBy}
+                filterBy={filterBy}
+                filterApi={filterApi}
+                filterState={filterState}
+                group={group}
+                name={name}
+                originalFilterState={originalFilterState}
+                items={items}
+                onApply={onApply}
+                labels={labels}
+                search={search}
+                filterNames={filterNames}
+                key={key}
+            />
+        );
+    }, [
+        filterApi,
+        filterState,
+        name,
+        group,
+        items,
+        onApply
+    ]);
+
+    return (
+        <Fragment>
+            {itemElements}
+        </Fragment>
+    );
+};
+
+export default FilterBlockList;

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

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