@vtex/faststore-plugin-buyer-portal 1.0.1 → 1.0.2
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/components/CustomerSwitch/CustomerSwitchDrawer.tsx +119 -0
- package/src/components/CustomerSwitch/CustomerSwitchLoad.tsx +45 -0
- package/src/components/CustomerSwitch/CustomerSwitchOption.tsx +32 -0
- package/src/components/CustomerSwitch/CustomerSwitchOptionsList.tsx +34 -0
- package/src/components/CustomerSwitch/CustomerSwitchSearch.tsx +44 -0
- package/src/components/CustomerSwitch/customer-switch.scss +130 -0
- package/src/components/SelfManagementDrawer/SelfManagementDrawer.tsx +56 -0
- package/src/components/SelfManagementDrawer/SelfManagementDrawerBody.tsx +23 -0
- package/src/components/SelfManagementDrawer/SelfManagementDrawerFooter.tsx +44 -0
- package/src/components/SelfManagementDrawer/SelfManagementDrawerHeader.tsx +60 -0
- package/src/components/SelfManagementDrawer/index.ts +4 -0
- package/src/components/SelfManagementSignInButton/SelfManagementSignInButton.tsx +45 -0
- package/src/components/SelfManagementSignInButton/index.ts +1 -0
- package/src/components/overrides/Navbar.tsx +16 -0
- package/src/global.d.ts +1 -0
- package/src/themes/index.scss +179 -1
- package/src/utils/logout.tsx +5 -0
- package/src/utils/orders.tsx +3 -0
package/package.json
CHANGED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { SlideOver, useFadeEffect } from "@faststore/ui";
|
|
2
|
+
import { Button, SlideOverHeader } from "@faststore/ui";
|
|
3
|
+
import { CustomerSwitchSearch } from "./CustomerSwitchSearch";
|
|
4
|
+
import { CustomerSwitchOptionsList } from "./CustomerSwitchOptionsList";
|
|
5
|
+
import { useMemo, useState } from "react";
|
|
6
|
+
import { CustomerSwitchOptionData } from "./CustomerSwitchOption";
|
|
7
|
+
import { CustomerSwitchLoad } from "./CustomerSwitchLoad";
|
|
8
|
+
|
|
9
|
+
type CustomerSwitchDrawerProps = {
|
|
10
|
+
isOpen: boolean;
|
|
11
|
+
onCloseDrawer?: () => void;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
// TODO: Remove mock
|
|
15
|
+
const options = [
|
|
16
|
+
"Finance Solutions",
|
|
17
|
+
"Stellar Innovations",
|
|
18
|
+
"Blue Horizon Corp",
|
|
19
|
+
"Prime Finance Group",
|
|
20
|
+
"Stellar Ventures",
|
|
21
|
+
"Evergreen Holdings",
|
|
22
|
+
"Finance Pro Consulting",
|
|
23
|
+
"Stellar Strategies",
|
|
24
|
+
"Pioneer Technologies",
|
|
25
|
+
"Global Finance Advisors",
|
|
26
|
+
"TechWave Solutions",
|
|
27
|
+
"Stellar Capital Partners",
|
|
28
|
+
"FinanceEdge Analytics",
|
|
29
|
+
"Quantum Dynamics",
|
|
30
|
+
"Stellar Growth Advisors",
|
|
31
|
+
"BrightFuture Enterprises",
|
|
32
|
+
"FinanceLink Solutions",
|
|
33
|
+
"Stellar Insights",
|
|
34
|
+
"Vanguard Finance Group",
|
|
35
|
+
"FinanceBridge Consulting",
|
|
36
|
+
"Stellar Visionary Labs",
|
|
37
|
+
"NextGen Finance",
|
|
38
|
+
"OceanView Investments",
|
|
39
|
+
"Stellar Nexus",
|
|
40
|
+
"Crestpoint Finance Partners ksldkadlsdkapkldjfdlkfjhdlskjfhdsklajfhdslkfjh",
|
|
41
|
+
"Finance Elevate",
|
|
42
|
+
"Lighthouse Consulting Group",
|
|
43
|
+
"Stellar Synergy",
|
|
44
|
+
"FinanceCore Solutions",
|
|
45
|
+
"Nova Finance Advisors"
|
|
46
|
+
].map(
|
|
47
|
+
(name, index) => ({ name, id: `id-${index}` })
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
export const CustomerSwitchDrawer = ({
|
|
51
|
+
isOpen,
|
|
52
|
+
onCloseDrawer,
|
|
53
|
+
}: CustomerSwitchDrawerProps) => {
|
|
54
|
+
const { fade, fadeOut } = useFadeEffect();
|
|
55
|
+
|
|
56
|
+
const [option, setOption] = useState<CustomerSwitchOptionData>(options[0]);
|
|
57
|
+
const [loading, setLoading] = useState(false)
|
|
58
|
+
const [searchTerm, setSearchTerm] = useState("")
|
|
59
|
+
|
|
60
|
+
const filteredOptions = useMemo(() => {
|
|
61
|
+
if (!searchTerm) {
|
|
62
|
+
return options;
|
|
63
|
+
}
|
|
64
|
+
return options.filter(currentOption =>
|
|
65
|
+
currentOption.name?.toLowerCase().includes(searchTerm.toLowerCase())
|
|
66
|
+
);
|
|
67
|
+
}, [options, searchTerm]);
|
|
68
|
+
|
|
69
|
+
const handleSubmitCustomer = () => {
|
|
70
|
+
console.log(option);
|
|
71
|
+
setLoading(true)
|
|
72
|
+
setTimeout(() => {
|
|
73
|
+
setLoading(false)
|
|
74
|
+
onCloseDrawer?.()
|
|
75
|
+
}, 3000);
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<SlideOver
|
|
80
|
+
data-fs-customer-switch-drawer
|
|
81
|
+
fade={fade}
|
|
82
|
+
onDismiss={fadeOut}
|
|
83
|
+
onTransitionEnd={() => fade === "out" && onCloseDrawer?.()}
|
|
84
|
+
isOpen={isOpen}
|
|
85
|
+
size="partial"
|
|
86
|
+
direction="rightSide"
|
|
87
|
+
>
|
|
88
|
+
<SlideOverHeader
|
|
89
|
+
data-fs-customer-switch-drawer-header
|
|
90
|
+
onClose={() => onCloseDrawer?.()}
|
|
91
|
+
>
|
|
92
|
+
<h1 data-fs-customer-switch-drawer-title>Switch customer ID</h1>
|
|
93
|
+
</SlideOverHeader>
|
|
94
|
+
|
|
95
|
+
<section data-fs-customer-switch-drawer-body>
|
|
96
|
+
<CustomerSwitchSearch onSearch={setSearchTerm} />
|
|
97
|
+
<CustomerSwitchOptionsList
|
|
98
|
+
currentCustomer={options[0]}
|
|
99
|
+
options={filteredOptions}
|
|
100
|
+
onChange={setOption}
|
|
101
|
+
/>
|
|
102
|
+
</section>
|
|
103
|
+
|
|
104
|
+
<footer data-fs-customer-switch-drawer-footer>
|
|
105
|
+
<Button
|
|
106
|
+
data-fs-customer-switch-drawer-button
|
|
107
|
+
onClick={handleSubmitCustomer}
|
|
108
|
+
disabled={option.id === options[0].id || loading}
|
|
109
|
+
>
|
|
110
|
+
{
|
|
111
|
+
loading ?
|
|
112
|
+
<CustomerSwitchLoad /> :
|
|
113
|
+
"Confirm"
|
|
114
|
+
}
|
|
115
|
+
</Button>
|
|
116
|
+
</footer>
|
|
117
|
+
</SlideOver>
|
|
118
|
+
);
|
|
119
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
export const CustomerSwitchLoad = () => (
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="16px"
|
|
5
|
+
height="16px"
|
|
6
|
+
viewBox="0 0 24 24"
|
|
7
|
+
>
|
|
8
|
+
<g stroke="currentColor">
|
|
9
|
+
<circle
|
|
10
|
+
cx="12"
|
|
11
|
+
cy="12"
|
|
12
|
+
r="9.5"
|
|
13
|
+
fill="none"
|
|
14
|
+
stroke-linecap="round"
|
|
15
|
+
stroke-width="3"
|
|
16
|
+
>
|
|
17
|
+
<animate
|
|
18
|
+
attributeName="stroke-dasharray"
|
|
19
|
+
calcMode="spline"
|
|
20
|
+
dur="1.5s"
|
|
21
|
+
keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
|
|
22
|
+
keyTimes="0;0.475;0.95;1"
|
|
23
|
+
repeatCount="indefinite"
|
|
24
|
+
values="0 150;42 150;42 150;42 150"
|
|
25
|
+
/>
|
|
26
|
+
<animate
|
|
27
|
+
attributeName="stroke-dashoffset"
|
|
28
|
+
calcMode="spline"
|
|
29
|
+
dur="1.5s"
|
|
30
|
+
keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
|
|
31
|
+
keyTimes="0;0.475;0.95;1"
|
|
32
|
+
repeatCount="indefinite"
|
|
33
|
+
values="0;-16;-59;-59"
|
|
34
|
+
/>
|
|
35
|
+
</circle>
|
|
36
|
+
<animateTransform
|
|
37
|
+
attributeName="transform"
|
|
38
|
+
dur="2s"
|
|
39
|
+
repeatCount="indefinite"
|
|
40
|
+
type="rotate"
|
|
41
|
+
values="0 12 12;360 12 12"
|
|
42
|
+
/>
|
|
43
|
+
</g>
|
|
44
|
+
</svg>
|
|
45
|
+
);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export type CustomerSwitchOptionData = { name: string; id: string };
|
|
2
|
+
|
|
3
|
+
export type CustomerSwitchOptionProps = CustomerSwitchOptionData & {
|
|
4
|
+
onChange?: (option: CustomerSwitchOptionProps) => void;
|
|
5
|
+
defaultChecked?: boolean;
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export const CustomerSwitchOption = ({
|
|
9
|
+
name,
|
|
10
|
+
id,
|
|
11
|
+
onChange,
|
|
12
|
+
...otherProps
|
|
13
|
+
}: CustomerSwitchOptionProps) => (
|
|
14
|
+
<>
|
|
15
|
+
<input
|
|
16
|
+
data-fs-customer-switch-option-input
|
|
17
|
+
type="radio"
|
|
18
|
+
id={id}
|
|
19
|
+
name="CustomerSwitchOption"
|
|
20
|
+
value={id}
|
|
21
|
+
onChange={() => onChange?.({ name, id })}
|
|
22
|
+
{...otherProps}
|
|
23
|
+
/>
|
|
24
|
+
<label
|
|
25
|
+
data-fs-customer-switch-option
|
|
26
|
+
htmlFor={id}
|
|
27
|
+
>
|
|
28
|
+
<div data-fs-customer-switch-option-profile> {name[0]} </div>
|
|
29
|
+
<span data-fs-customer-switch-option-name> {name} </span>
|
|
30
|
+
</label>
|
|
31
|
+
</>
|
|
32
|
+
);
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { CustomerSwitchOption, CustomerSwitchOptionProps } from "./CustomerSwitchOption";
|
|
2
|
+
|
|
3
|
+
export type CustomerSwitchOptionsListProps = {
|
|
4
|
+
options: Array<CustomerSwitchOptionProps>;
|
|
5
|
+
currentCustomer: CustomerSwitchOptionProps;
|
|
6
|
+
onChange?: (option: CustomerSwitchOptionProps) => void;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export const CustomerSwitchOptionsList = ({
|
|
10
|
+
options,
|
|
11
|
+
currentCustomer,
|
|
12
|
+
onChange,
|
|
13
|
+
}: CustomerSwitchOptionsListProps) => {
|
|
14
|
+
return (
|
|
15
|
+
<div data-fs-customer-options-list>
|
|
16
|
+
<CustomerSwitchOption
|
|
17
|
+
defaultChecked
|
|
18
|
+
name={currentCustomer.name}
|
|
19
|
+
id={currentCustomer.id}
|
|
20
|
+
onChange={onChange}
|
|
21
|
+
/>
|
|
22
|
+
{options
|
|
23
|
+
.filter((customerOption) => customerOption.id !== currentCustomer.id)
|
|
24
|
+
.map((customerOption) => (
|
|
25
|
+
<CustomerSwitchOption
|
|
26
|
+
name={customerOption.name}
|
|
27
|
+
id={customerOption.id}
|
|
28
|
+
key={customerOption.id}
|
|
29
|
+
onChange={onChange}
|
|
30
|
+
/>
|
|
31
|
+
))}
|
|
32
|
+
</div>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useRef,
|
|
3
|
+
type FormEvent,
|
|
4
|
+
} from "react";
|
|
5
|
+
|
|
6
|
+
import { Input, IconButton, Icon } from "@faststore/ui";
|
|
7
|
+
|
|
8
|
+
export type CustomerSwitchSearchProps = {
|
|
9
|
+
onSearch?: (term: string) => void
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const CustomerSwitchSearch = ({
|
|
13
|
+
onSearch
|
|
14
|
+
}: CustomerSwitchSearchProps) => {
|
|
15
|
+
|
|
16
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
|
17
|
+
|
|
18
|
+
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
const inputValue = inputRef.current?.value;
|
|
21
|
+
onSearch?.(inputValue || "");
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<form
|
|
26
|
+
data-fs-customer-switch-search
|
|
27
|
+
onSubmit={handleSubmit}
|
|
28
|
+
role="search"
|
|
29
|
+
>
|
|
30
|
+
<IconButton
|
|
31
|
+
data-fs-customer-switch-search-button
|
|
32
|
+
type="submit"
|
|
33
|
+
aria-label="Submit Search"
|
|
34
|
+
icon={<Icon name="MagnifyingGlass" />}
|
|
35
|
+
size="small"
|
|
36
|
+
/>
|
|
37
|
+
<Input
|
|
38
|
+
data-fs-customer-switch-search-input
|
|
39
|
+
placeholder="Search"
|
|
40
|
+
ref={inputRef}
|
|
41
|
+
/>
|
|
42
|
+
</form>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
[data-fs-customer-switch-drawer] {
|
|
2
|
+
// --------------------------------------------------------
|
|
3
|
+
// Colors (Branding Core)
|
|
4
|
+
// --------------------------------------------------------
|
|
5
|
+
--fs-color-tertiary-bkg : #CBE9FF;
|
|
6
|
+
--fs-border-color-light : #EBEBEB;
|
|
7
|
+
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
|
|
11
|
+
[data-fs-customer-switch-drawer-header] {
|
|
12
|
+
align-items: flex-start;
|
|
13
|
+
padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
|
|
14
|
+
|
|
15
|
+
[data-fs-customer-switch-drawer-title] {
|
|
16
|
+
font-size: var(--fs-text-size-title-section);
|
|
17
|
+
font-weight: var(--fs-text-weight-semibold);
|
|
18
|
+
margin-top: var(--fs-spacing-6);
|
|
19
|
+
padding-left: var(--fs-spacing-6);
|
|
20
|
+
text-transform: capitalize;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-fs-customer-switch-drawer-body] {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
padding: 0 calc(var(--fs-spacing-2) + var(--fs-spacing-7));
|
|
29
|
+
flex: 1;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
|
|
32
|
+
[data-fs-customer-switch-search] {
|
|
33
|
+
width: 100%;
|
|
34
|
+
border: var(--fs-border-width) solid var(--fs-border-color-light);
|
|
35
|
+
border-radius: var(--fs-border-radius-pill);
|
|
36
|
+
padding: var(--fs-spacing-1) var(--fs-spacing-2);
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
|
|
40
|
+
[data-fs-customer-switch-search-button] {
|
|
41
|
+
margin-right: var(--fs-spacing-1);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-fs-customer-switch-search-input]{
|
|
45
|
+
width: 100%;
|
|
46
|
+
border: 0;
|
|
47
|
+
outline: 0;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[data-fs-customer-options-list] {
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
flex: 1;
|
|
55
|
+
overflow: scroll;
|
|
56
|
+
margin-top: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
|
|
57
|
+
|
|
58
|
+
[data-fs-customer-switch-option-input] {
|
|
59
|
+
display: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
[data-fs-customer-switch-option] {
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
margin-top: var(--fs-spacing-1);
|
|
66
|
+
border: var(--fs-border-width) solid var(--fs-border-color-light);
|
|
67
|
+
padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
|
|
68
|
+
border-radius: var(--fs-border-radius-medium);
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
|
|
71
|
+
[data-fs-customer-switch-option-profile] {
|
|
72
|
+
min-width: var(--fs-spacing-4);
|
|
73
|
+
aspect-ratio: 1;
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
border-radius: var(--fs-border-radius-circle);
|
|
78
|
+
background-color: var(--fs-color-tertiary-bkg);
|
|
79
|
+
font-size: var(--fs-text-size-tiny);
|
|
80
|
+
font-weight: var(--fs-text-weight-semibold);
|
|
81
|
+
margin-right: var(--fs-spacing-2);
|
|
82
|
+
text-transform: capitalize;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
[data-fs-customer-switch-option-name] {
|
|
86
|
+
font-size: var(--fs-text-size-legend);
|
|
87
|
+
font-weight: var(--fs-text-weight-medium);
|
|
88
|
+
width: 100%;
|
|
89
|
+
overflow: hidden;
|
|
90
|
+
white-space: nowrap;
|
|
91
|
+
text-overflow: ellipsis;
|
|
92
|
+
text-transform: capitalize;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
[data-fs-customer-switch-option-input]:checked + [data-fs-customer-switch-option] {
|
|
97
|
+
border-color: var(--fs-color-primary-bkg);
|
|
98
|
+
background-color: var(--fs-color-primary-bkg-light-active);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
[data-fs-customer-switch-option]:first-of-type {
|
|
102
|
+
margin-top: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-fs-customer-switch-option]:last-of-type {
|
|
106
|
+
margin-bottom: var(--fs-spacing-1);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
[data-fs-customer-switch-drawer-footer] {
|
|
112
|
+
padding: var(--fs-spacing-4) calc(var(--fs-spacing-2) + var(--fs-spacing-7));
|
|
113
|
+
border-top: var(--fs-border-width) solid var(--fs-border-color-light);
|
|
114
|
+
|
|
115
|
+
[data-fs-customer-switch-drawer-button] {
|
|
116
|
+
width: 100%;
|
|
117
|
+
padding: var(--fs-spacing-3) var(--fs-spacing-5);
|
|
118
|
+
background-color: var(--fs-color-primary-bkg);
|
|
119
|
+
color: var(--fs-color-text-inverse);
|
|
120
|
+
border-radius: var(--fs-border-radius-pill);
|
|
121
|
+
font-size: var(--fs-text-size-1);
|
|
122
|
+
font-weight: var(--fs-text-weight-semibold);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
[data-fs-customer-switch-drawer-button]:disabled {
|
|
126
|
+
background-color: var(--fs-color-disabled-bkg);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { SlideOver, useFadeEffect } from "@faststore/ui";
|
|
2
|
+
|
|
3
|
+
import { SelfManagementDrawerHeader } from "./SelfManagementDrawerHeader";
|
|
4
|
+
import { SelfManagementDrawerFooter } from "./SelfManagementDrawerFooter";
|
|
5
|
+
import { SelfManagementDrawerBody } from "./SelfManagementDrawerBody";
|
|
6
|
+
import { doLogout } from "../../utils/logout";
|
|
7
|
+
import { useState } from "react";
|
|
8
|
+
import { CustomerSwitchDrawer } from "../CustomerSwitch/CustomerSwitchDrawer";
|
|
9
|
+
|
|
10
|
+
type SelfManagementDrawerProps = {
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
closeDrawer: () => void;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const SelfManagementDrawer = ({
|
|
16
|
+
isOpen,
|
|
17
|
+
closeDrawer,
|
|
18
|
+
}: SelfManagementDrawerProps) => {
|
|
19
|
+
const { fade, fadeOut } = useFadeEffect();
|
|
20
|
+
const [openCustomerDrawer, setOpenCustomerDrawer] = useState(false);
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<>
|
|
24
|
+
<SlideOver
|
|
25
|
+
data-fs-self-management-drawer
|
|
26
|
+
fade={fade}
|
|
27
|
+
onDismiss={fadeOut}
|
|
28
|
+
onTransitionEnd={() => fade === "out" && closeDrawer()}
|
|
29
|
+
isOpen={isOpen}
|
|
30
|
+
size="partial"
|
|
31
|
+
direction="rightSide"
|
|
32
|
+
>
|
|
33
|
+
<SelfManagementDrawerHeader
|
|
34
|
+
onCloseDrawer={closeDrawer}
|
|
35
|
+
onSwitchButtonClick={() => setOpenCustomerDrawer(true)}
|
|
36
|
+
orgName="Stellar Inc."
|
|
37
|
+
orgUrl="/self-management"
|
|
38
|
+
/>
|
|
39
|
+
<SelfManagementDrawerBody />
|
|
40
|
+
<SelfManagementDrawerFooter
|
|
41
|
+
person={{
|
|
42
|
+
name: "Donald Green",
|
|
43
|
+
role: "Admin",
|
|
44
|
+
}}
|
|
45
|
+
onLogoutClick={doLogout}
|
|
46
|
+
/>
|
|
47
|
+
</SlideOver>
|
|
48
|
+
{openCustomerDrawer && (
|
|
49
|
+
<CustomerSwitchDrawer
|
|
50
|
+
isOpen={openCustomerDrawer}
|
|
51
|
+
onCloseDrawer={() => setOpenCustomerDrawer(false)}
|
|
52
|
+
/>
|
|
53
|
+
)}
|
|
54
|
+
</>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Link } from '@faststore/ui'
|
|
2
|
+
|
|
3
|
+
import { goToOrders } from '../../utils/orders'
|
|
4
|
+
|
|
5
|
+
export const SelfManagementDrawerBody = (storeConfig: any) => {
|
|
6
|
+
|
|
7
|
+
const onClickOrders = (event: any) => {
|
|
8
|
+
event.preventDefault()
|
|
9
|
+
|
|
10
|
+
goToOrders(storeConfig)
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<div data-fs-self-management-drawer-body>
|
|
16
|
+
<div data-fs-self-mamnagement-drawer-body-contents>
|
|
17
|
+
<Link data-fs-self-management-drawer-body-link onClick={onClickOrders} href={'account/orders'}>Orders</Link>
|
|
18
|
+
<Link data-fs-self-management-drawer-body-link href={'account'}>Preferences</Link>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</>
|
|
22
|
+
)
|
|
23
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { Button, Icon } from "@faststore/ui";
|
|
3
|
+
|
|
4
|
+
export type SelfManagementDrawerFooterProps = {
|
|
5
|
+
onLogoutClick?: (storeConfig: any) => void;
|
|
6
|
+
person: {
|
|
7
|
+
image?: ReactNode;
|
|
8
|
+
name: string;
|
|
9
|
+
role?: string;
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export const SelfManagementDrawerFooter = ({
|
|
14
|
+
onLogoutClick,
|
|
15
|
+
person: {
|
|
16
|
+
image,
|
|
17
|
+
name,
|
|
18
|
+
role,
|
|
19
|
+
}
|
|
20
|
+
}: SelfManagementDrawerFooterProps) => {
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<footer data-fs-self-management-drawer-footer>
|
|
24
|
+
<div data-fs-self-management-drawer-footer-person-image>
|
|
25
|
+
{image ?? <Icon name="Bell" width={20} height={20} />}
|
|
26
|
+
</div>
|
|
27
|
+
<div data-fs-self-management-drawer-footer-person-data>
|
|
28
|
+
<h2>{name}</h2>
|
|
29
|
+
{role && <h3>{role}</h3>}
|
|
30
|
+
</div>
|
|
31
|
+
<Button
|
|
32
|
+
data-fs-self-management-drawer-footer-logout-button
|
|
33
|
+
data-fs-self-management-drawer-footer-logout-button-color="danger"
|
|
34
|
+
icon={<Icon name="Bell" weight="bold" />}
|
|
35
|
+
iconPosition="left"
|
|
36
|
+
onClick={onLogoutClick}
|
|
37
|
+
variant="secondary"
|
|
38
|
+
size="small"
|
|
39
|
+
>
|
|
40
|
+
Logout
|
|
41
|
+
</Button>
|
|
42
|
+
</footer>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import {
|
|
3
|
+
Button, IconButton, SlideOverHeader, Link, Icon
|
|
4
|
+
} from "@faststore/ui";
|
|
5
|
+
|
|
6
|
+
export type SelfManagementDrawerHeaderProps = {
|
|
7
|
+
onCloseDrawer?: () => void;
|
|
8
|
+
onSwitchButtonClick?: () => void;
|
|
9
|
+
onConfigButtonClick?: () => void;
|
|
10
|
+
orgImage?: ReactNode;
|
|
11
|
+
orgName: string;
|
|
12
|
+
orgUrl: string;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const SelfManagementDrawerHeader = ({
|
|
16
|
+
orgUrl,
|
|
17
|
+
orgName,
|
|
18
|
+
orgImage,
|
|
19
|
+
onCloseDrawer,
|
|
20
|
+
onSwitchButtonClick,
|
|
21
|
+
onConfigButtonClick,
|
|
22
|
+
}: SelfManagementDrawerHeaderProps) => {
|
|
23
|
+
return (
|
|
24
|
+
<>
|
|
25
|
+
<SlideOverHeader onClose={() => onCloseDrawer?.()} children={null}/>
|
|
26
|
+
<div data-fs-self-management-drawer-header>
|
|
27
|
+
<Link data-fs-self-management-drawer-header-org-link href={orgUrl}>
|
|
28
|
+
<div data-fs-self-management-drawer-header-org-image>
|
|
29
|
+
{orgImage ?? <Icon name="Bell" width={24} height={24} />}
|
|
30
|
+
</div>
|
|
31
|
+
<h1 data-fs-self-management-drawer-header-org-name>
|
|
32
|
+
{orgName}
|
|
33
|
+
</h1>
|
|
34
|
+
</Link>
|
|
35
|
+
|
|
36
|
+
<div data-fs-self-management-drawer-header-buttons-wrapper>
|
|
37
|
+
<Button
|
|
38
|
+
data-fs-self-management-drawer-header-switch-button
|
|
39
|
+
icon={<Icon name="Bell" />}
|
|
40
|
+
iconPosition="left"
|
|
41
|
+
onClick={() => onSwitchButtonClick?.()}
|
|
42
|
+
variant="secondary"
|
|
43
|
+
size="small"
|
|
44
|
+
>
|
|
45
|
+
Switch
|
|
46
|
+
</Button>
|
|
47
|
+
|
|
48
|
+
<IconButton
|
|
49
|
+
data-fs-self-management-drawer-header-config-button
|
|
50
|
+
icon={<Icon name="FadersHorizontal" />}
|
|
51
|
+
aria-label="Buy"
|
|
52
|
+
onClick={() => onConfigButtonClick?.()}
|
|
53
|
+
variant="secondary"
|
|
54
|
+
size="small"
|
|
55
|
+
/>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { SelfManagementDrawer } from "./SelfManagementDrawer";
|
|
2
|
+
export { SelfManagementDrawerHeader } from "./SelfManagementDrawerHeader";
|
|
3
|
+
export { SelfManagementDrawerBody } from "./SelfManagementDrawerBody";
|
|
4
|
+
export { SelfManagementDrawerFooter } from "./SelfManagementDrawerFooter";
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { LinkButton, Icon } from "@faststore/ui";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { SelfManagementDrawer } from "../SelfManagementDrawer/SelfManagementDrawer";
|
|
4
|
+
|
|
5
|
+
export const SelfManagementSignInButton = ({
|
|
6
|
+
useSession,
|
|
7
|
+
}: {
|
|
8
|
+
useSession: any;
|
|
9
|
+
}) => {
|
|
10
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
11
|
+
|
|
12
|
+
const { ...session } = useSession();
|
|
13
|
+
|
|
14
|
+
const openDrawer = (event: any) => {
|
|
15
|
+
if (session.person) {
|
|
16
|
+
event.preventDefault();
|
|
17
|
+
|
|
18
|
+
setIsOpen(true);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const closeDrawer = () => {
|
|
23
|
+
setIsOpen(false);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<>
|
|
28
|
+
<LinkButton
|
|
29
|
+
data-fs-button-signin-link
|
|
30
|
+
href={session.person?.id ? `/account` : `/login`}
|
|
31
|
+
className="text__title-mini"
|
|
32
|
+
variant="tertiary"
|
|
33
|
+
icon={<Icon name={"User"} width={18} height={18} weight="bold" />}
|
|
34
|
+
iconPosition="left"
|
|
35
|
+
onClick={(event) => openDrawer(event)}
|
|
36
|
+
>
|
|
37
|
+
{session.person?.id ? "Company" : "Sign In"}
|
|
38
|
+
</LinkButton>
|
|
39
|
+
|
|
40
|
+
{isOpen && (
|
|
41
|
+
<SelfManagementDrawer isOpen={isOpen} closeDrawer={closeDrawer} />
|
|
42
|
+
)}
|
|
43
|
+
</>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SelfManagementSignInButton } from './SelfManagementSignInButton'
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SectionOverride } from "@faststore/core";
|
|
2
|
+
import { useSession_unstable as useSession } from "@faststore/core/experimental";
|
|
3
|
+
import { SelfManagementSignInButton } from "../SelfManagementSignInButton";
|
|
4
|
+
|
|
5
|
+
const SECTION: SectionOverride["section"] = "Navbar";
|
|
6
|
+
|
|
7
|
+
const override: SectionOverride = {
|
|
8
|
+
section: SECTION,
|
|
9
|
+
components: {
|
|
10
|
+
_experimentalButtonSignIn: {
|
|
11
|
+
Component: () => <SelfManagementSignInButton useSession={useSession} />,
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export { override };
|
package/src/global.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare module "*.module.scss";
|
package/src/themes/index.scss
CHANGED
|
@@ -1,3 +1,181 @@
|
|
|
1
|
+
@import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
|
|
2
|
+
@import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
|
|
3
|
+
@import "../components/CustomerSwitch/customer-switch.scss";
|
|
4
|
+
|
|
5
|
+
[data-fs-self-management-section] {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
align-items: center;
|
|
10
|
+
width: 100%;
|
|
11
|
+
|
|
12
|
+
[data-fs-self-management-title] {
|
|
13
|
+
text-align: center;
|
|
14
|
+
font-size: x-large;
|
|
15
|
+
font-weight: bold;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-fs-self-management-title], [data-fs-self-management-code] {
|
|
19
|
+
margin-bottom: 32px;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
[data-fs-self-management-nav] {
|
|
25
|
+
padding: 8px;
|
|
26
|
+
background-color: var(--fs-border-color-light);
|
|
27
|
+
margin-bottom: 16px;
|
|
28
|
+
|
|
29
|
+
a {
|
|
30
|
+
margin-left: 8px;
|
|
31
|
+
text-decoration: none;
|
|
32
|
+
color: var(--fs-color-tertiary-text);
|
|
33
|
+
font-weight: bold;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
[data-fs-self-management-drawer] {
|
|
38
|
+
@import "@faststore/ui/src/components/atoms/Button/styles.scss";
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
// Header
|
|
44
|
+
[data-fs-self-management-drawer-header] {
|
|
45
|
+
padding: 0 var(--fs-spacing-8) var(--fs-spacing-5);
|
|
46
|
+
display: flex;
|
|
47
|
+
width: 100%;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
align-items: flex-end;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
[data-fs-self-management-drawer-header-org-link] {
|
|
53
|
+
text-decoration: none;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[data-fs-self-management-drawer-header-org-name] {
|
|
57
|
+
font-weight: var(--fs-text-weight-bold);
|
|
58
|
+
font-size: var(--fs-text-size-3);
|
|
59
|
+
color: var(--fs-color-text);
|
|
60
|
+
text-transform: capitalize;
|
|
61
|
+
text-decoration: none;
|
|
62
|
+
padding: var(--fs-spacing-1) 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-fs-self-management-drawer-header-org-name]:hover {
|
|
66
|
+
text-decoration: underline;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
[data-fs-self-management-drawer-header-org-image] {
|
|
70
|
+
width: var(--fs-spacing-9);
|
|
71
|
+
height: var(--fs-spacing-9);
|
|
72
|
+
border-radius: var(--fs-border-radius-pill);
|
|
73
|
+
background-color: var(--fs-color-light);
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
margin-bottom: var(--fs-spacing-1);
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
color: var(--fs-border-color-active);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
[data-fs-self-management-drawer-header-buttons-wrapper] {
|
|
83
|
+
display: flex;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
[data-fs-self-management-drawer-header-config-button] {
|
|
87
|
+
margin-right: calc(-1 * var(--fs-spacing-1));
|
|
88
|
+
border-radius: var(--fs-border-radius-full);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
[data-fs-self-management-drawer-header-switch-button] {
|
|
92
|
+
[data-fs-button-wrapper] {
|
|
93
|
+
border-radius: var(--fs-border-radius-pill);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Body
|
|
98
|
+
[data-fs-self-management-drawer-body] {
|
|
99
|
+
flex: 1;
|
|
100
|
+
border-top: var(--fs-border-radius-small) var(--fs-color-neutral-3);
|
|
101
|
+
border-top-style: solid;
|
|
102
|
+
border-bottom: var(--fs-border-radius-small) var(--fs-color-neutral-3);
|
|
103
|
+
border-bottom-style: solid;
|
|
104
|
+
|
|
105
|
+
[data-fs-self-mamnagement-drawer-body-contents] {
|
|
106
|
+
padding: var(--fs-spacing-5) var(--fs-spacing-8) var(--fs-spacing-5);
|
|
107
|
+
display: grid;
|
|
108
|
+
row-gap: var(--fs-spacing-4);
|
|
109
|
+
width: 100%;
|
|
110
|
+
|
|
111
|
+
[data-fs-self-management-drawer-body-link] {
|
|
112
|
+
color: var(--fs-color-neutral-7);
|
|
113
|
+
text-decoration: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
[data-fs-self-management-drawer-body-link]:hover {
|
|
117
|
+
text-decoration: underline;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
// Footer
|
|
125
|
+
[data-fs-self-management-drawer-footer] {
|
|
126
|
+
padding: var(--fs-spacing-4) var(--fs-spacing-8);
|
|
127
|
+
display: flex;
|
|
128
|
+
justify-content: space-between;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
[data-fs-self-management-drawer-footer-person-image] {
|
|
132
|
+
width: var(--fs-spacing-6);
|
|
133
|
+
height: var(--fs-spacing-6);
|
|
134
|
+
border-radius: var(--fs-border-radius-pill);
|
|
135
|
+
background-color: var(--fs-color-light);
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
justify-content: center;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
color: var(--fs-border-color-active);
|
|
141
|
+
margin-right: var(--fs-spacing-3);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
[data-fs-self-management-drawer-footer-person-data] {
|
|
145
|
+
flex: 1;
|
|
146
|
+
font-size: var(--fs-text-size-legend);
|
|
147
|
+
|
|
148
|
+
h2 {
|
|
149
|
+
color: var(--fs-color-text);
|
|
150
|
+
font-weight: var(--fs-text-weight-regular);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
h3 {
|
|
154
|
+
color: var(--fs-color-text-light);
|
|
155
|
+
font-weight: var(--fs-text-weight-light);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
[data-fs-self-management-drawer-footer-logout-button] {
|
|
160
|
+
&[data-fs-self-management-drawer-footer-logout-button-color="danger"] {
|
|
161
|
+
|
|
162
|
+
[data-fs-button-wrapper] {
|
|
163
|
+
border-radius: var(--fs-border-radius-pill);
|
|
164
|
+
color: var(--fs-color-danger-text);
|
|
165
|
+
border-color: var(--fs-border-color-light);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
[data-fs-button-wrapper]:hover {
|
|
169
|
+
color: var(--fs-color-danger-text);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
[data-fs-icon] {
|
|
173
|
+
color: var(--fs-color-danger-text);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
1
179
|
// ----------------------------------------------------------
|
|
2
180
|
// GLOBAL TOKENS
|
|
3
181
|
// Custom Theme
|
|
@@ -8,7 +186,7 @@
|
|
|
8
186
|
// --------------------------------------------------------
|
|
9
187
|
// Colors (Branding Core)
|
|
10
188
|
// --------------------------------------------------------
|
|
11
|
-
--fs-color-main-0: blue;
|
|
189
|
+
// --fs-color-main-0: blue;
|
|
12
190
|
// --------------------------------------------------------
|
|
13
191
|
// Typography (Branding Core)
|
|
14
192
|
// --------------------------------------------------------
|