@riosst100/pwa-marketplace 1.3.2 → 1.3.4

package/src/components/Header/websiteSwitcher.module.css

@@ -1,111 +1,107 @@
-.root {
-    composes: grid from global;
-    composes: items-center from global;
-    composes: justify-items-start from global;
-    composes: max-w-site from global;
-    composes: mx-auto from global;
-    composes: my-0 from global;
-    composes: px-xs from global;
-    composes: py-2xs 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);
-    }
-}
+.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/WebsiteSwitcher/websiteSwitcher.js

@@ -8,6 +8,9 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './websiteSwitcher.module.css';
 import WebsiteSwitcherItem from './websiteSwitcherItem';
 import Shimmer from './websiteSwitcher.shimmer';
+import cn from 'classnames';
+import { ArrowUp2 } from 'iconsax-react';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
 
 const WebsiteSwitcher = props => {
     const {
@@ -59,7 +62,7 @@ const WebsiteSwitcher = props => {
         groups.push(
             <ul
                 role="listbox"
-                className={classes.groupList}
+                className={'text-[13px]'}
                 key={key}
                 data-cy="WebsiteSwitcher-group"
             >
@@ -71,24 +74,33 @@ const WebsiteSwitcher = props => {
     let triggerLabel = currentWebsiteName ? `${currentWebsiteName}` : '';
 
     return (
-        <div className={classes.root} data-cy="WebsiteSwitcher-root">
+        <div className={cn(classes.root, 'leading-[16px]')} data-cy="WebsiteSwitcher-root">
             <button
                 data-cy="WebsiteSwitcher-triggerButton"
-                className={classes.trigger}
+                className={cn(classes.trigger, 'text-[13px]')}
                 aria-label={currentWebsiteName || ''}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
-                data-cy="WebsiteSwitcher-trigger"
                 aria-expanded={storeMenuIsOpen}
             >
-                {triggerLabel || ''}
+                <span className='flex flex-row gap-[5px] items-center leading-[16px] text-darkblue-900'>
+                    {triggerLabel || ''}
+                    {!hasOnlyOneGroup ? (
+                        <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="WebsiteSwitcher-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] mb-2'>
+                        Country
+                    </span>
+                    {groups}
+                </div>
             </div>
         </div>
     );

package/src/components/WebsiteSwitcher/websiteSwitcher.module.css

@@ -1,111 +1,107 @@
-.root {
-    composes: grid from global;
-    composes: items-center from global;
-    composes: justify-items-start from global;
-    composes: max-w-site from global;
-    composes: mx-auto from global;
-    composes: my-0 from global;
-    composes: px-xs from global;
-    composes: py-2xs 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);
-    }
-}
+.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/peregrine/lib/talons/FilterModal/useFilterList.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+export const useFilterList = props => {
+    const { filterState, items, itemCountToShow } = props;
+
+    const [{ overlay }, { toggleDrawer }] = useAppContext();
+
+    const hasSelected = useMemo(
+        () =>
+            items.some((item, index) => {
+                return (
+                    filterState &&
+                    filterState.has(item) &&
+                    index >= itemCountToShow
+                );
+            }),
+        [filterState, itemCountToShow, items]
+    );
+
+    // const hasSelected2 = useMemo(
+    //     () =>
+    //         items.some((item, index) => {
+    //             return (
+    //                 filterState &&
+    //                 filterState.has(item)
+    //             );
+    //         }),
+    //     [filterState, items]
+    // );
+
+    const [isListExpanded, setExpanded] = useState(hasSelected);
+    const [activeFilter, setActiveFilter] = useState(false);
+    // const [isShowAllOptions, setShowAllOptions] = useState(hasSelected);
+
+    const handleListToggle = useCallback(() => {
+        setExpanded(value => !value);
+    }, [setExpanded]);
+
+    const handleShowMore = useCallback(() => {
+        setActiveFilter(true);
+        toggleDrawer('filterOptionModal.show');
+    }, [setActiveFilter, toggleDrawer]);
+
+    useEffect(() => {
+        if (!overlay) {
+            setActiveFilter(false)
+        }
+    }, [overlay])
+
+    // const handleShowMore = useCallback(() => {
+    //     handleShowAllOptions();
+    // }, [handleShowAllOptions]);
+
+    return {
+        setActiveFilter,
+        activeFilter,
+        handleShowMore,
+        handleListToggle,
+        isListExpanded
+    };
+};

package/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenuItem.js

@@ -0,0 +1,66 @@
+import { useCallback, useMemo, useState } from 'react';
+
+export const useMegaMenuItem = props => {
+    const { category, activeCategoryId, subMenuState, disableFocus } = props;
+
+    const [isFocused, setIsFocused] = useState(false);
+    const isActive = category.id === activeCategoryId;
+
+    const handleMenuItemFocus = useCallback(() => {
+        setIsFocused(true);
+    }, [setIsFocused]);
+
+    const handleCloseSubMenu = useCallback(() => {
+        setIsFocused(false);
+    }, [setIsFocused]);
+
+    const isMenuActive = useMemo(() => {
+        if (!isFocused) {
+            return false;
+        }
+        if (subMenuState) {
+            return true;
+        } else if (disableFocus) {
+            setIsFocused(false);
+        }
+        return false;
+    }, [isFocused, subMenuState, disableFocus]);
+
+    const handleKeyDown = useCallback(
+        event => {
+            const { key: pressedKey, shiftKey } = event;
+
+            // checking down arrow and spacebar
+            if (pressedKey === 'ArrowDown' || pressedKey === ' ') {
+                event.preventDefault();
+                if (category.children.length) {
+                    setIsFocused(true);
+                } else {
+                    setIsFocused(false);
+                }
+
+                return;
+            }
+
+            //checking up arrow or escape
+            if (pressedKey === 'ArrowUp' || pressedKey === 'Escape') {
+                setIsFocused(false);
+            }
+
+            //checking Tab with Shift
+            if (shiftKey && pressedKey === 'Tab') {
+                setIsFocused(false);
+            }
+        },
+        [category.children.length]
+    );
+
+    return {
+        isFocused,
+        isActive,
+        handleMenuItemFocus,
+        handleCloseSubMenu,
+        isMenuActive,
+        handleKeyDown
+    };
+};

package/src/overwrites/peregrine/lib/talons/MegaMenu/useSubMenu.js

@@ -0,0 +1,20 @@
+import { useKeyboard } from 'react-aria';
+
+export const useSubMenu = props => {
+    const { isFocused, subMenuState, handleCloseSubMenu } = props;
+
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: e => {
+            //checking for Tab without Shift
+            if (!e.shiftKey && e.key === 'Tab') {
+                e.target.addEventListener('blur', handleCloseSubMenu);
+            } else {
+                e.target.removeEventListener('blur', handleCloseSubMenu);
+            }
+        }
+    });
+
+    const isSubMenuActive = isFocused && subMenuState;
+
+    return { keyboardProps, isSubMenuActive };
+};

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -59,8 +59,6 @@ export const useCategoryContent = props => {
         }
     );
 
-    console.log(categoryData)
-
     const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {

package/src/overwrites/venia-ui/lib/RootComponents/Category/NoProductsFound/index.js

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