@riosst100/pwa-marketplace 1.3.0 → 1.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -13,6 +13,12 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',
     [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
     [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
+    [`@magento/peregrine/lib/talons/MegaMenu/megaMenu.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js',
     [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
     [`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
+    [`@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js',
+    [`@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/venia-ui/lib/components/FilterSidebar/filterSidebar.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js',
 };

package/src/components/OperatingHours/operatingHours.js

@@ -10,25 +10,23 @@ 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>
-                <td style={{"paddingBottom": times.length > 1 && index != times.length ? "10px" : "0px"}}>
-                    {value.opening_time} - {value.closing_time}
-                </td>
-            </tr>
-        </>
+        <tr key={index}>
+            <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,7 +1,23 @@
 import React from 'react';
 import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
 
-const Pagination = () => {
+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-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]";
+    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-[16px] tracking-[0] leading-none whitespace-nowrap";
+    const textClass = "relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap";
+
     return (
         <>
             <div className={'inline-flex items-start gap-[10px] relative'}>
@@ -10,33 +26,15 @@ const Pagination = () => {
                         <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-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
                         <ArrowRight2 size="16" color="#6243fa" variant="Outline" />
@@ -47,4 +45,4 @@ const Pagination = () => {
     )
 }
 
-export default Pagination
+export default Pagination;

package/src/components/SellerDetail/sellerDetail.js

@@ -49,7 +49,7 @@ const SellerDetail = props => {
             {
                 id: 'product-tab',
                 title: 'All Products',
-                content: <SellerProducts />
+                content: <SellerProducts seller={seller} />
             },
             {
                 id: 'store-information',
@@ -59,7 +59,7 @@ const SellerDetail = props => {
             {
                 id: 'reviews',
                 title: 'Reviews',
-                content: <Reviews />
+                content: <Reviews seller={seller} />
             }
         ];
 
@@ -123,17 +123,6 @@ const SellerDetail = props => {
                     </div>
                 </div>
                 <div class="flex items-center gap-[20px] px-[10px] py-[30px] relative">
-                    <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
-                        <div class="flex items-center gap-[6px] relative">
-                            <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
-                            <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
-                                {seller ? seller.sale : 0}
-                            </div>
-                        </div>
-                        <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
-                            Total Sales
-                        </div>
-                    </div>
                     <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
                     <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
                         <div class="flex items-center gap-[5px] relative">

package/src/components/SellerInformation/sellerInformation.js

@@ -16,6 +16,7 @@ const SellerInformation = ({ seller }) => {
                                 <p class="relative mt-[-1.00px]  font-normal text-[14px] tracking-[0] leading-[16px]">
                                     {seller ? seller.description : ''}<br />
                                     <br />
+                                    <br />
                                     {seller ? seller.contact_number : ''}
                                 </p>
                             </div>
@@ -76,7 +77,7 @@ const SellerShipTo = ({seller}) => {
         <div class="flex flex-wrap items-center gap-2 px-0 py-[5px] relative flex-1 grow">
             {shipTo && shipTo == "Domestic" ? seller.country_id : ''}
             {shipToCountryArr && shipTo != "Domestic" ? shipToCountryArr.map((value, index) => <>
-            <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]">
+            <div key={index} class={index == shipToCountryArr.length-1 ? "inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]" : "inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]"}>
                 <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
             </div>
             </>) : ''}

package/src/components/SellerLocation/sellerLocation.js

@@ -8,7 +8,7 @@ const SellerLocation = ({ storeLocators }) => {
                 <div class="relative w-fit font-semibold  text-[20px] tracking-[0] leading-[normal]">Our Store</div>
                 <div class="w-full grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 gap-4">
                     {storeLocators && storeLocators.map((value, index) =>
-                        <SellerLocationItem storeLocator={value} />
+                        <SellerLocationItem storeLocator={value} key={index} />
                     )}
                 </div>
             </div>

package/src/components/SellerReview/sellerReview.js

@@ -2,8 +2,15 @@ import React from 'react';
 import SellerReviewItem from '../SellerReviewItem';
 import Pagination from '../Pagination';
 import { Star1 } from 'iconsax-react';
+import { useSellerReview } from '@riosst100/pwa-marketplace/src/talons/SellerReview/useSellerReview';
+
+const SellerReview = ({ seller }) => {
+    const talonProps = useSellerReview({
+        sellerUrl: seller.url_key
+    });
+
+    const { reviews, loading } = talonProps;
 
-const SellerReview = () => {
     return (
         <>
             <div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px] '>
@@ -28,7 +35,7 @@ const SellerReview = () => {
                                     <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
                                 </div>
                             </div>
-                            <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
+                            <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">({reviews ? reviews.items.length : 0} Reviews)</div>
                         </div>
                     </div>
                     <div className="w-full flex-col items-start gap-2 flex">
@@ -124,16 +131,13 @@ const SellerReview = () => {
                 </div>
                 <div className='flex flex-col w-full'>
                     <div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
+                        <SellerReviews reviews={reviews} />
                     </div>
                     <div className='pagination-container w-full flex justify-center'>
-                        <Pagination />
+                        {reviews && reviews.page_info ? <Pagination 
+                        currentPage={reviews.page_info.current_page} 
+                        totalPages={reviews.page_info.total_pages} 
+                        pageSize={reviews.page_info.page_size} /> : ''}
                     </div>
                 </div>
             </div>
@@ -141,4 +145,8 @@ const SellerReview = () => {
     )
 }
 
+const SellerReviews = ({ reviews }) => {
+    return reviews && reviews.items.length ? reviews.items.map((review, index) => <SellerReviewItem review={review} key={index} /> ) : ''
+}
+
 export default SellerReview;

package/src/components/SellerReviewItem/sellerReviewItem.js

@@ -1,7 +1,90 @@
 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]">
@@ -9,48 +92,42 @@ const SellerReviewItem = () => {
                     <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="relative w-fit font-semibold text-white text-[16px] 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-[14px] 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="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="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="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.
+                        {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/ShopByCategory/index.js

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

package/src/components/ShopByCategory/shopByCategory.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './shopByCategory.module.css';
+import { useShopByCategory } from '@riosst100/pwa-marketplace/src/talons/ShopByCategory';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+const ShopByCategory = props => {
+    const { categoryName, children, parent } = props;
+
+    const talonProps = useShopByCategory({ children, parent });
+
+    const {
+        childrenNormalizedData,
+        parentNormalizedData
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const childrenList = [];
+
+    childrenList.push(
+        <span><b>{categoryName}</b></span>
+    );
+
+    childrenNormalizedData ? childrenNormalizedData.map(({ text, path }) => {
+        childrenList.push(
+            <Link
+                to={resourceUrl(path)}
+            >
+                <div>{text}</div>
+            </Link>
+        )
+    }) : ''
+
+    const parentList = [];
+    parentNormalizedData ? parentNormalizedData.map(({ text, path }) => {
+        parentList.push(
+            <Link
+                to={resourceUrl(path)}
+            >
+                <div>{text}</div>
+            </Link>
+        )
+    }) : ''
+
+    return (
+        <aside
+            className={classes.root}
+            data-cy="ShopByCategory-root"
+            aria-busy="false"
+        >
+            <br />
+            <br />
+            {/* <div className={classes.body}> */}
+                {/* <ul> */}
+                    <li>
+                        <div><b>Shop By Category</b></div>
+                        {parentList}
+                        <ul className={classes.blocks}>{childrenList}</ul>
+                    </li>
+                {/* </ul> */}
+            {/* </div> */}
+        </aside>
+    );
+};
+
+export default ShopByCategory;

package/src/components/ShopByCategory/shopByCategory.module.css

@@ -0,0 +1,58 @@
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: hidden from global;
+    composes: max-w-modal from global;
+    composes: w-full from global;
+    composes: z-foreground from global;
+    grid-template-rows: 1fr 7rem;
+
+    composes: lg_grid from global;
+}
+
+.body {
+    composes: overflow-auto from global;
+}
+
+.header {
+    composes: flex from global;
+    composes: justify-between from global;
+    composes: pb-0 from global;
+    composes: pt-5 from global;
+    composes: px-5 from global;
+}
+
+.headerTitle {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-none from global;
+    composes: text-lg from global;
+}
+
+.action {
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.action button {
+    /* composes: text-sm from global; */
+    font-size: 0.875rem;
+    /* composes: no-underline from global; */
+    text-decoration: none;
+}
+
+.blocks {
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.blocks > li:last-child {
+    /* composes: border-b-2 from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
+    border-bottom: 2px solid rgb(var(--venia-global-color-border));
+}

package/src/components/ShopByCategory/shopByCategory.shimmer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './shopByCategory.module.css';
+
+const ShopByCategory = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <aside className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
+        </aside>
+    );
+};
+
+ShopByCategory.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default ShopByCategory;

package/src/components/SubCategory/subCategory.js

@@ -0,0 +1,31 @@
+import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useSubCategory';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+const SubCategory = props => {
+    const { children } = props;
+
+    const talonProps = useSubCategory({ children });
+
+    const {
+        normalizedData
+    } = talonProps;
+    
+    const subCategory = [];
+    
+    normalizedData && normalizedData.map(({ text, path }, index) => {
+        subCategory.push(
+            <Link
+                key={index}
+                to={resourceUrl(path)}
+            >
+                <span className="filterModalOpenButton-filterButton-qRo button-root_lowPriority-Qoh button-root-MFn border-2 border-solid cursor-pointer font-bold inline-flex items-center justify-center leading-tight max-w-full min-w-[10rem] outline-none pointer-events-auto px-sm rounded-full text-center text-sm uppercase disabled_bg-gray-400 disabled_border-gray-400 disabled_opacity-50 disabled_pointer-events-none disabled_text-white focus_shadow-inputFocus bg-transparent border-gray-700 text-gray-700 active_border-gray-800 active_text-gray-800 hover_border-gray-800 hover_text-gray-800 min-w-[6.25rem]" style={{"margin":"10px"}}>{text}</span>
+            </Link>
+        )
+    });
+
+    return subCategory;
+};
+
+export default SubCategory;