@riosst100/pwa-marketplace 1.3.9 → 1.4.0

package/package.json

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

package/src/componentOverrideMapping.js

@@ -36,4 +36,5 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/ProductImageCarousel/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductImageCarousel/index.js',
     [`@magento/venia-ui/lib/components/QuantityStepper/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper/index.js',
     [`@magento/venia-ui/lib/components/RichContent/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichContent/index.js',
+    [`@magento/venia-ui/lib/components/RadioGroup/radio.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js',
 };

package/src/components/AttributesBlock/attributesBlock.js

@@ -0,0 +1,54 @@
+import { useAttributesBlock } from '@riosst100/pwa-marketplace/src/talons/AttributesBlock/useAttributesBlock';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './attributesBlock.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const AttributesBlock = props => {
+    const { attributesBlock, category } = props;
+
+    const talonProps = useAttributesBlock({ attributesBlock });
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        categoryUrlSuffix,
+        getPath
+    } = talonProps;
+    
+    const result = [];
+    
+    attributesBlock && attributesBlock.map(({ label, code, items }, index) => {
+
+        const itemsResult = [];
+
+        items && items.map(({ label, value }, index) => {
+            const path = resourceUrl(
+                `/${category.url_path}${categoryUrlSuffix || ''}?${code}[filter]=${label},${value}`
+            );
+
+            itemsResult.push(
+                <>
+                    <Link
+                            key={index}
+                            to={path}
+                        >
+                        <li className={classes.item}>{label}</li>
+                    </Link>
+                </>
+            )
+        });
+
+        result.push(
+            <>
+                <div className={classes.title}>{label}</div>
+                <ul className={classes.root}>{itemsResult}</ul>
+            </>
+        )
+    });
+
+    return result;
+};
+
+export default AttributesBlock;

package/src/components/AttributesBlock/attributesBlock.module.css

@@ -0,0 +1,28 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.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;
+}
+
+.title {
+    composes: pb-3 from global;
+    composes: font-bold from global;
+    composes: text-[14px] from global;
+}

package/src/components/SubCategory/subCategory.js

@@ -29,7 +29,7 @@ const SubCategory = props => {
         )
     });
 
-    return <ul className={classes.root}>{subCategory}</ul>;
+    return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
 };
 
 export default SubCategory;

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -29,6 +29,14 @@ export const GET_CATEGORY_CONTENT = gql`
                 description
                 url_key
                 url_path
+                attributes_block {
+                    label
+                    code
+                    items {
+                      label
+                      value
+                    }
+                }
                 parent {
                     uid
                     name

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -91,6 +91,9 @@ export const useCategoryContent = props => {
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].children
             : null;
+    const attributesBlock = categoryData && categoryData.categories.items.length
+    ? categoryData.categories.items[0].attributes_block
+    : null;
     const parent =
     categoryData && categoryData.categories.items.length
         ? categoryData.categories.items[0].parent
@@ -99,6 +102,10 @@ export const useCategoryContent = props => {
         ? data.products.page_info.total_pages
         : null;
     const totalCount = data ? data.products.total_count : null;
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
     const categoryName =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0].name
@@ -134,6 +141,8 @@ export const useCategoryContent = props => {
         totalCount,
         totalPagesFromData,
         children,
-        parent
+        parent,
+        attributesBlock,
+        category
     };
 };

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css

@@ -20,6 +20,7 @@
 
 .categoryTitle {
     composes: font-semibold from global;
+    composes: text-[20px] from global;
 }
 
 .heading {

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

@@ -25,6 +25,7 @@ import NoProductsFound from './NoProductsFound';
 import cn from 'classnames';
 import ProductListTab, { ProductListTabShimmer } from '@riosst100/pwa-marketplace/src/components/ProductListTab';
 import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
+import AttributesBlock from '@riosst100/pwa-marketplace/src/components/AttributesBlock/attributesBlock';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -56,7 +57,9 @@ const CategoryContent = props => {
         items,
         children,
         totalCount,
-        totalPagesFromData
+        totalPagesFromData,
+        attributesBlock,
+        category
     } = talonProps;
 
     const sidebarRef = useRef(null);
@@ -179,6 +182,7 @@ const CategoryContent = props => {
                     {categoryDescriptionElement}
                 </div>
                 <SubCategory children={children} />
+                <AttributesBlock category={category} attributesBlock={attributesBlock} />
                 <div className={classes.contentWrapper}>
                     <div ref={sidebarRef} className={classes.sidebar}>
                         <Suspense fallback={<FilterSidebarShimmer />}>

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

@@ -102,7 +102,7 @@ const FilterList = props => {
     // memoize item creation
     // search value is not referenced, so this array is stable
     const itemElements = useMemo(() => {
-        if (filterFrontendInput === 'boolean') {
+        // if (filterFrontendInput === 'boolean') {
             const key = `item-${group}`;
             return (
                 <li
@@ -121,7 +121,7 @@ const FilterList = props => {
                     />
                 </li>
             );
-        }
+        // }
 
         return items.map((item, index) => {
             const { title, value } = item;

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css

@@ -44,7 +44,8 @@
 /* TODO @TW: cannot compose */
 .action button {
     /* composes: text-base from global; */
-    font-size: 13px;
+    font-size: 12px;
+    /* composes: text-[13px] from global; */
     /* composes: no-underline from global; */
     font-weight: 500;
     text-decoration: underline;

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -81,7 +81,7 @@ const Header = props => {
                                 className={''}
                                 data-cy="Header-logoContainer"
                             >
-                                <div className='text-base'><b>TCG Collective</b></div>
+                                <div className='text-[14px]'><b>TCG Collective</b></div>
                                 <small>Bringing Collectors Together</small>
                             </Link>
                         </div>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
@@ -6,10 +6,13 @@ import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenuColumn.module.css';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 
 const ShopByColumn = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
+    const { formatMessage } = useIntl();
+
     const {
         shopBy,
         category,
@@ -22,8 +25,15 @@ const ShopByColumn = props => {
 
     let items = null;
 
+    const itemCountToShow = 4;
+
     if (shopBy.items.length) {
         const childrenItems = shopBy.items.map((shopByItem, index) => {
+
+            if (index >= itemCountToShow) {
+                return null;
+            }
+
             const { name, option_id } = shopByItem;
     //         const categoryUrl = resourceUrl(
     //             `/${url_path}${categoryUrlSuffix || ''}`
@@ -47,7 +57,10 @@ const ShopByColumn = props => {
                         className={classes.link}
                         data-cy="MegaMenu-ShopByColumn-link"
                         to={categoryUrl}
-                        onClick={handleCloseSubMenu}
+                        onClick={() => {
+                            handleCloseSubMenu();
+                            onNavigate();
+                        }}
                     >
                         {name}
                     </Link>
@@ -58,11 +71,47 @@ const ShopByColumn = props => {
         items = <ul className={classes.submenuChild}>{childrenItems}</ul>;
     }
 
+    const viewAll = useMemo(() => {
+        if (shopBy.items.length <= itemCountToShow) {
+            return null;
+        }
+
+        const label = formatMessage({
+            id: 'filterList.viewAll',
+            defaultMessage: 'View All'
+        });
+
+        const categoryUrl = resourceUrl(
+            `/shop/${shopBy.code}`
+        );
+
+        return (
+            <li className={classes.submenuChildItem}>
+                <Link
+                    // className={isActive ? classes.linkActive : classes.link}
+                    className={classes.link}
+                    data-cy="MegaMenu-ShopByColumn-link"
+                    to={categoryUrl}
+                    onClick={handleCloseSubMenu}
+                >
+                    {label}
+                </Link>
+            </li>
+        );
+    }, [
+        // handleViewAll,
+        shopBy,
+        itemCountToShow,
+        formatMessage,
+        // classes
+    ]);
+
     return (
         <div className={classes.submenuItems}>
             <div className={classes.submenuColumn}>
                 <span className={classes.heading}>{shopBy.name}</span>
                 {items}
+                {viewAll}
             </div>
         </div>
     );

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

@@ -48,7 +48,10 @@ const SubmenuColumn = props => {
                         className={isActive ? classes.linkActive : classes.link}
                         data-cy="MegaMenu-SubmenuColumn-link"
                         to={categoryUrl}
-                        onClick={onNavigate}
+                        onClick={() => {
+                            handleCloseSubMenu();
+                            onNavigate();
+                        }}
                     >
                         {name}
                     </Link>

package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Circle } from 'react-feather';
+import { node, shape, string } from 'prop-types';
+import { Radio as InformedRadio } from 'informed';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './radio.module.css';
+
+/* TODO: change lint config to use `label-has-associated-control` */
+/* eslint-disable jsx-a11y/label-has-for */
+
+const RadioOption = props => {
+    const {
+        ariaLabel,
+        classes: propClasses,
+        id,
+        label,
+        value,
+        ...rest
+    } = props;
+    const classes = useStyle(defaultClasses, propClasses);
+
+    return (
+        <label
+            className={classes.root}
+            htmlFor={id}
+            aria-label={ariaLabel ? ariaLabel : ''}
+        >
+            <InformedRadio
+                {...rest}
+                className={classes.input}
+                id={id}
+                value={value}
+            />
+            <span className={classes.icon}>
+                <Circle />
+            </span>
+            <span className={classes.label}>
+                {label || (value != null ? value : '')}
+            </span>
+        </label>
+    );
+};
+
+export default RadioOption;
+
+RadioOption.propTypes = {
+    ariaLabel: string,
+    classes: shape({
+        icon: string,
+        input: string,
+        label: string,
+        root: string
+    }),
+    id: string.isRequired,
+    label: node.isRequired,
+    value: node.isRequired
+};
+
+/* eslint-enable jsx-a11y/label-has-for */

package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.module.css

@@ -0,0 +1,70 @@
+.root {
+    composes: gap-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: leading-normal from global;
+    composes: m-0 from global;
+    composes: text-colorDefault from global;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+}
+
+.input {
+    composes: appearance-none from global;
+    composes: bg-clip-content from global;
+    composes: bg-transparent from global;
+    composes: border-8 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    composes: h-[1.5rem] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[1.5rem] from global;
+    composes: z-foreground from global;
+    grid-area: input;
+
+    composes: active_outline-none from global;
+    /* composes: active_shadow-radioActive from global; */
+
+    composes: checked_bg-brand-dark from global;
+
+    composes: focus_outline-none from global;
+    /* composes: focus_shadow-radioFocus from global; */
+}
+
+.icon {
+    composes: h-[14px] from global;
+    composes: w-[14px] from global;
+    composes: z-surface from global;
+    grid-area: input;
+}
+
+/* TODO @TW: cannot compose */
+.icon svg {
+    /* composes: stroke-gray-600 from global; */
+    stroke: rgb(var(--venia-global-color-gray-600));
+    width: 14px;
+    height: 14px;
+}
+
+.label {
+    composes: justify-self-start from global;
+    composes: text-base from global;
+    grid-area: label;
+}
+
+/* TODO @TW: cannot compose */
+.input:checked + .icon svg {
+    /* composes: stroke-brand-base from global; */
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
+
+.input_shimmer {
+    composes: h-[14px] from global;
+    composes: m-0 from global;
+    composes: rounded-full from global;
+    composes: w-[14px] from global;
+    composes: z-foreground from global;
+}

package/src/talons/AttributesBlock/attributesBlock.gql.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+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 {
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/AttributesBlock/useAttributesBlock.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './attributesBlock.gql';
+
+const getPath = (path, suffix) => {
+    if (path) {
+        return `/${path}${suffix || ''}`;
+    }
+
+    // If there is no path this is just a dead link.
+    return '#';
+};
+
+export const useAttributesBlock = props => {
+    const { attributesBlock } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    return {
+        categoryUrlSuffix,
+        getPath
+    };
+};