@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,116 @@
+import React, { Fragment, Suspense } from 'react';
+import { shape, string } from 'prop-types';
+import { ShoppingBag as ShoppingCartIcon } from 'react-feather';
+import { useIntl } from 'react-intl';
+
+import { useCartTrigger } from '@magento/peregrine/lib/talons/Header/useCartTrigger';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from './cartTrigger.module.css';
+import { GET_ITEM_COUNT_QUERY } from '@magento/venia-ui/lib/components/Header/cartTrigger.gql';
+import cn from 'classnames';
+import { ShoppingCart } from 'iconsax-react';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+const MiniCart = React.lazy(() => import('@magento/venia-ui/lib/components/MiniCart'));
+
+const CartTrigger = props => {
+    const {
+        handleLinkClick,
+        handleTriggerClick,
+        itemCount,
+        miniCartRef,
+        miniCartIsOpen,
+        hideCartTrigger,
+        setMiniCartIsOpen,
+        miniCartTriggerRef
+    } = useCartTrigger({
+        queries: {
+            getItemCountQuery: GET_ITEM_COUNT_QUERY
+        }
+    });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+    const buttonAriaLabel = formatMessage(
+        {
+            id: 'cartTrigger.ariaLabel',
+            defaultMessage:
+                'Toggle mini cart. You have {count} items in your cart.'
+        },
+        { count: itemCount }
+    );
+    const itemCountDisplay = itemCount > 99 ? '99+' : itemCount;
+    const triggerClassName = miniCartIsOpen
+        ? classes.triggerContainer_open
+        : classes.triggerContainer;
+
+    const maybeItemCounter = itemCount ? (
+        <span
+            className={cn(
+                classes.counter,
+                'bg-yellow-300 min-w-[18px] min-h-[18px] text-base font-regular leading-[18px] top-[-5px]',
+                '!left-auto right-[0px]'
+            )}
+            data-cy="CartTrigger-counter"
+        >
+            {itemCountDisplay}
+        </span>
+    ) : null;
+
+    const cartTrigger = hideCartTrigger ? null : (
+        // Because this button behaves differently on desktop and mobile
+        // we render two buttons that differ only in their click handler
+        // and control which one displays via CSS.
+        <Fragment>
+            <div className={cn(triggerClassName, '!h-auto')} ref={miniCartTriggerRef}>
+                <button
+                    aria-expanded={miniCartIsOpen}
+                    aria-label={buttonAriaLabel}
+                    className={cn(
+                        classes.trigger,
+                        'gap-[5px] !min-h-[30px] !h-auto !min-w-[35px] !w-fit !justify-between',
+                    )}
+                    onClick={handleTriggerClick}
+                    data-cy="CartTrigger-trigger"
+                >
+                    {/* <Icon src={ShoppingCartIcon} /> */}
+                    <ShoppingCart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                    {maybeItemCounter}
+                </button>
+            </div>
+            <button
+                aria-expanded={miniCartIsOpen}
+                aria-label={buttonAriaLabel}
+                className={classes.link}
+                onClick={handleLinkClick}
+            >
+                <Icon src={ShoppingCartIcon} />
+                {maybeItemCounter}
+            </button>
+            <Suspense fallback={null}>
+                <MiniCart
+                    isOpen={miniCartIsOpen}
+                    setIsOpen={setMiniCartIsOpen}
+                    ref={miniCartRef}
+                />
+            </Suspense>
+        </Fragment>
+    );
+
+    return cartTrigger;
+};
+
+export default CartTrigger;
+
+CartTrigger.propTypes = {
+    classes: shape({
+        counter: string,
+        link: string,
+        openIndicator: string,
+        root: string,
+        trigger: string,
+        triggerContainer: string
+    })
+};

package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.module.css

@@ -0,0 +1,47 @@
+.counter {
+    composes: absolute from global;
+    composes: bg-brand-dark from global;
+    composes: font-medium from global;
+    composes: leading-tight from global;
+    composes: left-sm from global;
+    composes: min-w-[1.25rem] from global;
+    composes: px-1 from global;
+    composes: py-0 from global;
+    composes: rounded-full from global;
+    composes: text-white from global;
+    composes: top-1.5 from global;
+}
+
+.trigger {
+    composes: root from '@magento/venia-ui/lib/components/clickable.module.css';
+
+    composes: content-center from global;
+    composes: flex from global;
+    composes: h-[3rem] from global;
+    composes: justify-center from global;
+    composes: min-w-[3rem] from global;
+    composes: relative from global;
+    composes: z-foreground from global;
+}
+
+.triggerContainer {
+    composes: hidden from global;
+    composes: items-center from global;
+    composes: h-lg from global;
+
+    composes: lg_grid from global;
+}
+
+.triggerContainer_open {
+    composes: triggerContainer;
+
+    composes: shadow-headerTrigger from global;
+}
+
+.link {
+    composes: trigger;
+
+    composes: flex from global;
+
+    composes: lg_hidden from global;
+}

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

@@ -2,8 +2,9 @@ import React, { Fragment, Suspense } from 'react';
 import { shape, string } from 'prop-types';
 import { Link, Route } from 'react-router-dom';
 
-import AccountTrigger from '@magento/venia-ui/lib/components/Header/accountTrigger';
-import CartTrigger from '@magento/venia-ui/lib/components/Header/cartTrigger';
+import AccountTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/accountTrigger';
+import CartTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/cartTrigger';
+import WishlistTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/wishlistTrigger';
 import NavTrigger from '@magento/venia-ui/lib/components/Header/navTrigger';
 import SearchTrigger from '@magento/venia-ui/lib/components/Header/searchTrigger';
 import OnlineIndicator from '@magento/venia-ui/lib/components/Header/onlineIndicator';
@@ -14,7 +15,8 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from '@magento/venia-ui/lib/components/Header/header.module.css';
 import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
 import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
-import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
+// import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
+import CurrencySwitcher from '@riosst100/pwa-marketplace/src/components/CurrencySwitcher';
 import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSellerLink/becomeSellerLink';
 import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
 import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
@@ -22,6 +24,10 @@ import { useIntl } from 'react-intl';
 import cn from 'classnames';
 // const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
 const SearchBar = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar'));
+import { SearchNormal } from 'iconsax-react';
+
+import { useLogo } from '@riosst100/pwa-marketplace/src/talons/Header/useLogo';
+import Image from '@magento/venia-ui/lib/components/Image';
 
 const Header = props => {
     const {
@@ -33,6 +39,15 @@ const Header = props => {
         searchTriggerRef
     } = useHeader();
 
+    const talonPropsLogo = useLogo();
+    const { data } = talonPropsLogo
+    const baseUrl = data?.storeConfig?.base_media_url;
+    const imageSource = data?.storeConfig?.header_logo_src;
+    const LogoImageSource = `${baseUrl}/logo/${imageSource}`;
+    const IMAGE_HEIGHT = data?.storeConfig?.logo_width || 28;
+    const IMAGE_WIDTH = data?.storeConfig?.logo_height || 190;
+    const IMAGE_ALT = data?.storeConfig?.logo_alt || 'TCG Collective';
+
     const classes = useStyle(defaultClasses, props.classes);
     const rootClass = isSearchOpen ? classes.open : classes.closed;
 
@@ -60,8 +75,8 @@ const Header = props => {
     return (
         <Fragment>
             <PageLoadingIndicator absolute />
-            <div className={classes.switchersContainer}>
-                <div className={classes.switchers} data-cy="Header-switchers">
+            <div className={cn(classes.switchersContainer, '!bg-white border-b border-gray-100')}>
+                <div className={cn(classes.switchers, 'flex flex-row gap-x-[25px] !py-2')} data-cy="Header-switchers">
                     <BecomeSellerLink />
                     <WebsiteSwitcher />
                     <StoreSwitcher />
@@ -70,46 +85,80 @@ const Header = props => {
             </div>
             <header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
                 <div className={cn('middle-header border-b border-gray-100')}>
-                    <div className={cn('w-full max-w-[1210px] px-[15px] py-[20px] mx-[auto] flex justify-between items-center')}>
-                        <div className='flex'>
+                    <div className={cn('w-full max-w-[1210px] px-[15px] py-[10px] mx-[auto] flex justify-between items-center')}>
+                        <div className='flex items-center'>
                             <NavTrigger />
+
                             <Link
                                 aria-label={title}
                                 to={resourceUrl('/')}
                                 className={''}
                                 data-cy="Header-logoContainer"
                             >
-                                <div><b>TCG Collective</b></div>
-                                <small>Toys | Card | Games</small>
+                                {imageSource ? (
+                                    <Image
+                                        alt={IMAGE_ALT}
+                                        height={IMAGE_HEIGHT}
+                                        src={LogoImageSource}
+                                        width={IMAGE_WIDTH}
+                                        classes={{
+                                            container: 'logo-wrapper relative'
+                                        }}
+                                    />
+                                ) : (
+                                    <>
+                                        <div className='text-[14px]'><b>TCG Collective</b></div>
+                                        <small>Bringing Collectors Together</small>
+                                    </>
+                                )}
+
                             </Link>
                         </div>
-                        <div className='flex'>
+                        <div className='flex flex-auto max-w-[700px]'>
+                            <div className=' hidden lg_flex w-full'>
+                                <Suspense fallback={searchBarFallback}>
+                                    <Route>
+                                        <SearchBar isOpen={true} ref={searchRef} />
+                                    </Route>
+                                </Suspense>
+                            </div>
+                            <div className='flex w-full justify-end lg_hidden'>
+                                <SearchNormal size="25" color="#280135" variant="Outline" className='mr-4' />
+                            </div>
                             <Suspense fallback={searchBarFallback}>
                                 <Route>
                                     <SearchBar isOpen={true} ref={searchRef} />
                                 </Route>
                             </Suspense>
                         </div>
-                        <div className={classes.secondaryActions}>
+                        <div className={cn(classes.secondaryActions, 'lg_gap-x-5 pl-5 border-l-[1px] border-gray-100')}>
                             {/* <SearchTrigger
                                 onClick={handleSearchTriggerClick}
                                 ref={searchTriggerRef}
                             /> */}
-                            <AccountTrigger />
+                            <WishlistTrigger />
                             <CartTrigger />
+                            <AccountTrigger />
                         </div>
                     </div>
                 </div>
                 <MegaMenu
                     rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
-                    megaMenuItemClassname={cn('px-0 py-[15px] leading-[20px]')}
-                    titleClassName={cn('font-medium leading-[20px]')}
+                    megaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
+                    titleClassName={cn('font-normal leading-[20px]')}
                 />
             </header>
             <OnlineIndicator
                 hasBeenOffline={hasBeenOffline}
                 isOnline={isOnline}
             />
+            <style jsx>
+                {`
+                    .logo-wrapper>img:first-child {
+                        height: ${IMAGE_HEIGHT}px;
+                    }
+                `}
+            </style>
         </Fragment>
     );
 };

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

@@ -5,9 +5,12 @@ import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreS
 import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from '@magento/venia-ui/lib/components/Header/storeSwitcher.module.css';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.module.css';
 import SwitcherItem from '@magento/venia-ui/lib/components/Header/switcherItem';
 import Shimmer from '@magento/venia-ui/lib/components/Header/storeSwitcher.shimmer';
+import cn from 'classnames';
+import { ArrowUp2 } from 'iconsax-react';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
 
 const StoreSwitcher = props => {
     const {
@@ -29,11 +32,13 @@ const StoreSwitcher = props => {
 
     const groups = [];
 
+    const hasOnlyOneStore = availableStores.size === 1;
+
     storeGroups.forEach((group, key) => {
         const stores = [];
         group.forEach(({ storeName, isCurrent, storeCode, websiteCode }) => {
             let label = `${storeName}`;
-            
+
             stores.push(
                 <li
                     aria-selected={currentStoreName}
@@ -57,7 +62,7 @@ const StoreSwitcher = props => {
         groups.push(
             <ul
                 role="listbox"
-                className={classes.groupList}
+                className={cn(classes.groupList, 'text-base')}
                 key={key}
                 data-cy="StoreSwitcher-group"
             >
@@ -67,24 +72,33 @@ const StoreSwitcher = props => {
     });
 
     return (
-        <div className={classes.root} data-cy="StoreSwitcher-root">
+        <div className={cn(classes.root, 'leading-[16px]')} data-cy="StoreSwitcher-root">
             <button
                 data-cy="StoreSwitcher-triggerButton"
-                className={classes.trigger}
+                className={cn(classes.trigger, 'text-base')}
                 aria-label={currentStoreName || ''}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
-                data-cy="StoreSwitcher-trigger"
                 aria-expanded={storeMenuIsOpen}
             >
-                {currentStoreName || ''}
+                <span className='flex flex-row gap-[5px] items-center leading-[16px]'>
+                    {currentStoreName || ''}
+                    {!hasOnlyOneStore ? (
+                        <ArrowUp2 size="12" color={darkBlue} className={cn(storeMenuIsOpen ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
+                    ) : null}
+                </span>
             </button>
             <div
                 ref={storeMenuRef}
                 className={menuClassName}
                 data-cy="StoreSwitcher-menu"
             >
-                <div className={classes.groups}>{groups}</div>
+                <div className={classes.groups}>
+                    <span className='flex font-medium px-4 py-1 w-full text-base'>
+                        Language
+                    </span>
+                    {groups}
+                </div>
             </div>
         </div>
     );

package/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.module.css

@@ -0,0 +1,107 @@
+.root {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: relative from global;
+    composes: sm_justify-items-end from global;
+}
+
+.trigger {
+    composes: max-w-[15rem] from global;
+    composes: overflow-ellipsis from global;
+    composes: overflow-hidden from global;
+    composes: whitespace-nowrap from global;
+
+    composes: sm_max-w-full from global;
+}
+
+.menu {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: bottom-md from global;
+    composes: left-xs from global;
+    composes: max-w-[90vw] from global;
+    composes: opacity-0 from global;
+    composes: pb-2xs from global;
+    composes: pt-2xs from global;
+    composes: right-auto from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: top-auto from global;
+    composes: w-max from global;
+    composes: z-menu from global;
+    transform: translate3d(0, -8px, 0);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+    transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+
+    composes: sm_bottom-auto from global;
+    composes: sm_left-auto from global;
+    composes: sm_right-xs from global;
+    composes: sm_top-md from global;
+}
+
+.menu_open {
+    composes: menu;
+
+    composes: opacity-100 from global;
+    transform: translate3d(0, 4px, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+.menuItem {
+    composes: hover_bg-subtle from global;
+}
+
+.groups {
+    composes: max-h-[24rem] from global;
+    composes: overflow-auto from global;
+}
+
+.groupList {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: pb-2xs from global;
+    composes: pt-2xs from global;
+
+    composes: last_border-none from global;
+}
+
+/*
+ * Mobile-specific styles.
+ */
+
+@media (max-width: 639px) {
+    .root:only-child {
+        grid-column: 2;
+    }
+
+    /* TODO @TW: cannot compose */
+    .root:last-child .menu {
+        right: 1rem;
+        left: auto;
+    }
+
+    .menu {
+        transform: translate3d(0, 8px, 0);
+    }
+
+    .menu_open {
+        transform: translate3d(0, -4px, 0);
+    }
+}

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { Heart } from 'iconsax-react';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
+import cn from 'classnames';
+
+const wishlistTrigger = () => {
+    return (
+        <div className='wishlistTrigger'>
+            <Link
+                aria-label='wishlist-action'
+                to={resourceUrl('/wishlist')}
+                className={''}
+                data-cy="wishlistLink"
+            >
+                <Heart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+            </Link>
+        </div>
+    )
+}
+
+export default wishlistTrigger

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

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

package/src/overwrites/venia-ui/lib/components/Main/main.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { bool, shape, string } from 'prop-types';
+import { useScrollLock } from '@magento/peregrine';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Footer from '@magento/venia-ui/lib/components/Footer';
+import Header from '@magento/venia-ui/lib/components/Header';
+import defaultClasses from './main.module.css';
+import cn from 'classnames';
+
+const Main = props => {
+    const { children, isMasked } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const rootClass = isMasked ? classes.root_masked : classes.root;
+    const pageClass = isMasked ? classes.page_masked : classes.page;
+
+    useScrollLock(isMasked);
+
+    return (
+        <main className={rootClass}>
+            <Header />
+            <div className={cn(pageClass, 'main-content-container pb-16 !min-h-[50vh]')}>{children}</div>
+            <Footer />
+        </main>
+    );
+};
+
+export default Main;
+
+Main.propTypes = {
+    classes: shape({
+        page: string,
+        page_masked: string,
+        root: string,
+        root_masked: string
+    }),
+    isMasked: bool
+};

package/src/overwrites/venia-ui/lib/components/Main/main.module.css

@@ -0,0 +1,41 @@
+.root {
+    composes: bg-white from global;
+    composes: relative from global;
+    composes: text-colorDefault from global;
+    composes: z-foreground from global;
+}
+
+.root_masked {
+    composes: root;
+}
+
+.page {
+    composes: md_max-w-screen-md from global;
+    composes: lg_max-w-[1210px] from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-[15px] from global;
+    min-height: 40rem;
+}
+
+.page_masked {
+    composes: page;
+}
+
+@media (min-height: 640px) {
+    .page {
+        min-height: 48rem;
+    }
+}
+
+@media (min-height: 768px) {
+    .page {
+        min-height: 60rem;
+    }
+}
+
+@media (min-height: 960px) {
+    .page {
+        min-height: 72rem;
+    }
+}

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

@@ -0,0 +1,75 @@
+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';
+import cn from 'classnames';
+
+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={cn(classes.submenuChildItem, 'mt-1')}>
+                    <Link
+                        className={classes.link}
+                        data-cy="MegaMenu-CustomSubmenuColumn-link"
+                        to={categoryUrl}
+                        onClick={() => {
+                            handleCloseSubMenu();
+                            onNavigate();
+                            toggleCustomMenu();
+                        }}
+                    >
+                        {name}
+                    </Link>
+                </li>
+            );
+        });
+
+        children = <>
+        <ul className={cn(classes.submenuChild, 'pt-1')}><span className={classes.heading}>Categories</span>{childrenItems}</ul>
+        </>;
+    }
+
+    return children;
+    // return (
+    //     <div className={classes.submenuColumn}>
+    //         <Link
+    //             // {...keyboardProps}
+    //             className={classes.link}
+    //             data-cy="MegaMenu-SubmenuColumn-link"
+    //             // to={categoryUrl}
+    //             // onClick={() => {
+    //                 // handleCloseSubMenu();
+    //                 // onNavigate();
+    //             // }}
+    //         >
+    //             <span className={classes.heading}>{category.name}</span>
+    //         </Link>
+    //         {children}
+    //     </div>
+    // );
+};
+
+export default CustomSubmenuColumn;