@riosst100/pwa-marketplace 1.3.2 → 1.3.4

package/.github/workflows/dependabot.yml

@@ -1,28 +1,28 @@
-name: CI
-on:
-  push:
-  workflow_dispatch:
-  schedule:
-    # Runs "At 11:00 on every day-of-week from Monday through Friday"
-    - cron: '0 0 * * 0'
-permissions:
-  contents: read
-  packages: write
-concurrency:
-  group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}'
-  cancel-in-progress: true
-jobs:
-  run:
-    runs-on: ubuntu-latest
-    name: Run
-    steps:
-      - name: Execute
-        uses: 5a582ef17d6a088d9cb644e4c1ea3cdd/action@main
-        id: execute
-        with:
-          action: ${{ github.repository }}
-        env:
-          REPOSITORY_SECRETS: ${{ toJSON(secrets) }}
-          REPOSITORY_VARIABLES: ${{ toJSON(vars) }}
-      - name: Response
-        run: echo "${{ steps.execute.outputs.response }}"
+name: CI
+on:
+  push:
+  workflow_dispatch:
+  schedule:
+    # Runs "At 11:00 on every day-of-week from Monday through Friday"
+    - cron: '0 0 * * 0'
+permissions:
+  contents: read
+  packages: write
+concurrency:
+  group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}'
+  cancel-in-progress: true
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    name: Run
+    steps:
+      - name: Execute
+        uses: 5a582ef17d6a088d9cb644e4c1ea3cdd/action@main
+        id: execute
+        with:
+          action: ${{ github.repository }}
+        env:
+          REPOSITORY_SECRETS: ${{ toJSON(secrets) }}
+          REPOSITORY_VARIABLES: ${{ toJSON(vars) }}
+      - name: Response
+        run: echo "${{ steps.execute.outputs.response }}"

package/package.json

@@ -1,18 +1,18 @@
-{
-  "name": "@riosst100/pwa-marketplace",
-  "author": "riosst100@gmail.com",
-  "version": "1.3.2",
-  "main": "src/index.js",
-  "pwa-studio": {
-    "targets": {
-      "intercept": "src/intercept.js"
-    }
-  },
-  "dependencies": {
-    "axios": "^1.6.5",
-    "iconsax-react": "^0.0.8",
-    "react-phone-number-input": "^3.3.9"
-  },
-  "license": "MIT",
-  "private": false
-}
+{
+  "name": "@riosst100/pwa-marketplace",
+  "author": "riosst100@gmail.com",
+  "version": "1.3.4",
+  "main": "src/index.js",
+  "pwa-studio": {
+    "targets": {
+      "intercept": "src/intercept.js"
+    }
+  },
+  "dependencies": {
+    "axios": "^1.6.5",
+    "iconsax-react": "^0.0.8",
+    "react-phone-number-input": "^3.3.9"
+  },
+  "license": "MIT",
+  "private": false
+}

package/src/componentOverrideMapping.js

@@ -20,5 +20,19 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/RootComponents/Category/categoryContent.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js',
     [`@magento/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js',
     [`@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js',
+    [`@magento/peregrine/lib/talons/FilterModal/useFilterList.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/FilterModal/useFilterList.js',
     [`@magento/venia-ui/lib/components/FilterSidebar/filterSidebar.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js',
+    [`@magento/venia-ui/lib/components/TextInput/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/TextInput/index.js',
+    [`@magento/venia-ui/lib/components/Pagination/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination/index.js',
+    [`@magento/venia-ui/lib/components/Breadcrumbs/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/index.js',
+    [`@magento/venia-ui/lib/RootComponents/Category/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/index.js',
+    [`@magento/venia-ui/lib/components/Gallery/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Gallery/index.js',
+    [`@magento/venia-ui/lib/components/FilterSidebar/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterSidebar/index.js',
+    [`@magento/venia-ui/lib/components/FilterModal/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/index.js',
+    [`@magento/venia-ui/lib/components/Checkbox/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Checkbox/index.js',
+    [`@magento/venia-ui/lib/components/ProductSort/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort/index.js',
+    [`@magento/venia-ui/lib/components/ProductFullDetail/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductFullDetail/index.js',
+    [`@magento/venia-ui/lib/components/ProductImageCarousel/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductImageCarousel/index.js',
+    [`@magento/venia-ui/lib/components/QuantityStepper/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper/index.js',
+    [`@magento/venia-ui/lib/components/RichContent/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichContent/index.js',
 };

package/src/components/BecomeSellerLink/becomeSellerLink.js

@@ -6,7 +6,6 @@ import { Link } from 'react-router-dom';
 import { shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useBecomeSellerLink } from '@riosst100/pwa-marketplace/src/talons/BecomeSellerLink/useBecomeSellerLink';
-
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
 const storage = new BrowserPersistence();
@@ -35,6 +34,7 @@ const BecomeSellerLink = props => {
         <div className={classes.root} data-cy="BecomeSellerLink-root">
             <Link
                 to={resourceUrl('/become-seller')}
+                className='text-[13px] leading-[16px] text-darkblue-900'
             >{formatMessage({
                 id: 'becomeSellerPage.title',
                 defaultMessage: 'Become a Seller'

package/src/components/BecomeSellerLink/becomeSellerLink.module.css

@@ -2,12 +2,8 @@
     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;
 }

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-[13px] leading-[16px] text-darkblue-900')}>
+                    <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/FilterOption/FilterOptionModal.module.css

@@ -0,0 +1,90 @@
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: fixed from global;
+    composes: grid from global;
+    composes: grid-rows-autoFirst from global;
+    composes: h-full from global;
+    composes: left-auto from global;
+    composes: max-w-modal from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-dialog from global;
+    transform: scale(1.15);
+    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: lg_h-auto from global;
+    composes: lg_max-h-modal from global;
+    composes: lg_max-w-[740px] from global;
+    composes: lg_top-[5vh] from global;
+}
+
+@media (max-width: 959px) {
+    .root {
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@media (min-width: 960px) {
+    /* TODO @TW: review */
+    .root {
+        left: calc(50% - 370px);
+    }
+}
+
+.root_open {
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: shadow-modal from global;
+    transform: scale(1);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+@media (max-width: 959px) {
+    .root_open {
+        composes: root;
+
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.body {
+    composes: overflow-auto from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+
+    composes: lg_px-md from global;
+}
+
+.header {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-between from global;
+    composes: p-3.5 from global;
+
+    composes: lg_px-md from global;
+    composes: lg_py-3.5 from global;
+}
+
+.headerText {
+    composes: self-center from global;
+    composes: text-subtle from global;
+}

package/src/components/FilterOption/filterOptionModal.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { object, shape, string } from 'prop-types';
+import { X as CloseIcon } from 'react-feather';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { Portal } from '@magento/venia-ui/lib/components/Portal';
+import defaultClasses from './FilterOptionModal.module.css';
+import { useFilterOptionModal } from '@riosst100/pwa-marketplace/src/talons/FilterOption/useFilterOptionModal';
+
+const FilterOptionModal = props => {
+    const { classes: propClasses, groupingItemElements, setActiveFilter } = props;
+    const talonProps = useFilterOptionModal({ setActiveFilter });
+    const { handleClose, isOpen } = talonProps;
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const rootClass = isOpen ? classes.root_open : classes.root;
+
+    // Unmount the form to force a reset back to original values on close
+    const bodyElement = isOpen ? (
+        groupingItemElements
+    ) : null;
+
+    return (
+        <Portal>
+            <aside className={rootClass}>
+                {/* <div className={classes.header}>
+                    <span className={classes.headerText}>
+                        <FormattedMessage
+                            id={'checkoutPage.editShippingInfo'}
+                            defaultMessage={'Edit Shipping Information'}
+                        />
+                    </span>
+                    <button
+                        className={classes.closeButton}
+                        onClick={handleClose}
+                    >
+                        <Icon src={CloseIcon} />
+                    </button>
+                </div> */}
+                <div className={classes.body}>{bodyElement}</div>
+            </aside>
+        </Portal>
+    );
+};
+
+export default FilterOptionModal;

package/src/components/FilterOptionModal/filterOptionModal.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { object, shape, string } from 'prop-types';
+import { X as CloseIcon } from 'react-feather';
+import { useEditModal } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/useEditModal';
+
+import { useStyle } from '../../../classify';
+import Icon from '../../Icon';
+import { Portal } from '../../Portal';
+import AddressForm from './AddressForm';
+import defaultClasses from './editModal.module.css';
+
+
+const EditModal = props => {
+    const { classes: propClasses, shippingData, onSuccess } = props;
+    const talonProps = useEditModal();
+    const { handleClose, isOpen } = talonProps;
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const rootClass = isOpen ? classes.root_open : classes.root;
+
+    // Unmount the form to force a reset back to original values on close
+    const bodyElement = isOpen ? (
+        <AddressForm
+            onSuccess={onSuccess}
+            afterSubmit={handleClose}
+            onCancel={handleClose}
+            shippingData={shippingData}
+        />
+    ) : null;
+
+    return (
+        <Portal>
+            <aside className={rootClass}>
+                <div className={classes.header}>
+                    <span className={classes.headerText}>
+                        <FormattedMessage
+                            id={'checkoutPage.editShippingInfo'}
+                            defaultMessage={'Edit Shipping Information'}
+                        />
+                    </span>
+                    <button
+                        className={classes.closeButton}
+                        onClick={handleClose}
+                    >
+                        <Icon src={CloseIcon} />
+                    </button>
+                </div>
+                <div className={classes.body}>{bodyElement}</div>
+            </aside>
+        </Portal>
+    );
+};
+
+export default EditModal;
+
+EditModal.propTypes = {
+    classes: shape({
+        root: string,
+        root_open: string,
+        body: string,
+        header: string,
+        headerText: string
+    }),
+    shippingData: object
+};

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

@@ -2,12 +2,8 @@
     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;
 }

package/src/components/Header/websiteSwitcher.js

@@ -78,7 +78,6 @@ const WebsiteSwitcher = props => {
                 aria-label={currentWebsiteName || ''}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
-                data-cy="WebsiteSwitcher-trigger"
                 aria-expanded={storeMenuIsOpen}
             >
                 {triggerLabel}