@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/components/SellerReviewItem/sellerReviewItem.js

@@ -1,56 +1,133 @@
 import React from 'react';
 import { Star1 } from 'iconsax-react';
 
-const SellerReviewItem = () => {
+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;
+    }
+
     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-[#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 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>
                             <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-[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 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>
                         </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-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
+                                <div class="relative w-fit font-normal text-base tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <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]' />
+                                    <ReviewRating rate={rate1} />
                                 </div>
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
+                                <div class="relative w-[37px] font-normal text-base tracking-[0] leading-[18px]">Value</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <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]' />
+                                    <ReviewRating rate={rate2} />
                                 </div>
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                                <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
+                                <div class="relative w-fit font-normal text-base tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
                                 <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
-                                    <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]' />
+                                    <ReviewRating rate={rate3} />
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <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 class="relative self-stretch font-normal text-base tracking-[0] leading-[18px]">
+                        {review ? review.detail : ''}
                     </p>
                 </div>
             </div>
@@ -58,4 +135,12 @@ const SellerReviewItem = () => {
     )
 }
 
+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-sm from global;
+    composes: text-base from global;
 }
 
 /* TODO @TW: cannot compose */

package/src/components/ShopBy/index.js

@@ -0,0 +1,2 @@
+export { default } from './shopBy';
+export { default as ShopByShimmer } from './shopBy.shimmer';

package/src/components/ShopBy/shopBy copy.js

@@ -0,0 +1,172 @@
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './shopBy.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { ShopByShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBy';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
+import { useShopBy } from '@riosst100/pwa-marketplace/src/talons/ShopBy/useShopBy';
+
+const ShopBy = props => {
+    const [active, setActive] = useState('all');
+
+    const [searchQuery, setSearchQuery] = useState('');
+
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
+        sortText: 'All (A-Z)',
+        value: 'all'
+    }});
+
+    const [currentSort] = sortProps;
+
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useShopBy({ searchQuery, setActive, currentSort });
+
+    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredCollectibleGameSets, availableGroups, attributeData, alpha, category } = talonProps;
+
+    if (loading && !dataResult)
+        return <ShopByShimmer />;
+    if (error && !dataResult) return <ErrorView />;
+
+    if (!dataResult && !loading && !error) {
+        return <ShopByShimmer />;
+    }
+
+    const newData = searchQuery ? filteredCollectibleGameSets : dataResult;
+
+    const setRelases = availableGroups.map((group, index) => {
+        const optionsResult = [];
+
+        if (active === 'all' || active === group) {
+            dataResult[group].map((option, index) => {
+                const { label, value } = option;
+
+                const categoryUrl = resourceUrl(
+                    `/${categoryUrlKey}${categoryUrlSuffix || ''}?${attributeData.attribute_code}[filter]=${label},${value}`
+                );
+
+                optionsResult.push(<li className='list-none'>
+                    <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {label}
+                    </Link>
+                </li>)
+            })
+
+            return (
+                <>
+                    {optionsResult ?
+                    <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                        <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' >
+                            {group}
+                        </div>
+                        <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
+                    </div> : ''}
+                </>
+            );
+        }
+        
+        return null;
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+
+        // 
+
+
+        setSearchQuery('')
+    }
+
+    let availableSortBy = [
+        {
+            'label': 'All (A-Z)',
+            'value': 'all'
+        }
+    ];
+
+    let title = "All Sets";
+    if (productType == "expansion-sets") {
+        title = "Expansion Sets";
+    } else if (productType == "artist") {
+        title = "Artist";
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {attributeData ? 'By ' + attributeData.label : 'Shop By'}
+            </h1>
+            <div className='border border-gray-100 px-6'>
+                {dataResult ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                        <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} />
+                    </div>
+                ) : ''}
+                {productType != "expansion-sets" ? (
+                    <>
+                        <section className='single_list-indexing-container relative m-auto py-10'>
+                            <ul className='flex gap-2 justify-center flex-wrap'>
+                                <li>
+                                    <button
+                                        className={cn(
+                                            'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                            'leading-4 font-medium text-base hover_bg-gray-50'
+                                        )}
+                                        onClick={() => {
+                                            handleActive('all')
+                                        }}
+                                    >
+                                        {active == 'all' ? <b>All</b> : 'All'}
+                                    </button>
+                                </li>
+                                {alpha.map((letter, index) => (
+                                    <li key={index}>
+                                        <button
+                                            className={cn(
+                                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                                'leading-4 font-medium text-base ',
+                                                availableGroups.includes(letter) > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                            )}
+                                            onClick={() => {
+                                                handleActive(letter)
+                                            }}
+                                            disabled={availableGroups.includes(letter) > 0 ? false : true}
+                                        >
+                                            {active == letter ? <b>{letter}</b> : letter}
+                                        </button>
+                                    </li>
+                                ))}
+                            </ul>
+                        </section>
+                    </>
+                ) : ''}
+                <Divider className="mb-5 px-4 mt-5" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {Object.keys(dataResult).length != 0 ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found.</div>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+}
+
+export default ShopBy;