@vtex/faststore-plugin-buyer-portal 1.1.86 → 1.1.88

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 (44) hide show
  1. package/CHANGELOG.md +39 -28
  2. package/package.json +1 -1
  3. package/src/features/addresses/components/AddressForm/AddressForm.tsx +72 -41
  4. package/src/features/addresses/data/USA.ts +69 -64
  5. package/src/features/addresses/data/countries.ts +6 -1
  6. package/src/features/addresses/data/states.ts +4 -2
  7. package/src/features/addresses/layouts/AddressDetailsLayout/AddressDetailsLayout.tsx +10 -1
  8. package/src/features/addresses/utils/index.ts +1 -0
  9. package/src/features/addresses/utils/stateUtils.ts +63 -0
  10. package/src/features/budgets/components/BudgetAddForm/budget-add-form.scss +9 -3
  11. package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss +2 -2
  12. package/src/features/budgets/components/BudgetAllocationsTable/budget-allocations-table.scss +29 -0
  13. package/src/features/budgets/components/BudgetDeleteDrawer/budget-delete-drawer.scss +13 -0
  14. package/src/features/budgets/components/BudgetRemainingBalance/BudgetRemainingBalance.tsx +5 -1
  15. package/src/features/budgets/components/BudgetRemainingBalance/budget-remaining-balance.scss +18 -1
  16. package/src/features/budgets/components/BudgetSettingsInfo/budget-settings-info.scss +19 -0
  17. package/src/features/budgets/components/BudgetsTable/BudgetsTable.tsx +12 -2
  18. package/src/features/budgets/components/BudgetsTable/budgets-table.scss +30 -1
  19. package/src/features/budgets/components/CreateBudgetAllocationDrawer/create-budget-allocation-drawer.scss +22 -6
  20. package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss +15 -6
  21. package/src/features/budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss +15 -1
  22. package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss +11 -1
  23. package/src/features/budgets/layouts/BudgetsDetailsLayout/BudgetsDetailsLayout.tsx +76 -75
  24. package/src/features/budgets/layouts/BudgetsDetailsLayout/budget-details-layout.scss +22 -19
  25. package/src/features/budgets/layouts/BudgetsLayout/budgets-layout.scss +6 -0
  26. package/src/features/buying-policies/components/BasicBuyingPolicyDrawer/basic-buying-policy-drawer.scss +4 -0
  27. package/src/features/buying-policies/layouts/BuyingPoliciesLayout/buying-policies-layout.scss +41 -6
  28. package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/BuyingPolicyDetailsLayout.tsx +1 -1
  29. package/src/features/buying-policies/layouts/BuyingPolicyDetailsLayout/buying-policy-details-layout.scss +17 -1
  30. package/src/features/custom-fields/layouts/CustomFieldsLayout/custom-fields-layout.scss +4 -0
  31. package/src/features/payment-methods/components/AddPaymentMethodsDrawer/AddPaymentMethodsDrawer.tsx +93 -68
  32. package/src/features/payment-methods/components/AddPaymentMethodsDrawer/add-payment-methods-drawer.scss +66 -30
  33. package/src/features/payment-methods/components/SearchPaymentMethods/SearchPaymentMethods.tsx +6 -4
  34. package/src/features/payment-methods/components/SearchPaymentMethods/search-payment-methods.scss +4 -1
  35. package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx +65 -54
  36. package/src/features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss +121 -103
  37. package/src/features/shared/components/CustomDropdown/custom-dropdown.scss +5 -0
  38. package/src/features/shared/components/HeaderInside/header-inside.scss +1 -1
  39. package/src/features/shared/components/Pagination/Pagination.tsx +18 -8
  40. package/src/features/shared/components/Pagination/pagination.scss +14 -0
  41. package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss +6 -1
  42. package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss +5 -3
  43. package/src/features/shared/layouts/CustomFieldLayout/CustomFieldLayout.tsx +1 -0
  44. package/src/features/shared/layouts/CustomFieldLayout/custom-field-layout.scss +28 -2
package/src/features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss CHANGED
@@ -5,110 +5,128 @@
5
5
 
6
6
  [data-fs-payment-methods-section] [data-fs-payment-methods-list],
7
7
  [data-fs-payment-methods-drawer] [data-fs-payment-methods-list] {
8
- width: 100%;
9
- display: flex;
10
- flex-direction: column;
11
- padding-bottom: var(--fs-spacing-5);
12
-
13
- [data-fs-bp-payment-methods-list-title] {
14
- color: #5c5c5c;
15
- margin-bottom: var(--fs-spacing-1);
16
- display: flex;
17
- justify-content: start;
18
- align-items: center;
19
- gap: var(--fs-spacing-3);
20
-
21
- &[data-fs-bp-payment-methods-list-title-drawer="true"] {
22
- padding-left: var(--fs-spacing-3);
23
- padding-right: var(--fs-spacing-3);
24
- }
25
- }
26
-
27
- [data-fs-payment-methods-line] {
28
- border-top: var(--fs-border-width) solid #e5e5e5;
29
- }
30
-
31
- [data-fs-payment-methods-row] {
32
- display: flex;
33
- justify-content: space-between;
34
-
35
- &:hover {
36
- background-color: #f5f5f5;
37
- }
38
-
39
- &:visited {
40
- color: #1f1f1f;
41
- }
42
-
43
- &[data-fs-payment-methods-row-selected="true"] {
44
- background-color: #f1f8fd;
45
- }
46
-
47
- [data-fs-payment-methods-row-information] {
48
- display: flex;
49
- gap: var(--fs-spacing-2);
50
- align-items: center;
51
- margin-left: var(--fs-spacing-3);
52
- padding: var(--fs-spacing-2) 0;
53
- size: var(--fs-text-size-1);
54
- color: #0366dd;
55
- text-decoration: none;
56
- flex: 1;
57
-
58
- [data-fs-payment-methods-row-icon-wrapper] {
59
- color: #0366dd;
60
- display: flex;
61
- align-items: center;
62
- justify-content: center;
63
- width: var(--fs-spacing-6);
64
- height: var(--fs-spacing-6);
65
-
66
- margin-right: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
67
- }
68
-
69
- [data-fs-payment-methods-name] {
70
- width: var(--data-fs-users-table-width);
71
- font-weight: var(--fs-text-weight-medium);
72
- font-size: var(--fs-text-size-1);
73
- line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
74
- text-decoration: none;
75
- color: #000;
76
- }
77
- }
78
- }
8
+ width: 100%;
9
+ display: flex;
10
+ flex-direction: column;
11
+ padding-bottom: var(--fs-spacing-3);
12
+
13
+ [data-fs-bp-payment-methods-list-title] {
14
+ color: #5c5c5c;
15
+ margin-bottom: var(--fs-spacing-1);
16
+ display: flex;
17
+ justify-content: start;
18
+ align-items: center;
19
+ gap: var(--fs-spacing-3);
20
+
21
+ &[data-fs-bp-payment-methods-list-title-drawer="true"] {
22
+ padding-left: var(--fs-spacing-3);
23
+ padding-right: var(--fs-spacing-3);
24
+ }
25
+ }
26
+
27
+ [data-fs-payment-methods-line] {
28
+ border-top: var(--fs-border-width) solid #e5e5e5;
29
+ }
30
+
31
+ [data-fs-payment-methods-row] {
32
+ display: flex;
33
+ justify-content: space-between;
34
+
35
+ &:hover {
36
+ background-color: #f5f5f5;
37
+ }
38
+
39
+ &:visited {
40
+ color: #1f1f1f;
41
+ }
42
+
43
+ &[data-fs-payment-methods-row-selected="true"] {
44
+ background-color: #f1f8fd;
45
+ }
46
+
47
+ [data-fs-payment-methods-row-information] {
48
+ display: flex;
49
+ gap: var(--fs-spacing-2);
50
+ align-items: center;
51
+ margin-left: var(--fs-spacing-3);
52
+ padding: var(--fs-spacing-2) 0;
53
+ size: var(--fs-text-size-1);
54
+ color: #0366dd;
55
+ text-decoration: none;
56
+ flex: 1;
57
+
58
+ [data-fs-payment-methods-row-icon-wrapper] {
59
+ color: #0366dd;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ width: var(--fs-spacing-6);
64
+ height: var(--fs-spacing-6);
65
+
66
+ margin-right: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
67
+ }
68
+
69
+ [data-fs-payment-methods-name] {
70
+ width: var(--data-fs-users-table-width);
71
+ font-weight: var(--fs-text-weight-medium);
72
+ font-size: var(--fs-text-size-1);
73
+ line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
74
+ text-decoration: none;
75
+ color: #000;
76
+ }
77
+ }
78
+ }
79
79
  }
80
80
 
81
81
  [data-fs-payment-methods-section] {
82
- @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
83
-
84
- @import "../../../shared/components/InternalSearch/internal-search.scss";
85
- @import "../../../shared/components/HeaderInside/header-inside.scss";
86
- @import "../../../shared/components/Table/table.scss";
87
- @import "../../../shared/components/EmptyState/empty-state.scss";
88
-
89
- @media (min-width: 1028px) {
90
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
91
- }
92
-
93
- [data-fs-payment-methods-tooltip] {
94
- --fs-tooltip-background: #1f1f1f;
95
- }
96
-
97
- [data-fs-bp-payment-method-table-row] {
98
- td:nth-child(3) {
99
- vertical-align: middle;
100
- text-align: right;
101
- }
102
- }
103
-
104
- [data-fs-bp-payment-methods-search-container-counter-bottom] {
105
- font-size: var(--fs-text-size-1);
106
- color: #5c5c5c;
107
- text-align: end;
108
- display: none;
109
- margin-top: var(--fs-spacing-3);
110
- @media (max-width: 768px) {
111
- display: block;
112
- }
113
- }
82
+ @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
83
+
84
+ @import "../../../shared/components/InternalSearch/internal-search.scss";
85
+ @import "../../../shared/components/HeaderInside/header-inside.scss";
86
+ @import "../../../shared/components/Table/table.scss";
87
+ @import "../../../shared/components/EmptyState/empty-state.scss";
88
+
89
+ @include media(">=notebook") {
90
+ padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
91
+ }
92
+
93
+ [data-fs-payment-methods-tooltip] {
94
+ --fs-tooltip-background: var(--fs-text-color-secondary);
95
+ }
96
+
97
+ [data-fs-bp-payment-method-table-row] {
98
+ td:nth-child(3) {
99
+ vertical-align: middle;
100
+ text-align: right;
101
+ }
102
+ }
103
+
104
+ [data-fs-bp-payment-methods-search-container-counter-bottom] {
105
+ font-size: var(--fs-text-size-1);
106
+ color: #5c5c5c;
107
+ text-align: end;
108
+ display: none;
109
+ margin-top: var(--fs-spacing-3);
110
+ @include media("<=tablet") {
111
+ display: block;
112
+ }
113
+ }
114
+
115
+ @include media("<=tablet") {
116
+ [data-fs-buyer-portal-internal-search] {
117
+ width: 100% !important;
118
+ }
119
+
120
+ [data-fs-bp-header-inside] {
121
+ [data-fs-header-inside-button] {
122
+ position: fixed;
123
+ bottom: 20px;
124
+ right: 20px;
125
+ border: none;
126
+ border-radius: 50%;
127
+ cursor: pointer;
128
+ z-index: 1;
129
+ }
130
+ }
131
+ }
114
132
  }
package/src/features/shared/components/CustomDropdown/custom-dropdown.scss CHANGED
@@ -49,11 +49,16 @@
49
49
  position: relative;
50
50
  cursor: pointer;
51
51
  padding: var(--fs-spacing-2) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
52
+
52
53
  min-width: 10.625rem;
53
54
  border-radius: var(--fs-border-radius-pill);
54
55
  font-size: var(--fs-text-size-1);
55
56
  font-weight: var(--fs-text-weight-semibold);
56
57
  line-height: var(--fs-spacing-3);
57
58
  text-align: center;
59
+
60
+ @include media("<=tablet") {
61
+ min-width: 8rem;
62
+ }
58
63
  }
59
64
  }
package/src/features/shared/components/HeaderInside/header-inside.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  justify-content: space-between;
5
5
  align-items: center;
6
- margin: var(--fs-spacing-6) 0;
6
+ margin: var(--fs-spacing-5) 0;
7
7
 
8
8
  [data-fs-bp-back-link] {
9
9
  margin-right: var(--fs-spacing-3);
package/src/features/shared/components/Pagination/Pagination.tsx CHANGED
@@ -2,7 +2,7 @@ import { Button, Skeleton } from "@faststore/ui";
2
2
 
3
3
  interface PaginationProps {
4
4
  currentCount: number;
5
- variant?: "default" | "onlyText";
5
+ variant?: "default" | "onlyText" | "counter";
6
6
  total: number;
7
7
  loading?: boolean;
8
8
  showMore?(): void;
@@ -23,13 +23,23 @@ export const Pagination = ({
23
23
  </Button>
24
24
  )}
25
25
 
26
- <span data-fs-bp-pagination-span>
27
- {loading ? (
28
- <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
29
- ) : (
30
- `${currentCount} of ${total}`
31
- )}
32
- </span>
26
+ {variant === "counter" ? (
27
+ <span data-fs-bp-counter-bottom>
28
+ {loading ? (
29
+ <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
30
+ ) : (
31
+ `${currentCount} of ${total}`
32
+ )}
33
+ </span>
34
+ ) : (
35
+ <span data-fs-bp-pagination-span>
36
+ {loading ? (
37
+ <Skeleton size={{ width: "3.75rem", height: "1.25rem" }} />
38
+ ) : (
39
+ `${currentCount} of ${total}`
40
+ )}
41
+ </span>
42
+ )}
33
43
  </div>
34
44
  );
35
45
  };
package/src/features/shared/components/Pagination/pagination.scss CHANGED
@@ -24,4 +24,18 @@
24
24
  color: #5c5c5c;
25
25
  margin-left: auto;
26
26
  }
27
+
28
+ @include media("<=tablet") {
29
+ [data-fs-buyer-portal-internal-search] {
30
+ width: 100% !important;
31
+ }
32
+ & > [data-fs-bp-counter-bottom] {
33
+ display: none !important;
34
+ }
35
+ }
36
+
37
+ & > [data-fs-bp-counter-bottom] {
38
+ display: block;
39
+ text-align: end;
40
+ }
27
41
  }
package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss CHANGED
@@ -74,6 +74,11 @@
74
74
  [data-fs-bp-nav-menu-actions] {
75
75
  display: flex;
76
76
  align-items: center;
77
+ [data-fs-bp-nav-menu-start-shopping-link] {
78
+ }
79
+ @include media("<=tablet") {
80
+ display: none;
81
+ }
77
82
  }
78
83
 
79
84
  [data-fs-bp-nav-menu-start-shopping-link] {
@@ -119,7 +124,7 @@
119
124
 
120
125
  padding: var(--fs-spacing-6);
121
126
  overflow-y: auto;
122
-
127
+
123
128
  @include media("<notebook") {
124
129
  display: none;
125
130
  }
package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss CHANGED
@@ -60,9 +60,11 @@
60
60
  }
61
61
 
62
62
  @include media("<=tablet") {
63
- width: 20.9375rem !important;
64
- min-width: 20.9375rem !important;
65
- max-width: 20.9375rem !important;
63
+ width: 19rem !important;
64
+ min-width: 19rem !important;
65
+ max-width: 19rem !important;
66
+ height: 100% !important;
67
+ border-radius: 0 !important;
66
68
  & > [data-fs-bp-basic-drawer-heading] {
67
69
  padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
68
70
  calc(var(--fs-spacing-3) + var(--fs-spacing-0))
package/src/features/shared/layouts/CustomFieldLayout/CustomFieldLayout.tsx CHANGED
@@ -90,6 +90,7 @@ export const CustomFieldLayout = ({
90
90
  searchTerm={searchValue}
91
91
  />
92
92
  <Pagination
93
+ data-fs-bp-custom-field-bottom-pagination
93
94
  currentCount={data.length}
94
95
  total={pagination.total}
95
96
  showMore={pagination.loadMore}
package/src/features/shared/layouts/CustomFieldLayout/custom-field-layout.scss CHANGED
@@ -17,9 +17,26 @@
17
17
 
18
18
  [data-fs-bp-custom-fields-wrapper] {
19
19
  display: flex;
20
- align-items: center;
21
20
  justify-content: space-between;
22
- height: 2.5rem;
21
+ align-items: baseline;
22
+ gap: var(--fs-spacing-1);
23
+ width: 100%;
24
+
25
+ [data-fs-bp-pagination] {
26
+ font-size: var(--fs-text-size-1);
27
+ color: #5c5c5c;
28
+ display: block;
29
+ }
30
+
31
+ @include media("<=tablet") {
32
+ [data-fs-buyer-portal-internal-search] {
33
+ width: 100%;
34
+ }
35
+
36
+ [data-fs-bp-pagination] {
37
+ display: none;
38
+ }
39
+ }
23
40
  }
24
41
 
25
42
  [data-fs-bp-custom-fields-empty-state] {
@@ -38,4 +55,13 @@
38
55
  height: 2.5rem;
39
56
  }
40
57
  }
58
+ section {
59
+ [data-fs-bp-pagination] {
60
+ display: none;
61
+
62
+ @include media("<=tablet") {
63
+ display: flex;
64
+ }
65
+ }
66
+ }
41
67
  }