@camunda/camunda-composite-components 0.19.1 → 0.20.1

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.19.1",
+    "version": "0.20.1",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
@@ -104,8 +104,8 @@
     "peerDependencies": {
         "@carbon/react": "1.x",
         "event-source-polyfill": "1.0.x",
-        "react": "18.x",
-        "react-dom": "18.x",
+        "react": "18.x || 19.x",
+        "react-dom": "18.x || 19.x",
         "styled-components": "5.x || 6.x"
     },
     "description": "Camunda Composite Components",

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

@@ -18,6 +18,7 @@ export interface RequestPayload {
         [key: string]: unknown;
     };
     enableLogs?: boolean;
+    signal?: AbortSignal;
 }
 export type RequestResponse<R = undefined> = {
     success: boolean;

package/lib/esm/src/api/api.js

@@ -54,6 +54,7 @@ export const request = async (payload) => {
             method: payload.method ? payload.method.toUpperCase() : "GET",
             headers,
             body,
+            signal: payload?.signal,
         });
         if (response.status >= 400) {
             if (payload.enableLogs)

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

@@ -12,6 +12,7 @@ export interface Endpoints {
 export declare const NOTIFICATIONS: Endpoint;
 export declare const ACCOUNTS: Endpoint;
 export declare const CONSOLE: Endpoint;
+export declare const STATUS: Endpoint;
 export type Stage = "dev" | "int" | "prod";
 export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string;
 export declare function getEndpointByOptions(options: {

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

@@ -16,6 +16,12 @@ export const CONSOLE = {
     int: "https://console.cloud.ultrawombat.com",
     prod: "https://console.cloud.camunda.io",
 };
+export const STATUS = {
+    id: "status",
+    dev: "https://camundaultrawombat.statuspage.io/",
+    int: "https://camundaultrawombat.statuspage.io/",
+    prod: "https://status.camunda.io",
+};
 export function getEndpoint(stage, endpoint) {
     switch (stage) {
         case "dev":

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

@@ -3,7 +3,7 @@ import { Persona, TileConfig, WpCardType } from "../components/c3-help-center/c3
 import { OnboardingConfig } from "../components/c3-onboarding-survey/defaultOnboardingConfig";
 import { RequestPayload, RequestResponse } from "./api";
 export declare const getConfig: (accessToken: string, audience: string, orgId: string) => Promise<RequestResponse<HelpCenterConfig | null>>;
-export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, }: {
+export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, signal, }: {
     accessToken: string;
     tileConfig: TileConfig[];
     cloudAudience: string;
@@ -13,6 +13,7 @@ export declare const getTiles: ({ accessToken, tileConfig, salesPlanType, cluste
     clusterIds: string[];
     salesPlanType: string;
     flags: string[];
+    signal?: AbortSignal | undefined;
 }) => Promise<RequestResponse<WpCardType[]>>;
 export declare const getOnboardingConfig: ({ camundaAuth, audience, orgId, }: {
     audience: string;

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

@@ -8,13 +8,17 @@ export const getConfig = async (accessToken, audience, orgId) => {
         },
     });
 };
-export const getTiles = async ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, }) => {
+export const getTiles = async ({ accessToken, tileConfig, salesPlanType, clusterIds, persona, flags, cloudAudience, signal, }) => {
     const availableTileTypes = recommendations(persona, flags, tileConfig, salesPlanType, clusterIds?.length > 0);
-    return await request({
-        url: `https://helpcenter.${cloudAudience}/cards?card_id=${availableTileTypes.join(",")}`,
-        responseType: "json",
-        camundaAuth: { token: accessToken },
-    });
+    if (availableTileTypes.length) {
+        return await request({
+            url: `https://helpcenter.${cloudAudience}/cards?card_id=${availableTileTypes.join(",")}`,
+            responseType: "json",
+            camundaAuth: { token: accessToken },
+            signal,
+        });
+    }
+    return { success: true };
 };
 export const getOnboardingConfig = ({ camundaAuth, audience, orgId, }) => request({
     url: `https://helpcenter.${audience}/survey/config/${orgId}`,

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

@@ -0,0 +1,7 @@
+export declare class StatusService {
+    static camundaStatus(decodedAudience: string): Promise<{
+        error: boolean;
+        description: string;
+        endpoint: string;
+    }>;
+}

package/lib/esm/src/api/status.js

@@ -0,0 +1,41 @@
+import { request } from "./api";
+import { getEndpoint, STATUS } from "./endpoints.const";
+export class StatusService {
+    static async camundaStatus(decodedAudience) {
+        try {
+            let stage = "dev";
+            switch (decodedAudience) {
+                case "cloud.dev.ultrawombat.com":
+                    stage = "dev";
+                    break;
+                case "cloud.ultrawombat.com":
+                    stage = "int";
+                    break;
+                default:
+                    stage = "prod";
+                    break;
+            }
+            const endpoint = getEndpoint(stage, STATUS);
+            const resp = await request({
+                url: `${endpoint}/api/v2/status.json`,
+                method: "get",
+                type: "json",
+                responseType: "json",
+            });
+            let result = resp.result;
+            if (!resp.success ||
+                !result?.status.indicator ||
+                !result?.status.description) {
+                return { error: false, description: "", endpoint };
+            }
+            return {
+                error: result?.status.indicator === "major",
+                description: result?.status.description ?? "",
+                endpoint,
+            };
+        }
+        catch (_error) {
+            return { error: false, description: "", endpoint: STATUS.dev };
+        }
+    }
+}

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser-page.js

@@ -1,39 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { C3AppTeaser } from "./c3-app-teaser";
 import { canCreateCluster, canUpgradePlan, isTrialExpired, } from "../../utils/camunda";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { Loading } from "@carbon/react";
-import { getStartingPrice } from "../../api/organizations";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 export const C3AppTeaserPage = ({ appName, redirectToClusters, redirectToCreateCluster, redirectToCheckout, }) => {
-    const { activeOrganizationId, decodedAudience, domain, analyticsTrack, userToken, } = useC3UserConfiguration();
+    const { activeOrganizationId, domain, analyticsTrack } = useC3UserConfiguration();
     const { activeOrg, clusters } = useC3Profile();
-    const [pricing, setPricing] = useState(null);
-    const [hasTrialExpired, setHasTrialExpired] = useState(false);
-    const [hasSleepingCluster, setHasSleepingCluster] = useState(false);
-    useEffect(() => {
-        if (!userToken || !decodedAudience)
-            return;
-        (async () => {
-            const { result } = await getStartingPrice({
-                token: userToken,
-                audience: decodedAudience,
-            });
-            if (result) {
-                setPricing(result);
-            }
-        })();
-    }, [userToken, decodedAudience]);
-    useEffect(() => {
-        if (activeOrg)
-            setHasTrialExpired(isTrialExpired(activeOrg));
-    }, [activeOrg]);
-    useEffect(() => {
-        if (clusters && appName) {
-            const sleepingCluster = clusters.find((c) => c.status[appName] === "Suspended");
-            setHasSleepingCluster(!!sleepingCluster);
-        }
-    }, [clusters, appName]);
+    const hasTrialExpired = (activeOrg && isTrialExpired(activeOrg)) ?? false;
+    const sleepingCluster = clusters && clusters.find((c) => c.status[appName] === "Suspended");
+    const hasSleepingCluster = (clusters && appName && !!sleepingCluster) ?? false;
     const onClickCta = () => {
         if (hasTrialExpired) {
             analyticsTrack?.("checkout:open", { appTeaser: appName });
@@ -63,5 +39,5 @@ export const C3AppTeaserPage = ({ appName, redirectToClusters, redirectToCreateC
             }
         }
     };
-    return activeOrg && appName ? (React.createElement(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: hasTrialExpired, hasSleepingCluster: hasSleepingCluster, onClickCta: onClickCta, pricing: pricing })) : (React.createElement(Loading, { withOverlay: true }));
+    return activeOrg && appName ? (React.createElement(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: hasTrialExpired, hasSleepingCluster: hasSleepingCluster, onClickCta: onClickCta, pricing: null })) : (React.createElement(Loading, { withOverlay: true }));
 };

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser.js

@@ -1,24 +1,24 @@
 import React from "react";
-import { Add, ArrowUp, Settings } from "@carbon/react/icons";
+import { Add, Settings } from "@carbon/react/icons";
 import { AppTeaserCards } from "./app-teaser-cards";
 import { getReadableAppName } from "../../utils/camunda";
 import { DefaultStyleWrapper } from "../styles";
 import { appTeaserCardsConfig } from "./app-teaser-cards-config";
 export const teaserApps = ["tasklist", "operate", "optimize"];
-export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster, canUpgradePlan, canCreateCluster, onClickCta, pricing, }) => {
+export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster, canUpgradePlan, canCreateCluster, onClickCta, }) => {
     const appName = app ? getReadableAppName(app) : "";
     const variants = {
         upgrade: {
             title: `Upgrade your plan${appName ? ` to use ${appName}` : ""}`,
             subtitle: `Creating a cluster and accessing the ${appName} app and features
 			are not available with the Modeling plan`,
-            ctaText: "Upgrade plan",
-            ctaIcon: ArrowUp,
+            ctaText: "Contact us",
+            ctaIcon: null,
             disabledMessage: "Contact your admin to upgrade",
         },
         manageClusters: {
             title: `Resume your cluster${appName ? ` to use ${appName}` : ""}`,
-            subtitle: `The ${appName} app requires an active 
+            subtitle: `The ${appName} app requires an active
 			cluster to run.`,
             ctaText: "Manage clusters",
             ctaIcon: Settings,
@@ -38,21 +38,8 @@ export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster,
         : hasSleepingCluster
             ? variants.manageClusters
             : variants.createClusters;
-    const currency = pricing?.currency === "€" ? "EUR" : pricing?.currency;
-    const locale = navigator.language || "en";
-    const price = pricing?.amount &&
-        currency &&
-        locale &&
-        Intl.NumberFormat(locale, {
-            style: "currency",
-            currency,
-            minimumFractionDigits: 0,
-            maximumFractionDigits: pricing.amount % 1 === 0 ? 0 : 2,
-        }).format(pricing.amount);
     return (React.createElement(DefaultStyleWrapper, null,
-        React.createElement(AppTeaserCards, { title: variant.title, subtitle: React.createElement(React.Fragment, null, variant.subtitle), subtext: hasTrialExpired && price
-                ? `Plans starting at ${price}${pricing.interval ? `/${pricing.interval}` : ""}`
-                : "", cta: {
+        React.createElement(AppTeaserCards, { title: variant.title, subtitle: React.createElement(React.Fragment, null, variant.subtitle), subtext: "", cta: {
                 action: onClickCta,
                 text: variant.ctaText,
                 renderIcon: variant.ctaIcon,

package/lib/esm/src/components/c3-data-table/c3-data-table.js

@@ -325,7 +325,8 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                         }
                         else if (toolbarElement.type === "search") {
                             const searchElement = toolbarElement;
-                            const defaultValue = currentFilters.current.get(searchElement.id);
+                            const filterId = searchElement.id ?? searchElement.queryName;
+                            const defaultValue = currentFilters.current.get(filterId);
                             toolbarComponents.push(React.createElement(TableToolbarSearch, { key: searchElement.id, onFocus: (event, handleExpand) => {
                                     handleExpand(event, true);
                                     if (searchElement.queryName) {
@@ -337,16 +338,15 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                                     }
                                     updateFilterURLState(searchElement.queryName ?? searchElement.id, event.target.value);
                                 }, onChange: (event) => {
-                                    currentFilters.current.set(searchElement.id, {
-                                        searchTerm: event.target?.value ??
-                                            getQueryKey(searchElement.queryName ?? ""),
+                                    currentFilters.current.set(filterId, {
+                                        searchTerm: event.target?.value ?? defaultValue?.searchTerm,
                                     });
                                     updateFilteredData();
                                 } }));
                         }
                         else if (toolbarElement.type === "button") {
                             const buttonElement = toolbarElement;
-                            toolbarComponents.push(React.createElement(Button, { key: buttonElement.id, onClick: () => {
+                            toolbarComponents.push(React.createElement(Button, { id: buttonElement.id, key: buttonElement.id, onClick: () => {
                                     if (buttonElement.onClick) {
                                         buttonElement.onClick();
                                     }
@@ -444,7 +444,11 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                 headerKeys.map((key) => {
                     return rowCell(key);
                 }),
-                hasActions && (React.createElement(TableCell, { style: { textAlign: "right" } }, renderActions(row)))));
+                hasActions && (React.createElement(TableCell, { style: { textAlign: "right" } },
+                    React.createElement("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                        } }, renderActions(row))))));
             if (row.expansion) {
                 rowComponent = (React.createElement(React.Fragment, { key: row.id },
                     React.createElement(TableExpandRow, { key: row.id, isExpanded: isRowExpanded(row), "aria-label": `row ${row.id}`, onExpand: () => {

package/lib/esm/src/components/c3-empty-state/c3-empty-state.js

@@ -1,12 +1,23 @@
 import { Stack, Tile, Button, Link, MenuButton, MenuItem } from "@carbon/react";
+import styled from "styled-components";
 import React from "react";
+const ResponsiveStack = styled.div `
+	display: flex;
+	flex-direction: ${({ orientation }) => `${orientation === "vertical" ? "column" : "row"}`};
+	gap: ${({ gap }) => `${typeof gap === "string" ? gap : `${gap ?? 0 * 16}px`}`};
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+	}
+`;
 export const C3EmptyState = ({ icon, heading, description, button, link, }) => (React.createElement(Tile, { style: {
         paddingLeft: "5rem",
         paddingTop: "3rem",
         paddingBottom: "3rem",
     } },
-    React.createElement(Stack, { orientation: "horizontal", gap: 6 },
-        icon && React.createElement("img", { src: icon.path, alt: icon.altText }),
+    React.createElement(ResponsiveStack, { orientation: "horizontal", gap: "1.5rem" },
+        icon && (React.createElement("div", { style: { maxWidth: "80px" } },
+            React.createElement("img", { src: icon.path, alt: icon.altText }))),
         React.createElement(Stack, { gap: 3 },
             React.createElement("h2", null, heading),
             React.createElement(Stack, { gap: 6 },

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

@@ -1,4 +1,7 @@
 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"
@@ -13,6 +16,20 @@ 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,4 +1,9 @@
-import React, { useEffect, useState } from "react";
+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";
 export var HelpCenterHintType;
 (function (HelpCenterHintType) {
     HelpCenterHintType["HelpCenter"] = "help-center";
@@ -13,6 +18,18 @@ 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);
@@ -20,10 +37,97 @@ export const C3HelpCenterProvider = ({ children }) => {
     const [showHint, setShowHint] = useState(false);
     const [showHintOnClose, setShowHintOnClose] = useState(false);
     const [hintType, setHintType] = useState(HelpCenterHintType.Onboarding);
-    const openHelpCenter = (showTabId) => {
+    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) => {
         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);
@@ -47,6 +151,18 @@ export const C3HelpCenterProvider = ({ children }) => {
             setShowHintOnClose,
             hintType,
             setHintType,
+            helpCenterConfig,
+            persona,
+            setPersona,
+            rawTabTiles,
+            isLoadingTiles,
+            updateFlags,
+            showSurvey,
+            setShowSurvey,
+            onboadingConfig,
+            isLoadingOnboardingConfig,
+            updateAutoStartSurvey,
+            getOnboadingSurveyConfig,
         } }, children));
 };
 export const useC3HelpCenter = () => React.useContext(C3HelpCenterContext);

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

@@ -9,8 +9,6 @@ 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>;