@cosmicdrift/kumiko-samples 0.338.0

package/packages/bundled-features/src/billing-foundation/web/billing-plans-panel.tsx

@@ -0,0 +1,361 @@
+// @runtime client
+
+import { toInstant, type WriteResult } from "@cosmicdrift/kumiko-headless";
+import {
+  type ExtensionSectionProps,
+  useLocale,
+  useMutation,
+  usePrimitives,
+  useQuery,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import {
+  formatMoney,
+  PlanCard,
+  type PlanCardActionSlot,
+  PlanGrid,
+} from "@cosmicdrift/kumiko-renderer-web";
+import { type ReactNode, useState } from "react";
+import {
+  BillingPlanActions,
+  SubscriptionFoundationHandlers,
+  SubscriptionFoundationQueries,
+  SubscriptionStatuses,
+} from "../constants.js";
+import type { BillingPlansResult, BillingPlanView } from "../types.js";
+import { CancelContractDialog } from "./cancel-contract-dialog.js";
+import { CheckoutConsentDialog, type CheckoutConsentPayload } from "./checkout-consent-dialog.js";
+
+type UseTranslation = ReturnType<typeof useTranslation>;
+
+function intervalKey(price: BillingPlanView["price"]): string | undefined {
+  if (price === null || price.interval === null) return undefined;
+  return price.intervalCount !== null && price.intervalCount > 1
+    ? `billing-foundation.plans.everyInterval.${price.interval}`
+    : `billing-foundation.plans.perInterval.${price.interval}`;
+}
+
+function renewalKey(price: BillingPlanView["price"]): string | undefined {
+  if (price === null || price.interval === null) return undefined;
+  return price.intervalCount !== null && price.intervalCount > 1
+    ? `billing-foundation.consent.renewsEvery.${price.interval}`
+    : `billing-foundation.consent.renews.${price.interval}`;
+}
+
+function localizedParams(
+  params: Readonly<Record<string, string | number>> | undefined,
+  locale: string,
+): Readonly<Record<string, string>> | undefined {
+  if (params === undefined) return undefined;
+  const localized: Record<string, string> = {};
+  for (const [key, value] of Object.entries(params)) {
+    localized[key] =
+      typeof value === "number" ? new Intl.NumberFormat(locale).format(value) : value;
+  }
+  return localized;
+}
+
+/** Which action the plan "would" offer if it weren't blocked — mirrors
+ *  plan-catalog.ts's own decision tree, since `unavailable` collapses both
+ *  "would checkout" and "would switch" into one action and the disabled CTA
+ *  still needs the right label. */
+function impliedAction(
+  plan: BillingPlanView,
+  subscription: BillingPlansResult["subscription"],
+): "checkout" | "switch" {
+  return subscription !== null && !subscription.terminal && plan.tier !== subscription.tier
+    ? "switch"
+    : "checkout";
+}
+
+/** Shared manage/reactivate secondaryAction for a current-tier card — used
+ *  by both a catalog plan's own card (`isCurrent`) and the synthetic
+ *  out-of-catalog current-tier card, so the two don't duplicate the
+ *  cancelAt-aware label choice. */
+function manageOrReactivateAction(
+  canManage: boolean,
+  subscription: BillingPlansResult["subscription"],
+  t: UseTranslation,
+  onManage: () => void,
+  redirecting: boolean,
+): PlanCardActionSlot | undefined {
+  if (!canManage) return undefined;
+  return {
+    label: t(
+      subscription?.cancelAt != null
+        ? "billing-foundation.plans.reactivate"
+        : "billing-foundation.plans.manage",
+    ),
+    onClick: onManage,
+    disabled: redirecting,
+  };
+}
+
+/** `!canPurchase` hides every CTA outright (spec: "keine CTAs, Hinweis
+ *  purchaseNotAllowed") — distinct from the `unavailable` action's disabled
+ *  CTA, which still shows a button (e.g. for a plan whose price failed to
+ *  load) so this check runs before the general unavailable-fallback. */
+
+function planCta(
+  plan: BillingPlanView,
+  result: BillingPlansResult,
+  t: UseTranslation,
+  onAction: (tier: string, kind: "checkout" | "switch") => void,
+  redirecting: boolean,
+): PlanCardActionSlot | undefined {
+  if (plan.action === BillingPlanActions.current) return undefined;
+  if (plan.action === BillingPlanActions.paymentPending) return undefined;
+  if (!result.canPurchase) return undefined;
+
+  const kind =
+    plan.action === BillingPlanActions.switch ? "switch" : impliedAction(plan, result.subscription);
+  const label = t(
+    kind === "switch" ? "billing-foundation.plans.switch" : "billing-foundation.plans.choose",
+    {
+      plan: t(plan.labelKey),
+    },
+  );
+  if (plan.action === BillingPlanActions.unavailable) {
+    return { label, onClick: () => {}, disabled: true };
+  }
+  return {
+    label,
+    onClick: () => onAction(plan.tier, kind),
+    disabled: redirecting,
+  };
+}
+
+export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
+  const t = useTranslation();
+  const locale = useLocale().locale();
+  const { Banner, Button } = usePrimitives();
+  const query = useQuery<BillingPlansResult | null>(SubscriptionFoundationQueries.billingPlans, {});
+  const checkoutMutation = useMutation<{ readonly url: string }>(
+    SubscriptionFoundationHandlers.startPlanCheckout,
+  );
+  const switchMutation = useMutation<{ readonly url: string }>(
+    SubscriptionFoundationHandlers.switchPlan,
+  );
+  const portalMutation = useMutation<{ readonly url: string }>(
+    SubscriptionFoundationHandlers.createPortalSession,
+  );
+
+  // Single flag for every CTA + the manage-button: set on click, held through
+  // a successful mutation (the tab is about to navigate away), reset only on
+  // failure. Scoping "pending" per-button would leave the just-clicked button
+  // enabled during its own in-flight request — a double-click risk — and
+  // `mutation.pending` alone drops before `window.location.assign` completes.
+  const [redirecting, setRedirecting] = useState(false);
+  const [consentTier, setConsentTier] = useState<string | null>(null);
+  const [cancelOpen, setCancelOpen] = useState(false);
+
+  async function orderWithConsent(
+    tier: string,
+    consent: CheckoutConsentPayload,
+  ): Promise<WriteResult<{ readonly url: string }>> {
+    const result = await checkoutMutation.mutate({ tier, consent });
+    if (result.isSuccess) {
+      setRedirecting(true);
+      window.location.assign(result.data.url);
+    }
+    return result;
+  }
+
+  async function handleAction(tier: string, kind: "checkout" | "switch"): Promise<void> {
+    if (kind === "checkout" && query.data?.consumerProtection !== undefined) {
+      setConsentTier(tier);
+      return;
+    }
+    setRedirecting(true);
+    const mutation = kind === "checkout" ? checkoutMutation : switchMutation;
+    const result = await mutation.mutate({ tier });
+    if (result.isSuccess) {
+      window.location.assign(result.data.url);
+    } else {
+      setRedirecting(false);
+    }
+  }
+
+  async function handleManage(): Promise<void> {
+    setRedirecting(true);
+    const result = await portalMutation.mutate({});
+    if (result.isSuccess) {
+      window.location.assign(result.data.url);
+    } else {
+      setRedirecting(false);
+    }
+  }
+
+  if (query.error !== null) {
+    return (
+      <Banner variant="error" testId="billing-plans-panel-error">
+        {t(query.error.i18nKey, query.error.i18nParams)}
+      </Banner>
+    );
+  }
+  if (query.loading && !query.data) {
+    return (
+      <Banner variant="loading" testId="billing-plans-panel-loading">
+        {t("kumiko.widget.loading")}
+      </Banner>
+    );
+  }
+  if (!query.data) return null;
+  const result: BillingPlansResult = query.data;
+
+  // The consent dialog shows the checkout error itself.
+  const mutationError =
+    (consentTier === null ? checkoutMutation.error : null) ??
+    switchMutation.error ??
+    portalMutation.error;
+  const canManage =
+    result.subscription !== null && !result.subscription.terminal && result.canPurchase;
+
+  function toCardProps(plan: BillingPlanView) {
+    const key = intervalKey(plan.price);
+    return {
+      title: t(plan.labelKey),
+      description:
+        plan.action === BillingPlanActions.paymentPending
+          ? t("billing-foundation.plans.paymentPending")
+          : undefined,
+      current: plan.isCurrent,
+      // Billing off means "no price to show", not "price failed to load" —
+      // undefined drops the price row entirely, distinct from the `null`
+      // price-unavailable state resolvePlanPrices returns for a genuine
+      // provider lookup failure.
+      price:
+        !result.enabled && plan.isCurrent
+          ? undefined
+          : plan.price === null
+            ? null
+            : {
+                amount: formatMoney(plan.price.unitAmount, plan.price.currency, locale),
+                ...(key !== undefined && {
+                  period: t(key, {
+                    count: new Intl.NumberFormat(locale).format(plan.price.intervalCount ?? 1),
+                  }),
+                }),
+              },
+      features: plan.benefits.map((benefit) =>
+        t(benefit.labelKey, localizedParams(benefit.params, locale)),
+      ),
+      cta: planCta(plan, result, t, handleAction, redirecting),
+      secondaryAction: plan.isCurrent
+        ? manageOrReactivateAction(canManage, result.subscription, t, handleManage, redirecting)
+        : undefined,
+    };
+  }
+
+  // The catalog's plans don't have to cover every tier a tenant can be on
+  // (a legacy/free/pilot tier outside `catalog.plans`) — when none of the
+  // rendered plans is the current one, a synthetic current-tier card (no
+  // price, no cta) keeps it visible regardless of enabled/disabled.
+  const consentPlan =
+    consentTier !== null ? result.plans.find((plan) => plan.tier === consentTier) : undefined;
+  const consumerProtection = result.consumerProtection;
+  const currentTierInPlans = result.plans.some((plan) => plan.isCurrent);
+  const visiblePlans = result.enabled
+    ? result.plans
+    : result.plans.filter((plan) => plan.isCurrent);
+
+  return (
+    <div className="flex flex-col gap-4" data-testid="billing-plans-panel">
+      {!result.enabled && (
+        <Banner variant="info" testId="billing-plans-panel-disabled">
+          {t("billing-foundation.plans.billingDisabled")}
+        </Banner>
+      )}
+      {!result.canPurchase && (
+        <Banner variant="warning" testId="billing-plans-panel-readonly">
+          {t("billing-foundation.plans.purchaseNotAllowed")}
+        </Banner>
+      )}
+      {mutationError !== null && (
+        <Banner variant="error" testId="billing-plans-panel-mutation-error">
+          {t(mutationError.i18nKey, mutationError.i18nParams)}
+        </Banner>
+      )}
+      {result.subscription?.status === SubscriptionStatuses.pastDue && (
+        <Banner variant="warning" testId="billing-plans-panel-past-due">
+          {t("billing-foundation.plans.pastDue")}
+        </Banner>
+      )}
+      {result.subscription !== null &&
+        !result.subscription.terminal &&
+        result.subscription.cancelAt != null && (
+          <Banner variant="info" testId="billing-plans-panel-cancel-scheduled">
+            {t("billing-foundation.plans.cancelScheduled", {
+              date: toInstant(result.subscription.cancelAt).toLocaleString(locale, {
+                dateStyle: "medium",
+              }),
+            })}{" "}
+            {t("billing-foundation.plans.switchRequiresReactivation")}
+          </Banner>
+        )}
+      {consumerProtection !== undefined && canManage && (
+        <div>
+          <Button
+            variant="secondary"
+            onClick={() => setCancelOpen(true)}
+            testId="billing-plans-cancel-contract"
+          >
+            {t("billing-foundation.cancel.open")}
+          </Button>
+        </div>
+      )}
+      <PlanGrid testId="billing-plans-grid">
+        {!currentTierInPlans && (
+          <PlanCard
+            title={t(result.currentTier.labelKey)}
+            current
+            testId="billing-plan-card-current"
+            features={result.currentTier.benefits.map((benefit) =>
+              t(benefit.labelKey, localizedParams(benefit.params, locale)),
+            )}
+            secondaryAction={manageOrReactivateAction(
+              canManage,
+              result.subscription,
+              t,
+              handleManage,
+              redirecting,
+            )}
+          />
+        )}
+        {visiblePlans.map((plan) => (
+          <PlanCard
+            key={plan.tier}
+            testId={`billing-plan-card-${plan.tier}`}
+            {...toCardProps(plan)}
+          />
+        ))}
+      </PlanGrid>
+      {consumerProtection !== undefined &&
+        consentPlan !== undefined &&
+        consentPlan.price !== null && (
+          <CheckoutConsentDialog
+            open
+            onOpenChange={(open) => {
+              if (!open) setConsentTier(null);
+            }}
+            planName={t(consentPlan.labelKey)}
+            price={{
+              amount: formatMoney(consentPlan.price.unitAmount, consentPlan.price.currency, locale),
+              renewalKey: renewalKey(consentPlan.price),
+              count: new Intl.NumberFormat(locale).format(consentPlan.price.intervalCount ?? 1),
+            }}
+            consumerProtection={consumerProtection}
+            onOrder={(consent) => orderWithConsent(consentPlan.tier, consent)}
+            onConsentTextOutdated={() => void query.refetch()}
+          />
+        )}
+      {consumerProtection !== undefined && canManage && (
+        <CancelContractDialog
+          open={cancelOpen}
+          onOpenChange={setCancelOpen}
+          onTerminated={() => void query.refetch()}
+        />
+      )}
+    </div>
+  );
+}

package/packages/bundled-features/src/billing-foundation/web/cancel-contract-dialog.tsx

@@ -0,0 +1,201 @@
+// @runtime client
+
+import { toInstant } from "@cosmicdrift/kumiko-headless";
+import {
+  useLocale,
+  useMutation,
+  usePrimitives,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import { ModeSwitch } from "@cosmicdrift/kumiko-renderer-web";
+import { type ReactNode, useState } from "react";
+import { SubscriptionFoundationHandlers } from "../constants.js";
+import type { ContractTerminationDeclarationType, ContractTerminationKind } from "../events.js";
+
+type TerminateContractReceipt = {
+  readonly requestId: string;
+  readonly receivedAtIso: string;
+  readonly effectiveAtIso: string | null;
+};
+
+type Step = "form" | "confirm" | "receipt";
+
+export type CancelContractDialogProps = {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onTerminated: () => void;
+};
+
+const DECLARATION_TYPES: readonly ContractTerminationDeclarationType[] = [
+  "termination",
+  "withdrawal",
+];
+const TERMINATION_KINDS: readonly ContractTerminationKind[] = ["ordinary", "extraordinary"];
+
+// kumiko-lint-ignore no-custom-primitives Uses usePrimitives().Modal internally, name is a billing domain action, not a primitive reimplementation
+export function CancelContractDialog({
+  open,
+  onOpenChange,
+  onTerminated,
+}: CancelContractDialogProps): ReactNode {
+  const t = useTranslation();
+  const locale = useLocale().locale();
+  const { Modal, Heading, Text, Field, Input, Button, Banner } = usePrimitives();
+  const terminate = useMutation<TerminateContractReceipt>(
+    SubscriptionFoundationHandlers.terminateContract,
+  );
+  const [step, setStep] = useState<Step>("form");
+  const [declarationType, setDeclarationType] =
+    useState<ContractTerminationDeclarationType>("termination");
+  const [terminationKind, setTerminationKind] = useState<ContractTerminationKind>("ordinary");
+  const [reason, setReason] = useState("");
+  const [receipt, setReceipt] = useState<TerminateContractReceipt | null>(null);
+
+  const reasonMissing = terminationKind === "extraordinary" && reason.trim().length === 0;
+
+  async function submit(): Promise<void> {
+    const trimmedReason = reason.trim();
+    const result = await terminate.mutate({
+      declarationType,
+      terminationKind,
+      ...(trimmedReason.length > 0 && { reason: trimmedReason }),
+    });
+    if (!result.isSuccess) return;
+    setReceipt(result.data);
+    setStep("receipt");
+    onTerminated();
+  }
+
+  function formatInstant(iso: string): string {
+    return toInstant(iso).toLocaleString(locale, { dateStyle: "medium", timeStyle: "short" });
+  }
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("billing-foundation.cancel.title")}
+      testId="cancel-contract-dialog"
+    >
+      <div className="flex flex-col gap-4">
+        <Heading variant="page">{t("billing-foundation.cancel.title")}</Heading>
+        {step === "form" && (
+          <>
+            <Text variant="muted">{t("billing-foundation.cancel.declaration")}</Text>
+            <ModeSwitch
+              value={declarationType}
+              options={DECLARATION_TYPES.map((value) => ({
+                value,
+                label: t(`billing-foundation.cancel.declaration.${value}`),
+              }))}
+              onChange={setDeclarationType}
+              ariaLabel={t("billing-foundation.cancel.declaration")}
+              testId="cancel-declaration-type"
+            />
+            {declarationType === "withdrawal" && (
+              <Text variant="muted">{t("billing-foundation.cancel.withdrawalHint")}</Text>
+            )}
+            <Text variant="muted">{t("billing-foundation.cancel.kind")}</Text>
+            <ModeSwitch
+              value={terminationKind}
+              options={TERMINATION_KINDS.map((value) => ({
+                value,
+                label: t(`billing-foundation.cancel.kind.${value}`),
+              }))}
+              onChange={setTerminationKind}
+              ariaLabel={t("billing-foundation.cancel.kind")}
+              testId="cancel-termination-kind"
+            />
+            {terminationKind === "extraordinary" && (
+              <Field id="cancel-reason" label={t("billing-foundation.cancel.reason")} required>
+                <Input
+                  kind="textarea"
+                  id="cancel-reason"
+                  name="cancel-reason"
+                  value={reason}
+                  onChange={setReason}
+                  required
+                  rows={3}
+                />
+              </Field>
+            )}
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="secondary"
+                onClick={() => onOpenChange(false)}
+                testId="cancel-contract-close"
+              >
+                {t("billing-foundation.cancel.close")}
+              </Button>
+              <Button
+                disabled={reasonMissing}
+                onClick={() => setStep("confirm")}
+                testId="cancel-contract-continue"
+              >
+                {t("billing-foundation.cancel.continue")}
+              </Button>
+            </div>
+          </>
+        )}
+        {step === "confirm" && (
+          <>
+            <Text>
+              {t("billing-foundation.cancel.confirmQuestion", {
+                declaration: t(`billing-foundation.cancel.declaration.${declarationType}`),
+                kind: t(`billing-foundation.cancel.kind.${terminationKind}`),
+              })}
+            </Text>
+            {terminate.error !== null && (
+              <Banner variant="error" testId="cancel-contract-error">
+                {t(terminate.error.i18nKey, terminate.error.i18nParams)}
+              </Banner>
+            )}
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="secondary"
+                disabled={terminate.pending}
+                onClick={() => setStep("form")}
+                testId="cancel-contract-back"
+              >
+                {t("billing-foundation.cancel.back")}
+              </Button>
+              <Button
+                variant="danger"
+                disabled={terminate.pending}
+                loading={terminate.pending}
+                onClick={submit}
+                testId="cancel-contract-submit"
+              >
+                {t("billing-foundation.cancel.submit")}
+              </Button>
+            </div>
+          </>
+        )}
+        {step === "receipt" && receipt !== null && (
+          <>
+            <div className="flex flex-col gap-1" data-testid="cancel-contract-receipt">
+              <Text>
+                {t("billing-foundation.cancel.receivedAt", {
+                  date: formatInstant(receipt.receivedAtIso),
+                })}
+              </Text>
+              <Text>
+                {receipt.effectiveAtIso !== null
+                  ? t("billing-foundation.cancel.effectiveAt", {
+                      date: formatInstant(receipt.effectiveAtIso),
+                    })
+                  : t("billing-foundation.cancel.effectiveUnknown")}
+              </Text>
+              <Text variant="muted">{t("billing-foundation.cancel.emailConfirmation")}</Text>
+            </div>
+            <div className="flex justify-end">
+              <Button onClick={() => onOpenChange(false)} testId="cancel-contract-done">
+                {t("billing-foundation.cancel.close")}
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </Modal>
+  );
+}