@riosst100/pwa-marketplace 1.2.7 → 1.2.8

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 (126) hide show
  1. package/package.json +1 -1
  2. package/src/Utilities/graphQL.js +76 -76
  3. package/src/componentOverrideMapping.js +17 -17
  4. package/src/components/BecomeSeller/becomeSeller.js +335 -335
  5. package/src/components/BecomeSeller/becomeSeller.module.css +46 -46
  6. package/src/components/BecomeSellerLink/becomeSellerLink.js +52 -52
  7. package/src/components/BecomeSellerLink/becomeSellerLink.module.css +12 -12
  8. package/src/components/BecomeSellerPage/becomeSellerPage.js +45 -45
  9. package/src/components/BecomeSellerPage/becomeSellerPage.module.css +21 -21
  10. package/src/components/Filter/index.js +53 -53
  11. package/src/components/Header/becomeSellerLink.js +28 -28
  12. package/src/components/Header/becomeSellerLink.module.css +12 -12
  13. package/src/components/Header/websiteSwitcher.js +109 -109
  14. package/src/components/OperatingHours/index.js +1 -0
  15. package/src/components/OperatingHours/operatingHours.js +35 -0
  16. package/src/components/Pagination/index.js +49 -49
  17. package/src/components/PhoneTextInput/phoneTextInput.module.css +21 -21
  18. package/src/components/ProductItem/index.js +50 -50
  19. package/src/components/Search/index.js +16 -16
  20. package/src/components/Seller/index.js +1 -1
  21. package/src/components/Seller/seller.js +57 -249
  22. package/src/components/Seller/sellerAddressCard.js +48 -0
  23. package/src/components/SellerAccountPage/sellerAccountPage.js +110 -110
  24. package/src/components/SellerAccountPage/sellerAccountPage.module.css +55 -55
  25. package/src/components/SellerCountry/sellerCountry.gql.js +11 -11
  26. package/src/components/SellerDetail/index.js +1 -0
  27. package/src/components/SellerDetail/sellerDetail.js +161 -0
  28. package/src/components/SellerInformation/index.js +1 -1
  29. package/src/components/SellerInformation/sellerInformation.js +86 -90
  30. package/src/components/SellerLocation/index.js +1 -1
  31. package/src/components/SellerLocation/sellerLocation.js +19 -19
  32. package/src/components/SellerLocation/sellerLocationItem.js +27 -27
  33. package/src/components/SellerPage/sellerPage.js +9 -9
  34. package/src/components/SellerProducts/sellerProducts.js +46 -46
  35. package/src/components/SellerReview/index.js +1 -1
  36. package/src/components/SellerReview/sellerReview.js +143 -143
  37. package/src/components/SellerReviewItem/sellerReviewItem.js +60 -60
  38. package/src/components/SellerVerification/sellerVerification.js +198 -198
  39. package/src/components/SellerVerification/sellerVerification.module.css +47 -47
  40. package/src/components/SellerVerificationPage/sellerVerificationPage.js +43 -43
  41. package/src/components/SellerVerificationPage/sellerVerificationPage.module.css +21 -21
  42. package/src/components/SortBy/index.js +24 -24
  43. package/src/components/WebsiteSwitcher/websiteSwitcher.js +109 -109
  44. package/src/components/commons/Slider/index.js +13 -13
  45. package/src/components/commons/Tabs/index.js +64 -64
  46. package/src/index.js +6 -6
  47. package/src/intercept.js +113 -113
  48. package/src/moduleOverrideWebpackPlugin.js +70 -70
  49. package/src/overwrites/peregrine/lib/store/actions/user/asyncActions.js +96 -96
  50. package/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js +74 -74
  51. package/src/overwrites/peregrine/lib/talons/Adapter/useAdapter.js +208 -208
  52. package/src/overwrites/peregrine/lib/talons/Header/storeSwitcher.gql.js +45 -45
  53. package/src/overwrites/peregrine/lib/talons/Header/useStoreSwitcher.js +204 -204
  54. package/src/overwrites/peregrine/lib/talons/Region/useRegion.js +102 -102
  55. package/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js +56 -56
  56. package/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js +226 -226
  57. package/src/overwrites/peregrine/lib/util/deriveErrorMessage.js +34 -34
  58. package/src/overwrites/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql +11 -11
  59. package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js +112 -112
  60. package/src/overwrites/venia-ui/lib/components/Header/header.js +130 -130
  61. package/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js +105 -105
  62. package/src/overwrites/venia-ui/lib/components/Header/switcherItem.js +47 -47
  63. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenu.spec.js +91 -91
  64. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js +123 -123
  65. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/Submenu.spec.js +61 -61
  66. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/SubmenuColumn.spec.js +50 -50
  67. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap +114 -114
  68. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap +71 -71
  69. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/Submenu.spec.js.snap +59 -59
  70. package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/__snapshots__/SubmenuColumn.spec.js.snap +34 -34
  71. package/src/overwrites/venia-ui/lib/components/MegaMenu/index.js +1 -1
  72. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js +90 -90
  73. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.module.css +12 -12
  74. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js +156 -156
  75. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.module.css +30 -30
  76. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js +89 -89
  77. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css +42 -42
  78. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js +99 -99
  79. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css +28 -28
  80. package/src/overwrites/venia-ui/lib/components/SearchBar/__stories__/searchBar.js +11 -11
  81. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap +72 -72
  82. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedCategories.spec.js.snap +30 -30
  83. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap +69 -69
  84. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestedProducts.spec.js.snap +7 -7
  85. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/suggestions.spec.js.snap +12 -12
  86. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/autocomplete.spec.js +52 -52
  87. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchBar.spec.js +82 -82
  88. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/searchField.spec.js +87 -87
  89. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedCategories.spec.js +45 -45
  90. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProduct.spec.js +43 -43
  91. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestedProducts.spec.js +45 -45
  92. package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestions.spec.js +110 -110
  93. package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.js +172 -172
  94. package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css +62 -62
  95. package/src/overwrites/venia-ui/lib/components/SearchBar/index.js +1 -1
  96. package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.js +74 -74
  97. package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.module.css +49 -49
  98. package/src/overwrites/venia-ui/lib/components/SearchBar/searchField.js +40 -40
  99. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.js +48 -48
  100. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.module.css +13 -13
  101. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategory.js +49 -49
  102. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProduct.js +97 -97
  103. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProduct.module.css +24 -24
  104. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProducts.js +43 -43
  105. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedProducts.module.css +13 -13
  106. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.js +75 -75
  107. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.module.css +6 -6
  108. package/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js +75 -75
  109. package/src/overwrites/venia-ui/lib/targets/venia-ui-intercept.js +70 -70
  110. package/src/queries/getAvailableWebsitesConfigData.graphql +14 -14
  111. package/src/queries/index.js +30 -30
  112. package/src/talons/BecomeSeller/becomeSeller.gql.js +45 -45
  113. package/src/talons/BecomeSeller/useBecomeSeller.js +145 -145
  114. package/src/talons/BecomeSellerLink/useBecomeSellerLink.js +11 -11
  115. package/src/talons/BecomeSellerPage/useBecomeSellerPage.js +76 -76
  116. package/src/talons/Header/useBecomeSellerLink.js +13 -13
  117. package/src/talons/Header/useWebsiteSwitcher.js +218 -218
  118. package/src/talons/Seller/seller.gql.js +204 -139
  119. package/src/talons/Seller/useSeller.js +71 -66
  120. package/src/talons/SellerAccountPage/useSellerAccountPage.js +174 -174
  121. package/src/talons/SellerCountry/useSellerCountry.js +25 -25
  122. package/src/talons/WebsiteByIp/getWebsiteByIp.gql.js +13 -13
  123. package/src/talons/WebsiteByIp/useWebsiteByIp.js +34 -34
  124. package/src/talons/WebsiteSwitcher/useWebsiteSwitcher.js +218 -218
  125. package/src/theme/vars.js +6 -6
  126. package/src/util/mapSeller.js +7 -7
package/src/components/SellerProducts/sellerProducts.js CHANGED
@@ -1,47 +1,47 @@
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";
8
-
9
- const SellerProducts = () => {
10
- return (
11
- <>
12
- <div className='w-full mb-[30px]'>
13
- <div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
14
- <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
15
- <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
16
- </Link>
17
- <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
18
- <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
19
- </Link>
20
- </div>
21
- </div>
22
- <div className='w-full flex items-start gap-x-[30px]'>
23
- <div className='xs_hidden xl_block filter-container w-full max-w-[240px]'>
24
- <Filter />
25
- </div>
26
- <div className='flex flex-col gap-y-[30px]'>
27
- <div className='flex xs_flex-wrap gap-y-4 w-full items-center justify-between'>
28
- <Search />
29
- <SortBy />
30
- </div>
31
- <div className='product-list w-full grid xs_grid-cols-2 md_grid-cols-3 lg_grid-cols-4 gap-4'>
32
- <ProductItem />
33
- <ProductItem />
34
- <ProductItem />
35
- <ProductItem />
36
- <ProductItem />
37
- </div>
38
- <div className='pagination-container w-full flex justify-center'>
39
- <Pagination />
40
- </div>
41
- </div>
42
- </div>
43
- </>
44
- )
45
- }
46
-
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";
8
+
9
+ const SellerProducts = () => {
10
+ return (
11
+ <>
12
+ <div className='w-full mb-[30px]'>
13
+ <div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
14
+ <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
15
+ <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
16
+ </Link>
17
+ <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
18
+ <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
19
+ </Link>
20
+ </div>
21
+ </div>
22
+ <div className='w-full flex items-start gap-x-[30px]'>
23
+ <div className='xs_hidden xl_block filter-container w-full max-w-[240px]'>
24
+ <Filter />
25
+ </div>
26
+ <div className='flex flex-col gap-y-[30px]'>
27
+ <div className='flex xs_flex-wrap gap-y-4 w-full items-center justify-between'>
28
+ <Search />
29
+ <SortBy />
30
+ </div>
31
+ <div className='product-list w-full grid xs_grid-cols-2 md_grid-cols-3 lg_grid-cols-4 gap-4'>
32
+ <ProductItem />
33
+ <ProductItem />
34
+ <ProductItem />
35
+ <ProductItem />
36
+ <ProductItem />
37
+ </div>
38
+ <div className='pagination-container w-full flex justify-center'>
39
+ <Pagination />
40
+ </div>
41
+ </div>
42
+ </div>
43
+ </>
44
+ )
45
+ }
46
+
47
47
  export default SellerProducts;
package/src/components/SellerReview/index.js CHANGED
@@ -1 +1 @@
1
- export { default } from './sellerReview';
1
+ export { default } from './sellerReview';
package/src/components/SellerReview/sellerReview.js CHANGED
@@ -1,144 +1,144 @@
1
- import React from 'react';
2
- import SellerReviewItem from '../SellerReviewItem';
3
- import Pagination from '../Pagination';
4
- import { Star1 } from 'iconsax-react';
5
-
6
- const SellerReview = () => {
7
- return (
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">
11
- <div className="justify-start items-end gap-[15px] inline-flex">
12
- <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
13
- <div className="flex-col justify-start items-start gap-[9px] inline-flex">
14
- <div className="justify-start items-start gap-1.5 inline-flex">
15
- <div className="w-3.5 h-3.5 relative">
16
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
17
- </div>
18
- <div className="w-3.5 h-3.5 relative">
19
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
20
- </div>
21
- <div className="w-3.5 h-3.5 relative">
22
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
23
- </div>
24
- <div className="w-3.5 h-3.5 relative">
25
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
26
- </div>
27
- <div className="w-3.5 h-3.5 relative">
28
- <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
29
- </div>
30
- </div>
31
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
32
- </div>
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">
37
- <div className="gap-[5px] flex items-center">
38
- <div className="w-3.5 h-3.5 relative">
39
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
40
- </div>
41
- <div className="gap-2.5 flex">
42
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
43
- </div>
44
- </div>
45
- <div className="xs_w-full lg_w-40 h-[6px] relative">
46
- <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
47
- <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
48
- </div>
49
- </div>
50
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
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">
54
- <div className="gap-[5px] flex items-center">
55
- <div className="w-3.5 h-3.5 relative">
56
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
57
- </div>
58
- <div className="gap-2.5 flex">
59
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
60
- </div>
61
- </div>
62
- <div className="xs_w-full lg_w-40 h-[6px] relative">
63
- <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
64
- <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
65
- </div>
66
- </div>
67
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
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">
71
- <div className="gap-[5px] flex items-center">
72
- <div className="w-3.5 h-3.5 relative">
73
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
74
- </div>
75
- <div className="gap-2.5 flex">
76
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
77
- </div>
78
- </div>
79
- <div className="xs_w-full lg_w-40 h-[6px] relative">
80
- <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
81
- <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
82
- </div>
83
- </div>
84
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
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">
88
- <div className="gap-[5px] flex items-center">
89
- <div className="w-3.5 h-3.5 relative">
90
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
91
- </div>
92
- <div className="gap-2.5 flex">
93
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
94
- </div>
95
- </div>
96
- <div className="xs_w-full lg_w-40 h-[6px] relative">
97
- <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
98
- <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
99
- </div>
100
- </div>
101
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
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">
105
- <div className="gap-[5px] flex items-center">
106
- <div className="w-3.5 h-3.5 relative">
107
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
108
- </div>
109
- <div className="gap-2.5 flex">
110
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
111
- </div>
112
- </div>
113
- <div className="xs_w-full lg_w-40 h-[6px] relative">
114
- <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
115
- <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
116
- </div>
117
- </div>
118
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
119
- </div>
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">
122
- <div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
123
- </div>
124
- </div>
125
- <div className='flex flex-col w-full'>
126
- <div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
127
- <SellerReviewItem />
128
- <SellerReviewItem />
129
- <SellerReviewItem />
130
- <SellerReviewItem />
131
- <SellerReviewItem />
132
- <SellerReviewItem />
133
- <SellerReviewItem />
134
- </div>
135
- <div className='pagination-container w-full flex justify-center'>
136
- <Pagination />
137
- </div>
138
- </div>
139
- </div>
140
- </>
141
- )
142
- }
143
-
1
+ import React from 'react';
2
+ import SellerReviewItem from '../SellerReviewItem';
3
+ import Pagination from '../Pagination';
4
+ import { Star1 } from 'iconsax-react';
5
+
6
+ const SellerReview = () => {
7
+ return (
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">
11
+ <div className="justify-start items-end gap-[15px] inline-flex">
12
+ <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
13
+ <div className="flex-col justify-start items-start gap-[9px] inline-flex">
14
+ <div className="justify-start items-start gap-1.5 inline-flex">
15
+ <div className="w-3.5 h-3.5 relative">
16
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
17
+ </div>
18
+ <div className="w-3.5 h-3.5 relative">
19
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
20
+ </div>
21
+ <div className="w-3.5 h-3.5 relative">
22
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
23
+ </div>
24
+ <div className="w-3.5 h-3.5 relative">
25
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
26
+ </div>
27
+ <div className="w-3.5 h-3.5 relative">
28
+ <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
29
+ </div>
30
+ </div>
31
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
32
+ </div>
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">
37
+ <div className="gap-[5px] flex items-center">
38
+ <div className="w-3.5 h-3.5 relative">
39
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
40
+ </div>
41
+ <div className="gap-2.5 flex">
42
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
43
+ </div>
44
+ </div>
45
+ <div className="xs_w-full lg_w-40 h-[6px] relative">
46
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
47
+ <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
48
+ </div>
49
+ </div>
50
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
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">
54
+ <div className="gap-[5px] flex items-center">
55
+ <div className="w-3.5 h-3.5 relative">
56
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
57
+ </div>
58
+ <div className="gap-2.5 flex">
59
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
60
+ </div>
61
+ </div>
62
+ <div className="xs_w-full lg_w-40 h-[6px] relative">
63
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
64
+ <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
65
+ </div>
66
+ </div>
67
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
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">
71
+ <div className="gap-[5px] flex items-center">
72
+ <div className="w-3.5 h-3.5 relative">
73
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
74
+ </div>
75
+ <div className="gap-2.5 flex">
76
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
77
+ </div>
78
+ </div>
79
+ <div className="xs_w-full lg_w-40 h-[6px] relative">
80
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
81
+ <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
82
+ </div>
83
+ </div>
84
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
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">
88
+ <div className="gap-[5px] flex items-center">
89
+ <div className="w-3.5 h-3.5 relative">
90
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
91
+ </div>
92
+ <div className="gap-2.5 flex">
93
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
94
+ </div>
95
+ </div>
96
+ <div className="xs_w-full lg_w-40 h-[6px] relative">
97
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
98
+ <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
99
+ </div>
100
+ </div>
101
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
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">
105
+ <div className="gap-[5px] flex items-center">
106
+ <div className="w-3.5 h-3.5 relative">
107
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
108
+ </div>
109
+ <div className="gap-2.5 flex">
110
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
111
+ </div>
112
+ </div>
113
+ <div className="xs_w-full lg_w-40 h-[6px] relative">
114
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
115
+ <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
116
+ </div>
117
+ </div>
118
+ <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
119
+ </div>
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">
122
+ <div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
123
+ </div>
124
+ </div>
125
+ <div className='flex flex-col w-full'>
126
+ <div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
127
+ <SellerReviewItem />
128
+ <SellerReviewItem />
129
+ <SellerReviewItem />
130
+ <SellerReviewItem />
131
+ <SellerReviewItem />
132
+ <SellerReviewItem />
133
+ <SellerReviewItem />
134
+ </div>
135
+ <div className='pagination-container w-full flex justify-center'>
136
+ <Pagination />
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </>
141
+ )
142
+ }
143
+
144
144
  export default SellerReview;
package/src/components/SellerReviewItem/sellerReviewItem.js CHANGED
@@ -1,61 +1,61 @@
1
- import React from 'react';
2
- import { Star1 } from 'iconsax-react';
3
-
4
- const SellerReviewItem = () => {
5
- return (
6
- <>
7
- <div class="flex flex-col items-start gap-[10px] p-[25px] relative self-stretch w-full flex-[0_0_auto] bg-white rounded-[6px] border border-solid border-[#e6e9ea]">
8
- <div class="flex flex-col items-start gap-[20px] relative self-stretch w-full flex-[0_0_auto]">
9
- <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
10
- <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
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>
13
- </div>
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>
17
- </div>
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]">
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>
22
- <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
23
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
24
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
25
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
26
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
27
- <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
28
- </div>
29
- </div>
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>
32
- <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
33
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
34
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
35
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
36
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
37
- <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
38
- </div>
39
- </div>
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>
42
- <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
43
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
44
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
45
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
46
- <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
47
- <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
48
- </div>
49
- </div>
50
- </div>
51
- </div>
52
- <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
53
- Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
54
- </p>
55
- </div>
56
- </div>
57
- </>
58
- )
59
- }
60
-
1
+ import React from 'react';
2
+ import { Star1 } from 'iconsax-react';
3
+
4
+ const SellerReviewItem = () => {
5
+ return (
6
+ <>
7
+ <div class="flex flex-col items-start gap-[10px] p-[25px] relative self-stretch w-full flex-[0_0_auto] bg-white rounded-[6px] border border-solid border-[#e6e9ea]">
8
+ <div class="flex flex-col items-start gap-[20px] relative self-stretch w-full flex-[0_0_auto]">
9
+ <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
10
+ <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
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>
13
+ </div>
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>
17
+ </div>
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]">
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>
22
+ <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
23
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
24
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
25
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
26
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
27
+ <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
28
+ </div>
29
+ </div>
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>
32
+ <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
33
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
34
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
35
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
36
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
37
+ <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
38
+ </div>
39
+ </div>
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>
42
+ <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
43
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
44
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
45
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
46
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
47
+ <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
53
+ Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
54
+ </p>
55
+ </div>
56
+ </div>
57
+ </>
58
+ )
59
+ }
60
+
61
61
  export default SellerReviewItem;