@riosst100/pwa-marketplace 1.2.9 → 1.3.1

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.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/src/componentOverrideMapping.js +1 -0
  3. package/src/components/OperatingHours/operatingHours.js +7 -9
  4. package/src/components/Pagination/index.js +27 -29
  5. package/src/components/SellerDetail/sellerDetail.js +2 -18
  6. package/src/components/SellerInformation/sellerInformation.js +2 -1
  7. package/src/components/SellerLocation/sellerLocation.js +1 -1
  8. package/src/components/SellerReview/sellerReview.js +18 -10
  9. package/src/components/SellerReviewItem/sellerReviewItem.js +105 -20
  10. package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js +84 -0
  11. package/src/talons/Seller/seller.gql.js +0 -36
  12. package/src/talons/SellerReview/sellerReview.gql.js +53 -0
  13. package/src/talons/SellerReview/useSellerReview.js +49 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@riosst100/pwa-marketplace",
3
3
  "author": "riosst100@gmail.com",
4
- "version": "1.2.9",
4
+ "version": "1.3.1",
5
5
  "main": "src/index.js",
6
6
  "pwa-studio": {
7
7
  "targets": {
package/src/componentOverrideMapping.js CHANGED
@@ -15,4 +15,5 @@ module.exports = componentOverrideMapping = {
15
15
  [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
16
16
  [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
17
17
  [`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
18
+ [`@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js',
18
19
  };
package/src/components/OperatingHours/operatingHours.js CHANGED
@@ -10,25 +10,23 @@ const OperatingHours = ({ values }) => {
10
10
 
11
11
  const Hours = ({ values }) => {
12
12
  return values && values.map((value, index) =>
13
- <>
13
+ <span key={index}>
14
14
  <tr>
15
15
  <td style={{"verticalAlign":"top"}}>{value.day}</td>
16
16
  <td style={{"paddingLeft":"20px"}}>{value.status == "open" && value.time ? <Time times={value.time} /> : 'Closed'}</td>
17
17
  </tr>
18
18
  <br />
19
- </>
19
+ </span>
20
20
  )
21
21
  }
22
22
 
23
23
  const Time = ({ times }) => {
24
24
  return times ? times.map((value, index) =>
25
- <>
26
- <tr>
27
- <td style={{"paddingBottom": times.length > 1 && index != times.length ? "10px" : "0px"}}>
28
- {value.opening_time} - {value.closing_time}
29
- </td>
30
- </tr>
31
- </>
25
+ <tr key={index}>
26
+ <td style={{"paddingBottom": times.length > 1 && index != times.length ? "10px" : "0px"}}>
27
+ {value.opening_time} - {value.closing_time}
28
+ </td>
29
+ </tr>
32
30
  ) : ''
33
31
  }
34
32
 
package/src/components/Pagination/index.js CHANGED
@@ -1,7 +1,23 @@
1
1
  import React from 'react';
2
2
  import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
3
3
 
4
- const Pagination = () => {
4
+ const Pagination = ({ totalPages, currentPage, pageSize }) => {
5
+
6
+ const pageNumbers = [];
7
+
8
+ // Populate the items array with numbers from 1 to maxNumber
9
+ if (totalPages) {
10
+ for (let i = 1; i < totalPages+1; i++) {
11
+ pageNumbers.push(i);
12
+ }
13
+ }
14
+
15
+ const activeClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]";
16
+ const bgClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]";
17
+
18
+ const activeTextClass = "relative w-fit font-normal text-white text-[16px] tracking-[0] leading-none whitespace-nowrap";
19
+ const textClass = "relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap";
20
+
5
21
  return (
6
22
  <>
7
23
  <div className={'inline-flex items-start gap-[10px] relative'}>
@@ -10,33 +26,15 @@ const Pagination = () => {
10
26
  <ArrowLeft2 size="16" color="#6243fa" variant="Outline" />
11
27
  </div>
12
28
  </button>
13
- <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
14
- <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
15
- 1
16
- </div>
17
- </button>
18
- <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
19
- <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
20
- 2
21
- </div>
22
- </button>
23
- <button
24
- className={'inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]'}
25
- >
26
- <div className="relative w-fit font-normal text-white text-[16px] tracking-[0] leading-none whitespace-nowrap">
27
- 3
28
- </div>
29
- </button>
30
- <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
31
- <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
32
- 4
33
- </div>
34
- </button>
35
- <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
36
- <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
37
- 5
38
- </div>
39
- </button>
29
+ {pageNumbers ? pageNumbers.map((num, index) => (
30
+ <span key={index}>
31
+ <button className={num == currentPage ? activeClass : bgClass}>
32
+ <div className={num == currentPage ? activeTextClass : textClass}>
33
+ {num}
34
+ </div>
35
+ </button>
36
+ </span>
37
+ )) : ''}
40
38
  <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
41
39
  <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
42
40
  <ArrowRight2 size="16" color="#6243fa" variant="Outline" />
@@ -47,4 +45,4 @@ const Pagination = () => {
47
45
  )
48
46
  }
49
47
 
50
- export default Pagination
48
+ export default Pagination;
package/src/components/SellerDetail/sellerDetail.js CHANGED
@@ -8,11 +8,6 @@ import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
8
8
  import SellerProducts from '../SellerProducts';
9
9
  import SellerInformation from '../SellerInformation';
10
10
  import Reviews from '../SellerReview';
11
- import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
12
- import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
13
- import SellerProducts from '../SellerProducts';
14
- import SellerInformation from '../SellerInformation';
15
- import Reviews from '../SellerReview';
16
11
  import {
17
12
  Verify,
18
13
  Sms,
@@ -54,7 +49,7 @@ const SellerDetail = props => {
54
49
  {
55
50
  id: 'product-tab',
56
51
  title: 'All Products',
57
- content: <SellerProducts />
52
+ content: <SellerProducts seller={seller} />
58
53
  },
59
54
  {
60
55
  id: 'store-information',
@@ -64,7 +59,7 @@ const SellerDetail = props => {
64
59
  {
65
60
  id: 'reviews',
66
61
  title: 'Reviews',
67
- content: <Reviews />
62
+ content: <Reviews seller={seller} />
68
63
  }
69
64
  ];
70
65
 
@@ -128,17 +123,6 @@ const SellerDetail = props => {
128
123
  </div>
129
124
  </div>
130
125
  <div class="flex items-center gap-[20px] px-[10px] py-[30px] relative">
131
- <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
132
- <div class="flex items-center gap-[6px] relative">
133
- <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
134
- <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
135
- {seller ? seller.sale : 0}
136
- </div>
137
- </div>
138
- <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
139
- Total Sales
140
- </div>
141
- </div>
142
126
  <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
143
127
  <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
144
128
  <div class="flex items-center gap-[5px] relative">
package/src/components/SellerInformation/sellerInformation.js CHANGED
@@ -16,6 +16,7 @@ const SellerInformation = ({ seller }) => {
16
16
  <p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[16px]">
17
17
  {seller ? seller.description : ''}<br />
18
18
  <br />
19
+ <br />
19
20
  {seller ? seller.contact_number : ''}
20
21
  </p>
21
22
  </div>
@@ -76,7 +77,7 @@ const SellerShipTo = ({seller}) => {
76
77
  <div class="flex flex-wrap items-center gap-2 px-0 py-[5px] relative flex-1 grow">
77
78
  {shipTo && shipTo == "Domestic" ? seller.country_id : ''}
78
79
  {shipToCountryArr && shipTo != "Domestic" ? shipToCountryArr.map((value, index) => <>
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]">
80
+ <div key={index} class={index == shipToCountryArr.length-1 ? "inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]" : "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]"}>
80
81
  <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
81
82
  </div>
82
83
  </>) : ''}
package/src/components/SellerLocation/sellerLocation.js CHANGED
@@ -8,7 +8,7 @@ const SellerLocation = ({ storeLocators }) => {
8
8
  <div class="relative w-fit font-semibold text-[20px] tracking-[0] leading-[normal]">Our Store</div>
9
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
- <SellerLocationItem storeLocator={value} />
11
+ <SellerLocationItem storeLocator={value} key={index} />
12
12
  )}
13
13
  </div>
14
14
  </div>
package/src/components/SellerReview/sellerReview.js CHANGED
@@ -2,8 +2,15 @@ import React from 'react';
2
2
  import SellerReviewItem from '../SellerReviewItem';
3
3
  import Pagination from '../Pagination';
4
4
  import { Star1 } from 'iconsax-react';
5
+ import { useSellerReview } from '@riosst100/pwa-marketplace/src/talons/SellerReview/useSellerReview';
6
+
7
+ const SellerReview = ({ seller }) => {
8
+ const talonProps = useSellerReview({
9
+ sellerUrl: seller.url_key
10
+ });
11
+
12
+ const { reviews, loading } = talonProps;
5
13
 
6
- const SellerReview = () => {
7
14
  return (
8
15
  <>
9
16
  <div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px] '>
@@ -28,7 +35,7 @@ const SellerReview = () => {
28
35
  <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
29
36
  </div>
30
37
  </div>
31
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
38
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">({reviews ? reviews.items.length : 0} Reviews)</div>
32
39
  </div>
33
40
  </div>
34
41
  <div className="w-full flex-col items-start gap-2 flex">
@@ -124,16 +131,13 @@ const SellerReview = () => {
124
131
  </div>
125
132
  <div className='flex flex-col w-full'>
126
133
  <div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
127
- <SellerReviewItem />
128
- <SellerReviewItem />
129
- <SellerReviewItem />
130
- <SellerReviewItem />
131
- <SellerReviewItem />
132
- <SellerReviewItem />
133
- <SellerReviewItem />
134
+ <SellerReviews reviews={reviews} />
134
135
  </div>
135
136
  <div className='pagination-container w-full flex justify-center'>
136
- <Pagination />
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} /> : ''}
137
141
  </div>
138
142
  </div>
139
143
  </div>
@@ -141,4 +145,8 @@ const SellerReview = () => {
141
145
  )
142
146
  }
143
147
 
148
+ const SellerReviews = ({ reviews }) => {
149
+ return reviews && reviews.items.length ? reviews.items.map((review, index) => <SellerReviewItem review={review} key={index} /> ) : ''
150
+ }
151
+
144
152
  export default SellerReview;
package/src/components/SellerReviewItem/sellerReviewItem.js CHANGED
@@ -1,7 +1,90 @@
1
1
  import React from 'react';
2
2
  import { Star1 } from 'iconsax-react';
3
3
 
4
- const SellerReviewItem = () => {
4
+ const SellerReviewItem = ({ review }) => {
5
+ const rate1 = [];
6
+ if (review.rate1) {
7
+ for (let i = 1; i < review.rate1+1; i++) {
8
+ rate1.push({
9
+ 'num': i,
10
+ 'star': true
11
+ });
12
+ }
13
+
14
+ if (review.rate1 < 5) {
15
+ for (let i = review.rate1+1; i < 5+1; i++) {
16
+ rate1.push({
17
+ 'num': i,
18
+ 'star': false
19
+ });
20
+ }
21
+ }
22
+ }
23
+
24
+ const rate2 = [];
25
+ if (review.rate2) {
26
+ for (let i = 1; i < review.rate2+1; i++) {
27
+ rate2.push({
28
+ 'num': i,
29
+ 'star': true
30
+ });
31
+ }
32
+
33
+ if (review.rate2 < 5) {
34
+ for (let i = review.rate2+1; i < 5+1; i++) {
35
+ rate2.push({
36
+ 'num': i,
37
+ 'star': false
38
+ });
39
+ }
40
+ }
41
+ }
42
+
43
+ const rate3 = [];
44
+ if (review.rate3) {
45
+ for (let i = 1; i < review.rate3+1; i++) {
46
+ rate3.push({
47
+ 'num': i,
48
+ 'star': true
49
+ });
50
+ }
51
+
52
+ if (review.rate3 < 5) {
53
+ for (let i = review.rate3+1; i < 5+1; i++) {
54
+ rate3.push({
55
+ 'num': i,
56
+ 'star': false
57
+ });
58
+ }
59
+ }
60
+ }
61
+
62
+ const formatDate = (date) => {
63
+ const isoFormattedDate = date.replace(' ', 'T');
64
+ const formattedDate = new Date(isoFormattedDate).toLocaleDateString(
65
+ undefined,
66
+ {
67
+ year: 'numeric',
68
+ month: 'short',
69
+ day: 'numeric'
70
+ }
71
+ );
72
+
73
+ return formattedDate;
74
+ }
75
+
76
+ const getInitialName = (name) => {
77
+ let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
78
+
79
+ let initials = [...name.matchAll(rgx)] || [];
80
+
81
+ initials = (
82
+ (initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')
83
+ ).toUpperCase();
84
+
85
+ return initials;
86
+ }
87
+
5
88
  return (
6
89
  <>
7
90
  <div class="flex flex-col items-start gap-[10px] p-[25px] relative self-stretch w-full flex-[0_0_auto] bg-white rounded-[6px] border border-solid border-[#e6e9ea]">
@@ -9,48 +92,42 @@ const SellerReviewItem = () => {
9
92
  <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
10
93
  <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
11
94
  <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 font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
95
+ <div class="relative w-fit font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
96
+ {review ? getInitialName(review.nickname) : ''}
97
+ </div>
13
98
  </div>
14
99
  <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
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>
100
+ <div class="relative w-fit mt-[-1.00px] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
101
+ {review ? review.nickname : ''}
102
+ </div>
103
+ <div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
104
+ {review ? formatDate(review.created_at) : ''}
105
+ </div>
17
106
  </div>
18
107
  </div>
19
108
  <div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
20
109
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
21
110
  <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
22
111
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
23
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
24
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
25
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
26
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
27
- <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
112
+ <ReviewRating rate={rate1} />
28
113
  </div>
29
114
  </div>
30
115
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
31
116
  <div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
32
117
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
33
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
34
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
35
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
36
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
37
- <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
118
+ <ReviewRating rate={rate2} />
38
119
  </div>
39
120
  </div>
40
121
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
41
122
  <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
42
123
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
43
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
44
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
45
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
46
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
47
- <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
124
+ <ReviewRating rate={rate3} />
48
125
  </div>
49
126
  </div>
50
127
  </div>
51
128
  </div>
52
129
  <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
53
- Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
130
+ {review ? review.detail : ''}
54
131
  </p>
55
132
  </div>
56
133
  </div>
@@ -58,4 +135,12 @@ const SellerReviewItem = () => {
58
135
  )
59
136
  }
60
137
 
138
+ const ReviewRating = ({ rate }) => {
139
+ return rate && rate.length ? rate.map((rating, index) => <RatingStar star={rating.star} />) : '';
140
+ }
141
+
142
+ const RatingStar = ({ star }) => {
143
+ return star ? <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' /> : <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />;
144
+ }
145
+
61
146
  export default SellerReviewItem;
package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js ADDED
@@ -0,0 +1,84 @@
1
+ import React from 'react';
2
+ import { useIntl } from 'react-intl';
3
+ import { bool, shape, string } from 'prop-types';
4
+
5
+ import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
6
+ import { useStyle } from '@magento/venia-ui/lib/classify';
7
+ import defaultClasses from '@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.module.css';
8
+ import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
9
+
10
+ const FilterDefault = props => {
11
+ const {
12
+ classes: propsClasses,
13
+ isSelected,
14
+ item,
15
+ onMouseDown,
16
+ group,
17
+ ...restProps
18
+ } = props;
19
+
20
+ const { label, value_index } = item || {};
21
+ const classes = useStyle(defaultClasses, propsClasses);
22
+ const { currentCurrencyCode } = useCurrencySwitcher();
23
+ const currencySymbolMap = {
24
+ USD: '$',
25
+ EUR: '€'
26
+ };
27
+ const currencySymbol = currencySymbolMap[currentCurrencyCode] != undefined ? currencySymbolMap[currentCurrencyCode] : currentCurrencyCode;
28
+ const title =
29
+ group === 'price'
30
+ ? currencySymbol + label.replace('-', ' - ' + currencySymbol)
31
+ : label;
32
+ const { formatMessage } = useIntl();
33
+
34
+ const ariaLabel = !isSelected
35
+ ? formatMessage(
36
+ {
37
+ id: 'filterModal.item.applyFilter',
38
+ defaultMessage: 'Apply filter "{optionName}".'
39
+ },
40
+ {
41
+ optionName: label
42
+ }
43
+ )
44
+ : formatMessage(
45
+ {
46
+ id: 'filterModal.item.clearFilter',
47
+ defaultMessage: 'Remove filter "{optionName}".'
48
+ },
49
+ {
50
+ optionName: label
51
+ }
52
+ );
53
+
54
+ return (
55
+ <Checkbox
56
+ classes={classes}
57
+ field={`${label}-${value_index}`}
58
+ fieldValue={!!isSelected}
59
+ label={title}
60
+ ariaLabel={ariaLabel}
61
+ data-cy="FilterDefault-checkbox"
62
+ onClick={onMouseDown}
63
+ {...restProps}
64
+ />
65
+ );
66
+ };
67
+
68
+ export default FilterDefault;
69
+
70
+ FilterDefault.propTypes = {
71
+ classes: shape({
72
+ root: string,
73
+ icon: string,
74
+ label: string,
75
+ checked: string
76
+ }),
77
+ group: string,
78
+ isSelected: bool,
79
+ item: shape({
80
+ label: string.isRequired,
81
+ value_index: string.isRequired
82
+ }).isRequired,
83
+ label: string
84
+ };
package/src/talons/Seller/seller.gql.js CHANGED
@@ -147,42 +147,6 @@ export const GET_SELLER_DETAIL_QUERY = gql`
147
147
  response_ratio
148
148
  response_time
149
149
  store_id
150
- seller_rates {
151
- total_count
152
- page_info {
153
- page_size
154
- current_page
155
- }
156
- items {
157
- rating_id
158
- seller_id
159
- customer_id
160
- rate1
161
- rate2
162
- rate3
163
- rate4
164
- rate5
165
- rating
166
- email
167
- title
168
- status
169
- detail
170
- nickname
171
- created_at
172
- verified_buyer
173
- is_recommended
174
- is_hidden
175
- answer
176
- admin_note
177
- like_about
178
- not_like_about
179
- guest_email
180
- plus_review
181
- minus_review
182
- report_abuse
183
- country
184
- }
185
- }
186
150
  products {
187
151
  total_count
188
152
  page_info {
package/src/talons/SellerReview/sellerReview.gql.js ADDED
@@ -0,0 +1,53 @@
1
+ import { gql } from '@apollo/client';
2
+
3
+ export const GET_SELLER_REVIEW_DATA = gql`
4
+ query getSellerReviewData($sellerUrl: String!, $filter: SellerRatingFilterInput, $pageSize: Int, $currentPage: Int, $sort: SellerRatingSortInput) {
5
+ sellerRatings(
6
+ seller_url: $sellerUrl
7
+ filter: $filter
8
+ pageSize: $pageSize
9
+ currentPage: $currentPage
10
+ sort: $sort
11
+ ) {
12
+ total_count
13
+ page_info {
14
+ total_pages
15
+ page_size
16
+ current_page
17
+ }
18
+ items {
19
+ rating_id
20
+ seller_id
21
+ customer_id
22
+ rate1
23
+ rate2
24
+ rate3
25
+ rate4
26
+ rate5
27
+ rating
28
+ email
29
+ title
30
+ status
31
+ detail
32
+ nickname
33
+ created_at
34
+ verified_buyer
35
+ is_recommended
36
+ is_hidden
37
+ answer
38
+ admin_note
39
+ like_about
40
+ not_like_about
41
+ guest_email
42
+ plus_review
43
+ minus_review
44
+ report_abuse
45
+ country
46
+ }
47
+ }
48
+ }
49
+ `;
50
+
51
+ export default {
52
+ getSellerReviewQuery: GET_SELLER_REVIEW_DATA
53
+ };
package/src/talons/SellerReview/useSellerReview.js ADDED
@@ -0,0 +1,49 @@
1
+ import { useQuery } from '@apollo/client';
2
+ import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
3
+ import DEFAULT_OPERATIONS from './sellerReview.gql';
4
+ import { useMemo } from 'react';
5
+
6
+ export const useSellerReview = props => {
7
+ const {
8
+ sellerUrl
9
+ } = props;
10
+
11
+ const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
12
+ const { getSellerReviewQuery } = operations;
13
+
14
+ const filter = [];
15
+ const pageSize = 10;
16
+
17
+ const currentPage = 1;
18
+
19
+ const sort = {rating_id: 'DESC'}
20
+
21
+ const { data, error, loading } = useQuery(getSellerReviewQuery, {
22
+ variables: {
23
+ sellerUrl,
24
+ filter,
25
+ pageSize,
26
+ currentPage,
27
+ sort
28
+ }
29
+ });
30
+
31
+ const reviews = useMemo(() => {
32
+ if (!data) {
33
+ return null;
34
+ }
35
+
36
+ const reviews = data.sellerRatings;
37
+
38
+ if (!reviews) {
39
+ return null;
40
+ }
41
+
42
+ return reviews;
43
+ }, [data]);
44
+
45
+ return {
46
+ reviews,
47
+ loading
48
+ };
49
+ };