@riosst100/pwa-marketplace 1.4.0 → 1.4.2

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

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

@@ -25,7 +25,7 @@ const ShopByColumn = props => {
 
     let items = null;
 
-    const itemCountToShow = 4;
+    const itemCountToShow = 9999;
 
     if (shopBy.items.length) {
         const childrenItems = shopBy.items.map((shopByItem, index) => {

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,20 +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={() => {
-                            handleCloseSubMenu();
-                            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 {

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/productReview.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import Review from '@riosst100/pwa-marketplace/src/components/SellerReviewItem';
+import { Star1 } from 'iconsax-react';
+import Button from '../../Button';
+
+const productReview = (props) => {
+
+    const { className } = props;
+
+    return (
+        <div className={className}>
+            <div className='review-summary flex justify-between mb-[30px] pb-[30px] border-b border-gray-100'>
+                <div className="justify-start items-end gap-[15px] inline-flex">
+                    <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
+                    <div className="flex-col justify-start items-start gap-[9px] inline-flex">
+                        <div className="justify-start items-start gap-1.5 inline-flex">
+                            <div className="w-3.5 h-3.5 relative">
+                                <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                            </div>
+                            <div className="w-3.5 h-3.5 relative">
+                                <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                            </div>
+                            <div className="w-3.5 h-3.5 relative">
+                                <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                            </div>
+                            <div className="w-3.5 h-3.5 relative">
+                                <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                            </div>
+                            <div className="w-3.5 h-3.5 relative">
+                                <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+                            </div>
+                        </div>
+                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
+                    </div>
+                </div>
+                <Button
+                    classes={{
+                        content: 'normal-case font-normal text-base'
+                    }}
+                >
+                    Write a review
+                </Button>
+            </div>
+            <div className='review-list flex flex-col gap-y-4'>
+                <Review />
+                <Review />
+                <Review />
+                <Review />
+                <Review />
+            </div>
+        </div>
+    )
+}
+
+export default productReview