@vtex/faststore-plugin-buyer-portal 1.1.67 → 1.1.69
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.
- package/package.json +1 -1
- package/src/features/org-units/components/AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown.tsx +1 -0
- package/src/features/org-units/components/OrgUnitBreadcrumb/OrgUnitBreadcrumb.tsx +2 -2
- package/src/features/org-units/components/OrgUnitsDropdownMenu/OrgUnitsDropdownMenu.tsx +1 -0
- package/src/features/shared/components/BasicDropdownMenu/basic-dropdown-menu.scss +1 -1
- package/src/features/shared/components/HeaderInside/header-inside.scss +6 -5
- package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx +52 -40
- package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss +57 -15
- package/src/features/shared/layouts/ContractTabsLayout/ContractTabsLayout.tsx +1 -2
- package/src/features/shared/layouts/FinanceTabsLayout/FinanceTabsLayout.tsx +1 -2
- package/src/features/shared/layouts/OrgUnitTabsLayout/OrgUnitTabLayout.tsx +1 -2
- package/src/features/users/components/CreateUserDrawer/CreateUserDrawer.tsx +2 -2
- package/src/features/users/components/UsersCard/UsersCard.tsx +1 -0
- package/src/features/users/layouts/UsersLayout/UsersLayout.tsx +4 -2
package/package.json
CHANGED
|
@@ -26,7 +26,7 @@ export const OrgUnitBreadcrumb = ({
|
|
|
26
26
|
const inBreadcrumb = sortedByPosition.slice(0, offset);
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
|
-
<
|
|
29
|
+
<div data-fs-bp-breadcrumb-nav>
|
|
30
30
|
<OrgUnitBreadcrumbDropdown items={inBreadcrumb} />
|
|
31
31
|
{Boolean(inBreadcrumb.length) && divider}
|
|
32
32
|
|
|
@@ -35,6 +35,6 @@ export const OrgUnitBreadcrumb = ({
|
|
|
35
35
|
items={sortedByPosition.slice(offset)}
|
|
36
36
|
divider={divider}
|
|
37
37
|
/>
|
|
38
|
-
</
|
|
38
|
+
</div>
|
|
39
39
|
);
|
|
40
40
|
};
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
[data-fs-bp-header-inside-title] {
|
|
17
17
|
text-transform: capitalize;
|
|
18
18
|
font-size: var(--fs-text-size-4);
|
|
19
|
+
color: #000;
|
|
19
20
|
font-weight: 600;
|
|
20
21
|
margin-right: auto;
|
|
21
22
|
}
|
|
@@ -32,10 +33,10 @@
|
|
|
32
33
|
margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
|
|
33
34
|
cursor: pointer;
|
|
34
35
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
&:disabled {
|
|
37
|
+
background-color: #f5f5f5;
|
|
38
|
+
color: #adadad;
|
|
39
|
+
cursor: not-allowed;
|
|
40
|
+
}
|
|
40
41
|
}
|
|
41
42
|
}
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
Skeleton,
|
|
11
11
|
} from "@faststore/ui";
|
|
12
12
|
|
|
13
|
+
import { OrgUnitBreadcrumb } from "../../../org-units/components";
|
|
13
14
|
import { ProfileSummary } from "../../../profile/components";
|
|
14
15
|
import { Icon } from "../../components/Icon";
|
|
15
16
|
import { useDrawerProps } from "../../hooks";
|
|
@@ -18,10 +19,10 @@ import { buyerPortalRoutes } from "../../utils/buyerPortalRoutes";
|
|
|
18
19
|
|
|
19
20
|
import { SidebarDrawer } from "./sidebar-drawer/SidebarDrawer";
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
orgUnitName: string;
|
|
23
|
-
orgUnitId: string;
|
|
22
|
+
import type { OrgUnitBasicData } from "../../../org-units/types";
|
|
24
23
|
|
|
24
|
+
export type NavbarProps = {
|
|
25
|
+
orgUnit?: OrgUnitBasicData | null;
|
|
25
26
|
pageName: string;
|
|
26
27
|
person: {
|
|
27
28
|
image?: ReactNode;
|
|
@@ -32,10 +33,9 @@ export type NavbarProps = {
|
|
|
32
33
|
};
|
|
33
34
|
|
|
34
35
|
export const Navbar = ({
|
|
35
|
-
|
|
36
|
-
orgUnitId,
|
|
37
|
-
pageName,
|
|
36
|
+
orgUnit,
|
|
38
37
|
person,
|
|
38
|
+
pageName,
|
|
39
39
|
loading = false,
|
|
40
40
|
...otherProps
|
|
41
41
|
}: NavbarProps) => {
|
|
@@ -45,57 +45,69 @@ export const Navbar = ({
|
|
|
45
45
|
...deleteOpenSidebarMenuDrawerProps
|
|
46
46
|
} = useDrawerProps();
|
|
47
47
|
|
|
48
|
+
const breadcrumbList = loading
|
|
49
|
+
? []
|
|
50
|
+
: orgUnit?.path.ids
|
|
51
|
+
.split("/")
|
|
52
|
+
.slice(1)
|
|
53
|
+
.map((orgUnitId, index) => ({
|
|
54
|
+
unitId: orgUnitId,
|
|
55
|
+
item: buyerPortalRoutes.orgUnitDetails({ orgUnitId }),
|
|
56
|
+
name: orgUnit.path.names.split("/")[index],
|
|
57
|
+
position: index + 1,
|
|
58
|
+
})) ?? [];
|
|
59
|
+
|
|
48
60
|
return (
|
|
49
61
|
<>
|
|
50
62
|
<nav data-fs-bp-nav {...otherProps}>
|
|
51
|
-
<div data-fs-bp-nav-
|
|
63
|
+
<div data-fs-bp-nav-menu-btn-container>
|
|
52
64
|
<IconButton
|
|
53
65
|
data-fs-bp-sidebar-drawer-btn
|
|
54
|
-
icon={<Icon name="Menu" width={18} height={
|
|
66
|
+
icon={<Icon name="Menu" width={18} height={12} />}
|
|
55
67
|
aria-label={"open sidebar menu"}
|
|
56
68
|
onClick={() => {
|
|
57
69
|
openSidebarMenu();
|
|
58
70
|
}}
|
|
59
71
|
/>
|
|
60
|
-
<Link
|
|
61
|
-
data-fs-bp-nav-org-unit-name
|
|
62
|
-
href={buyerPortalRoutes.orgUnitDetails({ orgUnitId })}
|
|
63
|
-
>
|
|
64
|
-
<Icon name="Folder" width={24} height={24} />
|
|
65
|
-
{loading ? (
|
|
66
|
-
<Skeleton size={{ width: "22rem", height: "2.5rem" }} />
|
|
67
|
-
) : (
|
|
68
|
-
orgUnitName
|
|
69
|
-
)}
|
|
70
|
-
</Link>
|
|
71
72
|
</div>
|
|
72
|
-
<span data-fs-bp-nav-page-name>{pageName}</span>
|
|
73
73
|
{loading ? (
|
|
74
|
-
<Skeleton size={{ width: "
|
|
74
|
+
<Skeleton size={{ width: "22rem", height: "2.5rem" }} />
|
|
75
75
|
) : (
|
|
76
|
-
<
|
|
77
|
-
<DropdownButton asChild>
|
|
78
|
-
<IconButton
|
|
79
|
-
data-fs-bp-nav-account-menu-trigger
|
|
80
|
-
icon={<Icon name="AccountCircle" width={20} height={20} />}
|
|
81
|
-
aria-label={"open sidebar menu"}
|
|
82
|
-
/>
|
|
83
|
-
</DropdownButton>
|
|
84
|
-
|
|
85
|
-
<DropdownMenu align="right" data-fs-bp-nav-menu>
|
|
86
|
-
<ProfileSummary
|
|
87
|
-
data-fs-bp-nav-menu-profile-summary
|
|
88
|
-
onLogoutClick={doLogout}
|
|
89
|
-
orgName={orgUnitName}
|
|
90
|
-
person={person}
|
|
91
|
-
/>
|
|
92
|
-
</DropdownMenu>
|
|
93
|
-
</Dropdown>
|
|
76
|
+
<OrgUnitBreadcrumb items={breadcrumbList} maxItems={1} />
|
|
94
77
|
)}
|
|
78
|
+
|
|
79
|
+
<div data-fs-bp-nav-menu-actions>
|
|
80
|
+
<Link href="/" data-fs-bp-nav-menu-start-shopping-link>
|
|
81
|
+
Start shopping
|
|
82
|
+
</Link>
|
|
83
|
+
|
|
84
|
+
{loading ? (
|
|
85
|
+
<Skeleton size={{ width: "2.5rem", height: "2.5rem" }} />
|
|
86
|
+
) : (
|
|
87
|
+
<Dropdown>
|
|
88
|
+
<DropdownButton asChild>
|
|
89
|
+
<IconButton
|
|
90
|
+
data-fs-bp-nav-account-menu-trigger
|
|
91
|
+
icon={<Icon name="AccountCircle" width={20} height={20} />}
|
|
92
|
+
aria-label={"open sidebar menu"}
|
|
93
|
+
/>
|
|
94
|
+
</DropdownButton>
|
|
95
|
+
|
|
96
|
+
<DropdownMenu align="right" data-fs-bp-nav-menu>
|
|
97
|
+
<ProfileSummary
|
|
98
|
+
data-fs-bp-nav-menu-profile-summary
|
|
99
|
+
onLogoutClick={doLogout}
|
|
100
|
+
orgName={orgUnit?.name ?? ""}
|
|
101
|
+
person={person}
|
|
102
|
+
/>
|
|
103
|
+
</DropdownMenu>
|
|
104
|
+
</Dropdown>
|
|
105
|
+
)}
|
|
106
|
+
</div>
|
|
95
107
|
</nav>
|
|
96
108
|
{isOpenSidebarMenuDrawerOpen && (
|
|
97
109
|
<SidebarDrawer
|
|
98
|
-
orgUnitName={
|
|
110
|
+
orgUnitName={orgUnit?.name ?? ""}
|
|
99
111
|
pageName={pageName}
|
|
100
112
|
{...deleteOpenSidebarMenuDrawerProps}
|
|
101
113
|
isOpen={isOpenSidebarMenuDrawerOpen}
|
|
@@ -1,16 +1,5 @@
|
|
|
1
1
|
@import "./sidebar-drawer/sidebar-drawer.scss";
|
|
2
2
|
|
|
3
|
-
[data-fs-bp-nav-menu] {
|
|
4
|
-
--fs-profile-dropdown-menu-width: 22.5rem;
|
|
5
|
-
width: auto;
|
|
6
|
-
|
|
7
|
-
background-color: white;
|
|
8
|
-
|
|
9
|
-
[data-fs-bp-nav-menu-profile-summary] {
|
|
10
|
-
min-width: var(--fs-profile-dropdown-menu-width);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
3
|
[data-fs-bp-base-tabs-layout] {
|
|
15
4
|
--fs-bp-nav-height: 4.25rem;
|
|
16
5
|
|
|
@@ -35,7 +24,21 @@
|
|
|
35
24
|
|
|
36
25
|
border-bottom: var(--fs-border-width) solid #e0e0e0;
|
|
37
26
|
|
|
38
|
-
|
|
27
|
+
@include media("<tablet") {
|
|
28
|
+
padding: var(--fs-text-size-0)
|
|
29
|
+
calc(var(--fs-spacing-0) + var(--fs-spacing-3));
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-fs-bp-breadcrumb-current] {
|
|
33
|
+
font-size: var(--fs-text-size-2);
|
|
34
|
+
|
|
35
|
+
@include media("<=phonemid") {
|
|
36
|
+
font-size: var(--fs-text-size-1);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-fs-bp-nav-menu-btn-container] {
|
|
41
|
+
width: 2.5rem;
|
|
39
42
|
display: flex;
|
|
40
43
|
align-items: center;
|
|
41
44
|
font-weight: 600;
|
|
@@ -45,14 +48,14 @@
|
|
|
45
48
|
text-decoration: none;
|
|
46
49
|
|
|
47
50
|
svg {
|
|
48
|
-
margin-right: var(--fs-spacing-1);
|
|
51
|
+
/* margin-right: var(--fs-spacing-1); */
|
|
49
52
|
color: #0366dd;
|
|
50
53
|
}
|
|
51
54
|
|
|
52
55
|
& > [data-fs-bp-sidebar-drawer-btn] {
|
|
53
|
-
width:
|
|
56
|
+
width: var(--fs-spacing-4);
|
|
54
57
|
height: var(--fs-spacing-4);
|
|
55
|
-
margin-right: var(--fs-spacing-3);
|
|
58
|
+
/* margin-right: var(--fs-spacing-3); */
|
|
56
59
|
}
|
|
57
60
|
}
|
|
58
61
|
|
|
@@ -65,6 +68,45 @@
|
|
|
65
68
|
font-size: var(--fs-text-size-3);
|
|
66
69
|
line-height: var(--fs-text-size-5);
|
|
67
70
|
}
|
|
71
|
+
|
|
72
|
+
[data-fs-bp-nav-menu] {
|
|
73
|
+
--fs-profile-dropdown-menu-width: 22.5rem;
|
|
74
|
+
width: auto;
|
|
75
|
+
|
|
76
|
+
background-color: white;
|
|
77
|
+
|
|
78
|
+
[data-fs-bp-nav-menu-profile-summary] {
|
|
79
|
+
min-width: var(--fs-profile-dropdown-menu-width);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
[data-fs-bp-nav-menu-actions] {
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
[data-fs-bp-nav-menu-start-shopping-link] {
|
|
89
|
+
display: flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
padding: calc(var(--fs-spacing-1) + var(--fs-spacing-2))
|
|
93
|
+
calc(var(--fs-spacing-3) + var(--fs-spacing-0));
|
|
94
|
+
|
|
95
|
+
@include media("<=tablet") {
|
|
96
|
+
display: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
color: #3d3d3d;
|
|
100
|
+
font-weight: var(--fs-text-weight-semibold);
|
|
101
|
+
line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
|
|
102
|
+
font-size: var(--fs-text-size-2);
|
|
103
|
+
text-decoration: none;
|
|
104
|
+
margin-right: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
|
|
105
|
+
|
|
106
|
+
span {
|
|
107
|
+
margin-right: var(--fs-spacing-3);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
68
110
|
}
|
|
69
111
|
|
|
70
112
|
[data-fs-bp-sidebar-menu] {
|
|
@@ -38,8 +38,7 @@ export const ContractTabsLayout = ({
|
|
|
38
38
|
return (
|
|
39
39
|
<BaseTabsLayout data-fs-bp-contract-tabs-layout>
|
|
40
40
|
<BaseTabsLayout.Navbar
|
|
41
|
-
|
|
42
|
-
orgUnitId={currentOrgUnit?.id ?? ""}
|
|
41
|
+
orgUnit={currentOrgUnit}
|
|
43
42
|
pageName={pageName}
|
|
44
43
|
person={{
|
|
45
44
|
name: currentUser?.name ?? "",
|
|
@@ -25,8 +25,7 @@ export const FinanceTabsLayout = ({
|
|
|
25
25
|
return (
|
|
26
26
|
<BaseTabsLayout data-fs-bp-finance-tabs-layout>
|
|
27
27
|
<BaseTabsLayout.Navbar
|
|
28
|
-
|
|
29
|
-
orgUnitId={currentOrgUnit?.id ?? ""}
|
|
28
|
+
orgUnit={currentOrgUnit}
|
|
30
29
|
pageName={pageName}
|
|
31
30
|
person={{
|
|
32
31
|
name: currentUser?.name ?? "",
|
|
@@ -22,8 +22,7 @@ export const OrgUnitTabsLayout = ({
|
|
|
22
22
|
return (
|
|
23
23
|
<BaseTabsLayout data-fs-bp-org-unit-tabs-layout>
|
|
24
24
|
<BaseTabsLayout.Navbar
|
|
25
|
-
|
|
26
|
-
orgUnitId={currentOrgUnit?.id ?? ""}
|
|
25
|
+
orgUnit={currentOrgUnit}
|
|
27
26
|
pageName={pageName}
|
|
28
27
|
person={{
|
|
29
28
|
name: currentUser?.name ?? "",
|
|
@@ -17,14 +17,14 @@ import { useAddUserToOrgUnit } from "../../hooks";
|
|
|
17
17
|
|
|
18
18
|
export type CreateUserDrawerProps = Omit<BasicDrawerProps, "children"> & {
|
|
19
19
|
onCreate?: () => void;
|
|
20
|
-
orgUnit
|
|
20
|
+
orgUnit: { id: string; name: string };
|
|
21
21
|
rolesOptions: RoleData[] | null;
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
export const CreateUserDrawer = ({
|
|
25
25
|
close,
|
|
26
26
|
onCreate,
|
|
27
|
-
orgUnit: { id: orgUnitId, name: orgUnitName }
|
|
27
|
+
orgUnit: { id: orgUnitId, name: orgUnitName },
|
|
28
28
|
rolesOptions,
|
|
29
29
|
...props
|
|
30
30
|
}: CreateUserDrawerProps) => {
|
|
@@ -69,6 +69,7 @@ export default function UsersCard({ users = [], orgUnitData }: UsersCardProps) {
|
|
|
69
69
|
</BasicCard>
|
|
70
70
|
{isCreateUserDrawerOpen && (
|
|
71
71
|
<CreateUserDrawer
|
|
72
|
+
orgUnit={{ id: orgUnitData?.id ?? "", name: orgUnitData?.name ?? "" }}
|
|
72
73
|
rolesOptions={rolesOptions}
|
|
73
74
|
isOpen={isCreateUserDrawerOpen}
|
|
74
75
|
{...createUserDrawerProps}
|
|
@@ -168,9 +168,11 @@ export const UsersLayout = ({
|
|
|
168
168
|
|
|
169
169
|
{isCreateUserDrawerOpen && (
|
|
170
170
|
<CreateUserDrawer
|
|
171
|
-
// biome-ignore lint/style/noNonNullAssertion: <explanation>
|
|
172
171
|
rolesOptions={rolesOptions}
|
|
173
|
-
orgUnit={
|
|
172
|
+
orgUnit={{
|
|
173
|
+
id: currentOrgUnit?.id ?? "",
|
|
174
|
+
name: currentOrgUnit?.name ?? "",
|
|
175
|
+
}}
|
|
174
176
|
isOpen={isCreateUserDrawerOpen}
|
|
175
177
|
{...createUserDrawerProps}
|
|
176
178
|
/>
|