@cosmicdrift/kumiko-samples 0.387.0 → 0.389.0

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

@@ -24,24 +24,13 @@ import {
   SubscriptionFoundationQueries,
   SubscriptionStatuses,
 } from "./constants.ts";
+import { resolveConsentLocale } from "./consumer-protection/consent-locale.ts";
 import { localizedParams } from "./localized-params.ts";
+import { cheapestPrice, intervalKey, pricesDiffer, renewalKey, tierPrices } from "./plan-price.ts";
+import { PlanSwitchConfirmDialog } from "./plan-switch-confirm-dialog.tsx";
 
 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}`;
-}
-
 /** 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
@@ -135,12 +124,25 @@ export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
   const [redirecting, setRedirecting] = useState(false);
   const [consentTier, setConsentTier] = useState<string | null>(null);
   const [cancelOpen, setCancelOpen] = useState(false);
+  const [chosenProvider, setChosenProvider] = useState<string | null>(null);
+  const [switchTier, setSwitchTier] = useState<string | null>(null);
+  const [switchRequested, setSwitchRequested] = useState(false);
+
+  // Only present when the tenant can choose (several offered providers) or
+  // the single offered provider has a note; absent means the server decides.
+  const providers = query.data?.providers;
+  const activeProvider = providers?.find((p) => p.name === chosenProvider) ?? providers?.[0];
+  const providerArg = activeProvider ? { providerName: activeProvider.name } : {};
 
   async function orderWithConsent(
     tier: string,
-    consent: CheckoutConsentPayload,
+    consent: CheckoutConsentPayload | undefined,
   ): Promise<WriteResult<{ readonly url: string }>> {
-    const result = await checkoutMutation.mutate({ tier, consent });
+    const result = await checkoutMutation.mutate({
+      tier,
+      ...(consent !== undefined && { consent }),
+      ...providerArg,
+    });
     if (result.isSuccess) {
       setRedirecting(true);
       window.location.assign(result.data.url);
@@ -149,13 +151,23 @@ export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
   }
 
   async function handleAction(tier: string, kind: "checkout" | "switch"): Promise<void> {
-    if (kind === "checkout" && query.data?.consumerProtection !== undefined) {
+    if (
+      kind === "checkout" &&
+      (query.data?.consumerProtection !== undefined || (providers?.length ?? 0) > 1)
+    ) {
+      setChosenProvider(null);
       setConsentTier(tier);
       return;
     }
+    if (kind === "switch" && query.data?.inAppPlanSwitch) {
+      setSwitchTier(tier);
+      return;
+    }
     setRedirecting(true);
-    const mutation = kind === "checkout" ? checkoutMutation : switchMutation;
-    const result = await mutation.mutate({ tier });
+    const result =
+      kind === "checkout"
+        ? await checkoutMutation.mutate({ tier, ...providerArg })
+        : await switchMutation.mutate({ tier });
     if (result.isSuccess) {
       window.location.assign(result.data.url);
     } else {
@@ -189,6 +201,9 @@ export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
   }
   if (!query.data) return null;
   const result: BillingPlansResult = query.data;
+  // Cards show the first provider's price; the dialog then follows the chosen one.
+  const shownPlans = providers?.[0]?.plans ?? result.plans;
+  const dialogPlans = activeProvider?.plans ?? result.plans;
 
   // The consent dialog shows the checkout error itself.
   const mutationError =
@@ -199,7 +214,11 @@ export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
     result.subscription !== null && !result.subscription.terminal && result.canPurchase;
 
   function toCardProps(plan: BillingPlanView) {
-    const key = intervalKey(plan.price);
+    const comparable =
+      providers !== undefined && providers.length > 1 ? tierPrices(providers, plan.tier) : [];
+    const fromPrice = pricesDiffer(comparable) ? cheapestPrice(comparable) : undefined;
+    const shownPrice = fromPrice ?? plan.price;
+    const key = intervalKey(shownPrice);
     return {
       title: t(plan.labelKey),
       description:
@@ -214,13 +233,14 @@ export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
       price:
         !result.enabled && plan.isCurrent
           ? undefined
-          : plan.price === null
+          : shownPrice === null
             ? null
             : {
-                amount: formatMoney(plan.price.unitAmount, plan.price.currency, locale),
+                amount: formatMoney(shownPrice.unitAmount, shownPrice.currency, locale),
+                ...(fromPrice !== undefined && { prefix: t("billing-foundation.plans.priceFrom") }),
                 ...(key !== undefined && {
                   period: t(key, {
-                    count: new Intl.NumberFormat(locale).format(plan.price.intervalCount ?? 1),
+                    count: new Intl.NumberFormat(locale).format(shownPrice.intervalCount ?? 1),
                   }),
                 }),
               },
@@ -239,12 +259,41 @@ export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
   // 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;
+    consentTier !== null ? dialogPlans.find((plan) => plan.tier === consentTier) : undefined;
+  const switchPlan =
+    switchTier !== null ? shownPlans.find((plan) => plan.tier === switchTier) : 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);
+  const noteLocale = resolveConsentLocale(locale);
+  const noteOf = (provider: { readonly note?: Readonly<Record<string, string>> }) =>
+    provider.note?.[noteLocale] ?? provider.note?.["en"];
+  const singleProviderNote =
+    providers !== undefined && providers.length === 1 && providers[0] !== undefined
+      ? noteOf(providers[0])
+      : undefined;
+  function providerChoiceFor(tier: string) {
+    if (providers === undefined || providers.length < 2 || activeProvider === undefined) {
+      return undefined;
+    }
+    const prices = tierPrices(providers, tier);
+    const showPrices = pricesDiffer(prices);
+    return {
+      value: activeProvider.name,
+      onChange: setChosenProvider,
+      options: providers.map((provider) => {
+        const price = provider.plans.find((plan) => plan.tier === tier)?.price;
+        const note = noteOf(provider);
+        return {
+          value: provider.name,
+          title: provider.displayName,
+          ...(note !== undefined && { description: note }),
+          ...(showPrices &&
+            price && { aside: formatMoney(price.unitAmount, price.currency, locale) }),
+        };
+      }),
+    };
+  }
+  const currentTierInPlans = shownPlans.some((plan) => plan.isCurrent);
+  const visiblePlans = result.enabled ? shownPlans : shownPlans.filter((plan) => plan.isCurrent);
 
   return (
     <div className="flex flex-col gap-4" data-testid="billing-plans-panel">
@@ -258,6 +307,11 @@ export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
           {t("billing-foundation.plans.purchaseNotAllowed")}
         </Banner>
       )}
+      {switchRequested && (
+        <Banner variant="info" testId="billing-plans-panel-switch-requested">
+          {t("billing-foundation.plans.planSwitchRequested")}
+        </Banner>
+      )}
       {mutationError !== null && (
         <Banner variant="error" testId="billing-plans-panel-mutation-error">
           {t(mutationError.i18nKey, mutationError.i18nParams)}
@@ -318,25 +372,43 @@ export function BillingPlansPanel(_props: ExtensionSectionProps): ReactNode {
         ))}
         {result.contact !== undefined && <BillingContactPlan contact={result.contact} />}
       </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()}
-          />
-        )}
+      {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}
+          providerChoice={providerChoiceFor(consentPlan.tier)}
+          note={singleProviderNote}
+          onOrder={(consent) => orderWithConsent(consentPlan.tier, consent)}
+          onConsentTextOutdated={() => void query.refetch()}
+        />
+      )}
+      {switchPlan !== undefined && (
+        <PlanSwitchConfirmDialog
+          open
+          onOpenChange={(open) => {
+            if (!open) setSwitchTier(null);
+          }}
+          tier={switchPlan.tier}
+          fromPlanName={t(result.currentTier.labelKey)}
+          toPlanName={t(switchPlan.labelKey)}
+          consumerProtection={consumerProtection}
+          onApplied={() => {
+            setSwitchTier(null);
+            setSwitchRequested(true);
+            void query.refetch();
+          }}
+          onConsentTextOutdated={() => void query.refetch()}
+        />
+      )}
       {consumerProtection !== undefined && canManage && (
         <CancelContractDialog
           open={cancelOpen}

package/packages/bundled-features/src/billing-foundation/web/checkout-consent-dialog.tsx

@@ -1,5 +1,6 @@
 import { useLocale, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import type { WriteResult } from "@cosmicdrift/kumiko-renderer/headless";
+import { ChoiceCards } from "@cosmicdrift/kumiko-renderer/web";
 import { type ReactNode, useState } from "react";
 import type { BillingPlansResult } from "../types.ts";
 import { resolveConsentLocale } from "./consumer-protection/consent-locale.ts";
@@ -24,8 +25,24 @@ export type CheckoutConsentDialogProps = {
     readonly renewalKey?: string;
     readonly count?: string;
   };
-  readonly consumerProtection: ConsumerProtectionView;
-  readonly onOrder: (consent: CheckoutConsentPayload) => Promise<WriteResult<{ url: string }>>;
+  /** Without it the dialog shows no legal links and no consent checkboxes and orders without a consent. */
+  readonly consumerProtection?: ConsumerProtectionView;
+  /** Several providers to pick from; the parent follows `value` for price and order. */
+  readonly providerChoice?: {
+    readonly options: readonly {
+      readonly value: string;
+      readonly title: string;
+      readonly description?: string;
+      readonly aside?: string;
+    }[];
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+  };
+  /** Provider note under the price line when there is no provider choice. */
+  readonly note?: string;
+  readonly onOrder: (
+    consent: CheckoutConsentPayload | undefined,
+  ) => Promise<WriteResult<{ url: string }>>;
   readonly onConsentTextOutdated: () => void;
 };
 
@@ -36,6 +53,8 @@ export function CheckoutConsentDialog({
   planName,
   price,
   consumerProtection,
+  providerChoice,
+  note,
   onOrder,
   onConsentTextOutdated,
 }: CheckoutConsentDialogProps): ReactNode {
@@ -48,18 +67,23 @@ export function CheckoutConsentDialog({
   const [errorText, setErrorText] = useState<string | null>(null);
 
   const consentLocale = resolveConsentLocale(uiLocale);
-  const texts = consumerProtection.consentTexts[consentLocale];
-  const legalLinks = consumerProtection.legalLinks[consentLocale];
+  const texts = consumerProtection?.consentTexts[consentLocale];
+  const legalLinks = consumerProtection?.legalLinks[consentLocale];
+  const consentGiven = consumerProtection === undefined || (earlyPerformance && withdrawalLoss);
 
   async function order(): Promise<void> {
     setSubmitting(true);
     setErrorText(null);
-    const result = await onOrder({
-      earlyPerformanceRequested: true,
-      withdrawalLossAcknowledged: true,
-      consentTextVersion: texts.consentTextVersion,
-      locale: consentLocale,
-    });
+    const result = await onOrder(
+      texts === undefined
+        ? undefined
+        : {
+            earlyPerformanceRequested: true,
+            withdrawalLossAcknowledged: true,
+            consentTextVersion: texts.consentTextVersion,
+            locale: consentLocale,
+          },
+    );
     if (result.isSuccess) return;
     setSubmitting(false);
     setErrorText(t(result.error.i18nKey, result.error.i18nParams));
@@ -78,6 +102,18 @@ export function CheckoutConsentDialog({
       testId="checkout-consent-dialog"
     >
       <div className="flex flex-col gap-4">
+        {providerChoice !== undefined && (
+          <div className="flex flex-col gap-2">
+            <Text variant="muted">{t("billing-foundation.consent.chooseProvider")}</Text>
+            <ChoiceCards
+              value={providerChoice.value}
+              options={providerChoice.options}
+              onChange={providerChoice.onChange}
+              ariaLabel={t("billing-foundation.consent.chooseProvider")}
+              testId="checkout-provider-choice"
+            />
+          </div>
+        )}
         <div className="flex flex-col gap-1" data-testid="checkout-consent-summary">
           <Text>
             {planName} — {price.amount}
@@ -93,38 +129,49 @@ export function CheckoutConsentDialog({
               <Text variant="muted">{t("billing-foundation.consent.cancelAnytime")}</Text>
             </>
           )}
+          {note !== undefined && (
+            <Text variant="muted" testId="checkout-consent-note">
+              {note}
+            </Text>
+          )}
         </div>
-        <div className="flex flex-wrap gap-4">
-          <Link href={legalLinks.terms} target="_blank">
-            {t("billing-foundation.consent.link.terms")}
-          </Link>
-          <Link href={legalLinks.withdrawal} target="_blank">
-            {t("billing-foundation.consent.link.withdrawal")}
-          </Link>
-          <Link href={legalLinks.privacy} target="_blank">
-            {t("billing-foundation.consent.link.privacy")}
-          </Link>
-        </div>
-        <Field id="consent-early-performance" label={texts.earlyPerformance} layout="inline">
-          <Input
-            kind="boolean"
-            id="consent-early-performance"
-            name="consent-early-performance"
-            value={earlyPerformance}
-            onChange={setEarlyPerformance}
-            disabled={submitting}
-          />
-        </Field>
-        <Field id="consent-withdrawal-loss" label={texts.withdrawalLoss} layout="inline">
-          <Input
-            kind="boolean"
-            id="consent-withdrawal-loss"
-            name="consent-withdrawal-loss"
-            value={withdrawalLoss}
-            onChange={setWithdrawalLoss}
-            disabled={submitting}
-          />
-        </Field>
+        {legalLinks !== undefined && (
+          <div className="flex flex-wrap gap-4">
+            <Link href={legalLinks.terms} target="_blank">
+              {t("billing-foundation.consent.link.terms")}
+            </Link>
+            <Link href={legalLinks.withdrawal} target="_blank">
+              {t("billing-foundation.consent.link.withdrawal")}
+            </Link>
+            <Link href={legalLinks.privacy} target="_blank">
+              {t("billing-foundation.consent.link.privacy")}
+            </Link>
+          </div>
+        )}
+        {texts !== undefined && (
+          <>
+            <Field id="consent-early-performance" label={texts.earlyPerformance} layout="inline">
+              <Input
+                kind="boolean"
+                id="consent-early-performance"
+                name="consent-early-performance"
+                value={earlyPerformance}
+                onChange={setEarlyPerformance}
+                disabled={submitting}
+              />
+            </Field>
+            <Field id="consent-withdrawal-loss" label={texts.withdrawalLoss} layout="inline">
+              <Input
+                kind="boolean"
+                id="consent-withdrawal-loss"
+                name="consent-withdrawal-loss"
+                value={withdrawalLoss}
+                onChange={setWithdrawalLoss}
+                disabled={submitting}
+              />
+            </Field>
+          </>
+        )}
         {errorText !== null && (
           <Banner variant="error" testId="checkout-consent-error">
             {errorText}
@@ -140,7 +187,7 @@ export function CheckoutConsentDialog({
             {t("billing-foundation.consent.back")}
           </Button>
           <Button
-            disabled={!earlyPerformance || !withdrawalLoss || submitting}
+            disabled={!consentGiven || submitting}
             loading={submitting}
             onClick={order}
             testId="checkout-consent-order"

package/packages/bundled-features/src/billing-foundation/web/constants.ts

@@ -95,6 +95,10 @@ export const SubscriptionFoundationQueries = {
    *  current tier and per-plan action. Only registered when a `catalog` is
    *  configured. */
   billingPlans: "billing-foundation:query:billing-plans",
+  /** What switching to a tier would cost right now, for providers that switch
+   *  plans in-app (preview + apply). Only registered when a `catalog` is
+   *  configured. */
+  planSwitchPreview: "billing-foundation:query:plan-switch-preview",
   /** System-only probe: does the caller tenant hold a non-terminal
    *  subscription (consumerProtection only). */
   terminableSubscription: "billing-foundation:query:terminable-subscription",

package/packages/bundled-features/src/billing-foundation/web/plan-price.ts

@@ -0,0 +1,55 @@
+import type { BillingPlanView } from "../types.ts";
+
+type Recurrence = {
+  readonly interval: string | null;
+  readonly intervalCount: number | null;
+};
+
+export function intervalKey(price: Recurrence | null): 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}`;
+}
+
+export function renewalKey(price: Recurrence | null): 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}`;
+}
+
+type PlanPrice = NonNullable<BillingPlanView["price"]>;
+
+export function pricesDiffer(prices: readonly PlanPrice[]): boolean {
+  const [first, ...rest] = prices;
+  return (
+    first !== undefined &&
+    rest.some(
+      (price) =>
+        price.unitAmount !== first.unitAmount ||
+        price.currency !== first.currency ||
+        price.interval !== first.interval ||
+        price.intervalCount !== first.intervalCount,
+    )
+  );
+}
+
+/** Price of `tier` at every provider that offers it, in provider order. */
+export function tierPrices(
+  providers: readonly { readonly plans: readonly BillingPlanView[] }[],
+  tier: string,
+): PlanPrice[] {
+  return providers.flatMap((provider) => {
+    const price = provider.plans.find((plan) => plan.tier === tier)?.price;
+    return price ? [price] : [];
+  });
+}
+
+export function cheapestPrice(prices: readonly PlanPrice[]): PlanPrice | undefined {
+  return prices.reduce<PlanPrice | undefined>(
+    (lowest, price) =>
+      lowest === undefined || price.unitAmount < lowest.unitAmount ? price : lowest,
+    undefined,
+  );
+}