@riosst100/pwa-marketplace 3.1.2 → 3.1.4

package/package.json

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

package/src/components/BrandLandingPage/brandLanding.js

@@ -6,7 +6,6 @@ import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
 import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import Breadcrumbs from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs';
 import FilterModalOpenButton, {
     FilterModalOpenButtonShimmer
 } from '@magento/venia-ui/lib/components/FilterModalOpenButton';
@@ -24,8 +23,6 @@ import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/l
 import NoProductsFound from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/NoProductsFound';
 import cn from 'classnames';
 import ProductListTab, { ProductListTabShimmer } from '@riosst100/pwa-marketplace/src/components/ProductListTab';
-import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
-import AttributesBlock from '@riosst100/pwa-marketplace/src/components/AttributesBlock/attributesBlock';
 
 import ProductLineSlider from '@riosst100/pwa-marketplace/src/components/ProductLineSlider';
 import BrandMenu from './menu';
@@ -62,7 +59,6 @@ const CategoryContent = props => {
         children,
         totalCount,
         totalPagesFromData,
-        attributesBlock,
         category
     } = talonProps;
 
@@ -187,7 +183,6 @@ const CategoryContent = props => {
                     <BrandInfo />
                 </section>
                 {/* <SubCategory children={children} /> */}
-                <AttributesBlock category={category} attributesBlock={attributesBlock} />
                 <section
                     className={cn(
                         'category_brand-slider my-5 before_absolute before_bg-[#F8F8F8]',

package/src/components/CheckoutHeader/accountTrigger.js

@@ -0,0 +1,104 @@
+import React, { Fragment, Suspense } from 'react';
+import { useIntl } from 'react-intl';
+import { shape, string } from 'prop-types';
+
+import { useAccountTrigger } from '@magento/peregrine/lib/talons/Header/useAccountTrigger';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+// import AccountChip from '../AccountChip';
+import { User as UserIcon } from 'react-feather';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
+import cn from 'classnames';
+
+import defaultClasses from '@magento/venia-ui/lib/components/Header/accountTrigger.module.css';
+
+const AccountMenu = React.lazy(() => import('@magento/venia-ui/lib/components/AccountMenu'));
+
+
+/**
+ * The AccountTrigger component is the call to action in the site header
+ * that toggles the AccountMenu dropdown.
+ *
+ * @param {Object} props
+ * @param {Object} props.classes - CSS classes to override element styles.
+ */
+const AccountTrigger = props => {
+    const talonProps = useAccountTrigger();
+    const {
+        accountMenuIsOpen,
+        accountMenuRef,
+        accountMenuTriggerRef,
+        setAccountMenuIsOpen,
+        handleTriggerClick,
+        isUserSignedIn
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = accountMenuIsOpen ? classes.root_open : classes.root;
+    const { formatMessage } = useIntl();
+
+    const ariaLabelMyMenu = formatMessage({
+        id: 'accountTrigger.ariaLabelMyMenu',
+        defaultMessage: 'Toggle My Account Menu'
+    });
+    const ariaLabelSignIn = formatMessage({
+        id: 'accountTrigger.ariaLabelSignIn',
+        defaultMessage: 'Sign In'
+    });
+    
+    const ariaLabel = isUserSignedIn ? ariaLabelMyMenu : ariaLabelSignIn;
+    return (
+        <Fragment>
+            <div className={cn(rootClassName, '!h-auto')} ref={accountMenuTriggerRef}>
+                <button
+                    aria-label={ariaLabel}
+                    aria-expanded={accountMenuIsOpen}
+                    className={cn(
+                        classes.trigger,
+                        'gap-[5px] !min-h-[30px] !h-auto !justify-between !min-w-min !w-fit',
+                    )}
+                    onClick={handleTriggerClick}
+                    data-cy="AccountTrigger-trigger"
+                >
+                    {/* <AccountChip
+                        fallbackText={formatMessage({
+                            id: 'accountTrigger.buttonFallback',
+                            defaultMessage: 'Sign In'
+                        })}
+                        shouldIndicateLoading={true}
+                    /> */}
+                    <Icon src={UserIcon} attrs={{ width: 20 }} />
+                    {isUserSignedIn ? <span className='text-base font-medium'>
+                        {formatMessage({
+                            id: 'accountTrigger.myAccount',
+                            defaultMessage: 'My Account'
+                        })}
+                    </span> : <span className='text-base font-medium'>
+                        {formatMessage({
+                            id: 'accountTrigger.buttonFallback',
+                            defaultMessage: 'Sign In'
+                        })}
+                    </span>}
+                </button>
+            </div>
+            <Suspense fallback={null}>
+                <AccountMenu
+                    handleTriggerClick={handleTriggerClick}
+                    ref={accountMenuRef}
+                    accountMenuIsOpen={accountMenuIsOpen}
+                    setAccountMenuIsOpen={setAccountMenuIsOpen}
+                />
+            </Suspense>
+        </Fragment>
+    );
+};
+
+export default AccountTrigger;
+
+AccountTrigger.propTypes = {
+    classes: shape({
+        root: string,
+        root_open: string,
+        trigger: string
+    })
+};

package/src/components/CheckoutHeader/cartTrigger.js

@@ -0,0 +1,110 @@
+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 'react-feather';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
+import { Link } from 'react-router-dom';
+
+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-[#f76b1c] min-w-[18px] min-h-[18px] text-[10px] font-regular leading-[18px] top-[-5px]',
+                '!left-auto right-[-4px] absolute p-0 bg'
+            )}
+            data-cy="CartTrigger-counter"
+        >
+            {itemCountDisplay}
+        </span>
+    ) : null;
+
+    // const ShoppingCartIcon = <Icon src={ShoppingCart} attrs={{ width: 20 }} />;
+
+    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}>
+                <Link
+                    className={cn(
+                        classes.trigger,
+                        'gap-[5px] !min-h-[30px] !h-auto !min-w-[35px] !w-fit',
+                    )}
+                    to='/cart'
+                >
+                    <span>
+                        {/* <Icon src={ShoppingCartIcon} /> */}
+                        {/* <ShoppingCart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" /> */}
+                        <Icon src={ShoppingCart} attrs={{ width: 20 }} />
+                        {maybeItemCounter}
+                    </span>
+                </Link>
+            </div>
+            <button
+                aria-expanded={miniCartIsOpen}
+                aria-label={buttonAriaLabel}
+                className={classes.link}
+                onClick={handleLinkClick}
+            >
+                <Icon src={ShoppingCart} attrs={{ width: 20 }} />
+                {maybeItemCounter}
+            </button>
+        </Fragment>
+    );
+
+    return cartTrigger;
+};
+
+export default CartTrigger;
+
+CartTrigger.propTypes = {
+    classes: shape({
+        counter: string,
+        link: string,
+        openIndicator: string,
+        root: string,
+        trigger: string,
+        triggerContainer: string
+    })
+};

package/src/components/CheckoutHeader/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/components/CheckoutHeader/storeSwitcher.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+
+import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher';
+import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+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 {
+        availableStores,
+        currentGroupName,
+        currentStoreName,
+        handleSwitchStore,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick
+    } = useStoreSwitcher({ availableRoutes });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
+
+    if (!availableStores) return <Shimmer />;
+
+    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}
+                    role="option"
+                    key={storeCode}
+                    className={classes.menuItem}
+                    data-cy="StoreSwitcher-view"
+                >
+                    <SwitcherItem
+                        active={isCurrent}
+                        onClick={handleSwitchStore}
+                        option={storeCode}
+                        option2={websiteCode}
+                    >
+                        {label}
+                    </SwitcherItem>
+                </li>
+            );
+        });
+
+        groups.push(
+            <ul
+                role="listbox"
+                className={cn(classes.groupList, 'text-base')}
+                key={key}
+                data-cy="StoreSwitcher-group"
+            >
+                {stores}
+            </ul>
+        );
+    });
+
+    return (
+        <div className={cn(classes.root, 'leading-[16px]')} data-cy="StoreSwitcher-root">
+            <button
+                data-cy="StoreSwitcher-triggerButton"
+                className={cn(classes.trigger, 'text-base')}
+                aria-label={currentStoreName || ''}
+                onClick={handleTriggerClick}
+                ref={storeMenuTriggerRef}
+                aria-expanded={storeMenuIsOpen}
+            >
+                <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}>
+                    <span className='flex font-medium px-4 py-1 w-full text-base'>
+                        Language
+                    </span>
+                    {groups}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default StoreSwitcher;
+
+StoreSwitcher.propTypes = {
+    classes: shape({
+        groupList: string,
+        groups: string,
+        menu: string,
+        menu_open: string,
+        menuItem: string,
+        root: string,
+        trigger: string
+    })
+};

package/src/components/CheckoutHeader/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/components/CheckoutHeader/switcherItem.js

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { Check } from 'react-feather';
+import { bool, func, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon/icon';
+import defaultClasses from '@magento/venia-ui/lib/components/Header/switcherItem.module.css';
+
+const SwitcherItem = props => {
+    const { active, onClick, option, option2, children } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(() => {
+        onClick(option, option2);
+    }, [option, option2, onClick]);
+
+    const activeIcon = active ? (
+        <Icon data-cy="SwitcherItem-activeIcon" size={20} src={Check} />
+    ) : null;
+
+    return (
+        <button
+            data-cy="SwitcherItem-button"
+            className={classes.root}
+            disabled={active}
+            onClick={handleClick}
+        >
+            <span className={classes.content}>
+                <span className={classes.text}>{children}</span>
+                {activeIcon}
+            </span>
+        </button>
+    );
+};
+
+SwitcherItem.propTypes = {
+    active: bool,
+    classes: shape({
+        content: string,
+        root: string,
+        text: string
+    }),
+    onClick: func,
+    option: string
+};
+
+export default SwitcherItem;

package/src/components/CheckoutHeader/wishlistTrigger.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { Heart as HeartIcon } from 'react-feather';
+
+const wishlistTrigger = () => {
+    return (
+        <div className='wishlistTrigger'>
+            <Link
+                aria-label='wishlist-action'
+                to={resourceUrl('/wishlist')}
+                className={''}
+                data-cy="wishlistLink"
+            >
+                <Icon src={HeartIcon} attrs={{ width: 20 }} />
+                {/* <Heart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" /> */}
+            </Link>
+        </div>
+    )
+}
+
+export default wishlistTrigger

package/src/components/FilterListContent/filterListPage.js

@@ -49,21 +49,6 @@ const FilterListPage = props => {
     // Sorting
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
     const [currentSort] = sortProps;
-    // const [sortBy, setSortBy] = useState({
-    //     sortText: 'All (A-Z)',
-    //     value: 'all'
-    // });
-
-    // let availableSortBy = [
-    //     {
-    //         'label': 'All (A-Z)',
-    //         'value': 'all'
-    //     },
-    //     {
-    //         'label': 'By Year',
-    //         'value': 'newest'
-    //     }
-    // ];
 
     const classes = useStyle(defaultClasses);
 
@@ -101,14 +86,7 @@ const FilterListPage = props => {
         return result;
     }
 
-    let allSetsTitle = "Sets";
     let attributeCode = attributeData ? attributeData.attribute_code : '';
-    let byYearTitle = "By Year";
-    // if (shopby == "singles") {
-    //     attributeCode = "lego_set_name";
-    //     // allSetsTitle = "Singles";
-    //     byYearTitle = "By Year";
-    // }
 
     let newfilterSearchArr = search ? search.split('&') : [];
     newfilterSearchArr = newfilterSearchArr.filter(function(data) {
@@ -242,9 +220,6 @@ const FilterListPage = props => {
                 
                 const label = filterArr[0];
                 const optionId = filterArr[1];
-                if (label == "Singles") {
-                    isSingles = true;
-                }
                 if (key == "bricks_categories" || key == "sc_sports_categories" || key == "card_game" || key == "product_line" && urlKey == "brands" || key == "product_line" && urlKey == "franchise" || key == "franchise" && urlKey == "brands" || key == "franchise" && urlKey == "franchise" || key == "brands" && urlKey == "franchise" || key == "brands" && urlKey == "brands") {
                     activeFilters.push(
                         {

package/src/components/FilterTop/filterTop.js

@@ -22,7 +22,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterTop = props => {
-    const { shopby, filters, filterCountToOpen, allowedFilters, category } = props;
+    const { shopby, filters, filterCountToOpen, category } = props;
     const [filterBy, setFilterBy] = useState('');
     
     const talonProps = useFilterTop({ shopby, filters, category, filterBy, setFilterBy });