@riosst100/pwa-marketplace 1.2.3 → 1.2.4
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/package.json +1 -1
- package/src/components/Seller/index.js +1 -0
- package/src/components/Seller/seller.js +159 -0
- package/src/components/SellerInformation/sellerInformation.js +6 -21
- package/src/components/SellerPage/sellerPage.js +2 -112
- package/src/components/commons/Slider/index.js +2 -2
- package/src/talons/Seller/seller.gql.js +139 -0
- package/src/talons/Seller/useSeller.js +66 -0
- package/src/util/mapSeller.js +7 -0
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './seller';
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import React, { Fragment } from 'react';
|
|
2
|
+
import { FormattedMessage } from 'react-intl';
|
|
3
|
+
import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
|
|
4
|
+
import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
|
|
5
|
+
import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
|
|
6
|
+
import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
|
|
7
|
+
import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
|
|
8
|
+
import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
|
|
9
|
+
import SellerProducts from '../SellerProducts';
|
|
10
|
+
import SellerInformation from '../SellerInformation';
|
|
11
|
+
import Reviews from '../SellerReview';
|
|
12
|
+
import {
|
|
13
|
+
Verify,
|
|
14
|
+
Sms,
|
|
15
|
+
Message,
|
|
16
|
+
Heart,
|
|
17
|
+
Share,
|
|
18
|
+
BoxTick,
|
|
19
|
+
Star1,
|
|
20
|
+
} from 'iconsax-react';
|
|
21
|
+
|
|
22
|
+
const Seller = props => {
|
|
23
|
+
const talonProps = useSeller({
|
|
24
|
+
mapSeller
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
const { error, loading, seller } = talonProps;
|
|
28
|
+
|
|
29
|
+
if (loading && !seller)
|
|
30
|
+
return '';
|
|
31
|
+
// return <SellerShimmer />;
|
|
32
|
+
if (error && !seller) return <ErrorView />;
|
|
33
|
+
if (!seller) {
|
|
34
|
+
return (
|
|
35
|
+
<h1>
|
|
36
|
+
<FormattedMessage
|
|
37
|
+
id={'seller.notFound'}
|
|
38
|
+
defaultMessage={
|
|
39
|
+
'Seller Not Found.'
|
|
40
|
+
}
|
|
41
|
+
/>
|
|
42
|
+
</h1>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<Fragment>
|
|
48
|
+
<StoreTitle>{seller.name}</StoreTitle>
|
|
49
|
+
<Meta name="description" content={seller.description} />
|
|
50
|
+
<SellerDetail seller={seller} />
|
|
51
|
+
</Fragment>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const SellerDetail = ({ seller }) => {
|
|
56
|
+
const dataTabs =
|
|
57
|
+
[
|
|
58
|
+
{
|
|
59
|
+
id: 'product-tab',
|
|
60
|
+
title: 'All Products',
|
|
61
|
+
content: <SellerProducts />
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
id: 'store-information',
|
|
65
|
+
title: 'Store Information',
|
|
66
|
+
content: <SellerInformation seller={seller} />
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
id: 'reviews',
|
|
70
|
+
title: 'Reviews',
|
|
71
|
+
content: <Reviews />
|
|
72
|
+
}
|
|
73
|
+
];
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<div className='py-8'>
|
|
77
|
+
<Slider seller={seller} rootClassname='mb-[30px]' />
|
|
78
|
+
<div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
|
|
79
|
+
<div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
|
|
80
|
+
<img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src={seller ? seller.thumbnail : ''} />
|
|
81
|
+
<div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
|
|
82
|
+
<div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
|
|
83
|
+
<div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
|
|
84
|
+
<div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
|
|
85
|
+
{seller ? seller.name : ''}
|
|
86
|
+
</div>
|
|
87
|
+
<div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
|
|
88
|
+
<Verify variant='Bold' color='#4E31DB' size={20} />
|
|
89
|
+
<div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
90
|
+
Verified
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
|
|
95
|
+
Jurong west
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
<div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
|
|
99
|
+
<div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
|
|
100
|
+
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
101
|
+
<Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
102
|
+
<div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
103
|
+
Message
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
|
|
108
|
+
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
109
|
+
<Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
|
|
110
|
+
<div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
111
|
+
Chat With Seller
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
|
|
116
|
+
<Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
117
|
+
</div>
|
|
118
|
+
<div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
|
|
119
|
+
<Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
|
|
125
|
+
<div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
|
|
126
|
+
<div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
|
|
127
|
+
<BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
|
|
128
|
+
<div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
|
|
129
|
+
121
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
133
|
+
Total Sales
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
<img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
|
|
137
|
+
<div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
|
|
138
|
+
<div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
|
|
139
|
+
<Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
|
|
140
|
+
<div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
141
|
+
4.7
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
145
|
+
Rating & Reviews
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
<Tabs
|
|
151
|
+
data={dataTabs}
|
|
152
|
+
tabContentWrapperClassName='!p-0'
|
|
153
|
+
hasContent
|
|
154
|
+
/>
|
|
155
|
+
</div>
|
|
156
|
+
)
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
export default Seller;
|
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import SellerLocation from '../SellerLocation';
|
|
3
3
|
import { Location, ShopAdd } from 'iconsax-react';
|
|
4
4
|
|
|
5
|
-
const SellerInformation = () => {
|
|
5
|
+
const SellerInformation = ({ seller }) => {
|
|
6
|
+
console.log(seller.operating_hours)
|
|
6
7
|
return (
|
|
7
8
|
<>
|
|
8
9
|
<div class="flex flex-col items-start gap-[30px] px-[10px]">
|
|
@@ -12,9 +13,10 @@ const SellerInformation = () => {
|
|
|
12
13
|
<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>
|
|
13
14
|
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
14
15
|
<p class="relative w-[300px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[16px]">
|
|
15
|
-
|
|
16
|
+
{seller ? seller.description : ''}
|
|
16
17
|
<br />
|
|
17
|
-
|
|
18
|
+
<br />
|
|
19
|
+
{seller ? seller.contact_number : ''}
|
|
18
20
|
</p>
|
|
19
21
|
</div>
|
|
20
22
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
@@ -78,24 +80,7 @@ const SellerInformation = () => {
|
|
|
78
80
|
<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 & Condition</div>
|
|
79
81
|
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
80
82
|
<div class="flex flex-col w-[500px] items-start gap-[2px]">
|
|
81
|
-
|
|
82
|
-
<span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Delivery is made on the same day the order is received<br /></span>
|
|
83
|
-
</p>
|
|
84
|
-
<p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
|
|
85
|
-
<span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"><br /></span>
|
|
86
|
-
</p>
|
|
87
|
-
<p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
|
|
88
|
-
<span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Maximum until 5 PM<br /></span>
|
|
89
|
-
</p>
|
|
90
|
-
<p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
|
|
91
|
-
<span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"><br /></span>
|
|
92
|
-
</p>
|
|
93
|
-
<p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
|
|
94
|
-
<span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Orders received after 17.00 WIB will be delivered the next day<br /></span>
|
|
95
|
-
</p>
|
|
96
|
-
<p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
|
|
97
|
-
<span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"></span>
|
|
98
|
-
</p>
|
|
83
|
+
{seller ? seller.term_and_conditions : ''}
|
|
99
84
|
</div>
|
|
100
85
|
</div>
|
|
101
86
|
</div>
|
|
@@ -1,119 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
3
|
-
import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
|
|
4
|
-
import SellerProducts from '../SellerProducts';
|
|
5
|
-
import SellerInformation from '../SellerInformation';
|
|
6
|
-
import Reviews from '../SellerReview';
|
|
7
|
-
import {
|
|
8
|
-
Verify,
|
|
9
|
-
Sms,
|
|
10
|
-
Message,
|
|
11
|
-
Heart,
|
|
12
|
-
Share,
|
|
13
|
-
BoxTick,
|
|
14
|
-
Star1,
|
|
15
|
-
} from 'iconsax-react';
|
|
2
|
+
import Seller from '@riosst100/pwa-marketplace/src/components/Seller/seller';
|
|
16
3
|
|
|
17
4
|
const SellerPage = () => {
|
|
18
|
-
const dataTabs =
|
|
19
|
-
[
|
|
20
|
-
{
|
|
21
|
-
id: 'product-tab',
|
|
22
|
-
title: 'All Products',
|
|
23
|
-
content: <SellerProducts />
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
id: 'store-information',
|
|
27
|
-
title: 'Store Information',
|
|
28
|
-
content: <SellerInformation />
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
id: 'reviews',
|
|
32
|
-
title: 'Reviews',
|
|
33
|
-
content: <Reviews />
|
|
34
|
-
}
|
|
35
|
-
];
|
|
36
5
|
return (
|
|
37
|
-
<
|
|
38
|
-
<Slider rootClassname='mb-[30px]' />
|
|
39
|
-
<div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
|
|
40
|
-
<div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
|
|
41
|
-
<img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src="https://c.animaapp.com/2pP7niVX/img/rectangle-81@2x.png" />
|
|
42
|
-
<div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
|
|
43
|
-
<div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
|
|
44
|
-
<div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
|
|
45
|
-
<div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
|
|
46
|
-
Zen Market
|
|
47
|
-
</div>
|
|
48
|
-
<div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
|
|
49
|
-
<Verify variant='Bold' color='#4E31DB' size={20} />
|
|
50
|
-
<div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
51
|
-
Verified
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
<div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
|
|
56
|
-
Jurong west
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
<div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
|
|
60
|
-
<div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
|
|
61
|
-
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
62
|
-
<Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
63
|
-
<div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
64
|
-
Message
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
<div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
|
|
69
|
-
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
70
|
-
<Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
|
|
71
|
-
<div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
72
|
-
Chat With Seller
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
<div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
|
|
77
|
-
<Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
78
|
-
</div>
|
|
79
|
-
<div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
|
|
80
|
-
<Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
<div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
|
|
86
|
-
<div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
|
|
87
|
-
<div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
|
|
88
|
-
<BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
|
|
89
|
-
<div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
|
|
90
|
-
121
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
<div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
94
|
-
Total Sales
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
<img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
|
|
98
|
-
<div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
|
|
99
|
-
<div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
|
|
100
|
-
<Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
|
|
101
|
-
<div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
102
|
-
4.7
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
<div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
|
|
106
|
-
Rating & Reviews
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
<Tabs
|
|
112
|
-
data={dataTabs}
|
|
113
|
-
tabContentWrapperClassName='!p-0'
|
|
114
|
-
hasContent
|
|
115
|
-
/>
|
|
116
|
-
</div>
|
|
6
|
+
<Seller />
|
|
117
7
|
)
|
|
118
8
|
}
|
|
119
9
|
|
|
@@ -2,11 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import cx from 'classnames';
|
|
3
3
|
|
|
4
4
|
const Slider = (props) => {
|
|
5
|
-
const { rootClassname = '' } = props
|
|
5
|
+
const { rootClassname = '', seller } = props
|
|
6
6
|
const rootClass = cx('slider-container', rootClassname)
|
|
7
7
|
return (
|
|
8
8
|
<div className={rootClass}>
|
|
9
|
-
<img src=
|
|
9
|
+
<img src={seller ? seller.image : ''} />
|
|
10
10
|
</div>
|
|
11
11
|
)
|
|
12
12
|
}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { gql } from '@apollo/client';
|
|
2
|
+
|
|
3
|
+
export const GET_STORE_CONFIG_DATA = gql`
|
|
4
|
+
query getStoreConfigData {
|
|
5
|
+
# eslint-disable-next-line @graphql-eslint/require-id-when-available
|
|
6
|
+
storeConfig {
|
|
7
|
+
store_code
|
|
8
|
+
product_url_suffix
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
`;
|
|
12
|
+
|
|
13
|
+
export const GET_SELLER_DETAIL_QUERY = gql`
|
|
14
|
+
query getSellerDetailForSellerPage($urlKey: String!) {
|
|
15
|
+
sellerByUrl(seller_url: $urlKey) {
|
|
16
|
+
seller_id
|
|
17
|
+
contact_number
|
|
18
|
+
shop_title
|
|
19
|
+
company
|
|
20
|
+
term_and_conditions
|
|
21
|
+
website_url
|
|
22
|
+
ship_to
|
|
23
|
+
ship_to_country
|
|
24
|
+
operating_hours {
|
|
25
|
+
day
|
|
26
|
+
time {
|
|
27
|
+
opening_time
|
|
28
|
+
closing_time
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
description
|
|
32
|
+
address
|
|
33
|
+
country
|
|
34
|
+
image
|
|
35
|
+
thumbnail
|
|
36
|
+
city
|
|
37
|
+
region
|
|
38
|
+
group
|
|
39
|
+
group_id
|
|
40
|
+
url
|
|
41
|
+
customer_id
|
|
42
|
+
email
|
|
43
|
+
name
|
|
44
|
+
sale
|
|
45
|
+
commission_id
|
|
46
|
+
page_layout
|
|
47
|
+
status
|
|
48
|
+
position
|
|
49
|
+
twitter_id
|
|
50
|
+
facebook_id
|
|
51
|
+
gplus_id
|
|
52
|
+
youtube_id
|
|
53
|
+
vimeo_id
|
|
54
|
+
instagram_id
|
|
55
|
+
pinterest_id
|
|
56
|
+
linkedin_id
|
|
57
|
+
tw_active
|
|
58
|
+
fb_active
|
|
59
|
+
gplus_active
|
|
60
|
+
vimeo_active
|
|
61
|
+
instagram_active
|
|
62
|
+
pinterest_active
|
|
63
|
+
linkedin_active
|
|
64
|
+
banner_pic
|
|
65
|
+
shop_url
|
|
66
|
+
url_key
|
|
67
|
+
logo_pic
|
|
68
|
+
verify_status
|
|
69
|
+
product_count
|
|
70
|
+
telephone
|
|
71
|
+
creation_time
|
|
72
|
+
update_time
|
|
73
|
+
country_id
|
|
74
|
+
total_sold
|
|
75
|
+
operating_time
|
|
76
|
+
order_processing_time
|
|
77
|
+
shipping_partners
|
|
78
|
+
offers
|
|
79
|
+
benefits
|
|
80
|
+
product_shipping_info
|
|
81
|
+
prepare_time
|
|
82
|
+
response_ratio
|
|
83
|
+
response_time
|
|
84
|
+
store_id
|
|
85
|
+
seller_rates {
|
|
86
|
+
total_count
|
|
87
|
+
page_info {
|
|
88
|
+
page_size
|
|
89
|
+
current_page
|
|
90
|
+
}
|
|
91
|
+
items {
|
|
92
|
+
rating_id
|
|
93
|
+
seller_id
|
|
94
|
+
customer_id
|
|
95
|
+
rate1
|
|
96
|
+
rate2
|
|
97
|
+
rate3
|
|
98
|
+
rate4
|
|
99
|
+
rate5
|
|
100
|
+
rating
|
|
101
|
+
email
|
|
102
|
+
title
|
|
103
|
+
status
|
|
104
|
+
detail
|
|
105
|
+
nickname
|
|
106
|
+
created_at
|
|
107
|
+
verified_buyer
|
|
108
|
+
is_recommended
|
|
109
|
+
is_hidden
|
|
110
|
+
answer
|
|
111
|
+
admin_note
|
|
112
|
+
like_about
|
|
113
|
+
not_like_about
|
|
114
|
+
guest_email
|
|
115
|
+
plus_review
|
|
116
|
+
minus_review
|
|
117
|
+
report_abuse
|
|
118
|
+
country
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
products {
|
|
122
|
+
total_count
|
|
123
|
+
page_info {
|
|
124
|
+
page_size
|
|
125
|
+
current_page
|
|
126
|
+
}
|
|
127
|
+
items {
|
|
128
|
+
id
|
|
129
|
+
name
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
`;
|
|
135
|
+
|
|
136
|
+
export default {
|
|
137
|
+
getStoreConfigData: GET_STORE_CONFIG_DATA,
|
|
138
|
+
getSellerDetailQuery: GET_SELLER_DETAIL_QUERY
|
|
139
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { useQuery } from '@apollo/client';
|
|
2
|
+
import { useEffect, useMemo } from 'react';
|
|
3
|
+
import { useLocation } from 'react-router-dom';
|
|
4
|
+
import { useAppContext } from '@magento/peregrine/lib/context/app';
|
|
5
|
+
|
|
6
|
+
import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
|
|
7
|
+
import DEFAULT_OPERATIONS from './seller.gql';
|
|
8
|
+
|
|
9
|
+
export const useSeller = props => {
|
|
10
|
+
const { mapSeller } = props;
|
|
11
|
+
|
|
12
|
+
const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
|
|
13
|
+
const { getStoreConfigData, getSellerDetailQuery } = operations;
|
|
14
|
+
const { pathname } = useLocation();
|
|
15
|
+
const [
|
|
16
|
+
,
|
|
17
|
+
{
|
|
18
|
+
actions: { setPageLoading }
|
|
19
|
+
}
|
|
20
|
+
] = useAppContext();
|
|
21
|
+
|
|
22
|
+
const { data: storeConfigData } = useQuery(getStoreConfigData, {
|
|
23
|
+
fetchPolicy: 'cache-and-network',
|
|
24
|
+
nextFetchPolicy: 'cache-first'
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
const slug = pathname.split('/').pop();
|
|
28
|
+
const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
|
|
29
|
+
const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
|
|
30
|
+
|
|
31
|
+
const { error, loading, data } = useQuery(getSellerDetailQuery, {
|
|
32
|
+
fetchPolicy: 'cache-and-network',
|
|
33
|
+
nextFetchPolicy: 'cache-first',
|
|
34
|
+
skip: !storeConfigData,
|
|
35
|
+
variables: {
|
|
36
|
+
urlKey
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
const isBackgroundLoading = !!data && loading;
|
|
41
|
+
|
|
42
|
+
const seller = useMemo(() => {
|
|
43
|
+
if (!data) {
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const seller = data.sellerByUrl;
|
|
48
|
+
|
|
49
|
+
if (!seller) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return mapSeller(seller);
|
|
54
|
+
}, [data, mapSeller, urlKey]);
|
|
55
|
+
|
|
56
|
+
// Update the page indicator if the GraphQL query is in flight.
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
setPageLoading(isBackgroundLoading);
|
|
59
|
+
}, [isBackgroundLoading, setPageLoading]);
|
|
60
|
+
|
|
61
|
+
return {
|
|
62
|
+
error,
|
|
63
|
+
loading,
|
|
64
|
+
seller
|
|
65
|
+
};
|
|
66
|
+
};
|