@riosst100/pwa-marketplace 1.2.7 → 1.2.8

package/src/components/SellerAccountPage/sellerAccountPage.module.css

@@ -1,55 +1,55 @@
-.root {
-    composes: grid from global;
-    composes: gap-y-md from global;
-    composes: px-lg from global;
-    composes: py-md from global;
-}
-
-.title {
-    composes: font-bold from global;
-    composes: font-serif from global;
-    composes: justify-self-center from global;
-}
-
-.accountDetails {
-    composes: gap-y-md from global;
-    composes: grid from global;
-    composes: grid-cols-1 from global;
-
-    composes: lg_grid-cols-3 from global;
-}
-
-.lineItemsContainer {
-    composes: gap-3 from global;
-    composes: grid from global;
-    composes: grid-cols-1 from global;
-    composes: leading-normal from global;
-    grid-column: 1 / span 1;
-
-    composes: lg_gap-xs from global;
-    composes: lg_grid-cols-2 from global;
-}
-
-.lineItemLabel {
-    composes: font-bold from global;
-}
-
-.nameLabel,
-.emailLabel,
-.passwordLabel {
-    composes: font-bold from global;
-}
-
-.nameValue,
-.emailValue,
-.passwordValue {
-}
-
-.editButtonContainer {
-    grid-column: 1 / span 1;
-    composes: text-center from global;
-}
-
-.editInformationButton {
-    composes: root_normalPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
-}
+.root {
+    composes: grid from global;
+    composes: gap-y-md from global;
+    composes: px-lg from global;
+    composes: py-md from global;
+}
+
+.title {
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: justify-self-center from global;
+}
+
+.accountDetails {
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+
+    composes: lg_grid-cols-3 from global;
+}
+
+.lineItemsContainer {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: leading-normal from global;
+    grid-column: 1 / span 1;
+
+    composes: lg_gap-xs from global;
+    composes: lg_grid-cols-2 from global;
+}
+
+.lineItemLabel {
+    composes: font-bold from global;
+}
+
+.nameLabel,
+.emailLabel,
+.passwordLabel {
+    composes: font-bold from global;
+}
+
+.nameValue,
+.emailValue,
+.passwordValue {
+}
+
+.editButtonContainer {
+    grid-column: 1 / span 1;
+    composes: text-center from global;
+}
+
+.editInformationButton {
+    composes: root_normalPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+}

package/src/components/SellerCountry/sellerCountry.gql.js

@@ -1,11 +1,11 @@
-import { gql } from '@apollo/client';
-
-export const GET_SELLER_COUNTRIES_QUERY = gql`
-    query GetSellerCountries {
-        sellerCountries {
-            id
-            full_name_english
-            two_letter_abbreviation
-        }
-    }
-`;
+import { gql } from '@apollo/client';
+
+export const GET_SELLER_COUNTRIES_QUERY = gql`
+    query GetSellerCountries {
+        sellerCountries {
+            id
+            full_name_english
+            two_letter_abbreviation
+        }
+    }
+`;

package/src/components/SellerDetail/index.js

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

package/src/components/SellerDetail/sellerDetail.js

@@ -0,0 +1,161 @@
+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 />
+            },
+            {
+                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 xs_flex-col md_flex-row xs_items-center md_item-start lg_flex-row justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-gray-100 shadow-[0px_0px_5px_3px_#d9d9d933]'>
+                <div className='flex xs_flex-col md_flex-row xs_items-center md_items-start items-start gap-[15px] relative'>
+                    {seller?.thumbnail ? (
+                        <Image
+                            alt={seller.name}
+                            width='100'
+                            src={seller.thumbnail || ''} />
+                    ) : (
+                        <div className='flex items-center justify-center bg-gray-300 border rounded-radius1 relative w-[100px] h-[100px]'>
+                            <Shop size="48" color="#F2F2F2" variant="Outline" />
+                        </div>
+                    )}
+
+                    <div className='flex flex-col xs_items-center md_items-start justify-between relative gap-y-[18px]'>
+                        <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
+                            <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
+                                <div className="relative w-fit mt-[-1.00px] font-semibold text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
+                                    {seller ? seller.name : ''}
+                                </div>
+                                <div className="flex items-center gap-[5px] relative">
+                                    <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">
+                                {seller ? seller.city + ', ' + seller.country : ''}
+                            </div>
+                        </div>
+                        <div className='flex flex-wrap items-start gap-4 relative'>
+                            <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
+                                <div class="flex items-center justify-center gap-[10px] relative">
+                                    <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
+                                    <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                        Message
+                                    </div>
+                                </div>
+                            </button>
+                            <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
+                                <div class="flex items-center justify-center gap-[10px] relative">
+                                    <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
+                                    <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
+                                        Chat With Seller
+                                    </div>
+                                </div>
+                            </button>
+                            <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
+                                <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
+                            </button>
+                            <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
+                                <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
+                            </button>
+                        </div>
+                    </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">
+                            <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">
+                                0.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">
+                            Rating &amp; Reviews
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <Tabs
+                data={dataTabs}
+                tabContentWrapperClassName='!p-0'
+                hasContent
+                tabWrapperClassName='xl_gap-x-[60px]'
+            />
+        </div>
+    )
+}
+
+export default SellerDetail;

package/src/components/SellerInformation/index.js

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

package/src/components/SellerInformation/sellerInformation.js

@@ -1,91 +1,87 @@
-import React from 'react';
-import SellerLocation from '../SellerLocation';
-import { Location, ShopAdd } from 'iconsax-react';
-
-const SellerInformation = ({ seller }) => {
-    console.log(seller.operating_hours)
-    return (
-        <>
-            <div class="flex flex-col items-start gap-[30px] px-[10px]">
-                <div class="grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 relative w-full grow xs_gap-y-6 md_gap-x-14 xl_gap-x-14">
-                    <div class="flex flex-col items-start gap-[30px] relative self-stretch">
-                        <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
-                            <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Description</div>
-                            <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
-                                <p class="relative mt-[-1.00px]  font-normal text-[14px] tracking-[0] leading-[16px]">
-                                    {seller ? seller.description : ''}<br />
-                                    <br />
-                                    {seller ? seller.contact_number : ''}
-                                </p>
-                            </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-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">612, Jurong West Street 65</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 mt-[-1.00px]  font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: December 2023</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex flex-col items-start gap-[30px] relative">
-                        <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
-                            <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Working Hour</div>
-                            <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 mt-[-1.00px]  font-normal text-[14px] tracking-[0] leading-[normal]">
-                                        Monday - Friday 9 AM - 5 PM<br />
-                                        <br />
-                                        Saturday 11 AM - 3 PM<br />
-                                        <br />
-                                        Sunday Close
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex flex-col items-start gap-[15px] relative">
-                        <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
-                            <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Ship To</div>
-                        </div>
-                        <div class="flex flex-wrap items-start gap-[10px_10px] relative flex-[0_0_auto]">
-                            <div class="flex flex-wrap items-center gap-2 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-normal 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-normal 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-normal 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-normal 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]  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-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Bukit Batok</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
-                    <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
-                        <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Terms &amp; Condition</div>
-                        <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
-                            <div class="flex flex-col items-start gap-[2px]">
-                                {seller ? seller.term_and_conditions : ''}
-                            </div>
-                        </div>
-                    </div >
-                </div >
-                <SellerLocation />
-            </div >
-        </>
-    )
-}
-
+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 }) => {
+    return (
+        <>
+            <div class="flex flex-col items-start gap-[30px] px-[10px]">
+                <div class="grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 relative w-full grow xs_gap-y-6 md_gap-x-14 xl_gap-x-14">
+                    <div class="flex flex-col items-start gap-[30px] relative self-stretch">
+                        <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
+                            <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Description</div>
+                            <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
+                                <p class="relative mt-[-1.00px]  font-normal text-[14px] tracking-[0] leading-[16px]">
+                                    {seller ? seller.description : ''}<br />
+                                    <br />
+                                    {seller ? seller.contact_number : ''}
+                                </p>
+                            </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-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 mt-[-1.00px]  font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: {seller ? seller.creation_time : ''}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col items-start gap-[30px] relative">
+                        <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
+                            <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Working Hour</div>
+                            <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 mt-[-1.00px]  font-normal text-[14px] tracking-[0] leading-[normal]">
+                                        <OperatingHours values={seller.operating_hours} />
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col items-start gap-[15px] relative">
+                        <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
+                            <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Ship To</div>
+                        </div>
+                        <div class="flex flex-wrap items-start gap-[10px_10px] relative flex-[0_0_auto]">
+                            {seller ? <SellerShipTo seller={seller} /> : '' }
+                        </div>
+                    </div>
+                </div>
+                <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
+                    <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
+                        <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Terms &amp; Condition</div>
+                        <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
+                            <div class="flex flex-col items-start gap-[2px]">
+                                {seller ? seller.term_and_conditions : ''}
+                            </div>
+                        </div>
+                    </div >
+                </div >
+                {seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
+            </div >
+        </>
+    )
+}
+
+const SellerShipTo = ({seller}) => {
+    const shipTo = seller ? seller.ship_to : '';
+    const shipToCountry = seller ? seller.ship_to_country : '';
+
+    const shipToCountryArr = shipToCountry ? shipToCountry.split(',') : '';
+
+    return (
+        <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 class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
+            </div>
+            </>) : ''}
+        </div>
+    );
+}
+
 export default SellerInformation;

package/src/components/SellerLocation/index.js

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

package/src/components/SellerLocation/sellerLocation.js

@@ -1,20 +1,20 @@
-import React from 'react';
-import SellerLocationItem from './sellerLocationItem';
-
-const SellerLocation = () => {
-    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 xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 gap-4">
-                    <SellerLocationItem />
-                    <SellerLocationItem />
-                    <SellerLocationItem />
-                    <SellerLocationItem />
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React from 'react';
+import SellerLocationItem from './sellerLocationItem';
+
+const SellerLocation = ({ storeLocators }) => {
+    return (
+        <>{storeLocators.length > 0 ? (
+            <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 xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 gap-4">
+                    {storeLocators && storeLocators.map((value, index) =>
+                        <SellerLocationItem storeLocator={value} />
+                    )}
+                </div>
+            </div>
+        ) : ''}
+        </>
+    )
+}
+
 export default SellerLocation;

package/src/components/SellerLocation/sellerLocationItem.js

@@ -1,28 +1,28 @@
-import React from 'react';
-import { Location, Clock } from 'iconsax-react';
-
-const SellerLocationItem = () => {
-    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="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>
-                <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>
-                    </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>
-        </>
-    )
-}
-
+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 = ({ storeLocator }) => {
+    return storeLocator && (
+        <>
+            <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]">{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]">
+                        {storeLocator.city}, {storeLocator.country}
+                    </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-[normal] whitespace-nowrap">{storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}</p>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default SellerLocationItem;

package/src/components/SellerPage/sellerPage.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import Seller from '@riosst100/pwa-marketplace/src/components/Seller/seller';
-
-const SellerPage = () => {
-    return (
-        <Seller />
-    )
-}
-
+import React from 'react';
+import Seller from '@riosst100/pwa-marketplace/src/components/Seller/seller';
+
+const SellerPage = () => {
+    return (
+        <Seller />
+    )
+}
+
 export default SellerPage;