@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/components/SellerCountry/sellerCountry.js

@@ -1,71 +1,71 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import { func, shape, string } from 'prop-types';
-import { useSellerCountry } from '@riosst100/pwa-marketplace/src/talons/SellerCountry/useSellerCountry';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Field from '@magento/venia-ui/lib/components/Field';
-import Select from '@magento/venia-ui/lib/components/Select';
-import defaultClasses from './sellerCountry.module.css';
-import { GET_SELLER_COUNTRIES_QUERY } from './sellerCountry.gql';
-import { BrowserPersistence } from '@magento/peregrine/lib/util';
-
-const storage = new BrowserPersistence();
-
-const SellerCountry = props => {
-    const talonProps = useSellerCountry({
-        queries: {
-            getSellerCountriesQuery: GET_SELLER_COUNTRIES_QUERY
-        }
-    });
-    const { countries, loading } = talonProps;
-    const {
-        classes: propClasses,
-        field,
-        label,
-        translationId,
-        ...inputProps
-    } = props;
-    const { formatMessage } = useIntl();
-
-    const classes = useStyle(defaultClasses, propClasses);
-    const websiteCode = storage.getItem('website_code') || null;
-    const currentWebsiteCountry = websiteCode && websiteCode != "base" ? websiteCode.toUpperCase() : DEFAULT_COUNTRY_CODE;
-    const selectProps = {
-        classes,
-        disabled: loading,
-        field,
-        items: countries,
-        initialValue: currentWebsiteCountry,
-        ...inputProps
-    };
-
-    return (
-        <Field
-            id={classes.root}
-            label={formatMessage({ id: translationId, defaultMessage: label })}
-            classes={{ root: classes.root }}
-        >
-            <Select {...selectProps} id={classes.root} />
-        </Field>
-    );
-};
-
-export default SellerCountry;
-
-SellerCountry.defaultProps = {
-    field: 'country',
-    label: 'Country',
-    translationId: 'country.label'
-};
-
-SellerCountry.propTypes = {
-    classes: shape({
-        root: string
-    }),
-    field: string,
-    label: string,
-    translationId: string,
-    validate: func,
-    initialValue: string
-};
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { func, shape, string } from 'prop-types';
+import { useSellerCountry } from '@riosst100/pwa-marketplace/src/talons/SellerCountry/useSellerCountry';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Field from '@magento/venia-ui/lib/components/Field';
+import Select from '@magento/venia-ui/lib/components/Select';
+import defaultClasses from './sellerCountry.module.css';
+import { GET_SELLER_COUNTRIES_QUERY } from './sellerCountry.gql';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+const SellerCountry = props => {
+    const talonProps = useSellerCountry({
+        queries: {
+            getSellerCountriesQuery: GET_SELLER_COUNTRIES_QUERY
+        }
+    });
+    const { countries, loading } = talonProps;
+    const {
+        classes: propClasses,
+        field,
+        label,
+        translationId,
+        ...inputProps
+    } = props;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const websiteCode = storage.getItem('website_code') || null;
+    const currentWebsiteCountry = websiteCode && websiteCode != "base" ? websiteCode.toUpperCase() : DEFAULT_COUNTRY_CODE;
+    const selectProps = {
+        classes,
+        disabled: loading,
+        field,
+        items: countries,
+        initialValue: currentWebsiteCountry,
+        ...inputProps
+    };
+
+    return (
+        <Field
+            id={classes.root}
+            label={formatMessage({ id: translationId, defaultMessage: label })}
+        // classes={{ root: classes.root }}
+        >
+            <Select {...selectProps} id={classes.root} />
+        </Field>
+    );
+};
+
+export default SellerCountry;
+
+SellerCountry.defaultProps = {
+    field: 'country',
+    label: 'Country',
+    translationId: 'country.label'
+};
+
+SellerCountry.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    field: string,
+    label: string,
+    translationId: string,
+    validate: func,
+    initialValue: string
+};

package/src/components/SellerCountry/sellerCountry.module.css

@@ -1,3 +1,3 @@
-.root {
-    grid-area: country;
-}
+.root {
+    grid-area: country;
+}

package/src/components/SellerDetail/sellerDetail.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } 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';
@@ -19,6 +19,9 @@ import {
     Shop,
 } from 'iconsax-react';
 import Image from '@magento/venia-ui/lib/components/Image';
+import LiveChat from '@riosst100/pwa-marketplace/src/components/LiveChat';
+import Button from '@magento/venia-ui/lib/components/Button';
+import cn from 'classnames';
 
 const SellerDetail = props => {
     const talonProps = useSeller({
@@ -29,7 +32,7 @@ const SellerDetail = props => {
 
     if (loading && !seller)
         return '';
-        // return <SellerShimmer />;
+    // return <SellerShimmer />;
     if (error && !seller) return <ErrorView />;
     if (!seller) {
         return (
@@ -49,7 +52,7 @@ const SellerDetail = props => {
             {
                 id: 'product-tab',
                 title: 'All Products',
-                content: <SellerProducts />
+                content: <SellerProducts seller={seller} />
             },
             {
                 id: 'store-information',
@@ -59,10 +62,15 @@ const SellerDetail = props => {
             {
                 id: 'reviews',
                 title: 'Reviews',
-                content: <Reviews />
+                content: <Reviews seller={seller} />
             }
         ];
 
+    const [openChat, setOpenChat] = useState(false);
+    const toggleChat = () => {
+        setOpenChat(!openChat);
+    }
+
     return (
         <div className=' py-8'>
             <Slider seller={seller} rootClassname='mb-[30px]' />
@@ -82,11 +90,11 @@ const SellerDetail = props => {
                     <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">
+                                <div className="relative w-fit mt-[-1.00px] font-medium 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} />
+                                    <Verify variant='Bold' color='#f76b1c' size={20} />
                                     <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
                                         Verified
                                     </div>
@@ -97,43 +105,51 @@ const SellerDetail = props => {
                             </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]">
+                            <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-[#f76b1c]">
                                 <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">
+                                    <Sms color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
+                                    <div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-base 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]">
+                            {/* <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">
+                                    <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-base tracking-[0] leading-[20px] whitespace-nowrap">
                                         Chat With Seller
                                     </div>
                                 </div>
+                            </button> */}
+                            <Button
+                                priority='high'
+                                classes={{
+                                    content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
+                                }}
+                                className={cn(
+                                    "bg-darkblue-900 px-6 py-2 rounded-full text-white border",
+                                    "border-darkblue-900 hover_bg-blue-900 hover_border-blue-900 focus-visible_outline-none"
+                                )}
+                                onClick={toggleChat}
+                            >
+                                <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
+                                <span>
+                                    <FormattedMessage
+                                        id={'seller.chatWithSeller'}
+                                        defaultMessage={'Chat With Seller'}
+                                    />
+                                </span>
+                            </Button>
+                            <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#f76b1c]">
+                                <Heart color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />
                             </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 class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#f76b1c]">
+                                <Share color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />
                             </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">
@@ -154,6 +170,10 @@ const SellerDetail = props => {
                 hasContent
                 tabWrapperClassName='xl_gap-x-[60px]'
             />
+            <LiveChat
+                open={openChat}
+                setOpen={setOpenChat}
+            />
         </div>
     )
 }

package/src/components/SellerInformation/sellerInformation.js

@@ -11,30 +11,31 @@ const SellerInformation = ({ seller }) => {
                 <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="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] 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]">
+                                <p class="relative mt-[-1.00px]  font-normal text-base tracking-[0] leading-[16px]">
                                     {seller ? seller.description : ''}<br />
                                     <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>
+                                <p class="relative w-fit  font-normal text-[#009a7b] text-base 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 class="relative self-stretch mt-[-1.00px]  font-normal text-[#009a7b] text-base 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="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] 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]">
+                                    <p class="relative mt-[-1.00px]  font-normal text-base tracking-[0] leading-[normal]">
                                         <OperatingHours values={seller.operating_hours} />
                                     </p>
                                 </div>
@@ -43,7 +44,7 @@ const SellerInformation = ({ seller }) => {
                     </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 class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] 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} /> : '' }
@@ -52,7 +53,7 @@ const SellerInformation = ({ seller }) => {
                 </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="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] 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 : ''}
@@ -76,8 +77,8 @@ 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 class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
+            <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-base tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
             </div>
             </>) : ''}
         </div>

package/src/components/SellerLocation/sellerLocation.js

@@ -5,10 +5,10 @@ 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="relative w-fit font-medium  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/SellerLocation/sellerLocationItem.js

@@ -7,17 +7,17 @@ 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="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-medium text-[14px] 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]">
+                    <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-base 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>
+                        <p class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-base tracking-[0] leading-[normal] whitespace-nowrap">{storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}</p>
                     </div>
                 </div>
             </div>

package/src/components/SellerProducts/sellerProducts.js

@@ -12,10 +12,10 @@ const SellerProducts = () => {
             <div className='w-full mb-[30px]'>
                 <div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
                     <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
-                        <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
+                        <span class='relative w-fit font-medium text-[14px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
                     </Link>
                     <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
-                        <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
+                        <span class='relative w-fit font-medium text-[14px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
                     </Link>
                 </div>
             </div>

package/src/components/SellerReview/sellerReview.js

@@ -2,14 +2,21 @@ 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] '>
                 <div className="w-full xs_max-w-full lg_max-w-[300px] px-[25px] py-10 rounded-md border border-gray-200 flex-col justify-start items-start gap-[25px] inline-flex">
                     <div className="justify-start items-end gap-[15px] inline-flex">
-                        <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
+                        <div className="text-center text-zinc-900 text-[40px] font-medium leading-10">4.7</div>
                         <div className="flex-col justify-start items-start gap-[9px] inline-flex">
                             <div className="justify-start items-start gap-1.5 inline-flex">
                                 <div className="w-3.5 h-3.5 relative">
@@ -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-base font-normal leading-[18px]">({reviews ? reviews.items.length : 0} Reviews)</div>
                         </div>
                     </div>
                     <div className="w-full flex-col items-start gap-2 flex">
@@ -39,15 +46,15 @@ const SellerReview = () => {
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
+                                        <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">5</div>
                                     </div>
                                 </div>
                                 <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
+                                    <div className="w-full h-[6px] absolute bg-[#f76b1c] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
+                            <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">12</div>
                         </div>
                         <div className="flex xs_w-full lg_w-fit gap-3 items-center">
                             <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
@@ -56,15 +63,15 @@ const SellerReview = () => {
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
+                                        <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">4</div>
                                     </div>
                                 </div>
                                 <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
+                                    <div className="w-[80%] h-[6px] absolute bg-[#f76b1c] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
+                            <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">8</div>
                         </div>
                         <div className="flex xs_w-full lg_w-fit gap-3 items-center">
                             <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
@@ -73,15 +80,15 @@ const SellerReview = () => {
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
+                                        <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">3</div>
                                     </div>
                                 </div>
                                 <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
+                                    <div className="w-[45%] h-[6px] absolute bg-[#f76b1c] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
+                            <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">5</div>
                         </div>
                         <div className="flex xs_w-full lg_w-fit gap-3 items-center">
                             <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
@@ -90,15 +97,15 @@ const SellerReview = () => {
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
+                                        <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">2</div>
                                     </div>
                                 </div>
                                 <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
+                                    <div className="w-[1%] h-[6px] absolute bg-[#f76b1c] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
+                            <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">1</div>
                         </div>
                         <div className="flex xs_w-full lg_w-fit gap-3 items-center">
                             <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
@@ -107,15 +114,15 @@ const SellerReview = () => {
                                         <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
                                     </div>
                                     <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
+                                        <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">1</div>
                                     </div>
                                 </div>
                                 <div className="xs_w-full lg_w-40 h-[6px] relative">
                                     <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
+                                    <div className="w-[0%] h-[6px] absolute bg-[#f76b1c] rounded" />
                                 </div>
                             </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
+                            <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">0</div>
                         </div>
                     </div>
                     <div className="xs_self-end lg_self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-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;