@camunda/camunda-composite-components 0.2.13 → 0.2.14

package/lib/esm/api/help-center.d.ts

@@ -1,9 +1,7 @@
 import { HelpCenterConfig } from "../components/c3-help-center/defaultHelpCenterConfig";
-import { Cluster, Organization, Persona, TileConfig, WpCardType } from "../components/c3-help-center/c3-help-center.types";
+import { Persona, TileConfig, WpCardType } from "../components/c3-help-center/c3-help-center.types";
 import { OnboardingConfig } from "../components/c3-onboarding-survey/defaultOnboardingConfig";
 import { RequestPayload } from "./api";
-export declare const getOrg: (stage: string, accessToken: string, orgId: string) => Promise<Organization | null>;
-export declare const getClusters: (stage: string, accessToken: string, orgId: string) => Promise<Cluster[] | null>;
 export declare const getConfig: (accessToken: string, audience: string) => Promise<HelpCenterConfig | null>;
 export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, clusterIds, currentOrgId, persona, flags, email, cloudAudience, }: {
     accessToken: string;

package/lib/esm/api/help-center.js

@@ -1,38 +1,5 @@
 import { recommendations } from "../components/c3-help-center/recommendations";
 import { request } from "./api";
-export const getOrg = async (stage, accessToken, orgId) => {
-    const headers = {};
-    headers.Authorization = `Bearer ${accessToken}`;
-    headers["Content-Type"] = "application/json";
-    try {
-        const response = await fetch(`https://accounts.${stage}/external/organizations/my`, {
-            method: "GET",
-            headers,
-        });
-        const orgs = await response.json();
-        return orgs.find((org) => org.uuid === orgId);
-    }
-    catch (error) {
-        console.log(error);
-    }
-    return null;
-};
-export const getClusters = async (stage, accessToken, orgId) => {
-    const headers = {};
-    headers.Authorization = `Bearer ${accessToken}`;
-    headers["Content-Type"] = "application/json";
-    try {
-        const response = await fetch(`https://console.${stage}/external/organizations/${orgId}/clusters`, {
-            method: "GET",
-            headers,
-        });
-        return response.json();
-    }
-    catch (error) {
-        console.log(error);
-    }
-    return null;
-};
 export const getConfig = async (accessToken, audience) => {
     try {
         const response = await fetch(`https://helpcenter.${audience}/helpcenter/config`, {
@@ -87,7 +54,7 @@ export const submitSurvey = async ({ audience, token, data, }) => request({
 });
 export const submitFeedback = async ({ token, audience, formData, }) => request({
     method: "post",
-    url: `https://feedback.${audience}/submit`,
+    url: `https://helpcenter.${audience}/feedback/submit`,
     camundaAuth: { token },
     body: formData,
     type: "form",

package/lib/esm/api/profile.d.ts

@@ -1,5 +1,6 @@
 import { C3NotificationsProps } from "../components/c3-navigation/c3-navigation.types";
 import { Theme } from "../components/c3-user-configuration/c3-profile-provider/c3-profile-provider";
+import { Cluster, Organization } from "../components/c3-help-center/c3-help-center.types";
 export type Profile = {
     theme: Theme;
 };
@@ -14,3 +15,5 @@ export type UpdateThemeOptions = C3NotificationsProps & {
     theme: Profile["theme"];
 };
 export declare const updateTheme: ({ endpoints, stage, userToken, getNewUserToken, theme, }: UpdateThemeOptions) => Promise<void>;
+export declare const getOrgs: (stage: string, accessToken: string) => Promise<Organization[] | null>;
+export declare const getClusters: (stage: string, accessToken: string, orgId: string) => Promise<Cluster[] | null>;

package/lib/esm/api/profile.js

@@ -28,3 +28,29 @@ export const updateTheme = async ({ endpoints, stage, userToken, getNewUserToken
         console.error(error);
     }
 };
+export const getOrgs = async (stage, accessToken) => {
+    try {
+        return await request({
+            url: `https://accounts.${stage}/external/organizations/my`,
+            camundaAuth: { token: accessToken },
+            type: "json",
+        });
+    }
+    catch (error) {
+        console.log(error);
+    }
+    return null;
+};
+export const getClusters = async (stage, accessToken, orgId) => {
+    try {
+        return await request({
+            url: `https://console.${stage}/external/organizations/${orgId}/clusters`,
+            camundaAuth: { token: accessToken },
+            type: "json",
+        });
+    }
+    catch (error) {
+        console.log(error);
+    }
+    return null;
+};

package/lib/esm/components/c3-help-center/c3-help-center.js

@@ -3,23 +3,20 @@ import React, { useEffect, useRef, useState } from "react";
 import { HelpCenter } from "./help-center";
 import { defaultHelpCenterConfig } from "./defaultHelpCenterConfig";
 import { C3OnboardingSurvey } from "../c3-onboarding-survey/c3-onboarding-survey";
-import { getClusters, getConfig, getOrg, updatePersona, } from "../../api/help-center";
+import { getConfig, updatePersona } from "../../api/help-center";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 import { defaultTheme, useC3Profile, } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carbon-theme-provider";
 import { useC3HelpCenter } from "./c3-help-center-provider";
 export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
     const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen } = useC3HelpCenter();
-    const { userToken, decodedToken, activeOrganizationId, handleTheme } = useC3UserConfiguration() || {};
-    const { theme: themeConfig, isEnabled } = useC3Profile();
+    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, } = useC3UserConfiguration() || {};
+    const { theme: themeConfig, isEnabled, activeOrg, clusters } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
     const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
     const [persona, setPersona] = useState(undefined);
     const [userId, setUserId] = useState("");
-    const [audience, setAudience] = useState("");
-    const [organization, setOrganization] = useState(null);
-    const [clusters, setClusters] = useState([]);
     const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
     const [email, setEmail] = useState("");
     const [showSurvey, setShowSurvey] = useState(autoStartSurvey);
@@ -44,9 +41,9 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         setResolvedTheme(resolveTheme(newTheme || "light"));
     }, [theme, themeConfig, isOpen]);
     const fetchData = async () => {
-        if (!decodedToken)
+        if (!userToken || !decodedToken || !decodedAudience)
             return;
-        const { userId, meta, audience, persona } = decodedToken;
+        const { userId, meta, persona } = decodedToken;
         if (persona !== undefined) {
             setPersona(persona);
             if (persona.wasShown) {
@@ -58,29 +55,19 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         }
         if (meta)
             setEmail(meta.email);
-        const decodedAudience = typeof audience === "string" ? audience : audience?.[0];
         if (userId)
             setUserId(userId);
-        if (decodedAudience && userToken && activeOrganizationId) {
-            setAudience(decodedAudience);
-            const clusters = await getClusters(decodedAudience, userToken, activeOrganizationId);
-            setClusters(clusters);
-            const org = await getOrg(decodedAudience, userToken, activeOrganizationId);
-            setOrganization(org);
-        }
         if (autoStartSurvey && !(persona?.wasShown ?? false)) {
             setShowSurvey(true);
             setIsHelpCenterOpen(true);
             onRequestOpen?.();
         }
-        if (decodedAudience && userToken) {
-            const onboardConfig = await getConfig(userToken, decodedAudience);
-            setHelpCenterConfig(onboardConfig || defaultHelpCenterConfig);
-        }
+        const onboardConfig = await getConfig(userToken, decodedAudience);
+        setHelpCenterConfig(onboardConfig || defaultHelpCenterConfig);
     };
     React.useEffect(() => {
         fetchData();
-    }, [JSON.stringify(decodedToken), activeOrganizationId]);
+    }, [JSON.stringify(decodedToken), decodedAudience]);
     React.useEffect(() => {
         const tabs = helpCenterConfig.tabs;
         const firstTab = tabs[0].id;
@@ -95,6 +82,8 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         }
     }, [isOpen]);
     const onRequestRetakeSurvey = () => {
+        if (!userToken || !activeOrganizationId || !decodedAudience)
+            return;
         const newPersona = {
             ...persona,
             ...{ nextStep: 0, complete: false },
@@ -102,22 +91,22 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         setPersona(newPersona);
         updatePersona({
             newPersona,
-            audience,
-            accessToken: userToken || "",
-            orgId: activeOrganizationId || "",
+            audience: decodedAudience,
+            accessToken: userToken,
+            orgId: activeOrganizationId,
             userId,
         });
         onPersonaChange?.(newPersona);
         setShowSurvey(true);
     };
     const onRequestResumeSurvey = () => {
-        if (!userToken || !activeOrganizationId)
+        if (!userToken || !activeOrganizationId || !decodedAudience)
             return;
         const newPersona = { ...persona, ...{ complete: false, wasShown: true } };
         setPersona(newPersona);
         updatePersona({
             newPersona,
-            audience,
+            audience: decodedAudience,
             accessToken: userToken,
             orgId: activeOrganizationId,
             userId,
@@ -126,13 +115,13 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         setShowSurvey(true);
     };
     const onRequestSkipSurvey = () => {
-        if (!userToken || !activeOrganizationId)
+        if (!userToken || !activeOrganizationId || !decodedAudience)
             return;
         const newPersona = { ...persona, ...{ complete: false, wasShown: true } };
         setPersona(newPersona);
         updatePersona({
             newPersona,
-            audience,
+            audience: decodedAudience,
             accessToken: userToken,
             orgId: activeOrganizationId,
             userId,
@@ -148,10 +137,10 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         }
     };
     const closeFn = () => {
-        if (persona && userToken && activeOrganizationId) {
+        if (persona && userToken && activeOrganizationId && decodedAudience) {
             updatePersona({
                 newPersona: persona,
-                audience,
+                audience: decodedAudience,
                 accessToken: userToken,
                 orgId: activeOrganizationId,
                 userId,
@@ -161,5 +150,5 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         onRequestClose?.();
     };
     return (React.createElement(Layer, null,
-        React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, showSurvey || !persona || !persona.wasShown ? (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: audience, organization: organization, clusters: clusters || [], flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: origin, initialTab: activeTab })))));
+        React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, showSurvey || !persona || !persona.wasShown ? (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 })))));
 };

package/lib/esm/components/c3-onboarding-survey/c3-onboarding-survey.js

@@ -4,19 +4,18 @@ import { defaultOnboardingConfig } from "./defaultOnboardingConfig";
 import { getOnboardingConfig, submitSurvey, updatePersona, } from "../../api/help-center";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 export const C3OnboardingSurvey = (props) => {
-    const { userToken, decodedToken, activeOrganizationId } = useC3UserConfiguration() || {};
+    const { userToken, decodedToken, activeOrganizationId, decodedAudience } = useC3UserConfiguration() || {};
     const [persona, setPersona] = useState(props.persona);
     const [userId, setUserId] = useState("");
-    const [audience, setAudience] = useState("");
     const [onboardConfig, setOnboardConfig] = useState(defaultOnboardingConfig);
     const [isLoadingConfig, setIsLoadingConfig] = useState(false);
     const [givenName, setGivenName] = useState("");
     const [email, setEmail] = useState("");
     React.useEffect(() => {
-        if (!decodedToken)
+        if (!decodedToken || !decodedAudience)
             return;
         (async () => {
-            const { userId, meta, audience, persona } = decodedToken;
+            const { userId, meta, persona } = decodedToken;
             if (props.persona === undefined && persona) {
                 setPersona(persona);
             }
@@ -24,23 +23,18 @@ export const C3OnboardingSurvey = (props) => {
                 setGivenName(meta.given_name);
                 setEmail(meta.email);
             }
-            const decodedAudience = typeof audience === "string" ? audience : audience?.[0];
-            if (decodedAudience)
-                setAudience(decodedAudience);
             if (userId)
                 setUserId(userId);
             setOnboardConfig(defaultOnboardingConfig);
-            if (decodedAudience) {
-                setIsLoadingConfig(true);
-                const config = await getOnboardingConfig({
-                    audience: decodedAudience,
-                    camundaAuth: { token: userToken },
-                });
-                setOnboardConfig(config);
-                setIsLoadingConfig(false);
-            }
+            setIsLoadingConfig(true);
+            const config = await getOnboardingConfig({
+                audience: decodedAudience,
+                camundaAuth: { token: userToken },
+            });
+            setOnboardConfig(config);
+            setIsLoadingConfig(false);
         })();
-    }, [JSON.stringify(decodedToken)]);
+    }, [JSON.stringify(decodedToken), decodedAudience]);
     React.useEffect(() => {
         setPersona(props.persona);
     }, [props.persona]);
@@ -51,10 +45,10 @@ export const C3OnboardingSurvey = (props) => {
             from: props.origin,
         });
         const newPersona = { ...persona, ...{ complete: skip } };
-        if (activeOrganizationId && userToken)
+        if (activeOrganizationId && userToken && decodedAudience)
             await updatePersona({
                 newPersona,
-                audience,
+                audience: decodedAudience,
                 orgId: activeOrganizationId,
                 userId,
                 accessToken: userToken,
@@ -69,17 +63,17 @@ export const C3OnboardingSurvey = (props) => {
         }
     };
     const syncPersona = async (newPersona, notifyHubspot) => {
-        if (activeOrganizationId && userToken) {
+        if (activeOrganizationId && userToken && decodedAudience) {
             await updatePersona({
                 newPersona,
-                audience,
+                audience: decodedAudience,
                 orgId: activeOrganizationId,
                 userId,
                 accessToken: userToken,
             });
             if (notifyHubspot) {
                 await submitSurvey({
-                    audience,
+                    audience: decodedAudience,
                     token: userToken,
                     data: { ...newPersona, ...{ email, orgUuid: activeOrganizationId } },
                 });

package/lib/esm/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.d.ts

@@ -1,11 +1,13 @@
 import React, { FC, PropsWithChildren } from "react";
 import { ResolvedTheme } from "./carbon-theme-provider";
-import { Cluster } from "../../c3-help-center/c3-help-center.types";
+import { Cluster, Organization } from "../../c3-help-center/c3-help-center.types";
 export type Theme = "light" | "dark" | "system";
 export declare const defaultTheme: "light";
 export type C3ProfileContextValue = {
     isEnabled: boolean;
     theme: Theme;
+    orgs: Organization[] | null;
+    activeOrg: Organization | null;
     clusters: Cluster[] | null;
     resolvedTheme: ResolvedTheme;
     onThemeChange: (newTheme: Theme) => void;

package/lib/esm/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.js

@@ -1,29 +1,34 @@
 import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
 import { C3UserConfigurationContext } from "../c3-user-configuration-provider";
-import { getUserTheme, updateTheme } from "../../../api/profile";
+import { getUserTheme, updateTheme, getClusters, getOrgs, } from "../../../api/profile";
 import { CarbonThemeProvider, resolveTheme, } from "./carbon-theme-provider";
-import { getClusters } from "../../../api/help-center";
 export const defaultTheme = "light";
 export const C3ProfileContext = createContext({
     isEnabled: false,
     theme: defaultTheme,
+    orgs: null,
+    activeOrg: null,
     clusters: null,
     resolvedTheme: defaultTheme,
     onThemeChange: () => undefined,
 });
 export const C3ProfileProvider = ({ children }) => {
-    const { decodedToken, ...config } = useContext(C3UserConfigurationContext);
+    const { decodedToken, decodedAudience, ...config } = useContext(C3UserConfigurationContext);
     const isEnabled = !!config;
     const themeRef = useRef(getUserTheme(config.userToken) || defaultTheme);
     const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
+    const [orgs, setOrgs] = useState(null);
+    const [activeOrg, setActiveOrg] = useState(null);
     const [clusters, setClusters] = useState(null);
     useEffect(() => {
         if (!decodedToken) {
             return;
         }
-        const { audience } = decodedToken;
-        const decodedAudience = typeof audience === "string" ? audience : audience?.[0];
         if (decodedAudience) {
+            getOrgs(decodedAudience, config.userToken).then((res) => {
+                setOrgs(res);
+                setActiveOrg(res?.find((org) => org.uuid === config.activeOrganizationId) || null);
+            });
             getClusters(decodedAudience, config.userToken, config.activeOrganizationId).then((res) => {
                 setClusters(res);
             });
@@ -65,6 +70,8 @@ export const C3ProfileProvider = ({ children }) => {
             isEnabled,
             theme: themeRef.current,
             resolvedTheme,
+            orgs,
+            activeOrg,
             clusters,
             onThemeChange,
         } },

package/lib/esm/components/c3-user-configuration/c3-user-configuration-provider.d.ts

@@ -17,6 +17,7 @@ type C3UserConfigurationWithStage = C3UserConfigurationBase & {
 export type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfigurationWithStage;
 export type C3UserConfigurationContextValue = C3UserConfiguration & {
     decodedToken: DecodedToken | null;
+    decodedAudience: string | null;
 };
 export declare const C3UserConfigurationContext: React.Context<C3UserConfigurationContextValue>;
 declare const C3UserConfigurationProvider: FC<C3UserConfiguration & {

package/lib/esm/components/c3-user-configuration/c3-user-configuration-provider.js

@@ -7,15 +7,21 @@ export const C3UserConfigurationContext = React.createContext({
     activeOrganizationId: "",
     userToken: "",
     decodedToken: null,
+    decodedAudience: null,
     getNewUserToken: () => Promise.resolve(""),
 });
 const C3UserConfigurationProvider = ({ children, ...config }) => {
     const [decodedToken, setDecodedToken] = useState(null);
+    const [decodedAudience, setDecodedAudience] = useState(null);
     useEffect(() => {
         if (config.userToken)
             setDecodedToken(decodeJWT(config.userToken));
     }, [config.userToken]);
-    return (React.createElement(C3UserConfigurationContext.Provider, { value: { ...config, decodedToken } },
+    useEffect(() => {
+        const { audience } = decodedToken || {};
+        setDecodedAudience((typeof audience === "string" ? audience : audience?.[0]) || null);
+    }, [decodedToken]);
+    return (React.createElement(C3UserConfigurationContext.Provider, { value: { ...config, decodedToken, decodedAudience } },
         React.createElement(C3ProfileProvider, null,
             React.createElement(C3HelpCenterProvider, null, children))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.2.13",
+	"version": "0.2.14",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -44,7 +44,7 @@
 		"@storybook/react": "7.4.5",
 		"@storybook/react-webpack5": "7.4.5",
 		"@storybook/test-runner": "0.13.0",
-		"@storybook/testing-library": "0.2.1",
+		"@storybook/testing-library": "0.2.2",
 		"@types/carbon-components-react": "7.55.3",
 		"@types/event-source-polyfill": "1.0.1",
 		"@types/mixpanel-browser": "2.47.1",