@riosst100/pwa-marketplace 2.0.7 → 2.0.9

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

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

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

@@ -1,107 +1,111 @@
-.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);
-    }
-}
+.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);
+    }
+}

package/src/components/Header/websiteSwitcher.shimmer.js

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

package/src/components/Header/websiteSwitcherItem.js

@@ -1,47 +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 './websiteSwitcherItem.module.css';
-
-const WebsiteSwitcherItem = 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="WebsiteSwitcherItem-activeIcon" size={20} src={Check} />
-    ) : null;
-
-    return (
-        <button
-            data-cy="WebsiteSwitcherItem-button"
-            className={classes.root}
-            disabled={active}
-            onClick={handleClick}
-        >
-            <span className={classes.content}>
-                <span className={classes.text}>{children}</span>
-                {activeIcon}
-            </span>
-        </button>
-    );
-};
-
-WebsiteSwitcherItem.propTypes = {
-    active: bool,
-    classes: shape({
-        content: string,
-        root: string,
-        text: string
-    }),
-    onClick: func,
-    option: string
-};
-
-export default WebsiteSwitcherItem;
+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 './websiteSwitcherItem.module.css';
+
+const WebsiteSwitcherItem = 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="WebsiteSwitcherItem-activeIcon" size={20} src={Check} />
+    ) : null;
+
+    return (
+        <button
+            data-cy="WebsiteSwitcherItem-button"
+            className={classes.root}
+            disabled={active}
+            onClick={handleClick}
+        >
+            <span className={classes.content}>
+                <span className={classes.text}>{children}</span>
+                {activeIcon}
+            </span>
+        </button>
+    );
+};
+
+WebsiteSwitcherItem.propTypes = {
+    active: bool,
+    classes: shape({
+        content: string,
+        root: string,
+        text: string
+    }),
+    onClick: func,
+    option: string
+};
+
+export default WebsiteSwitcherItem;

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

@@ -1,20 +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;
-}
+.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/OperatingHours/operatingHours.js

@@ -10,23 +10,25 @@ const OperatingHours = ({ values }) => {
 
 const Hours = ({ values }) => {
     return values && values.map((value, index) => 
-        <span key={index}>
+        <>
             <tr>
                 <td style={{"verticalAlign":"top"}}>{value.day}</td>
                 <td style={{"paddingLeft":"20px"}}>{value.status == "open" && value.time ? <Time times={value.time} /> : 'Closed'}</td>
             </tr>
             <br />
-        </span>
+        </>
     )
 }
 
 const Time = ({ times }) => {
     return times ? times.map((value, index) => 
-        <tr key={index}>
-            <td style={{"paddingBottom": times.length > 1 && index != times.length ? "10px" : "0px"}}>
-                {value.opening_time} - {value.closing_time}
-            </td>
-        </tr>
+        <>
+            <tr>
+                <td style={{"paddingBottom": times.length > 1 && index != times.length ? "10px" : "0px"}}>
+                    {value.opening_time} - {value.closing_time}
+                </td>
+            </tr>
+        </>
     ) : ''
 }
 

package/src/components/Pagination/index.js

@@ -1,43 +1,45 @@
 import React from 'react';
 import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
 
-const Pagination = ({ totalPages, currentPage, pageSize }) => {
-
-    const pageNumbers = [];
-
-    // Populate the items array with numbers from 1 to maxNumber
-    if (totalPages) {
-        for (let i = 1; i < totalPages+1; i++) {
-            pageNumbers.push(i);
-        }
-    }
-
-    const activeClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#f76b1c] rounded-[5px] border border-solid border-[#f76b1c]";
-    const bgClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]";
-
-    const activeTextClass = "relative w-fit font-normal text-white text-[14px] tracking-[0] leading-none whitespace-nowrap";
-    const textClass = "relative w-fit font-normal text-[#f76b1c] text-[14px] tracking-[0] leading-none whitespace-nowrap";
-
+const Pagination = () => {
     return (
         <>
             <div className={'inline-flex items-start gap-[10px] relative'}>
                 <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
-                    <div className="relative w-fit font-normal text-[#f76b1c] text-[14px] tracking-[0] leading-none whitespace-nowrap">
-                        <ArrowLeft2 size="16" color="#f76b1c" variant="Outline" />
+                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
+                        <ArrowLeft2 size="16" color="#6243fa" variant="Outline" />
+                    </div>
+                </button>
+                <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
+                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
+                        1
+                    </div>
+                </button>
+                <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
+                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
+                        2
+                    </div>
+                </button>
+                <button
+                    className={'inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]'}
+                >
+                    <div className="relative w-fit font-normal text-white text-[16px] tracking-[0] leading-none whitespace-nowrap">
+                        3
+                    </div>
+                </button>
+                <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
+                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
+                        4
+                    </div>
+                </button>
+                <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
+                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
+                        5
                     </div>
                 </button>
-                {pageNumbers ? pageNumbers.map((num, index) => (
-                    <span key={index}>
-                        <button className={num == currentPage ? activeClass : bgClass}>
-                            <div className={num == currentPage ? activeTextClass : textClass}>
-                                {num}
-                            </div>
-                        </button>
-                    </span>
-                )) : ''}
                 <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
-                    <div className="relative w-fit font-normal text-[#f76b1c] text-[14px] tracking-[0] leading-none whitespace-nowrap">
-                        <ArrowRight2 size="16" color="#f76b1c" variant="Outline" />
+                    <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
+                        <ArrowRight2 size="16" color="#6243fa" variant="Outline" />
                     </div>
                 </button>
             </div>
@@ -45,4 +47,4 @@ const Pagination = ({ totalPages, currentPage, pageSize }) => {
     )
 }
 
-export default Pagination;
+export default Pagination

package/src/components/PhoneTextInput/index.js

@@ -1 +1 @@
-export { default } from './phoneTextInput';
+export { default } from './phoneTextInput';

package/src/components/PhoneTextInput/phoneTextInput.js

@@ -1,62 +1,62 @@
-import React, { Fragment, useState } from 'react';
-import { node, shape, string } from 'prop-types';
-import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
-import defaultClasses from './phoneTextInput.module.css';
-import PhoneInput from 'react-phone-number-input'
-import 'react-phone-number-input/style.css'
-
-const PhoneTextInput = props => {
-    const {
-        after,
-        before,
-        classes: propClasses,
-        regionError,
-        field,
-        message,
-        countryCodeField = "country",
-        ...rest
-    } = props;
-    const fieldState = useFieldState(field);
-    const { value: phoneValue } = fieldState;
-    const classes = useStyle(defaultClasses, propClasses);
-    var inputClass =
-        fieldState.error || regionError ? classes.input_error : classes.input;
-    
-    const handleChange = (value) => {
-        fieldState.value = value;
-    }
-
-    const countryFieldState = useFieldState(countryCodeField);
-    const { value: country } = countryFieldState;
-
-    return (
-        <Fragment>
-            <FieldIcons after={after} before={before}>
-                <PhoneInput
-                international
-                countryCallingCodeEditable={false}
-                defaultCountry={country}
-                name={field}
-                value={phoneValue}
-                onChange={handleChange}
-                />
-            </FieldIcons>
-            <Message fieldState={fieldState}>{message}</Message>
-        </Fragment>
-    );
-};
-
-export default PhoneTextInput;
-
-PhoneTextInput.propTypes = {
-    after: node,
-    before: node,
-    classes: shape({
-        input: string
-    }),
-    field: string.isRequired,
-    message: node
-};
+import React, { Fragment, useState } from 'react';
+import { node, shape, string } from 'prop-types';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { FieldIcons, Message } from '@magento/venia-ui/lib/components/Field';
+import defaultClasses from './phoneTextInput.module.css';
+import PhoneInput from 'react-phone-number-input'
+import 'react-phone-number-input/style.css'
+
+const PhoneTextInput = props => {
+    const {
+        after,
+        before,
+        classes: propClasses,
+        regionError,
+        field,
+        message,
+        countryCodeField = "country",
+        ...rest
+    } = props;
+    const fieldState = useFieldState(field);
+    const { value: phoneValue } = fieldState;
+    const classes = useStyle(defaultClasses, propClasses);
+    var inputClass =
+        fieldState.error || regionError ? classes.input_error : classes.input;
+    
+    const handleChange = (value) => {
+        fieldState.value = value;
+    }
+
+    const countryFieldState = useFieldState(countryCodeField);
+    const { value: country } = countryFieldState;
+
+    return (
+        <Fragment>
+            <FieldIcons after={after} before={before}>
+                <PhoneInput
+                international
+                countryCallingCodeEditable={false}
+                defaultCountry={country}
+                name={field}
+                value={phoneValue}
+                onChange={handleChange}
+                />
+            </FieldIcons>
+            <Message fieldState={fieldState}>{message}</Message>
+        </Fragment>
+    );
+};
+
+export default PhoneTextInput;
+
+PhoneTextInput.propTypes = {
+    after: node,
+    before: node,
+    classes: shape({
+        input: string
+    }),
+    field: string.isRequired,
+    message: node
+};

package/src/components/ProductItem/index.js

@@ -15,7 +15,7 @@ const ProductItem = () => {
                     <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
                         <div class="flex flex-col w-[153px] items-start justify-center gap-[8px] relative flex-[0_0_auto]">
                             <div class="flex flex-col items-start gap-[6px] relative self-stretch w-full flex-[0_0_auto]">
-                                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-medium text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">$55.00</div>
+                                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">$55.00</div>
                             </div>
                         </div>
                         <div class="flex-col items-start gap-[8px] inline-flex relative flex-[0_0_auto]">

package/src/components/SellerCountry/index.js

@@ -1 +1 @@
-export { default } from './sellerCountry';
+export { default } from './sellerCountry';