@vtex/faststore-plugin-buyer-portal 1.0.3 → 1.0.5
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 +4 -8
- package/plugin.config.js +1 -1
- package/src/components/AddressesCard/AddressesCard.tsx +89 -0
- package/src/components/Card/Card.scss +164 -0
- package/src/components/Card/Card.tsx +16 -0
- package/src/components/Card/CardBody.tsx +7 -0
- package/src/components/Card/CardFooter.tsx +5 -0
- package/src/components/Card/CardHeader.tsx +7 -0
- package/src/components/Card/index.ts +4 -0
- package/src/components/ContractsCard/ContractsCard.tsx +90 -0
- package/src/components/Icons/Active.tsx +18 -0
- package/src/components/Icons/Address.tsx +20 -0
- package/src/components/Icons/Delete.tsx +14 -0
- package/src/components/Icons/Edit.tsx +9 -0
- package/src/components/Icons/FilledFolder.tsx +14 -0
- package/src/components/Icons/Info.tsx +12 -0
- package/src/components/Icons/Link.tsx +7 -13
- package/src/components/Icons/index.ts +7 -0
- package/src/components/Navbar/Navbar.tsx +4 -2
- package/src/components/OrganizationalUnitsCard/OrganizationalUnitsCard.tsx +98 -0
- package/src/components/ProfileCard/ProfileCard.tsx +48 -0
- package/src/components/UsersCard/UsersCard.tsx +92 -0
- package/src/components/index.ts +6 -1
- package/src/mock/profile-data.ts +52 -0
- package/src/pages/buyer-portal.tsx +25 -1
- package/src/themes/index.scss +84 -0
package/package.json
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vtex/faststore-plugin-buyer-portal",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "A plugin for faststore with buyer portal",
|
|
5
5
|
"main": "index.js",
|
|
6
|
-
"dependencies": {
|
|
7
|
-
"react": "^18.2.0",
|
|
8
|
-
"react-dom": "^18.2.0"
|
|
9
|
-
},
|
|
6
|
+
"dependencies": {},
|
|
10
7
|
"devDependencies": {
|
|
11
8
|
"@faststore/core": "^3.0.147",
|
|
12
9
|
"@faststore/ui": "^3.0.147",
|
|
@@ -15,9 +12,8 @@
|
|
|
15
12
|
"typescript": "4.7.3"
|
|
16
13
|
},
|
|
17
14
|
"peerDependencies": {
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"next": "13.5.6"
|
|
15
|
+
"react": "^18.2.0",
|
|
16
|
+
"react-dom": "^18.2.0"
|
|
21
17
|
},
|
|
22
18
|
"license": "MIT"
|
|
23
19
|
}
|
package/plugin.config.js
CHANGED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import {
|
|
2
|
+
IconButton, Icon, Toggle, Dropdown,
|
|
3
|
+
DropdownItem,
|
|
4
|
+
DropdownMenu,
|
|
5
|
+
DropdownButton,
|
|
6
|
+
} from '@faststore/ui'
|
|
7
|
+
import Link from "next/link";
|
|
8
|
+
|
|
9
|
+
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
10
|
+
import * as Icons from "../Icons";
|
|
11
|
+
|
|
12
|
+
export type AddressInformation = {
|
|
13
|
+
addressId: string,
|
|
14
|
+
street: string,
|
|
15
|
+
addressType: string,
|
|
16
|
+
isActive: boolean,
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
type AddressesCardProps = {
|
|
20
|
+
addresses: AddressInformation[]
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default function AddressesCard({ addresses }: AddressesCardProps) {
|
|
24
|
+
return (
|
|
25
|
+
<section data-fs-home-card>
|
|
26
|
+
<Card>
|
|
27
|
+
<CardHeader>
|
|
28
|
+
<div data-fs-card-title>Addresses <span data-fs-card-title-counter>{addresses.length}</span></div>
|
|
29
|
+
<IconButton icon={<Icon name="PlusCircle" width={20} height={20} />}
|
|
30
|
+
aria-label={`$addresses action`} onClick={() => { }} />
|
|
31
|
+
</CardHeader>
|
|
32
|
+
<CardBody>
|
|
33
|
+
{addresses.length && addresses.map((address: AddressInformation) => {
|
|
34
|
+
return (
|
|
35
|
+
<div>
|
|
36
|
+
<hr data-fs-divider />
|
|
37
|
+
|
|
38
|
+
<div data-fs-card-row key={address.addressId}>
|
|
39
|
+
<div data-fs-card-information-row>
|
|
40
|
+
<div data-fs-card-information-icon>
|
|
41
|
+
<Icons.Address height={24} width={24} />
|
|
42
|
+
</div>
|
|
43
|
+
<div data-fs-card-information-title>
|
|
44
|
+
<span >{address.street}</span>
|
|
45
|
+
</div>
|
|
46
|
+
<div data-fs-card-information-type>
|
|
47
|
+
<span data-fs-shipping-tag>{address.addressType}</span>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div data-fs-card-action-row>
|
|
51
|
+
<Toggle id="addressActive" defaultChecked={address.isActive} />
|
|
52
|
+
|
|
53
|
+
<Dropdown>
|
|
54
|
+
<DropdownButton><Icon name='DotsThree' data-fs-menu-action-button /></DropdownButton>
|
|
55
|
+
<DropdownMenu>
|
|
56
|
+
<DropdownItem>
|
|
57
|
+
<Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
|
|
58
|
+
</DropdownItem>
|
|
59
|
+
<DropdownItem>
|
|
60
|
+
<Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
|
|
61
|
+
</DropdownItem>
|
|
62
|
+
<DropdownItem>
|
|
63
|
+
<Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
|
|
64
|
+
</DropdownItem>
|
|
65
|
+
<DropdownItem>
|
|
66
|
+
<div data-fs-dropdown-active-item>
|
|
67
|
+
<div data-fs-dropdown-active-item-label>
|
|
68
|
+
<Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
|
|
69
|
+
</div>
|
|
70
|
+
<Toggle id="addressActiveMenu" defaultChecked={address.isActive} data-fs-internal-toggle />
|
|
71
|
+
</div>
|
|
72
|
+
</DropdownItem>
|
|
73
|
+
</DropdownMenu>
|
|
74
|
+
</Dropdown>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>)
|
|
78
|
+
})}
|
|
79
|
+
</CardBody>
|
|
80
|
+
<CardFooter>
|
|
81
|
+
<Link href="/" data-fs-card-footer-link>
|
|
82
|
+
<span>Manage addresses</span>
|
|
83
|
+
</Link>
|
|
84
|
+
<IconButton icon={<Icon name="CaretRight" data-fs-card-footer-icon />} aria-label="manage-addresses" />
|
|
85
|
+
</CardFooter>
|
|
86
|
+
</Card>
|
|
87
|
+
</section>
|
|
88
|
+
)
|
|
89
|
+
}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
[data-fs-card] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Design Tokens for Card
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
|
|
6
|
+
// Default properties
|
|
7
|
+
--fs-card-border-width : var(--fs-border-width);
|
|
8
|
+
|
|
9
|
+
// Header
|
|
10
|
+
--fs-card-header-padding : var(--fs-spacing-3);
|
|
11
|
+
--fs-card-header-bkg-color : var(--fs-color-neutral-bkg);
|
|
12
|
+
--fs-card-header-font-weight : var(--fs-text-weight-bold);
|
|
13
|
+
--fs-card-header-icon-color : var(--fs-color-main-2);
|
|
14
|
+
|
|
15
|
+
// Body
|
|
16
|
+
--fs-card-body-padding : var(--fs-spacing-3);
|
|
17
|
+
|
|
18
|
+
// --------------------------------------------------------
|
|
19
|
+
// Structural Styles
|
|
20
|
+
// --------------------------------------------------------
|
|
21
|
+
border: var(--fs-card-border-width) solid rgba(224, 224, 224, 1);
|
|
22
|
+
border-radius: 12px;
|
|
23
|
+
|
|
24
|
+
[data-fs-card-header] {
|
|
25
|
+
border-top-left-radius: 12px;
|
|
26
|
+
border-top-right-radius: 12px;
|
|
27
|
+
padding-bottom: 0px !important;
|
|
28
|
+
background-color: white;
|
|
29
|
+
align-items: center;
|
|
30
|
+
|
|
31
|
+
padding: var(--fs-card-header-padding);
|
|
32
|
+
font-weight: var(--fs-card-header-font-weight);
|
|
33
|
+
display: flex;
|
|
34
|
+
justify-content: space-between;
|
|
35
|
+
|
|
36
|
+
[data-fs-button]{
|
|
37
|
+
--fs-button-height: var(--fs-spacing-4);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-fs-icon]{
|
|
41
|
+
color: var(--fs-card-header-icon-color);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-fs-card-title-counter]{
|
|
45
|
+
font-weight: 600;
|
|
46
|
+
margin-left: 0.75rem;
|
|
47
|
+
color: #ADADAD;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[data-fs-card-body] {
|
|
52
|
+
padding: var(--fs-card-body-padding);
|
|
53
|
+
padding-bottom: 0px;
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
[data-fs-profile-card-row] {
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: row;
|
|
59
|
+
gap: 2.5rem;
|
|
60
|
+
padding-top: 1.25rem;
|
|
61
|
+
padding-bottom: 1.25rem;
|
|
62
|
+
|
|
63
|
+
[data-fs-card-row-label]{
|
|
64
|
+
font-weight: 500;
|
|
65
|
+
width: 100px;
|
|
66
|
+
color: gray;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
[data-fs-card-row]{
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: row;
|
|
73
|
+
gap: 2.5rem;
|
|
74
|
+
padding-top: 0.5rem;
|
|
75
|
+
padding-bottom: 0.5rem;
|
|
76
|
+
|
|
77
|
+
[data-fs-card-row-label]{
|
|
78
|
+
font-weight: 500;
|
|
79
|
+
width: 100px;
|
|
80
|
+
color: gray;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
[data-fs-card-information-row] {
|
|
85
|
+
display: flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
width: 70%;
|
|
88
|
+
justify-content: space-around;
|
|
89
|
+
|
|
90
|
+
[data-fs-card-information-icon] {
|
|
91
|
+
width: 50px;
|
|
92
|
+
margin-left: 1rem;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
[data-fs-card-information-title] {
|
|
96
|
+
flex: 1;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
[data-fs-card-information-type] {
|
|
100
|
+
width: 100px;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
[data-fs-card-action-row] {
|
|
105
|
+
display: flex;
|
|
106
|
+
width: 50%;
|
|
107
|
+
justify-content: flex-end;
|
|
108
|
+
align-items: center;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
[data-fs-menu-action-button] {
|
|
113
|
+
rotate: 90deg;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
[data-fs-shipping-tag] {
|
|
117
|
+
background: #C2C2C2;
|
|
118
|
+
padding: 5px 10px 5px 10px;
|
|
119
|
+
border-radius: 100px;
|
|
120
|
+
font-weight: 500;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
[data-fs-card-body-empty-state] {
|
|
124
|
+
display: flex;
|
|
125
|
+
flex-direction: column;
|
|
126
|
+
align-items: center;
|
|
127
|
+
gap: 10px;
|
|
128
|
+
padding: 100px;
|
|
129
|
+
|
|
130
|
+
[data-fs-button]{
|
|
131
|
+
--fs-border-radius: 999px;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
[data-fs-email-text] {
|
|
136
|
+
color: #0366DD;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
[data-fs-divider] {
|
|
141
|
+
border: 1px solid #E0E0E0
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
[data-fs-card-footer] {
|
|
145
|
+
border-top-width: var(--fs-card-border-width);
|
|
146
|
+
border-top-color: rgba(224, 224, 224, 1);
|
|
147
|
+
border-top-style: solid;
|
|
148
|
+
padding: var(--fs-spacing-1) var(--fs-spacing-3);
|
|
149
|
+
display: flex;
|
|
150
|
+
justify-content: space-between;
|
|
151
|
+
align-items: center;
|
|
152
|
+
|
|
153
|
+
[data-fs-card-footer-link] {
|
|
154
|
+
font-weight: 500;
|
|
155
|
+
line-height: 14px;
|
|
156
|
+
color: #0366DD;
|
|
157
|
+
text-decoration: none;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
[data-fs-card-footer-icon] {
|
|
161
|
+
color: grey
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { HTMLAttributes } from "react";
|
|
2
|
+
import React, { forwardRef } from 'react'
|
|
3
|
+
|
|
4
|
+
export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const Card = forwardRef<HTMLDivElement, CardProps>(function Card({
|
|
8
|
+
children,
|
|
9
|
+
...otherProps
|
|
10
|
+
}, ref) {
|
|
11
|
+
return (
|
|
12
|
+
<section data-testid="fs-card" ref={ref} data-fs-card {...otherProps}>
|
|
13
|
+
{children}
|
|
14
|
+
</section >
|
|
15
|
+
)
|
|
16
|
+
})
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Icon, IconButton, Toggle, Dropdown,
|
|
3
|
+
DropdownItem,
|
|
4
|
+
DropdownMenu,
|
|
5
|
+
DropdownButton,
|
|
6
|
+
} from '@faststore/ui'
|
|
7
|
+
import Link from "next/link";
|
|
8
|
+
|
|
9
|
+
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
10
|
+
import * as Icons from "../Icons";
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
export type ContractInformation = {
|
|
14
|
+
id: string
|
|
15
|
+
name: string
|
|
16
|
+
isActive: boolean
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
type ContractsCardProps = {
|
|
20
|
+
contracts: ContractInformation[]
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
export default function ContractsCard({ contracts }: ContractsCardProps) {
|
|
25
|
+
return (
|
|
26
|
+
<section data-fs-home-card>
|
|
27
|
+
<Card>
|
|
28
|
+
<CardHeader>
|
|
29
|
+
<div data-fs-card-title>Contracts <span data-fs-card-title-counter>{contracts.length}</span></div>
|
|
30
|
+
<IconButton icon={<Icons.Info width={20} height={20} />}
|
|
31
|
+
aria-label={`$profile action`} onClick={() => { }} />
|
|
32
|
+
</CardHeader>
|
|
33
|
+
<CardBody>
|
|
34
|
+
{contracts.length && contracts.map((contract: ContractInformation) => {
|
|
35
|
+
return (
|
|
36
|
+
<div>
|
|
37
|
+
<hr data-fs-divider />
|
|
38
|
+
|
|
39
|
+
<div data-fs-card-row key={contract.id}>
|
|
40
|
+
<div data-fs-card-information-row>
|
|
41
|
+
<div data-fs-card-information-icon >
|
|
42
|
+
<Icon name="User" weight='bold' />
|
|
43
|
+
</div>
|
|
44
|
+
<div data-fs-card-information-title>
|
|
45
|
+
<h1 >{contract.name}</h1>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<div data-fs-card-action-row>
|
|
49
|
+
<Toggle id="contractActive" defaultChecked={contract.isActive} />
|
|
50
|
+
|
|
51
|
+
<Dropdown>
|
|
52
|
+
<DropdownButton>
|
|
53
|
+
<Icon name="DotsThree" data-fs-menu-action-button />
|
|
54
|
+
</DropdownButton>
|
|
55
|
+
<DropdownMenu align="right" data-fs-dropdown-menu>
|
|
56
|
+
<DropdownItem>
|
|
57
|
+
<Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
|
|
58
|
+
</DropdownItem>
|
|
59
|
+
<DropdownItem>
|
|
60
|
+
<Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
|
|
61
|
+
</DropdownItem>
|
|
62
|
+
<DropdownItem>
|
|
63
|
+
<Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
|
|
64
|
+
</DropdownItem>
|
|
65
|
+
<DropdownItem>
|
|
66
|
+
<div data-fs-dropdown-active-item>
|
|
67
|
+
<div data-fs-dropdown-active-item-label>
|
|
68
|
+
<Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
|
|
69
|
+
</div>
|
|
70
|
+
<Toggle id="contractActiveMenu" defaultChecked={contract.isActive} data-fs-internal-toggle />
|
|
71
|
+
</div>
|
|
72
|
+
</DropdownItem>
|
|
73
|
+
</DropdownMenu>
|
|
74
|
+
</Dropdown>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
</div>
|
|
78
|
+
</div>)
|
|
79
|
+
})}
|
|
80
|
+
</CardBody>
|
|
81
|
+
<CardFooter>
|
|
82
|
+
<Link href="/" data-fs-card-footer-link>
|
|
83
|
+
<span>View contracts</span>
|
|
84
|
+
</Link>
|
|
85
|
+
<IconButton icon={<Icon name="CaretRight" data-fs-card-footer-icon />} aria-label="view-contracts" />
|
|
86
|
+
</CardFooter>
|
|
87
|
+
</Card>
|
|
88
|
+
</section>
|
|
89
|
+
)
|
|
90
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Offline Pin
|
|
5
|
+
*/
|
|
6
|
+
export const Active = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960"><path d="M320-280h320v-80H320v80Zm118-120 226-226-57-55-169 169-86-86-56 56 142 142Zm42 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
|
|
8
|
+
|
|
9
|
+
)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Apartment
|
|
5
|
+
*/
|
|
6
|
+
export const Address = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#0366DD"><path d="M120-120v-560h160v-160h400v320h160v400H520v-160h-80v160H120Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 320h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Z" /></svg>)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Delete
|
|
5
|
+
*/
|
|
6
|
+
export const Delete = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#000000"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z" /></svg>
|
|
8
|
+
)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Edit
|
|
5
|
+
*/
|
|
6
|
+
export const Edit = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#000000"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z" /></svg>)
|
|
8
|
+
|
|
9
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IconProps } from ".";
|
|
2
|
+
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Folder
|
|
5
|
+
*/
|
|
6
|
+
export const FilledFolder = ({ ...props }: IconProps) => (
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#0366DD"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Z" /></svg>)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
import { IconProps } from ".";
|
|
3
|
+
|
|
4
|
+
/* *
|
|
5
|
+
* Material Symbols - Info
|
|
6
|
+
*/
|
|
7
|
+
export const Info = ({ ...props }: IconProps) => (
|
|
8
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" width="24px" ><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" /></svg>
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
import { IconProps } from ".";
|
|
2
2
|
|
|
3
|
+
/* *
|
|
4
|
+
* Material Symbols - Arrow Outward
|
|
5
|
+
*/
|
|
3
6
|
export const Link = ({ ...props }: IconProps) => (
|
|
4
|
-
<svg
|
|
5
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
-
viewBox="0 0 10 10"
|
|
7
|
-
fill="none"
|
|
8
|
-
{...props}
|
|
9
|
-
>
|
|
10
|
-
<path
|
|
11
|
-
fill-rule="evenodd"
|
|
12
|
-
clip-rule="evenodd"
|
|
13
|
-
d="M1.75 1C1.75 0.585786 2.08579 0.25 2.5 0.25H9C9.41421 0.25 9.75 0.585786 9.75 1V7.5C9.75 7.91421 9.41421 8.25 9 8.25C8.58579 8.25 8.25 7.91421 8.25 7.5V2.81066L1.53033 9.53033C1.23744 9.82322 0.762563 9.82322 0.46967 9.53033C0.176777 9.23744 0.176777 8.76256 0.46967 8.46967L7.18934 1.75H2.5C2.08579 1.75 1.75 1.41421 1.75 1Z"
|
|
14
|
-
fill="#3D3D3D"
|
|
15
|
-
/>
|
|
16
|
-
</svg>
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" {...props} viewBox="0 -960 960 960" fill="#C2c2c2"><path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" /></svg>
|
|
17
8
|
);
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
export type IconProps = {
|
|
2
2
|
width: number;
|
|
3
3
|
height: number;
|
|
4
|
+
fill?: string;
|
|
4
5
|
};
|
|
5
6
|
|
|
6
7
|
export { Profile } from "./Profile";
|
|
7
8
|
export { Link } from "./Link";
|
|
8
9
|
export { Load } from "./Load";
|
|
10
|
+
export { Info } from "./Info";
|
|
11
|
+
export { Edit } from "./Edit";
|
|
12
|
+
export { Delete } from './Delete';
|
|
13
|
+
export { Active } from './Active';
|
|
14
|
+
export { FilledFolder } from './FilledFolder';
|
|
15
|
+
export { Address } from './Address';
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import * as Icons from "../Icons";
|
|
2
2
|
import { Logo } from "../Logo/Logo";
|
|
3
3
|
import Link from "next/link";
|
|
4
|
+
import { ArrowUpRight } from '@phosphor-icons/react'
|
|
4
5
|
|
|
5
|
-
import { Dropdown, DropdownMenu, DropdownButton } from "@faststore/ui";
|
|
6
|
+
import { Dropdown, DropdownMenu, DropdownButton, Icon } from "@faststore/ui";
|
|
6
7
|
import { ProfileSummary } from "../ProfileSummary/ProfileSummary";
|
|
7
8
|
import { doLogout } from "../../utils/logout";
|
|
8
9
|
import { profileData } from "../../mock/profile-data";
|
|
9
10
|
|
|
11
|
+
|
|
10
12
|
export const Navbar = () => {
|
|
11
13
|
return (
|
|
12
14
|
<header data-fs-buyer-portal-navbar>
|
|
@@ -14,7 +16,7 @@ export const Navbar = () => {
|
|
|
14
16
|
<div data-fs-header-actions>
|
|
15
17
|
<Link href="/" data-fs-start-shopping-link>
|
|
16
18
|
<span>Start Shopping</span>
|
|
17
|
-
<Icons.Link width={
|
|
19
|
+
<Icons.Link width={16} height={16} />
|
|
18
20
|
</Link>
|
|
19
21
|
<Dropdown>
|
|
20
22
|
<DropdownButton asChild>
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Icon, Toggle, IconButton, Button, Dropdown,
|
|
3
|
+
DropdownItem,
|
|
4
|
+
DropdownMenu,
|
|
5
|
+
DropdownButton
|
|
6
|
+
} from '@faststore/ui'
|
|
7
|
+
import Link from "next/link";
|
|
8
|
+
|
|
9
|
+
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
10
|
+
import * as Icons from "../Icons";
|
|
11
|
+
|
|
12
|
+
export type OrganizationalUnitInformation = {
|
|
13
|
+
organizationalUnitId: string
|
|
14
|
+
organizationalUnitName: string
|
|
15
|
+
isActive: boolean
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
type OrganizationalUnitsCardProps = {
|
|
19
|
+
organizationalUnits: OrganizationalUnitInformation[]
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
export default function OrganizationalUnitsCard({ organizationalUnits = [] }: OrganizationalUnitsCardProps) {
|
|
24
|
+
return (
|
|
25
|
+
<section data-fs-home-card>
|
|
26
|
+
<Card>
|
|
27
|
+
<CardHeader>
|
|
28
|
+
<div data-fs-card-title>Organizational Units {organizationalUnits.length > 0 && (<span data-fs-card-title-counter>{organizationalUnits.length}</span>)} </div>
|
|
29
|
+
<IconButton icon={<Icon name="PlusCircle" width={20} height={20} />}
|
|
30
|
+
aria-label={`$profile action`} onClick={() => { }} />
|
|
31
|
+
</CardHeader>
|
|
32
|
+
|
|
33
|
+
<CardBody>
|
|
34
|
+
{organizationalUnits.length > 0 ? (
|
|
35
|
+
organizationalUnits.map((orgUnit: OrganizationalUnitInformation) => {
|
|
36
|
+
return (
|
|
37
|
+
<div key={orgUnit.organizationalUnitId}>
|
|
38
|
+
<hr data-fs-divider />
|
|
39
|
+
|
|
40
|
+
<div data-fs-card-row key={orgUnit.organizationalUnitId}>
|
|
41
|
+
<div data-fs-card-information-row>
|
|
42
|
+
<div data-fs-card-information-icon>
|
|
43
|
+
<Icons.FilledFolder width={24} height={24} fill='#0366DD' />
|
|
44
|
+
</div >
|
|
45
|
+
<div data-fs-card-information-title>
|
|
46
|
+
<span >{orgUnit.organizationalUnitName}</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div data-fs-card-action-row>
|
|
50
|
+
<Toggle id="orgUnitActive" defaultChecked={orgUnit.isActive} />
|
|
51
|
+
<Dropdown>
|
|
52
|
+
<DropdownButton>
|
|
53
|
+
<Icon name="DotsThree" data-fs-menu-action-button />
|
|
54
|
+
</DropdownButton>
|
|
55
|
+
<DropdownMenu align="right" data-fs-dropdown-menu>
|
|
56
|
+
<DropdownItem>
|
|
57
|
+
<Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
|
|
58
|
+
</DropdownItem>
|
|
59
|
+
<DropdownItem>
|
|
60
|
+
<Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
|
|
61
|
+
</DropdownItem>
|
|
62
|
+
<DropdownItem>
|
|
63
|
+
<Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
|
|
64
|
+
</DropdownItem>
|
|
65
|
+
<DropdownItem>
|
|
66
|
+
<div data-fs-dropdown-active-item>
|
|
67
|
+
<div data-fs-dropdown-active-item-label>
|
|
68
|
+
<Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
|
|
69
|
+
</div>
|
|
70
|
+
<Toggle id="userActiveMenu" defaultChecked={orgUnit.isActive} data-fs-internal-toggle />
|
|
71
|
+
</div>
|
|
72
|
+
</DropdownItem>
|
|
73
|
+
</DropdownMenu>
|
|
74
|
+
</Dropdown>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>)
|
|
78
|
+
})
|
|
79
|
+
) : (
|
|
80
|
+
<div data-fs-card-body-empty-state>
|
|
81
|
+
<Icons.FilledFolder width={40} height={40} fill="#c2c2c2" />
|
|
82
|
+
<span> No child organizational units yet </span>
|
|
83
|
+
<Button variant="primary">+ Add New</Button>
|
|
84
|
+
</div>
|
|
85
|
+
)}
|
|
86
|
+
</CardBody>
|
|
87
|
+
{organizationalUnits.length > 0 && (
|
|
88
|
+
<CardFooter>
|
|
89
|
+
<Link href="/" data-fs-card-footer-link>
|
|
90
|
+
<span>Manage organizational units</span>
|
|
91
|
+
</Link>
|
|
92
|
+
<IconButton icon={<Icon name="CaretRight" data-fs-card-footer-icon />} aria-label="manage-organizational-units" />
|
|
93
|
+
</CardFooter>
|
|
94
|
+
)}
|
|
95
|
+
</Card>
|
|
96
|
+
</section>
|
|
97
|
+
)
|
|
98
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
2
|
+
import { Icon, IconButton } from '@faststore/ui'
|
|
3
|
+
import Link from "next/link";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
type ProfileCardProps = {
|
|
7
|
+
name: string
|
|
8
|
+
email: string
|
|
9
|
+
id: string
|
|
10
|
+
|
|
11
|
+
imageUrl?: string
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export default function ProfileCard({ name, email, id, imageUrl }: ProfileCardProps) {
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<section data-fs-home-card>
|
|
18
|
+
<Card>
|
|
19
|
+
<CardHeader>
|
|
20
|
+
<div data-fs-card-title>Profile</div>
|
|
21
|
+
</CardHeader>
|
|
22
|
+
<CardBody>
|
|
23
|
+
<hr data-fs-divider />
|
|
24
|
+
<div data-fs-profile-card-row>
|
|
25
|
+
<h1 data-fs-card-row-label>Name</h1>
|
|
26
|
+
<h1>{name}</h1>
|
|
27
|
+
</div>
|
|
28
|
+
<hr data-fs-divider />
|
|
29
|
+
<div data-fs-profile-card-row>
|
|
30
|
+
<h1 data-fs-card-row-label>Email</h1>
|
|
31
|
+
<h1 data-fs-email-text>{email}</h1>
|
|
32
|
+
</div>
|
|
33
|
+
<hr data-fs-divider />
|
|
34
|
+
<div data-fs-profile-card-row>
|
|
35
|
+
<h1 data-fs-card-row-label>ID</h1>
|
|
36
|
+
<h1>{id}</h1>
|
|
37
|
+
</div>
|
|
38
|
+
</CardBody>
|
|
39
|
+
<CardFooter>
|
|
40
|
+
<Link href="/" data-fs-card-footer-link>
|
|
41
|
+
<span>View Profile</span>
|
|
42
|
+
</Link>
|
|
43
|
+
<IconButton icon={<Icon name="CaretRight" data-fs-card-footer-icon />} aria-label="view-profile" />
|
|
44
|
+
</CardFooter>
|
|
45
|
+
</Card>
|
|
46
|
+
</section>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Icon, IconButton, Toggle, Dropdown,
|
|
3
|
+
DropdownItem,
|
|
4
|
+
DropdownMenu,
|
|
5
|
+
DropdownButton,
|
|
6
|
+
} from '@faststore/ui'
|
|
7
|
+
import Link from "next/link";
|
|
8
|
+
|
|
9
|
+
import { Card, CardBody, CardFooter, CardHeader } from '../Card'
|
|
10
|
+
import * as Icons from "../Icons";
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
export type UserInformation = {
|
|
14
|
+
userId: string
|
|
15
|
+
name: string
|
|
16
|
+
userType: string
|
|
17
|
+
isActive: boolean
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
type UsersCardProps = {
|
|
21
|
+
users: UserInformation[]
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
export default function UsersCard({ users }: UsersCardProps) {
|
|
26
|
+
return (
|
|
27
|
+
<section data-fs-home-card>
|
|
28
|
+
<Card>
|
|
29
|
+
<CardHeader>
|
|
30
|
+
<div data-fs-card-title>Users <span data-fs-card-title-counter>{users.length}</span></div>
|
|
31
|
+
<IconButton icon={<Icon name="PlusCircle" width={20} height={20} />}
|
|
32
|
+
aria-label={`$profile action`} onClick={() => { }} />
|
|
33
|
+
</CardHeader>
|
|
34
|
+
<CardBody>
|
|
35
|
+
{users.length && users.map((user: UserInformation) => {
|
|
36
|
+
return (
|
|
37
|
+
<div>
|
|
38
|
+
<hr data-fs-divider />
|
|
39
|
+
|
|
40
|
+
<div data-fs-card-row key={user.userId}>
|
|
41
|
+
<div data-fs-card-information-row>
|
|
42
|
+
<div data-fs-card-information-icon>
|
|
43
|
+
<Icons.Profile width={24} height={24} />
|
|
44
|
+
</div >
|
|
45
|
+
<div data-fs-card-information-title>
|
|
46
|
+
<h1>{user.name}</h1>
|
|
47
|
+
</div>
|
|
48
|
+
<h1 data-fs-card-row-label>{user.userType}</h1>
|
|
49
|
+
</div>
|
|
50
|
+
<div data-fs-card-action-row>
|
|
51
|
+
<Toggle id="userActive" defaultChecked={user.isActive} />
|
|
52
|
+
|
|
53
|
+
<Dropdown>
|
|
54
|
+
<DropdownButton>
|
|
55
|
+
<Icon name="DotsThree" data-fs-menu-action-button />
|
|
56
|
+
</DropdownButton>
|
|
57
|
+
<DropdownMenu align="right" data-fs-dropdown-menu>
|
|
58
|
+
<DropdownItem>
|
|
59
|
+
<Icon name="ArrowSquareOut" data-fs-dropdown-icon />Open
|
|
60
|
+
</DropdownItem>
|
|
61
|
+
<DropdownItem>
|
|
62
|
+
<Icons.Edit width={24} height={24} data-fs-dropdown-icon />Edit
|
|
63
|
+
</DropdownItem>
|
|
64
|
+
<DropdownItem>
|
|
65
|
+
<Icons.Delete width={24} height={24} data-fs-dropdown-icon /> Delete
|
|
66
|
+
</DropdownItem>
|
|
67
|
+
<DropdownItem>
|
|
68
|
+
<div data-fs-dropdown-active-item>
|
|
69
|
+
<div data-fs-dropdown-active-item-label>
|
|
70
|
+
<Icons.Active width={24} height={24} data-fs-dropdown-icon /> Active
|
|
71
|
+
</div>
|
|
72
|
+
<Toggle id="userActiveMenu" defaultChecked={user.isActive} data-fs-internal-toggle />
|
|
73
|
+
</div>
|
|
74
|
+
</DropdownItem>
|
|
75
|
+
</DropdownMenu>
|
|
76
|
+
</Dropdown>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
</div>
|
|
80
|
+
</div>)
|
|
81
|
+
})}
|
|
82
|
+
</CardBody>
|
|
83
|
+
<CardFooter>
|
|
84
|
+
<Link href="/" data-fs-card-footer-link>
|
|
85
|
+
<span>Manage users</span>
|
|
86
|
+
</Link>
|
|
87
|
+
<IconButton icon={<Icon name="CaretRight" data-fs-card-footer-icon />} aria-label="manage-users" />
|
|
88
|
+
</CardFooter>
|
|
89
|
+
</Card>
|
|
90
|
+
</section>
|
|
91
|
+
)
|
|
92
|
+
}
|
package/src/components/index.ts
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import ProfileCard from "./ProfileCard/ProfileCard";
|
|
2
|
+
import UsersCard from "./UsersCard/UsersCard";
|
|
3
|
+
import AddressesCard from './AddressesCard/AddressesCard'
|
|
4
|
+
import OrganizationalUnitsCard from "./OrganizationalUnitsCard/OrganizationalUnitsCard";
|
|
5
|
+
|
|
6
|
+
const sections = { ProfileCard, UsersCard, AddressesCard, OrganizationalUnitsCard };
|
|
2
7
|
|
|
3
8
|
export default sections;
|
package/src/mock/profile-data.ts
CHANGED
|
@@ -5,3 +5,55 @@ export const profileData = {
|
|
|
5
5
|
},
|
|
6
6
|
orgName: "Bytech Inc.",
|
|
7
7
|
};
|
|
8
|
+
|
|
9
|
+
export const organizationResponse = {
|
|
10
|
+
displayName: 'ByTech Inc.',
|
|
11
|
+
// Uncomment to test with a single contract
|
|
12
|
+
contracts: [{
|
|
13
|
+
name: 'ByTech',
|
|
14
|
+
email: 'bytech@demo.com',
|
|
15
|
+
id: '12-32-DDDD',
|
|
16
|
+
isActive: false,
|
|
17
|
+
}],
|
|
18
|
+
|
|
19
|
+
// Comment to test with single contract
|
|
20
|
+
// contracts: [{
|
|
21
|
+
// name: 'ByTech',
|
|
22
|
+
// email: 'bytech@demo.com',
|
|
23
|
+
// id: '12-32-DDDD',
|
|
24
|
+
// isActive: false,
|
|
25
|
+
// },
|
|
26
|
+
// {
|
|
27
|
+
// name: 'ByTech South',
|
|
28
|
+
// email: 'bytech@demo.com',
|
|
29
|
+
// id: '12-32-AAAA',
|
|
30
|
+
// isActive: true,
|
|
31
|
+
// }],
|
|
32
|
+
users: [{
|
|
33
|
+
name: 'Everton',
|
|
34
|
+
userType: 'Admin',
|
|
35
|
+
isActive: true,
|
|
36
|
+
userId: '1234'
|
|
37
|
+
}, {
|
|
38
|
+
name: 'Arthur',
|
|
39
|
+
userType: 'Buyer',
|
|
40
|
+
isActive: false,
|
|
41
|
+
userId: '32141'
|
|
42
|
+
}],
|
|
43
|
+
addresses: [{
|
|
44
|
+
addressId: '123-1421',
|
|
45
|
+
addressType: 'Shipping',
|
|
46
|
+
street: 'Rua Morretes',
|
|
47
|
+
isActive: true
|
|
48
|
+
}, {
|
|
49
|
+
addressId: '123-1321',
|
|
50
|
+
addressType: 'Billing',
|
|
51
|
+
street: 'Rua Maranhão',
|
|
52
|
+
isActive: false
|
|
53
|
+
}],
|
|
54
|
+
organizationalUnits: [{
|
|
55
|
+
organizationalUnitId: '123-CC-1122',
|
|
56
|
+
organizationalUnitName: 'Child Unit 1',
|
|
57
|
+
isActive: true
|
|
58
|
+
}]
|
|
59
|
+
}
|
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { Navbar } from "../components/Navbar/Navbar";
|
|
2
|
+
import AddressesCard from "../components/AddressesCard/AddressesCard";
|
|
3
|
+
import OrganizationalUnitsCard from "../components/OrganizationalUnitsCard/OrganizationalUnitsCard";
|
|
4
|
+
import ProfileCard from "../components/ProfileCard/ProfileCard";
|
|
5
|
+
import UsersCard from "../components/UsersCard/UsersCard";
|
|
6
|
+
import ContractsCard from "../components/ContractsCard/ContractsCard";
|
|
7
|
+
import { organizationResponse } from "../mock/profile-data";
|
|
2
8
|
|
|
3
9
|
export type PageLoader = { page: string };
|
|
4
10
|
|
|
@@ -7,5 +13,23 @@ export async function loader(): Promise<PageLoader> {
|
|
|
7
13
|
}
|
|
8
14
|
|
|
9
15
|
export default function MyAccount(data: PageLoader) {
|
|
10
|
-
return
|
|
16
|
+
return (
|
|
17
|
+
<section>
|
|
18
|
+
<Navbar />
|
|
19
|
+
<div data-fs-buyer-portal-home-grid>
|
|
20
|
+
<h1 data-fs-buyer-portal-title>{organizationResponse.displayName}</h1>
|
|
21
|
+
<div data-fs-buyer-portal-home-row>
|
|
22
|
+
{organizationResponse.contracts.length === 1 ? (<ProfileCard {...organizationResponse.contracts[0]} />) : (<ContractsCard contracts={organizationResponse.contracts} />)}
|
|
23
|
+
<UsersCard users={organizationResponse.users} />
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<div data-fs-buyer-portal-home-row>
|
|
27
|
+
{organizationResponse.contracts.length === 1 && (<AddressesCard addresses={organizationResponse.addresses} />)}
|
|
28
|
+
<OrganizationalUnitsCard organizationalUnits={organizationResponse.organizationalUnits} />
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
</section>
|
|
34
|
+
)
|
|
11
35
|
}
|
package/src/themes/index.scss
CHANGED
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
@import "@faststore/ui/src/components/atoms/Logo/styles.scss";
|
|
3
3
|
@import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
|
|
4
4
|
@import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
|
|
5
|
+
@import '@faststore/ui/src/components/molecules/Toggle/styles.scss';
|
|
5
6
|
@import "../components/CustomerSwitch/customer-switch.scss";
|
|
6
7
|
@import "../components/Navbar/navbar.scss";
|
|
7
8
|
@import "../components/SelfManagementDrawer/self-management-drawer.scss";
|
|
8
9
|
@import "../components/SelfManagementDrawer/self-management-drawer.scss";
|
|
9
10
|
@import "../components/ProfileSummary/profile-summary.scss";
|
|
11
|
+
@import "../components/Card/Card.scss";
|
|
10
12
|
|
|
11
13
|
// ----------------------------------------------------------
|
|
12
14
|
// GLOBAL TOKENS
|
|
@@ -43,5 +45,87 @@
|
|
|
43
45
|
// FS UI Components
|
|
44
46
|
// --------------------------------------------------------
|
|
45
47
|
// Add here the customizations for FastStore UI components.
|
|
48
|
+
|
|
49
|
+
[data-fs-dropdown-menu]{
|
|
50
|
+
z-index: 99999;
|
|
51
|
+
width: 12.5rem;
|
|
52
|
+
[data-fs-dropdown-item] {
|
|
53
|
+
--fs-dropdown-item-color: black !important;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
[data-fs-home-card]{
|
|
58
|
+
@import '@faststore/ui/src/components/atoms/Button/styles.scss';
|
|
59
|
+
width: 49%;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
[data-fs-buyer-portal-home-grid]{
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
gap: 2rem;
|
|
66
|
+
justify-content: space-between;
|
|
67
|
+
width: 90%;
|
|
68
|
+
margin-left: 5%;
|
|
69
|
+
margin-top: 2rem;
|
|
70
|
+
|
|
71
|
+
[data-fs-buyer-portal-home-row] {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: row;
|
|
74
|
+
width: 100%;
|
|
75
|
+
gap: 2rem;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
[data-fs-toggle] {
|
|
80
|
+
--fs-border-radius: 100px;
|
|
81
|
+
--fs-color-primary-bkg: white;
|
|
82
|
+
--fs-border-color-hover: white;
|
|
83
|
+
|
|
84
|
+
--fs-toggle-border-color-hover: #27BB36;
|
|
85
|
+
--fs-toggle-knob-checked-bkg-color:white;
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
--fs-border-radius-small: 100px;
|
|
89
|
+
--fs-color-primary-bkg-active: #27BB36;
|
|
90
|
+
--fs-color-primary-bkg-hover: #27BB36;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
[data-fs-toggle] input:not(:checked){
|
|
94
|
+
background-color: #C2C2C2 !important;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
[data-fs-internal-toggle] {
|
|
98
|
+
align-self: flex-end;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
[data-fs-menu-action-button] {
|
|
102
|
+
rotate: 90deg;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-fs-buyer-portal-title] {
|
|
106
|
+
font-size: large;
|
|
107
|
+
font-weight: 600;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
[data-fs-dropdown-active-item] {
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
width: 100%;
|
|
114
|
+
justify-content: space-between;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
[data-fs-dropdown-active-item-label]{
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
[data-fs-dropdown-item] {
|
|
123
|
+
border: none !important;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
[data-fs-dropdown-icon] {
|
|
127
|
+
margin-right: 0.5rem;
|
|
128
|
+
margin-left: 0.5rem;
|
|
129
|
+
}
|
|
46
130
|
}
|
|
47
131
|
}
|