@riosst100/pwa-marketplace 1.2.4 → 1.2.6

package/package.json

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

package/src/components/OperatingHours/index.js

@@ -0,0 +1 @@
+export { default } from './operatingHours';

package/src/components/OperatingHours/operatingHours.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const OperatingHours = ({ values }) => {
+    return <>
+        <table>
+            {values ? <Hours values={values} /> : ''}
+        </table>
+    </>
+}
+
+const Hours = ({ values }) => {
+    return values && values.map((value, index) => 
+    <>
+        <tr>
+            <td>{value.day}</td>
+            <td>
+                {value.status == "open" && value.time ? <Time times={value.time} /> : <tr><td>Closed</td></tr>}
+            </td>
+        </tr>
+    </>)
+}
+
+const Time = ({ times }) => {
+    return times ? times.map((value, index) => 
+    <>
+        <tr>
+            <td>{value.opening_time} - {value.closing_time}</td>
+        </tr>
+    </>) : ''
+}
+
+export default OperatingHours;

package/src/components/Seller/seller.js

@@ -4,20 +4,7 @@ import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSelle
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
 import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
-import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
-import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
-import SellerProducts from '../SellerProducts';
-import SellerInformation from '../SellerInformation';
-import Reviews from '../SellerReview';
-import {
-    Verify,
-    Sms,
-    Message,
-    Heart,
-    Share,
-    BoxTick,
-    Star1,
-} from 'iconsax-react';
+import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail';
 
 const Seller = props => {
     const talonProps = useSeller({
@@ -47,113 +34,9 @@ const Seller = props => {
         <Fragment>
             <StoreTitle>{seller.name}</StoreTitle>
             <Meta name="description" content={seller.description} />
-            <SellerDetail seller={seller} />
+            {seller && <SellerDetail seller={seller} />}
         </Fragment>
     );
 };
 
-const SellerDetail = ({ seller }) => {
-    const dataTabs =
-    [
-        {
-            id: 'product-tab',
-            title: 'All Products',
-            content: <SellerProducts />
-        },
-        {
-            id: 'store-information',
-            title: 'Store Information',
-            content: <SellerInformation seller={seller} />
-        },
-        {
-            id: 'reviews',
-            title: 'Reviews',
-            content: <Reviews />
-        }
-    ];
-
-    return (
-        <div className='py-8'>
-            <Slider seller={seller} rootClassname='mb-[30px]' />
-            <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
-                <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
-                    <img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src={seller ? seller.thumbnail : ''} />
-                    <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
-                        <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
-                            <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
-                                <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
-                                    {seller ? seller.name : ''}
-                                </div>
-                                <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
-                                    <Verify variant='Bold' color='#4E31DB' size={20} />
-                                    <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
-                                        Verified
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
-                                Jurong west
-                            </div>
-                        </div>
-                        <div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
-                            <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
-                                <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
-                                    <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
-                                    <div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
-                                        Message
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
-                                <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
-                                    <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
-                                    <div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
-                                        Chat With Seller
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
-                                <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
-                            </div>
-                            <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
-                                <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
-                    <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
-                        <div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
-                            <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">
-                                121
-                            </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="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
-                        <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
-                            <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
-                            <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
-                                4.7
-                            </div>
-                        </div>
-                        <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
-                            Rating &amp; Reviews
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <Tabs
-                data={dataTabs}
-                tabContentWrapperClassName='!p-0'
-                hasContent
-            />
-        </div>
-    )
-}
-
 export default Seller;

package/src/components/Seller/sellerAddressCard.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from '@magento/venia-ui/lib/components/AddressBookPage/addressCard.module.css';
+
+const SellerAddressCard = ({ address }) => {
+    const {
+        address_line_1,
+        address_line_2,
+        city,
+        country,
+        postcode,
+        region
+    } = address;
+
+    const classes = useStyle(defaultClasses, null);
+
+    // const nameString = [firstname, middlename, lastname]
+    //     .filter(name => !!name)
+    //     .join(' ');
+    
+    let additionalAddressString = `${city || ''}`;
+
+    if (region || postcode) {
+        additionalAddressString += `, ${region || ''} ${postcode || ''}`;
+    }
+
+    return (
+        <div
+            className={classes.contentContainer}
+            data-cy="addressCard-contentContainer"
+        >
+            <span className={classes.streetRow}>
+                {address_line_1 || ''}
+            </span>
+            <span className={classes.streetRow}>
+                {address_line_2 || ''}
+            </span>
+            <span className={classes.additionalAddress}>
+                {additionalAddressString || ''}
+            </span>
+            <span className={classes.country}>
+                {country || ''}
+            </span>
+        </div>
+    );
+};
+
+export default SellerAddressCard;

package/src/components/SellerDetail/index.js

@@ -0,0 +1 @@
+export { default } from './sellerDetail';

package/src/components/SellerDetail/sellerDetail.js

@@ -0,0 +1,158 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
+import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
+import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
+import SellerProducts from '../SellerProducts';
+import SellerInformation from '../SellerInformation';
+import Reviews from '../SellerReview';
+import {
+    Verify,
+    Sms,
+    Message,
+    Heart,
+    Share,
+    BoxTick,
+    Star1,
+} from 'iconsax-react';
+import Image from '@magento/venia-ui/lib/components/Image';
+
+const SellerDetail = props => {
+    const talonProps = useSeller({
+        mapSeller
+    });
+
+    const { error, loading, seller } = talonProps;
+
+    if (loading && !seller)
+        return '';
+        // return <SellerShimmer />;
+    if (error && !seller) return <ErrorView />;
+    if (!seller) {
+        return (
+            <h1>
+                <FormattedMessage
+                    id={'seller.notFound'}
+                    defaultMessage={
+                        'Seller Not Found.'
+                    }
+                />
+            </h1>
+        );
+    }
+
+    const dataTabs =
+    [
+        {
+            id: 'product-tab',
+            title: 'All Products',
+            content: <SellerProducts data={seller.products} />
+        },
+        {
+            id: 'store-information',
+            title: 'Store Information',
+            content: <SellerInformation seller={seller} />
+        },
+        {
+            id: 'reviews',
+            title: 'Reviews',
+            content: <Reviews />
+        }
+    ];
+
+    return (
+        <Fragment>
+            <StoreTitle>{seller.name}</StoreTitle>
+            <Meta name="description" content={seller.description} />
+            <div className='py-8'>
+                <Slider seller={seller} rootClassname='mb-[30px]' />
+                <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
+                    <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
+                    {seller && seller.thumbnail && seller.thumbnail !== undefined ?  <Image
+                        alt={seller.name}
+                        width='100'
+                        src={seller.thumbnail || ''}
+                    /> : ''}
+                        <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
+                            <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
+                                <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
+                                    <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
+                                        {seller ? seller.name : ''}
+                                    </div>
+                                    <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
+                                        <Verify variant='Bold' color='#4E31DB' size={20} />
+                                        <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
+                                            Verified
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
+                                    Jurong west
+                                </div>
+                            </div>
+                            <div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
+                                <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
+                                    <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
+                                        <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
+                                        <div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                            Message
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
+                                    <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
+                                        <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
+                                        <div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                            Chat With Seller
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
+                                    <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
+                                </div>
+                                <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
+                                    <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
+                        <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
+                            <div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
+                                <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="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
+                            <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
+                                <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
+                                <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
+                                    4.7
+                                </div>
+                            </div>
+                            <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
+                                Rating &amp; Reviews
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <Tabs
+                    data={dataTabs}
+                    tabContentWrapperClassName='!p-0'
+                    hasContent
+                />
+            </div>
+        </Fragment>
+    )
+}
+
+export default SellerDetail;

package/src/components/SellerInformation/sellerInformation.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import SellerLocation from '../SellerLocation';
 import { Location, ShopAdd } from 'iconsax-react';
+import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
+import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
 
 const SellerInformation = ({ seller }) => {
-    console.log(seller.operating_hours)
     return (
         <>
             <div class="flex flex-col items-start gap-[30px] px-[10px]">
@@ -21,11 +22,11 @@ const SellerInformation = ({ seller }) => {
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
                                 <Location color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
-                                <p class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">612, Jurong West Street 65</p>
+                                <p class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap"><SellerAddressCard address={seller} /></p>
                             </div>
                             <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
                                 <ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
-                                <div class="relative self-stretch w-[151px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: December 2023</div>
+                                <div class="relative self-stretch w-[151px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: {seller ? seller.creation_time : ''}</div>
                             </div>
                         </div>
                     </div>
@@ -36,11 +37,7 @@ const SellerInformation = ({ seller }) => {
                             <div class="inline-flex flex-col items-start relative flex-[0_0_auto]">
                                 <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
                                     <p class="relative w-[186px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
-                                        Monday - Friday 9 AM - 5 PM<br />
-                                        <br />
-                                        Saturday 11 AM - 3 PM<br />
-                                        <br />
-                                        Sunday Close
+                                        <OperatingHours values={seller.operating_hours} />
                                     </p>
                                 </div>
                             </div>
@@ -52,26 +49,7 @@ const SellerInformation = ({ seller }) => {
                             <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Ship To</div>
                         </div>
                         <div class="flex flex-wrap w-[300px] items-start gap-[10px_10px] relative flex-[0_0_auto]">
-                            <div class="flex flex-wrap items-center gap-[0px_10px] px-0 py-[5px] relative flex-1 grow">
-                                <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 class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Yishun</div>
-                                </div>
-                                <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 class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong West</div>
-                                </div>
-                                <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 class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong East</div>
-                                </div>
-                                <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 class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Seletar</div>
-                                </div>
-                                <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 class="mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] text-[#1b1b1b] text-[14px] leading-[normal] whitespace-nowrap relative w-fit font-normal tracking-[0]">Serangoon</div>
-                                </div>
-                                <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
-                                    <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Bukit Batok</div>
-                                </div>
-                            </div>
+                            {seller ? <SellerShipTo seller={seller} /> : '' }
                         </div>
                     </div>
                 </div>
@@ -85,10 +63,23 @@ const SellerInformation = ({ seller }) => {
                         </div>
                     </div>
                 </div>
-                <SellerLocation />
+                {seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
             </div>
         </>
     )
 }
 
+const SellerShipTo = ({seller}) => {
+    const shipTo = seller ? seller.ship_to : '';
+    const shipToCountry = seller ? seller.ship_to_country : '';
+
+    return <>
+        <div class="flex flex-wrap items-center gap-[0px_10px] px-0 py-[5px] relative flex-1 grow">
+            <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 class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{shipTo}<br />{shipToCountry}</div>
+            </div>
+        </div>
+    </>
+}
+
 export default SellerInformation;

package/src/components/SellerLocation/sellerLocation.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import SellerLocationItem from './sellerLocationItem';
 
-const SellerLocation = () => {
+const SellerLocation = ({ storeLocators }) => {
     return (
         <>
             <div class="w-full flex flex-col items-start gap-[25px]">
                 <div class="relative w-fit font-semibold  text-[20px] tracking-[0] leading-[normal]">Our Store</div>
                 <div class="w-full grid grid-cols-3 gap-4">
-                    <SellerLocationItem />
-                    <SellerLocationItem />
-                    <SellerLocationItem />
-                    <SellerLocationItem />
+                    {storeLocators && storeLocators.map((value, index) =>
+                        <SellerLocationItem storeLocator={value} />
+                    )}
                 </div>
             </div>
         </>

package/src/components/SellerLocation/sellerLocationItem.js

@@ -1,24 +1,22 @@
 import React from 'react';
 import { Location, Clock } from 'iconsax-react';
+import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
+import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
 
-const SellerLocationItem = () => {
+const SellerLocationItem = ({ storeLocator }) => {
     return (
         <>
             <div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
-                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[16px] tracking-[0] leading-[normal]">Zen Market Kitchener</div>
+                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[16px] tracking-[0] leading-[normal]">{storeLocator ? storeLocator.name : ''}</div>
                 <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
                     <Location color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
-                    <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]">180 Kitchener Rd, Singapura</div>
+                    <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]"><SellerAddressCard address={storeLocator} /></div>
                 </div>
                 <div class="flex flex-col w-[320px] items-end relative flex-[0_0_auto] mr-[-10.00px]">
                     <div class="flex items-center gap-[10px] relative self-stretch w-full flex-[0_0_auto]">
                         <Clock color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
-                        <p class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[24px] whitespace-nowrap">Monday - Friday 9 AM - 5 PM</p>
+                        {storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}
                     </div>
-                    <p class="relative w-[292px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[24px]">
-                        Saturday 11 AM - 3 PM<br />
-                        Sunday Close
-                    </p>
                 </div>
             </div>
         </>