@riosst100/pwa-marketplace 1.4.4 → 1.4.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/AttributesBlock/attributesBlock.js

@@ -41,10 +41,10 @@ const AttributesBlock = props => {
         });
 
         result.push(
-            <>
+            <span key={index}>
                 <div className={classes.title}>{label}</div>
                 <ul className={classes.root}>{itemsResult}</ul>
-            </>
+            </span>
         )
     });
 

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -28,9 +28,6 @@ const CollectibleGameSets = props => {
         );
     }
 
-    // console.log('SIPPPPPPPPPPPPPPPPPPP')
-    // console.log(collectibleGameSets)
-
     const sets = collectibleGameSets.map((set, index) => {
         const { card_set } = set;
         return (

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

@@ -0,0 +1,84 @@
+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
+        }
+    );
+
+    console.log(group)
+    console.log(item)
+
+    const normalizedData = [
+        {
+            'label': 'Sealed Products',
+            'path': '/'
+        },
+        {
+            'label': 'Singles',
+            'path': '/'
+        },
+        {
+            'label': 'Supplies',
+            'path': '/'
+        }
+    ];
+
+    const subCategory = [];
+
+    if (group == "card_set") {
+        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,104 @@
+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 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 { filterState, onRemove, clearAll, category } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    const talonProps = useCustomFilters();
+
+    const { customFiltersData, categoryUrlSuffix, search, pathname } = talonProps;
+
+    // console.log(category.url_path)
+    // console.log(categoryUrlSuffix)
+
+    const params = search ? JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') : {};
+
+    
+
+    // console.log(params)
+
+    // create elements and params at the same time for efficiency
+    const filterElements = useMemo(() => {
+        const elements = [];
+        customFiltersData.map((filter, index) => {
+            const { label, attribute_code, options } = filter || {};
+
+            if (options.length) {
+                const items = [];
+                options.map(({ label, value }, index) => {
+                    // const path = '/';
+
+                    // const path = resourceUrl(
+                    //     `/${category.url_path}${categoryUrlSuffix || ''}?${attribute_code}[filter]=${label},${value}`
+                    // );
+                    // const keyAttr = `${attribute_code}[filter]`;
+
+                    Object.keys(params).forEach(function(key, index) {
+                        if (index > 1) {
+                            delete params[key];
+                        }
+                    });
+
+                    if (value != "all") {
+                        params[`${attribute_code}[filter]`] = `${label},${value}`;
+                    }
+
+                    const finalParams = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+
+                    // console.log(params)
+
+                    // console.log(finalParams);
+
+                    const path = pathname + finalParams;
+
+                    items.push(
+                        <li>
+                            <Link
+                                key={index}
+                                to={path}
+                            >
+                                <li className={classes.item}>{label}</li>
+                            </Link>
+                        </li>
+                    )
+                });
+
+                elements.push(
+                    <ul className={classes.root}>{items}</ul>
+                );
+            }
+        })
+
+        return elements;
+    }, [customFiltersData]);
+
+    return (
+        <>{filterElements}</>
+    );
+};
+
+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/CustomFilters/customFilters.module.css

@@ -0,0 +1,24 @@
+.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;
+    composes: shadow-type-1 from global;
+}

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

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

package/src/components/FilterTop/filterTop.js

@@ -0,0 +1,139 @@
+import React, { useMemo, useCallback, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { array, arrayOf, shape, string, number } from 'prop-types';
+import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import CustomFilters from './CustomFilters';
+import FilterBlock from '@magento/venia-ui/lib/components/FilterModal/filterBlock';
+import defaultClasses from './filterTop.module.css';
+
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { Link } from 'react-router-dom';
+import CurrentFilters from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters';
+
+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, category } = props;
+    const talonProps = useFilterSidebar({ filters });
+    const {
+        filterApi,
+        filterItems,
+        filterNames,
+        filterFrontendInput,
+        filterState,
+        handleApply,
+        handleReset
+    } = talonProps;
+
+    const filterRef = useRef();
+    const classes = useStyle(defaultClasses, props.classes);
+
+    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 filtersList = useMemo(
+        () =>
+            Array.from(filterItems, ([group, items], iteration) => {
+                const blockState = filterState.get(group);
+                const groupName = filterNames.get(group);
+                const frontendInput = filterFrontendInput.get(group);
+                return (
+                    <FilterBlock
+                        key={group}
+                        filterApi={filterApi}
+                        filterState={blockState}
+                        filterFrontendInput={frontendInput}
+                        group={group}
+                        items={items}
+                        name={groupName}
+                        onApply={handleApplyFilter}
+                        initialOpen={iteration < filterCountToOpen}
+                    />
+                );
+            }),
+        [
+            filterApi,
+            filterItems,
+            filterNames,
+            filterFrontendInput,
+            filterState,
+            filterCountToOpen,
+            handleApplyFilter
+        ]
+    );
+
+    const clearAll = filterState.size ? (
+        <div className={classes.action}>
+            <LinkButton
+                type="button"
+                onClick={handleReset}
+                data-cy="FilterSidebar-clearButton"
+            >
+                <FormattedMessage
+                    id={'filterModal.all'}
+                    defaultMessage={'All'}
+                />
+            </LinkButton>
+        </div>
+    ) : null;
+
+    return (
+        <CustomFilters
+            filterApi={filterApi}
+            filterNames={filterNames}
+            filterState={filterState}
+            clearAll={clearAll}
+            category={category}
+            onRemove={handleApplyFilter}
+        />
+    );
+};
+
+FilterTop.defaultProps = {
+    filterCountToOpen: 3
+};
+
+FilterTop.propTypes = {
+    classes: shape({
+        action: string,
+        blocks: string,
+        body: string,
+        header: string,
+        headerTitle: string,
+        root: string,
+        root_open: string
+    }),
+    filters: arrayOf(
+        shape({
+            attribute_code: string,
+            items: array
+        })
+    ),
+    filterCountToOpen: number
+};
+
+export default FilterTop;

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

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

package/src/components/FilterTop/filterTop.shimmer.js

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

package/src/components/FilterTop/index.js

@@ -0,0 +1,2 @@
+export { default } from './filterTop';
+export { default as FilterTopShimmer } from './filterTop.shimmer';

package/src/components/SubCategory/subCategory.js

@@ -4,6 +4,7 @@ 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';
 
 const SubCategory = props => {
     const { children } = props;

package/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenuItem.js

@@ -33,7 +33,7 @@ export const useMegaMenuItem = props => {
             // checking down arrow and spacebar
             if (pressedKey === 'ArrowDown' || pressedKey === ' ') {
                 event.preventDefault();
-                if (category.children.length) {
+                if (category.children.length || category.name == "Lego") {
                     setIsFocused(true);
                 } else {
                     setIsFocused(false);
@@ -52,7 +52,7 @@ export const useMegaMenuItem = props => {
                 setIsFocused(false);
             }
         },
-        [category.children.length]
+        [category.children.length, category.name]
     );
 
     return {

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -33,6 +33,9 @@ const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/Fi
 const FilterSidebar = React.lazy(() =>
     import('@magento/venia-ui/lib/components/FilterSidebar')
 );
+const FilterTop = React.lazy(() =>
+    import('@riosst100/pwa-marketplace/src/components/FilterTop')
+);
 
 const CategoryContent = props => {
     const {
@@ -183,8 +186,9 @@ const CategoryContent = props => {
                     </h1>
                     {categoryDescriptionElement}
                 </div>
-                <SubCategory children={children} />
-                <AttributesBlock category={category} attributesBlock={attributesBlock} />
+                <SubCategory filters={filters} children={children} />
+                <FilterTop filters={filters} category={category} />
+                {/* <AttributesBlock category={category} attributesBlock={attributesBlock} /> */}
                 {/* <section className='category_brand-slider my-5'>
                     <BrandSlider />
                 </section> */}

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

@@ -34,10 +34,10 @@ const CurrentFilter = props => {
         <span className={classes.root} data-cy="CurrentFilter-root">
             <Trigger
                 action={handleClick}
-                ariaLabel={ariaLabel}
+                aria-label={ariaLabel}
                 data-cy="CurrentFilter-trigger"
             >
-                <Icon size={20} src={Remove} />
+                <Icon size={15} src={Remove} />
             </Trigger>
             <span className={classes.text}>
                 {item.label ? item.label : item.title}

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

@@ -1,7 +1,7 @@
 .root {
     min-height: 24px;
     composes: bg-blue-700 from global;
-    composes: font-semibold from global;
+    /* composes: font-semibold from global; */
     composes: gap-2xs from global;
     composes: grid-flow-col from global;
     composes: inline-grid from global;
@@ -17,5 +17,5 @@
 /* TODO @TW: cannot compose */
 .root svg {
     /* composes: stroke-white from global; */
-    stroke: rgb(var(--venia-global-color-gray-600));
+    stroke: white;
 }

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

@@ -2,6 +2,7 @@
     composes: px-[10px] from global;
     composes: py-2 from global;
     composes: overflow-auto from global;
+    composes: text-white from global;
 }
 
 /* TODO @TW: cannot compose */
@@ -14,4 +15,5 @@
     composes: pb-0 from global;
     composes: pl-0 from global;
     composes: pr-2 from global;
+    composes: pt-2 from global;
 }

package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js

@@ -64,7 +64,7 @@ const MegaMenuItem = props => {
     const arrow = <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />;
 
     const children = useMemo(() => {
-        return category.children.length ? (
+        return category.children.length || category.name == "Lego" ? (
             <Submenu
                 isFocused={isFocused}
                 subMenuState={subMenuState}
@@ -88,7 +88,7 @@ const MegaMenuItem = props => {
         onNavigate
     ]);
 
-    const maybeDownArrowIcon = category.children.length ? (
+    const maybeDownArrowIcon = category.children.length || category.name == "Lego" ? (
         <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />
     ) : null;
 

package/src/talons/CustomFilters/customFilters.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_CUSTOM_FILTERS = gql`
+    query GetCustomFilters($filters: ProductAttributeFilterInput!) {
+        customSubFilters(filters: $filters) {
+            label
+            count
+            attribute_code
+            options {
+                label
+                value
+            }
+            position
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getCustomFilters: GET_CUSTOM_FILTERS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/CustomFilters/useCustomFilters.js

@@ -0,0 +1,97 @@
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './customFilters.gql';
+
+import { useLocation } from 'react-router-dom';
+import { useEffect, useMemo } from 'react';
+import {
+    getFiltersFromSearch,
+    getFilterInput
+} from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useCustomFilters = props => {
+    // const { filters } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS);
+    const { getCustomFilters, getFilterInputsQuery, getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const [runQuery, queryResponse] = useLazyQuery(getCustomFilters, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const {
+        called: called,
+        loading: customFiltersLoading,
+        error,
+        data
+    } = queryResponse;
+    
+    const { pathname, search } = useLocation();
+
+    const {
+        called: introspectionCalled,
+        data: introspectionData,
+        loading: introspectionLoading
+    } = useQuery(getFilterInputsQuery);
+
+    const filterTypeMap = useMemo(() => {
+        const typeMap = new Map();
+        if (introspectionData) {
+            introspectionData.__type.inputFields.forEach(({ name, type }) => {
+                typeMap.set(name, type.name);
+            });
+        }
+        return typeMap;
+    }, [introspectionData]);
+
+    useEffect(() => {
+
+        if (!filterTypeMap.size) {
+            return;
+        }
+
+        const filters = getFiltersFromSearch(search);
+
+        // Construct the filter arg object.
+        const newFilters = {};
+        filters.forEach((values, key) => {
+            newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+        });
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        // newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                filters: newFilters
+            }
+        });
+    }, [
+        runQuery,
+        filterTypeMap,
+        search
+    ]);
+
+    const customFiltersData = customFiltersLoading && !data ? null : (data ? data.customSubFilters : null);
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    return {
+        customFiltersData: customFiltersData || [],
+        categoryUrlSuffix,
+        search,
+        pathname
+    };
+};