@riosst100/pwa-marketplace 2.7.7 → 2.7.9
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/i18n/en_US.json +4 -2
- package/i18n/id_ID.json +2 -0
- package/package.json +1 -1
- package/src/components/FavoriteSeller/AddToListButton/addToListButton.js +4 -2
- package/src/components/LinkToOtherStores/index.js +3 -3
- package/src/components/Seller/StoreLocationCard.js +29 -0
- package/src/components/SellerDetail/sellerDetail.js +53 -68
- package/src/components/SellerInformation/sellerInformation.js +28 -22
- package/src/components/SellerMegaMenu/sellerMegaMenu.js +27 -22
- package/src/components/SellerProducts/productContent.js +7 -6
- package/src/components/SellerReview/sellerReview.js +161 -123
- package/src/components/commons/Rating/index.js +34 -0
- package/src/overwrites/venia-ui/lib/components/AccountMenu/accountMenu.js +1 -1
- package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css +2 -2
- package/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.module.css +6 -0
- package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.js +1 -1
- package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/productListingBySeller.js +12 -4
- package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/productListingBySeller.module.css +18 -0
- package/src/overwrites/venia-ui/lib/components/Header/header.js +4 -4
- package/src/overwrites/venia-ui/lib/components/Header/header.module.css +173 -0
- package/src/overwrites/venia-ui/lib/components/Main/main.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js +1 -1
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js +117 -70
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css +37 -0
- package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.module.css +2 -1
- package/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton.js +4 -1
|
@@ -4,149 +4,187 @@ import Pagination from '../Pagination';
|
|
|
4
4
|
import { Star1 } from 'iconsax-react';
|
|
5
5
|
import { useSellerReview } from '@riosst100/pwa-marketplace/src/talons/SellerReview/useSellerReview';
|
|
6
6
|
|
|
7
|
+
// Dummy reviews data
|
|
8
|
+
const dummyReviews = {
|
|
9
|
+
__typename: 'SellerRates',
|
|
10
|
+
total_count: 2,
|
|
11
|
+
items: [
|
|
12
|
+
{
|
|
13
|
+
__typename: 'SellerRate',
|
|
14
|
+
id: 1,
|
|
15
|
+
name: 'John Doe',
|
|
16
|
+
date: '18 January 2024',
|
|
17
|
+
rating: 5,
|
|
18
|
+
comment: 'Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.'
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
__typename: 'SellerRate',
|
|
22
|
+
id: 2,
|
|
23
|
+
name: 'Roger Taylor',
|
|
24
|
+
date: '25 January 2024',
|
|
25
|
+
rating: 2,
|
|
26
|
+
comment: 'Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.'
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
page_info: {
|
|
30
|
+
__typename: 'SearchResultPageInfo',
|
|
31
|
+
total_pages: 1,
|
|
32
|
+
page_size: 10,
|
|
33
|
+
current_page: 1,
|
|
34
|
+
total_count: 2
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
7
38
|
const SellerReview = ({ seller }) => {
|
|
8
|
-
const talonProps = useSellerReview({
|
|
9
|
-
|
|
10
|
-
});
|
|
39
|
+
// const talonProps = useSellerReview({
|
|
40
|
+
// sellerUrl: seller.url_key
|
|
41
|
+
// });
|
|
42
|
+
// const { reviews, loading } = talonProps;
|
|
43
|
+
|
|
44
|
+
const reviews = dummyReviews;
|
|
45
|
+
|
|
46
|
+
// count stars
|
|
47
|
+
const getStarCounts = () => {
|
|
48
|
+
const counts = { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 };
|
|
49
|
+
if (reviews && reviews.items) {
|
|
50
|
+
reviews.items.forEach(item => {
|
|
51
|
+
if (counts[item.rating] !== undefined) {
|
|
52
|
+
counts[item.rating]++;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
return counts;
|
|
57
|
+
};
|
|
11
58
|
|
|
12
|
-
const
|
|
59
|
+
const starCounts = getStarCounts();
|
|
13
60
|
|
|
14
61
|
return (
|
|
15
62
|
<>
|
|
16
|
-
<div className='w-full
|
|
17
|
-
<div
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
63
|
+
<div className='w-full'>
|
|
64
|
+
<div>
|
|
65
|
+
<h2 className="text-xl font-bold mb-4">Buyer Reviews</h2>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px]'>
|
|
69
|
+
<div className="w-full xs_max-w-full lg_max-w-[365px] border border-[#E6E9EA] rounded-md p-6">
|
|
70
|
+
<div className="flex justify-between items-start mb-1">
|
|
71
|
+
{/* Left - Star rating */}
|
|
72
|
+
<div className="flex flex-col">
|
|
73
|
+
<div className="flex items-center gap-1 mb-1">
|
|
74
|
+
{[...Array(5)].map((_, i) => (
|
|
75
|
+
<div key={i} className="w-4 h-4">
|
|
76
|
+
<Star1
|
|
77
|
+
color={i < 4 ? '#F7C317' : '#D9D9D9'}
|
|
78
|
+
size={16}
|
|
79
|
+
className={i < 4 ? 'fill-[#F7C317]' : ''}
|
|
80
|
+
/>
|
|
81
|
+
</div>
|
|
82
|
+
))}
|
|
83
|
+
<span className="ml-1 font-medium text-sm">4.5 out of 5</span>
|
|
36
84
|
</div>
|
|
85
|
+
<div className="text-xs text-gray-600">100% Positive Rating (2 Ratings)</div>
|
|
37
86
|
</div>
|
|
38
|
-
<div
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<div className="gap-[5px] flex items-center">
|
|
45
|
-
<div className="w-3.5 h-3.5 relative">
|
|
46
|
-
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
47
|
-
</div>
|
|
48
|
-
<div className="gap-2.5 flex">
|
|
49
|
-
<div className="text-center text-zinc-900 text-base font-normal leading-[18px]">5</div>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
53
|
-
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
54
|
-
<div className="w-full h-[6px] absolute bg-[#f76b1c] rounded" />
|
|
55
|
-
</div>
|
|
87
|
+
<div>
|
|
88
|
+
<select className="border border-[#E6E9EA] rounded px-2 py-1 text-xs">
|
|
89
|
+
<option>12 month</option>
|
|
90
|
+
<option>6 month</option>
|
|
91
|
+
<option>3 month</option>
|
|
92
|
+
</select>
|
|
56
93
|
</div>
|
|
57
|
-
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">12</div>
|
|
58
94
|
</div>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
95
|
+
|
|
96
|
+
{/* Rating Bars */}
|
|
97
|
+
<div className="mt-4">
|
|
98
|
+
{[5, 4, 3, 2, 1].map(star => {
|
|
99
|
+
const count = starCounts[star] || 0;
|
|
100
|
+
const percentage = reviews.total_count ? Math.round((count / reviews.total_count) * 100) : 0;
|
|
101
|
+
|
|
102
|
+
return (
|
|
103
|
+
<div key={star} className="flex items-center mb-2">
|
|
104
|
+
{/* Star number */}
|
|
105
|
+
<div className="flex items-center mr-2">
|
|
106
|
+
<Star1 color="#F7C317" size={14} className="fill-[#F7C317]" />
|
|
107
|
+
<span className="text-sm ml-1">{star}</span>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
{/* Progress bar */}
|
|
111
|
+
<div className="relative h-[8px] flex-1 bg-[#E4EBF5] rounded-sm mr-2">
|
|
112
|
+
<div
|
|
113
|
+
className="absolute h-[8px] bg-[#FF7A00] rounded-sm"
|
|
114
|
+
style={{width: `${percentage}%`}}
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
{/* Percentage */}
|
|
119
|
+
<span className="text-sm text-right">{percentage}%</span>
|
|
67
120
|
</div>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
71
|
-
<div className="w-[80%] h-[6px] absolute bg-[#f76b1c] rounded" />
|
|
72
|
-
</div>
|
|
73
|
-
</div>
|
|
74
|
-
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">8</div>
|
|
121
|
+
);
|
|
122
|
+
})}
|
|
75
123
|
</div>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
</
|
|
90
|
-
</
|
|
91
|
-
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">5</div>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
{/* Right Column - Reviews */}
|
|
127
|
+
<div className="flex-1">
|
|
128
|
+
{/* Filter */}
|
|
129
|
+
<div className="flex items-center mb-6">
|
|
130
|
+
<span className="font-medium mr-3">Filter By</span>
|
|
131
|
+
<select className="border border-[#E6E9EA] rounded px-3 py-2 text-sm">
|
|
132
|
+
<option>All Stars</option>
|
|
133
|
+
<option>5 Stars</option>
|
|
134
|
+
<option>4 Stars</option>
|
|
135
|
+
<option>3 Stars</option>
|
|
136
|
+
<option>2 Stars</option>
|
|
137
|
+
<option>1 Stars</option>
|
|
138
|
+
</select>
|
|
92
139
|
</div>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
140
|
+
|
|
141
|
+
{/* Reviews List */}
|
|
142
|
+
<div className="space-y-4 mb-6">
|
|
143
|
+
{reviews && reviews.items && reviews.items.map((review, index) => (
|
|
144
|
+
<div key={index} className="border border-[#E6E9EA] rounded-md p-4">
|
|
145
|
+
<div className="flex items-center mb-2">
|
|
146
|
+
<div className="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold mr-3">
|
|
147
|
+
Pict
|
|
148
|
+
</div>
|
|
149
|
+
<div>
|
|
150
|
+
<div className="font-medium">{review.name}</div>
|
|
151
|
+
<div className="text-gray-500 text-sm">{review.date}</div>
|
|
152
|
+
</div>
|
|
98
153
|
</div>
|
|
99
|
-
|
|
100
|
-
|
|
154
|
+
|
|
155
|
+
{/* Star Rating */}
|
|
156
|
+
<div className="flex mb-3">
|
|
157
|
+
{[...Array(5)].map((_, i) => (
|
|
158
|
+
<Star1
|
|
159
|
+
key={i}
|
|
160
|
+
color={i < review.rating ? '#F7C317' : '#D9D9D9'}
|
|
161
|
+
size={16}
|
|
162
|
+
className={i < review.rating ? 'fill-[#F7C317]' : ''}
|
|
163
|
+
/>
|
|
164
|
+
))}
|
|
101
165
|
</div>
|
|
166
|
+
|
|
167
|
+
{/* Review Text */}
|
|
168
|
+
<p className="text-gray-700">{review.comment}</p>
|
|
102
169
|
</div>
|
|
103
|
-
|
|
104
|
-
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
105
|
-
<div className="w-[1%] h-[6px] absolute bg-[#f76b1c] rounded" />
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">1</div>
|
|
170
|
+
))}
|
|
109
171
|
</div>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
121
|
-
<div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
|
|
122
|
-
<div className="w-[0%] h-[6px] absolute bg-[#f76b1c] rounded" />
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
125
|
-
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">0</div>
|
|
172
|
+
|
|
173
|
+
{/* Pagination */}
|
|
174
|
+
<div className="flex justify-center">
|
|
175
|
+
{reviews && reviews.page_info && reviews.page_info.total_pages > 0 && (
|
|
176
|
+
<Pagination
|
|
177
|
+
currentPage={reviews.page_info.current_page}
|
|
178
|
+
totalPages={reviews.page_info.total_pages}
|
|
179
|
+
pageSize={reviews.page_info.page_size}
|
|
180
|
+
/>
|
|
181
|
+
)}
|
|
126
182
|
</div>
|
|
127
183
|
</div>
|
|
128
|
-
<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">
|
|
129
|
-
<div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
<div className='flex flex-col w-full'>
|
|
133
|
-
<div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
|
|
134
|
-
<SellerReviews reviews={reviews} />
|
|
135
|
-
</div>
|
|
136
|
-
<div className='pagination-container w-full flex justify-center'>
|
|
137
|
-
{reviews && reviews.page_info ? <Pagination
|
|
138
|
-
currentPage={reviews.page_info.current_page}
|
|
139
|
-
totalPages={reviews.page_info.total_pages}
|
|
140
|
-
pageSize={reviews.page_info.page_size} /> : ''}
|
|
141
|
-
</div>
|
|
142
184
|
</div>
|
|
143
185
|
</div>
|
|
144
186
|
</>
|
|
145
|
-
)
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
const SellerReviews = ({ reviews }) => {
|
|
149
|
-
return reviews && reviews.items.length ? reviews.items.map((review, index) => <SellerReviewItem review={review} key={index} /> ) : ''
|
|
150
|
-
}
|
|
187
|
+
);
|
|
188
|
+
};
|
|
151
189
|
|
|
152
190
|
export default SellerReview;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Star1 } from 'iconsax-react';
|
|
3
|
+
|
|
4
|
+
const Rating = ({ percentage = 0, starSize = 16 }) => {
|
|
5
|
+
const totalStars = 5;
|
|
6
|
+
const filledStars = Math.round((percentage / 100) * totalStars);
|
|
7
|
+
|
|
8
|
+
const stars = [];
|
|
9
|
+
for (let i = 0; i < totalStars; i++) {
|
|
10
|
+
if (i < filledStars) {
|
|
11
|
+
stars.push(
|
|
12
|
+
<Star1
|
|
13
|
+
key={`star-filled-${i}`}
|
|
14
|
+
color="#F7C317"
|
|
15
|
+
size={starSize}
|
|
16
|
+
className="fill-[#F7C317]"
|
|
17
|
+
/>
|
|
18
|
+
);
|
|
19
|
+
} else {
|
|
20
|
+
stars.push(
|
|
21
|
+
<Star1
|
|
22
|
+
key={`star-empty-${i}`}
|
|
23
|
+
color="#D9D9D9"
|
|
24
|
+
size={starSize}
|
|
25
|
+
className="fill-[#D9D9D9]"
|
|
26
|
+
/>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return <div className="flex items-center">{stars}</div>;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export default Rating;
|
|
@@ -87,7 +87,7 @@ const AccountMenu = React.forwardRef((props, ref) => {
|
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
return (
|
|
90
|
-
<aside className={cn(rootClass, '!top-[57px] max-w-[
|
|
90
|
+
<aside className={cn(rootClass, '!top-[57px] max-w-[1300px]')} data-cy="AccountMenu-root">
|
|
91
91
|
<div ref={ref} className={contentsClass}>
|
|
92
92
|
{accountMenuIsOpen ? dropdownContents : null}
|
|
93
93
|
</div>
|
|
@@ -139,7 +139,7 @@ const Product = props => {
|
|
|
139
139
|
</div>
|
|
140
140
|
<div className="flex flex-col">
|
|
141
141
|
|
|
142
|
-
<span className={cn(classes.price, 'text-[16px] font-medium text-right mb-5')} data-cy="Product-price">
|
|
142
|
+
<span className={cn(classes.price, 'text-[16px] font-medium text-right mb-5 text-blue-600')} data-cy="Product-price">
|
|
143
143
|
<Price currencyCode={currency} value={unitPrice} />
|
|
144
144
|
{/* <FormattedMessage
|
|
145
145
|
id={'product.price'}
|
|
@@ -78,11 +78,10 @@ const ProductListingBySeller = props => {
|
|
|
78
78
|
wishlistConfig={wishlistConfig}
|
|
79
79
|
/>
|
|
80
80
|
));
|
|
81
|
-
|
|
81
|
+
|
|
82
82
|
const priceSummary = hasItems ? (
|
|
83
83
|
<PriceSummary isUpdating={isCartUpdating} sellerUrl={seller.seller_url} />
|
|
84
84
|
) : null;
|
|
85
|
-
|
|
86
85
|
return (
|
|
87
86
|
<Fragment>
|
|
88
87
|
<ErrorMessage error={error} />
|
|
@@ -97,10 +96,19 @@ const ProductListingBySeller = props => {
|
|
|
97
96
|
"display": "flex",
|
|
98
97
|
"gap": "7px"
|
|
99
98
|
}}>
|
|
100
|
-
|
|
101
|
-
{seller?.seller_name}<span style={{"paddingTop": "3px"}}><ArrowRight2 size="18" color="#999999" /></span></span></Link>
|
|
99
|
+
{seller?.seller_name}</span></Link>
|
|
102
100
|
</div>
|
|
103
101
|
{productComponents}
|
|
102
|
+
<div className={classes.subtotalContainer}>
|
|
103
|
+
<div className={classes.subtotalLabel}>Subtotal:</div>
|
|
104
|
+
<div className={classes.subtotalAmount}>
|
|
105
|
+
{seller.seller_currency || 'SGD'} {items.reduce((total, item) => {
|
|
106
|
+
const itemPrice = item?.prices?.price?.value || 0;
|
|
107
|
+
const quantity = item?.quantity || 0;
|
|
108
|
+
return total + (itemPrice * quantity);
|
|
109
|
+
}, 0).toFixed(2)}
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
104
112
|
<div className={classes.summary_container}>
|
|
105
113
|
<div className={classes.summary_contents}>
|
|
106
114
|
{priceSummary}
|
|
@@ -30,4 +30,22 @@
|
|
|
30
30
|
border-radius: 5px;
|
|
31
31
|
/* outline: none; */
|
|
32
32
|
cursor: pointer;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.subtotalContainer {
|
|
36
|
+
display: flex;
|
|
37
|
+
justify-content: flex-end;
|
|
38
|
+
padding: 15px;
|
|
39
|
+
border-bottom: 2px solid #f1f1f1;
|
|
40
|
+
gap: 5rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.subtotalLabel {
|
|
44
|
+
font-weight: 500;
|
|
45
|
+
font-size: 16px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.subtotalAmount {
|
|
49
|
+
font-weight: 600;
|
|
50
|
+
font-size: 16px;
|
|
33
51
|
}
|
|
@@ -12,7 +12,7 @@ import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
|
|
|
12
12
|
import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
|
|
13
13
|
|
|
14
14
|
import { useStyle } from '@magento/venia-ui/lib/classify';
|
|
15
|
-
import defaultClasses from '
|
|
15
|
+
import defaultClasses from './header.module.css';
|
|
16
16
|
import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
|
|
17
17
|
import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
|
|
18
18
|
// import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
|
|
@@ -76,7 +76,7 @@ const Header = props => {
|
|
|
76
76
|
<Fragment>
|
|
77
77
|
<PageLoadingIndicator absolute />
|
|
78
78
|
<div className={cn(classes.switchersContainer, '!bg-white border-b border-gray-100')}>
|
|
79
|
-
<div className={cn(classes.switchers, 'flex flex-row gap-x-[25px] !py-2')} data-cy="Header-switchers">
|
|
79
|
+
<div className={cn(classes.switchers, 'max-w-[1300px] flex flex-row gap-x-[25px] !py-2')} data-cy="Header-switchers">
|
|
80
80
|
<BecomeSellerLink />
|
|
81
81
|
<WebsiteSwitcher />
|
|
82
82
|
<StoreSwitcher />
|
|
@@ -85,7 +85,7 @@ const Header = props => {
|
|
|
85
85
|
</div>
|
|
86
86
|
<header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
|
|
87
87
|
<div className={cn('middle-header border-b border-gray-100')}>
|
|
88
|
-
<div className={cn('w-full max-w-[
|
|
88
|
+
<div className={cn('w-full max-w-[1300px] px-[15px] py-[10px] mx-[auto] flex justify-between items-center')}>
|
|
89
89
|
<div className='flex items-center'>
|
|
90
90
|
<NavTrigger />
|
|
91
91
|
|
|
@@ -138,7 +138,7 @@ const Header = props => {
|
|
|
138
138
|
</div>
|
|
139
139
|
</div>
|
|
140
140
|
<MegaMenu
|
|
141
|
-
rootClassName={cn('nav-menu w-full max-w-[
|
|
141
|
+
rootClassName={cn('nav-menu w-full max-w-[1300px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
|
|
142
142
|
megaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
|
|
143
143
|
titleClassName={cn('font-normal leading-[20px]')}
|
|
144
144
|
/>
|