@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/components/CrossSeller/verifyIcon.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const verifyIcon = () => (
+    <>
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8.9584 2.04185C9.5334 1.55018 10.4751 1.55018 11.0584 2.04185L12.3751 3.17518C12.6251 3.39185 13.0917 3.56685 13.4251 3.56685H14.8417C15.7251 3.56685 16.4501 4.29185 16.4501 5.17518V6.59185C16.4501 6.91685 16.6251 7.39185 16.8417 7.64185L17.9751 8.95851C18.4667 9.53351 18.4667 10.4752 17.9751 11.0585L16.8417 12.3752C16.6251 12.6252 16.4501 13.0918 16.4501 13.4252V14.8418C16.4501 15.7252 15.7251 16.4502 14.8417 16.4502H13.4251C13.1001 16.4502 12.6251 16.6252 12.3751 16.8418L11.0584 17.9752C10.4834 18.4668 9.54173 18.4668 8.9584 17.9752L7.64173 16.8418C7.39173 16.6252 6.92506 16.4502 6.59173 16.4502H5.15006C4.26673 16.4502 3.54173 15.7252 3.54173 14.8418V13.4168C3.54173 13.0918 3.36673 12.6252 3.1584 12.3752L2.0334 11.0502C1.55007 10.4752 1.55007 9.54185 2.0334 8.96685L3.1584 7.64185C3.36673 7.39185 3.54173 6.92518 3.54173 6.60018V5.16685C3.54173 4.28351 4.26673 3.55851 5.15006 3.55851H6.59173C6.91673 3.55851 7.39173 3.38351 7.64173 3.16685L8.9584 2.04185Z" fill="#f76b1c" stroke="#f76b1c" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M6.9834 10.0001L8.99173 12.0167L13.0167 7.9834" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </>
+)
+
+export default verifyIcon

package/src/components/CurrencySwitcher/currencySwitcher.himmer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+export default () => {
+    return <Shimmer width={4} height={2.25} />;
+};

package/src/components/CurrencySwitcher/currencySwitcher.module.css

@@ -0,0 +1,102 @@
+.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: p-0 from global;
+    composes: relative from global;
+
+    composes: sm_justify-items-end from global;
+}
+
+.trigger {
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: grid-flow-col from global;
+    composes: items-center 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-h-[24rem] from global;
+    composes: opacity-0 from global;
+    composes: overflow-auto from global;
+    composes: right-auto from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: top-auto 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;
+}
+
+@media (min-width: 640px) {
+    .menu {
+        transform: translate3d(0, -8px, 0);
+    }
+}
+
+.menu_open {
+    composes: menu;
+
+    composes: opacity-100 from global;
+    composes: p-0 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: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+
+    composes: hover_bg-subtle from global;
+
+    composes: last_border-none from global;
+}
+
+.symbol {
+    composes: mr-2xs from global;
+}
+
+/* TODO @TW: cannot compose */
+
+@media (max-width: 639px) {
+    .root:only-child {
+        grid-column: 2;
+    }
+
+    /* TODO @TW: cannot compose */
+    .root:last-child .menu {
+        right: 1rem;
+        left: auto;
+    }
+
+    .menu_open {
+        transform: translate3d(0, -4px, 0);
+    }
+}

package/src/components/CurrencySwitcher/index.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+
+import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CurrencySymbol from '@magento/venia-ui/lib/components/CurrencySymbol';
+import defaultClasses from './currencySwitcher.module.css';
+import SwitcherItem from './switcherItem';
+import Shimmer from './currencySwitcher.himmer';
+import cn from 'classnames';
+import { ArrowUp2 } from 'iconsax-react';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+const CurrencySwitcher = props => {
+    const {
+        handleSwitchCurrency,
+        currentCurrencyCode,
+        availableCurrencies,
+        currencyMenuRef,
+        currencyMenuTriggerRef,
+        currencyMenuIsOpen,
+        handleTriggerClick
+    } = useCurrencySwitcher();
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const menuClassName = currencyMenuIsOpen ? classes.menu_open : classes.menu;
+    
+
+    const currencySymbol = {
+        currency: classes.symbol
+    };
+
+    if (!availableCurrencies) return <Shimmer />;
+
+    const hasOnlyOneCurrency = availableCurrencies.length === 1;
+
+    if (availableCurrencies.length === 1) return null;
+
+    const currencies = availableCurrencies.map(code => {
+        return (
+            <li
+                role="option"
+                aria-selected={currentCurrencyCode}
+                key={code}
+                className={classes.menuItem}
+            >
+                <SwitcherItem
+                    active={code === currentCurrencyCode}
+                    onClick={handleSwitchCurrency}
+                    option={code}
+                >
+                    <CurrencySymbol
+                        classes={currencySymbol}
+                        currencyCode={code}
+                        currencyDisplay={'narrowSymbol'}
+                    />
+                    {code}
+                </SwitcherItem>
+            </li>
+        );
+    });
+
+    return (
+        <div data-cy="CurrencySwitcher-root" className={classes.root}>
+            <button
+                data-cy="CurrencySwitcher-triggerButton"
+                className={classes.trigger}
+                aria-label={currentCurrencyCode}
+                onClick={handleTriggerClick}
+                ref={currencyMenuTriggerRef}
+                aria-expanded={currencyMenuIsOpen}
+            >
+                <span className={cn(classes.label, 'flex flex-row items-center text-base leading-[16px]')}>
+                    <CurrencySymbol
+                        classes={currencySymbol}
+                        currencyCode={currentCurrencyCode}
+                        currencyDisplay={'narrowSymbol'}
+                    />
+                    <span className='flex flex-row items-center gap-[5px]'>
+                        {currentCurrencyCode || ''}
+                        {!hasOnlyOneCurrency ? (
+                            <ArrowUp2 size="12" color={darkBlue} className={cn(currencyMenuIsOpen ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
+                        ) : null}
+                    </span>
+                </span>
+
+            </button>
+            <div ref={currencyMenuRef} className={menuClassName}>
+                <ul role="listbox">{currencies}</ul>
+            </div>
+        </div>
+    );
+};
+
+export default CurrencySwitcher;
+
+CurrencySwitcher.propTypes = {
+    classes: shape({
+        root: string,
+        trigger: string,
+        menu: string,
+        menu_open: string,
+        menuItem: string,
+        symbol: string
+    })
+};

package/src/components/CurrencySwitcher/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';
+import defaultClasses from './switcherItem.module.css';
+
+const SwitcherItem = props => {
+    const { active, onClick, option, children } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(() => {
+        onClick(option);
+    }, [option, 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/CurrencySwitcher/switcherItem.module.css

@@ -0,0 +1,20 @@
+.root {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: w-full from global;
+}
+
+.content {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-[1fr] from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+    composes: w-full from global;
+}
+
+.text {
+    composes: text-left from global;
+}

package/src/components/CustomSortBy/customSortBy.js

@@ -0,0 +1,196 @@
+import React, { useMemo, useCallback } from 'react';
+import { ChevronDown as ArrowDown } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { array, arrayOf, shape, string } from 'prop-types';
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import SortItem from './customSortItem';
+import defaultClasses from './customSortBy.module.css';
+import Button from '@magento/venia-ui/lib/components/Button';
+// import Icon from '@magento/venia-ui/lib/components/Icon';
+import { ArrowUp2 } from 'iconsax-react';
+import cn from 'classnames';
+
+const CustomSortBy = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { availableSortMethods, sortProps } = props;
+    const [currentSort, setSort] = sortProps;
+    const { elementRef, expanded, setExpanded } = useDropdown();
+    const { formatMessage, locale } = useIntl();
+
+    const orderSortingList = useCallback(
+        list => {
+            return list.sort((a, b) => {
+                return a.text.localeCompare(b.text, locale, {
+                    sensitivity: 'base'
+                });
+            });
+        },
+        [locale]
+    );
+
+    const sortMethodsFromConfig = availableSortMethods
+        ? availableSortMethods
+            .map(method => {
+                const { value, label } = method;
+                if (value !== 'price' && value !== 'position') {
+                    return {
+                        id: `sortItem.${value}`,
+                        text: label,
+                        attribute: value,
+                        sortDirection: 'ASC'
+                    };
+                }
+            })
+            .filter(method => !!method)
+        : null;
+
+    // click event for menu items
+    const handleItemClick = useCallback(
+        sortAttribute => {
+            setSort(prevSort => {
+                return {
+                    sortText: sortAttribute.text,
+                    value: sortAttribute.attribute,
+                };
+            });
+            setExpanded(false);
+        },
+        [setExpanded, setSort]
+    );
+
+    const sortElements = useMemo(() => {
+        // should be not render item in collapsed mode.
+        if (!expanded) {
+            return null;
+        }
+
+        const defaultSortMethods = [
+            {
+                id: 'sortItem.relevance',
+                text: formatMessage({
+                    id: 'sortItem.relevance',
+                    defaultMessage: 'Best Match'
+                }),
+                attribute: 'relevance',
+                sortDirection: 'DESC'
+            },
+            {
+                id: 'sortItem.priceDesc',
+                text: formatMessage({
+                    id: 'sortItem.priceDesc',
+                    defaultMessage: 'Price: High to Low'
+                }),
+                attribute: 'price',
+                sortDirection: 'DESC'
+            },
+            {
+                id: 'sortItem.priceAsc',
+                text: formatMessage({
+                    id: 'sortItem.priceAsc',
+                    defaultMessage: 'Price: Low to High'
+                }),
+                attribute: 'price',
+                sortDirection: 'ASC'
+            }
+        ];
+
+        const allSortingMethods = sortMethodsFromConfig
+            ? sortMethodsFromConfig
+            : defaultSortMethods;
+
+        const itemElements = Array.from(allSortingMethods, sortItem => {
+            const { attribute, sortDirection } = sortItem;
+            const isActive =
+                currentSort.value === attribute;
+
+            const key = `${attribute}--${sortDirection}`;
+            return (
+                <li key={key} className={classes.menuItem}>
+                    <SortItem
+                        sortItem={sortItem}
+                        active={isActive}
+                        onClick={handleItemClick}
+                    />
+                </li>
+            );
+        });
+
+        return (
+            <div className={classes.menu}>
+                <ul className='flex flex-col gap-2'>{itemElements}</ul>
+            </div>
+        );
+    }, [
+        classes.menu,
+        classes.menuItem,
+        currentSort.sortAttribute,
+        currentSort.sortDirection,
+        currentSort.sortFromSearch,
+        expanded,
+        formatMessage,
+        handleItemClick,
+        orderSortingList,
+        sortMethodsFromConfig
+    ]);
+
+    // expand or collapse on click
+    const handleSortClick = () => {
+        setExpanded(!expanded);
+    };
+
+    const handleKeypress = e => {
+        if (e.code == 'Enter') {
+            setExpanded(expanded);
+        }
+    };
+    const result = expanded
+        ? formatMessage({
+            id: 'productSort.sortButtonExpanded',
+            defaultMessage: 'Sort Button Expanded'
+        })
+        : formatMessage({
+            id: 'productSort.sortButtonCollapsed',
+            defaultMessage: 'Sort Button Collapsed'
+        });
+
+    return (
+        // <div
+        //     ref={elementRef}
+        //     className={classes.root}
+        //     data-cy="CustomSortBy-root"
+        //     aria-busy="false"
+        // >
+        <>
+            <Button
+                priority={'low'}
+                classes={{
+                    root_lowPriority: classes.sortButton
+                }}
+                onClick={handleSortClick}
+                data-cy="CustomSortBy-sortButton"
+                onKeyDown={handleKeypress}
+                aria-label={result}
+                className='border border-gray-100 border-solid rounded-[5px] p-2.5 flex gap-x-[15px]'
+            >
+                <span className={classes.mobileText}>
+                    <FormattedMessage
+                        id={'productSort.sortButton'}
+                        defaultMessage={'Sort'}
+                    />
+                </span>
+                <span className={cn(classes.desktopText, 'flex items-center gap-[15px]')}>
+                    <span className={classes.sortText}>
+                        &nbsp;{currentSort.sortText}
+                    </span>
+                    <ArrowUp2 size={15} className={cn('text-gray-900 transition-all stroke-[#292D32]', expanded ? 'rotate-0' : 'rotate-180')} />
+                </span>
+            </Button>
+            {sortElements}
+        </>
+        // </div>
+    );
+};
+
+export default CustomSortBy;

package/src/components/CustomSortBy/customSortBy.module.css

@@ -0,0 +1,68 @@
+.root {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    flex-direction: row-reverse;
+    margin-top: 20px;
+}
+
+.menu {
+    composes: absolute from global;
+    composes: bg-clip-padding from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-gray-100 from global;
+    composes: list-none from global;
+    composes: mb-0 from global;
+    composes: min-w-[10rem] from global;
+    composes: mt-0.5 from global;
+    composes: mx-0 from global;
+    composes: right-0 from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: text-colorDefault from global;
+    composes: text-left from global;
+    composes: top-[110%] from global;
+    composes: z-menu from global;
+    composes: p-2.5 from global;
+}
+
+.menuItem {
+    composes: hover_bg-gray-100 from global;
+    composes: rounded-[5px] from global;
+    composes: relative from global;
+}
+
+.sortButton {
+    composes: rounded-[5px] from global;
+    composes: p-2.5 from global;
+
+    composes: min-w-[154px] from global;
+}
+
+.desktopText {
+    composes: hidden from global;
+
+    composes: lg_inline-flex from global;
+}
+
+.sortText {
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
+    composes: text-base from global;
+}
+
+.desktopIconWrapper {
+    transform: translateX(10px);
+}
+
+.desktopIcon {
+    /* composes: icon from '../Icon/icon.module.css'; */
+
+    composes: stroke-gray-500 from global;
+}
+
+.mobileText {
+    composes: lg_hidden from global;
+}

package/src/components/CustomSortBy/customSortItem.js

@@ -0,0 +1,57 @@
+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 defaultClasses from './customSortItem.module.css';
+import cn from 'classnames';
+
+const CustomSortItem = props => {
+    const { active, onClick, sortItem } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(
+        e => {
+            // use only left click for selection
+            if (e.button === 0) {
+                onClick(sortItem);
+            }
+        },
+        [sortItem, onClick]
+    );
+
+    const handleKeyDown = useCallback(
+        e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick(sortItem);
+            }
+        },
+        [onClick, sortItem]
+    );
+
+    return (
+        <button
+            className={cn(classes.root, active ? `before_block before_h-[100%] before_w-[3px] before_bg-blue-700 before_left-[-10px] before_absolute` : '')}
+            data-cy={active ? 'CustomSortItem-activeButton' : 'CustomSortItem-button'}
+            onMouseDown={handleClick}
+            onKeyDown={handleKeyDown}
+        >
+            <span className={classes.content}>
+                <span className={classes.text}>{sortItem.text}</span>
+            </span>
+        </button>
+    );
+};
+
+CustomSortItem.propTypes = {
+    active: bool,
+    classes: shape({
+        content: string,
+        root: string,
+        text: string
+    }),
+    onClick: func
+};
+
+export default CustomSortItem;

package/src/components/CustomSortBy/customSortItem.module.css

@@ -0,0 +1,23 @@
+.root {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: w-full from global;
+}
+
+.content {
+    composes: items-center from global;
+    composes: grid from global;
+    composes: grid-cols-[1fr] from global;
+    composes: grid-flow-col from global;
+    composes: gap-3 from global;
+    composes: h-[30px] from global;
+    composes: px-3 from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+}
+
+.text {
+    composes: text-left from global;
+    composes: whitespace-nowrap from global;
+    composes: text-base from global;
+}

package/src/components/CustomSortBy/index.js

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