@camunda/camunda-composite-components 0.1.5-rc.0 → 0.1.5-rc.2

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

@@ -4,11 +4,11 @@ export declare class HttpError extends Error {
     constructor(message: string, status: number);
 }
 export interface RequestPayload {
-    base?: "notifications" | "accounts";
+    url: string;
+    base?: "notifications";
     stage?: Stage;
     endpoints?: Endpoints;
-    url: string;
-    method: "get" | "post" | "put" | "delete" | "patch";
+    method?: "get" | "post" | "put" | "delete" | "patch";
     headers?: {
         [key: string]: string;
     };
@@ -16,9 +16,9 @@ export interface RequestPayload {
     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

@@ -1,4 +1,4 @@
-import { getEndpoint, NOTIFICATIONS, ACCOUNTS, } from "./endpoints.const";
+import { getEndpoint, NOTIFICATIONS } from "./endpoints.const";
 import { JWTUtils } from "./jwt.utils";
 export class HttpError extends Error {
     status;
@@ -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,7 @@ 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) : undefined;
     let base;
     if (payload.base) {
         switch (payload.base) {
@@ -41,18 +41,11 @@ export async function request(payload) {
                     base = getEndpoint(payload.stage, NOTIFICATIONS);
                 }
                 break;
-            case "accounts":
-                if (payload.endpoints?.accounts) {
-                    base = payload.endpoints.accounts;
-                }
-                else if (payload.stage) {
-                    base = getEndpoint(payload.stage, ACCOUNTS);
-                }
         }
     }
     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,
     });

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

@@ -6,10 +6,9 @@ export interface Endpoint {
 }
 export interface Endpoints {
     notifications?: string;
-    accounts?: string;
 }
 export declare const NOTIFICATIONS: Endpoint;
-export declare const ACCOUNTS: Endpoint;
+export declare const HELPCENTER: Endpoint;
 export type Stage = "dev" | "int" | "prod";
 export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string;
 export declare function getEndpointByOptions(options: {

package/lib/esm/api/endpoints.const.js

@@ -4,11 +4,11 @@ export const NOTIFICATIONS = {
     int: "https://notifications.cloud.ultrawombat.com",
     prod: "https://notifications.cloud.camunda.io",
 };
-export const ACCOUNTS = {
-    id: "accounts",
-    dev: "https://accounts.cloud.dev.ultrawombat.com",
-    int: "https://accounts.cloud.ultrawombat.com",
-    prod: "https://accounts.cloud.camunda.io",
+export const HELPCENTER = {
+    id: "help-center",
+    dev: "https://help.cloud.dev.ultrawombat.com",
+    int: "https://notifications.cloud.ultrawombat.com",
+    prod: "https://notifications.cloud.camunda.io",
 };
 export function getEndpoint(stage, endpoint) {
     switch (stage) {
@@ -31,14 +31,6 @@ export function getEndpointByOptions(options) {
             else if (options.stage) {
                 return getEndpoint(options.stage, options.endpoint);
             }
-            break;
-        case "accounts":
-            if (options.endpoints?.accounts) {
-                return options.endpoints.accounts;
-            }
-            else if (options.stage) {
-                return getEndpoint(options.stage, options.endpoint);
-            }
     }
     throw new Error(`Missing stage or notifications endpoint`);
 }

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

@@ -0,0 +1,34 @@
+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: (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,90 @@
+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 (tileConfig, cloudAudience, persona, clusterIds, email, currentOrgId, salesPlanType, flags) => {
+    const availableTileTypes = recommendations(persona, flags, tileConfig, salesPlanType, clusterIds.length > 0);
+    const res = await fetch(`https://camundahelp.wpengine.com/wp-json/camundahelp/v1/cards?card_id=${availableTileTypes.join(",")}`, {
+        method: "GET",
+    });
+    let cards = await res.json();
+    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 },
+});
+export const submitSurvey = async ({ audience, token, data, }) => request({
+    method: "post",
+    url: `https://helpcenter.${audience}/survey/submit`,
+    camundaAuth: { token },
+    type: "json",
+    body: { data },
+});
+export const submitFeedback = async ({ token, audience, formData, }) => request({
+    method: "post",
+    url: `https://feedback.${audience}/submit`,
+    camundaAuth: { token },
+    body: formData,
+});

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/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,132 @@
+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 { useUserConfiguration } 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 } = useUserConfiguration() || {};
+    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;
+        setPersona(persona);
+        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" }, 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;