@riosst100/pwa-marketplace 2.0.7 → 2.0.9

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

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

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

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

@@ -1,47 +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 '../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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +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;
-    justify-content: center;
-}