@riosst100/pwa-marketplace 1.3.8 → 1.4.0

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 (62) hide show
  1. package/package.json +1 -1
  2. package/src/componentOverrideMapping.js +1 -0
  3. package/src/components/AttributesBlock/attributesBlock.js +54 -0
  4. package/src/components/AttributesBlock/attributesBlock.module.css +28 -0
  5. package/src/components/BecomeSeller/becomeSeller.module.css +1 -1
  6. package/src/components/BecomeSellerLink/becomeSellerLink.js +1 -1
  7. package/src/components/CurrencySwitcher/index.js +1 -1
  8. package/src/components/Filter/index.js +2 -2
  9. package/src/components/Pagination/index.js +4 -4
  10. package/src/components/ProductItem/index.js +1 -1
  11. package/src/components/ProductListTab/productListTab.module.css +1 -1
  12. package/src/components/SellerDetail/sellerDetail.js +2 -2
  13. package/src/components/SellerInformation/sellerInformation.js +9 -9
  14. package/src/components/SellerLocation/sellerLocationItem.js +3 -3
  15. package/src/components/SellerProducts/sellerProducts.js +2 -2
  16. package/src/components/SellerReview/sellerReview.js +11 -11
  17. package/src/components/SellerReviewItem/sellerReviewItem.js +6 -6
  18. package/src/components/SellerVerification/sellerVerification.module.css +1 -1
  19. package/src/components/ShopByCategory/shopByCategory.module.css +1 -1
  20. package/src/components/SortBy/index.js +2 -2
  21. package/src/components/SubCategory/subCategory.js +1 -1
  22. package/src/components/SubCategory/subCategory.module.css +1 -1
  23. package/src/components/WebsiteSwitcher/websiteSwitcher.js +5 -5
  24. package/src/components/commons/Tabs/index.js +2 -2
  25. package/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js +2 -0
  26. package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js +8 -0
  27. package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js +10 -1
  28. package/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css +2 -1
  29. package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js +5 -1
  30. package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css +4 -4
  31. package/src/overwrites/venia-ui/lib/components/Checkbox/checkbox.module.css +1 -1
  32. package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css +1 -1
  33. package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js +2 -2
  34. package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.module.css +1 -1
  35. package/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock.module.css +1 -1
  36. package/src/overwrites/venia-ui/lib/components/FilterModal/filterModal.module.css +1 -1
  37. package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css +4 -3
  38. package/src/overwrites/venia-ui/lib/components/Gallery/item.module.css +3 -3
  39. package/src/overwrites/venia-ui/lib/components/Gallery/star.js +1 -1
  40. package/src/overwrites/venia-ui/lib/components/Header/accountTrigger.js +2 -2
  41. package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.js +3 -3
  42. package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.module.css +47 -0
  43. package/src/overwrites/venia-ui/lib/components/Header/header.js +2 -2
  44. package/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js +5 -5
  45. package/src/overwrites/venia-ui/lib/components/Header/wishlistTrigger.js +1 -1
  46. package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js +1 -0
  47. package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.js +70 -25
  48. package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.module.css +2 -4
  49. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js +10 -7
  50. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css +14 -7
  51. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.js +4 -1
  52. package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css +3 -3
  53. package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js +2 -2
  54. package/src/overwrites/venia-ui/lib/components/ProductSort/productSort.module.css +1 -1
  55. package/src/overwrites/venia-ui/lib/components/ProductSort/sortItem.module.css +1 -1
  56. package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js +60 -0
  57. package/src/overwrites/venia-ui/lib/components/RadioGroup/radio.module.css +70 -0
  58. package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css +1 -1
  59. package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.module.css +1 -1
  60. package/src/overwrites/venia-ui/lib/components/TextInput/field.module.css +1 -1
  61. package/src/talons/AttributesBlock/attributesBlock.gql.js +15 -0
  62. package/src/talons/AttributesBlock/useAttributesBlock.js +37 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@riosst100/pwa-marketplace",
3
3
  "author": "riosst100@gmail.com",
4
- "version": "1.3.8",
4
+ "version": "1.4.0",
5
5
  "main": "src/index.js",
6
6
  "pwa-studio": {
7
7
  "targets": {
package/src/componentOverrideMapping.js CHANGED
@@ -36,4 +36,5 @@ module.exports = componentOverrideMapping = {
36
36
  [`@magento/venia-ui/lib/components/ProductImageCarousel/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductImageCarousel/index.js',
37
37
  [`@magento/venia-ui/lib/components/QuantityStepper/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/QuantityStepper/index.js',
38
38
  [`@magento/venia-ui/lib/components/RichContent/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichContent/index.js',
39
+ [`@magento/venia-ui/lib/components/RadioGroup/radio.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js',
39
40
  };
package/src/components/AttributesBlock/attributesBlock.js ADDED
@@ -0,0 +1,54 @@
1
+ import { useAttributesBlock } from '@riosst100/pwa-marketplace/src/talons/AttributesBlock/useAttributesBlock';
2
+ import React from 'react';
3
+ import { Link } from 'react-router-dom';
4
+ import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
5
+ import defaultClasses from './attributesBlock.module.css';
6
+ import { useStyle } from '@magento/venia-ui/lib/classify';
7
+
8
+ const AttributesBlock = props => {
9
+ const { attributesBlock, category } = props;
10
+
11
+ const talonProps = useAttributesBlock({ attributesBlock });
12
+
13
+ const classes = useStyle(defaultClasses, props.classes);
14
+
15
+ const {
16
+ categoryUrlSuffix,
17
+ getPath
18
+ } = talonProps;
19
+
20
+ const result = [];
21
+
22
+ attributesBlock && attributesBlock.map(({ label, code, items }, index) => {
23
+
24
+ const itemsResult = [];
25
+
26
+ items && items.map(({ label, value }, index) => {
27
+ const path = resourceUrl(
28
+ `/${category.url_path}${categoryUrlSuffix || ''}?${code}[filter]=${label},${value}`
29
+ );
30
+
31
+ itemsResult.push(
32
+ <>
33
+ <Link
34
+ key={index}
35
+ to={path}
36
+ >
37
+ <li className={classes.item}>{label}</li>
38
+ </Link>
39
+ </>
40
+ )
41
+ });
42
+
43
+ result.push(
44
+ <>
45
+ <div className={classes.title}>{label}</div>
46
+ <ul className={classes.root}>{itemsResult}</ul>
47
+ </>
48
+ )
49
+ });
50
+
51
+ return result;
52
+ };
53
+
54
+ export default AttributesBlock;
package/src/components/AttributesBlock/attributesBlock.module.css ADDED
@@ -0,0 +1,28 @@
1
+ .root {
2
+ composes: flex from global;
3
+ composes: flex-wrap from global;
4
+ composes: mt-3 from global;
5
+ composes: gap-[15px] from global;
6
+ margin-bottom: 30px;
7
+ }
8
+
9
+ .item {
10
+ composes: px-4 from global;
11
+ composes: py-2 from global;
12
+ composes: transition-colors from global;
13
+ composes: duration-150 from global;
14
+ composes: border from global;
15
+ composes: border-solid from global;
16
+ composes: leading-normal from global;
17
+ composes: text-base from global;
18
+ composes: text-colorDefault from global;
19
+ composes: bg-white from global;
20
+ composes: border-gray-100 from global;
21
+ border-radius: 5px;
22
+ }
23
+
24
+ .title {
25
+ composes: pb-3 from global;
26
+ composes: font-bold from global;
27
+ composes: text-[14px] from global;
28
+ }
package/src/components/BecomeSeller/becomeSeller.module.css CHANGED
@@ -10,7 +10,7 @@
10
10
  composes: leading-tight from global;
11
11
  composes: p-xs from global;
12
12
  composes: rounded from global;
13
- composes: text-sm from global;
13
+ composes: text-base from global;
14
14
  }
15
15
 
16
16
  /* TODO @TW: cannot compose */
package/src/components/BecomeSellerLink/becomeSellerLink.js CHANGED
@@ -34,7 +34,7 @@ const BecomeSellerLink = props => {
34
34
  <div className={classes.root} data-cy="BecomeSellerLink-root">
35
35
  <Link
36
36
  to={resourceUrl('/become-seller')}
37
- className='text-[13px] leading-[16px] text-darkblue-900'
37
+ className='text-base leading-[16px]'
38
38
  >{formatMessage({
39
39
  id: 'becomeSellerPage.title',
40
40
  defaultMessage: 'Become a Seller'
package/src/components/CurrencySwitcher/index.js CHANGED
@@ -71,7 +71,7 @@ const CurrencySwitcher = props => {
71
71
  ref={currencyMenuTriggerRef}
72
72
  aria-expanded={currencyMenuIsOpen}
73
73
  >
74
- <span className={cn(classes.label, 'flex flex-row items-center text-[13px] leading-[16px] text-darkblue-900')}>
74
+ <span className={cn(classes.label, 'flex flex-row items-center text-base leading-[16px]')}>
75
75
  <CurrencySymbol
76
76
  classes={currencySymbol}
77
77
  currencyCode={currentCurrencyCode}
package/src/components/Filter/index.js CHANGED
@@ -6,7 +6,7 @@ const CatalogFilter = () => {
6
6
  <>
7
7
  <div className='inline-flex flex-col items-start gap-[10px] px-0 py-[10px] w-full rounded-[6px] overflow-hidden border border-solid border-[#e6e9ea] shadow-[0px_0px_7px_2px_#cdcdcd40]'>
8
8
  <div class="flex h-[18px] items-center justify-between px-[10px] py-0 relative self-stretch w-full">
9
- <div class="relative w-fit text-[16px] tracking-[0] leading-[20px] whitespace-nowrap">
9
+ <div class="relative w-fit text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
10
10
  Filter
11
11
  </div>
12
12
  <Filter color="#292D32" size={16} variant="Outline" className='stroke-[#292D32]' />
@@ -14,7 +14,7 @@ const CatalogFilter = () => {
14
14
  <div class="inline-flex flex-col items-start gap-[10px] bg-white relative flex-[0_0_auto]">
15
15
  <div class="flex-col justify-center inline-flex items-center relative flex-[0_0_auto]">
16
16
  <div class="flex w-full cursor-pointer items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
17
- <div class="relative w-fit font-semibold text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
17
+ <div class="relative w-fit font-semibold text-base tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
18
18
  <ArrowSquareUp color="#292D32" size={14} variant="Outline" />
19
19
  </div>
20
20
  <hr className='w-full h-[1px]' />
package/src/components/Pagination/index.js CHANGED
@@ -15,14 +15,14 @@ const Pagination = ({ totalPages, currentPage, pageSize }) => {
15
15
  const activeClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]";
16
16
  const bgClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]";
17
17
 
18
- const activeTextClass = "relative w-fit font-normal text-white text-[16px] tracking-[0] leading-none whitespace-nowrap";
19
- const textClass = "relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap";
18
+ const activeTextClass = "relative w-fit font-normal text-white text-[14px] tracking-[0] leading-none whitespace-nowrap";
19
+ const textClass = "relative w-fit font-normal text-[#6243fa] text-[14px] tracking-[0] leading-none whitespace-nowrap";
20
20
 
21
21
  return (
22
22
  <>
23
23
  <div className={'inline-flex items-start gap-[10px] relative'}>
24
24
  <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
25
- <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
25
+ <div className="relative w-fit font-normal text-[#6243fa] text-[14px] tracking-[0] leading-none whitespace-nowrap">
26
26
  <ArrowLeft2 size="16" color="#6243fa" variant="Outline" />
27
27
  </div>
28
28
  </button>
@@ -36,7 +36,7 @@ const Pagination = ({ totalPages, currentPage, pageSize }) => {
36
36
  </span>
37
37
  )) : ''}
38
38
  <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
39
- <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
39
+ <div className="relative w-fit font-normal text-[#6243fa] text-[14px] tracking-[0] leading-none whitespace-nowrap">
40
40
  <ArrowRight2 size="16" color="#6243fa" variant="Outline" />
41
41
  </div>
42
42
  </button>
package/src/components/ProductItem/index.js CHANGED
@@ -15,7 +15,7 @@ const ProductItem = () => {
15
15
  <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
16
16
  <div class="flex flex-col w-[153px] items-start justify-center gap-[8px] relative flex-[0_0_auto]">
17
17
  <div class="flex flex-col items-start gap-[6px] relative self-stretch w-full flex-[0_0_auto]">
18
- <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">$55.00</div>
18
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">$55.00</div>
19
19
  </div>
20
20
  </div>
21
21
  <div class="flex-col items-start gap-[8px] inline-flex relative flex-[0_0_auto]">
package/src/components/ProductListTab/productListTab.module.css CHANGED
@@ -20,7 +20,7 @@
20
20
  composes: border from global;
21
21
  composes: border-solid from global;
22
22
  composes: leading-normal from global;
23
- composes: text-[14px] from global;
23
+ composes: text-base from global;
24
24
  }
25
25
 
26
26
  .activeButton {
package/src/components/SellerDetail/sellerDetail.js CHANGED
@@ -100,7 +100,7 @@ const SellerDetail = props => {
100
100
  <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
101
101
  <div class="flex items-center justify-center gap-[10px] relative">
102
102
  <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
103
- <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
103
+ <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-base tracking-[0] leading-[20px] whitespace-nowrap">
104
104
  Message
105
105
  </div>
106
106
  </div>
@@ -108,7 +108,7 @@ const SellerDetail = props => {
108
108
  <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
109
109
  <div class="flex items-center justify-center gap-[10px] relative">
110
110
  <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
111
- <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
111
+ <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-base tracking-[0] leading-[20px] whitespace-nowrap">
112
112
  Chat With Seller
113
113
  </div>
114
114
  </div>
package/src/components/SellerInformation/sellerInformation.js CHANGED
@@ -11,9 +11,9 @@ const SellerInformation = ({ seller }) => {
11
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
12
  <div class="flex flex-col items-start gap-[30px] relative self-stretch">
13
13
  <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
14
- <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Description</div>
14
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Description</div>
15
15
  <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
16
- <p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[16px]">
16
+ <p class="relative mt-[-1.00px] font-normal text-base tracking-[0] leading-[16px]">
17
17
  {seller ? seller.description : ''}<br />
18
18
  <br />
19
19
  <br />
@@ -22,20 +22,20 @@ const SellerInformation = ({ seller }) => {
22
22
  </div>
23
23
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
24
24
  <Location color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
25
- <p class="relative w-fit font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap"><SellerAddressCard address={seller} /></p>
25
+ <p class="relative w-fit font-normal text-[#009a7b] text-base tracking-[0] leading-[normal] whitespace-nowrap"><SellerAddressCard address={seller} /></p>
26
26
  </div>
27
27
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
28
28
  <ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
29
- <div class="relative self-stretch mt-[-1.00px] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: {seller ? seller.creation_time : ''}</div>
29
+ <div class="relative self-stretch mt-[-1.00px] font-normal text-[#009a7b] text-base tracking-[0] leading-[normal]">Joined: {seller ? seller.creation_time : ''}</div>
30
30
  </div>
31
31
  </div>
32
32
  </div>
33
33
  <div class="flex flex-col items-start gap-[30px] relative">
34
34
  <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-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Working Hour</div>
35
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Working Hour</div>
36
36
  <div class="inline-flex flex-col items-start relative flex-[0_0_auto]">
37
37
  <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
38
- <p class="relative mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal]">
38
+ <p class="relative mt-[-1.00px] font-normal text-base tracking-[0] leading-[normal]">
39
39
  <OperatingHours values={seller.operating_hours} />
40
40
  </p>
41
41
  </div>
@@ -44,7 +44,7 @@ const SellerInformation = ({ seller }) => {
44
44
  </div>
45
45
  <div class="flex flex-col items-start gap-[15px] relative">
46
46
  <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
47
- <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>
47
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Ship To</div>
48
48
  </div>
49
49
  <div class="flex flex-wrap items-start gap-[10px_10px] relative flex-[0_0_auto]">
50
50
  {seller ? <SellerShipTo seller={seller} /> : '' }
@@ -53,7 +53,7 @@ const SellerInformation = ({ seller }) => {
53
53
  </div>
54
54
  <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
55
55
  <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
56
- <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>
56
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Terms &amp; Condition</div>
57
57
  <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
58
58
  <div class="flex flex-col items-start gap-[2px]">
59
59
  {seller ? seller.term_and_conditions : ''}
@@ -78,7 +78,7 @@ const SellerShipTo = ({seller}) => {
78
78
  {shipTo && shipTo == "Domestic" ? seller.country_id : ''}
79
79
  {shipToCountryArr && shipTo != "Domestic" ? shipToCountryArr.map((value, index) => <>
80
80
  <div key={index} class={index == shipToCountryArr.length-1 ? "inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]" : "inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]"}>
81
- <div class="relative w-fit mt-[-1.00px] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
81
+ <div class="relative w-fit mt-[-1.00px] font-normal text-base tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
82
82
  </div>
83
83
  </>) : ''}
84
84
  </div>
package/src/components/SellerLocation/sellerLocationItem.js CHANGED
@@ -7,17 +7,17 @@ const SellerLocationItem = ({ storeLocator }) => {
7
7
  return storeLocator && (
8
8
  <>
9
9
  <div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
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>
10
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[14px] tracking-[0] leading-[normal]">{storeLocator ? storeLocator.name : ''}</div>
11
11
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
12
12
  <Location color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
13
- <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]">
13
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-base tracking-[0] leading-[normal]">
14
14
  {storeLocator.city}, {storeLocator.country}
15
15
  </div>
16
16
  </div>
17
17
  <div class="flex flex-col w-[320px] items-end relative flex-[0_0_auto] mr-[-10.00px]">
18
18
  <div class="flex items-center gap-[10px] relative self-stretch w-full flex-[0_0_auto]">
19
19
  <Clock color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
20
- <p class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">{storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}</p>
20
+ <p class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-base tracking-[0] leading-[normal] whitespace-nowrap">{storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}</p>
21
21
  </div>
22
22
  </div>
23
23
  </div>
package/src/components/SellerProducts/sellerProducts.js CHANGED
@@ -12,10 +12,10 @@ const SellerProducts = () => {
12
12
  <div className='w-full mb-[30px]'>
13
13
  <div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
14
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>
15
+ <span class='relative w-fit font-medium text-[14px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
16
16
  </Link>
17
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>
18
+ <span class='relative w-fit font-medium text-[14px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
19
19
  </Link>
20
20
  </div>
21
21
  </div>
package/src/components/SellerReview/sellerReview.js CHANGED
@@ -35,7 +35,7 @@ const SellerReview = ({ seller }) => {
35
35
  <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
36
36
  </div>
37
37
  </div>
38
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">({reviews ? reviews.items.length : 0} Reviews)</div>
38
+ <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">({reviews ? reviews.items.length : 0} Reviews)</div>
39
39
  </div>
40
40
  </div>
41
41
  <div className="w-full flex-col items-start gap-2 flex">
@@ -46,7 +46,7 @@ const SellerReview = ({ seller }) => {
46
46
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
47
47
  </div>
48
48
  <div className="gap-2.5 flex">
49
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
49
+ <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">5</div>
50
50
  </div>
51
51
  </div>
52
52
  <div className="xs_w-full lg_w-40 h-[6px] relative">
@@ -54,7 +54,7 @@ const SellerReview = ({ seller }) => {
54
54
  <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
55
55
  </div>
56
56
  </div>
57
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
57
+ <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">12</div>
58
58
  </div>
59
59
  <div className="flex xs_w-full lg_w-fit gap-3 items-center">
60
60
  <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
@@ -63,7 +63,7 @@ const SellerReview = ({ seller }) => {
63
63
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
64
64
  </div>
65
65
  <div className="gap-2.5 flex">
66
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
66
+ <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">4</div>
67
67
  </div>
68
68
  </div>
69
69
  <div className="xs_w-full lg_w-40 h-[6px] relative">
@@ -71,7 +71,7 @@ const SellerReview = ({ seller }) => {
71
71
  <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
72
72
  </div>
73
73
  </div>
74
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
74
+ <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">8</div>
75
75
  </div>
76
76
  <div className="flex xs_w-full lg_w-fit gap-3 items-center">
77
77
  <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
@@ -80,7 +80,7 @@ const SellerReview = ({ seller }) => {
80
80
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
81
81
  </div>
82
82
  <div className="gap-2.5 flex">
83
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
83
+ <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">3</div>
84
84
  </div>
85
85
  </div>
86
86
  <div className="xs_w-full lg_w-40 h-[6px] relative">
@@ -88,7 +88,7 @@ const SellerReview = ({ seller }) => {
88
88
  <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
89
89
  </div>
90
90
  </div>
91
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
91
+ <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">5</div>
92
92
  </div>
93
93
  <div className="flex xs_w-full lg_w-fit gap-3 items-center">
94
94
  <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
@@ -97,7 +97,7 @@ const SellerReview = ({ seller }) => {
97
97
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
98
98
  </div>
99
99
  <div className="gap-2.5 flex">
100
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
100
+ <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">2</div>
101
101
  </div>
102
102
  </div>
103
103
  <div className="xs_w-full lg_w-40 h-[6px] relative">
@@ -105,7 +105,7 @@ const SellerReview = ({ seller }) => {
105
105
  <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
106
106
  </div>
107
107
  </div>
108
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
108
+ <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">1</div>
109
109
  </div>
110
110
  <div className="flex xs_w-full lg_w-fit gap-3 items-center">
111
111
  <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
@@ -114,7 +114,7 @@ const SellerReview = ({ seller }) => {
114
114
  <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
115
115
  </div>
116
116
  <div className="gap-2.5 flex">
117
- <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
117
+ <div className="text-center text-zinc-900 text-base font-normal leading-[18px]">1</div>
118
118
  </div>
119
119
  </div>
120
120
  <div className="xs_w-full lg_w-40 h-[6px] relative">
@@ -122,7 +122,7 @@ const SellerReview = ({ seller }) => {
122
122
  <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
123
123
  </div>
124
124
  </div>
125
- <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
125
+ <div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">0</div>
126
126
  </div>
127
127
  </div>
128
128
  <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">
package/src/components/SellerReviewItem/sellerReviewItem.js CHANGED
@@ -92,12 +92,12 @@ const SellerReviewItem = ({ review }) => {
92
92
  <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
93
93
  <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
94
94
  <div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
95
- <div class="relative w-fit font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
95
+ <div class="relative w-fit font-semibold text-white text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
96
96
  {review ? getInitialName(review.nickname) : ''}
97
97
  </div>
98
98
  </div>
99
99
  <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
100
- <div class="relative w-fit mt-[-1.00px] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
100
+ <div class="relative w-fit mt-[-1.00px] font-medium text-base text-center tracking-[0] leading-[18px] whitespace-nowrap">
101
101
  {review ? review.nickname : ''}
102
102
  </div>
103
103
  <div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
@@ -107,26 +107,26 @@ const SellerReviewItem = ({ review }) => {
107
107
  </div>
108
108
  <div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
109
109
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
110
- <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
110
+ <div class="relative w-fit font-normal text-base tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
111
111
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
112
112
  <ReviewRating rate={rate1} />
113
113
  </div>
114
114
  </div>
115
115
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
116
- <div class="relative w-[37px] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
116
+ <div class="relative w-[37px] font-normal text-base tracking-[0] leading-[18px]">Value</div>
117
117
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
118
118
  <ReviewRating rate={rate2} />
119
119
  </div>
120
120
  </div>
121
121
  <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
122
- <div class="relative w-fit font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
122
+ <div class="relative w-fit font-normal text-base tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
123
123
  <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
124
124
  <ReviewRating rate={rate3} />
125
125
  </div>
126
126
  </div>
127
127
  </div>
128
128
  </div>
129
- <p class="relative self-stretch font-normal text-[14px] tracking-[0] leading-[18px]">
129
+ <p class="relative self-stretch font-normal text-base tracking-[0] leading-[18px]">
130
130
  {review ? review.detail : ''}
131
131
  </p>
132
132
  </div>
package/src/components/SellerVerification/sellerVerification.module.css CHANGED
@@ -11,7 +11,7 @@
11
11
  composes: leading-tight from global;
12
12
  composes: p-xs from global;
13
13
  composes: rounded from global;
14
- composes: text-sm from global;
14
+ composes: text-base from global;
15
15
  }
16
16
 
17
17
  /* TODO @TW: cannot compose */
package/src/components/ShopByCategory/shopByCategory.module.css CHANGED
@@ -37,7 +37,7 @@
37
37
 
38
38
  /* TODO @TW: cannot compose */
39
39
  .action button {
40
- /* composes: text-sm from global; */
40
+ /* composes: text-base from global; */
41
41
  font-size: 0.875rem;
42
42
  /* composes: no-underline from global; */
43
43
  text-decoration: none;
package/src/components/SortBy/index.js CHANGED
@@ -8,12 +8,12 @@ const Sort = () => {
8
8
  <div class="xs_flex xl_hidden flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
9
9
  <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
10
10
  <Filter color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
11
- <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
11
+ <div class="relative w-fit text-base tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
12
12
  </div>
13
13
  </div>
14
14
  <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
15
15
  <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
16
- <div class="relative w-fit text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
16
+ <div class="relative w-fit text-base tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
17
17
  <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
18
18
  </div>
19
19
  </div>
package/src/components/SubCategory/subCategory.js CHANGED
@@ -29,7 +29,7 @@ const SubCategory = props => {
29
29
  )
30
30
  });
31
31
 
32
- return <ul className={classes.root}>{subCategory}</ul>;
32
+ return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
33
33
  };
34
34
 
35
35
  export default SubCategory;
package/src/components/SubCategory/subCategory.module.css CHANGED
@@ -14,7 +14,7 @@
14
14
  composes: border from global;
15
15
  composes: border-solid from global;
16
16
  composes: leading-normal from global;
17
- composes: text-[14px] from global;
17
+ composes: text-base from global;
18
18
  composes: text-colorDefault from global;
19
19
  composes: bg-white from global;
20
20
  composes: border-gray-100 from global;
package/src/components/WebsiteSwitcher/websiteSwitcher.js CHANGED
@@ -62,7 +62,7 @@ const WebsiteSwitcher = props => {
62
62
  groups.push(
63
63
  <ul
64
64
  role="listbox"
65
- className={'text-[13px]'}
65
+ className={'text-base'}
66
66
  key={key}
67
67
  data-cy="WebsiteSwitcher-group"
68
68
  >
@@ -77,13 +77,13 @@ const WebsiteSwitcher = props => {
77
77
  <div className={cn(classes.root, 'leading-[16px]')} data-cy="WebsiteSwitcher-root">
78
78
  <button
79
79
  data-cy="WebsiteSwitcher-triggerButton"
80
- className={cn(classes.trigger, 'text-[13px]')}
80
+ className={cn(classes.trigger, 'text-base')}
81
81
  aria-label={currentWebsiteName || ''}
82
82
  onClick={handleTriggerClick}
83
83
  ref={storeMenuTriggerRef}
84
84
  aria-expanded={storeMenuIsOpen}
85
85
  >
86
- <span className='flex flex-row gap-[5px] items-center leading-[16px] text-darkblue-900'>
86
+ <span className='flex flex-row gap-[5px] items-center leading-[16px]'>
87
87
  {triggerLabel || ''}
88
88
  {!hasOnlyOneGroup ? (
89
89
  <ArrowUp2 size="12" color={darkBlue} className={cn(storeMenuIsOpen ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
@@ -95,8 +95,8 @@ const WebsiteSwitcher = props => {
95
95
  className={menuClassName}
96
96
  data-cy="WebsiteSwitcher-menu"
97
97
  >
98
- <div className={cn(classes.groups, 'text-darkblue-900')}>
99
- <span className='flex font-medium px-4 py-1 w-full text-[14px] mb-2'>
98
+ <div className={classes.groups}>
99
+ <span className='flex font-medium px-4 py-1 w-full text-base mb-2'>
100
100
  Country
101
101
  </span>
102
102
  {groups}
package/src/components/commons/Tabs/index.js CHANGED
@@ -16,11 +16,11 @@ const Tabs = (props) => {
16
16
 
17
17
  const [activeTabs, setActiveTabs] = React.useState(0);
18
18
  const rootClass = cn('mb-4 border-b border-gray-100', rootClassName);
19
- const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[16px] font-semibold', tabTitleClassName);
19
+ const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[14px] font-semibold', tabTitleClassName);
20
20
  const tabContainerClass = cn('tab-content-container', tabContentContainerClassName);
21
21
  const tabContentWrapperClass = cn('tab-content-wrapper', tabContentWrapperClassName);
22
22
  const tabActiveClass = cn('border-solid border-b-2', tabActiveClassName);
23
- const tabWrapperClass = cn('flex flex-wrap -mb-px text-sm font-medium text-center gap-4', tabWrapperClassName);
23
+ const tabWrapperClass = cn('flex flex-wrap -mb-px text-base font-medium text-center gap-4', tabWrapperClassName);
24
24
 
25
25
  const handleSwicthTab = (index) => {
26
26
  setActiveTabs(index);
package/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js CHANGED
@@ -24,8 +24,10 @@ export const GET_MEGA_MENU = gql`
24
24
  url_path
25
25
  shop_by {
26
26
  name
27
+ code
27
28
  items {
28
29
  name
30
+ option_id
29
31
  url_path
30
32
  }
31
33
  }
package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js CHANGED
@@ -29,6 +29,14 @@ export const GET_CATEGORY_CONTENT = gql`
29
29
  description
30
30
  url_key
31
31
  url_path
32
+ attributes_block {
33
+ label
34
+ code
35
+ items {
36
+ label
37
+ value
38
+ }
39
+ }
32
40
  parent {
33
41
  uid
34
42
  name