@riosst100/pwa-marketplace 1.2.4 → 1.2.5

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 (70) hide show
  1. package/package.json +1 -1
  2. package/src/componentOverrideMapping.js +2 -1
  3. package/src/components/Filter/index.js +7 -7
  4. package/src/components/OperatingHours/index.js +1 -0
  5. package/src/components/OperatingHours/operatingHours.js +32 -0
  6. package/src/components/Pagination/index.js +26 -17
  7. package/src/components/Search/index.js +1 -1
  8. package/src/components/Seller/seller.js +137 -46
  9. package/src/components/Seller/sellerAddressCard.js +48 -0
  10. package/src/components/SellerDetail/index.js +1 -0
  11. package/src/components/SellerDetail/sellerDetail.js +158 -0
  12. package/src/components/SellerInformation/sellerInformation.js +51 -26
  13. package/src/components/SellerLocation/sellerLocation.js +6 -2
  14. package/src/components/SellerLocation/sellerLocationItem.js +6 -8
  15. package/src/components/SellerProducts/sellerProducts.js +33 -12
  16. package/src/components/SellerReview/sellerReview.js +29 -29
  17. package/src/components/SellerReviewItem/sellerReviewItem.js +8 -8
  18. package/src/components/SortBy/index.js +13 -5
  19. package/src/components/commons/Tabs/index.js +11 -9
  20. package/src/overwrites/venia-ui/lib/components/Header/header.js +46 -34
  21. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenu.spec.js +91 -0
  22. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js +123 -0
  23. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/Submenu.spec.js +61 -0
  24. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/SubmenuColumn.spec.js +50 -0
  25. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap +114 -0
  26. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap +71 -0
  27. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap +59 -0
  28. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/SubmenuColumn.spec.js.snap +34 -0
  29. package/src/overwrites/venia-ui/lib/components/MegaMenu/index.js +1 -0
  30. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js +90 -0
  31. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.module.css +12 -0
  32. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js +156 -0
  33. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css +31 -0
  34. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js +89 -0
  35. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css +43 -0
  36. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js +99 -0
  37. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css +28 -0
  38. package/src/overwrites/venia-ui/lib/components/SearchBar/__stories__/searchBar.js +11 -0
  39. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap +72 -0
  40. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedCategories.spec.js.snap +30 -0
  41. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap +69 -0
  42. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProducts.spec.js.snap +7 -0
  43. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap +12 -0
  44. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/autocomplete.spec.js +52 -0
  45. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchBar.spec.js +82 -0
  46. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchField.spec.js +87 -0
  47. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedCategories.spec.js +45 -0
  48. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProduct.spec.js +43 -0
  49. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProducts.spec.js +45 -0
  50. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestions.spec.js +110 -0
  51. package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.js +172 -0
  52. package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css +62 -0
  53. package/src/overwrites/venia-ui/lib/components/SearchBar/index.js +1 -0
  54. package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.js +74 -0
  55. package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.module.css +50 -0
  56. package/src/overwrites/venia-ui/lib/components/SearchBar/searchField.js +40 -0
  57. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.js +48 -0
  58. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.module.css +13 -0
  59. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategory.js +49 -0
  60. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategory.module.css +0 -0
  61. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProduct.js +97 -0
  62. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProduct.module.css +24 -0
  63. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProducts.js +43 -0
  64. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProducts.module.css +13 -0
  65. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.js +75 -0
  66. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.module.css +6 -0
  67. package/src/talons/Seller/seller.gql.js +70 -5
  68. package/src/talons/Seller/useSeller.js +6 -1
  69. package/src/talons/SellerProducts/useSellerProducts.js +129 -0
  70. package/src/theme/vars.js +7 -0
package/src/components/SellerDetail/sellerDetail.js ADDED
@@ -0,0 +1,158 @@
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
+ import Image from '@magento/venia-ui/lib/components/Image';
22
+
23
+ const SellerDetail = props => {
24
+ const talonProps = useSeller({
25
+ mapSeller
26
+ });
27
+
28
+ const { error, loading, seller } = talonProps;
29
+
30
+ if (loading && !seller)
31
+ return '';
32
+ // return <SellerShimmer />;
33
+ if (error && !seller) return <ErrorView />;
34
+ if (!seller) {
35
+ return (
36
+ <h1>
37
+ <FormattedMessage
38
+ id={'seller.notFound'}
39
+ defaultMessage={
40
+ 'Seller Not Found.'
41
+ }
42
+ />
43
+ </h1>
44
+ );
45
+ }
46
+
47
+ const dataTabs =
48
+ [
49
+ {
50
+ id: 'product-tab',
51
+ title: 'All Products',
52
+ content: <SellerProducts data={seller.products} />
53
+ },
54
+ {
55
+ id: 'store-information',
56
+ title: 'Store Information',
57
+ content: <SellerInformation seller={seller} />
58
+ },
59
+ {
60
+ id: 'reviews',
61
+ title: 'Reviews',
62
+ content: <Reviews />
63
+ }
64
+ ];
65
+
66
+ return (
67
+ <Fragment>
68
+ <StoreTitle>{seller.name}</StoreTitle>
69
+ <Meta name="description" content={seller.description} />
70
+ <div className='py-8'>
71
+ <Slider seller={seller} rootClassname='mb-[30px]' />
72
+ <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
73
+ <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
74
+ {seller && seller.thumbnail && seller.thumbnail !== undefined ? <Image
75
+ alt={seller.name}
76
+ width='100'
77
+ src={seller.thumbnail || ''}
78
+ /> : ''}
79
+ <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
80
+ <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
81
+ <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
82
+ <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
83
+ {seller ? seller.name : ''}
84
+ </div>
85
+ <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
86
+ <Verify variant='Bold' color='#4E31DB' size={20} />
87
+ <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
88
+ Verified
89
+ </div>
90
+ </div>
91
+ </div>
92
+ <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
93
+ Jurong west
94
+ </div>
95
+ </div>
96
+ <div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
97
+ <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
98
+ <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
99
+ <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
100
+ <div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
101
+ Message
102
+ </div>
103
+ </div>
104
+ </div>
105
+ <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
106
+ <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
107
+ <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
108
+ <div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
109
+ Chat With Seller
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <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]">
114
+ <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
115
+ </div>
116
+ <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]">
117
+ <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
123
+ <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
124
+ <div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
125
+ <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
126
+ <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
127
+ {seller ? seller.sale : 0}
128
+ </div>
129
+ </div>
130
+ <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
131
+ Total Sales
132
+ </div>
133
+ </div>
134
+ <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
135
+ <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
136
+ <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
137
+ <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
138
+ <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
139
+ 4.7
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
+ Rating &amp; Reviews
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <Tabs
149
+ data={dataTabs}
150
+ tabContentWrapperClassName='!p-0'
151
+ hasContent
152
+ />
153
+ </div>
154
+ </Fragment>
155
+ )
156
+ }
157
+
158
+ export default SellerDetail;
package/src/components/SellerInformation/sellerInformation.js CHANGED
@@ -1,88 +1,100 @@
1
1
  import React from 'react';
2
2
  import SellerLocation from '../SellerLocation';
3
3
  import { Location, ShopAdd } from 'iconsax-react';
4
+ import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
5
+ import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
4
6
 
5
7
  const SellerInformation = ({ seller }) => {
6
- console.log(seller.operating_hours)
7
8
  return (
8
9
  <>
9
10
  <div class="flex flex-col items-start gap-[30px] px-[10px]">
10
- <div class="flex items-start justify-between relative flex-1 self-stretch w-full grow">
11
- <div class="flex flex-col w-[320px] items-start gap-[30px] relative self-stretch">
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">
12
13
  <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
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>
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
15
  <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
15
- <p class="relative w-[300px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[16px]">
16
- {seller ? seller.description : ''}
17
- <br />
16
+ <p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[16px]">
17
+ {seller ? seller.description : ''}<br />
18
18
  <br />
19
19
  {seller ? seller.contact_number : ''}
20
20
  </p>
21
21
  </div>
22
22
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
23
23
  <Location color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
24
- <p class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">612, Jurong West Street 65</p>
24
+ <p class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap"><SellerAddressCard address={seller} /></p>
25
25
  </div>
26
26
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
27
27
  <ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
28
- <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: December 2023</div>
28
+ <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> */}
29
34
  </div>
30
35
  </div>
31
36
  </div>
32
- <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
33
- <div class="flex flex-col w-[320px] items-start gap-[30px] relative">
37
+ <div class="flex flex-col items-start gap-[30px] relative">
34
38
  <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
35
- <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>
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
40
  <div class="inline-flex flex-col items-start relative flex-[0_0_auto]">
37
41
  <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
38
42
  <p class="relative w-[186px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
43
+ <OperatingHours values={seller.operating_hours} />
44
+ {/* <p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal]">
39
45
  Monday - Friday 9 AM - 5 PM<br />
40
46
  <br />
41
47
  Saturday 11 AM - 3 PM<br />
42
48
  <br />
43
49
  Sunday Close
50
+ */}
44
51
  </p>
45
52
  </div>
46
53
  </div>
47
54
  </div>
48
55
  </div>
49
- <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
50
- <div class="flex flex-col w-[320px] items-start gap-[15px] relative">
51
- <div class="inline-flex items-start gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
52
- <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>
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>
53
59
  </div>
54
60
  <div class="flex flex-wrap w-[300px] items-start gap-[10px_10px] relative flex-[0_0_auto]">
55
- <div class="flex flex-wrap items-center gap-[0px_10px] px-0 py-[5px] relative flex-1 grow">
61
+ {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">
56
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]">
57
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Yishun</div>
65
+ <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Yishun</div>
58
66
  </div>
59
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]">
60
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong West</div>
68
+ <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong West</div>
61
69
  </div>
62
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]">
63
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong East</div>
71
+ <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong East</div>
64
72
  </div>
65
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]">
66
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Seletar</div>
74
+ <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Seletar</div>
67
75
  </div>
68
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]">
69
- <div class="mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] text-[#1b1b1b] text-[14px] leading-[normal] whitespace-nowrap relative w-fit font-normal tracking-[0]">Serangoon</div>
77
+ <div class="mt-[-1.00px] text-[14px] leading-[normal] whitespace-nowrap relative w-fit font-normal tracking-[0]">Serangoon</div>
70
78
  </div>
71
79
  <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
72
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Bukit Batok</div>
80
+ <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Bukit Batok</div>
73
81
  </div>
74
- </div>
82
+ </div> */}
75
83
  </div>
76
84
  </div>
77
85
  </div>
78
86
  <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
79
87
  <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
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 &amp; Condition</div>
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>
81
89
  <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
82
- <div class="flex flex-col w-[500px] items-start gap-[2px]">
90
+ <div class="flex flex-col items-start gap-[2px]">
83
91
  {seller ? seller.term_and_conditions : ''}
84
92
  </div>
85
93
  </div>
94
+ {/* </div>
95
+ </div>
96
+ {seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
97
+ </div> */}
86
98
  </div>
87
99
  </div>
88
100
  <SellerLocation />
@@ -91,4 +103,17 @@ const SellerInformation = ({ seller }) => {
91
103
  )
92
104
  }
93
105
 
106
+ const SellerShipTo = ({seller}) => {
107
+ const shipTo = seller ? seller.ship_to : '';
108
+ const shipToCountry = seller ? seller.ship_to_country : '';
109
+
110
+ return <>
111
+ <div class="flex flex-wrap items-center gap-[0px_10px] px-0 py-[5px] relative flex-1 grow">
112
+ <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]">
113
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{shipTo}<br />{shipToCountry}</div>
114
+ </div>
115
+ </div>
116
+ </>
117
+ }
118
+
94
119
  export default SellerInformation;
package/src/components/SellerLocation/sellerLocation.js CHANGED
@@ -1,16 +1,20 @@
1
1
  import React from 'react';
2
2
  import SellerLocationItem from './sellerLocationItem';
3
3
 
4
- const SellerLocation = () => {
4
+ const SellerLocation = ({ storeLocators }) => {
5
5
  return (
6
6
  <>
7
7
  <div class="w-full flex flex-col items-start gap-[25px]">
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 grid-cols-3 gap-4">
10
+ {storeLocators && storeLocators.map((value, index) =>
11
+ <SellerLocationItem storeLocator={value} />
12
+ )}
13
+ {/* <div class="w-full grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 gap-4">
10
14
  <SellerLocationItem />
11
15
  <SellerLocationItem />
12
16
  <SellerLocationItem />
13
- <SellerLocationItem />
17
+ <SellerLocationItem /> */}
14
18
  </div>
15
19
  </div>
16
20
  </>
package/src/components/SellerLocation/sellerLocationItem.js CHANGED
@@ -1,24 +1,22 @@
1
1
  import React from 'react';
2
2
  import { Location, Clock } from 'iconsax-react';
3
+ import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
4
+ import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
3
5
 
4
- const SellerLocationItem = () => {
6
+ const SellerLocationItem = ({ storeLocator }) => {
5
7
  return (
6
8
  <>
7
9
  <div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
8
- <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[16px] tracking-[0] leading-[normal]">Zen Market Kitchener</div>
10
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[16px] tracking-[0] leading-[normal]">{storeLocator ? storeLocator.name : ''}</div>
9
11
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
10
12
  <Location color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
11
- <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]">180 Kitchener Rd, Singapura</div>
13
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]"><SellerAddressCard address={storeLocator} /></div>
12
14
  </div>
13
15
  <div class="flex flex-col w-[320px] items-end relative flex-[0_0_auto] mr-[-10.00px]">
14
16
  <div class="flex items-center gap-[10px] relative self-stretch w-full flex-[0_0_auto]">
15
17
  <Clock color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
16
- <p class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[24px] whitespace-nowrap">Monday - Friday 9 AM - 5 PM</p>
18
+ {storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}
17
19
  </div>
18
- <p class="relative w-[292px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[24px]">
19
- Saturday 11 AM - 3 PM<br />
20
- Sunday Close
21
- </p>
22
20
  </div>
23
21
  </div>
24
22
  </>
package/src/components/SellerProducts/sellerProducts.js CHANGED
@@ -4,30 +4,30 @@ import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
4
4
  import Search from '@riosst100/pwa-marketplace/src/components/Search';
5
5
  import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
6
6
  import Pagination from '..//Pagination';
7
+ import { Link } from "react-router-dom";
7
8
 
8
- const SellerProducts = () => {
9
9
  return (
10
10
  <>
11
11
  <div className='w-full mb-[30px]'>
12
- <div class='flex w-[1180px] items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-[#e6e9ea]'>
13
- <div class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
14
- <div class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</div>
15
- </div>
16
- <div class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
17
- <div class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</div>
18
- </div>
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>
19
19
  </div>
20
20
  </div>
21
21
  <div className='w-full flex items-start gap-x-[30px]'>
22
- <div className='filter-container w-full max-w-[240px]'>
22
+ <div className='xs_hidden xl_block filter-container w-full max-w-[240px]'>
23
23
  <Filter />
24
24
  </div>
25
25
  <div className='flex flex-col gap-y-[30px]'>
26
- <div className='flex w-full items-center justify-between'>
26
+ <div className='flex xs_flex-wrap gap-y-4 w-full items-center justify-between'>
27
27
  <Search />
28
28
  <SortBy />
29
29
  </div>
30
- <div className='product-list w-full grid grid-cols-4 gap-4'>
30
+ <div className='product-list w-full grid xs_grid-cols-2 md_grid-cols-3 lg_grid-cols-4 gap-4'>
31
31
  <ProductItem />
32
32
  <ProductItem />
33
33
  <ProductItem />
@@ -43,4 +43,25 @@ const SellerProducts = () => {
43
43
  )
44
44
  }
45
45
 
46
- export default SellerProducts;
46
+ export default SellerProducts;
47
+
48
+ SellerProducts.propTypes = {
49
+ classes: shape({
50
+ gallery: string,
51
+ pagination: string,
52
+ root: string,
53
+ categoryHeader: string,
54
+ title: string,
55
+ categoryTitle: string,
56
+ sidebar: string,
57
+ categoryContent: string,
58
+ heading: string,
59
+ categoryInfo: string,
60
+ headerButtons: string
61
+ }),
62
+ // sortProps contains the following structure:
63
+ // [{sortDirection: string, sortAttribute: string, sortText: string},
64
+ // React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}]
65
+ sortProps: array,
66
+ pageSize: number
67
+ };
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 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">
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">
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="flex-col items-start gap-2 flex">
35
- <div className="flex gap-3 items-center">
36
- <div className="gap-2.5 flex items-center">
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">
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 font-['Noto Sans'] leading-[18px]">5</div>
42
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
43
43
  </div>
44
44
  </div>
45
- <div className="w-40 h-[6px] relative">
45
+ <div className="xs_w-full lg_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 font-['Noto Sans'] leading-[18px]">12</div>
50
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
51
51
  </div>
52
- <div className="flex gap-3 items-center">
53
- <div className="gap-2.5 flex items-center">
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">
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 font-['Noto Sans'] leading-[18px]">4</div>
59
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
60
60
  </div>
61
61
  </div>
62
- <div className="w-40 h-[6px] relative">
62
+ <div className="xs_w-full lg_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 font-['Noto Sans'] leading-[18px]">8</div>
67
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
68
68
  </div>
69
- <div className="flex gap-3 items-center">
70
- <div className="gap-2.5 flex items-center">
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">
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 font-['Noto Sans'] leading-[18px]">3</div>
76
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
77
77
  </div>
78
78
  </div>
79
- <div className="w-40 h-[6px] relative">
79
+ <div className="xs_w-full lg_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 font-['Noto Sans'] leading-[18px]">5</div>
84
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
85
85
  </div>
86
- <div className="flex gap-3 items-center">
87
- <div className="gap-2.5 flex items-center">
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">
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 font-['Noto Sans'] leading-[18px]">2</div>
93
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
94
94
  </div>
95
95
  </div>
96
- <div className="w-40 h-[6px] relative">
96
+ <div className="xs_w-full lg_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 font-['Noto Sans'] leading-[18px]">1</div>
101
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
102
102
  </div>
103
- <div className="flex gap-3 items-center">
104
- <div className="gap-2.5 flex items-center">
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">
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 font-['Noto Sans'] leading-[18px]">1</div>
110
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
111
111
  </div>
112
112
  </div>
113
- <div className="w-40 h-[6px] relative">
113
+ <div className="xs_w-full lg_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 font-['Noto Sans'] leading-[18px]">0</div>
118
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
119
119
  </div>
120
120
  </div>
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">
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">
122
122
  <div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
123
123
  </div>
124
124
  </div>