@riosst100/pwa-marketplace 1.2.6 → 1.2.7

package/src/components/SellerInformation/sellerInformation.js

@@ -1,85 +1,91 @@
-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="flex items-start justify-between relative flex-1 self-stretch w-full grow">
-                    <div class="flex flex-col w-[320px] 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-[#1b1b1b] 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 w-[300px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] 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-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: {seller ? seller.creation_time : ''}</div>
-                            </div>
-                        </div>
-                    </div>
-                    <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
-                    <div class="flex flex-col w-[320px] 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-[#1b1b1b] 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 w-[186px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
-                                        <OperatingHours values={seller.operating_hours} />
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
-                    <div class="flex flex-col w-[320px] items-start gap-[15px] relative">
-                        <div class="inline-flex items-start gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
-                            <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]">
-                            {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-[#1b1b1b] 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 w-[500px] 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 : '';
-
-    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>
-    </>
-}
-
+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 >
+        </>
+    )
+}
+
 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,19 +1,20 @@
-import React from 'react';
-import SellerLocationItem from './sellerLocationItem';
-
-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">
-                    {storeLocators && storeLocators.map((value, index) =>
-                        <SellerLocationItem storeLocator={value} />
-                    )}
-                </div>
-            </div>
-        </>
-    )
-}
-
+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>
+        </>
+    )
+}
+
 export default SellerLocation;

package/src/components/SellerLocation/sellerLocationItem.js

@@ -1,26 +1,28 @@
-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 (
-        <>
-            <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]"><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]' />
-                        {storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
+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>
+        </>
+    )
+}
+
 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;

package/src/components/SellerProducts/sellerProducts.js

@@ -1,218 +1,47 @@
-import React, { Fragment, Suspense, useMemo, useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { array, number, shape, string } from 'prop-types';
-
-import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
-import FilterModalOpenButton, {
-    FilterModalOpenButtonShimmer
-} from '@magento/venia-ui/lib/components/FilterModalOpenButton';
-import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
-import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
-import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
-import Pagination from '@magento/venia-ui/lib/components/Pagination';
-import ProductSort, { ProductSortShimmer } from '@magento/venia-ui/lib/components/ProductSort';
-import RichContent from '@magento/venia-ui/lib/components/RichContent';
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-import SortedByContainer, {
-    SortedByContainerShimmer
-} from '@magento/venia-ui/lib/components/SortedByContainer';
-import defaultClasses from '@magento/venia-ui/lib/RootComponents/Category/category.module.css';
-import NoProductsFound from '@magento/venia-ui/lib/RootComponents/Category/NoProductsFound';
-import { useSellerProducts } from '@riosst100/pwa-marketplace/src/talons/SellerProducts/useSellerProducts';
-
-const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
-const FilterSidebar = React.lazy(() =>
-    import('@magento/venia-ui/lib/components/FilterSidebar')
-);
-
-const SellerProducts = props => {
-    const {
-        categoryId,
-        data,
-        isLoading,
-        pageControl,
-        sortProps,
-        pageSize
-    } = props;
-    const [currentSort] = sortProps;
-
-    const talonProps = useSellerProducts({
-        categoryId,
-        data,
-        pageSize
-    });
-
-    const {
-        availableSortMethods,
-        categoryName,
-        categoryDescription,
-        filters,
-        items,
-        totalCount,
-        totalPagesFromData
-    } = talonProps;
-
-    const sidebarRef = useRef(null);
-    const classes = useStyle(defaultClasses, props.classes);
-    const shouldRenderSidebarContent = useIsInViewport({
-        elementRef: sidebarRef
-    });
-
-    const shouldShowFilterButtons = filters && filters.length;
-    const shouldShowFilterShimmer = filters === null;
-
-    // If there are no products we can hide the sort button.
-    const shouldShowSortButtons = totalPagesFromData && availableSortMethods;
-    const shouldShowSortShimmer = !totalPagesFromData && isLoading;
-
-    const maybeFilterButtons = shouldShowFilterButtons ? (
-        <FilterModalOpenButton filters={filters} />
-    ) : shouldShowFilterShimmer ? (
-        <FilterModalOpenButtonShimmer />
-    ) : null;
-
-    const filtersModal = shouldShowFilterButtons ? (
-        <FilterModal filters={filters} />
-    ) : null;
-
-    const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar filters={filters} />
-    ) : shouldShowFilterShimmer ? (
-        <FilterSidebarShimmer />
-    ) : null;
-
-    const maybeSortButton = shouldShowSortButtons ? (
-        <ProductSort
-            sortProps={sortProps}
-            availableSortMethods={availableSortMethods}
-        />
-    ) : shouldShowSortShimmer ? (
-        <ProductSortShimmer />
-    ) : null;
-
-    const maybeSortContainer = shouldShowSortButtons ? (
-        <SortedByContainer currentSort={currentSort} />
-    ) : shouldShowSortShimmer ? (
-        <SortedByContainerShimmer />
-    ) : null;
-
-    const categoryResultsHeading =
-        totalCount > 0 ? (
-            <FormattedMessage
-                id={'categoryContent.resultCount'}
-                values={{
-                    count: totalCount
-                }}
-                defaultMessage={'{count} Results'}
-            />
-        ) : isLoading ? (
-            <Shimmer width={5} />
-        ) : null;
-
-    const categoryDescriptionElement = categoryDescription ? (
-        <RichContent html={categoryDescription} />
-    ) : null;
-
-    const content = useMemo(() => {
-        if (!totalPagesFromData && !isLoading) {
-            return <NoProductsFound categoryId={categoryId} />;
-        }
-
-        const gallery = totalPagesFromData ? (
-            <Gallery items={items} />
-        ) : (
-            <GalleryShimmer items={items} />
-        );
-
-        const pagination = totalPagesFromData ? (
-            <Pagination pageControl={pageControl} />
-        ) : null;
-
-        return (
-            <Fragment>
-                <section className={classes.gallery}>{gallery}</section>
-                <div className={classes.pagination}>{pagination}</div>
-            </Fragment>
-        );
-    }, [
-        categoryId,
-        classes.gallery,
-        classes.pagination,
-        isLoading,
-        items,
-        pageControl,
-        totalPagesFromData
-    ]);
-
-    const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
-
-    return (
-        <Fragment>
-            <Breadcrumbs categoryId={categoryId} />
-            <StoreTitle>{categoryName}</StoreTitle>
-            <article className={classes.root} data-cy="SellerProducts-root">
-                <div className={classes.categoryHeader}>
-                    <h1 aria-live="polite" className={classes.title}>
-                        <div
-                            className={classes.categoryTitle}
-                            data-cy="SellerProducts-categoryTitle"
-                        >
-                            {categoryTitle}
-                        </div>
-                    </h1>
-                    {categoryDescriptionElement}
-                </div>
-                <div className={classes.contentWrapper}>
-                    <div ref={sidebarRef} className={classes.sidebar}>
-                        <Suspense fallback={<FilterSidebarShimmer />}>
-                            {shouldRenderSidebarContent ? sidebar : null}
-                        </Suspense>
-                    </div>
-                    <div className={classes.categoryContent}>
-                        <div className={classes.heading}>
-                            <div
-                                data-cy="SellerProducts-categoryInfo"
-                                className={classes.categoryInfo}
-                            >
-                                {categoryResultsHeading}
-                            </div>
-                            <div className={classes.headerButtons}>
-                                {maybeFilterButtons}
-                                {maybeSortButton}
-                            </div>
-                            {maybeSortContainer}
-                        </div>
-                        {content}
-                        <Suspense fallback={null}>{filtersModal}</Suspense>
-                    </div>
-                </div>
-            </article>
-        </Fragment>
-    );
-};
-
-export default SellerProducts;
-
-SellerProducts.propTypes = {
-    classes: shape({
-        gallery: string,
-        pagination: string,
-        root: string,
-        categoryHeader: string,
-        title: string,
-        categoryTitle: string,
-        sidebar: string,
-        categoryContent: string,
-        heading: string,
-        categoryInfo: string,
-        headerButtons: string
-    }),
-    // sortProps contains the following structure:
-    // [{sortDirection: string, sortAttribute: string, sortText: string},
-    // React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}]
-    sortProps: array,
-    pageSize: number
-};
+import React from 'react';
+import ProductItem from '@riosst100/pwa-marketplace/src/components/ProductItem';
+import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
+import Search from '@riosst100/pwa-marketplace/src/components/Search';
+import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
+import Pagination from '..//Pagination';
+import { Link } from "react-router-dom";
+
+const SellerProducts = () => {
+    return (
+        <>
+            <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>
+                    </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>
+                    </Link>
+                </div>
+            </div>
+            <div className='w-full flex items-start gap-x-[30px]'>
+                <div className='xs_hidden xl_block filter-container w-full max-w-[240px]'>
+                    <Filter />
+                </div>
+                <div className='flex flex-col gap-y-[30px]'>
+                    <div className='flex xs_flex-wrap gap-y-4 w-full items-center justify-between'>
+                        <Search />
+                        <SortBy />
+                    </div>
+                    <div className='product-list w-full grid xs_grid-cols-2 md_grid-cols-3 lg_grid-cols-4 gap-4'>
+                        <ProductItem />
+                        <ProductItem />
+                        <ProductItem />
+                        <ProductItem />
+                        <ProductItem />
+                    </div>
+                    <div className='pagination-container w-full flex justify-center'>
+                        <Pagination />
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default SellerProducts;

package/src/components/SellerReview/index.js

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