@camunda/camunda-composite-components 0.20.3 → 0.20.4

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.20.3",
+    "version": "0.20.4",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"

package/lib/esm/src/components/c3-help-center/c3-help-center-provider.d.ts

@@ -1,7 +1,4 @@
 import React, { FC, PropsWithChildren } from "react";
-import { HelpCenterConfig } from "./defaultHelpCenterConfig";
-import { Persona, WpCardType } from "./c3-help-center.types";
-import { OnboardingConfig } from "../c3-onboarding-survey/defaultOnboardingConfig";
 export declare enum HelpCenterHintType {
     HelpCenter = "help-center",
     Onboarding = "onboarding"
@@ -16,20 +13,6 @@ export type C3HelpCenterContextValue = {
     setShowHintOnClose: (showHintOnClose: boolean) => void;
     hintType: HelpCenterHintType;
     setHintType: (hintType: HelpCenterHintType) => void;
-    helpCenterConfig: HelpCenterConfig;
-    persona: Persona | undefined;
-    setPersona: (persona: Persona | undefined) => void;
-    rawTabTiles: {
-        [id: string]: WpCardType[];
-    };
-    isLoadingTiles: boolean;
-    updateFlags: (flags: string[]) => void;
-    updateAutoStartSurvey: (autoStart: boolean) => void;
-    showSurvey: boolean;
-    setShowSurvey: (showSurvey: boolean) => void;
-    onboadingConfig: OnboardingConfig;
-    isLoadingOnboardingConfig: boolean;
-    getOnboadingSurveyConfig: (audience: string) => Promise<void>;
 };
 export declare const C3HelpCenterContext: React.Context<C3HelpCenterContextValue>;
 export declare const C3HelpCenterProvider: FC<PropsWithChildren>;

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

@@ -1,10 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useRef, useState, } from "react";
-import { getConfig, getOnboardingConfig, getTiles } from "../../api/help-center";
-import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
-import { defaultHelpCenterConfig, } from "./defaultHelpCenterConfig";
-import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
-import { defaultOnboardingConfig, } from "../c3-onboarding-survey/defaultOnboardingConfig";
+import React, { useEffect, useState } from "react";
 export var HelpCenterHintType;
 (function (HelpCenterHintType) {
     HelpCenterHintType["HelpCenter"] = "help-center";
@@ -19,18 +14,6 @@ export const C3HelpCenterContext = React.createContext({
     setShowHintOnClose: () => undefined,
     hintType: HelpCenterHintType.Onboarding,
     setHintType: () => undefined,
-    helpCenterConfig: defaultHelpCenterConfig,
-    persona: undefined,
-    setPersona: () => undefined,
-    rawTabTiles: {},
-    isLoadingTiles: false,
-    updateFlags: () => undefined,
-    updateAutoStartSurvey: () => undefined,
-    showSurvey: false,
-    setShowSurvey: () => undefined,
-    onboadingConfig: defaultOnboardingConfig,
-    isLoadingOnboardingConfig: false,
-    getOnboadingSurveyConfig: () => undefined,
 });
 export const C3HelpCenterProvider = ({ children }) => {
     const [isHelpCenterOpen, setIsHelpCenterOpen] = useState(false);
@@ -38,97 +21,10 @@ export const C3HelpCenterProvider = ({ children }) => {
     const [showHint, setShowHint] = useState(false);
     const [showHintOnClose, setShowHintOnClose] = useState(false);
     const [hintType, setHintType] = useState(HelpCenterHintType.Onboarding);
-    const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
-    const [showSurvey, setShowSurvey] = useState(false);
-    const [onboadingConfig, setOnboardConfig] = useState(defaultOnboardingConfig);
-    const [isLoadingOnboardingConfig, setIsLoadingOnboardingConfig] = useState(false);
-    const { activeOrg: organization, clusters } = useC3Profile();
-    const clusterIds = (clusters || []).map((cluster) => cluster.uuid);
-    const [rawTabTiles, setRawTabTiles] = useState({});
-    const [isLoadingTiles, setIsLoadingTiles] = useState(true);
-    const [persona, setPersona] = useState(undefined);
-    const tabCache = useRef(new Map());
-    const flags = useRef([]);
-    const updateFlags = (updatedFlags) => {
-        flags.current = updatedFlags;
-    };
-    const autoStartSurvey = useRef(false);
-    const updateAutoStartSurvey = (autoStart) => {
-        autoStartSurvey.current = autoStart;
-    };
-    const { userToken, activeOrganizationId, decodedAudience, decodedToken } = useC3UserConfiguration();
-    const getTileData = async (tabs) => {
-        if (!decodedAudience) {
-            return;
-        }
-        const { persona: tokenPersona } = decodedToken ?? {};
-        const tiles = {};
-        setIsLoadingTiles(true);
-        for (const singleTab of tabs) {
-            if (userToken) {
-                if (tabCache.current.has(singleTab.id)) {
-                    tiles[singleTab.id] = tabCache.current.get(singleTab.id);
-                    continue;
-                }
-                const { result } = await getTiles({
-                    tileConfig: singleTab.tiles,
-                    cloudAudience: decodedAudience,
-                    persona: tokenPersona ?? {},
-                    clusterIds,
-                    salesPlanType: organization?.salesPlan?.type ?? "",
-                    flags: flags.current,
-                    accessToken: userToken,
-                });
-                if (result) {
-                    tiles[singleTab.id] = result;
-                    tabCache.current.set(singleTab.id, result);
-                }
-            }
-        }
-        setIsLoadingTiles(false);
-        setRawTabTiles(tiles);
-    };
-    const getOnboadingSurveyConfig = useCallback(async (decodedAudience) => {
-        setIsLoadingOnboardingConfig(true);
-        const { result: config } = await getOnboardingConfig({
-            audience: decodedAudience,
-            camundaAuth: { token: userToken },
-            orgId: activeOrganizationId,
-        });
-        if (config) {
-            setOnboardConfig(config);
-        }
-        setIsLoadingOnboardingConfig(false);
-    }, [activeOrganizationId, userToken]);
-    const openHelpCenter = async (showTabId) => {
+    const openHelpCenter = (showTabId) => {
         if (!isHelpCenterOpen) {
             setIsHelpCenterOpen(true);
             setShowHint(false);
-            if (decodedAudience) {
-                const { persona: tokenPersona } = decodedToken ?? {};
-                if (showSurvey || autoStartSurvey.current || !tokenPersona?.wasShown) {
-                    setIsLoadingTiles(false);
-                    await getOnboadingSurveyConfig(decodedAudience);
-                }
-                else {
-                    const { result } = await getConfig(userToken, decodedAudience, activeOrganizationId);
-                    const config = result || defaultHelpCenterConfig;
-                    await getTileData(config?.tabs);
-                    setHelpCenterConfig(config);
-                }
-                if (tokenPersona !== undefined) {
-                    setPersona(tokenPersona);
-                    if (tokenPersona.wasShown) {
-                        setShowSurvey(false);
-                    }
-                }
-                else {
-                    setPersona({ wasShown: false });
-                }
-                if (autoStartSurvey.current && !tokenPersona?.wasShown) {
-                    setIsHelpCenterOpen(true);
-                }
-            }
         }
         if (showTabId)
             setActiveTabId(showTabId);
@@ -152,18 +48,6 @@ export const C3HelpCenterProvider = ({ children }) => {
             setShowHintOnClose,
             hintType,
             setHintType,
-            helpCenterConfig,
-            persona,
-            setPersona,
-            rawTabTiles,
-            isLoadingTiles,
-            updateFlags,
-            showSurvey,
-            setShowSurvey,
-            onboadingConfig,
-            isLoadingOnboardingConfig,
-            updateAutoStartSurvey,
-            getOnboadingSurveyConfig,
         }, children: children }));
 };
 export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);

package/lib/esm/src/components/c3-help-center/c3-help-center.d.ts

@@ -9,6 +9,8 @@ export interface C3HelpCenterProps {
     activeTab?: string;
     autoStartSurvey?: boolean;
     onPersonaChange?: (persona: Persona) => void;
+    onRequestClose?: () => void;
+    onRequestOpen?: () => void;
     mixpanelTrack?: (event: string, data: Dict | undefined) => void;
 }
 export declare const C3HelpCenter: FC<C3HelpCenterProps>;

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ActionableNotification, ComposedModal, Layer, ModalBody, ModalHeader, } from "@carbon/react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+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 { 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";
@@ -15,26 +16,29 @@ const StyledComposedModal = styled(ComposedModal) `
 		mask-image: none;
 	}
 `;
-export const C3HelpCenter = ({ autoStartSurvey, origin, flags, mixpanelTrack: customMixpanelTrack, theme, onPersonaChange, activeTab, }) => {
-    const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, helpCenterConfig, persona, setPersona, showSurvey, setShowSurvey, updateAutoStartSurvey, getOnboadingSurveyConfig, } = useC3HelpCenter();
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+    const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, } = useC3HelpCenter();
     const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, analyticsTrack, currentApp, } = useC3UserConfiguration();
-    const { theme: themeConfig, isEnabled } = useC3Profile();
+    const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
     const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
-    const userId = decodedToken?.userId ?? "";
-    const email = decodedToken?.meta?.email ?? "";
+    const [persona, setPersona] = useState(undefined);
+    const [userId, setUserId] = useState("");
+    const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
+    const [email, setEmail] = useState("");
+    const [showSurvey, setShowSurvey] = useState(autoStartSurvey);
     if (!origin && !currentApp)
         console.warn("No app provided to the help center. Please provide the `currentApp` prop to the `C3UserConfigurationProvider`.");
     const hostApp = origin || currentApp === "modeler" ? "webmodeler" : currentApp || "console";
-    const mixpanelTrack = useCallback((event, data) => {
+    const mixpanelTrack = (event, data) => {
         if (customMixpanelTrack) {
             customMixpanelTrack(event, data);
         }
         else if (analyticsTrack) {
             analyticsTrack(event, data);
         }
-    }, []);
+    };
     useEffect(() => {
         const updateResolvedTheme = ({ matches }) => {
             if (themeRef.current === "system") {
@@ -54,13 +58,56 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, mixpanelTrack: cu
         const newTheme = themeHandlingEnabled ? themeConfig : theme;
         themeRef.current = newTheme;
         setResolvedTheme(resolveTheme(newTheme || "light"));
-    }, [theme, themeConfig, isOpen, themeHandlingEnabled]);
-    useEffect(() => {
-        if (autoStartSurvey) {
-            setShowSurvey(autoStartSurvey);
+    }, [theme, themeConfig, isOpen]);
+    const fetchConfig = async () => {
+        if (!userToken || !decodedAudience)
+            return;
+        const { result: config } = await getConfig(userToken, decodedAudience, activeOrganizationId);
+        setHelpCenterConfig(config || defaultHelpCenterConfig);
+    };
+    const isFirstLoad = useRef(true);
+    const fetchData = async () => {
+        if (!userToken || !decodedToken || !decodedAudience)
+            return;
+        const { userId, meta, persona: tokenPersona } = decodedToken;
+        if (tokenPersona !== undefined) {
+            setPersona(tokenPersona);
+            if (tokenPersona.wasShown) {
+                setShowSurvey(false);
+            }
+        }
+        else {
+            setPersona({ wasShown: false });
         }
-    }, [autoStartSurvey, setShowSurvey]);
-    updateAutoStartSurvey(autoStartSurvey ?? false);
+        if (meta)
+            setEmail(meta.email);
+        if (userId)
+            setUserId(userId);
+        if (autoStartSurvey && !tokenPersona?.wasShown) {
+            setIsHelpCenterOpen(true);
+            onRequestOpen?.();
+        }
+        await fetchConfig();
+        isFirstLoad.current = false;
+    };
+    React.useEffect(() => {
+        fetchData();
+    }, [JSON.stringify(decodedToken), decodedAudience]);
+    useEffect(() => {
+        if (isFirstLoad.current ||
+            !userToken ||
+            !decodedAudience ||
+            !persona?.complete)
+            return;
+        fetchConfig();
+        reloadClusters();
+    }, [persona?.complete]);
+    useEffect(() => {
+        if (isFirstLoad.current || !activeOrganizationId)
+            return;
+        fetchConfig();
+        reloadClusters();
+    }, [activeOrganizationId]);
     React.useEffect(() => {
         const tabs = helpCenterConfig.tabs;
         const firstTab = tabs[0]?.id;
@@ -83,21 +130,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, mixpanelTrack: cu
                 from: origin,
             });
         }
-    }, [
-        activeOrganizationId,
-        activeTab,
-        autoStartSurvey,
-        decodedAudience,
-        helpCenterConfig.tabs,
-        isOpen,
-        mixpanelTrack,
-        origin,
-        persona,
-        setPersona,
-        setShowHintOnClose,
-        userId,
-        userToken,
-    ]);
+    }, [isOpen]);
     const onRequestRetakeSurvey = () => {
         if (!userToken || !activeOrganizationId || !decodedAudience)
             return;
@@ -116,10 +149,9 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, mixpanelTrack: cu
         onPersonaChange?.(newPersona);
         setShowSurvey(true);
     };
-    const onRequestResumeSurvey = async () => {
+    const onRequestResumeSurvey = () => {
         if (!userToken || !activeOrganizationId || !decodedAudience)
             return;
-        await getOnboadingSurveyConfig(decodedAudience);
         const newPersona = { ...persona, ...{ complete: false, wasShown: true } };
         setPersona(newPersona);
         updatePersona({
@@ -165,6 +197,9 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, mixpanelTrack: cu
                 userId,
             });
         }
+        onRequestClose?.();
+        fetchConfig();
+        reloadClusters();
         // wait for modal transition
         setTimeout(() => {
             setShowSurvey(false);
@@ -172,5 +207,5 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, mixpanelTrack: cu
     };
     return (_jsx(Layer, { children: _jsx(StyledComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter", style: showSurvey || !persona?.wasShown
                 ? { backgroundColor: "rgba(22,22,22, 0.8)" }
-                : {}, children: _jsx(ErrorBoundary, { fallbackRender: () => (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { title: "Help Center", closeModal: closeFn }), _jsx(ModalBody, { children: _jsx(ActionableNotification, { inline: true, hideCloseButton: true, lowContrast: true, kind: "error", title: "Something went wrong.", subtitle: "Try reloading the page.", actionButtonLabel: "Reload", onActionButtonClick: () => window.location.reload() }) })] })), children: showSurvey || (persona && !persona?.wasShown) ? (_jsx(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (_jsx(HelpCenter, { configuration: helpCenterConfig, persona: persona ?? {}, audience: decodedAudience || "", flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: hostApp, initialTab: activeTab })) }) }) }));
+                : {}, children: _jsx(ErrorBoundary, { fallbackRender: () => (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { title: "Help Center", closeModal: closeFn }), _jsx(ModalBody, { children: _jsx(ActionableNotification, { inline: true, hideCloseButton: true, lowContrast: true, kind: "error", title: "Something went wrong.", subtitle: "Try reloading the page.", actionButtonLabel: "Reload", onActionButtonClick: () => window.location.reload() }) })] })), children: showSurvey || !persona?.wasShown ? (_jsx(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (_jsx(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || "", flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: hostApp, initialTab: activeTab })) }) }) }));
 };

package/lib/esm/src/components/c3-help-center/help-center.d.ts

@@ -1,5 +1,5 @@
 import { Dict } from "mixpanel-browser";
-import type { FC } from "react";
+import { FC } from "react";
 import { Persona } from "./c3-help-center.types";
 import { HelpCenterConfig } from "./defaultHelpCenterConfig";
 export declare const HelpCenter: FC<{

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

@@ -1,16 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, ModalFooter, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
 import { Undo } from "@carbon/react/icons";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Feedback } from "./tabs/feedback";
 import { TabContent } from "./tabs/tabContent";
+import { getTiles } from "../../api/help-center";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 import { useC3HelpCenter } from "./c3-help-center-provider";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { TabContentSkeleton } from "./tabs/tabContentSkeleton";
 import { StyledModalBody, StyledModalHeader } from "./styles";
 import styled from "styled-components";
-import { C3Tabs } from "../c3-page/c3-tabs/c3-tabs";
 const StyledModalFooter = styled(ModalFooter) `
 	height: 62px;
 	padding-right: 16px;
@@ -21,33 +21,53 @@ const StyledModalFooter = styled(ModalFooter) `
 	border-color: ${({ $hcTheme }) => $hcTheme === "light" ? "#E0E0E0" : "#727272"};
 	background-color: ${({ $hcTheme }) => $hcTheme === "light" ? "#FFFFFF" : "#161616"};
 `;
-const SideNavWrapper = styled.div `
-	@media (max-width: 768px) {
-		display: none;
-	}
-`;
-const SideNavMobileWrapper = styled.div `
-	display: none;
-	@media (max-width: 768px) {
-		display: block;
-	}
-`;
-const StyledHeading = styled.h4 `
-	margin-left: 16rem;
-	@media (max-width: 768px) {
-		margin-left: 0rem;
-	}
-`;
 export const HelpCenter = ({ configuration, persona, email, audience, flags = [], onRequestResumeSurvey, onRequestRetakeSurvey, onRequestClose, mixpanelTrack, theme, origin, initialTab, }) => {
     const { tabs } = configuration;
     const firstTab = tabs[0].id;
-    const { activeOrganizationId, domain } = useC3UserConfiguration();
+    const { userToken: token, activeOrganizationId, domain, } = useC3UserConfiguration();
     const { activeOrg: organization, clusters } = useC3Profile();
     const clusterIds = (clusters || []).map((cluster) => cluster.uuid);
-    const { showTabId, rawTabTiles, isLoadingTiles, updateFlags } = useC3HelpCenter();
+    const { showTabId } = useC3HelpCenter();
     const [activeTab, setActiveTab] = useState(firstTab);
-    updateFlags(flags);
-    const getTabTiles = () => {
+    const [rawTabTiles, setRawTabTiles] = useState({});
+    const [tabTiles, setTabTiles] = useState({});
+    const [isLoadingTiles, setIsLoadingTiles] = useState(false);
+    let header = "";
+    let content = _jsx(_Fragment, {});
+    React.useEffect(() => {
+        ;
+        (async () => {
+            const tiles = {};
+            setIsLoadingTiles(true);
+            for (const singleTab of tabs) {
+                if (token) {
+                    const { result } = await getTiles({
+                        tileConfig: singleTab.tiles,
+                        cloudAudience: audience,
+                        persona,
+                        clusterIds,
+                        salesPlanType: organization?.salesPlan?.type ?? "",
+                        flags,
+                        accessToken: token,
+                    });
+                    if (result)
+                        tiles[singleTab.id] = result;
+                }
+            }
+            setIsLoadingTiles(false);
+            setRawTabTiles(tiles);
+        })();
+    }, [
+        token,
+        JSON.stringify(persona),
+        audience,
+        JSON.stringify(organization),
+        JSON.stringify(clusters),
+        JSON.stringify(tabs),
+    ]);
+    useEffect(() => {
+        if (!tabs || !rawTabTiles)
+            return;
         const tiles = {};
         for (const tab of tabs) {
             if (rawTabTiles[tab.id])
@@ -61,11 +81,8 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                         return card;
                     }) || [];
         }
-        return tiles;
-    };
-    const tabTiles = getTabTiles();
-    let header = "";
-    let content = _jsx(_Fragment, {});
+        setTabTiles(tiles);
+    }, [JSON.stringify(rawTabTiles), email, domain]);
     useEffect(() => {
         setActiveTab(initialTab ?? firstTab);
     }, [initialTab]);
@@ -126,53 +143,38 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
     return (_jsxs(_Fragment, { children: [_jsx(StyledModalHeader, { title: "", label: "", closeModal: onRequestClose, style: {
                     backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
                     marginBottom: "0",
-                }, children: _jsx(StyledHeading, { children: header }) }), _jsx(StyledModalBody, { style: {
+                }, children: _jsx("h4", { style: { marginLeft: "16rem" }, children: header }) }), _jsx(StyledModalBody, { style: {
                     backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
                     marginBottom: 0,
                 }, children: _jsxs("div", { style: {
                         height: persona.complete && activeTab === "recommendations"
                             ? "634px"
                             : "696px",
-                    }, children: [_jsx(SideNavMobileWrapper, { children: _jsx(C3Tabs, { tabs: tabBar.map((link) => {
-                                    return {
-                                        id: link.id,
-                                        label: link.text,
-                                        content: null,
-                                    };
-                                }), desiredTabId: activeTab, onTabChange: (tabId) => {
-                                    const link = tabBar.find((item) => item.id === tabId);
-                                    if (link) {
-                                        setActiveTab(link.name);
-                                        mixpanelTrack?.("helpcenter:open", {
-                                            to: link.id,
-                                            from: origin,
-                                        });
-                                    }
-                                } }) }), _jsx(SideNavWrapper, { children: _jsx(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav", children: _jsxs(SideNavItems, { children: [_jsx(SideNavMenuItem, { children: _jsx("h5", { children: "Help Center" }) }), _jsx("li", { style: { marginTop: "4px" }, children: _jsx(Stack, { children: _jsx("ul", { children: tabBar.map(({ name, id, text }) => {
-                                                        const active = activeTab === name;
-                                                        let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
-                                                        let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
-                                                        if (active) {
-                                                            tabBackgroundColor =
-                                                                theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
-                                                            tabButtonColor =
-                                                                theme === "light" ? "#161616" : "#f4f4f4";
-                                                        }
-                                                        return (_jsx("li", { children: _jsx(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
-                                                                    setActiveTab(name);
-                                                                    mixpanelTrack?.("helpcenter:open", {
-                                                                        to: id,
-                                                                        from: origin,
-                                                                    });
-                                                                }, style: {
-                                                                    width: "100%",
-                                                                    backgroundColor: tabBackgroundColor,
-                                                                    color: tabButtonColor,
-                                                                }, "aria-label": text, children: text }) }, name));
-                                                    }) }) }) }), _jsx("li", { style: { position: "absolute", bottom: "20px" }, children: _jsx("ul", { children: configuration.links?.map((link) => (_jsx(SideNavMenuItem, { href: link.link, 
-                                                    // eslint-disable-next-line
-                                                    // @ts-ignore
-                                                    target: "_blank", children: _jsx("span", { className: "cds--link", children: link.label }) }, link.label.split(" ").join("-").toLowerCase()))) }) })] }) }) }), content, _jsx("div", { style: { display: activeTab === "feedback" ? "block" : "none" }, children: _jsx(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
+                    }, children: [_jsx(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav", children: _jsxs(SideNavItems, { children: [_jsx(SideNavMenuItem, { children: _jsx("h5", { children: "Help Center" }) }), _jsx("li", { style: { marginTop: "4px" }, children: _jsx(Stack, { children: _jsx("ul", { children: tabBar.map(({ name, id, text }) => {
+                                                    const active = activeTab === name;
+                                                    let tabBackgroundColor = theme === "light" ? "#F4F4F4" : "#161616";
+                                                    let tabButtonColor = theme === "light" ? "#525252" : "#f4f4f4";
+                                                    if (active) {
+                                                        tabBackgroundColor =
+                                                            theme === "light" ? "#E5E5E5" : "#8D8D8D3D";
+                                                        tabButtonColor =
+                                                            theme === "light" ? "#161616" : "#f4f4f4";
+                                                    }
+                                                    return (_jsx("li", { children: _jsx(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
+                                                                setActiveTab(name);
+                                                                mixpanelTrack?.("helpcenter:open", {
+                                                                    to: id,
+                                                                    from: origin,
+                                                                });
+                                                            }, style: {
+                                                                width: "100%",
+                                                                backgroundColor: tabBackgroundColor,
+                                                                color: tabButtonColor,
+                                                            }, "aria-label": text, children: text }) }, name));
+                                                }) }) }) }), _jsx("li", { style: { position: "absolute", bottom: "20px" }, children: _jsx("ul", { children: configuration.links?.map((link) => (_jsx(SideNavMenuItem, { href: link.link, 
+                                                // eslint-disable-next-line
+                                                // @ts-ignore
+                                                target: "_blank", children: _jsx("span", { className: "cds--link", children: link.label }) }, link.label.split(" ").join("-").toLowerCase()))) }) })] }) }), content, _jsx("div", { style: { display: activeTab === "feedback" ? "block" : "none" }, children: _jsx(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
                                     header = head;
                                 }, salesPlanType: organization?.salesPlan?.type ?? "" }) })] }) }), persona.complete && activeTab === "recommendations" && (_jsx(StyledModalFooter, { "$hcTheme": theme, children: _jsx("div", { children: _jsx(Button, { kind: "tertiary", renderIcon: Undo, onClick: onRequestRetakeSurvey, size: "sm", style: {
                             maxWidth: "200px",

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

@@ -1,15 +1,43 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { useState } from "react";
 import { OnboardingSurvey } from "./onboardingSurvey";
-import { submitSurvey, updatePersona } from "../../api/help-center";
+import { defaultOnboardingConfig } from "./defaultOnboardingConfig";
+import { getOnboardingConfig, submitSurvey, updatePersona, } from "../../api/help-center";
 import { useC3UserConfiguration, } from "../c3-user-configuration/c3-user-configuration-provider";
-import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
 export const C3OnboardingSurvey = (props) => {
     const { userToken, decodedToken, activeOrganizationId, decodedAudience } = useC3UserConfiguration();
-    const { persona, setPersona, onboadingConfig, isLoadingOnboardingConfig } = useC3HelpCenter();
-    const userId = decodedToken?.userId ?? "";
-    const email = decodedToken?.meta?.email ?? "";
-    const givenName = decodedToken?.meta?.given_name ?? "";
+    const [persona, setPersona] = useState(props.persona);
+    const [userId, setUserId] = useState("");
+    const [onboardConfig, setOnboardConfig] = useState(defaultOnboardingConfig);
+    const [isLoadingConfig, setIsLoadingConfig] = useState(false);
+    const [givenName, setGivenName] = useState("");
+    const [email, setEmail] = useState("");
+    React.useEffect(() => {
+        if (!decodedToken || !decodedAudience)
+            return;
+        (async () => {
+            const { userId, meta, persona } = decodedToken;
+            if (props.persona === undefined && persona) {
+                setPersona(persona);
+            }
+            if (meta) {
+                setGivenName(meta.given_name);
+                setEmail(meta.email);
+            }
+            if (userId)
+                setUserId(userId);
+            setOnboardConfig(defaultOnboardingConfig);
+            setIsLoadingConfig(true);
+            const { result: config } = await getOnboardingConfig({
+                audience: decodedAudience,
+                camundaAuth: { token: userToken },
+                orgId: activeOrganizationId,
+            });
+            if (config)
+                setOnboardConfig(config);
+            setIsLoadingConfig(false);
+        })();
+    }, [JSON.stringify(decodedToken), decodedAudience]);
     React.useEffect(() => {
         setPersona(props.persona);
     }, [props.persona]);
@@ -57,5 +85,5 @@ export const C3OnboardingSurvey = (props) => {
         setPersona(newPersona);
         props.personaCallback(newPersona);
     };
-    return (_jsx(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboadingConfig, isLoadingConfig: isLoadingOnboardingConfig, modal: props.modal, origin: props.origin }));
+    return (_jsx(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboardConfig, isLoadingConfig: isLoadingConfig, modal: props.modal, origin: props.origin }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.20.3",
+  "version": "0.20.4",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"