@riosst100/pwa-marketplace 2.4.7 → 2.4.8

package/package.json

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

package/src/componentOverrideMapping.js

@@ -10,6 +10,9 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/Region/useRegion.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Region/useRegion.js',
     [`@magento/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql`]: '@riosst100/pwa-marketplace/src/overwrites/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql',
     [`@magento/peregrine/lib/store/actions/user/asyncActions.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/store/actions/user/asyncActions.js',
+    [`@magento/peregrine/lib/store/actions/cart/asyncActions.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/store/actions/cart/asyncActions.js',
+    [`@magento/peregrine/lib/context/cart.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/context/cart.js',
+    [`@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js',
     [`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',
     [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
     [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',

package/src/components/Seller/seller.js

@@ -7,12 +7,20 @@ import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
 import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail/sellerDetail';
 
 const Seller = props => {
+    const { categoryUrlKey } = props;
+
+    console.log('categoryUrlKey+'+categoryUrlKey)
+    console.log(props)
+
     const talonProps = useSeller({
         mapSeller
     });
 
     const { error, loading, seller } = talonProps;
 
+    console.log('---seller')
+    console.log(seller)
+
     if (loading && !seller)
         return '';
     // return <SellerShimmer />;

package/src/components/SellerDetail/sellerDetail.js

@@ -53,7 +53,7 @@ const SellerDetail = props => {
             {
                 id: 'product-tab',
                 title: 'All Products',
-                content: <SellerProducts sellerId={seller?.seller_id} />
+                content: <SellerProducts sellerId={seller?.seller_id} seller={seller} />
             },
             {
                 id: 'store-information',
@@ -102,6 +102,7 @@ const SellerDetail = props => {
                         <Image
                             alt={seller.name}
                             width='100'
+                            style={{"height":'100px',"objectFit":"cover"}}
                             src={seller.thumbnail || ''} />
                     ) : (
                         <div className='flex items-center justify-center bg-gray-300 border rounded-radius1 relative w-[100px] h-[100px]'>
@@ -166,8 +167,8 @@ const SellerDetail = props => {
                         </div>
                     </div>
                 </div>
-                <div class="flex items-center gap-[20px] px-[10px] py-[30px] relative">
-                    <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
+                <div class="flex items-center gap-[20px] px-[10px] py-[10px] relative">
+                    {/* <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" /> */}
                     <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
                         <div class="flex items-center gap-[5px] relative">
                             <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />

package/src/components/SellerMegaMenu/index.js

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

package/src/components/SellerMegaMenu/sellerMegaMenu.js

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
+import { useSellerMegaMenu } from '@riosst100/pwa-marketplace/src/talons/SellerMegaMenu/useSellerMegaMenu';
+// import { useMegaMenu } from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenu';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import SellerMegaMenuItem from './sellerMegaMenuItem';
+import defaultClasses from './sellerMegaMenu.module.css';
+import cn from 'classnames';
+
+/**
+ * The SellerMegaMenu component displays menu with categories on desktop devices
+ */
+const SellerMegaMenu = (props) => {
+    const { rootClassName, seller, sellerMegaMenuItemClassname, titleClassName } = props
+    const mainNavRef = useRef(null);
+
+    const classes = useStyle(defaultClasses, props.classes);
+    // const rootClass = cn(classes.sellerMegaMenu, rootClassName);
+    const rootClass = cn('flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100 xs_hidden xl_flex flex-grow justify-self-center', rootClassName);
+
+    const {
+        megaMenuData,
+        activeCategoryId,
+        sellerSubMenuState,
+        disableFocus,
+        handleSellerSubMenuFocus,
+        categoryUrlSuffix,
+        handleNavigate,
+        handleClickOutside
+    } = useSellerMegaMenu({ mainNavRef });
+
+    const [mainNavWidth, setMainNavWidth] = useState(0);
+    const shouldRenderItems = useIsInViewport({
+        elementRef: mainNavRef
+    });
+
+    useEffect(() => {
+        const handleResize = () => {
+            const navWidth = mainNavRef.current
+                ? mainNavRef.current.offsetWidth
+                : null;
+
+            setMainNavWidth(navWidth);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        handleResize();
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [setMainNavWidth]);
+
+    const items = megaMenuData.children
+        ? megaMenuData.children.map(category => {
+            return (
+                <SellerMegaMenuItem
+                    category={category}
+                    activeCategoryId={activeCategoryId}
+                    categoryUrlSuffix={categoryUrlSuffix}
+                    mainNavWidth={mainNavWidth}
+                    onNavigate={handleNavigate}
+                    key={category.uid}
+                    seller={seller}
+                    sellerSubMenuState={sellerSubMenuState}
+                    disableFocus={disableFocus}
+                    handleSellerSubMenuFocus={handleSellerSubMenuFocus}
+                    handleClickOutside={handleClickOutside}
+                    sellerMegaMenuItemClassname={sellerMegaMenuItemClassname}
+                    titleClassName={titleClassName}
+                />
+            );
+        })
+        : null;
+
+    return (
+        <nav
+            ref={mainNavRef}
+            className={rootClass}
+            data-cy="SellerMegaMenu-sellerMegaMenu"
+            role="navigation"
+            onFocus={handleSellerSubMenuFocus}
+        >
+            {shouldRenderItems ? items : null}
+        </nav>
+    );
+};
+
+export default SellerMegaMenu;

package/src/components/SellerMegaMenu/sellerMegaMenu.module.css

@@ -0,0 +1,12 @@
+.sellerMegaMenu {
+    composes: col-end-10 from global;
+    composes: col-start-3 from global;
+    composes: flex-grow from global;
+    composes: hidden from global;
+    composes: justify-self-center from global;
+}
+
+/* Large screen styles */
+.sellerMegaMenu {
+    composes: lg_flex from global;
+}

package/src/components/SellerMegaMenu/sellerMegaMenuItem.js

@@ -0,0 +1,164 @@
+import React, { useMemo } from 'react';
+import { ChevronDown as ArrowDown } from 'react-feather';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { useSellerMegaMenuItem } from '@riosst100/pwa-marketplace/src/talons/SellerMegaMenu/useSellerMegaMenuItem';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './sellerMegaMenuItem.module.css';
+import SellerSubmenu from './sellerSubmenu';
+import { ArrowDown2 } from 'iconsax-react';
+import { textPrimary } from '@riosst100/pwa-marketplace/src/theme/vars';
+import cn from 'classnames';
+
+/**
+ * The SellerMegaMenuItem component displays mega menu item
+ *
+ * @param {MegaMenuCategory} props.category
+ * @param {String} props.activeCategoryId - uid of active category
+ * @param {int} props.mainNavWidth - width of the main nav. It's used for setting min-width of the submenu
+ * @param {function} props.onNavigate - function called when clicking on Link
+ */
+const SellerMegaMenuItem = props => {
+    const {
+        activeCategoryId,
+        category,
+        mainNavWidth,
+        categoryUrlSuffix,
+        sellerSubMenuState,
+        seller,
+        disableFocus,
+        onNavigate,
+        handleSellerSubMenuFocus,
+        handleClickOutside,
+        sellerMegaMenuItemClassname,
+        titleClassName,
+    } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const categoryUrl = resourceUrl(
+        `/${category.url_path}${categoryUrlSuffix || ''}`
+    );
+
+    const talonProps = useSellerMegaMenuItem({
+        category,
+        activeCategoryId,
+        sellerSubMenuState,
+        disableFocus
+    });
+
+    const {
+        isFocused,
+        isActive,
+        handleMenuItemFocus,
+        handleCloseSellerSubMenu,
+        isMenuActive,
+        handleKeyDown
+    } = talonProps;
+
+    const itemClassName = isMenuActive
+        ? classes.sellerMegaMenuItem_active
+        : classes.sellerMegaMenuItem;
+
+    const arrow = <ArrowDown2 className='ml-2 stroke-current' size="14" color={textPrimary} variant="Outline" />;
+
+    const children = useMemo(() => {
+        return category.children.length || category.name == "Lego" ? (
+            <SellerSubmenu
+                isFocused={isFocused}
+                sellerSubMenuState={sellerSubMenuState}
+                items={category.children}
+                seller={seller}
+                parentCategory={category}
+                shopByItems={category.shop_by}
+                mainNavWidth={mainNavWidth}
+                handleCloseSellerSubMenu={handleCloseSellerSubMenu}
+                categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+                arrow={arrow}
+            />
+        ) : null;
+    }, [
+        category,
+        isFocused,
+        mainNavWidth,
+        sellerSubMenuState,
+        handleCloseSellerSubMenu,
+        categoryUrlSuffix,
+        onNavigate
+    ]);
+    
+    const maybeDownArrowIcon = category.children.length ? (
+        <ArrowDown2 className='ml-2' size={12} color={textPrimary} variant="Outline" />
+    ) : null;
+
+    const linkAttributes = category.children.length
+        ? {
+            'aria-label': `Category: ${category.name}. ${category.children.length
+                } sub-categories`
+        }
+        : {};
+
+    return category.name != 'Auction' && (
+        <div
+            className={cn(itemClassName, sellerMegaMenuItemClassname)}
+            data-cy="SellerMegaMenu-SellerMegaMenuItem-sellerMegaMenuItem"
+            onMouseEnter={() => {
+                handleSellerSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onFocus={() => {
+                handleSellerSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onTouchStart={() => {
+                handleSellerSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onMouseLeave={e => {
+                handleClickOutside(e);
+                handleCloseSellerSubMenu();
+            }}
+        >
+            <Link
+                {...linkAttributes}
+                onKeyDown={handleKeyDown}
+                className={cn(
+                    isActive ? classes.sellerMegaMenuLinkActive : classes.sellerMegaMenuLink,
+                    titleClassName,
+                    'flex items-center'
+                )}
+                data-cy="SellerMegaMenu-SellerMegaMenuItem-link"
+                to={'/seller/' + seller?.url_key + categoryUrl}
+                onClick={onNavigate}
+            >
+                {category.name}
+                {/* {maybeDownArrowIcon} */}
+            </Link>
+            {children}
+        </div>
+    );
+};
+
+export default SellerMegaMenuItem;
+
+SellerMegaMenuItem.propTypes = {
+    category: PropTypes.shape({
+        children: PropTypes.array,
+        uid: PropTypes.string.isRequired,
+        include_in_menu: PropTypes.number,
+        isActive: PropTypes.bool.isRequired,
+        name: PropTypes.string.isRequired,
+        path: PropTypes.array.isRequired,
+        position: PropTypes.number.isRequired,
+        url_path: PropTypes.string.isRequired
+    }).isRequired,
+    activeCategoryId: PropTypes.string,
+    mainNavWidth: PropTypes.number.isRequired,
+    categoryUrlSuffix: PropTypes.string,
+    onNavigate: PropTypes.func.isRequired,
+    handleSellerSubMenuFocus: PropTypes.func.isRequired,
+    handleClickOutside: PropTypes.func.isRequired
+};

package/src/components/SellerMegaMenu/sellerMegaMenuItem.module.css

@@ -0,0 +1,31 @@
+.sellerMegaMenuItem {
+    /* composes: px-3 from global;
+    composes: py-0 from global; */
+}
+
+.sellerMegaMenuLink {
+    composes: items-center from global;
+    composes: inline-flex from global;
+    /* min-height: 5rem; */
+}
+
+.sellerMegaMenuLinkActive {
+    composes: sellerMegaMenuLink;
+    composes: underline from global;
+}
+
+.sellerMegaMenuItem_active {
+    composes: sellerMegaMenuItem;
+    composes: flex from global;
+}
+
+.arrowDown {
+    composes: leading-[0] from global;
+    composes: pl-2xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.sellerMegaMenuItem:hover .sellerMegaMenuLink,
+.sellerMegaMenuItem:focus .sellerMegaMenuLink {
+    text-decoration: underline;
+}

package/src/components/SellerMegaMenu/sellerSubmenu.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useSellerSubMenu } from '@riosst100/pwa-marketplace/src/talons/SellerMegaMenu/useSellerSubMenu';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './sellerSubmenu.module.css';
+import SellerSubmenuColumn from './sellerSubmenuColumn';
+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 sellerSubmenu in mega menu
+ *
+ * @param {array} props.items - categories to display
+ * @param {int} props.mainNavWidth - width of the main nav. It's used for setting min-width of the sellerSubmenu
+ * @param {function} props.onNavigate - function called when clicking on Link
+ */
+const SellerSubmenu = props => {
+    const {
+        items,
+        shopByItems,
+        mainNavWidth,
+        seller,
+        isFocused,
+        sellerSubMenuState,
+        handleCloseSellerSubMenu,
+        categoryUrlSuffix,
+        parentCategory,
+        onNavigate,
+        arrow
+    } = props;
+    const PADDING_OFFSET = 20;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const talonProps = useSellerSubMenu({
+        isFocused,
+        sellerSubMenuState,
+        handleCloseSellerSubMenu
+    });
+
+    const { isSellerSubMenuActive } = talonProps;
+
+    const subMenuClassname = isSellerSubMenuActive
+        ? classes.sellerSubmenu_active
+        : classes.sellerSubmenu_inactive;
+
+    const subMenus = items.map((category, index) => {
+        const keyboardProps =
+            index === items.length - 1 ? talonProps.keyboardProps : {};
+        return (
+            <SellerSubmenuColumn
+                index={index}
+                keyboardProps={keyboardProps}
+                key={category.uid}
+                category={category}
+                seller={seller}
+                categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+                arrow={arrow}
+                handleCloseSellerSubMenu={handleCloseSellerSubMenu}
+            />
+        );
+    });
+
+    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}
+                handleCloseSellerSubMenu={handleCloseSellerSubMenu}
+            />
+        );
+    });
+
+    return (
+        <div className={subMenuClassname}>
+            <div
+                className={cn(
+                    classes.sellerSubmenuContainer,
+                    // 'grid grid-cols-4'
+                )}
+            >
+                <div
+                    className={cn(
+                        classes.sellerSubmenuItems,
+                        'grid grid-cols-6',
+                    )}
+                >
+                    {subMenus}
+                    {shopBy}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SellerSubmenu;

package/src/components/SellerMegaMenu/sellerSubmenu.module.css

@@ -0,0 +1,57 @@
+.sellerSubmenu {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: left-0 from global;
+    composes: px-3 from global;
+    composes: py-1 from global;
+    composes: right-0 from global;
+    top: 608px;
+    /* box-shadow: 0 3px rgb(var(--venia-global-color-gray-100)); */
+}
+
+.sellerSubmenuContainer {
+    composes: w-full from global;
+    composes: max-w-[1180px] from global;
+    composes: mx-[auto] from global;
+    composes: gap-[15px] from global;
+    composes: max-h-[50vh] from global;
+    composes: overflow-y-auto from global;
+    composes: rounded-[6px] from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    z-index: 99;
+    background-color: white;
+    position: relative;
+    /* box-shadow: 0 3px 6px rgb(var(--venia-global-color-gray-100)); */
+}
+
+/* TODO @TW: cannot compose */
+.sellerSubmenu::before {
+    /* box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100)); */
+    content: '';
+    height: 1px;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.sellerSubmenu_inactive {
+    composes: sellerSubmenu;
+    composes: hidden from global;
+}
+
+.sellerSubmenu_active {
+    composes: sellerSubmenu;
+}
+
+.sellerSubmenuItems {
+    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; */
+}