@riosst100/pwa-marketplace 1.6.1 → 1.6.3

package/src/components/CustomSortBy/customSortBy.js

@@ -156,12 +156,13 @@ const CustomSortBy = props => {
         });
 
     return (
-        <div
-            ref={elementRef}
-            className={classes.root}
-            data-cy="CustomSortBy-root"
-            aria-busy="false"
-        >
+        // <div
+        //     ref={elementRef}
+        //     className={classes.root}
+        //     data-cy="CustomSortBy-root"
+        //     aria-busy="false"
+        // >
+        <>
             <Button
                 priority={'low'}
                 classes={{
@@ -181,17 +182,14 @@ const CustomSortBy = props => {
                 </span>
                 <span className={cn(classes.desktopText, 'flex items-center gap-[15px]')}>
                     <span className={classes.sortText}>
-                        <FormattedMessage
-                            id={'productSort.sortByButton'}
-                            defaultMessage={'Sort by'}
-                        />
                         &nbsp;{currentSort.sortText}
                     </span>
                     <ArrowUp2 size={15} className={cn('text-gray-900 transition-all stroke-[#292D32]', expanded ? 'rotate-0' : 'rotate-180')} />
                 </span>
             </Button>
             {sortElements}
-        </div>
+        </>
+        // </div>
     );
 };
 

package/src/components/CustomSortBy/productSort.module.css

@@ -0,0 +1,65 @@
+.root {
+    composes: relative from global;
+    composes: ml-2xs from global;
+}
+
+.menu {
+    composes: absolute from global;
+    composes: bg-clip-padding from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    composes: list-none from global;
+    composes: mb-0 from global;
+    composes: min-w-[10rem] from global;
+    composes: mt-0.5 from global;
+    composes: mx-0 from global;
+    composes: right-0 from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: text-colorDefault from global;
+    composes: text-left from global;
+    composes: top-[110%] from global;
+    composes: z-menu from global;
+    composes: p-2.5 from global;
+}
+
+.menuItem {
+    composes: hover_bg-gray-100 from global;
+    composes: rounded-[5px] from global;
+    composes: relative from global;
+}
+
+.sortButton {
+    composes: rounded-[5px] from global;
+    composes: p-2.5 from global;
+
+    composes: min-w-[154px] from global;
+}
+
+.desktopText {
+    composes: hidden from global;
+
+    composes: lg_inline-flex from global;
+}
+
+.sortText {
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
+    composes: text-base from global;
+}
+
+.desktopIconWrapper {
+    transform: translateX(10px);
+}
+
+.desktopIcon {
+    /* composes: icon from '../Icon/icon.module.css'; */
+
+    composes: stroke-gray-500 from global;
+}
+
+.mobileText {
+    composes: lg_hidden from global;
+}

package/src/components/CustomSortBy/productSort.shimmer.js

@@ -0,0 +1,28 @@
+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 './productSort.shimmer.module.css';
+
+const ProductSortShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer
+                classes={{ root_button: classes.sortButtonShimmer }}
+                type="button"
+            />
+        </div>
+    );
+};
+
+ProductSortShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        sortButtonShimmer: string
+    })
+};
+
+export default ProductSortShimmer;

package/src/components/CustomSortBy/productSort.shimmer.module.css

@@ -0,0 +1,10 @@
+.root {
+    composes: root from './productSort.module.css';
+}
+
+.sortButtonShimmer {
+    /* composes: root_button from '../Shimmer/shimmer.module.css'; */
+    composes: sortButton from './productSort.module.css';
+
+    composes: lg_min-w-[12rem] from global;
+}

package/src/components/CustomSubCategory/subCategory.js

@@ -0,0 +1,49 @@
+import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useSubCategory';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './subCategory.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
+import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
+
+const SubCategory = props => {
+    const { children } = props;
+
+    const talonProps = useSubCategory({ children });
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        normalizedData
+    } = talonProps;
+    
+    const subCategory = [];
+    
+    normalizedData && normalizedData.map(({ text, path }, index) => {
+        console.log(path)
+        subCategory.push(
+            <Link
+                key={index}
+                to={path}
+            >
+                <li className={classes.item}>{text}</li>
+            </Link>
+        )
+    });
+
+    return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
+
+    // const [activeTab, setActiveTab] = useState('singles')
+
+    return (
+        <>
+            <ul className={classes.root}>
+                <li className={classes.item}>All Sets</li>
+                <li className={classes.item}>Expansion Sets</li>
+            </ul>
+        </>
+    )
+};
+
+export default SubCategory;

package/src/components/CustomSubCategory/subCategory.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/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 (
+        <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-semibold 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/customFilters.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { func, shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -10,25 +10,70 @@ import { Link } from 'react-router-dom';
 import { useCustomFilters } from '@riosst100/pwa-marketplace/src/talons/CustomFilters/useCustomFilters';
 
 const CustomFilters = props => {
-    const { filterState, onRemove, clearAll, category } = props;
+    const { onRemove, clearAll, category, filters } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
 
-    const talonProps = useCustomFilters();
+    const talonProps = useCustomFilters({ filters });
 
-    const { customFiltersData, categoryUrlSuffix, search, pathname } = talonProps;
+    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(({ label, value }, index) => {
+                options.map((item, index) => {
+                    const { label, value } = item
                     // const path = '/';
 
                     // const path = resourceUrl(
@@ -51,20 +96,27 @@ const CustomFilters = props => {
                     const finalParams = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
                     const path = pathname + finalParams;
 
-                    items.push(
-                        <li>
-                            <Link
-                                key={index}
-                                to={path}
-                            >
-                                <li className={classes.item}>{label}</li>
-                            </Link>
-                        </li>
-                    )
+                    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 className={classes.root}>{items}</ul>
+                    <ul key={index} className={classes.root}>{items}</ul>
                 );
             }
         })
@@ -77,18 +129,4 @@ const CustomFilters = props => {
     );
 };
 
-CustomFilters.defaultProps = {
-    onRemove: null
-};
-
-CustomFilters.propTypes = {
-    classes: shape({
-        root: string,
-        item: string,
-        button: string,
-        icon: string
-    }),
-    onRemove: func
-};
-
 export default CustomFilters;

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

@@ -0,0 +1,50 @@
+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
+    } = props;
+
+    const itemElements = useMemo(() => {
+        const key = `item-${group}`;
+        return (
+            <FilterTopItemGroup
+                filterApi={filterApi}
+                filterState={filterState}
+                group={group}
+                name={name}
+                originalFilterState={originalFilterState}
+                items={items}
+                onApply={onApply}
+                labels={labels}
+                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;
+}

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import defaultClasses from './filterTopItem.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const FilterTopItem = props => {
+    const { filterApi, group, item, onApply, labels, activeFilters } = 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 });
+                }
+            }
+            if (typeof onApply === 'function') {
+                onApply(group, item);
+            }
+        },
+        [group, item, onApply, removeGroup, toggleItem]
+    );
+
+    const element = 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;
+}