@riosst100/pwa-marketplace 1.2.5 → 1.2.6

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 (14) hide show
  1. package/package.json +1 -1
  2. package/src/componentOverrideMapping.js +1 -2
  3. package/src/components/Filter/index.js +7 -7
  4. package/src/components/Pagination/index.js +17 -26
  5. package/src/components/Search/index.js +1 -1
  6. package/src/components/Seller/seller.js +2 -210
  7. package/src/components/SellerInformation/sellerInformation.js +16 -50
  8. package/src/components/SellerLocation/sellerLocation.js +0 -5
  9. package/src/components/SellerProducts/sellerProducts.js +189 -38
  10. package/src/components/SellerReview/sellerReview.js +29 -29
  11. package/src/components/SellerReviewItem/sellerReviewItem.js +8 -8
  12. package/src/components/SortBy/index.js +5 -13
  13. package/src/components/commons/Tabs/index.js +9 -11
  14. package/src/overwrites/venia-ui/lib/components/Header/header.js +34 -46
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.5",
4
+ "version": "1.2.6",
5
5
  "main": "src/index.js",
6
6
  "pwa-studio": {
7
7
  "targets": {
package/src/componentOverrideMapping.js CHANGED
@@ -13,6 +13,5 @@ module.exports = componentOverrideMapping = {
13
13
  [`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',
14
14
  [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
15
15
  [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
16
- [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
17
- [`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
16
+ [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js'
18
17
  };
package/src/components/Filter/index.js CHANGED
@@ -13,7 +13,7 @@ const CatalogFilter = () => {
13
13
  </div>
14
14
  <div class="inline-flex flex-col items-start gap-[10px] bg-white relative flex-[0_0_auto]">
15
15
  <div class="flex-col justify-center inline-flex items-center relative flex-[0_0_auto]">
16
- <div class="flex w-full cursor-pointer items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
16
+ <div class="flex w-[240px] items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
17
17
  <div class="relative w-fit font-semibold text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
18
18
  <ArrowSquareUp color="#292D32" size={14} variant="Outline" />
19
19
  </div>
@@ -21,26 +21,26 @@ const CatalogFilter = () => {
21
21
  <div class="inline-flex flex-col items-start gap-[15px] p-[10px] relative flex-[0_0_auto] bg-white">
22
22
  <div class="flex flex-col w-[220px] items-start gap-[12px] relative flex-[0_0_auto]">
23
23
  <div class="gap-[8px] inline-flex items-center relative flex-[0_0_auto]">
24
- <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
24
+ <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
25
25
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Action figures</div>
26
26
  </div>
27
27
  <div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
28
- <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
28
+ <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
29
29
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Gundam</div>
30
30
  </div>
31
31
  <div class="gap-[8px] inline-flex items-center relative flex-[0_0_auto]">
32
- <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
32
+ <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
33
33
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Puzzles</div>
34
34
  </div>
35
35
  <div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
36
- <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
36
+ <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
37
37
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Japan Culture</div>
38
38
  </div>
39
39
  <div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
40
- <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
40
+ <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
41
41
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Sci-fi</div>
42
42
  </div>
43
- <div class="relative w-fit font-normal text-[#009a7b] text-[12px] tracking-[0] leading-[14px] underline whitespace-nowrap cursor-pointer">Show More</div>
43
+ <div class="relative w-fit font-normal text-[#009a7b] text-[12px] tracking-[0] leading-[14px] underline whitespace-nowrap">Show More</div>
44
44
  </div>
45
45
  </div>
46
46
  </div>
package/src/components/Pagination/index.js CHANGED
@@ -1,47 +1,38 @@
1
1
  import React from 'react';
2
- import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
3
2
 
4
3
  const Pagination = () => {
5
4
  return (
6
5
  <>
7
6
  <div className={'inline-flex items-start gap-[10px] relative'}>
8
- <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]">
9
- <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
10
- <ArrowLeft2 size="16" color="#6243fa" variant="Outline" />
11
- </div>
12
- </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">
7
+ <svg class="!relative !flex-[0_0_auto]" fill="none" height="32" viewBox="0 0 40 32" width="40" xmlns="http://www.w3.org/2000/svg"><rect height="31" rx="4.5" stroke="#E6E9EA" width="39" x="0.5" y="0.5"></rect><path d="M21.75 20.62L17.9466 16.8167C17.4974 16.3675 17.4974 15.6325 17.9466 15.1833L21.75 11.38" stroke="#6243FA" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"></path></svg>
8
+ <div 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]">
9
+ <div className="relative w-fit mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-[#6243fa] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
15
10
  1
16
11
  </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">
12
+ </div>
13
+ <div 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 mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-[#6243fa] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
20
15
  2
21
16
  </div>
22
- </button>
23
- <button
17
+ </div>
18
+ <div
24
19
  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
20
  >
26
- <div className="relative w-fit font-normal text-white text-[16px] tracking-[0] leading-none whitespace-nowrap">
21
+ <div className="relative w-fit mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-white text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
27
22
  3
28
23
  </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">
24
+ </div>
25
+ <div 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]">
26
+ <div className="relative w-fit mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-[#6243fa] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
32
27
  4
33
28
  </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">
29
+ </div>
30
+ <div 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 mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-[#6243fa] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
37
32
  5
38
33
  </div>
39
- </button>
40
- <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
- <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
42
- <ArrowRight2 size="16" color="#6243fa" variant="Outline" />
43
- </div>
44
- </button>
34
+ </div>
35
+ <svg class="!relative !flex-[0_0_auto]" fill="none" height="32" viewBox="0 0 40 32" width="40" xmlns="http://www.w3.org/2000/svg"><rect height="31" rx="4.5" stroke="#E6E9EA" width="39" x="0.5" y="0.5"></rect><path d="M18.1975 20.62L22.0008 16.8166C22.45 16.3675 22.45 15.6325 22.0008 15.1833L18.1975 11.38" stroke="#6243FA" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"></path></svg>
45
36
  </div>
46
37
  </>
47
38
  )
package/src/components/Search/index.js CHANGED
@@ -4,7 +4,7 @@ import { SearchNormal } from 'iconsax-react';
4
4
  const Search = () => {
5
5
  return (
6
6
  <>
7
- <div class="flex items-center xs_w-full xl_max-w-[600px] gap-[20px] px-[15px] py-[12px] relative bg-white rounded-[30px] border border-solid border-gray-100">
7
+ <div class="flex w-[600px] items-center gap-[20px] px-[15px] py-[12px] relative bg-white rounded-[30px] border border-solid border-[#e6e9ea]">
8
8
  <div class="flex items-center gap-[10px] relative flex-1 self-stretch grow">
9
9
  <input className='flex-1 leading-[18px]' placeholder='Search...' />
10
10
  </div>
package/src/components/Seller/seller.js CHANGED
@@ -4,22 +4,7 @@ import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSelle
4
4
  import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
5
5
  import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
6
6
  import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
7
- // import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail';
8
- import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
9
- import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
10
- import SellerProducts from '../SellerProducts';
11
- import SellerInformation from '../SellerInformation';
12
- import Reviews from '../SellerReview';
13
- import {
14
- Verify,
15
- Sms,
16
- Message,
17
- Heart,
18
- Share,
19
- BoxTick,
20
- Star1,
21
- Shop,
22
- } from 'iconsax-react';
7
+ import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail';
23
8
 
24
9
  const Seller = props => {
25
10
  const talonProps = useSeller({
@@ -30,7 +15,7 @@ const Seller = props => {
30
15
 
31
16
  if (loading && !seller)
32
17
  return '';
33
- // return <SellerShimmer />;
18
+ // return <SellerShimmer />;
34
19
  if (error && !seller) return <ErrorView />;
35
20
  if (!seller) {
36
21
  return (
@@ -54,197 +39,4 @@ const Seller = props => {
54
39
  );
55
40
  };
56
41
 
57
- const SellerDetail = ({ seller }) => {
58
- console.log("🚀 ~ SellerDetail ~ seller:", seller)
59
- const dataTabs =
60
- [
61
- {
62
- id: 'product-tab',
63
- title: 'All Products',
64
- content: <SellerProducts />
65
- },
66
- {
67
- id: 'store-information',
68
- title: 'Store Information',
69
- content: <SellerInformation seller={seller} />
70
- },
71
- {
72
- id: 'reviews',
73
- title: 'Reviews',
74
- content: <Reviews />
75
- }
76
- ];
77
-
78
- return (
79
- <div className=' py-8'>
80
- <Slider seller={seller} rootClassname='mb-[30px]' />
81
- <div className='flex xs_flex-col md_flex-row xs_items-center md_item-start lg_flex-row justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-gray-100 shadow-[0px_0px_5px_3px_#d9d9d933]'>
82
- <div className='flex xs_flex-col md_flex-row xs_items-center md_items-start items-start gap-[15px] relative'>
83
- {seller?.thumbnail ? (
84
- <img className="relative w-[100px] h-[100px] object-cover border border-gray-100 rounded-radius1" alt="Rectangle" src={seller ? seller.thumbnail : ''} />
85
- ) : (
86
- <div className='flex items-center justify-center bg-gray-300 border rounded-radius1 relative w-[100px] h-[100px]'>
87
- <Shop size="48" color="#F2F2F2" variant="Outline" />
88
- </div>
89
- )}
90
-
91
- <div className='flex flex-col xs_items-center md_items-start justify-between relative gap-y-[18px]'>
92
- <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
93
- <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
94
- <div className="relative w-fit mt-[-1.00px] font-semibold text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
95
- {seller ? seller.name : ''}
96
- </div>
97
- <div className="flex items-center gap-[5px] relative">
98
- <Verify variant='Bold' color='#4E31DB' size={20} />
99
- <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
100
- Verified
101
- </div>
102
- </div>
103
- </div>
104
- <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
105
- Jurong west
106
- </div>
107
- </div>
108
- <div className='flex flex-wrap items-start gap-4 relative'>
109
- <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-[#6243fa]">
110
- <div class="flex items-center justify-center gap-[10px] relative">
111
- <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
112
- <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
113
- Message
114
- </div>
115
- </div>
116
- </button>
117
- <button class="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]">
118
- <div class="flex items-center justify-center gap-[10px] relative">
119
- <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
120
- <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
121
- Chat With Seller
122
- </div>
123
- </div>
124
- </button>
125
- <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
126
- <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
127
- </button>
128
- <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
129
- <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
130
- </button>
131
- </div>
132
- </div>
133
- </div>
134
- <div class="flex items-center gap-[20px] px-[10px] py-[30px] relative">
135
- <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
136
- <div class="flex items-center gap-[6px] relative">
137
- <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
138
- <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
139
- 121
140
- </div>
141
- </div>
142
- <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
143
- Total Sales
144
- </div>
145
- </div>
146
- <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
147
- <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
148
- <div class="flex items-center gap-[5px] relative">
149
- <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
150
- <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
151
- 4.7
152
- </div>
153
- </div>
154
- <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
155
- Rating &amp; Reviews
156
- </div>
157
- </div>
158
- </div>
159
- </div>
160
- <Tabs
161
- data={dataTabs}
162
- tabContentWrapperClassName='!p-0'
163
- hasContent
164
- tabWrapperClassName='xl_gap-x-[60px]'
165
- />
166
- </div>
167
- // <div className='py-8'>
168
- // <Slider seller={seller} rootClassname='mb-[30px]' />
169
- // <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
170
- // <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
171
- // <img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src={seller ? seller.thumbnail : ''} />
172
- // <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
173
- // <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
174
- // <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
175
- // <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
176
- // {seller ? seller.name : ''}
177
- // </div>
178
- // <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
179
- // <Verify variant='Bold' color='#4E31DB' size={20} />
180
- // <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
181
- // Verified
182
- // </div>
183
- // </div>
184
- // </div>
185
- // <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
186
- // Jurong west
187
- // </div>
188
- // </div>
189
- // <div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
190
- // <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
191
- // <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
192
- // <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
193
- // <div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
194
- // Message
195
- // </div>
196
- // </div>
197
- // </div>
198
- // <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
199
- // <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
200
- // <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
201
- // <div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
202
- // Chat With Seller
203
- // </div>
204
- // </div>
205
- // </div>
206
- // <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]">
207
- // <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
208
- // </div>
209
- // <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]">
210
- // <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
211
- // </div>
212
- // </div>
213
- // </div>
214
- // </div>
215
- // <div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
216
- // <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
217
- // <div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
218
- // <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
219
- // <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
220
- // 121
221
- // </div>
222
- // </div>
223
- // <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
224
- // Total Sales
225
- // </div>
226
- // </div>
227
- // <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
228
- // <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
229
- // <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
230
- // <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
231
- // <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
232
- // 4.7
233
- // </div>
234
- // </div>
235
- // <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
236
- // Rating &amp; Reviews
237
- // </div>
238
- // </div>
239
- // </div>
240
- // </div>
241
- // <Tabs
242
- // data={dataTabs}
243
- // tabContentWrapperClassName='!p-0'
244
- // hasContent
245
- // />
246
- // </div>
247
- )
248
- }
249
-
250
42
  export default Seller;
package/src/components/SellerInformation/sellerInformation.js CHANGED
@@ -8,13 +8,14 @@ const SellerInformation = ({ seller }) => {
8
8
  return (
9
9
  <>
10
10
  <div class="flex flex-col items-start gap-[30px] px-[10px]">
11
- <div class="grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 relative w-full grow xs_gap-y-6 md_gap-x-14 xl_gap-x-14">
12
- <div class="flex flex-col items-start gap-[30px] relative self-stretch">
11
+ <div class="flex items-start justify-between relative flex-1 self-stretch w-full grow">
12
+ <div class="flex flex-col w-[320px] items-start gap-[30px] relative self-stretch">
13
13
  <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
14
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Description</div>
14
+ <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>
15
15
  <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
16
- <p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[16px]">
17
- {seller ? seller.description : ''}<br />
16
+ <p class="relative w-[300px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[16px]">
17
+ {seller ? seller.description : ''}
18
+ <br />
18
19
  <br />
19
20
  {seller ? seller.contact_number : ''}
20
21
  </p>
@@ -26,78 +27,43 @@ const SellerInformation = ({ seller }) => {
26
27
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
27
28
  <ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
28
29
  <div class="relative self-stretch w-[151px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: {seller ? seller.creation_time : ''}</div>
29
- {/* <p class="relative w-fit font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">612, Jurong West Street 65</p>
30
- </div>
31
- <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
32
- <ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
33
- <div class="relative self-stretch mt-[-1.00px] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: December 2023</div> */}
34
30
  </div>
35
31
  </div>
36
32
  </div>
37
- <div class="flex flex-col items-start gap-[30px] relative">
33
+ <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
34
+ <div class="flex flex-col w-[320px] items-start gap-[30px] relative">
38
35
  <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
39
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Working Hour</div>
36
+ <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">Working Hour</div>
40
37
  <div class="inline-flex flex-col items-start relative flex-[0_0_auto]">
41
38
  <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
42
39
  <p class="relative w-[186px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
43
40
  <OperatingHours values={seller.operating_hours} />
44
- {/* <p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal]">
45
- Monday - Friday 9 AM - 5 PM<br />
46
- <br />
47
- Saturday 11 AM - 3 PM<br />
48
- <br />
49
- Sunday Close
50
- */}
51
41
  </p>
52
42
  </div>
53
43
  </div>
54
44
  </div>
55
45
  </div>
56
- <div class="flex flex-col items-start gap-[15px] relative">
57
- <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
58
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Ship To</div>
46
+ <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
47
+ <div class="flex flex-col w-[320px] items-start gap-[15px] relative">
48
+ <div class="inline-flex items-start gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
49
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Ship To</div>
59
50
  </div>
60
51
  <div class="flex flex-wrap w-[300px] items-start gap-[10px_10px] relative flex-[0_0_auto]">
61
52
  {seller ? <SellerShipTo seller={seller} /> : '' }
62
- {/* <div class="flex flex-wrap items-start gap-[10px_10px] relative flex-[0_0_auto]">
63
- <div class="flex flex-wrap items-center gap-2 px-0 py-[5px] relative flex-1 grow">
64
- <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]">
65
- <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Yishun</div>
66
- </div>
67
- <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]">
68
- <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong West</div>
69
- </div>
70
- <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]">
71
- <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong East</div>
72
- </div>
73
- <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]">
74
- <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Seletar</div>
75
- </div>
76
- <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]">
77
- <div class="mt-[-1.00px] text-[14px] leading-[normal] whitespace-nowrap relative w-fit font-normal tracking-[0]">Serangoon</div>
78
- </div>
79
- <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
80
- <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Bukit Batok</div>
81
- </div>
82
- </div> */}
83
53
  </div>
84
54
  </div>
85
55
  </div>
86
56
  <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
87
57
  <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
88
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Terms &amp; Condition</div>
58
+ <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 &amp; Condition</div>
89
59
  <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
90
- <div class="flex flex-col items-start gap-[2px]">
60
+ <div class="flex flex-col w-[500px] items-start gap-[2px]">
91
61
  {seller ? seller.term_and_conditions : ''}
92
62
  </div>
93
63
  </div>
94
- {/* </div>
95
- </div>
96
- {seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
97
- </div> */}
98
64
  </div>
99
65
  </div>
100
- <SellerLocation />
66
+ {seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
101
67
  </div>
102
68
  </>
103
69
  )
package/src/components/SellerLocation/sellerLocation.js CHANGED
@@ -10,11 +10,6 @@ const SellerLocation = ({ storeLocators }) => {
10
10
  {storeLocators && storeLocators.map((value, index) =>
11
11
  <SellerLocationItem storeLocator={value} />
12
12
  )}
13
- {/* <div class="w-full grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 gap-4">
14
- <SellerLocationItem />
15
- <SellerLocationItem />
16
- <SellerLocationItem />
17
- <SellerLocationItem /> */}
18
13
  </div>
19
14
  </div>
20
15
  </>
package/src/components/SellerProducts/sellerProducts.js CHANGED
@@ -1,47 +1,198 @@
1
- import React from 'react';
2
- import ProductItem from '@riosst100/pwa-marketplace/src/components/ProductItem';
3
- import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
4
- import Search from '@riosst100/pwa-marketplace/src/components/Search';
5
- import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
6
- import Pagination from '..//Pagination';
7
- import { Link } from "react-router-dom";
1
+ import React, { Fragment, Suspense, useMemo, useRef } from 'react';
2
+ import { FormattedMessage } from 'react-intl';
3
+ import { array, number, shape, string } from 'prop-types';
4
+
5
+ import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
6
+
7
+ import { useStyle } from '@magento/venia-ui/lib/classify';
8
+ import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
9
+ import FilterModalOpenButton, {
10
+ FilterModalOpenButtonShimmer
11
+ } from '@magento/venia-ui/lib/components/FilterModalOpenButton';
12
+ import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
13
+ import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
14
+ import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
15
+ import Pagination from '@magento/venia-ui/lib/components/Pagination';
16
+ import ProductSort, { ProductSortShimmer } from '@magento/venia-ui/lib/components/ProductSort';
17
+ import RichContent from '@magento/venia-ui/lib/components/RichContent';
18
+ import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
19
+ import SortedByContainer, {
20
+ SortedByContainerShimmer
21
+ } from '@magento/venia-ui/lib/components/SortedByContainer';
22
+ import defaultClasses from '@magento/venia-ui/lib/RootComponents/Category/category.module.css';
23
+ import NoProductsFound from '@magento/venia-ui/lib/RootComponents/Category/NoProductsFound';
24
+ import { useSellerProducts } from '@riosst100/pwa-marketplace/src/talons/SellerProducts/useSellerProducts';
25
+
26
+ const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
27
+ const FilterSidebar = React.lazy(() =>
28
+ import('@magento/venia-ui/lib/components/FilterSidebar')
29
+ );
30
+
31
+ const SellerProducts = props => {
32
+ const {
33
+ categoryId,
34
+ data,
35
+ isLoading,
36
+ pageControl,
37
+ sortProps,
38
+ pageSize
39
+ } = props;
40
+ const [currentSort] = sortProps;
41
+
42
+ const talonProps = useSellerProducts({
43
+ categoryId,
44
+ data,
45
+ pageSize
46
+ });
47
+
48
+ const {
49
+ availableSortMethods,
50
+ categoryName,
51
+ categoryDescription,
52
+ filters,
53
+ items,
54
+ totalCount,
55
+ totalPagesFromData
56
+ } = talonProps;
57
+
58
+ const sidebarRef = useRef(null);
59
+ const classes = useStyle(defaultClasses, props.classes);
60
+ const shouldRenderSidebarContent = useIsInViewport({
61
+ elementRef: sidebarRef
62
+ });
63
+
64
+ const shouldShowFilterButtons = filters && filters.length;
65
+ const shouldShowFilterShimmer = filters === null;
66
+
67
+ // If there are no products we can hide the sort button.
68
+ const shouldShowSortButtons = totalPagesFromData && availableSortMethods;
69
+ const shouldShowSortShimmer = !totalPagesFromData && isLoading;
70
+
71
+ const maybeFilterButtons = shouldShowFilterButtons ? (
72
+ <FilterModalOpenButton filters={filters} />
73
+ ) : shouldShowFilterShimmer ? (
74
+ <FilterModalOpenButtonShimmer />
75
+ ) : null;
76
+
77
+ const filtersModal = shouldShowFilterButtons ? (
78
+ <FilterModal filters={filters} />
79
+ ) : null;
80
+
81
+ const sidebar = shouldShowFilterButtons ? (
82
+ <FilterSidebar filters={filters} />
83
+ ) : shouldShowFilterShimmer ? (
84
+ <FilterSidebarShimmer />
85
+ ) : null;
86
+
87
+ const maybeSortButton = shouldShowSortButtons ? (
88
+ <ProductSort
89
+ sortProps={sortProps}
90
+ availableSortMethods={availableSortMethods}
91
+ />
92
+ ) : shouldShowSortShimmer ? (
93
+ <ProductSortShimmer />
94
+ ) : null;
95
+
96
+ const maybeSortContainer = shouldShowSortButtons ? (
97
+ <SortedByContainer currentSort={currentSort} />
98
+ ) : shouldShowSortShimmer ? (
99
+ <SortedByContainerShimmer />
100
+ ) : null;
101
+
102
+ const categoryResultsHeading =
103
+ totalCount > 0 ? (
104
+ <FormattedMessage
105
+ id={'categoryContent.resultCount'}
106
+ values={{
107
+ count: totalCount
108
+ }}
109
+ defaultMessage={'{count} Results'}
110
+ />
111
+ ) : isLoading ? (
112
+ <Shimmer width={5} />
113
+ ) : null;
114
+
115
+ const categoryDescriptionElement = categoryDescription ? (
116
+ <RichContent html={categoryDescription} />
117
+ ) : null;
118
+
119
+ const content = useMemo(() => {
120
+ if (!totalPagesFromData && !isLoading) {
121
+ return <NoProductsFound categoryId={categoryId} />;
122
+ }
123
+
124
+ const gallery = totalPagesFromData ? (
125
+ <Gallery items={items} />
126
+ ) : (
127
+ <GalleryShimmer items={items} />
128
+ );
129
+
130
+ const pagination = totalPagesFromData ? (
131
+ <Pagination pageControl={pageControl} />
132
+ ) : null;
133
+
134
+ return (
135
+ <Fragment>
136
+ <section className={classes.gallery}>{gallery}</section>
137
+ <div className={classes.pagination}>{pagination}</div>
138
+ </Fragment>
139
+ );
140
+ }, [
141
+ categoryId,
142
+ classes.gallery,
143
+ classes.pagination,
144
+ isLoading,
145
+ items,
146
+ pageControl,
147
+ totalPagesFromData
148
+ ]);
149
+
150
+ const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
8
151
 
9
152
  return (
10
- <>
11
- <div className='w-full mb-[30px]'>
12
- <div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
13
- <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
14
- <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
15
- </Link>
16
- <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
17
- <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
18
- </Link>
153
+ <Fragment>
154
+ <Breadcrumbs categoryId={categoryId} />
155
+ <StoreTitle>{categoryName}</StoreTitle>
156
+ <article className={classes.root} data-cy="SellerProducts-root">
157
+ <div className={classes.categoryHeader}>
158
+ <h1 aria-live="polite" className={classes.title}>
159
+ <div
160
+ className={classes.categoryTitle}
161
+ data-cy="SellerProducts-categoryTitle"
162
+ >
163
+ {categoryTitle}
164
+ </div>
165
+ </h1>
166
+ {categoryDescriptionElement}
19
167
  </div>
20
- </div>
21
- <div className='w-full flex items-start gap-x-[30px]'>
22
- <div className='xs_hidden xl_block filter-container w-full max-w-[240px]'>
23
- <Filter />
24
- </div>
25
- <div className='flex flex-col gap-y-[30px]'>
26
- <div className='flex xs_flex-wrap gap-y-4 w-full items-center justify-between'>
27
- <Search />
28
- <SortBy />
29
- </div>
30
- <div className='product-list w-full grid xs_grid-cols-2 md_grid-cols-3 lg_grid-cols-4 gap-4'>
31
- <ProductItem />
32
- <ProductItem />
33
- <ProductItem />
34
- <ProductItem />
35
- <ProductItem />
168
+ <div className={classes.contentWrapper}>
169
+ <div ref={sidebarRef} className={classes.sidebar}>
170
+ <Suspense fallback={<FilterSidebarShimmer />}>
171
+ {shouldRenderSidebarContent ? sidebar : null}
172
+ </Suspense>
36
173
  </div>
37
- <div className='pagination-container w-full flex justify-center'>
38
- <Pagination />
174
+ <div className={classes.categoryContent}>
175
+ <div className={classes.heading}>
176
+ <div
177
+ data-cy="SellerProducts-categoryInfo"
178
+ className={classes.categoryInfo}
179
+ >
180
+ {categoryResultsHeading}
181
+ </div>
182
+ <div className={classes.headerButtons}>
183
+ {maybeFilterButtons}
184
+ {maybeSortButton}
185
+ </div>
186
+ {maybeSortContainer}
187
+ </div>
188
+ {content}
189
+ <Suspense fallback={null}>{filtersModal}</Suspense>
39
190
  </div>
40
191
  </div>
41
- </div>
42
- </>
43
- )
44
- }
192
+ </article>
193
+ </Fragment>
194
+ );
195
+ };
45
196
 
46
197
  export default SellerProducts;
47
198
 
package/src/components/SellerReview/sellerReview.js CHANGED
@@ -6,8 +6,8 @@ import { Star1 } from 'iconsax-react';
6
6
  const SellerReview = () => {
7
7
  return (
8
8
  <>
9
- <div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px] '>
10
- <div className="w-full xs_max-w-full lg_max-w-[300px] px-[25px] py-10 rounded-md border border-gray-200 flex-col justify-start items-start gap-[25px] inline-flex">
9
+ <div className='w-full flex items-start gap-[30px] '>
10
+ <div className="w-full max-w-[300px] px-[25px] py-10 rounded-md border border-gray-200 flex-col justify-start items-start gap-[25px] inline-flex">
11
11
  <div className="justify-start items-end gap-[15px] inline-flex">
12
12
  <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
13
13
  <div className="flex-col justify-start items-start gap-[9px] inline-flex">
@@ -31,94 +31,94 @@ const SellerReview = () => {
31
31
  <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
32
32
  </div>
33
33
  </div>
34
- <div className="w-full flex-col items-start gap-2 flex">
35
- <div className="flex xs_w-full lg_w-fit gap-3 items-center">
36
- <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
34
+ <div className="flex-col items-start gap-2 flex">
35
+ <div className="flex gap-3 items-center">
36
+ <div className="gap-2.5 flex items-center">
37
37
  <div className="gap-[5px] flex items-center">
38
38
  <div className="w-3.5 h-3.5 relative">
39
39
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
40
40
  </div>
41
41
  <div className="gap-2.5 flex">
42
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
42
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">5</div>
43
43
  </div>
44
44
  </div>
45
- <div className="xs_w-full lg_w-40 h-[6px] relative">
45
+ <div className="w-40 h-[6px] relative">
46
46
  <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
47
47
  <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
48
48
  </div>
49
49
  </div>
50
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
50
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">12</div>
51
51
  </div>
52
- <div className="flex xs_w-full lg_w-fit gap-3 items-center">
53
- <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
52
+ <div className="flex gap-3 items-center">
53
+ <div className="gap-2.5 flex items-center">
54
54
  <div className="gap-[5px] flex items-center">
55
55
  <div className="w-3.5 h-3.5 relative">
56
56
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
57
57
  </div>
58
58
  <div className="gap-2.5 flex">
59
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
59
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">4</div>
60
60
  </div>
61
61
  </div>
62
- <div className="xs_w-full lg_w-40 h-[6px] relative">
62
+ <div className="w-40 h-[6px] relative">
63
63
  <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
64
64
  <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
65
65
  </div>
66
66
  </div>
67
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
67
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">8</div>
68
68
  </div>
69
- <div className="flex xs_w-full lg_w-fit gap-3 items-center">
70
- <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
69
+ <div className="flex gap-3 items-center">
70
+ <div className="gap-2.5 flex items-center">
71
71
  <div className="gap-[5px] flex items-center">
72
72
  <div className="w-3.5 h-3.5 relative">
73
73
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
74
74
  </div>
75
75
  <div className="gap-2.5 flex">
76
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
76
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">3</div>
77
77
  </div>
78
78
  </div>
79
- <div className="xs_w-full lg_w-40 h-[6px] relative">
79
+ <div className="w-40 h-[6px] relative">
80
80
  <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
81
81
  <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
82
82
  </div>
83
83
  </div>
84
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
84
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">5</div>
85
85
  </div>
86
- <div className="flex xs_w-full lg_w-fit gap-3 items-center">
87
- <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
86
+ <div className="flex gap-3 items-center">
87
+ <div className="gap-2.5 flex items-center">
88
88
  <div className="gap-[5px] flex items-center">
89
89
  <div className="w-3.5 h-3.5 relative">
90
90
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
91
91
  </div>
92
92
  <div className="gap-2.5 flex">
93
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
93
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">2</div>
94
94
  </div>
95
95
  </div>
96
- <div className="xs_w-full lg_w-40 h-[6px] relative">
96
+ <div className="w-40 h-[6px] relative">
97
97
  <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
98
98
  <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
99
99
  </div>
100
100
  </div>
101
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
101
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">1</div>
102
102
  </div>
103
- <div className="flex xs_w-full lg_w-fit gap-3 items-center">
104
- <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
103
+ <div className="flex gap-3 items-center">
104
+ <div className="gap-2.5 flex items-center">
105
105
  <div className="gap-[5px] flex items-center">
106
106
  <div className="w-3.5 h-3.5 relative">
107
107
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
108
108
  </div>
109
109
  <div className="gap-2.5 flex">
110
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
110
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">1</div>
111
111
  </div>
112
112
  </div>
113
- <div className="xs_w-full lg_w-40 h-[6px] relative">
113
+ <div className="w-40 h-[6px] relative">
114
114
  <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
115
115
  <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
116
116
  </div>
117
117
  </div>
118
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
118
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">0</div>
119
119
  </div>
120
120
  </div>
121
- <div className="xs_self-end lg_self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-flex">
121
+ <div className="self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-flex">
122
122
  <div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
123
123
  </div>
124
124
  </div>
package/src/components/SellerReviewItem/sellerReviewItem.js CHANGED
@@ -9,16 +9,16 @@ const SellerReviewItem = () => {
9
9
  <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
10
10
  <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
11
11
  <div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
12
- <div class="relative w-fit font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
12
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
13
13
  </div>
14
14
  <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
15
- <div class="relative w-fit mt-[-1.00px] 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>
15
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">John Doe</div>
16
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">18 January 2024</div>
17
17
  </div>
18
18
  </div>
19
- <div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
19
+ <div class="inline-flex items-start gap-[20px] relative flex-[0_0_auto]">
20
20
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
21
- <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
21
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
22
22
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
23
23
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
24
24
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
@@ -28,7 +28,7 @@ const SellerReviewItem = () => {
28
28
  </div>
29
29
  </div>
30
30
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
31
- <div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
31
+ <div class="relative w-[37px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
32
32
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
33
33
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
34
34
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
@@ -38,7 +38,7 @@ const SellerReviewItem = () => {
38
38
  </div>
39
39
  </div>
40
40
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
41
- <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
41
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
42
42
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
43
43
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
44
44
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
@@ -49,7 +49,7 @@ const SellerReviewItem = () => {
49
49
  </div>
50
50
  </div>
51
51
  </div>
52
- <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
52
+ <p class="relative self-stretch [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px]">
53
53
  Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
54
54
  </p>
55
55
  </div>
package/src/components/SortBy/index.js CHANGED
@@ -1,21 +1,13 @@
1
1
  import React from 'react';
2
- import { ArrowDown2, Filter } from 'iconsax-react';
2
+ import { ArrowDown2 } from 'iconsax-react';
3
3
 
4
4
  const Sort = () => {
5
5
  return (
6
6
  <>
7
- <div className='x-container xs_flex xs_justify-between xs_w-full xl_w-fit'>
8
- <div class="xs_flex xl_hidden flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
9
- <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
10
- <Filter color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
11
- <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
12
- </div>
13
- </div>
14
- <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
15
- <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
16
- <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
17
- <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
18
- </div>
7
+ <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-[#e6e9ea]">
8
+ <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
9
+ <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
10
+ <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
19
11
  </div>
20
12
  </div>
21
13
  </>
package/src/components/commons/Tabs/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import cn from 'classnames';
2
+ import cx from 'classnames';
3
3
 
4
4
  const Tabs = (props) => {
5
5
  const {
@@ -11,16 +11,14 @@ const Tabs = (props) => {
11
11
  tabContentContainerClassName = '',
12
12
  tabContentWrapperClassName = '',
13
13
  tabActiveClassName = '',
14
- tabWrapperClassName = '',
15
14
  } = props
16
15
 
17
16
  const [activeTabs, setActiveTabs] = React.useState(0);
18
- const rootClass = cn('mb-4 border-b border-gray-100', rootClassName);
19
- const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[16px] font-semibold', tabTitleClassName);
20
- const tabContainerClass = cn('tab-content-container', tabContentContainerClassName);
21
- const tabContentWrapperClass = cn('tab-content-wrapper', tabContentWrapperClassName);
22
- const tabActiveClass = cn('border-solid border-b-2', tabActiveClassName);
23
- const tabWrapperClass = cn('flex flex-wrap -mb-px text-sm font-medium text-center gap-4', tabWrapperClassName);
17
+ const rootClass = cx('mb-4 border-b border-gray-200 dark:border-gray-700', rootClassName);
18
+ const tabTitleClass = cx('inline-block p-4 rounded-t-lg', tabTitleClassName);
19
+ const tabContainerClass = cx('tab-content-container', tabContentContainerClassName);
20
+ const tabContentWrapperClass = cx('tab-content-wrapper', tabContentWrapperClassName);
21
+ const tabActiveClass = cx('border-solid border-b-2', tabActiveClassName)
24
22
 
25
23
  const handleSwicthTab = (index) => {
26
24
  setActiveTabs(index);
@@ -29,11 +27,11 @@ const Tabs = (props) => {
29
27
  return (
30
28
  <>
31
29
  <div className={rootClass}>
32
- <ul className={tabWrapperClass} role='tablist'>
30
+ <ul className='flex flex-wrap -mb-px text-sm font-medium text-center' role='tablist'>
33
31
  {data.map((item, index) => (
34
32
  <li className='me-2' role='presentation'>
35
33
  <button
36
- className={cn(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
34
+ className={cx(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
37
35
  id={item.id}
38
36
  role='tab'
39
37
  aria-controls={`${item.id}-tab`}
@@ -52,7 +50,7 @@ const Tabs = (props) => {
52
50
  {hasContent ? (
53
51
  <div className={tabContainerClass}>
54
52
  {data.map((item, index) => (
55
- <div className={cn(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
53
+ <div className={cx(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
56
54
  {item.content}
57
55
  </div>
58
56
  ))}
package/src/overwrites/venia-ui/lib/components/Header/header.js CHANGED
@@ -19,9 +19,8 @@ import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSe
19
19
  import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
20
20
  import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
21
21
  import { useIntl } from 'react-intl';
22
- import cn from 'classnames';
23
- // const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
24
- const SearchBar = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar'));
22
+
23
+ const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
25
24
 
26
25
  const Header = props => {
27
26
  const {
@@ -46,20 +45,19 @@ const Header = props => {
46
45
  </div>
47
46
  </div>
48
47
  );
49
- // const searchBar = isSearchOpen ? (
50
- // <Suspense fallback={searchBarFallback}>
51
- // <Route>
52
- // <SearchBar isOpen={true} ref={searchRef} />
53
- // </Route>
54
- // </Suspense>
55
- // ) : null;
48
+ const searchBar = isSearchOpen ? (
49
+ <Suspense fallback={searchBarFallback}>
50
+ <Route>
51
+ <SearchBar isOpen={isSearchOpen} ref={searchRef} />
52
+ </Route>
53
+ </Suspense>
54
+ ) : null;
56
55
 
57
56
  const { formatMessage } = useIntl();
58
57
  const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
59
58
 
60
59
  return (
61
60
  <Fragment>
62
- <PageLoadingIndicator absolute />
63
61
  <div className={classes.switchersContainer}>
64
62
  <div className={classes.switchers} data-cy="Header-switchers">
65
63
  <BecomeSellerLink />
@@ -68,43 +66,33 @@ const Header = props => {
68
66
  <CurrencySwitcher />
69
67
  </div>
70
68
  </div>
71
- <header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
72
- <div className={cn('middle-header border-b border-gray-100')}>
73
- <div className={cn('w-full max-w-[1210px] px-[15px] py-[20px] mx-[auto] flex justify-between items-center')}>
74
- <div className='flex'>
75
- <NavTrigger />
76
- <Link
77
- aria-label={title}
78
- to={resourceUrl('/')}
79
- className={''}
80
- data-cy="Header-logoContainer"
81
- >
82
- <div><b>TCG Collective</b></div>
83
- <small>Toys | Card | Games</small>
84
- </Link>
85
- </div>
86
- <div className='flex'>
87
- <Suspense fallback={searchBarFallback}>
88
- <Route>
89
- <SearchBar isOpen={true} ref={searchRef} />
90
- </Route>
91
- </Suspense>
92
- </div>
93
- <div className={classes.secondaryActions}>
94
- {/* <SearchTrigger
95
- onClick={handleSearchTriggerClick}
96
- ref={searchTriggerRef}
97
- /> */}
98
- <AccountTrigger />
99
- <CartTrigger />
100
- </div>
69
+ <header className={rootClass} data-cy="Header-root">
70
+ <div className={classes.toolbar}>
71
+ <div className={classes.primaryActions}>
72
+ <NavTrigger />
73
+ </div>
74
+
75
+ <Link
76
+ aria-label={title}
77
+ to={resourceUrl('/')}
78
+ className={classes.logoContainer}
79
+ data-cy="Header-logoContainer"
80
+ >
81
+ <div><b>TCG Collective</b></div>
82
+ <small>Toys | Card | Games</small>
83
+ </Link>
84
+ <MegaMenu />
85
+ <div className={classes.secondaryActions}>
86
+ <SearchTrigger
87
+ onClick={handleSearchTriggerClick}
88
+ ref={searchTriggerRef}
89
+ />
90
+ <AccountTrigger />
91
+ <CartTrigger />
101
92
  </div>
102
93
  </div>
103
- <MegaMenu
104
- rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
105
- megaMenuItemClassname={cn('px-0 py-[15px] leading-[20px]')}
106
- titleClassName={cn('font-medium leading-[20px]')}
107
- />
94
+ {searchBar}
95
+ <PageLoadingIndicator absolute />
108
96
  </header>
109
97
  <OnlineIndicator
110
98
  hasBeenOffline={hasBeenOffline}