@camunda/camunda-composite-components 0.4.2-rc.3 → 0.4.2-rc.4

package/lib/esm/package.json

@@ -4,7 +4,7 @@
         "type": "git",
         "url": "https://github.com/camunda-cloud/camunda-composite-components.git"
     },
-    "version": "0.4.2-rc.2",
+    "version": "0.4.2-rc.3",
     "scripts": {
         "clean": "rimraf lib/",
         "build": "yarn clean && tsc",

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

@@ -0,0 +1,9 @@
+export type StartingPrice = {
+    amount: number;
+    currency: string;
+    interval: string;
+};
+export declare const getStartingPrice: ({ token, audience, }: {
+    token: string;
+    audience: string;
+}) => Promise<StartingPrice>;

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

@@ -0,0 +1,6 @@
+import { request } from "./api";
+export const getStartingPrice = async ({ token, audience, }) => request({
+    url: `https://accounts.${audience}/external/organizations/startingPrice`,
+    camundaAuth: { token },
+    responseType: "json",
+});

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

@@ -1,10 +1,15 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { C3AppTeaser, teaserApps, } 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";
-export const C3AppTeaserPage = ({ appName: app, ...props }) => {
+import { getStartingPrice } from "../../api/organizations";
+import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
+export const C3AppTeaserPage = ({ appName: app, redirectToCreateCluster, redirectToCheckout, }) => {
+    const { activeOrganizationId, decodedAudience, analyticsTrack, userToken } = useC3UserConfiguration();
     const { activeOrg } = useC3Profile();
+    const [pricing, setPricing] = useState(null);
+    const [hasTrialExpired, setHasTrialExpired] = useState(false);
     let appName = app || null;
     if (!appName) {
         const href = window.location.href;
@@ -15,5 +20,43 @@ export const C3AppTeaserPage = ({ appName: app, ...props }) => {
                 ? lastUrlSegment
                 : null;
     }
-    return activeOrg ? (React.createElement(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: isTrialExpired(activeOrg), ...props })) : (React.createElement(Loading, { withOverlay: false }));
+    useEffect(() => {
+        if (!userToken || !decodedAudience)
+            return;
+        (async () => {
+            const res = await getStartingPrice({
+                token: userToken,
+                audience: decodedAudience,
+            });
+            if (res) {
+                setPricing(res);
+            }
+        })();
+    }, [userToken, decodedAudience]);
+    useEffect(() => {
+        if (activeOrg)
+            setHasTrialExpired(isTrialExpired(activeOrg));
+    }, [activeOrg]);
+    const onClickCta = () => {
+        if (hasTrialExpired) {
+            analyticsTrack?.("checkout:open", { appTeaser: appName });
+            if (redirectToCheckout) {
+                redirectToCheckout();
+            }
+            else {
+                window.location.href = `https://console.${decodedAudience}/org/${activeOrganizationId}/checkout`;
+            }
+        }
+        else {
+            analyticsTrack?.("clusters:create:open", { appTeaser: appName });
+            if (redirectToCreateCluster) {
+                redirectToCreateCluster();
+            }
+            else {
+                window.location.href = `https://console.${decodedAudience}/org/${activeOrganizationId}/clusters/create`;
+            }
+        }
+    };
+    console.log(pricing);
+    return activeOrg ? (React.createElement(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: hasTrialExpired, onClickCta: onClickCta, pricing: pricing })) : (React.createElement(Loading, { withOverlay: false }));
 };

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,20 @@
+import { expect, test } from "@playwright/test";
+import { getStory } from "../test-utils";
+test.describe("App teaser page", () => {
+    test("Paid plan", async ({ page }) => {
+        await getStory(page, "components-c3appteaser--paid-plan");
+        await expect(page).toHaveScreenshot();
+    });
+    test("Trial expired", async ({ page }) => {
+        await getStory(page, "components-c3appteaser--trial-expired");
+        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();
+    });
+});

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

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { StartingPrice } from "../../api/organizations";
 export declare const teaserApps: readonly ["tasklist", "operate", "optimize"];
 export type TeaserApp = (typeof teaserApps)[number];
 export type C3AppTeaserProps = {
@@ -6,7 +7,7 @@ export type C3AppTeaserProps = {
     canCreateCluster: boolean;
     canUpgradePlan: boolean;
     hasTrialExpired: boolean;
-    redirectToCheckout?: () => void;
-    redirectToCreateCluster?: () => void;
+    onClickCta: () => void;
+    pricing: StartingPrice | null;
 };
 export declare const C3AppTeaser: FC<C3AppTeaserProps>;

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

@@ -3,32 +3,10 @@ import { Add, ArrowUp } from "@carbon/react/icons";
 import { AppTeaserCards } from "./app-teaser-cards";
 import { getReadableAppName } from "../../utils/camunda";
 import { operatePreviewBase64, optimizePreviBase64, tasklistPreviewBase64, } from "../../assets/appTeaserPreviews";
-import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 export const teaserApps = ["tasklist", "operate", "optimize"];
 const base64Src = (src) => `data:image/jpeg;base64,${src}`;
-export const C3AppTeaser = ({ appName: app, hasTrialExpired, canUpgradePlan, canCreateCluster, redirectToCheckout, redirectToCreateCluster, }) => {
+export const C3AppTeaser = ({ appName: app, hasTrialExpired, canUpgradePlan, canCreateCluster, onClickCta, pricing, }) => {
     const appName = app ? getReadableAppName(app) : "";
-    const { activeOrganizationId, decodedAudience, analyticsTrack } = useC3UserConfiguration();
-    const onClickCta = () => {
-        if (hasTrialExpired) {
-            analyticsTrack?.("checkout:open", { appTeaser: appName });
-            if (redirectToCheckout) {
-                redirectToCheckout();
-            }
-            else {
-                window.location.href = `https://console.${decodedAudience}/org/${activeOrganizationId}/checkout`;
-            }
-        }
-        else {
-            analyticsTrack?.("clusters:create:open", { appTeaser: appName });
-            if (redirectToCreateCluster) {
-                redirectToCreateCluster();
-            }
-            else {
-                window.location.href = `https://console.${decodedAudience}/org/${activeOrganizationId}/clusters/create`;
-            }
-        }
-    };
     return (React.createElement(AppTeaserCards, { title: hasTrialExpired
             ? `Upgrade your plan${appName ? ` to use ${appName}` : ""} `
             : `Create a Cluster${appName ? ` to use ${appName}` : ""}`, subtitle: hasTrialExpired ? (React.createElement(React.Fragment, null,
@@ -37,7 +15,9 @@ export const C3AppTeaser = ({ appName: app, hasTrialExpired, canUpgradePlan, can
             "create a Cluster or access the following apps and features.")) : (React.createElement(React.Fragment, null,
             "The apps displayed below require a Cluster to run. ",
             React.createElement("br", null),
-            "Begin by creating your Cluster.")), subtext: hasTrialExpired ? "Plans starting at €99/month" : "", cta: {
+            "Begin by creating your Cluster.")), subtext: hasTrialExpired && pricing
+            ? `Plans starting at ${pricing.currency || ""}${pricing.amount || ""}${pricing.interval ? `/${pricing.interval}` : ""}`
+            : "", cta: {
             action: onClickCta,
             text: hasTrialExpired ? "Upgrade plan" : "Create Cluster",
             renderIcon: hasTrialExpired ? ArrowUp : Add,

package/lib/esm/src/components/c3-navigation/story-helpers.js

@@ -13,25 +13,6 @@ export function createAppProps() {
 export function createAppBarProps(options = {}) {
     return {
         isOpen: Boolean(options?.isOpen),
-        appTeaserRouteProps: options.useElementsFromConfig
-            ? {
-                operate: {
-                    routeProps: {
-                        onClick: () => console.log("Redirecting to Operate app teaser page..."),
-                    },
-                },
-                optimize: {
-                    routeProps: {
-                        onClick: () => console.log("Redirecting to Optimize app teaser page..."),
-                    },
-                },
-                tasklist: {
-                    routeProps: {
-                        onClick: () => console.log("Redirecting to Tasklist app teaser page..."),
-                    },
-                },
-            }
-            : undefined,
         elements: options.useElementsFromConfig
             ? undefined
             : options?.elements ?? [

package/package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "https://github.com/camunda-cloud/camunda-composite-components.git"
 	},
-	"version": "0.4.2-rc.3",
+	"version": "0.4.2-rc.4",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",