@camunda/camunda-composite-components 0.2.16-rc.3 → 0.2.16-rc.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/lib/esm/components/c3-help-center/c3-help-center.js +11 -5
- package/lib/esm/components/c3-help-center/help-center.js +43 -34
- package/lib/esm/components/c3-help-center/tabs/tabContent.js +1 -1
- package/lib/esm/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.d.ts +1 -0
- package/lib/esm/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.js +10 -3
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ import { useC3HelpCenter } from "./c3-help-center-provider";
|
|
|
11
11
|
export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
|
|
12
12
|
const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen } = useC3HelpCenter();
|
|
13
13
|
const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, } = useC3UserConfiguration() || {};
|
|
14
|
-
const { theme: themeConfig, isEnabled, activeOrg, clusters } = useC3Profile();
|
|
14
|
+
const { theme: themeConfig, isEnabled, activeOrg, clusters, reloadClusters, } = useC3Profile();
|
|
15
15
|
const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
|
|
16
16
|
const themeRef = useRef();
|
|
17
17
|
const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
|
|
@@ -20,6 +20,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
|
|
|
20
20
|
const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
|
|
21
21
|
const [email, setEmail] = useState("");
|
|
22
22
|
const [showSurvey, setShowSurvey] = useState(autoStartSurvey);
|
|
23
|
+
const shouldShowSurvey = showSurvey || !persona?.wasShown;
|
|
23
24
|
useEffect(() => {
|
|
24
25
|
const updateResolvedTheme = ({ matches }) => {
|
|
25
26
|
if (themeRef.current === "system") {
|
|
@@ -63,7 +64,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
|
|
|
63
64
|
setEmail(meta.email);
|
|
64
65
|
if (userId)
|
|
65
66
|
setUserId(userId);
|
|
66
|
-
if (
|
|
67
|
+
if (shouldShowSurvey) {
|
|
67
68
|
setShowSurvey(true);
|
|
68
69
|
setIsHelpCenterOpen(true);
|
|
69
70
|
onRequestOpen?.();
|
|
@@ -74,14 +75,17 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
|
|
|
74
75
|
fetchData();
|
|
75
76
|
}, [JSON.stringify(decodedToken), decodedAudience]);
|
|
76
77
|
useEffect(() => {
|
|
77
|
-
if (!userToken || !decodedAudience)
|
|
78
|
+
if (!userToken || !decodedAudience || !persona?.complete)
|
|
78
79
|
return;
|
|
79
80
|
fetchConfig();
|
|
80
|
-
|
|
81
|
+
reloadClusters();
|
|
82
|
+
}, [persona?.complete]);
|
|
81
83
|
React.useEffect(() => {
|
|
82
84
|
const tabs = helpCenterConfig.tabs;
|
|
83
85
|
const firstTab = tabs[0].id;
|
|
84
86
|
if (isOpen) {
|
|
87
|
+
if (shouldShowSurvey)
|
|
88
|
+
setShowSurvey(true);
|
|
85
89
|
mixpanelTrack?.(`helpcenter:open`, {
|
|
86
90
|
to: activeTab ?? firstTab,
|
|
87
91
|
from: origin,
|
|
@@ -158,7 +162,9 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
|
|
|
158
162
|
}
|
|
159
163
|
setIsHelpCenterOpen(false);
|
|
160
164
|
onRequestClose?.();
|
|
165
|
+
fetchConfig();
|
|
166
|
+
reloadClusters();
|
|
161
167
|
};
|
|
162
168
|
return (React.createElement(Layer, null,
|
|
163
|
-
React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" },
|
|
169
|
+
React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, shouldShowSurvey ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: origin, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || "", organization: activeOrg, clusters: clusters || [], flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: origin, initialTab: activeTab })))));
|
|
164
170
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Button,
|
|
1
|
+
import { Button, Loading, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
|
|
2
2
|
import { Undo } from "@carbon/react/icons";
|
|
3
3
|
import React, { useEffect, useState } from "react";
|
|
4
4
|
import { Feedback } from "./tabs/feedback";
|
|
@@ -53,7 +53,14 @@ export const HelpCenter = ({ configuration, organization, persona, email, audien
|
|
|
53
53
|
setTabTiles(tiles);
|
|
54
54
|
setIsLoadingTiles(false);
|
|
55
55
|
})();
|
|
56
|
-
}, [
|
|
56
|
+
}, [
|
|
57
|
+
token,
|
|
58
|
+
JSON.stringify(persona),
|
|
59
|
+
audience,
|
|
60
|
+
JSON.stringify(organization),
|
|
61
|
+
JSON.stringify(clusters),
|
|
62
|
+
JSON.stringify(tabs),
|
|
63
|
+
]);
|
|
57
64
|
useEffect(() => {
|
|
58
65
|
setActiveTab(initialTab ?? firstTab);
|
|
59
66
|
}, [initialTab]);
|
|
@@ -131,41 +138,43 @@ export const HelpCenter = ({ configuration, organization, persona, email, audien
|
|
|
131
138
|
} },
|
|
132
139
|
React.createElement("h4", { style: { marginLeft: "16rem" } }, header)),
|
|
133
140
|
React.createElement(StyledModalBody, { style: {
|
|
134
|
-
height: persona.complete && activeTab === "recommendations"
|
|
135
|
-
? "638px"
|
|
136
|
-
: "700px",
|
|
137
141
|
backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
|
|
138
142
|
marginBottom: 0,
|
|
139
143
|
} },
|
|
140
|
-
React.createElement(
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
144
|
+
React.createElement("div", { style: {
|
|
145
|
+
height: persona.complete && activeTab === "recommendations"
|
|
146
|
+
? "638px"
|
|
147
|
+
: "650px",
|
|
148
|
+
} },
|
|
149
|
+
React.createElement(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav" },
|
|
150
|
+
React.createElement(SideNavItems, null,
|
|
151
|
+
React.createElement(SideNavMenuItem, null,
|
|
152
|
+
React.createElement("h5", null, "Help Center")),
|
|
153
|
+
React.createElement("div", { style: { marginTop: "4px" } },
|
|
154
|
+
React.createElement(Stack, null, tabBar.map(({ name, id, text }) => {
|
|
155
|
+
const active = activeTab === name;
|
|
156
|
+
let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
|
|
157
|
+
let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
|
|
158
|
+
if (active) {
|
|
159
|
+
tabBackgroundColor =
|
|
160
|
+
theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
|
|
161
|
+
tabButtonColor = theme === "light" ? "#161616" : "#f4f4f4";
|
|
162
|
+
}
|
|
163
|
+
return (React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
|
|
164
|
+
setActiveTab(name);
|
|
165
|
+
mixpanelTrack?.("helpcenter:open", {
|
|
166
|
+
to: id,
|
|
167
|
+
from: origin,
|
|
168
|
+
});
|
|
169
|
+
}, style: {
|
|
170
|
+
width: "100%",
|
|
171
|
+
backgroundColor: tabBackgroundColor,
|
|
172
|
+
color: tabButtonColor,
|
|
173
|
+
}, key: name, "aria-label": text }, text));
|
|
174
|
+
}))),
|
|
175
|
+
React.createElement("div", { style: { position: "absolute", bottom: "20px" } }, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, target: "_blank" },
|
|
176
|
+
React.createElement("span", { className: "cds--link" }, link.label))))))),
|
|
177
|
+
content)),
|
|
169
178
|
persona.complete && activeTab === "recommendations" && (React.createElement(ModalFooter, { style: {
|
|
170
179
|
height: "62px",
|
|
171
180
|
paddingRight: "16px",
|
|
@@ -8,7 +8,7 @@ export const TAB_TYPES = {
|
|
|
8
8
|
export const TabContent = ({ onboarding, type, origin, tiles, mixpanelTrack }) => {
|
|
9
9
|
return (React.createElement("div", null,
|
|
10
10
|
React.createElement(Stack, null,
|
|
11
|
-
onboarding && onboarding?.complete !== true && (React.createElement(ActionableNotification, { kind: "info", inline: true, lowContrast: false, hideCloseButton: true, style: { maxWidth: "100%" }, actionButtonLabel: "Resume Survey", onActionButtonClick: onboarding.resumeSurvey, title: "Complete the new user survey to see more recommendations", subtitle: "" })),
|
|
11
|
+
onboarding && onboarding?.complete !== true && (React.createElement(ActionableNotification, { kind: "info", inline: true, lowContrast: false, hideCloseButton: true, style: { maxWidth: "100%", marginBottom: "1rem" }, actionButtonLabel: "Resume Survey", onActionButtonClick: onboarding.resumeSurvey, title: "Complete the new user survey to see more recommendations", subtitle: "" })),
|
|
12
12
|
React.createElement("div", { style: {
|
|
13
13
|
display: "flex",
|
|
14
14
|
flexWrap: "wrap",
|
|
@@ -9,6 +9,7 @@ export const C3ProfileContext = createContext({
|
|
|
9
9
|
orgs: null,
|
|
10
10
|
activeOrg: null,
|
|
11
11
|
clusters: null,
|
|
12
|
+
reloadClusters: () => undefined,
|
|
12
13
|
resolvedTheme: defaultTheme,
|
|
13
14
|
onThemeChange: () => undefined,
|
|
14
15
|
});
|
|
@@ -20,6 +21,13 @@ export const C3ProfileProvider = ({ children }) => {
|
|
|
20
21
|
const [orgs, setOrgs] = useState(null);
|
|
21
22
|
const [activeOrg, setActiveOrg] = useState(null);
|
|
22
23
|
const [clusters, setClusters] = useState(null);
|
|
24
|
+
const loadClusters = () => {
|
|
25
|
+
if (!config.userToken || !decodedAudience || !config.activeOrganizationId)
|
|
26
|
+
return;
|
|
27
|
+
getClusters(decodedAudience, config.userToken, config.activeOrganizationId).then((res) => {
|
|
28
|
+
setClusters(res);
|
|
29
|
+
});
|
|
30
|
+
};
|
|
23
31
|
useEffect(() => {
|
|
24
32
|
if (!decodedToken || !decodedAudience || !config.activeOrganizationId) {
|
|
25
33
|
return;
|
|
@@ -28,9 +36,7 @@ export const C3ProfileProvider = ({ children }) => {
|
|
|
28
36
|
setOrgs(res);
|
|
29
37
|
setActiveOrg(res?.find((org) => org.uuid === config.activeOrganizationId) || null);
|
|
30
38
|
});
|
|
31
|
-
|
|
32
|
-
setClusters(res);
|
|
33
|
-
});
|
|
39
|
+
loadClusters();
|
|
34
40
|
}, [config?.activeOrganizationId, decodedToken, decodedAudience]);
|
|
35
41
|
useEffect(() => {
|
|
36
42
|
const updateSystemTheme = ({ matches }) => {
|
|
@@ -71,6 +77,7 @@ export const C3ProfileProvider = ({ children }) => {
|
|
|
71
77
|
orgs,
|
|
72
78
|
activeOrg,
|
|
73
79
|
clusters,
|
|
80
|
+
reloadClusters: loadClusters,
|
|
74
81
|
onThemeChange,
|
|
75
82
|
} },
|
|
76
83
|
React.createElement(CarbonThemeProvider, null, children))) : (children);
|