@camunda/camunda-composite-components 0.1.5-rc.9 → 0.2.1-rc.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,17 @@
+import { FC } from "react";
+import { Persona } from "./c3-help-center.types";
+import { Dict } from "mixpanel-browser";
+import { Theme } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
+export interface C3HelpCenterProps {
+    isOpen: boolean;
+    origin: "console" | "webmodeler" | "operate" | "tasklist" | "optimize";
+    theme?: Theme;
+    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,163 @@
+import { ComposedModal, Layer } from "@carbon/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 { 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";
+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";
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+    const { userToken, activeOrganizationId, handleTheme } = useC3UserConfiguration() || {};
+    const { theme: themeConfig, isEnabled } = useC3Profile();
+    const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
+    const themeRef = useRef();
+    const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
+    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);
+    useEffect(() => {
+        const updateResolvedTheme = ({ matches }) => {
+            if (themeRef.current === "system") {
+                setResolvedTheme(matches ? "light" : "dark");
+            }
+        };
+        window
+            .matchMedia("(prefers-color-scheme: light)")
+            .addEventListener("change", updateResolvedTheme);
+        return () => {
+            window
+                .matchMedia("(prefers-color-scheme: light)")
+                .removeEventListener("change", updateResolvedTheme);
+        };
+    }, []);
+    useEffect(() => {
+        const newTheme = themeHandlingEnabled ? themeConfig : theme;
+        themeRef.current = newTheme;
+        setResolvedTheme(resolveTheme(newTheme || "light"));
+    }, [theme, themeConfig, isOpen]);
+    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: 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 })))));
+};

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;
+}>;