@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/components/SellerReviewItem/sellerReviewItem.js

@@ -1,133 +1,56 @@
 import React from 'react';
 import { Star1 } from 'iconsax-react';
 
-const SellerReviewItem = ({ review }) => {
-    const rate1 = [];
-    // if (review.rate1) {
-    //     for (let i = 1; i < review.rate1+1; i++) {
-    //         rate1.push({
-    //             'num': i,
-    //             'star': true
-    //         });
-    //     }
-
-    //     if (review.rate1 < 5) {
-    //         for (let i = review.rate1+1; i < 5+1; i++) {
-    //             rate1.push({
-    //                 'num': i,
-    //                 'star': false
-    //             });
-    //         }
-    //     }
-    // }
-
-    const rate2 = [];
-    // if (review.rate2) {
-    //     for (let i = 1; i < review.rate2+1; i++) {
-    //         rate2.push({
-    //             'num': i,
-    //             'star': true
-    //         });
-    //     }
-
-    //     if (review.rate2 < 5) {
-    //         for (let i = review.rate2+1; i < 5+1; i++) {
-    //             rate2.push({
-    //                 'num': i,
-    //                 'star': false
-    //             });
-    //         }
-    //     }
-    // }
-
-    const rate3 = [];
-    // if (review.rate3) {
-    //     for (let i = 1; i < review.rate3+1; i++) {
-    //         rate3.push({
-    //             'num': i,
-    //             'star': true
-    //         });
-    //     }
-
-    //     if (review.rate3 < 5) {
-    //         for (let i = review.rate3+1; i < 5+1; i++) {
-    //             rate3.push({
-    //                 'num': i,
-    //                 'star': false
-    //             });
-    //         }
-    //     }
-    // }
-
-    const formatDate = (date) => {
-        const isoFormattedDate = date.replace(' ', 'T');
-        const formattedDate = new Date(isoFormattedDate).toLocaleDateString(
-            undefined,
-            {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric'
-            }
-        );
-
-        return formattedDate;
-    }
-
-    const getInitialName = (name) => {
-        let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
-
-        let initials = [...name.matchAll(rgx)] || [];
-
-        initials = (
-        (initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')
-        ).toUpperCase();
-
-        return initials;
-    }
-
+const SellerReviewItem = () => {
     return (
         <>
             <div class="flex flex-col items-start gap-[10px] p-[25px] relative self-stretch w-full flex-[0_0_auto] bg-white rounded-[6px] border border-solid border-[#e6e9ea]">
                 <div class="flex flex-col items-start gap-[20px] relative self-stretch w-full flex-[0_0_auto]">
                     <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
                         <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
-                            <div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#f76b1c] rounded-[30px]">
-                                <div class="relative w-fit font-medium text-white text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
-                                    {review ? getInitialName(review.nickname) : ''}
-                                </div>
+                            <div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
+                                <div class="relative w-fit font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
                             </div>
                             <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit mt-[-1.00px] font-medium text-base text-center tracking-[0] leading-[18px] whitespace-nowrap">
-                                    {review ? review.nickname : ''}
-                                </div>
-                                <div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">       
-                                    {review ? formatDate(review.created_at) : ''}
-                                </div>
+                                <div class="relative w-fit mt-[-1.00px] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">John Doe</div>
+                                <div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">18 January 2024</div>
                             </div>
                         </div>
                         <div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit font-normal text-base tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
+                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <ReviewRating rate={rate1} />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
                                 </div>
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-[37px] font-normal text-base tracking-[0] leading-[18px]">Value</div>
+                                <div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <ReviewRating rate={rate2} />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
                                 </div>
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit font-normal text-base tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
+                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <ReviewRating rate={rate3} />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <p class="relative self-stretch font-normal text-base tracking-[0] leading-[18px]">
-                        {review ? review.detail : ''}
+                    <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
+                        Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
                     </p>
                 </div>
             </div>
@@ -135,12 +58,4 @@ const SellerReviewItem = ({ review }) => {
     )
 }
 
-const ReviewRating = ({ rate }) => {
-    return rate && rate.length ? rate.map((rating, index) => <RatingStar star={rating.star} />) : '';
-}
-
-const RatingStar = ({ star }) => {
-    return star ? <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' /> : <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />;
-}
-
 export default SellerReviewItem;

package/src/components/SellerVerification/sellerVerification.module.css

@@ -11,7 +11,7 @@
     composes: leading-tight from global;
     composes: p-xs from global;
     composes: rounded from global;
-    composes: text-base from global;
+    composes: text-sm from global;
 }
 
 /* TODO @TW: cannot compose */

package/src/components/SortBy/index.js

@@ -8,12 +8,12 @@ const Sort = () => {
                 <div class="xs_flex xl_hidden flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
                     <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
                         <Filter color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
-                        <div class="relative w-fit text-base tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
+                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
                     </div>
                 </div>
                 <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
                     <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
-                        <div class="relative w-fit text-base tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
+                        <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
                         <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
                     </div>
                 </div>

package/src/components/WebsiteSwitcher/websiteSwitcher.js

@@ -8,9 +8,6 @@ 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 {
@@ -62,7 +59,7 @@ const WebsiteSwitcher = props => {
         groups.push(
             <ul
                 role="listbox"
-                className={'text-base'}
+                className={classes.groupList}
                 key={key}
                 data-cy="WebsiteSwitcher-group"
             >
@@ -74,33 +71,24 @@ const WebsiteSwitcher = props => {
     let triggerLabel = currentWebsiteName ? `${currentWebsiteName}` : '';
 
     return (
-        <div className={cn(classes.root, 'leading-[16px]')} data-cy="WebsiteSwitcher-root">
+        <div className={classes.root} data-cy="WebsiteSwitcher-root">
             <button
                 data-cy="WebsiteSwitcher-triggerButton"
-                className={cn(classes.trigger, 'text-base')}
+                className={classes.trigger}
                 aria-label={currentWebsiteName || ''}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
+                data-cy="WebsiteSwitcher-trigger"
                 aria-expanded={storeMenuIsOpen}
             >
-                <span className='flex flex-row gap-[5px] items-center leading-[16px]'>
-                    {triggerLabel || ''}
-                    {!hasOnlyOneGroup ? (
-                        <ArrowUp2 size="12" color={darkBlue} className={cn(storeMenuIsOpen ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
-                    ) : null}
-                </span>
+                {triggerLabel || ''}
             </button>
             <div
                 ref={storeMenuRef}
                 className={menuClassName}
                 data-cy="WebsiteSwitcher-menu"
             >
-                <div className={classes.groups}>
-                    <span className='flex font-medium px-4 py-1 w-full text-base mb-2'>
-                        Country
-                    </span>
-                    {groups}
-                </div>
+                <div className={classes.groups}>{groups}</div>
             </div>
         </div>
     );

package/src/components/WebsiteSwitcher/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/WebsiteSwitcher/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/WebsiteSwitcher/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/WebsiteSwitcher/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/commons/Tabs/index.js

@@ -16,11 +16,11 @@ const Tabs = (props) => {
 
     const [activeTabs, setActiveTabs] = React.useState(0);
     const rootClass = cn('mb-4 border-b border-gray-100', rootClassName);
-    const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[14px] font-medium', tabTitleClassName);
+    const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[16px] font-semibold', tabTitleClassName);
     const tabContainerClass = cn('tab-content-container', tabContentContainerClassName);
     const tabContentWrapperClass = cn('tab-content-wrapper', tabContentWrapperClassName);
     const tabActiveClass = cn('border-solid border-b-2', tabActiveClassName);
-    const tabWrapperClass = cn('flex flex-wrap -mb-px text-base font-medium text-center gap-4', tabWrapperClassName);
+    const tabWrapperClass = cn('flex flex-wrap -mb-px text-sm font-medium text-center gap-4', tabWrapperClassName);
 
     const handleSwicthTab = (index) => {
         setActiveTabs(index);