@vtex/faststore-plugin-buyer-portal 1.1.75 → 1.1.77

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 (23) hide show
  1. package/package.json +1 -1
  2. package/src/features/addresses/layouts/AddressDetailsLayout/address-details-layout.scss +0 -1
  3. package/src/features/addresses/layouts/AddressesLayout/addresses-layout.scss +0 -1
  4. package/src/features/collections/layouts/CollectionsLayout/collections-layout.scss +0 -1
  5. package/src/features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss +0 -2
  6. package/src/features/custom-fields/layouts/CustomFieldsLayout/custom-fields-layout.scss +0 -1
  7. package/src/features/org-units/layouts/OrgUnitsLayout/org-units-layout.scss +0 -5
  8. package/src/features/payment-methods/layouts/PaymentMethodsLayout/payment-methods-layout.scss +0 -2
  9. package/src/features/profile/layouts/ProfileLayout/profile-layout.scss +0 -1
  10. package/src/features/roles/layout/RolesLayout/roles-layout.scss +0 -2
  11. package/src/features/shared/components/Table/TableRow/TableRow.tsx +1 -3
  12. package/src/features/shared/layouts/BaseTabsLayout/BaseTabsLayout.tsx +2 -0
  13. package/src/features/shared/layouts/BaseTabsLayout/Container.tsx +5 -0
  14. package/src/features/shared/layouts/BaseTabsLayout/SidebarMenu.tsx +5 -14
  15. package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss +28 -25
  16. package/src/features/shared/layouts/ContractTabsLayout/ContractTabsLayout.tsx +14 -12
  17. package/src/features/shared/layouts/FinanceTabsLayout/FinanceTabsLayout.tsx +8 -6
  18. package/src/features/shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout.tsx +8 -6
  19. package/src/features/shared/utils/getFinanceSettingsLinks.ts +18 -2
  20. package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx +4 -6
  21. package/src/features/users/components/UserDropdownMenu/UserDropdownMenu.tsx +4 -6
  22. package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss +0 -2
  23. package/src/features/users/layouts/UsersLayout/users-layout.scss +0 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.1.75",
3
+ "version": "1.1.77",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -9,7 +9,6 @@
9
9
  @import "../../../shared/components/Paginator/paginator.scss";
10
10
  @import "../../components//AddressForm/address-form.scss";
11
11
 
12
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
13
12
  height: 100%;
14
13
 
15
14
  [data-fs-address-details-actions-wrapper] {
@@ -20,7 +20,6 @@
20
20
  @import "../../../shared/components/EmptyState/empty-state.scss";
21
21
  @import "../../../shared/components/Paginator/paginator.scss";
22
22
 
23
- padding: calc(var(--fs-spacing-9) - var(--fs-spacing-0));
24
23
  padding-top: 0;
25
24
  display: flex;
26
25
  flex-direction: column;
@@ -14,7 +14,6 @@
14
14
  @import "../../../shared/components/Paginator/paginator.scss";
15
15
 
16
16
  width: 100%;
17
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
18
17
 
19
18
  [data-fs-button] {
20
19
  border-radius: var(--fs-border-radius-circle);
@@ -10,8 +10,6 @@
10
10
  @import "../../../shared/components/HeaderInside/header-inside.scss";
11
11
  @import "../../../shared/components/EmptyState/empty-state.scss";
12
12
 
13
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
14
-
15
13
  [data-fs-topbar-actions-wrapper] {
16
14
  display: flex;
17
15
  flex-direction: row;
@@ -8,7 +8,6 @@
8
8
  @import "../../../shared/components/HeaderInside/header-inside.scss";
9
9
 
10
10
  width: 100%;
11
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
12
11
 
13
12
  [data-fs-bp-header-inside] {
14
13
  #header-inside-button-ghost {
@@ -16,11 +16,6 @@
16
16
  @import "../../../shared/components/HierarchyTree/hierarchy-tree.scss";
17
17
  @import "../../../shared/components/InternalSearch/internal-search.scss";
18
18
 
19
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
20
- height: 100%;
21
- display: flex;
22
- flex-direction: column;
23
-
24
19
  [data-fs-hierarchy-tree-wrapper] {
25
20
  flex: 1;
26
21
  display: flex;
@@ -86,8 +86,6 @@
86
86
  @import "../../../shared/components/Table/table.scss";
87
87
  @import "../../../shared/components/EmptyState/empty-state.scss";
88
88
 
89
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
90
-
91
89
  [data-fs-payment-methods-divider] {
92
90
  border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
93
91
  }
@@ -7,7 +7,6 @@
7
7
  @import "../../../shared/components/HeaderInside/header-inside.scss";
8
8
 
9
9
  width: 100%;
10
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
11
10
 
12
11
  [data-fs-bp-profile-details-title] {
13
12
  font-weight: var(--fs-text-weight-semibold);
@@ -7,8 +7,6 @@
7
7
  @import "../../../shared/components/Tag/tag.scss";
8
8
  @import "../../../shared/components/InternalTopbar/internal-top-bar.scss";
9
9
 
10
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
11
-
12
10
  [data-fs-bp-table-row-icon] {
13
11
  color: #0366dd;
14
12
  }
@@ -1,7 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
2
 
3
- import Link from "next/link";
4
-
5
3
  import { Dropdown } from "@faststore/components";
6
4
 
7
5
  import { BasicDropdownMenu } from "../../BasicDropdownMenu/BasicDropdownMenu";
@@ -36,7 +34,7 @@ export const TableRow = ({
36
34
  enabled = true,
37
35
  ...otherProps
38
36
  }: TableRowProps) => {
39
- const ClickComponent = href ? Link : "button";
37
+ const ClickComponent = href ? "a" : "button";
40
38
 
41
39
  return (
42
40
  <tr
@@ -1,5 +1,6 @@
1
1
  import type { ReactNode } from "react";
2
2
 
3
+ import { Container } from "./Container";
3
4
  import { Content } from "./Content";
4
5
  import { Navbar } from "./Navbar";
5
6
  import { SidebarMenu } from "./SidebarMenu";
@@ -22,3 +23,4 @@ export const BaseTabsLayout = ({
22
23
  BaseTabsLayout.Content = Content;
23
24
  BaseTabsLayout.Navbar = Navbar;
24
25
  BaseTabsLayout.SidebarMenu = SidebarMenu;
26
+ BaseTabsLayout.Container = Container;
@@ -0,0 +1,5 @@
1
+ import type { ReactNode } from "react";
2
+
3
+ export const Container = ({ children }: { children: ReactNode }) => (
4
+ <div data-fs-bp-base-tabs-layout-container>{children}</div>
5
+ );
@@ -52,20 +52,11 @@ export const SidebarMenu = ({ ...otherProps }: SidebarMenuProps) => {
52
52
  {getFinanceSettingsLinks({
53
53
  orgUnitId: currentOrgUnit?.id ?? "",
54
54
  contractId: idContract,
55
- }).map((option) => {
56
- const parts = option.link.split("/").filter(Boolean);
57
-
58
- let finalLink = option.link;
59
-
60
- if (parts.length === 3) {
61
- finalLink = `${option.link}${idContract}/`;
62
- }
63
- return (
64
- <VerticalNav.Link key={option.name} link={finalLink}>
65
- {option.name}
66
- </VerticalNav.Link>
67
- );
68
- })}
55
+ }).map((option) => (
56
+ <VerticalNav.Link key={option.name} link={option.link}>
57
+ {option.name}
58
+ </VerticalNav.Link>
59
+ ))}
69
60
  </VerticalNav.Menu>
70
61
  </aside>
71
62
  );
@@ -1,21 +1,12 @@
1
1
  @import "./sidebar-drawer/sidebar-drawer.scss";
2
2
 
3
3
  [data-fs-bp-base-tabs-layout] {
4
- --fs-bp-nav-height: 4.25rem;
5
-
6
- min-height: 100vh;
7
-
8
4
  display: grid;
9
- grid-template-areas:
10
- "navbar navbar"
11
- "sidebar content";
12
-
13
- grid-template-columns: 26.25rem 1fr;
14
- grid-template-rows: var(--fs-bp-nav-height) 1fr;
5
+ grid-template-rows: auto 1fr;
6
+ height: 100vh;
7
+ overflow: hidden;
15
8
 
16
9
  [data-fs-bp-nav] {
17
- grid-area: navbar;
18
-
19
10
  display: flex;
20
11
  width: 100%;
21
12
  align-items: center;
@@ -109,12 +100,29 @@
109
100
  }
110
101
  }
111
102
 
103
+ [data-fs-bp-base-tabs-layout-container] {
104
+ display: grid;
105
+ grid-template-columns: 26.25rem 1fr;
106
+ width: 100%;
107
+ max-width: var(--fs-grid-breakpoint-desktop);
108
+ margin: 0 auto;
109
+ overflow: hidden;
110
+
111
+ @include media("<notebook") {
112
+ grid-template-columns: 1fr;
113
+ }
114
+ }
115
+
112
116
  [data-fs-bp-sidebar-menu] {
113
117
  @import "../../components/LetterHighlight/letter-highlight.scss";
114
118
  @import "../../components/VerticalNav/vertical-nav.scss";
115
119
 
116
- grid-area: sidebar;
117
120
  padding: var(--fs-spacing-6);
121
+ overflow-y: auto;
122
+
123
+ @include media("<notebook") {
124
+ display: none;
125
+ }
118
126
 
119
127
  [data-fs-bp-letter-highlight] {
120
128
  margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
@@ -122,6 +130,7 @@
122
130
 
123
131
  [data-fs-vertical-nav-menu] {
124
132
  padding-bottom: var(--fs-spacing-2);
133
+
125
134
  [data-fs-vertical-nav-menu-list] {
126
135
  [data-fs-vertical-nav-menu-link] {
127
136
  padding: var(--fs-spacing-2)
@@ -145,21 +154,15 @@
145
154
  }
146
155
 
147
156
  [data-fs-bp-base-tabs-layout-content] {
148
- grid-area: content;
149
-
150
- max-height: calc(100vh - var(--fs-bp-nav-height));
151
157
  overflow-y: auto;
152
- padding: 0 var(--fs-text-size-7);
153
- }
158
+ padding: 0 calc(var(--fs-spacing-8) + var(--fs-spacing-0));
154
159
 
155
- @include media("<=notebook") {
156
- grid-template-areas:
157
- "navbar"
158
- "content";
159
- grid-template-columns: 1fr;
160
+ @include media("<notebook") {
161
+ padding: 0 var(--fs-spacing-7);
162
+ }
160
163
 
161
- [data-fs-bp-sidebar-menu] {
162
- display: none;
164
+ @include media("<tablet") {
165
+ padding: 0 calc(var(--fs-spacing-3) + var(--fs-spacing-0));
163
166
  }
164
167
  }
165
168
  }
@@ -46,18 +46,20 @@ export const ContractTabsLayout = ({
46
46
  }}
47
47
  loading={loading}
48
48
  />
49
- <BaseTabsLayout.SidebarMenu
50
- loading={loading}
51
- dropdownOptions={
52
- <DropdownItem>
53
- <Icon name="DoNotDisturbOn" width={20} height={20} />
54
- Remove from unit
55
- </DropdownItem>
56
- }
57
- verticalLinks={verticalLinks}
58
- name={currentContract?.name ?? ""}
59
- />
60
- <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
49
+ <BaseTabsLayout.Container>
50
+ <BaseTabsLayout.SidebarMenu
51
+ loading={loading}
52
+ dropdownOptions={
53
+ <DropdownItem>
54
+ <Icon name="DoNotDisturbOn" width={20} height={20} />
55
+ Remove from unit
56
+ </DropdownItem>
57
+ }
58
+ verticalLinks={verticalLinks}
59
+ name={currentContract?.name ?? ""}
60
+ />
61
+ <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
62
+ </BaseTabsLayout.Container>
61
63
  </BaseTabsLayout>
62
64
  );
63
65
  };
@@ -33,12 +33,14 @@ export const FinanceTabsLayout = ({
33
33
  }}
34
34
  loading={loading}
35
35
  />
36
- <BaseTabsLayout.SidebarMenu
37
- verticalLinks={verticalLinks}
38
- showLetterHighlight={false}
39
- loading={loading}
40
- />
41
- <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
36
+ <BaseTabsLayout.Container>
37
+ <BaseTabsLayout.SidebarMenu
38
+ verticalLinks={verticalLinks}
39
+ showLetterHighlight={false}
40
+ loading={loading}
41
+ />
42
+ <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
43
+ </BaseTabsLayout.Container>
42
44
  </BaseTabsLayout>
43
45
  );
44
46
  };
@@ -30,12 +30,14 @@ export const OrgUnitTabsLayout = ({
30
30
  }}
31
31
  loading={loading}
32
32
  />
33
- <BaseTabsLayout.SidebarMenu
34
- verticalLinks={verticalLinks}
35
- showLetterHighlight={false}
36
- loading={loading}
37
- />
38
- <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
33
+ <BaseTabsLayout.Container>
34
+ <BaseTabsLayout.SidebarMenu
35
+ verticalLinks={verticalLinks}
36
+ showLetterHighlight={false}
37
+ loading={loading}
38
+ />
39
+ <BaseTabsLayout.Content>{children}</BaseTabsLayout.Content>
40
+ </BaseTabsLayout.Container>
39
41
  </BaseTabsLayout>
40
42
  );
41
43
  };
@@ -1,5 +1,15 @@
1
1
  import { buyerPortalRoutes } from "./buyerPortalRoutes";
2
2
 
3
+ const normalizeFinanceLinks = (route: string, contracId: string) => {
4
+ const parts = route.split("/").filter(Boolean);
5
+
6
+ if (parts.length === 3) {
7
+ route += `${contracId}`;
8
+ }
9
+
10
+ return route;
11
+ };
12
+
3
13
  export const getFinanceSettingsLinks = ({
4
14
  orgUnitId,
5
15
  contractId,
@@ -9,10 +19,16 @@ export const getFinanceSettingsLinks = ({
9
19
  }) => [
10
20
  {
11
21
  name: "Budgets",
12
- link: buyerPortalRoutes.budgets({ orgUnitId, contractId }),
22
+ link: normalizeFinanceLinks(
23
+ buyerPortalRoutes.budgets({ orgUnitId, contractId }),
24
+ contractId
25
+ ),
13
26
  },
14
27
  {
15
28
  name: "Buying Policies",
16
- link: buyerPortalRoutes.buyingPolicies({ orgUnitId, contractId }),
29
+ link: normalizeFinanceLinks(
30
+ buyerPortalRoutes.buyingPolicies({ orgUnitId, contractId }),
31
+ contractId
32
+ ),
17
33
  },
18
34
  ];
@@ -79,12 +79,10 @@ export const CreateUserDrawer = ({
79
79
  data-fs-bp-toast-view-button
80
80
  type="button"
81
81
  onClick={() => {
82
- router.push(
83
- buyerPortalRoutes.userDetails({
84
- userId: user.id,
85
- orgUnitId: orgUnitId,
86
- })
87
- );
82
+ window.location.href = buyerPortalRoutes.userDetails({
83
+ userId: user.id,
84
+ orgUnitId: orgUnitId,
85
+ });
88
86
  }}
89
87
  >
90
88
  View
@@ -56,12 +56,10 @@ export const UserDropdownMenu = ({
56
56
  <BasicDropdownMenu>
57
57
  <DropdownItem
58
58
  onClick={() =>
59
- route.push(
60
- buyerPortalRoutes.userDetails({
61
- orgUnitId: currentOrgUnit?.id ?? "",
62
- userId: user.id,
63
- })
64
- )
59
+ (window.location.href = buyerPortalRoutes.userDetails({
60
+ orgUnitId: currentOrgUnit?.id ?? "",
61
+ userId: user.id,
62
+ }))
65
63
  }
66
64
  >
67
65
  <Icon name="OpenInNew" {...sizeProps} />
@@ -61,8 +61,6 @@
61
61
  @import "../../../shared/components/HeaderInside/header-inside.scss";
62
62
  @import "../../../shared/components/Tag/tag.scss";
63
63
 
64
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
65
-
66
64
  [data-fs-user-details-header-status] {
67
65
  display: flex;
68
66
  align-items: center;
@@ -19,8 +19,6 @@
19
19
  @import "../../../shared/components/Paginator/paginator.scss";
20
20
 
21
21
  --data-fs-users-table-width: 11.875rem;
22
-
23
- padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
24
22
 
25
23
  [data-fs-users-subtitle] {
26
24
  margin-left: var(--fs-spacing-2);