@riosst100/pwa-marketplace 1.2.3 → 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 (74) 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/index.js +1 -0
  9. package/src/components/Seller/seller.js +250 -0
  10. package/src/components/Seller/sellerAddressCard.js +48 -0
  11. package/src/components/SellerDetail/index.js +1 -0
  12. package/src/components/SellerDetail/sellerDetail.js +158 -0
  13. package/src/components/SellerInformation/sellerInformation.js +54 -44
  14. package/src/components/SellerLocation/sellerLocation.js +6 -2
  15. package/src/components/SellerLocation/sellerLocationItem.js +6 -8
  16. package/src/components/SellerPage/sellerPage.js +2 -112
  17. package/src/components/SellerProducts/sellerProducts.js +33 -12
  18. package/src/components/SellerReview/sellerReview.js +29 -29
  19. package/src/components/SellerReviewItem/sellerReviewItem.js +8 -8
  20. package/src/components/SortBy/index.js +13 -5
  21. package/src/components/commons/Slider/index.js +2 -2
  22. package/src/components/commons/Tabs/index.js +11 -9
  23. package/src/overwrites/venia-ui/lib/components/Header/header.js +46 -34
  24. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenu.spec.js +91 -0
  25. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js +123 -0
  26. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/Submenu.spec.js +61 -0
  27. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/SubmenuColumn.spec.js +50 -0
  28. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap +114 -0
  29. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap +71 -0
  30. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap +59 -0
  31. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/SubmenuColumn.spec.js.snap +34 -0
  32. package/src/overwrites/venia-ui/lib/components/MegaMenu/index.js +1 -0
  33. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js +90 -0
  34. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.module.css +12 -0
  35. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js +156 -0
  36. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css +31 -0
  37. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js +89 -0
  38. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css +43 -0
  39. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js +99 -0
  40. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css +28 -0
  41. package/src/overwrites/venia-ui/lib/components/SearchBar/__stories__/searchBar.js +11 -0
  42. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap +72 -0
  43. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedCategories.spec.js.snap +30 -0
  44. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap +69 -0
  45. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProducts.spec.js.snap +7 -0
  46. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap +12 -0
  47. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/autocomplete.spec.js +52 -0
  48. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchBar.spec.js +82 -0
  49. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchField.spec.js +87 -0
  50. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedCategories.spec.js +45 -0
  51. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProduct.spec.js +43 -0
  52. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProducts.spec.js +45 -0
  53. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestions.spec.js +110 -0
  54. package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.js +172 -0
  55. package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css +62 -0
  56. package/src/overwrites/venia-ui/lib/components/SearchBar/index.js +1 -0
  57. package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.js +74 -0
  58. package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.module.css +50 -0
  59. package/src/overwrites/venia-ui/lib/components/SearchBar/searchField.js +40 -0
  60. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.js +48 -0
  61. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.module.css +13 -0
  62. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategory.js +49 -0
  63. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategory.module.css +0 -0
  64. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProduct.js +97 -0
  65. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProduct.module.css +24 -0
  66. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProducts.js +43 -0
  67. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProducts.module.css +13 -0
  68. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.js +75 -0
  69. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.module.css +6 -0
  70. package/src/talons/Seller/seller.gql.js +204 -0
  71. package/src/talons/Seller/useSeller.js +71 -0
  72. package/src/talons/SellerProducts/useSellerProducts.js +129 -0
  73. package/src/theme/vars.js +7 -0
  74. package/src/util/mapSeller.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,103 +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
- const SellerInformation = () => {
7
+ const SellerInformation = ({ seller }) => {
6
8
  return (
7
9
  <>
8
10
  <div class="flex flex-col items-start gap-[30px] px-[10px]">
9
- <div class="flex items-start justify-between relative flex-1 self-stretch w-full grow">
10
- <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">
11
13
  <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
12
- <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>
13
15
  <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
14
- <p class="relative w-[300px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[16px]">
15
- Zen Market was established in 12003 and has grown over the years to be the largest hobby store.<br />
16
+ <p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[16px]">
17
+ {seller ? seller.description : ''}<br />
16
18
  <br />
17
- +6556754325
19
+ {seller ? seller.contact_number : ''}
18
20
  </p>
19
21
  </div>
20
22
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
21
23
  <Location color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
22
- <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>
23
25
  </div>
24
26
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
25
27
  <ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
26
- <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> */}
27
34
  </div>
28
35
  </div>
29
36
  </div>
30
- <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
31
- <div class="flex flex-col w-[320px] items-start gap-[30px] relative">
37
+ <div class="flex flex-col items-start gap-[30px] relative">
32
38
  <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
33
- <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>
34
40
  <div class="inline-flex flex-col items-start relative flex-[0_0_auto]">
35
41
  <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
36
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]">
37
45
  Monday - Friday 9 AM - 5 PM<br />
38
46
  <br />
39
47
  Saturday 11 AM - 3 PM<br />
40
48
  <br />
41
49
  Sunday Close
50
+ */}
42
51
  </p>
43
52
  </div>
44
53
  </div>
45
54
  </div>
46
55
  </div>
47
- <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
48
- <div class="flex flex-col w-[320px] items-start gap-[15px] relative">
49
- <div class="inline-flex items-start gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
50
- <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>
51
59
  </div>
52
60
  <div class="flex flex-wrap w-[300px] items-start gap-[10px_10px] relative flex-[0_0_auto]">
53
- <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">
54
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]">
55
- <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>
56
66
  </div>
57
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]">
58
- <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>
59
69
  </div>
60
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]">
61
- <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>
62
72
  </div>
63
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]">
64
- <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>
65
75
  </div>
66
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]">
67
- <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>
68
78
  </div>
69
79
  <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
70
- <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>
71
81
  </div>
72
- </div>
82
+ </div> */}
73
83
  </div>
74
84
  </div>
75
85
  </div>
76
86
  <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
77
87
  <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
78
- <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>
79
89
  <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
80
- <div class="flex flex-col w-[500px] items-start gap-[2px]">
81
- <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
82
- <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Delivery is made on the same day the order is received<br /></span>
83
- </p>
84
- <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
85
- <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"><br /></span>
86
- </p>
87
- <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
88
- <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Maximum until 5 PM<br /></span>
89
- </p>
90
- <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
91
- <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"><br /></span>
92
- </p>
93
- <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
94
- <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Orders received after 17.00 WIB will be delivered the next day<br /></span>
95
- </p>
96
- <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
97
- <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"></span>
98
- </p>
90
+ <div class="flex flex-col items-start gap-[2px]">
91
+ {seller ? seller.term_and_conditions : ''}
99
92
  </div>
100
93
  </div>
94
+ {/* </div>
95
+ </div>
96
+ {seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
97
+ </div> */}
101
98
  </div>
102
99
  </div>
103
100
  <SellerLocation />
@@ -106,4 +103,17 @@ const SellerInformation = () => {
106
103
  )
107
104
  }
108
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
+
109
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/SellerPage/sellerPage.js CHANGED
@@ -1,119 +1,9 @@
1
1
  import React from 'react';
2
- import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
3
- import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
4
- import SellerProducts from '../SellerProducts';
5
- import SellerInformation from '../SellerInformation';
6
- import Reviews from '../SellerReview';
7
- import {
8
- Verify,
9
- Sms,
10
- Message,
11
- Heart,
12
- Share,
13
- BoxTick,
14
- Star1,
15
- } from 'iconsax-react';
2
+ import Seller from '@riosst100/pwa-marketplace/src/components/Seller/seller';
16
3
 
17
4
  const SellerPage = () => {
18
- const dataTabs =
19
- [
20
- {
21
- id: 'product-tab',
22
- title: 'All Products',
23
- content: <SellerProducts />
24
- },
25
- {
26
- id: 'store-information',
27
- title: 'Store Information',
28
- content: <SellerInformation />
29
- },
30
- {
31
- id: 'reviews',
32
- title: 'Reviews',
33
- content: <Reviews />
34
- }
35
- ];
36
5
  return (
37
- <div className=' py-8'>
38
- <Slider rootClassname='mb-[30px]' />
39
- <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
40
- <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
41
- <img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src="https://c.animaapp.com/2pP7niVX/img/rectangle-81@2x.png" />
42
- <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
43
- <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
44
- <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
45
- <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
46
- Zen Market
47
- </div>
48
- <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
49
- <Verify variant='Bold' color='#4E31DB' size={20} />
50
- <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
51
- Verified
52
- </div>
53
- </div>
54
- </div>
55
- <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
56
- Jurong west
57
- </div>
58
- </div>
59
- <div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
60
- <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
61
- <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
62
- <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
63
- <div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
64
- Message
65
- </div>
66
- </div>
67
- </div>
68
- <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
69
- <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
70
- <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
71
- <div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
72
- Chat With Seller
73
- </div>
74
- </div>
75
- </div>
76
- <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
77
- <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
78
- </div>
79
- <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
80
- <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
81
- </div>
82
- </div>
83
- </div>
84
- </div>
85
- <div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
86
- <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
87
- <div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
88
- <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
89
- <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
90
- 121
91
- </div>
92
- </div>
93
- <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
94
- Total Sales
95
- </div>
96
- </div>
97
- <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
98
- <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
99
- <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
100
- <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
101
- <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
102
- 4.7
103
- </div>
104
- </div>
105
- <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
106
- Rating &amp; Reviews
107
- </div>
108
- </div>
109
- </div>
110
- </div>
111
- <Tabs
112
- data={dataTabs}
113
- tabContentWrapperClassName='!p-0'
114
- hasContent
115
- />
116
- </div>
6
+ <Seller />
117
7
  )
118
8
  }
119
9
 
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
+ };