@riosst100/pwa-marketplace 1.3.3 → 1.3.4

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 '@magento/venia-ui/lib/components/Header/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-[13px] font-regular leading-[18px] text-darkblue-900 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="30" 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/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';
@@ -60,8 +62,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 />
@@ -83,27 +85,28 @@ const Header = props => {
                                 <small>Toys | Card | Games</small>
                             </Link>
                         </div>
-                        <div className='flex'>
+                        <div className='flex flex-auto max-w-[700px]'>
                             <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]')}
+                    titleClassName={cn('font-medium leading-[20px] text-darkblue-900')}
                 />
             </header>
             <OnlineIndicator

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-[13px]')}
                 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-[13px]')}
                 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] text-darkblue-900'>
+                    {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={cn(classes.groups, 'text-darkblue-900')}>
+                    <span className='flex font-medium px-4 py-1 w-full text-[14px]'>
+                        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="30" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+            </Link>
+        </div>
+    )
+}
+
+export default wishlistTrigger

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

@@ -85,7 +85,7 @@ const MegaMenuItem = props => {
     ]);
 
     const maybeDownArrowIcon = category.children.length ? (
-        <ArrowDown2 className='ml-2' size="16" color={textPrimary} variant="Outline" />
+        <ArrowDown2 className='ml-2 stroke-current' size="16" color={textPrimary} variant="Outline" />
     ) : null;
 
     const linkAttributes = category.children.length

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

@@ -37,7 +37,6 @@
     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;
 }

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

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

package/src/overwrites/venia-ui/lib/components/Pagination/navButton.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import {
+    ChevronLeft as ChevronLeftIcon,
+    ChevronRight as ChevronRightIcon,
+    FastForward as FastForwardIcon,
+    Rewind as RewindIcon
+} from 'react-feather';
+import cn from 'classnames';
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+import { blue } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from '@magento/venia-ui/lib/components/Pagination/navButton.module.css';
+
+const icons = new Map()
+    .set('ChevronLeft', ChevronLeftIcon)
+    .set('ChevronRight', ChevronRightIcon)
+    .set('FastForward', FastForwardIcon)
+    .set('Rewind', RewindIcon);
+
+const NavButton = props => {
+    const { active, buttonLabel, name, onClick } = props;
+    const iconSrc = icons.get(name);
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const iconClass = active ? classes.icon : classes.icon_disabled;
+
+    return (
+        <button
+            aria-label={buttonLabel}
+            className={cn(
+                classes.root,
+                'border-[1px] border-gray-100 rounded-[5px] !min-h-auto h-fit min-w-[40px] px-[10px] py-[7px]'
+            )}
+            disabled={!active}
+            onClick={onClick}
+        >
+            {name === 'ChevronLeft' && (
+                <ArrowLeft2 size={14} color={blue} className={cn(`stroke-[${blue}]`)} variant="Outline" />
+            )}
+            {name === 'ChevronRight' && (
+                <ArrowRight2 size={14} color={blue} className={cn(`stroke-[${blue}]`)} variant="Outline" />
+            )}
+            {name !== 'ChevronRight' && name !== 'ChevronLeft' && (
+                <Icon className={iconClass} size={20} src={iconSrc} />
+            )}
+        </button>
+    );
+};
+
+export default NavButton;
+
+NavButton.propTypes = {
+    classes: shape({
+        icon: string,
+        icon_disabled: string,
+        root: string
+    })
+};
+
+NavButton.defaultProps = {
+    buttonLabel: 'move to another page'
+};

package/src/overwrites/venia-ui/lib/components/Pagination/pagination.js

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { func, number, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+import { usePagination } from '@magento/peregrine/lib/talons/Pagination/usePagination';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from '@magento/venia-ui/lib/components/Pagination/pagination.module.css';
+import Tile from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination/tile';
+import NavButton from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination/navButton';
+import { navButtons } from '@magento/venia-ui/lib/components/Pagination/constants';
+import cn from 'classnames';
+
+const Pagination = props => {
+    const { currentPage, setPage, totalPages } = props.pageControl;
+    const { formatMessage } = useIntl();
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const talonProps = usePagination({
+        currentPage,
+        setPage,
+        totalPages
+    });
+
+    const {
+        handleLeftSkip,
+        handleRightSkip,
+        handleNavBack,
+        handleNavForward,
+        isActiveLeft,
+        isActiveRight,
+        tiles
+    } = talonProps;
+
+    const navigationTiles = useMemo(
+        () =>
+            tiles.map(tileNumber => {
+                return (
+                    <Tile
+                        isActive={tileNumber === currentPage}
+                        key={tileNumber}
+                        number={tileNumber}
+                        onClick={setPage}
+                    />
+                );
+            }),
+        [currentPage, tiles, setPage]
+    );
+
+    if (totalPages === 1) {
+        return null;
+    }
+
+    return (
+        <div className={cn(classes.root, 'gap-x-[10px] !border-0')} data-cy="Pagination-root">
+            {/* <NavButton
+                name={navButtons.firstPage.name}
+                active={isActiveLeft}
+                onClick={handleLeftSkip}
+                buttonLabel={formatMessage({
+                    id: 'pagination.firstPage',
+                    defaultMessage: navButtons.firstPage.buttonLabel
+                })}
+            /> */}
+            <NavButton
+                name={navButtons.prevPage.name}
+                active={isActiveLeft}
+                onClick={handleNavBack}
+                buttonLabel={formatMessage({
+                    id: 'pagination.prevPage',
+                    defaultMessage: navButtons.prevPage.buttonLabel
+                })}
+            />
+            {navigationTiles}
+            <NavButton
+                name={navButtons.nextPage.name}
+                active={isActiveRight}
+                onClick={handleNavForward}
+                buttonLabel={formatMessage({
+                    id: 'pagination.nextPage',
+                    defaultMessage: navButtons.nextPage.buttonLabel
+                })}
+            />
+            {/* <NavButton
+                name={navButtons.lastPage.name}
+                active={isActiveRight}
+                onClick={handleRightSkip}
+                buttonLabel={formatMessage({
+                    id: 'pagination.lastPage',
+                    defaultMessage: navButtons.lastPage.buttonLabel
+                })}
+            /> */}
+        </div>
+    );
+};
+
+Pagination.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    pageControl: shape({
+        currentPage: number,
+        setPage: func,
+        totalPages: number
+    }).isRequired
+};
+
+export default Pagination;

package/src/overwrites/venia-ui/lib/components/Pagination/tile.js

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import { bool, func, number, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from '@magento/venia-ui/lib/components/Pagination/tile.module.css';
+import cn from 'classnames';
+
+const Tile = props => {
+    const { isActive, number, onClick } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClass = isActive ? classes.root_active : classes.root;
+    const handleClick = useCallback(() => onClick(number), [onClick, number]);
+
+    return (
+        <button
+            className={cn(
+                rootClass,
+                isActive ? 'bg-blue-600 !border-blue-600' : 'bg-white',
+                'border-[1px] border-gray-100 rounded-[5px] !min-h-auto h-fit min-w-[40px] px-[10px] py-[7px]'
+            )}
+            onClick={handleClick}
+            data-cy={isActive ? 'Tile-activeRoot' : 'Tile-root'}
+        >
+            <span className={cn(isActive ? '!text-white' : 'text-blue-600', 'text-base leading-[16px]')}>
+                {number}
+            </span>
+        </button>
+    );
+};
+
+Tile.propTypes = {
+    classes: shape({
+        root: string,
+        root_active: string
+    }),
+    isActive: bool,
+    number: number,
+    onClick: func
+};
+
+export default Tile;