@riosst100/pwa-marketplace 1.3.9 → 1.4.1

package/src/overwrites/venia-ui/lib/components/Button/button.js

@@ -0,0 +1,100 @@
+import React, { useRef } from 'react';
+import { useButton } from 'react-aria';
+import { oneOf, shape, string, bool } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './button.module.css';
+import cn from 'classnames';
+
+const getRootClassName = (priority, negative) =>
+    `root_${priority}Priority${negative ? 'Negative' : ''}`;
+
+/**
+ * A component for buttons.
+ *
+ * @typedef Button
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a single button.
+ */
+const Button = props => {
+    const {
+        children,
+        classes: propClasses,
+        priority,
+        negative,
+        disabled,
+        onPress,
+        ...restProps
+    } = props;
+
+    const buttonRef = useRef();
+
+    const { buttonProps } = useButton(
+        {
+            isDisabled: disabled,
+            onPress,
+            ...restProps
+        },
+        buttonRef
+    );
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const rootClassName = classes[getRootClassName(priority, negative)];
+
+    return (
+        <button
+            ref={buttonRef}
+            className={rootClassName}
+            {...buttonProps}
+            {...restProps}
+        >
+            <span className={cn(classes.content)}>{children}</span>
+        </button>
+    );
+};
+
+/**
+ * Props for {@link Button}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the
+ * Button component.
+ * @property {string} classes.content classes for the button content
+ * @property {string} classes.root classes for root container
+ * @property {string} classes.root_highPriority classes for Button if
+ * high priority.
+ * @property {string} classes.root_lowPriority classes for Button if
+ * low priority.
+ * @property {string} classes.root_normalPriority classes for Button if
+ * normal priority.
+ * @property {string} priority the priority/importance of the Button
+ * @property {string} type the type of the Button
+ * @property {bool} negative whether the button should be displayed in red for a negative action
+ * @property {bool} disabled is the button disabled
+ */
+Button.propTypes = {
+    classes: shape({
+        content: string,
+        root: string,
+        root_highPriority: string,
+        root_lowPriority: string,
+        root_normalPriority: string
+    }),
+    priority: oneOf(['high', 'low', 'normal']).isRequired,
+    type: oneOf(['button', 'reset', 'submit']).isRequired,
+    negative: bool,
+    disabled: bool
+};
+
+Button.defaultProps = {
+    priority: 'normal',
+    type: 'button',
+    negative: false,
+    disabled: false
+};
+
+export default Button;

package/src/overwrites/venia-ui/lib/components/Button/button.module.css

@@ -0,0 +1,128 @@
+.root {
+    composes: border from global;
+    composes: border-solid from global;
+    composes: cursor-pointer from global;
+    composes: font-bold from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-full from global;
+    composes: min-w-[10rem] from global;
+    composes: outline-none from global;
+    composes: pointer-events-auto from global;
+    composes: px-sm from global;
+    composes: rounded-full from global;
+    composes: text-center from global;
+    composes: text-sm from global;
+    composes: uppercase from global;
+    composes: py-2 from global;
+
+    transition-duration: 256ms;
+    transition-property: background-color, border-color, color;
+    transition-timing-function: var(--venia-global-anim-standard);
+
+    composes: disabled_bg-gray-400 from global;
+    composes: disabled_border-gray-400 from global;
+    composes: disabled_opacity-50 from global;
+    composes: disabled_pointer-events-none from global;
+    composes: disabled_text-white from global;
+
+    composes: focus_shadow-inputFocus from global;
+}
+
+.root:active {
+    transition-duration: 128ms;
+}
+
+/**
+ * Some browsers retain the :hover state after a click, this ensures if a button becomes disabled after
+ * being clicked it will be visually disabled.
+ */
+.root:hover:disabled {
+    /* TODO @TW: cannot compose. This may not be possible with two variants. */
+    pointer-events: none;
+}
+
+.root_lowPriority {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-gray-700 from global;
+    composes: text-gray-700 from global;
+
+    composes: active_border-gray-800 from global;
+    composes: active_text-gray-800 from global;
+
+    composes: hover_border-gray-800 from global;
+    composes: hover_text-gray-800 from global;
+}
+
+.root_normalPriority {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-brand-dark from global;
+    composes: text-brand-dark from global;
+
+    composes: active_border-brand-darkest from global;
+    composes: active_text-brand-darkest from global;
+
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-brand-darkest from global;
+}
+
+.root_highPriority {
+    composes: root;
+
+    composes: bg-brand-dark from global;
+    composes: border-brand-dark from global;
+    composes: text-white from global;
+
+    composes: active_bg-brand-darkest from global;
+    composes: active_border-brand-darkest from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-brand-darkest from global;
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-white from global;
+}
+
+.root_lowPriorityNegative,
+.root_normalPriorityNegative {
+    composes: root;
+
+    composes: bg-transparent from global;
+    composes: border-red-600 from global;
+    composes: text-red-600 from global;
+
+    composes: active_border-red-700 from global;
+    composes: active_text-red-700 from global;
+
+    composes: hover_border-red-700 from global;
+    composes: hover_text-red-700 from global;
+}
+
+.root_highPriorityNegative {
+    composes: root;
+
+    composes: bg-red-600 from global;
+    composes: border-red-600 from global;
+    composes: text-white from global;
+
+    composes: active_bg-red-700 from global;
+    composes: active_border-red-700 from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-red-700 from global;
+    composes: hover_border-red-700 from global;
+    composes: hover_text-white from global;
+}
+
+.content {
+    composes: gap-1.5 from global;
+    composes: grid-flow-col from global;
+    composes: inline-grid from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-items-center from global;
+}

package/src/overwrites/venia-ui/lib/components/Button/index.js

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

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/customSubmenuColumn.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './customSubmenuColumn.module.css';
+
+const CustomSubmenuColumn = props => {
+    const {
+        category,
+        categoryUrlSuffix,
+        onNavigate,
+        handleCloseSubMenu,
+        customMenuItems,
+        toggleCustomMenu
+    } = props;
+    
+    const classes = useStyle(defaultClasses, props.classes);
+
+    let children = null;
+
+    if (customMenuItems.length) {
+        const childrenItems = customMenuItems.map((submenu, index) => {
+            const { name, path } = submenu;
+
+            const categoryUrl = resourceUrl(
+                `/${path}`
+            );
+
+            return (
+                <li key={index} className={classes.submenuChildItem}>
+                    <Link
+                        className={classes.link}
+                        data-cy="MegaMenu-CustomSubmenuColumn-link"
+                        to={categoryUrl}
+                        onClick={() => {
+                            handleCloseSubMenu();
+                            onNavigate();
+                            toggleCustomMenu();
+                        }}
+                    >
+                        {name}
+                    </Link>
+                </li>
+            );
+        });
+
+        children = <ul className={classes.submenuChild}>{childrenItems}</ul>;
+    }
+
+    return children;
+};
+
+export default CustomSubmenuColumn;

package/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn.module.css

@@ -0,0 +1,29 @@
+.customSubmenuColumn {
+    composes: max-w-[235px] from global;
+    composes: p-2 from global;
+}
+
+.heading {
+    composes: font-semibold from global;
+}
+
+.link {
+    composes: whitespace-nowrap from global;
+
+    composes: focus_underline from global;
+
+    composes: hover_underline from global;
+}
+
+.linkActive {
+    composes: underline from global;
+}
+
+.submenuChild {
+    margin-left: 15px;
+    composes: mt-0 from global;
+}
+
+.submenuChildItem {
+    composes: mb-0 from global;
+}

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

@@ -61,6 +61,8 @@ const MegaMenuItem = props => {
         ? classes.megaMenuItem_active
         : classes.megaMenuItem;
 
+    const arrow = <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />;
+
     const children = useMemo(() => {
         return category.children.length ? (
             <Submenu
@@ -73,6 +75,7 @@ const MegaMenuItem = props => {
                 handleCloseSubMenu={handleCloseSubMenu}
                 categoryUrlSuffix={categoryUrlSuffix}
                 onNavigate={onNavigate}
+                arrow={arrow}
             />
         ) : null;
     }, [
@@ -86,7 +89,7 @@ const MegaMenuItem = props => {
     ]);
 
     const maybeDownArrowIcon = category.children.length ? (
-        <ArrowDown2 className='ml-2 stroke-current' size="16" color={textPrimary} variant="Outline" />
+        <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />
     ) : null;
 
     const linkAttributes = category.children.length
@@ -113,8 +116,8 @@ const MegaMenuItem = props => {
                 handleMenuItemFocus();
             }}
             onMouseLeave={e => {
-                handleClickOutside(e);
-                handleCloseSubMenu();
+                // handleClickOutside(e);
+                // handleCloseSubMenu();
             }}
         >
             <Link

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 = 9999;
+
     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/submenu.js

@@ -25,7 +25,8 @@ const Submenu = props => {
         handleCloseSubMenu,
         categoryUrlSuffix,
         parentCategory,
-        onNavigate
+        onNavigate,
+        arrow
     } = props;
     const PADDING_OFFSET = 20;
     const classes = useStyle(defaultClasses, props.classes);
@@ -53,6 +54,7 @@ const Submenu = props => {
                 category={category}
                 categoryUrlSuffix={categoryUrlSuffix}
                 onNavigate={onNavigate}
+                arrow={arrow}
                 handleCloseSubMenu={handleCloseSubMenu}
             />
         );
@@ -102,22 +104,3 @@ const Submenu = props => {
 };
 
 export default Submenu;
-
-Submenu.propTypes = {
-    items: PropTypes.arrayOf(
-        PropTypes.shape({
-            children: PropTypes.array.isRequired,
-            uid: PropTypes.string.isRequired,
-            include_in_menu: PropTypes.number.isRequired,
-            isActive: PropTypes.bool.isRequired,
-            name: PropTypes.string.isRequired,
-            path: PropTypes.array.isRequired,
-            position: PropTypes.number.isRequired,
-            url_path: PropTypes.string.isRequired
-        })
-    ).isRequired,
-    mainNavWidth: PropTypes.number.isRequired,
-    categoryUrlSuffix: PropTypes.string,
-    onNavigate: PropTypes.func.isRequired,
-    handleCloseSubMenu: PropTypes.func.isRequired
-};

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css

@@ -43,8 +43,9 @@
 .submenuItems {
     composes: flex from global;
     composes: flex-wrap from global;
+    composes: gap-[30px] from global;
     /* composes: justify-between from global; */
     /* composes: ml-auto from global; */
     /* composes: mr-auto from global; */
-    composes: flex-col from global;
+    /* composes: flex-col from global; */
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
@@ -6,6 +6,9 @@ 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 { ArrowDown2 } from 'iconsax-react';
+import { textPrimary } from '@riosst100/pwa-marketplace/src/theme/vars';
+import CustomSubmenuColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn';
 
 /**
  * The SubmenuColumn component displays columns with categories in submenu
@@ -18,7 +21,8 @@ const SubmenuColumn = props => {
         category,
         categoryUrlSuffix,
         onNavigate,
-        handleCloseSubMenu
+        handleCloseSubMenu,
+        arrow
     } = props;
     
     const classes = useStyle(defaultClasses, props.classes);
@@ -28,6 +32,10 @@ const SubmenuColumn = props => {
     );
     let children = null;
 
+    // let maybeDownArrowIcon = () => {
+    //     return ;
+    // };
+
     if (category.children.length) {
         const childrenItems = category.children.map((subCategory, index) => {
             const { url_path, isActive, name } = subCategory;
@@ -41,17 +49,60 @@ const SubmenuColumn = props => {
                     ? props.keyboardProps
                     : {};
 
+            const customMenuItems = subCategory.custom_submenu;
+
+            const [showCustomMenu, setShowCustomMenu] = useState(false);
+
+            const toggleCustomMenu = () => {
+                if (!showCustomMenu) {
+                    setShowCustomMenu(true);
+                } else {
+                    setShowCustomMenu(false);
+                }
+            }
+
+            const customSubMenus = customMenuItems.length ? (
+                <CustomSubmenuColumn 
+                categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+                handleCloseSubMenu={handleCloseSubMenu}
+                category={subCategory} 
+                customMenuItems={customMenuItems}
+                toggleCustomMenu={toggleCustomMenu}
+                />
+            ) : '';
+
             return (
                 <li key={index} className={classes.submenuChildItem}>
-                    <Link
-                        {...keyboardProps}
-                        className={isActive ? classes.linkActive : classes.link}
-                        data-cy="MegaMenu-SubmenuColumn-link"
-                        to={categoryUrl}
-                        onClick={onNavigate}
-                    >
-                        {name}
-                    </Link>
+                    {customMenuItems.length ? (
+                        <>
+                            <div
+                                // {...keyboardProps}
+                                className={isActive ? classes.linkActive : classes.link}
+                                data-cy="MegaMenu-SubmenuColumn-link"
+                                onClick={() => {
+                                    toggleCustomMenu();
+                                }}
+                            >
+                                {name}
+                                {arrow}
+                            </div>
+                            {showCustomMenu ? customSubMenus : ''}
+                        </>
+                    ) : (
+                        <Link
+                            {...keyboardProps}
+                            className={isActive ? classes.linkActive : classes.link}
+                            data-cy="MegaMenu-SubmenuColumn-link"
+                            to={categoryUrl}
+                            onClick={() => {
+                                handleCloseSubMenu();
+                                onNavigate();
+                            }}
+                        >
+                            {name}
+                        </Link>
+                    )}
                 </li>
             );
         });

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

@@ -13,10 +13,15 @@
     composes: focus_underline from global;
 
     composes: hover_underline from global;
+
+    align-items: center;
+    composes: flex from global;
 }
 
 .linkActive {
     composes: underline from global;
+    align-items: center;
+    composes: flex from global;
 }
 
 .submenuChild {