@camunda/camunda-composite-components 0.22.3 → 0.22.5

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

@@ -0,0 +1,170 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import { request } from './api.js';
+import { getEndpointByOptions, NOTIFICATIONS } from './endpoints.const.js';
+export class NotificationService {
+    static async getNotifications(options) {
+        return await request({
+            method: 'get',
+            base: 'notifications',
+            stage: options.stage,
+            endpoints: options.endpoints,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/orgs/${options.activeOrganizationId}`,
+        });
+    }
+    static sendAnalyticsEvent(options, eventOptions) {
+        request({
+            method: 'post',
+            base: 'notifications',
+            stage: options.stage,
+            endpoints: options.endpoints,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `analytics/${options.activeOrganizationId}/${eventOptions.event}`,
+            body: {
+                id: eventOptions.id,
+            },
+            type: 'json',
+            responseType: 'text',
+        });
+    }
+    static changeState(options, notificationId, operation) {
+        request({
+            method: 'patch',
+            base: 'notifications',
+            stage: options.stage,
+            endpoints: options.endpoints,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/${notificationId}/${operation}`,
+        });
+    }
+    static markManyAsRead(options, notificationIds) {
+        if (notificationIds.length === 0) {
+            return;
+        }
+        request({
+            method: 'patch',
+            base: 'notifications',
+            stage: options.stage,
+            endpoints: options.endpoints,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/batch/state/read`,
+            body: {
+                uuids: notificationIds,
+            },
+            type: 'json',
+        });
+    }
+    static dismissAll(options, orgId) {
+        if (!orgId) {
+            return;
+        }
+        request({
+            method: 'patch',
+            base: 'notifications',
+            stage: options.stage,
+            endpoints: options.endpoints,
+            camundaAuth: {
+                token: options.userToken,
+                refreshTokenMethod: options.getNewUserToken,
+            },
+            url: `notifications/dismissAll?orgId=${orgId}`,
+            type: 'json',
+        });
+    }
+    static notificationsStream(options, handler) {
+        const baseUrl = getEndpointByOptions({
+            ...options,
+            endpoint: NOTIFICATIONS,
+        });
+        try {
+            const source = new EventSourcePolyfill(`${baseUrl}/notifications/events`, {
+                headers: {
+                    authorization: `Bearer ${options.userToken}`,
+                },
+                heartbeatTimeout: 1000 * 60 * 60,
+            });
+            source.onmessage = (event) => {
+                try {
+                    const notification = JSON.parse(event.data);
+                    if (!notification.keepAlive) {
+                        handler(notification);
+                    }
+                }
+                catch (error) {
+                    if (options.enableLogs)
+                        console.error(`Failed to handle SSE event`, { error });
+                }
+            };
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            source.onerror = (_event) => {
+                // ignore
+            };
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        }
+        catch (_error) {
+            // ignore
+        }
+    }
+    // updates <allNotifications> with <newNotification>
+    // if <newNotification> is read or new, it will be added to <allNotifications>
+    // if <newNotification> is dismissed, it will be removed from <allNotifications>
+    static updateNotifications(allNotifications, newNotification) {
+        const updatedNotifications = allNotifications
+            .slice()
+            .filter((currentNotification) => currentNotification.uuid !== newNotification.uuid);
+        if (newNotification.state === 'read' || newNotification.state === 'new') {
+            updatedNotifications.push(newNotification);
+        }
+        updatedNotifications.sort((a, b) => b.timestamp - a.timestamp);
+        return updatedNotifications;
+    }
+    static updateNotificationState(allNotifications, notificationId, newState) {
+        let updatedNotifications = allNotifications.slice();
+        let foundNotification;
+        switch (newState) {
+            case 'dismiss':
+                updatedNotifications = updatedNotifications.filter((notification) => notification.uuid !== notificationId);
+                break;
+            case 'read':
+                foundNotification = updatedNotifications.find((currentNotification) => currentNotification.uuid === notificationId);
+                if (foundNotification) {
+                    foundNotification.state = newState;
+                }
+                break;
+        }
+        return updatedNotifications;
+    }
+    static updateNotificationStates(allNotifications, notificationIds, newState) {
+        let updatedNotifications = allNotifications.slice();
+        let foundNotifications = [];
+        switch (newState) {
+            case 'dismiss':
+                updatedNotifications = updatedNotifications.filter((notification) => !notificationIds.includes(notification.uuid));
+                break;
+            case 'read':
+                foundNotifications = updatedNotifications.filter((notification) => notificationIds.includes(notification.uuid));
+                foundNotifications.forEach((foundNotification) => {
+                    foundNotification.state = newState;
+                });
+                break;
+        }
+        return updatedNotifications;
+    }
+}

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

@@ -0,0 +1,15 @@
+import { type RequestResponse } from './api';
+export type StartingPrice = {
+    amount: number;
+    currency: string;
+    interval: string;
+};
+export declare const getStartingPrice: ({ token, audience, }: {
+    token: string;
+    audience: string;
+}) => Promise<RequestResponse<StartingPrice>>;
+export declare const leaveOrganization: ({ token, audience, orgId, }: {
+    token: string;
+    audience: string;
+    orgId: string;
+}) => Promise<RequestResponse>;

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

@@ -0,0 +1,16 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { request } from './api.js';
+export const getStartingPrice = async ({ token, audience, }) => request({
+    url: `https://accounts.${audience}/external/organizations/startingPrice`,
+    camundaAuth: { token },
+    responseType: 'json',
+});
+export const leaveOrganization = async ({ token, audience, orgId, }) => request({
+    url: `https://accounts.${audience}/external/organizations/${orgId}/membership`,
+    camundaAuth: { token },
+    method: 'delete',
+});

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

@@ -0,0 +1,20 @@
+import type { C3NotificationsProps } from '../components/c3-navigation/c3-navigation.types';
+import type { Theme } from '../components/c3-user-configuration/c3-profile-provider/c3-profile-provider';
+import type { Cluster, Organization } from '../utils/camunda.types';
+import { type RequestResponse } from './api';
+export type Profile = {
+    theme: Theme;
+};
+export type Token = {
+    sub?: string;
+    'https://camunda.com/settings'?: {
+        theme?: Theme;
+    };
+};
+export declare const getUserTheme: (userToken: string) => Theme | null;
+export type UpdateThemeOptions = C3NotificationsProps & {
+    theme: Profile['theme'];
+};
+export declare const updateTheme: ({ endpoints, stage, userToken, getNewUserToken, theme, }: UpdateThemeOptions) => Promise<void>;
+export declare const getOrgs: (stage: string, accessToken: string) => Promise<RequestResponse<Organization[] | null>>;
+export declare const getClusters: (stage: string, accessToken: string, orgId: string) => Promise<RequestResponse<Cluster[] | null>>;

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

@@ -0,0 +1,48 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { jwtDecode } from 'jwt-decode';
+import { request } from './api.js';
+const decodeJWT = (userToken) => {
+    let decodedToken = {};
+    try {
+        decodedToken = jwtDecode(userToken);
+    }
+    catch (_) {
+        // do nothing
+    }
+    return decodedToken;
+};
+export const getUserTheme = (userToken) => {
+    return userToken
+        ? decodeJWT(userToken)['https://camunda.com/settings']?.theme || null
+        : null;
+};
+export const updateTheme = async ({ endpoints, stage, userToken, getNewUserToken, theme, }) => {
+    await request({
+        method: 'patch',
+        base: 'accounts',
+        stage,
+        endpoints,
+        camundaAuth: { token: userToken, refreshTokenMethod: getNewUserToken },
+        url: `external/user/theme`,
+        body: { theme },
+        responseType: 'text',
+    });
+};
+export const getOrgs = async (stage, accessToken) => {
+    return await request({
+        url: `https://accounts.${stage}/external/organizations/my`,
+        camundaAuth: { token: accessToken },
+        type: 'json',
+    });
+};
+export const getClusters = async (stage, accessToken, orgId) => {
+    return await request({
+        url: `https://console.${stage}/external/organizations/${orgId}/clusters`,
+        camundaAuth: { token: accessToken },
+        type: 'json',
+    });
+};

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,46 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { request } from './api.js';
+import { getEndpoint, STATUS } from './endpoints.const.js';
+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',
+            });
+            const 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/assets/c3-icons.d.ts

@@ -0,0 +1,5 @@
+import type { C3IconProps } from './c3-icons.types';
+export declare const C3AppMenuIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const C3BellIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CamundaLogo: () => import("react/jsx-runtime").JSX.Element;

package/lib/esm/src/assets/c3-icons.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const C3AppMenuIcon = ({ size }) => (_jsx(_Fragment, { children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: 'transparent', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("path", { fill: 'transparent', style: { mixBlendMode: 'multiply' }, d: 'M0 0h20v20H0z' }), _jsx("path", { d: 'M11.5 1h-3v3h3V1ZM4 1H1v3h3V1Zm15 0h-3v3h3V1Zm-7.5 7.5h-3v3h3v-3ZM4 8.5H1v3h3v-3Zm15 0h-3v3h3v-3ZM11.5 16h-3v3h3v-3ZM4 16H1v3h3v-3Zm15 0h-3v3h3v-3Z' })] }) }));
+export const C3NotificationsUnreadIcon = ({ size }) => (_jsx(_Fragment, { children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [_jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10.625.857V.625h-1.25v1.282A6.258 6.258 0 0 0 3.75 8.125v2.241l-1.692 1.692a.625.625 0 0 0-.183.442v1.875A.625.625 0 0 0 2.5 15h4.375v.486a3.22 3.22 0 0 0 2.813 3.249 3.129 3.129 0 0 0 3.437-3.11V15H17.5a.624.624 0 0 0 .625-.625V12.5a.625.625 0 0 0-.183-.442l-.939-.939a6.174 6.174 0 0 1-1.46.308l1.332 1.332v.991H3.125v-.991l1.692-1.692A.625.625 0 0 0 5 10.625v-2.5a5 5 0 0 1 4.148-4.927A6.202 6.202 0 0 1 10.625.857Zm5.625 9.235V8.125a6.258 6.258 0 0 0-5.044-6.131 5.003 5.003 0 0 0-.743 1.152A5 5 0 0 1 15 8.125v2.125c.432 0 .85-.055 1.25-.158Zm-4.924 6.859c.351-.352.549-.829.549-1.326V15h-3.75v.625a1.875 1.875 0 0 0 3.2 1.326Z', fill: '$icon-primary' }), _jsx("path", { d: 'M15 10.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z', style: { fill: 'var(--cds-link-primary)' } })] }) }));
+export const C3BellIcon = ({ size }) => (_jsx(_Fragment, { children: _jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: 'transparent', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("path", { d: 'M50.2373 33.7627L45.5 29.0253V22.75C45.4944 18.4134 43.881 14.2329 40.9718 11.0169C38.0626 7.80093 34.0643 5.77786 29.75 5.3389V1.75H26.25V5.3389C21.9357 5.77786 17.9374 7.80093 15.0282 11.0169C12.119 14.2329 10.5056 18.4134 10.5 22.75V29.0253L5.76275 33.7627C5.60018 33.9252 5.47122 34.118 5.38324 34.3303C5.29526 34.5426 5.24998 34.7702 5.25 35V40.25C5.25 40.7141 5.43437 41.1592 5.76256 41.4874C6.09075 41.8156 6.53587 42 7 42H19.25V43.75C19.25 46.0706 20.1719 48.2962 21.8128 49.9372C23.4538 51.5781 25.6794 52.5 28 52.5C30.3206 52.5 32.5462 51.5781 34.1872 49.9372C35.8281 48.2962 36.75 46.0706 36.75 43.75V42H49C49.4641 42 49.9092 41.8156 50.2374 41.4874C50.5656 41.1592 50.75 40.7141 50.75 40.25V35C50.75 34.7702 50.7047 34.5426 50.6168 34.3303C50.5288 34.118 50.3998 33.9252 50.2373 33.7627ZM33.25 43.75C33.25 45.1424 32.6969 46.4777 31.7123 47.4623C30.7277 48.4469 29.3924 49 28 49C26.6076 49 25.2723 48.4469 24.2877 47.4623C23.3031 46.4777 22.75 45.1424 22.75 43.75V42H33.25V43.75Z', fill: '#FF8201' }) }) }));
+export const CamundaLogo = () => (_jsx(_Fragment, { children: _jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', children: [_jsx("title", { children: "Camunda logo" }), _jsx("rect", { width: '24', height: '24', rx: '3', style: { fill: 'var(--cds-icon-primary)' } }), _jsx("path", { d: 'M11.986 15.585c1.824 0 2.762-1.075 2.776-2.967v-1.564h-1.755v1.687c0 .844-.368 1.143-.966 1.143-.585 0-.966-.3-.966-1.143V6.364c0-.843.367-1.17.966-1.156.585 0 .966.326.966 1.17v1.261h1.755V6.496c0-1.891-.94-2.965-2.762-2.965-1.823 0-2.764 1.074-2.776 2.965v6.136c0 1.864.943 2.953 2.762 2.953Z', style: { fill: 'var(--cds-text-inverse)' } }), _jsx("path", { d: 'M14.762 17.312H9.224v3.13h5.538v-3.13Z', fill: '#FC5D0D' })] }) }));

package/lib/esm/src/assets/c3-icons.types.d.ts

@@ -0,0 +1,3 @@
+export interface C3IconProps {
+    size: number;
+}

package/lib/esm/src/assets/c3-icons.types.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export {};

package/lib/esm/src/components/c3-app-teaser/app-teaser-cards-config.d.ts

@@ -0,0 +1,5 @@
+import type { AppTeaserCardProps } from './app-teaster-card';
+import type { TeaserApp } from './c3-app-teaser';
+export declare const appTeaserCardsConfig: {
+    [key in TeaserApp]: AppTeaserCardProps[];
+};

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

@@ -0,0 +1,94 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+export const appTeaserCardsConfig = {
+    operate: [
+        {
+            title: 'Monitor processes',
+            description: 'Monitor the operational health of historic and current processes in a single place.',
+            id: 'operate-preview--monitor-process',
+            img: {
+                altText: 'Operate app dashboard screenshot showing running process instances overview',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/operate-1-monitor.png',
+            },
+        },
+        {
+            title: 'Drill down and inspect process instances',
+            description: 'Uncover process incidents or use visual cues paired with process models to find where instances are stuck.',
+            id: 'operate-preview-inspect-process',
+            img: {
+                altText: 'Operate app screenshot showing process instance details',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/operate-2-inspect.png',
+            },
+        },
+        {
+            title: 'Troubleshoot issues in near-real-time',
+            description: 'Before retrying instances and without losing any in-flight or historical data.',
+            id: 'operate-preview-troubleshoot',
+            img: {
+                altText: 'Operate app screenshot showing process instance with incidents',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/operate-3-troubleshoot.png',
+            },
+        },
+    ],
+    tasklist: [
+        {
+            title: 'User-friendly task manager',
+            description: 'Manage and run human tasks for full end-to-end orchestration with an user-friendly interface',
+            id: 'tasklist-preview-task-manager',
+            img: {
+                altText: 'Tasklist app screenshot showing task overview',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/tasklist-1-task-manager.png',
+            },
+        },
+        {
+            title: 'Create forms with just a few clicks',
+            description: 'Connect your teams by orchestrating human tasks and create forms with just a few clicks to help with it',
+            id: 'tasklist-preview-forms',
+            img: {
+                altText: 'Modeler app screenshot showing form builder',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/tasklist-2-form.png',
+            },
+        },
+        {
+            title: 'Use APIs to extend it',
+            description: 'Extend the manual workflows and tasklist by using with the Tasklist API',
+            id: 'tasklist-preview-api',
+            img: {
+                altText: 'Camunda docs screenshot showing Tasklist API documentation',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/tasklist-3-api.png',
+            },
+        },
+    ],
+    optimize: [
+        {
+            title: 'Monitor KPIs and get notified',
+            description: 'Monitor Process KPIs and get notified proactively about deviations',
+            id: 'optimize-preview-kpis',
+            img: {
+                altText: 'Optimize app screenshot showing KPI monitoring dashboard',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/optimize-1-kpis.png',
+            },
+        },
+        {
+            title: 'Find opportunities to improve',
+            description: 'Use analyses to find process improvements based on historic process executions',
+            id: 'optimize-preview-opportunities',
+            img: {
+                altText: 'Optimize app screenshot showing process branch analysis',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/optimize-2-opportunities.png',
+            },
+        },
+        {
+            title: 'Share reports and dashboards',
+            description: 'Share process intelligence reports & dashboards with every stakeholder',
+            id: 'optimize-preview-reports',
+            img: {
+                altText: 'Optimize app screenshot showing process report heatmap',
+                path: 'https://static-assets.camunda.io/c3/app-teaser-images/optimize-3-reports.png',
+            },
+        },
+    ],
+};

package/lib/esm/src/components/c3-app-teaser/app-teaser-cards.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from 'react';
+import { type AppTeaserCardProps } from './app-teaster-card';
+type AppTeaserCardsProps = {
+    title: string;
+    subtitle: JSX.Element;
+    cards: AppTeaserCardProps[];
+    cta: {
+        text: string;
+        action: () => void;
+        renderIcon?: unknown;
+        disabled?: boolean;
+        disabledMessage?: string;
+    };
+    subtext: string;
+};
+export declare const AppTeaserCards: ({ title, subtitle, cards, cta, subtext, }: AppTeaserCardsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,31 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Button, InlineNotification, Stack } from '@carbon/react';
+import styled from 'styled-components';
+import { body02 } from '../styles.js';
+import { AppTeaserCard } from './app-teaster-card.js';
+const Subtitle = styled.div `
+  p {
+    ${body02};
+    text-align: center;
+    white-space: pre-line;
+  }
+`;
+export const AppTeaserCards = ({ title, subtitle, cards, cta, subtext, }) => {
+    const innerColumns = new Array(cards.length).fill('428px');
+    const gridTemplateColumns = `1fr ${innerColumns.join(' ')} 1fr`;
+    const gridGap = '10px';
+    return (_jsxs(Stack, { gap: 8, children: [_jsxs(Stack, { gap: 4, children: [_jsx("h1", { style: { textAlign: 'center' }, children: title }), _jsx(Subtitle, { children: _jsx("p", { children: subtitle }) })] }), _jsxs(Stack, { gap: 5, children: [_jsx("div", { style: {
+                            display: 'grid',
+                            justifyContent: 'center',
+                        }, children: cta.disabled && cta.disabledMessage ? (_jsx(InlineNotification, { kind: 'info', title: cta.disabledMessage, hideCloseButton: true })) : (_jsx(Button, { id: 'teasercards-button', onClick: cta.action, renderIcon: cta.renderIcon, isExpressive: true, children: cta.text })) }), !cta.disabled && subtext && (_jsx("div", { style: {
+                            display: 'grid',
+                            justifyContent: 'center',
+                            fontSize: '14px',
+                        }, children: subtext }))] }), _jsx(Stack, { gap: 6, orientation: 'vertical', children: _jsx(Stack, { gap: 6, children: _jsx("div", { style: { display: 'grid', gridTemplateColumns, gap: gridGap }, children: cards.map((card, index) => (_createElement(AppTeaserCard, { ...card, key: 'teasercardz' + index, grid: { column: index + 2 } }))) }) }) })] }));
+};

package/lib/esm/src/components/c3-app-teaser/app-teaster-card.d.ts

@@ -0,0 +1,14 @@
+import type { JSX, ReactNode } from 'react';
+export type AppTeaserCardProps = {
+    grid?: {
+        column?: number | string;
+    };
+    id: string;
+    title: string;
+    img: {
+        path: string;
+        altText: string;
+    };
+    description: ReactNode;
+};
+export declare const AppTeaserCard: (props: AppTeaserCardProps) => JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Tile } from '@carbon/react';
+import styled from 'styled-components';
+const Description = styled.p `
+  font-size: 15px !important;
+`;
+export const AppTeaserCard = (props) => {
+    const gap = 1;
+    return (_jsx(Tile, { style: {
+            gridColumn: props.grid?.column ?? 1,
+            padding: '16px',
+            height: '100%',
+        }, children: _jsxs("div", { style: {
+                display: 'grid',
+                gap: `${gap}rem`,
+                gridTemplateRows: `auto auto 1fr`,
+                height: '100%',
+            }, children: [_jsx("h2", { children: props.title }), _jsx(Description, { children: props.description }), _jsx("img", { src: props.img.path, alt: props.img.altText, style: { alignSelf: 'end', width: '100%' } })] }) }));
+};

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

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import { type C3AppTeaserProps } from './c3-app-teaser';
+export type C3AppTeaserPageProps = {
+    appName: C3AppTeaserProps['appName'];
+    redirectToClusters?: () => void;
+    redirectToCheckout?: () => void;
+    redirectToCreateCluster?: () => void;
+};
+export declare const C3AppTeaserPage: FC<C3AppTeaserPageProps>;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Loading } from '@carbon/react';
+import { canCreateCluster, canUpgradePlan, isTrialExpired, } from '../../utils/camunda.js';
+import { useC3Profile } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
+import { useC3UserConfiguration } from '../c3-user-configuration/c3-user-configuration-provider.js';
+import { C3AppTeaser } from './c3-app-teaser.js';
+export const C3AppTeaserPage = ({ appName, redirectToClusters, redirectToCreateCluster, redirectToCheckout, }) => {
+    const { activeOrganizationId, domain, analyticsTrack } = useC3UserConfiguration();
+    const { activeOrg, clusters } = useC3Profile();
+    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 });
+            if (redirectToCheckout) {
+                redirectToCheckout();
+            }
+            else {
+                window.location.href = `https://console.${domain}/org/${activeOrganizationId}/checkout`;
+            }
+        }
+        else if (hasSleepingCluster) {
+            analyticsTrack?.('clusters:manage:open', { appTeaser: appName });
+            if (redirectToClusters) {
+                redirectToClusters();
+            }
+            else {
+                window.location.href = `https://console.${domain}/org/${activeOrganizationId}/clusters`;
+            }
+        }
+        else {
+            analyticsTrack?.('clusters:create:open', { appTeaser: appName });
+            if (redirectToCreateCluster) {
+                redirectToCreateCluster();
+            }
+            else {
+                window.location.href = `https://console.${domain}/org/${activeOrganizationId}/clusters/create`;
+            }
+        }
+    };
+    return activeOrg && appName ? (_jsx(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: hasTrialExpired, hasSleepingCluster: hasSleepingCluster, onClickCta: onClickCta, pricing: null })) : (_jsx(Loading, { withOverlay: true }));
+};

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser-page.test.d.ts

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

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { expect, test } from '@playwright/test';
+import { getStory } from '../test-utils.js';
+test.describe('App teaser page', () => {
+    test('Paid plan', async ({ page }) => {
+        await getStory(page, 'components-c3appteaser--operate');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Trial expired', async ({ page }) => {
+        await getStory(page, 'components-c3appteaser--trial-expired');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Sleeping cluster', async ({ page }) => {
+        await getStory(page, 'components-c3appteaser--sleeping-cluster');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Cannot create cluster', async ({ page }) => {
+        await getStory(page, 'components-c3appteaser--cannot-create-cluster');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Cannot upgrade plan', async ({ page }) => {
+        await getStory(page, 'components-c3appteaser--cannot-upgrade-plan');
+        await expect(page).toHaveScreenshot();
+    });
+    test('Cannot resume cluster', async ({ page }) => {
+        await getStory(page, 'components-c3appteaser--cannot-resume-cluster');
+        await expect(page).toHaveScreenshot();
+    });
+});