@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
package/i18n/en_US.json
CHANGED
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
"global.name": "Name",
|
|
251
251
|
"global.newPassword": "New Password",
|
|
252
252
|
"global.password": "Password",
|
|
253
|
-
"global.phoneNumber": "
|
|
253
|
+
"global.phoneNumber": "Phone Number",
|
|
254
254
|
"global.private": "Private",
|
|
255
255
|
"global.public": "Public",
|
|
256
256
|
"global.quantity": "Quantity",
|
|
@@ -330,7 +330,7 @@
|
|
|
330
330
|
"pagination.lastPage": "move to the last page",
|
|
331
331
|
"pagination.nextPage": "move to the next page",
|
|
332
332
|
"pagination.prevPage": "move to the previous page",
|
|
333
|
-
"postcode.label": "Postal Code",
|
|
333
|
+
"postcode.label": "ZIP/Postal Code",
|
|
334
334
|
"priceAdjustments.couponCode": "Enter Coupon Code",
|
|
335
335
|
"priceAdjustments.giftOptions": "See Gift Options",
|
|
336
336
|
"priceAdjustments.shippingMethod": "Estimate your Shipping",
|
|
@@ -366,6 +366,8 @@
|
|
|
366
366
|
"productFullDetail.details": "Details",
|
|
367
367
|
"productFullDetail.unavailableProduct": "This product is currently unavailable for purchase.",
|
|
368
368
|
"productFullDetail.outOfStockProduct": "This item is currently out of stock",
|
|
369
|
+
"productFullDetail.addToCartSuccess": "Product successfully added to cart!",
|
|
370
|
+
"productFullDetail.addToCartError": "Failed to add product to cart.",
|
|
369
371
|
"productImageCarousel.previousButtonAriaLabel": "Previous Image",
|
|
370
372
|
"productImageCarousel.nextButtonAriaLabel": "Next Image",
|
|
371
373
|
"productList.each": " ea.",
|
package/i18n/id_ID.json
CHANGED
|
@@ -367,6 +367,8 @@
|
|
|
367
367
|
"productFullDetail.details": "Details",
|
|
368
368
|
"productFullDetail.unavailableProduct": "This product is currently unavailable for purchase.",
|
|
369
369
|
"productFullDetail.outOfStockProduct": "This item is currently out of stock",
|
|
370
|
+
"productFullDetail.addToCartSuccess": "Produk berhasil ditambahkan ke keranjang!",
|
|
371
|
+
"productFullDetail.addToCartError": "Gagal menambahkan produk ke keranjang.",
|
|
370
372
|
"productImageCarousel.previousButtonAriaLabel": "Previous Image",
|
|
371
373
|
"productImageCarousel.nextButtonAriaLabel": "Next Image",
|
|
372
374
|
"productList.each": " ea.",
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useRef } from 'react';
|
|
2
|
-
import { element, func, shape, string } from 'prop-types';
|
|
2
|
+
import { element, func, shape, string, bool } from 'prop-types';
|
|
3
3
|
import { Heart } from 'react-feather';
|
|
4
4
|
import { useAddToFavoriteListButton } from '@riosst100/pwa-marketplace/src/talons/FavoriteSeller/AddToListButton/useAddToFavoriteListButton';
|
|
5
5
|
import { useButton } from 'react-aria';
|
|
@@ -33,6 +33,7 @@ const AddToFavoriteListButton = props => {
|
|
|
33
33
|
return (
|
|
34
34
|
<button ref={buttonRef} className={buttonClass} {...ariaButtonProps}>
|
|
35
35
|
{props.icon}
|
|
36
|
+
{buttonText && <span className={`text-[#f76b1c] text-[14px] font-medium whitespace-nowrap ${props.hideTextOnMobile ? 'md_block xs_hidden' : ''}`}>{buttonText}</span>}
|
|
36
37
|
</button>
|
|
37
38
|
);
|
|
38
39
|
};
|
|
@@ -50,5 +51,6 @@ AddToFavoriteListButton.propTypes = {
|
|
|
50
51
|
root: string,
|
|
51
52
|
root_selected: string
|
|
52
53
|
}),
|
|
53
|
-
icon: element
|
|
54
|
+
icon: element,
|
|
55
|
+
hideTextOnMobile: bool
|
|
54
56
|
};
|
|
@@ -46,7 +46,7 @@ const LinkToOtherStores = (props) => {
|
|
|
46
46
|
if (store.product_link) {
|
|
47
47
|
const logo = getLogo(store.stores);
|
|
48
48
|
finalLinkToOtherStores.push(
|
|
49
|
-
<a href={store.product_link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center' target="_blank">
|
|
49
|
+
<a href={store.product_link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center w-full justify-center' target="_blank">
|
|
50
50
|
{logo ? <img
|
|
51
51
|
alt={store.stores}
|
|
52
52
|
width={60}
|
|
@@ -61,10 +61,10 @@ const LinkToOtherStores = (props) => {
|
|
|
61
61
|
|
|
62
62
|
return finalLinkToOtherStores && finalLinkToOtherStores.length ? <>
|
|
63
63
|
<section className='product_from-other-platform py-xs'>
|
|
64
|
-
<div className='title-section text-gray-400 text-sm flex mb-3
|
|
64
|
+
<div className='title-section text-gray-400 text-sm flex mb-3 px-[15px]'>
|
|
65
65
|
Also available in
|
|
66
66
|
</div>
|
|
67
|
-
<div className='content-section platform-container flex gap-x-2.5 pl-[1rem]'>
|
|
67
|
+
<div className='content-section platform-container flex gap-x-2.5 pl-[1rem] px-[15px] justify-between'>
|
|
68
68
|
{finalLinkToOtherStores}
|
|
69
69
|
</div>
|
|
70
70
|
</section>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Location, Clock } from 'iconsax-react';
|
|
3
|
+
import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
|
|
4
|
+
|
|
5
|
+
const StoreLocationCard = ({ store }) => {
|
|
6
|
+
if (!store) {
|
|
7
|
+
return null;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const { name, address_line_1, region, country, operating_hours } = store;
|
|
11
|
+
|
|
12
|
+
const address = [address_line_1, region, country].filter(Boolean).join(', ');
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<div className="border border-[#E6E9EA] rounded-lg p-4 flex flex-col gap-2">
|
|
16
|
+
<h3 className="font-bold text-base">{name}</h3>
|
|
17
|
+
<div className="flex items-start gap-2">
|
|
18
|
+
<Location size="18" color="#666" />
|
|
19
|
+
<span className="text-sm text-gray-600">{address}</span>
|
|
20
|
+
</div>
|
|
21
|
+
<div className="flex flex-row gap-1">
|
|
22
|
+
<Clock size="18" color="#666" />
|
|
23
|
+
<OperatingHours values={operating_hours} simple={true} />
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export default StoreLocationCard;
|
|
@@ -19,9 +19,9 @@ import {
|
|
|
19
19
|
Shop,
|
|
20
20
|
} from 'iconsax-react';
|
|
21
21
|
import Image from '@magento/venia-ui/lib/components/Image';
|
|
22
|
-
import LiveChat from '@riosst100/pwa-marketplace/src/components/LiveChat';
|
|
23
22
|
import Button from '@magento/venia-ui/lib/components/Button';
|
|
24
23
|
import cn from 'classnames';
|
|
24
|
+
import Rating from '@riosst100/pwa-marketplace/src/components/commons/Rating';
|
|
25
25
|
const FavoriteSellerButton = React.lazy(() => import('@riosst100/pwa-marketplace/src/components/FavoriteSeller/AddToListButton'));
|
|
26
26
|
|
|
27
27
|
const SellerDetail = props => {
|
|
@@ -30,7 +30,6 @@ const SellerDetail = props => {
|
|
|
30
30
|
});
|
|
31
31
|
|
|
32
32
|
const { error, loading, seller, favoriteSellerButtonProps } = talonProps;
|
|
33
|
-
|
|
34
33
|
if (loading && !seller)
|
|
35
34
|
return '';
|
|
36
35
|
// return <SellerShimmer />;
|
|
@@ -48,6 +47,22 @@ const SellerDetail = props => {
|
|
|
48
47
|
);
|
|
49
48
|
}
|
|
50
49
|
|
|
50
|
+
const dummyRating = {
|
|
51
|
+
rating_summary: {
|
|
52
|
+
average_rating_percent: 70,
|
|
53
|
+
positive_percentage: 80,
|
|
54
|
+
rating_count: 2
|
|
55
|
+
},
|
|
56
|
+
followers_count: 12
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
// Use the real data if available, otherwise fallback to dummy data
|
|
60
|
+
const sellerData = {
|
|
61
|
+
...seller,
|
|
62
|
+
rating_summary: seller.rating_summary || dummyRating.rating_summary,
|
|
63
|
+
followers_count: seller.followers_count || dummyRating.followers_count
|
|
64
|
+
};
|
|
65
|
+
|
|
51
66
|
const dataTabs =
|
|
52
67
|
[
|
|
53
68
|
{
|
|
@@ -96,7 +111,8 @@ const SellerDetail = props => {
|
|
|
96
111
|
return (
|
|
97
112
|
<div className=' py-8'>
|
|
98
113
|
<Slider seller={seller} rootClassname='mb-[30px]' />
|
|
99
|
-
<div className='flex xs_flex-col
|
|
114
|
+
<div className='flex xs_flex-col lg_flex-row justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-gray-100 shadow-[0px_0px_5px_3px_#d9d9d933]'>
|
|
115
|
+
{/* Left: logo + info */}
|
|
100
116
|
<div className='flex xs_flex-col md_flex-row xs_items-center md_items-start items-start gap-[15px] relative'>
|
|
101
117
|
{seller?.thumbnail ? (
|
|
102
118
|
<Image
|
|
@@ -110,87 +126,56 @@ const SellerDetail = props => {
|
|
|
110
126
|
</div>
|
|
111
127
|
)}
|
|
112
128
|
|
|
113
|
-
<div className='flex flex-col xs_items-center md_items-start justify-between relative gap-y-[
|
|
129
|
+
<div className='flex flex-col xs_items-center md_items-start justify-between relative gap-y-[10px]'>
|
|
114
130
|
<div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
|
|
115
131
|
<div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
|
|
116
|
-
<div className="relative w-fit mt-[-1.00px] font-medium text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
|
|
132
|
+
<div className="relative w-fit mt-[-1.00px] font-medium text-[20px] tracking-[0] leading-[24px] whitespace-nowrap text-center md_text-left">
|
|
117
133
|
{seller ? seller.name : ''}
|
|
118
134
|
</div>
|
|
119
|
-
<div className="flex items-center gap-[5px] relative">
|
|
120
|
-
<Verify variant='Bold' color='#f76b1c' size={20} />
|
|
121
|
-
<div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
122
|
-
Verified
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
125
135
|
</div>
|
|
126
|
-
<div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
|
|
127
|
-
{seller ? getSellerAddressDisplay(seller) : ''}
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
<div className='flex flex-wrap items-start gap-4 relative'>
|
|
131
|
-
<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]">
|
|
132
|
-
<div class="flex items-center justify-center gap-[10px] relative">
|
|
133
|
-
<Sms color="#f76b1c" size={14} variant="Outline" className='stroke-[#f76b1c]' />
|
|
134
|
-
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-base tracking-[0] leading-[20px] whitespace-nowrap">
|
|
135
|
-
Message
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
</button>
|
|
139
|
-
<Button
|
|
140
|
-
priority='high'
|
|
141
|
-
classes={{
|
|
142
|
-
content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
|
|
143
|
-
}}
|
|
144
|
-
className='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]'
|
|
145
|
-
onClick={toggleChat}
|
|
146
|
-
>
|
|
147
|
-
<Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
|
|
148
|
-
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-base tracking-[0] leading-[20px] whitespace-nowrap">
|
|
149
|
-
<FormattedMessage
|
|
150
|
-
id={'seller.chatWithSeller'}
|
|
151
|
-
defaultMessage={'Chat With Seller'}
|
|
152
|
-
/>
|
|
153
|
-
</div>
|
|
154
|
-
</Button>
|
|
155
|
-
<Suspense fallback={null}>
|
|
156
|
-
<FavoriteSellerButton
|
|
157
|
-
classes={{
|
|
158
|
-
root: 'flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#f76b1c]'
|
|
159
|
-
}}
|
|
160
|
-
{...favoriteSellerButtonProps}
|
|
161
|
-
buttonText={''}
|
|
162
|
-
/>
|
|
163
|
-
</Suspense>
|
|
164
|
-
<button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#f76b1c]">
|
|
165
|
-
<Share color='#f76b1c' size={14} variant="Outline" className='stroke-[#f76b1c]' />
|
|
166
|
-
</button>
|
|
167
136
|
</div>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
0.0
|
|
137
|
+
|
|
138
|
+
{/* Rating summary and followers */}
|
|
139
|
+
<div className='flex flex-col gap-[4px]'>
|
|
140
|
+
<div className='flex items-center gap-[6px] flex-wrap justify-center md_justify-start'>
|
|
141
|
+
<Rating percentage={sellerData.rating_summary.average_rating_percent} />
|
|
142
|
+
<span className='text-[12px] text-[#1a1a1a] text-center md_text-left'>
|
|
143
|
+
<b>{sellerData.rating_summary.positive_percentage}% positive</b> in last 12 month ({sellerData.rating_summary.rating_count} Ratings)
|
|
144
|
+
</span>
|
|
177
145
|
</div>
|
|
178
|
-
|
|
179
|
-
<div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
180
|
-
Rating & Reviews
|
|
146
|
+
<div className='text-[12px] text-[#666] text-center md_text-left'>{sellerData.followers_count} Followers</div>
|
|
181
147
|
</div>
|
|
182
148
|
</div>
|
|
183
149
|
</div>
|
|
150
|
+
|
|
151
|
+
{/* Right: action buttons */}
|
|
152
|
+
<div className='flex xs_flex-wrap items-center xs_justify-center lg_justify-end gap-[10px] xs_mt-4 lg_mt-0 xs_pt-2 lg_pt-0 relative'>
|
|
153
|
+
<button className='flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'>
|
|
154
|
+
<Sms color="#f76b1c" size={16} variant='Outline' className='stroke-[#f76b1c]' />
|
|
155
|
+
<span className='text-[#f76b1c] text-[14px] font-medium whitespace-nowrap md_block xs_hidden'>Send Message</span>
|
|
156
|
+
</button>
|
|
157
|
+
<Suspense fallback={null}>
|
|
158
|
+
<FavoriteSellerButton
|
|
159
|
+
classes={{
|
|
160
|
+
root: 'flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'
|
|
161
|
+
}}
|
|
162
|
+
{...favoriteSellerButtonProps}
|
|
163
|
+
buttonText={'Follow Seller'}
|
|
164
|
+
hideTextOnMobile={true}
|
|
165
|
+
/>
|
|
166
|
+
</Suspense>
|
|
167
|
+
<button className='flex items-center justify-center gap-[8px] px-[14px] py-[8px] bg-white rounded-[30px] border border-solid border-[#f76b1c] min-w-[44px]'>
|
|
168
|
+
<Share color='#f76b1c' size={16} variant='Outline' className='stroke-[#f76b1c]' />
|
|
169
|
+
<span className='text-[#f76b1c] text-[14px] font-medium whitespace-nowrap md_block xs_hidden'>Share</span>
|
|
170
|
+
</button>
|
|
171
|
+
</div>
|
|
184
172
|
</div>
|
|
185
173
|
<Tabs
|
|
186
174
|
data={dataTabs}
|
|
187
175
|
tabContentWrapperClassName='!p-0'
|
|
188
176
|
hasContent
|
|
189
177
|
tabWrapperClassName='xl_gap-x-[60px]'
|
|
190
|
-
|
|
191
|
-
<LiveChat
|
|
192
|
-
open={openChat}
|
|
193
|
-
setOpen={setOpenChat}
|
|
178
|
+
tabActiveClassName='!border-[#FF6E26] !border-b-[3px]'
|
|
194
179
|
/>
|
|
195
180
|
</div>
|
|
196
181
|
)
|
|
@@ -4,30 +4,28 @@ import { Location, ShopAdd } from 'iconsax-react';
|
|
|
4
4
|
import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
|
|
5
5
|
import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
|
|
6
6
|
import SellerSocialMedia from '@riosst100/pwa-marketplace/src/components/SellerSocialMedia';
|
|
7
|
+
import StoreLocationCard from '@riosst100/pwa-marketplace/src/components/Seller/StoreLocationCard';
|
|
7
8
|
|
|
8
9
|
const SellerInformation = ({ seller }) => {
|
|
9
10
|
return (
|
|
10
11
|
<>
|
|
11
12
|
<div class="flex flex-col items-start gap-[30px] px-[10px]">
|
|
12
|
-
<div class="grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-
|
|
13
|
-
<div class="flex flex-col items-start gap-[30px] relative self-stretch">
|
|
13
|
+
<div class="grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-2 relative w-full grow xs_gap-y-6 md_gap-x-14 xl_gap-x-14">
|
|
14
|
+
<div class="flex flex-col items-start gap-[30px] relative self-stretch xs_border-r-0 md_border-r-solid md_border-r xl_border-r-solid xl_border-r border-[#E6E9EA] xs_pr-0 md_pr-7 xl_pr-7 xs_pb-6 md_pb-0">
|
|
14
15
|
<div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
|
|
15
16
|
<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>
|
|
16
17
|
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
17
18
|
<p class="relative mt-[-1.00px] font-normal text-base tracking-[0] leading-[16px]">
|
|
18
|
-
{seller ? seller.description : ''}
|
|
19
|
-
<br />
|
|
20
|
-
<br />
|
|
21
|
-
{seller ? seller.contact_number : ''}
|
|
19
|
+
{seller ? seller.description : ''}
|
|
22
20
|
</p>
|
|
23
21
|
</div>
|
|
24
22
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
25
|
-
<Location color="#
|
|
26
|
-
<p class="relative w-fit font-normal text-[#
|
|
23
|
+
<Location color="#f76b1c" size={18} variant="Outline" className='stroke-[#f76b1c] stroke-[0.5px]' />
|
|
24
|
+
<p class="relative w-fit font-normal text-[#f76b1c] text-base tracking-[0] leading-[normal] whitespace-nowrap"><SellerAddressCard address={seller} /></p>
|
|
27
25
|
</div>
|
|
28
26
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
29
|
-
<ShopAdd color="#
|
|
30
|
-
<div class="relative self-stretch mt-[-1.00px] font-normal text-[#
|
|
27
|
+
<ShopAdd color="#f76b1c" size={18} variant="Outline" className='stroke-[#f76b1c] stroke-[0.5px]' />
|
|
28
|
+
<div class="relative self-stretch mt-[-1.00px] font-normal text-[#f76b1c] text-base tracking-[0] leading-[normal]">Joined: {seller ? seller.creation_time : ''}</div>
|
|
31
29
|
</div>
|
|
32
30
|
</div>
|
|
33
31
|
</div>
|
|
@@ -43,27 +41,35 @@ const SellerInformation = ({ seller }) => {
|
|
|
43
41
|
</div>
|
|
44
42
|
</div>
|
|
45
43
|
</div>
|
|
46
|
-
<div class="flex flex-col items-start gap-[15px] relative">
|
|
47
|
-
<div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
|
|
48
|
-
<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>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="flex flex-wrap items-start gap-[10px_10px] relative flex-[0_0_auto]">
|
|
51
|
-
{seller ? <SellerShipTo seller={seller} /> : '' }
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
44
|
</div>
|
|
55
45
|
<div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
|
|
56
46
|
<div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
|
|
57
47
|
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Terms & Condition</div>
|
|
58
48
|
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
59
|
-
<div class="flex flex-col items-start gap-[
|
|
60
|
-
{seller
|
|
49
|
+
<div class="flex flex-col items-start gap-[10px]">
|
|
50
|
+
{seller && seller.term_and_conditions
|
|
51
|
+
? seller.term_and_conditions.split('\n').map((item, index) => (
|
|
52
|
+
<p key={index} className="relative font-normal text-base tracking-[0] leading-normal">
|
|
53
|
+
- {item}
|
|
54
|
+
</p>
|
|
55
|
+
))
|
|
56
|
+
: ''}
|
|
61
57
|
</div>
|
|
62
58
|
</div>
|
|
63
59
|
</div>
|
|
64
60
|
</div>
|
|
65
|
-
|
|
66
|
-
|
|
61
|
+
{seller && seller.store_locators && seller.store_locators.length > 0 && (
|
|
62
|
+
<div className="flex flex-col items-start gap-[15px] self-stretch w-full">
|
|
63
|
+
<h2 className="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
64
|
+
Our Store
|
|
65
|
+
</h2>
|
|
66
|
+
<div className="grid xs_grid-cols-1 md_grid-cols-2 lg_grid-cols-3 gap-4 self-stretch w-full">
|
|
67
|
+
{seller.store_locators.map((store, index) => (
|
|
68
|
+
<StoreLocationCard key={index} store={store} />
|
|
69
|
+
))}
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
)}
|
|
67
73
|
</div>
|
|
68
74
|
</>
|
|
69
75
|
)
|
|
@@ -30,6 +30,12 @@ const SellerMegaMenu = (props) => {
|
|
|
30
30
|
handleNavigate,
|
|
31
31
|
handleClickOutside
|
|
32
32
|
} = useSellerMegaMenu({ mainNavRef });
|
|
33
|
+
|
|
34
|
+
const allowedCategoryUids = props.allowedCategoryUids || ['NTI=', 'NTA=', 'NTM=', 'MjY='];
|
|
35
|
+
|
|
36
|
+
const filteredChildren = Array.isArray(megaMenuData?.children)
|
|
37
|
+
? megaMenuData.children.filter(c => allowedCategoryUids.includes(c.uid))
|
|
38
|
+
: [];
|
|
33
39
|
|
|
34
40
|
const [mainNavWidth, setMainNavWidth] = useState(0);
|
|
35
41
|
const shouldRenderItems = useIsInViewport({
|
|
@@ -54,28 +60,27 @@ const SellerMegaMenu = (props) => {
|
|
|
54
60
|
};
|
|
55
61
|
}, [setMainNavWidth]);
|
|
56
62
|
|
|
57
|
-
const items =
|
|
58
|
-
?
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
sellerSubMenuState={sellerSubMenuState}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
63
|
+
const items = filteredChildren.length
|
|
64
|
+
? filteredChildren.map(category => {
|
|
65
|
+
return (
|
|
66
|
+
<SellerMegaMenuItem
|
|
67
|
+
category={category}
|
|
68
|
+
activeCategoryId={activeCategoryId}
|
|
69
|
+
categoryUrlSuffix={categoryUrlSuffix}
|
|
70
|
+
mainNavWidth={mainNavWidth}
|
|
71
|
+
onNavigate={handleNavigate}
|
|
72
|
+
key={category.uid}
|
|
73
|
+
seller={seller}
|
|
74
|
+
// sellerSubMenuState={sellerSubMenuState}
|
|
75
|
+
disableFocus={disableFocus}
|
|
76
|
+
handleSellerSubMenuFocus={handleSellerSubMenuFocus}
|
|
77
|
+
handleClickOutside={handleClickOutside}
|
|
78
|
+
sellerMegaMenuItemClassname={sellerMegaMenuItemClassname}
|
|
79
|
+
titleClassName={titleClassName}
|
|
80
|
+
/>
|
|
81
|
+
);
|
|
82
|
+
})
|
|
83
|
+
: null;
|
|
79
84
|
return (
|
|
80
85
|
<nav
|
|
81
86
|
ref={mainNavRef}
|
|
@@ -4,7 +4,7 @@ import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
|
|
|
4
4
|
import Search from '@riosst100/pwa-marketplace/src/components/Search';
|
|
5
5
|
import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
|
|
6
6
|
import { useStyle } from '@magento/venia-ui/lib/classify';
|
|
7
|
-
import { Link } from "react-router-dom";
|
|
7
|
+
import { Link, Route } from "react-router-dom";
|
|
8
8
|
import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
|
|
9
9
|
import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
|
|
10
10
|
import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css';
|
|
@@ -40,6 +40,7 @@ const FilterTop = React.lazy(() =>
|
|
|
40
40
|
import('@riosst100/pwa-marketplace/src/components/FilterTop')
|
|
41
41
|
);
|
|
42
42
|
|
|
43
|
+
|
|
43
44
|
const ProductContent = props => {
|
|
44
45
|
const {
|
|
45
46
|
categoryId,
|
|
@@ -49,9 +50,8 @@ const ProductContent = props => {
|
|
|
49
50
|
sortProps,
|
|
50
51
|
seller,
|
|
51
52
|
isLoading,
|
|
52
|
-
pageSize
|
|
53
|
+
pageSize,
|
|
53
54
|
} = props;
|
|
54
|
-
|
|
55
55
|
const [currentSort] = sortProps;
|
|
56
56
|
|
|
57
57
|
const [activeTab, setActiveTab] = useState('all');
|
|
@@ -60,6 +60,7 @@ const ProductContent = props => {
|
|
|
60
60
|
const classes = useStyle(defaultClasses, props.classes);
|
|
61
61
|
|
|
62
62
|
const sidebarRef = useRef(null);
|
|
63
|
+
const searchRef = useRef(null);
|
|
63
64
|
|
|
64
65
|
const shouldRenderSidebarContent = useIsInViewport({
|
|
65
66
|
elementRef: sidebarRef
|
|
@@ -80,7 +81,7 @@ const ProductContent = props => {
|
|
|
80
81
|
categoryName,
|
|
81
82
|
totalPagesFromData
|
|
82
83
|
} = talonProps;
|
|
83
|
-
|
|
84
|
+
|
|
84
85
|
const shouldShowFilterButtons = filters && filters.length;
|
|
85
86
|
const shouldShowFilterShimmer = filters === null;
|
|
86
87
|
|
|
@@ -208,7 +209,7 @@ const ProductContent = props => {
|
|
|
208
209
|
totalPagesFromData,
|
|
209
210
|
activeLetter
|
|
210
211
|
]);
|
|
211
|
-
|
|
212
|
+
|
|
212
213
|
const { search } = useLocation();
|
|
213
214
|
const allActiveFilters = getFiltersFromSearch(search);
|
|
214
215
|
|
|
@@ -249,7 +250,7 @@ const ProductContent = props => {
|
|
|
249
250
|
<>
|
|
250
251
|
<div className='w-full mb-[30px]'>
|
|
251
252
|
<SellerMegaMenu
|
|
252
|
-
rootClassName={cn('nav-menu w-full max-w-[
|
|
253
|
+
rootClassName={cn('nav-menu w-full max-w-[1300px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
|
|
253
254
|
sellerMegaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
|
|
254
255
|
seller={seller}
|
|
255
256
|
titleClassName={cn('font-normal leading-[20px]')}
|