@camunda/camunda-composite-components 0.1.5-rc.8 → 0.2.0

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

@@ -4,21 +4,21 @@ export declare class HttpError extends Error {
     constructor(message: string, status: number);
 }
 export interface RequestPayload {
+    url: string;
     base?: "notifications" | "accounts";
     stage?: Stage;
     endpoints?: Endpoints;
-    url: string;
-    method: "get" | "post" | "put" | "delete" | "patch";
+    method?: "get" | "post" | "put" | "delete" | "patch";
     headers?: {
         [key: string]: string;
     };
-    type?: "json" | "text" | "none";
+    type?: "json" | "text" | "form" | "none";
     responseType?: "json" | "text" | "none";
     camundaAuth?: {
         token: string;
-        refreshTokenMethod: () => Promise<string>;
+        refreshTokenMethod?: () => Promise<string>;
     };
-    body?: {
+    body?: string | FormData | {
         [key: string]: unknown;
     };
 }

package/lib/esm/api/api.js

@@ -11,7 +11,7 @@ export async function request(payload) {
     const headers = {};
     if (payload.camundaAuth) {
         if (JWTUtils.isExpired(payload.camundaAuth.token)) {
-            const newToken = await payload.camundaAuth.refreshTokenMethod();
+            const newToken = await payload.camundaAuth?.refreshTokenMethod?.();
             headers.Authorization = `Bearer ${newToken}`;
         }
         else {
@@ -29,7 +29,11 @@ export async function request(payload) {
                 break;
         }
     }
-    const body = payload.body ? JSON.stringify(payload.body) : undefined;
+    const body = payload.body && type === "json"
+        ? JSON.stringify(payload.body)
+        : payload.body instanceof FormData
+            ? payload.body
+            : undefined;
     let base;
     if (payload.base) {
         switch (payload.base) {
@@ -52,7 +56,7 @@ export async function request(payload) {
     }
     const url = base ? `${base}/${payload.url}` : payload.url;
     const response = await fetch(url, {
-        method: payload.method.toUpperCase(),
+        method: payload.method ? payload.method.toUpperCase() : "GET",
         headers,
         body,
     });
@@ -69,7 +73,7 @@ export async function request(payload) {
     const responseType = payload.responseType ?? type;
     switch (responseType) {
         case "json":
-            return response.text().then((text) => (text ? JSON.parse(text) : {}));
+            return response.json();
         case "text":
             return response.text();
         default:

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

@@ -0,0 +1,44 @@
+import { HelpCenterConfig } from "../components/c3-help-center/defaultHelpCenterConfig";
+import { Cluster, Organization, 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;
+    tileConfig: TileConfig[];
+    cloudAudience: string;
+    persona: {
+        [id: string]: unknown;
+    };
+    clusterIds: string[];
+    email: string;
+    currentOrgId: string;
+    salesPlanType: string;
+    flags: string[];
+}) => Promise<WpCardType[]>;
+export declare const getOnboardingConfig: ({ camundaAuth, audience, }: {
+    audience: string;
+    camundaAuth: RequestPayload["camundaAuth"];
+}) => Promise<OnboardingConfig>;
+export declare const updatePersona: ({ newPersona, audience, accessToken, orgId, userId, }: {
+    newPersona: Persona;
+    audience: string;
+    orgId: string;
+    userId: string;
+    accessToken: string;
+}) => Promise<void>;
+export declare const submitSurvey: ({ audience, token, data, }: {
+    audience: string;
+    token: string;
+    data: Persona & {
+        email: string;
+        orgUuid: string;
+    };
+}) => Promise<void>;
+export declare const submitFeedback: ({ token, audience, formData, }: {
+    token: string;
+    audience: string;
+    formData: FormData;
+}) => Promise<any>;

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

@@ -0,0 +1,95 @@
+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}/api/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}/api/orgs/${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`, {
+            headers: {
+                authorization: `Bearer ${accessToken}`,
+                "Content-Type": "application/json",
+            },
+        });
+        return response.json();
+    }
+    catch (error) {
+        console.error(error);
+    }
+    return null;
+};
+export const getTiles = async ({ accessToken, tileConfig, salesPlanType, clusterIds, currentOrgId, persona, flags, email, cloudAudience, }) => {
+    const availableTileTypes = recommendations(persona, flags, tileConfig, salesPlanType, clusterIds?.length > 0);
+    let cards = await request({
+        url: `https://helpcenter.${cloudAudience}/cards?card_id=${availableTileTypes.join(",")}`,
+        responseType: "json",
+        camundaAuth: { token: accessToken },
+    });
+    cards = cards.map((card) => {
+        card.link = card.link?.replaceAll("{cloudAudience}", cloudAudience);
+        card.link = card.link?.replaceAll("{currentOrgId}", currentOrgId);
+        card.link = card.link?.replaceAll("{clusterId}", clusterIds[0]);
+        card.link = card.link?.replaceAll("{email}", email);
+        return card;
+    });
+    return cards;
+};
+export const getOnboardingConfig = ({ camundaAuth, audience, }) => request({
+    url: `https://helpcenter.${audience}/survey/config`,
+    camundaAuth,
+    type: "json",
+});
+export const updatePersona = async ({ newPersona, audience, accessToken, orgId, userId, }) => request({
+    url: `https://helpcenter.${audience}/persona`,
+    method: "patch",
+    camundaAuth: { token: accessToken },
+    type: "json",
+    body: { persona: newPersona, userId, orgId },
+    responseType: "text",
+});
+export const submitSurvey = async ({ audience, token, data, }) => request({
+    method: "post",
+    url: `https://helpcenter.${audience}/survey/submit`,
+    camundaAuth: { token },
+    type: "json",
+    body: { data },
+    responseType: "text",
+});
+export const submitFeedback = async ({ token, audience, formData, }) => request({
+    method: "post",
+    url: `https://feedback.${audience}/submit`,
+    camundaAuth: { token },
+    body: formData,
+    type: "form",
+    responseType: "text",
+});

package/lib/esm/api/notifications.js

@@ -37,6 +37,7 @@ export class NotificationService {
             body: {
                 id: eventOptions.id,
             },
+            type: "json",
             responseType: "text",
         })
             .then(() => {
@@ -82,6 +83,7 @@ export class NotificationService {
             body: {
                 uuids: notificationIds,
             },
+            type: "json",
         })
             .then(() => {
             // do nothing

package/lib/esm/api/profile.js

@@ -21,6 +21,7 @@ export const updateTheme = async ({ endpoints, stage, userToken, getNewUserToken
             camundaAuth: { token: userToken, refreshTokenMethod: getNewUserToken },
             url: `external/user/theme`,
             body: { theme },
+            responseType: "text",
         });
     }
     catch (error) {

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

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { Persona } from "./c3-help-center.types";
+import { Dict } from "mixpanel-browser";
+export interface C3HelpCenterProps {
+    isOpen: boolean;
+    origin: "console" | "webmodeler" | "operate" | "tasklist" | "optimize";
+    theme?: "light" | "dark";
+    flags?: string[];
+    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/components/c3-help-center/c3-help-center.js

@@ -0,0 +1,137 @@
+import { ComposedModal, Layer } from "@carbon/react";
+import React, { 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 { decodeJWT } from "../c3-user-configuration/authToken";
+import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequestClose, mixpanelTrack, onRequestOpen, theme = "light", onPersonaChange, activeTab, }) => {
+    const { userToken, activeOrganizationId } = useC3UserConfiguration() || {};
+    const [persona, setPersona] = useState(undefined);
+    const [userId, setUserId] = useState("");
+    const [token, setToken] = 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);
+    const fetchData = async () => {
+        const decodedToken = decodeJWT(userToken);
+        if (!decodedToken)
+            return;
+        const { userId, meta, audience, persona } = decodedToken;
+        if (persona !== undefined) {
+            setPersona(persona);
+            if (persona.wasShown) {
+                setShowSurvey(false);
+            }
+        }
+        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)) {
+            onRequestOpen?.();
+        }
+        if (decodedAudience && userToken) {
+            const onboardConfig = await getConfig(userToken, decodedAudience);
+            setHelpCenterConfig(onboardConfig || defaultHelpCenterConfig);
+        }
+    };
+    React.useEffect(() => {
+        if (token !== userToken && !!userToken) {
+            setToken(userToken);
+            fetchData();
+        }
+    }, [userToken]);
+    React.useEffect(() => {
+        const tabs = helpCenterConfig.tabs;
+        const firstTab = tabs[0].id;
+        if (isOpen) {
+            mixpanelTrack?.(`helpcenter:open`, {
+                to: activeTab ?? firstTab,
+                from: origin,
+            });
+        }
+        else {
+            setShowSurvey(false);
+        }
+    }, [isOpen]);
+    const onRequestRetakeSurvey = () => {
+        const newPersona = {
+            ...persona,
+            ...{ nextStep: 0, complete: false },
+        };
+        setPersona(newPersona);
+        updatePersona({
+            newPersona,
+            audience,
+            accessToken: userToken || "",
+            orgId: activeOrganizationId || "",
+            userId,
+        });
+        onPersonaChange?.(newPersona);
+        setShowSurvey(true);
+    };
+    const onRequestResumeSurvey = () => {
+        if (!userToken || !activeOrganizationId)
+            return;
+        const newPersona = { ...persona, ...{ complete: false, wasShown: true } };
+        setPersona(newPersona);
+        updatePersona({
+            newPersona,
+            audience,
+            accessToken: userToken,
+            orgId: activeOrganizationId,
+            userId,
+        });
+        onPersonaChange?.(newPersona);
+        setShowSurvey(true);
+    };
+    const onRequestSkipSurvey = () => {
+        if (!userToken || !activeOrganizationId)
+            return;
+        const newPersona = { ...persona, ...{ complete: false, wasShown: true } };
+        setPersona(newPersona);
+        updatePersona({
+            newPersona,
+            audience,
+            accessToken: userToken,
+            orgId: activeOrganizationId,
+            userId,
+        });
+        onPersonaChange?.(newPersona);
+        setShowSurvey(false);
+    };
+    const personaCallback = (newPersona) => {
+        setPersona(newPersona);
+        onPersonaChange?.(newPersona);
+        if (newPersona.complete) {
+            setShowSurvey(false);
+        }
+    };
+    const closeFn = () => {
+        if (persona && userToken && activeOrganizationId) {
+            updatePersona({
+                newPersona: persona,
+                audience,
+                accessToken: userToken,
+                orgId: activeOrganizationId,
+                userId,
+            });
+        }
+        onRequestClose?.();
+    };
+    return (React.createElement(Layer, null,
+        React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, showSurvey || !persona ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: theme, 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: theme, origin: origin, initialTab: activeTab })))));
+};

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

@@ -0,0 +1,54 @@
+import { TabType } from "./tabs/tabContent";
+export interface Persona {
+    role?: string;
+    company?: string;
+    interestedInExecutingProcess?: boolean;
+    goal?: string[];
+    orchestrate?: string[];
+    client?: string;
+    clientToSupport?: string;
+    bpmnExperience?: string;
+    camunda7Experience?: string;
+    nextStep?: number;
+    complete?: boolean;
+    wasShown?: boolean;
+    [attribute: string]: unknown;
+}
+export interface WpCardType {
+    image: string;
+    title: string;
+    description: string;
+    timeToComplete?: string;
+    cta?: string;
+    link?: string;
+    card_id: string;
+    mixpanelId: string;
+}
+export interface Prerequestite {
+    id: string;
+    value: string;
+    not: boolean;
+}
+export interface TileConfig {
+    id: string;
+    bool: string;
+    prerequestites: Prerequestite[] | boolean;
+}
+export type Cluster = {
+    uuid: string;
+};
+export type Tab = {
+    id: string;
+    label: string;
+    title: string;
+    tiles: TileConfig[];
+    tiletype: TabType;
+};
+export type Organization = {
+    uuid: string;
+    organizationToSalesPlan?: {
+        salesPlan?: {
+            salesPlanType: string;
+        };
+    };
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import { Tab } from "./c3-help-center.types";
+export type HelpCenterConfig = {
+    tabs: Tab[];
+    links: {
+        label: string;
+        link: string;
+        id: string;
+    }[];
+};
+export declare const defaultHelpCenterConfig: HelpCenterConfig;

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

@@ -0,0 +1,12 @@
+export const defaultHelpCenterConfig = {
+    tabs: [
+        {
+            id: "recommendations",
+            label: "Your recommendations",
+            title: "",
+            tiletype: "grid",
+            tiles: [],
+        },
+    ],
+    links: [],
+};

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

@@ -0,0 +1,23 @@
+import { ModalBodyProps, ModalHeaderProps } from "@carbon/react";
+import { Dict } from "mixpanel-browser";
+import { FC } from "react";
+import { Cluster, Organization, Persona } from "./c3-help-center.types";
+import { HelpCenterConfig } from "./defaultHelpCenterConfig";
+export declare const StyledModalHeader: FC<ModalHeaderProps>;
+export declare const StyledModalBody: FC<ModalBodyProps>;
+export declare const HelpCenter: FC<{
+    configuration: HelpCenterConfig;
+    organization: Organization;
+    persona: Persona;
+    email: string;
+    audience: string;
+    clusters: Cluster[];
+    onRequestResumeSurvey: () => void;
+    onRequestRetakeSurvey: () => void;
+    onRequestClose: () => void;
+    theme: string;
+    origin: string;
+    initialTab: string | undefined;
+    flags?: string[];
+    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+}>;

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

@@ -0,0 +1,173 @@
+import { Button, Link, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
+import { Undo } from "@carbon/react/icons";
+import React, { 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 { body01, headings } from "../styles";
+import styled from "styled-components";
+export const StyledModalHeader = styled(ModalHeader) `
+	${headings}
+`;
+export const StyledModalBody = styled(ModalBody) `
+	${headings}
+
+	p {
+		${body01}
+	}
+`;
+export const HelpCenter = ({ configuration, organization, persona, email, audience, clusters, flags = [], onRequestResumeSurvey, onRequestRetakeSurvey, onRequestClose, mixpanelTrack, theme, origin, initialTab, }) => {
+    const { tabs } = configuration;
+    const firstTab = tabs[0].id;
+    const { userToken: token } = useC3UserConfiguration() || {};
+    const [activeTab, setActiveTab] = useState(firstTab);
+    const [tabTiles, setTabTiles] = useState({});
+    let header = "";
+    let content = React.createElement(React.Fragment, null);
+    React.useEffect(() => {
+        ;
+        (async () => {
+            const tiles = {};
+            for (const singleTab of tabs) {
+                if (token) {
+                    tiles[singleTab.id] = await getTiles({
+                        tileConfig: singleTab.tiles,
+                        cloudAudience: audience,
+                        persona,
+                        clusterIds: clusters.map((cluster) => cluster.uuid),
+                        email,
+                        currentOrgId: organization?.uuid ?? "",
+                        salesPlanType: organization?.organizationToSalesPlan?.salesPlan?.salesPlanType ??
+                            "",
+                        flags,
+                        accessToken: token,
+                    });
+                }
+            }
+            setTabTiles(tiles);
+        })();
+    }, [token, persona, audience, organization, clusters, tabs]);
+    React.useEffect(() => {
+        setActiveTab(initialTab ?? firstTab);
+    }, [initialTab]);
+    if (activeTab === "feedback") {
+        header = "Share your feedback";
+        content = (React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
+                header = head;
+            } }));
+    }
+    else if (activeTab === "recommendations" &&
+        Object.keys(tabTiles).length === 0) {
+        header = "";
+        content = (React.createElement("div", { style: {
+                paddingLeft: "256px",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+            } },
+            React.createElement("div", { style: {
+                    height: "200px",
+                    width: "450px",
+                } },
+                React.createElement(Stack, { orientation: "horizontal", gap: 6 },
+                    React.createElement("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                        React.createElement("path", { d: "M22.5379 14.9379C22.5379 9.46436 26.9851 5.0171 32.4587 5.0171C37.9322 5.0171 42.3795 9.46436 42.3795 14.9379C42.3795 20.4115 37.9322 24.8587 32.4587 24.8587C26.9851 24.8587 22.5379 20.3944 22.5379 14.9379ZM53.4976 38.7137L51.445 59H13.4723L11.4197 38.7137H20.5024V34.5743L10 26.86V5H16.3288V23.6443L24.5733 29.6994H41.4045L44.415 33.8046V38.7308L53.4976 38.7137ZM36.1704 48.8568C36.1704 46.8042 34.5112 45.1451 32.4587 45.1451C30.4061 45.1451 28.7469 46.8042 28.7469 48.8568C28.7469 50.9094 30.4061 52.5686 32.4587 52.5686C34.5112 52.5686 36.1704 50.9094 36.1704 48.8568Z", fill: "#FC5D0D" })),
+                    React.createElement(Stack, { gap: 3 },
+                        React.createElement("h2", null, "Personalize your experience"),
+                        React.createElement(Stack, { gap: 6 },
+                            React.createElement("p", { style: { maxWidth: "400px" } }, "Complete a 1-minute survey to access personalized next steps and educational content designed for you"),
+                            React.createElement(Stack, { gap: 3 },
+                                React.createElement(Button, { id: "additional-feedback-button", size: "md", onClick: () => {
+                                        onRequestRetakeSurvey();
+                                    } }, "Start now"))))))));
+    }
+    else {
+        const tab = configuration.tabs.find((tab) => tab.id === activeTab);
+        header = tab?.title ?? "";
+        if (tabTiles[activeTab]) {
+            content = (React.createElement(TabContent, { onboarding: (() => {
+                    if (activeTab === "recommendations") {
+                        return {
+                            complete: persona.complete || false,
+                            resumeSurvey: onRequestResumeSurvey,
+                        };
+                    }
+                    else {
+                        return undefined;
+                    }
+                })(), origin: origin, type: tab?.tiletype || "grid", tiles: tabTiles[activeTab], mixpanelTrack: mixpanelTrack, salesPlanType: organization?.organizationToSalesPlan?.salesPlan?.salesPlanType ??
+                    "" }));
+        }
+    }
+    const tabBar = [
+        ...configuration.tabs.map(({ id, label }) => ({
+            id,
+            name: id,
+            text: label,
+        })),
+        { id: "feedback", name: "feedback", text: "Share your feedback" },
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledModalHeader, { title: "", label: "", closeModal: onRequestClose, style: {
+                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
+                marginBottom: "0",
+            } },
+            React.createElement("h4", { style: { marginLeft: "16rem" } }, header)),
+        React.createElement(StyledModalBody, { style: {
+                height: persona.complete && activeTab === "recommendations"
+                    ? "638px"
+                    : "700px",
+                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
+                marginBottom: 0,
+            } },
+            React.createElement(SideNav, { isFixedNav: true, expanded: true, isChildOfHeader: false, "aria-label": "Side nav" },
+                React.createElement(SideNavItems, null,
+                    React.createElement(SideNavMenuItem, null,
+                        React.createElement("h5", null, "Help Center")),
+                    React.createElement("div", { style: { marginTop: "4px" } },
+                        React.createElement(Stack, null, 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 (React.createElement(Button, { className: active ? "active" : "", kind: "secondary", onClick: () => {
+                                    setActiveTab(name);
+                                    mixpanelTrack?.("helpcenter:open", {
+                                        to: id,
+                                        from: origin,
+                                    });
+                                }, style: {
+                                    width: "100%",
+                                    backgroundColor: tabBackgroundColor,
+                                    color: tabButtonColor,
+                                }, key: name }, text));
+                        }))),
+                    React.createElement("div", { style: { position: "absolute", bottom: "20px" } }, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase() },
+                        React.createElement(Link, { href: link.link, target: "_blank" }, link.label))))))),
+            content),
+        persona.complete && activeTab === "recommendations" && (React.createElement(ModalFooter, { style: {
+                height: "62px",
+                paddingRight: "16px",
+                paddingTop: "16px",
+                paddingBottom: "16px",
+                borderTop: "1px",
+                borderStyle: "solid",
+                borderColor: theme === "light" ? "#E0E0E0" : "#727272",
+                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
+            } },
+            React.createElement("div", null,
+                React.createElement(Button, { kind: "tertiary", renderIcon: Undo, onClick: onRequestRetakeSurvey, size: "sm", style: {
+                        maxWidth: "200px",
+                        height: "32px",
+                        alignItems: "center",
+                        paddingTop: "0px",
+                        paddingBottom: "0px",
+                        marginRight: "6px",
+                    } }, "Retake the survey"))))));
+};

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

@@ -0,0 +1,4 @@
+import { TileConfig } from "./c3-help-center.types";
+export declare const recommendations: (persona: {
+    [id: string]: unknown;
+}, flags: string[], tileConfig: TileConfig[], salesPlanType: string, hasClusters: boolean) => string[];