@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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-medium 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/megaMenu.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
 import { useMegaMenu } from '@magento/peregrine/lib/talons/MegaMenu/useMegaMenu';
+// import { useMegaMenu } from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenu';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 
 import MegaMenuItem from './megaMenuItem';
@@ -51,7 +52,7 @@ const MegaMenu = (props) => {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    });
+    }, [setMainNavWidth]);
 
     const items = megaMenuData.children
         ? megaMenuData.children.map(category => {

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

@@ -61,16 +61,21 @@ 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 ? (
+        return category.children.length || category.name == "Lego" ? (
             <Submenu
                 isFocused={isFocused}
                 subMenuState={subMenuState}
                 items={category.children}
+                parentCategory={category}
+                shopByItems={category.shop_by}
                 mainNavWidth={mainNavWidth}
                 handleCloseSubMenu={handleCloseSubMenu}
                 categoryUrlSuffix={categoryUrlSuffix}
                 onNavigate={onNavigate}
+                arrow={arrow}
             />
         ) : null;
     }, [
@@ -82,9 +87,9 @@ const MegaMenuItem = props => {
         categoryUrlSuffix,
         onNavigate
     ]);
-
+    
     const maybeDownArrowIcon = category.children.length ? (
-        <ArrowDown2 className='ml-2' size="16" color={textPrimary} variant="Outline" />
+        <ArrowDown2 className='ml-2' size={12} color={textPrimary} variant="Outline" />
     ) : null;
 
     const linkAttributes = category.children.length
@@ -120,14 +125,15 @@ const MegaMenuItem = props => {
                 onKeyDown={handleKeyDown}
                 className={cn(
                     isActive ? classes.megaMenuLinkActive : classes.megaMenuLink,
-                    titleClassName
+                    titleClassName,
+                    'flex items-center'
                 )}
                 data-cy="MegaMenu-MegaMenuItem-link"
                 to={categoryUrl}
                 onClick={onNavigate}
             >
                 {category.name}
-                {maybeDownArrowIcon}
+                {/* {maybeDownArrowIcon} */}
             </Link>
             {children}
         </div>

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

@@ -0,0 +1,121 @@
+import React, { useMemo } 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 './submenuColumn.module.css';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import cn from 'classnames';
+
+const ShopByColumn = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const { formatMessage } = useIntl();
+
+    const {
+        shopBy,
+        category,
+        categoryUrlSuffix,
+        handleCloseSubMenu,
+        onNavigate
+    } = props;
+
+    const { url_path } = category;
+
+    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 || ''}`
+    //         );
+
+            // setting keyboardProps if it is last child of that shopBy
+            const keyboardProps =
+                index === shopBy.items.length - 1
+                    ? props.keyboardProps
+                    : {};
+
+            const categoryUrl = 
+                `/${shopByItem.url_path}`
+            ;
+
+            return (
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
+                    <Link
+                        {...keyboardProps}
+                        // className={isActive ? classes.linkActive : classes.link}
+                        className={classes.link}
+                        data-cy="MegaMenu-ShopByColumn-link"
+                        to={categoryUrl}
+                        onClick={() => {
+                            handleCloseSubMenu();
+                            onNavigate();
+                        }}
+                    >
+                        {name}
+                    </Link>
+                </li>
+            );
+        });
+
+        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>
+    );
+};
+
+export default ShopByColumn;

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

@@ -0,0 +1,26 @@
+.submenuColumn {
+    /* composes: max-w-[235px] from global; */
+    composes: p-5 from global;
+}
+
+.heading {
+    composes: font-medium from global;
+}
+
+.link {
+    composes: whitespace-nowrap from global;
+    composes: focus_underline from global;
+    composes: hover_underline from global;
+}
+
+.linkActive {
+    composes: underline from global;
+}
+
+.submenuChild {
+    composes: mt-0 from global;
+}
+
+.submenuChildItem {
+    composes: mb-3 from global;
+}

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

@@ -6,6 +6,9 @@ import { useSubMenu } from '@magento/peregrine/lib/talons/MegaMenu/useSubMenu';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenu.module.css';
 import SubmenuColumn from './submenuColumn';
+import ShopByColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn';
+import CustomSubmenuColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/customSubmenuColumn';
+import cn from 'classnames';
 
 /**
  * The Submenu component displays submenu in mega menu
@@ -17,12 +20,15 @@ import SubmenuColumn from './submenuColumn';
 const Submenu = props => {
     const {
         items,
+        shopByItems,
         mainNavWidth,
         isFocused,
         subMenuState,
         handleCloseSubMenu,
         categoryUrlSuffix,
-        onNavigate
+        parentCategory,
+        onNavigate,
+        arrow
     } = props;
     const PADDING_OFFSET = 20;
     const classes = useStyle(defaultClasses, props.classes);
@@ -39,6 +45,29 @@ const Submenu = props => {
         ? classes.submenu_active
         : classes.submenu_inactive;
 
+    // const subMenus = items.map((category, index) => {
+    //     const keyboardProps =
+    //         index === items.length - 1 ? talonProps.keyboardProps : {};
+    //     return (
+    //         <SubmenuColumn
+    //             index={index}
+    //             keyboardProps={keyboardProps}
+    //             key={category.uid}
+    //             category={category}
+    //             categoryUrlSuffix={categoryUrlSuffix}
+    //             onNavigate={onNavigate}
+    //             arrow={arrow}
+    //             handleCloseSubMenu={handleCloseSubMenu}
+    //         />
+    //     );
+    // });
+    // const subMenus = <CustomSubmenuColumn
+    //     categoryUrlSuffix={categoryUrlSuffix}
+    //     onNavigate={onNavigate}
+    //     arrow={arrow}
+    //     handleCloseSubMenu={handleCloseSubMenu}
+    //     customMenuItems={items}
+    // />;
     const subMenus = items.map((category, index) => {
         const keyboardProps =
             index === items.length - 1 ? talonProps.keyboardProps : {};
@@ -50,6 +79,45 @@ const Submenu = props => {
                 category={category}
                 categoryUrlSuffix={categoryUrlSuffix}
                 onNavigate={onNavigate}
+                arrow={arrow}
+                handleCloseSubMenu={handleCloseSubMenu}
+            />
+        );
+    });
+
+    // const shopByItems2 = [
+    //     {
+    //         name: 'Shop By Franchise',
+    //         items: [
+    //             {
+    //                 name: 'Hasbro',
+    //                 url: '/'
+    //             }
+    //         ]
+    //     },
+    //     {
+    //         name: 'Shop By Franchise',
+    //         items: [
+    //             {
+    //                 name: 'Hasbro',
+    //                 url: '/'
+    //             }
+    //         ]
+    //     }
+    // ];
+
+    const shopBy = shopByItems.map((shopBy, index) => {
+        const keyboardProps =
+            index === shopByItems.length - 1 ? talonProps.keyboardProps : {};
+        return (
+            <ShopByColumn
+                index={index}
+                keyboardProps={keyboardProps}
+                key={shopBy.code}
+                category={parentCategory}
+                shopBy={shopBy}
+                categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
                 handleCloseSubMenu={handleCloseSubMenu}
             />
         );
@@ -58,32 +126,23 @@ const Submenu = props => {
     return (
         <div className={subMenuClassname}>
             <div
-                className={classes.submenuItems}
-                style={{ minWidth: mainNavWidth + PADDING_OFFSET }}
+                className={cn(
+                    classes.submenuContainer,
+                    // 'grid grid-cols-4'
+                )}
             >
-                {subMenus}
+                <div
+                    className={cn(
+                        classes.submenuItems,
+                        'grid grid-cols-6',
+                    )}
+                >
+                    {subMenus}
+                    {shopBy}
+                </div>
             </div>
         </div>
     );
 };
 
 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

@@ -1,16 +1,23 @@
 .submenu {
     composes: absolute from global;
     composes: bg-white from global;
-    composes: flex-wrap from global;
-    composes: justify-between from global;
     composes: left-0 from global;
     composes: px-3 from global;
-    composes: py-5 from global;
+    composes: py-1 from global;
     composes: right-0 from global;
-    top: 139px;
+    top: 102px;
     box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
 }
 
+.submenuContainer {
+    composes: w-full from global;
+    composes: max-w-[1210px] from global;
+    composes: mx-[auto] from global;
+    composes: gap-[15px] from global;
+    composes: max-h-[50vh] from global;
+    composes: overflow-y-auto from global;
+}
+
 /* TODO @TW: cannot compose */
 .submenu::before {
     box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100));
@@ -30,14 +37,13 @@
 
 .submenu_active {
     composes: submenu;
-    composes: flex from global;
 }
 
 .submenuItems {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: justify-between from global;
-    composes: max-w-site from global;
-    composes: ml-auto from global;
-    composes: mr-auto from global;
+    composes: grid from global;
+    composes: grid-cols-6 pb-2 from global;
+    /* composes: justify-between from global; */
+    /* composes: ml-auto from global; */
+    /* composes: mr-auto 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,10 @@ 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';
+import cn from 'classnames';
 
 /**
  * The SubmenuColumn component displays columns with categories in submenu
@@ -18,8 +22,10 @@ const SubmenuColumn = props => {
         category,
         categoryUrlSuffix,
         onNavigate,
-        handleCloseSubMenu
+        handleCloseSubMenu,
+        arrow
     } = props;
+
     const classes = useStyle(defaultClasses, props.classes);
 
     const categoryUrl = resourceUrl(
@@ -27,6 +33,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;
@@ -40,17 +50,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>
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-0')}>
+                    {customMenuItems.length ? (
+                        <>
+                            <Link
+                                {...keyboardProps}
+                                className={isActive ? classes.linkActive : classes.link}
+                                data-cy="MegaMenu-SubmenuColumn-link"
+                                to={categoryUrl}
+                                onClick={() => {
+                                    handleCloseSubMenu();
+                                    onNavigate();
+                                }}
+                            >
+                                {name}
+                            </Link>
+                        </>
+                    ) : (
+                        <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

@@ -1,10 +1,10 @@
 .submenuColumn {
-    composes: max-w-[235px] from global;
-    composes: p-5 from global;
+    /* composes: max-w-[235px] from global; */
+    composes: pl-4 pt-2 from global;
 }
 
 .heading {
-    composes: font-semibold from global;
+    composes: font-medium from global;
 }
 
 .link {
@@ -13,16 +13,21 @@
     composes: focus_underline from global;
 
     composes: hover_underline from global;
+
+    align-items: center;
+    composes: inline-flex from global;
 }
 
 .linkActive {
     composes: underline from global;
+    align-items: center;
+    composes: inline-flex from global;
 }
 
 .submenuChild {
-    composes: mt-5 from global;
+    composes: mt-0 from global;
 }
 
 .submenuChildItem {
-    composes: mb-3 from global;
-}
+    composes: mb-0 from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.gql.js

@@ -0,0 +1,22 @@
+import gql from 'graphql-tag';
+
+export const RESET_PASSWORD_MUTATION = gql`
+    mutation resetPassword(
+        $email: String!
+        $token: String!
+        $newPassword: String!
+    ) {
+        resetPassword(
+            email: $email
+            resetPasswordToken: $token
+            newPassword: $newPassword
+        )
+    }
+`;
+
+export default {
+    queries: {},
+    mutations: {
+        resetPasswordMutation: RESET_PASSWORD_MUTATION
+    }
+};