@riosst100/pwa-marketplace 1.2.6 → 1.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/dependabot.yml +28 -28
- package/package.json +18 -18
- package/src/componentOverrideMapping.js +2 -1
- package/src/components/Filter/index.js +7 -7
- package/src/components/OperatingHours/operatingHours.js +16 -13
- package/src/components/Pagination/index.js +26 -17
- package/src/components/Search/index.js +1 -1
- package/src/components/Seller/seller.js +17 -2
- package/src/components/SellerDetail/sellerDetail.js +92 -89
- package/src/components/SellerInformation/sellerInformation.js +28 -26
- package/src/components/SellerLocation/sellerLocation.js +3 -2
- package/src/components/SellerLocation/sellerLocationItem.js +5 -3
- package/src/components/SellerProducts/sellerProducts.js +41 -212
- package/src/components/SellerReview/sellerReview.js +29 -29
- package/src/components/SellerReviewItem/sellerReviewItem.js +8 -8
- package/src/components/SortBy/index.js +13 -5
- package/src/components/commons/Tabs/index.js +11 -9
- package/src/overwrites/venia-ui/lib/components/Header/header.js +46 -34
- package/src/components/SellerPage/core.js +0 -10
- package/src/talons/SellerProducts/useSellerProducts.js +0 -129
|
@@ -8,63 +8,60 @@ const SellerInformation = ({ seller }) => {
|
|
|
8
8
|
return (
|
|
9
9
|
<>
|
|
10
10
|
<div class="flex flex-col items-start gap-[30px] px-[10px]">
|
|
11
|
-
<div class="
|
|
12
|
-
<div class="flex flex-col
|
|
11
|
+
<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">
|
|
12
|
+
<div class="flex flex-col items-start gap-[30px] relative self-stretch">
|
|
13
13
|
<div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
|
|
14
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[
|
|
14
|
+
<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>
|
|
15
15
|
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
16
|
-
<p class="relative
|
|
17
|
-
{seller ? seller.description : ''}
|
|
18
|
-
<br />
|
|
16
|
+
<p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[16px]">
|
|
17
|
+
{seller ? seller.description : ''}<br />
|
|
19
18
|
<br />
|
|
20
19
|
{seller ? seller.contact_number : ''}
|
|
21
20
|
</p>
|
|
22
21
|
</div>
|
|
23
22
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
24
23
|
<Location color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
|
|
25
|
-
<p class="relative w-fit
|
|
24
|
+
<p class="relative w-fit font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap"><SellerAddressCard address={seller} /></p>
|
|
26
25
|
</div>
|
|
27
26
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
28
27
|
<ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
|
|
29
|
-
<div class="relative self-stretch
|
|
28
|
+
<div class="relative self-stretch mt-[-1.00px] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: {seller ? seller.creation_time : ''}</div>
|
|
30
29
|
</div>
|
|
31
30
|
</div>
|
|
32
31
|
</div>
|
|
33
|
-
<
|
|
34
|
-
<div class="flex flex-col w-[320px] items-start gap-[30px] relative">
|
|
32
|
+
<div class="flex flex-col items-start gap-[30px] relative">
|
|
35
33
|
<div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
|
|
36
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[
|
|
34
|
+
<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>
|
|
37
35
|
<div class="inline-flex flex-col items-start relative flex-[0_0_auto]">
|
|
38
36
|
<div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
|
|
39
|
-
<p class="relative
|
|
37
|
+
<p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal]">
|
|
40
38
|
<OperatingHours values={seller.operating_hours} />
|
|
41
39
|
</p>
|
|
42
40
|
</div>
|
|
43
41
|
</div>
|
|
44
42
|
</div>
|
|
45
43
|
</div>
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<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>
|
|
44
|
+
<div class="flex flex-col items-start gap-[15px] relative">
|
|
45
|
+
<div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
|
|
46
|
+
<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>
|
|
50
47
|
</div>
|
|
51
|
-
<div class="flex flex-wrap
|
|
48
|
+
<div class="flex flex-wrap items-start gap-[10px_10px] relative flex-[0_0_auto]">
|
|
52
49
|
{seller ? <SellerShipTo seller={seller} /> : '' }
|
|
53
50
|
</div>
|
|
54
51
|
</div>
|
|
55
52
|
</div>
|
|
56
53
|
<div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
|
|
57
54
|
<div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
|
|
58
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[
|
|
55
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Terms & Condition</div>
|
|
59
56
|
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
60
|
-
<div class="flex flex-col
|
|
57
|
+
<div class="flex flex-col items-start gap-[2px]">
|
|
61
58
|
{seller ? seller.term_and_conditions : ''}
|
|
62
59
|
</div>
|
|
63
60
|
</div>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
61
|
+
</div >
|
|
62
|
+
</div >
|
|
66
63
|
{seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
|
|
67
|
-
</div>
|
|
64
|
+
</div >
|
|
68
65
|
</>
|
|
69
66
|
)
|
|
70
67
|
}
|
|
@@ -73,13 +70,18 @@ const SellerShipTo = ({seller}) => {
|
|
|
73
70
|
const shipTo = seller ? seller.ship_to : '';
|
|
74
71
|
const shipToCountry = seller ? seller.ship_to_country : '';
|
|
75
72
|
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
const shipToCountryArr = shipToCountry ? shipToCountry.split(',') : '';
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<div class="flex flex-wrap items-center gap-2 px-0 py-[5px] relative flex-1 grow">
|
|
77
|
+
{shipTo && shipTo == "Domestic" ? seller.country_id : ''}
|
|
78
|
+
{shipToCountryArr && shipTo != "Domestic" ? shipToCountryArr.map((value, index) => <>
|
|
78
79
|
<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]">
|
|
79
|
-
<div class="relative w-fit mt-[-1.00px]
|
|
80
|
+
<div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
|
|
80
81
|
</div>
|
|
82
|
+
</>) : ''}
|
|
81
83
|
</div>
|
|
82
|
-
|
|
84
|
+
);
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
export default SellerInformation;
|
|
@@ -3,15 +3,16 @@ import SellerLocationItem from './sellerLocationItem';
|
|
|
3
3
|
|
|
4
4
|
const SellerLocation = ({ storeLocators }) => {
|
|
5
5
|
return (
|
|
6
|
-
<>
|
|
6
|
+
<>{storeLocators.length > 0 ? (
|
|
7
7
|
<div class="w-full flex flex-col items-start gap-[25px]">
|
|
8
8
|
<div class="relative w-fit font-semibold text-[20px] tracking-[0] leading-[normal]">Our Store</div>
|
|
9
|
-
<div class="w-full grid
|
|
9
|
+
<div class="w-full grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 gap-4">
|
|
10
10
|
{storeLocators && storeLocators.map((value, index) =>
|
|
11
11
|
<SellerLocationItem storeLocator={value} />
|
|
12
12
|
)}
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
+
) : ''}
|
|
15
16
|
</>
|
|
16
17
|
)
|
|
17
18
|
}
|
|
@@ -4,18 +4,20 @@ import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingH
|
|
|
4
4
|
import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
|
|
5
5
|
|
|
6
6
|
const SellerLocationItem = ({ storeLocator }) => {
|
|
7
|
-
return (
|
|
7
|
+
return storeLocator && (
|
|
8
8
|
<>
|
|
9
9
|
<div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
|
|
10
10
|
<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>
|
|
11
11
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
12
12
|
<Location color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
|
|
13
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]"
|
|
13
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]">
|
|
14
|
+
{storeLocator.city}, {storeLocator.country}
|
|
15
|
+
</div>
|
|
14
16
|
</div>
|
|
15
17
|
<div class="flex flex-col w-[320px] items-end relative flex-[0_0_auto] mr-[-10.00px]">
|
|
16
18
|
<div class="flex items-center gap-[10px] relative self-stretch w-full flex-[0_0_auto]">
|
|
17
19
|
<Clock color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
|
|
18
|
-
{storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}
|
|
20
|
+
<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>
|
|
19
21
|
</div>
|
|
20
22
|
</div>
|
|
21
23
|
</div>
|
|
@@ -1,218 +1,47 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
FilterModalOpenButtonShimmer
|
|
11
|
-
} from '@magento/venia-ui/lib/components/FilterModalOpenButton';
|
|
12
|
-
import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
|
|
13
|
-
import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
|
|
14
|
-
import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
|
|
15
|
-
import Pagination from '@magento/venia-ui/lib/components/Pagination';
|
|
16
|
-
import ProductSort, { ProductSortShimmer } from '@magento/venia-ui/lib/components/ProductSort';
|
|
17
|
-
import RichContent from '@magento/venia-ui/lib/components/RichContent';
|
|
18
|
-
import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
|
|
19
|
-
import SortedByContainer, {
|
|
20
|
-
SortedByContainerShimmer
|
|
21
|
-
} from '@magento/venia-ui/lib/components/SortedByContainer';
|
|
22
|
-
import defaultClasses from '@magento/venia-ui/lib/RootComponents/Category/category.module.css';
|
|
23
|
-
import NoProductsFound from '@magento/venia-ui/lib/RootComponents/Category/NoProductsFound';
|
|
24
|
-
import { useSellerProducts } from '@riosst100/pwa-marketplace/src/talons/SellerProducts/useSellerProducts';
|
|
25
|
-
|
|
26
|
-
const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
|
|
27
|
-
const FilterSidebar = React.lazy(() =>
|
|
28
|
-
import('@magento/venia-ui/lib/components/FilterSidebar')
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
const SellerProducts = props => {
|
|
32
|
-
const {
|
|
33
|
-
categoryId,
|
|
34
|
-
data,
|
|
35
|
-
isLoading,
|
|
36
|
-
pageControl,
|
|
37
|
-
sortProps,
|
|
38
|
-
pageSize
|
|
39
|
-
} = props;
|
|
40
|
-
const [currentSort] = sortProps;
|
|
41
|
-
|
|
42
|
-
const talonProps = useSellerProducts({
|
|
43
|
-
categoryId,
|
|
44
|
-
data,
|
|
45
|
-
pageSize
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
const {
|
|
49
|
-
availableSortMethods,
|
|
50
|
-
categoryName,
|
|
51
|
-
categoryDescription,
|
|
52
|
-
filters,
|
|
53
|
-
items,
|
|
54
|
-
totalCount,
|
|
55
|
-
totalPagesFromData
|
|
56
|
-
} = talonProps;
|
|
57
|
-
|
|
58
|
-
const sidebarRef = useRef(null);
|
|
59
|
-
const classes = useStyle(defaultClasses, props.classes);
|
|
60
|
-
const shouldRenderSidebarContent = useIsInViewport({
|
|
61
|
-
elementRef: sidebarRef
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
const shouldShowFilterButtons = filters && filters.length;
|
|
65
|
-
const shouldShowFilterShimmer = filters === null;
|
|
66
|
-
|
|
67
|
-
// If there are no products we can hide the sort button.
|
|
68
|
-
const shouldShowSortButtons = totalPagesFromData && availableSortMethods;
|
|
69
|
-
const shouldShowSortShimmer = !totalPagesFromData && isLoading;
|
|
70
|
-
|
|
71
|
-
const maybeFilterButtons = shouldShowFilterButtons ? (
|
|
72
|
-
<FilterModalOpenButton filters={filters} />
|
|
73
|
-
) : shouldShowFilterShimmer ? (
|
|
74
|
-
<FilterModalOpenButtonShimmer />
|
|
75
|
-
) : null;
|
|
76
|
-
|
|
77
|
-
const filtersModal = shouldShowFilterButtons ? (
|
|
78
|
-
<FilterModal filters={filters} />
|
|
79
|
-
) : null;
|
|
80
|
-
|
|
81
|
-
const sidebar = shouldShowFilterButtons ? (
|
|
82
|
-
<FilterSidebar filters={filters} />
|
|
83
|
-
) : shouldShowFilterShimmer ? (
|
|
84
|
-
<FilterSidebarShimmer />
|
|
85
|
-
) : null;
|
|
86
|
-
|
|
87
|
-
const maybeSortButton = shouldShowSortButtons ? (
|
|
88
|
-
<ProductSort
|
|
89
|
-
sortProps={sortProps}
|
|
90
|
-
availableSortMethods={availableSortMethods}
|
|
91
|
-
/>
|
|
92
|
-
) : shouldShowSortShimmer ? (
|
|
93
|
-
<ProductSortShimmer />
|
|
94
|
-
) : null;
|
|
95
|
-
|
|
96
|
-
const maybeSortContainer = shouldShowSortButtons ? (
|
|
97
|
-
<SortedByContainer currentSort={currentSort} />
|
|
98
|
-
) : shouldShowSortShimmer ? (
|
|
99
|
-
<SortedByContainerShimmer />
|
|
100
|
-
) : null;
|
|
101
|
-
|
|
102
|
-
const categoryResultsHeading =
|
|
103
|
-
totalCount > 0 ? (
|
|
104
|
-
<FormattedMessage
|
|
105
|
-
id={'categoryContent.resultCount'}
|
|
106
|
-
values={{
|
|
107
|
-
count: totalCount
|
|
108
|
-
}}
|
|
109
|
-
defaultMessage={'{count} Results'}
|
|
110
|
-
/>
|
|
111
|
-
) : isLoading ? (
|
|
112
|
-
<Shimmer width={5} />
|
|
113
|
-
) : null;
|
|
114
|
-
|
|
115
|
-
const categoryDescriptionElement = categoryDescription ? (
|
|
116
|
-
<RichContent html={categoryDescription} />
|
|
117
|
-
) : null;
|
|
118
|
-
|
|
119
|
-
const content = useMemo(() => {
|
|
120
|
-
if (!totalPagesFromData && !isLoading) {
|
|
121
|
-
return <NoProductsFound categoryId={categoryId} />;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
const gallery = totalPagesFromData ? (
|
|
125
|
-
<Gallery items={items} />
|
|
126
|
-
) : (
|
|
127
|
-
<GalleryShimmer items={items} />
|
|
128
|
-
);
|
|
129
|
-
|
|
130
|
-
const pagination = totalPagesFromData ? (
|
|
131
|
-
<Pagination pageControl={pageControl} />
|
|
132
|
-
) : null;
|
|
133
|
-
|
|
134
|
-
return (
|
|
135
|
-
<Fragment>
|
|
136
|
-
<section className={classes.gallery}>{gallery}</section>
|
|
137
|
-
<div className={classes.pagination}>{pagination}</div>
|
|
138
|
-
</Fragment>
|
|
139
|
-
);
|
|
140
|
-
}, [
|
|
141
|
-
categoryId,
|
|
142
|
-
classes.gallery,
|
|
143
|
-
classes.pagination,
|
|
144
|
-
isLoading,
|
|
145
|
-
items,
|
|
146
|
-
pageControl,
|
|
147
|
-
totalPagesFromData
|
|
148
|
-
]);
|
|
149
|
-
|
|
150
|
-
const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
|
|
151
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ProductItem from '@riosst100/pwa-marketplace/src/components/ProductItem';
|
|
3
|
+
import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
|
|
4
|
+
import Search from '@riosst100/pwa-marketplace/src/components/Search';
|
|
5
|
+
import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
|
|
6
|
+
import Pagination from '..//Pagination';
|
|
7
|
+
import { Link } from "react-router-dom";
|
|
8
|
+
|
|
9
|
+
const SellerProducts = () => {
|
|
152
10
|
return (
|
|
153
|
-
|
|
154
|
-
<
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
>
|
|
163
|
-
{categoryTitle}
|
|
164
|
-
</div>
|
|
165
|
-
</h1>
|
|
166
|
-
{categoryDescriptionElement}
|
|
11
|
+
<>
|
|
12
|
+
<div className='w-full mb-[30px]'>
|
|
13
|
+
<div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
|
|
14
|
+
<Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
|
|
15
|
+
<span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
|
|
16
|
+
</Link>
|
|
17
|
+
<Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
|
|
18
|
+
<span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
|
|
19
|
+
</Link>
|
|
167
20
|
</div>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
21
|
+
</div>
|
|
22
|
+
<div className='w-full flex items-start gap-x-[30px]'>
|
|
23
|
+
<div className='xs_hidden xl_block filter-container w-full max-w-[240px]'>
|
|
24
|
+
<Filter />
|
|
25
|
+
</div>
|
|
26
|
+
<div className='flex flex-col gap-y-[30px]'>
|
|
27
|
+
<div className='flex xs_flex-wrap gap-y-4 w-full items-center justify-between'>
|
|
28
|
+
<Search />
|
|
29
|
+
<SortBy />
|
|
30
|
+
</div>
|
|
31
|
+
<div className='product-list w-full grid xs_grid-cols-2 md_grid-cols-3 lg_grid-cols-4 gap-4'>
|
|
32
|
+
<ProductItem />
|
|
33
|
+
<ProductItem />
|
|
34
|
+
<ProductItem />
|
|
35
|
+
<ProductItem />
|
|
36
|
+
<ProductItem />
|
|
173
37
|
</div>
|
|
174
|
-
<div className=
|
|
175
|
-
<
|
|
176
|
-
<div
|
|
177
|
-
data-cy="SellerProducts-categoryInfo"
|
|
178
|
-
className={classes.categoryInfo}
|
|
179
|
-
>
|
|
180
|
-
{categoryResultsHeading}
|
|
181
|
-
</div>
|
|
182
|
-
<div className={classes.headerButtons}>
|
|
183
|
-
{maybeFilterButtons}
|
|
184
|
-
{maybeSortButton}
|
|
185
|
-
</div>
|
|
186
|
-
{maybeSortContainer}
|
|
187
|
-
</div>
|
|
188
|
-
{content}
|
|
189
|
-
<Suspense fallback={null}>{filtersModal}</Suspense>
|
|
38
|
+
<div className='pagination-container w-full flex justify-center'>
|
|
39
|
+
<Pagination />
|
|
190
40
|
</div>
|
|
191
41
|
</div>
|
|
192
|
-
</
|
|
193
|
-
|
|
194
|
-
)
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
export default SellerProducts;
|
|
42
|
+
</div>
|
|
43
|
+
</>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
198
46
|
|
|
199
|
-
|
|
200
|
-
classes: shape({
|
|
201
|
-
gallery: string,
|
|
202
|
-
pagination: string,
|
|
203
|
-
root: string,
|
|
204
|
-
categoryHeader: string,
|
|
205
|
-
title: string,
|
|
206
|
-
categoryTitle: string,
|
|
207
|
-
sidebar: string,
|
|
208
|
-
categoryContent: string,
|
|
209
|
-
heading: string,
|
|
210
|
-
categoryInfo: string,
|
|
211
|
-
headerButtons: string
|
|
212
|
-
}),
|
|
213
|
-
// sortProps contains the following structure:
|
|
214
|
-
// [{sortDirection: string, sortAttribute: string, sortText: string},
|
|
215
|
-
// React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}]
|
|
216
|
-
sortProps: array,
|
|
217
|
-
pageSize: number
|
|
218
|
-
};
|
|
47
|
+
export default SellerProducts;
|
|
@@ -6,8 +6,8 @@ import { Star1 } from 'iconsax-react';
|
|
|
6
6
|
const SellerReview = () => {
|
|
7
7
|
return (
|
|
8
8
|
<>
|
|
9
|
-
<div className='w-full flex items-start gap-[30px] '>
|
|
10
|
-
<div className="w-full
|
|
9
|
+
<div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px] '>
|
|
10
|
+
<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">
|
|
11
11
|
<div className="justify-start items-end gap-[15px] inline-flex">
|
|
12
12
|
<div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
|
|
13
13
|
<div className="flex-col justify-start items-start gap-[9px] inline-flex">
|
|
@@ -31,94 +31,94 @@ const SellerReview = () => {
|
|
|
31
31
|
<div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
|
34
|
-
<div className="flex-col items-start gap-2 flex">
|
|
35
|
-
<div className="flex gap-3 items-center">
|
|
36
|
-
<div className="gap-2.5 flex items-center">
|
|
34
|
+
<div className="w-full flex-col items-start gap-2 flex">
|
|
35
|
+
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
36
|
+
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
37
37
|
<div className="gap-[5px] flex items-center">
|
|
38
38
|
<div className="w-3.5 h-3.5 relative">
|
|
39
39
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
40
40
|
</div>
|
|
41
41
|
<div className="gap-2.5 flex">
|
|
42
|
-
<div className="text-center text-zinc-900 text-sm font-normal
|
|
42
|
+
<div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
|
|
43
43
|
</div>
|
|
44
44
|
</div>
|
|
45
|
-
<div className="
|
|
45
|
+
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
46
46
|
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
47
47
|
<div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
48
48
|
</div>
|
|
49
49
|
</div>
|
|
50
|
-
<div className="w-10 text-zinc-900 text-sm font-normal
|
|
50
|
+
<div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
|
|
51
51
|
</div>
|
|
52
|
-
<div className="flex gap-3 items-center">
|
|
53
|
-
<div className="gap-2.5 flex items-center">
|
|
52
|
+
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
53
|
+
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
54
54
|
<div className="gap-[5px] flex items-center">
|
|
55
55
|
<div className="w-3.5 h-3.5 relative">
|
|
56
56
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
57
57
|
</div>
|
|
58
58
|
<div className="gap-2.5 flex">
|
|
59
|
-
<div className="text-center text-zinc-900 text-sm font-normal
|
|
59
|
+
<div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
|
|
60
60
|
</div>
|
|
61
61
|
</div>
|
|
62
|
-
<div className="
|
|
62
|
+
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
63
63
|
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
64
64
|
<div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
65
65
|
</div>
|
|
66
66
|
</div>
|
|
67
|
-
<div className="w-10 text-zinc-900 text-sm font-normal
|
|
67
|
+
<div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
|
|
68
68
|
</div>
|
|
69
|
-
<div className="flex gap-3 items-center">
|
|
70
|
-
<div className="gap-2.5 flex items-center">
|
|
69
|
+
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
70
|
+
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
71
71
|
<div className="gap-[5px] flex items-center">
|
|
72
72
|
<div className="w-3.5 h-3.5 relative">
|
|
73
73
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
74
74
|
</div>
|
|
75
75
|
<div className="gap-2.5 flex">
|
|
76
|
-
<div className="text-center text-zinc-900 text-sm font-normal
|
|
76
|
+
<div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
|
|
77
77
|
</div>
|
|
78
78
|
</div>
|
|
79
|
-
<div className="
|
|
79
|
+
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
80
80
|
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
81
81
|
<div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
82
82
|
</div>
|
|
83
83
|
</div>
|
|
84
|
-
<div className="w-10 text-zinc-900 text-sm font-normal
|
|
84
|
+
<div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
|
|
85
85
|
</div>
|
|
86
|
-
<div className="flex gap-3 items-center">
|
|
87
|
-
<div className="gap-2.5 flex items-center">
|
|
86
|
+
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
87
|
+
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
88
88
|
<div className="gap-[5px] flex items-center">
|
|
89
89
|
<div className="w-3.5 h-3.5 relative">
|
|
90
90
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
91
91
|
</div>
|
|
92
92
|
<div className="gap-2.5 flex">
|
|
93
|
-
<div className="text-center text-zinc-900 text-sm font-normal
|
|
93
|
+
<div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
|
|
94
94
|
</div>
|
|
95
95
|
</div>
|
|
96
|
-
<div className="
|
|
96
|
+
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
97
97
|
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
98
98
|
<div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
99
99
|
</div>
|
|
100
100
|
</div>
|
|
101
|
-
<div className="w-10 text-zinc-900 text-sm font-normal
|
|
101
|
+
<div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
|
|
102
102
|
</div>
|
|
103
|
-
<div className="flex gap-3 items-center">
|
|
104
|
-
<div className="gap-2.5 flex items-center">
|
|
103
|
+
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
104
|
+
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
105
105
|
<div className="gap-[5px] flex items-center">
|
|
106
106
|
<div className="w-3.5 h-3.5 relative">
|
|
107
107
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
108
108
|
</div>
|
|
109
109
|
<div className="gap-2.5 flex">
|
|
110
|
-
<div className="text-center text-zinc-900 text-sm font-normal
|
|
110
|
+
<div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
|
|
111
111
|
</div>
|
|
112
112
|
</div>
|
|
113
|
-
<div className="
|
|
113
|
+
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
114
114
|
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
115
115
|
<div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
116
116
|
</div>
|
|
117
117
|
</div>
|
|
118
|
-
<div className="w-10 text-zinc-900 text-sm font-normal
|
|
118
|
+
<div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
|
|
119
119
|
</div>
|
|
120
120
|
</div>
|
|
121
|
-
<div className="
|
|
121
|
+
<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">
|
|
122
122
|
<div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
|
|
123
123
|
</div>
|
|
124
124
|
</div>
|
|
@@ -9,16 +9,16 @@ const SellerReviewItem = () => {
|
|
|
9
9
|
<div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
|
|
10
10
|
<div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
|
|
11
11
|
<div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
|
|
12
|
-
<div class="relative w-fit
|
|
12
|
+
<div class="relative w-fit font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
|
|
13
13
|
</div>
|
|
14
14
|
<div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
|
|
15
|
-
<div class="relative w-fit mt-[-1.00px]
|
|
16
|
-
<div class="relative w-fit
|
|
15
|
+
<div class="relative w-fit mt-[-1.00px] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">John Doe</div>
|
|
16
|
+
<div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">18 January 2024</div>
|
|
17
17
|
</div>
|
|
18
18
|
</div>
|
|
19
|
-
<div class="
|
|
19
|
+
<div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
|
|
20
20
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
21
|
-
<div class="relative w-fit
|
|
21
|
+
<div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
|
|
22
22
|
<div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
|
|
23
23
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
24
24
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
@@ -28,7 +28,7 @@ const SellerReviewItem = () => {
|
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
|
30
30
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
31
|
-
<div class="relative w-[37px]
|
|
31
|
+
<div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
|
|
32
32
|
<div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
|
|
33
33
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
34
34
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
@@ -38,7 +38,7 @@ const SellerReviewItem = () => {
|
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
40
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
41
|
-
<div class="relative w-fit
|
|
41
|
+
<div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
|
|
42
42
|
<div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
|
|
43
43
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
44
44
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
@@ -49,7 +49,7 @@ const SellerReviewItem = () => {
|
|
|
49
49
|
</div>
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
|
-
<p class="relative self-stretch
|
|
52
|
+
<p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
|
|
53
53
|
Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
|
|
54
54
|
</p>
|
|
55
55
|
</div>
|