@nebulr-group/bridge-svelte 0.9.1 → 0.9.2-beta.0

package/dist/client/BridgeBootstrap.js

@@ -7,6 +7,7 @@ import { dropFlagCache, guardCacheGeneration } from '../auth/guard-cache.js';
 import { getBridgeAuth, bridgeReadyStore, markReady, waitForBridge as _waitForBridge, } from '../core/bridge-instance.js';
 import { installBridgeAuthFetch } from '../core/bridge-runtime.js';
 import { refreshBilling, tokenStaleHandlerOf } from '../core/billing-store.js';
+import { markCheckoutComplete } from './checkout-result.js';
 import { prefetchFlagDefinitions } from '../core/flag-definitions.js';
 import { useBridge, sanitizeReturnTo, stashReturnTo, takeReturnTo, withReturnTo, } from '@nebulr-group/bridge-auth-core';
 import { logger } from '../shared/logger.js';
@@ -418,6 +419,9 @@ async function handleCallbackRoute(url, kitFetch) {
                             await refreshBilling();
                         }
                         catch { /* the landing page re-reads */ }
+                        // TBP-813 — the landing page (the subscription page by default)
+                        // says the checkout went through; no separate confirmation page.
+                        markCheckoutComplete({ kind: 'checkout' });
                     }
                     redirect(303, redirectTo);
                 }

package/dist/client/billing-routes.d.ts

@@ -36,8 +36,17 @@ export interface BridgeBillingRoutes {
     paywallIsDefault: boolean;
     /** Where a failed checkout confirmation lands. */
     paymentErrorRoute: string;
-    /** Where a completed checkout lands by default: `<manageRoute>/success`. */
+    /**
+     * Where a completed checkout (or a Free pick) lands: `billing.successRoute`,
+     * else the subscription page, which shows the confirmation banner (TBP-813).
+     */
     successRoute: string;
+    /**
+     * True when `successRoute` is the default rather than the app's own choice.
+     * `<BridgeBillingRoutes>` then lands on its own subscription page, wherever
+     * its catch-all lives, instead of on `manageRoute`.
+     */
+    successIsDefault: boolean;
 }
 /**
  * Resolve the billing destinations from a `billing` config block. An unset

package/dist/client/billing-routes.js

@@ -54,7 +54,8 @@ export function resolveBillingRoutes(billing) {
         paywallRoute: paywall === false ? null : paywall || BRIDGE_BILLING_DEFAULTS.paywallRoute,
         paywallIsDefault: paywall !== false && !paywall,
         paymentErrorRoute: billing?.paymentErrorRoute || BRIDGE_BILLING_DEFAULTS.paymentErrorRoute,
-        successRoute: `${manageRoute.replace(/\/+$/, '')}/success`,
+        successRoute: billing?.successRoute || manageRoute,
+        successIsDefault: !billing?.successRoute,
     };
 }
 /**

package/dist/client/checkout-result.d.ts

@@ -0,0 +1,16 @@
+import { type Readable } from 'svelte/store';
+/** What just completed. */
+export interface BridgeCheckoutResult {
+    /** `checkout`: a paid Stripe checkout returned. `plan`: a plan was set without one (a Free pick). */
+    kind: 'checkout' | 'plan';
+    /** The plan's name, when the page that set it knew it. Otherwise read the current plan. */
+    planName?: string;
+}
+/** The checkout that just completed, or `null`. Cleared once something shows it. */
+export declare const checkoutResult: Readable<BridgeCheckoutResult | null>;
+/** Record a completed checkout or plan pick. Called by the plugin, not by apps. */
+export declare function markCheckoutComplete(value: BridgeCheckoutResult): void;
+/** Read the result and clear it, so it is shown once. */
+export declare function takeCheckoutResult(): BridgeCheckoutResult | null;
+/** Forget the result without showing it. */
+export declare function clearCheckoutResult(): void;

package/dist/client/checkout-result.js

@@ -0,0 +1,31 @@
+// TBP-813 — "a checkout just finished", for whichever page it lands on.
+//
+// A completed checkout used to stop on a confirmation page (`/subscription/success`)
+// before going anywhere. It now lands on `billing.successRoute` (the subscription
+// page by default), and this one-shot signal is how that page knows to say so:
+// `<BridgeCheckoutNotice>` shows it as a banner, and an app that wants its own
+// message reads `checkoutResult`.
+//
+// In memory only, never in the URL or storage: the checkout return redirects
+// inside the running app, so the signal is still here when the landing page
+// renders, and a reload (or a later visit) does not show it again. Whoever shows
+// it clears it.
+import { get, writable } from 'svelte/store';
+const result = writable(null);
+/** The checkout that just completed, or `null`. Cleared once something shows it. */
+export const checkoutResult = { subscribe: result.subscribe };
+/** Record a completed checkout or plan pick. Called by the plugin, not by apps. */
+export function markCheckoutComplete(value) {
+    result.set(value);
+}
+/** Read the result and clear it, so it is shown once. */
+export function takeCheckoutResult() {
+    const value = get(result);
+    if (value)
+        result.set(null);
+    return value;
+}
+/** Forget the result without showing it. */
+export function clearCheckoutResult() {
+    result.set(null);
+}

package/dist/client/components/subscription/BridgeBillingRoutes.svelte

@@ -6,9 +6,10 @@
     <BridgeBillingRoutes />
 
   Serves, relative to wherever the catch-all lives:
-    /subscription          the current plan, the plan picker and "Manage billing"
+    /subscription          the current plan, the plan picker and "Manage billing";
+                           a completed checkout lands here, with a banner
     /subscription/plan     the paywall: where a plan-less workspace is sent
-    /subscription/success  where a completed checkout lands
+    /subscription/success  the old confirmation page, for `billing.successRoute`
     /subscription/error    where a failed checkout confirmation lands
   An unknown segment gets the app's own 404 (bridgeBootstrap's load throws it —
   a component cannot).
@@ -28,7 +29,9 @@
     4. Headless: `PlanSelector`, `BridgeSubscriptionStatus`, `BillingPortalButton`
        and `subscriptionStore` are the pieces these pages are built from.
 
-  A Free pick (like a paid checkout) lands on /subscription/success (TBP-762).
+  TBP-813 — a paid checkout and a Free pick land on `billing.successRoute`, by
+  default this catch-all's own subscription page, which shows
+  `<BridgeCheckoutNotice>`. Set `billing.successRoute` to land anywhere else.
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
@@ -36,10 +39,15 @@
   import { page } from '$app/stores';
   import { ensureSubscription, loadSubscription } from '../../../core/bridge-instance.js';
   import { BRIDGE_AUTH_ROUTE_PARAM, bridgeAuthBase } from '../../auth-routes.js';
-  import { parseBridgeBillingRoute, type BridgeBillingPage } from '../../billing-routes.js';
+  import { onDestroy, onMount } from 'svelte';
+  import { useBridge, type BillingSubscriptionSnapshot } from '@nebulr-group/bridge-auth-core';
+  import { billingRoutes, parseBridgeBillingRoute, type BridgeBillingPage } from '../../billing-routes.js';
+  import { clearCheckoutResult } from '../../checkout-result.js';
   import PlanSelector from './PlanSelector.svelte';
   import BridgeSubscriptionStatus from './BridgeSubscriptionStatus.svelte';
   import BillingPortalButton from './BillingPortalButton.svelte';
+  import BridgeCheckoutNotice from './BridgeCheckoutNotice.svelte';
+  import { subscriptionMeta } from './plan-format.js';
 
   interface Props {
     /** Everything around the content, on every page. Receives the page name and
@@ -49,15 +57,37 @@
     heading?: Snippet<[BridgeBillingPage]>;
     /** Where "Continue" on the success page goes. @default '/' */
     redirectTo?: string;
+    /** The "you're on Pro now" banner on the subscription page after a
+     *  checkout. `false` hides it. @default true */
+    checkoutNotice?: boolean;
   }
 
-  let { frame, heading, redirectTo = '/' }: Props = $props();
+  let { frame, heading, redirectTo = '/', checkoutNotice = true }: Props = $props();
 
   const rest = $derived($page.params[BRIDGE_AUTH_ROUTE_PARAM]);
   const route = $derived(parseBridgeBillingRoute(rest));
   // Links are relative to where the catch-all lives, not hard-coded to /subscription.
   const base = $derived(bridgeAuthBase($page.url.pathname, rest) || '/');
   const at = (sub: string) => (base === '/' ? `/${sub}` : `${base}/${sub}`);
+  // TBP-813 — a checkout lands on `billing.successRoute`; by default on this
+  // catch-all's own subscription page, wherever it lives.
+  const routes = billingRoutes();
+  const successTarget = $derived(routes.successIsDefault ? base : routes.successRoute);
+
+  // The current plan's renewal date and card, for the line under its name.
+  let snapshot = $state<BillingSubscriptionSnapshot | null>(null);
+  let unsubscribe: (() => void) | undefined;
+  onMount(() => {
+    try {
+      const sub = useBridge().subscription;
+      snapshot = sub.snapshot();
+      unsubscribe = sub.subscribe((s) => (snapshot = s));
+    } catch {
+      /* Bridge not initialised: no meta line */
+    }
+  });
+  onDestroy(() => unsubscribe?.());
+  const meta = $derived(subscriptionMeta(snapshot?.state));
 
   const DEFAULT_HEADINGS: Record<BridgeBillingPage, string> = {
     manage: 'Subscription',
@@ -77,11 +107,16 @@
     if (!current) return;
     untrack(() => {
       void (current === 'success' ? loadSubscription() : ensureSubscription());
+      // The old confirmation page says it all; no banner on the next page too.
+      if (current === 'success') clearCheckoutResult();
     });
   });
 </script>
 
 {#snippet body(p: BridgeBillingPage)}
+  {#if p === 'manage' && checkoutNotice}
+    <BridgeCheckoutNotice />
+  {/if}
   {#if heading}
     {@render heading(p)}
   {:else}
@@ -89,15 +124,21 @@
   {/if}
 
   {#if p === 'manage'}
-    <div class="bridge-billing-current">
-      <span class="bridge-billing-label">Current plan</span>
-      <BridgeSubscriptionStatus />
+    <p class="bridge-billing-text">Your plan, what it includes, and billing.</p>
+    <div class="bridge-billing-summary" data-bridge-billing-summary>
+      <div class="bridge-billing-summary-plan">
+        <span class="bridge-billing-label">Current plan</span>
+        <BridgeSubscriptionStatus class="bridge-billing-summary-status" />
+        {#if meta}
+          <span class="bridge-billing-summary-meta" data-bridge-billing-meta>{meta}</span>
+        {/if}
+      </div>
       <BillingPortalButton />
     </div>
-    <PlanSelector successRedirect={at('success')} cancelRedirect={base} />
+    <PlanSelector heading="Change plan" successRedirect={successTarget} cancelRedirect={base} />
   {:else if p === 'plan'}
     <p class="bridge-billing-text">Pick a plan to start using the app.</p>
-    <PlanSelector successRedirect={at('success')} cancelRedirect={at('plan')} />
+    <PlanSelector successRedirect={successTarget} cancelRedirect={at('plan')} />
   {:else if p === 'success'}
     <p class="bridge-billing-text">Your plan is active.</p>
     <div class="bridge-billing-current">
@@ -152,6 +193,11 @@
     opacity: 0.8;
   }
 
+  /* The subtitle sits with its heading, closer than the page's gap. */
+  .bridge-billing-heading + .bridge-billing-text {
+    margin-top: -0.75rem;
+  }
+
   .bridge-billing-current {
     display: flex;
     flex-wrap: wrap;
@@ -159,6 +205,23 @@
     gap: 0.75rem;
   }
 
+  /* The current-plan panel's layout; its surface is in styles.css. */
+  .bridge-billing-summary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .bridge-billing-summary-plan {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
   .bridge-billing-label {
     font-size: 0.75rem;
     font-weight: 600;

package/dist/client/components/subscription/BridgeBillingRoutes.svelte.d.ts

@@ -8,6 +8,9 @@ interface Props {
     heading?: Snippet<[BridgeBillingPage]>;
     /** Where "Continue" on the success page goes. @default '/' */
     redirectTo?: string;
+    /** The "you're on Pro now" banner on the subscription page after a
+     *  checkout. `false` hides it. @default true */
+    checkoutNotice?: boolean;
 }
 declare const BridgeBillingRoutes: import("svelte").Component<Props, {}, "">;
 type BridgeBillingRoutes = ReturnType<typeof BridgeBillingRoutes>;

package/dist/client/components/subscription/BridgeCheckoutNotice.svelte

@@ -0,0 +1,101 @@
+<!--
+  TBP-813 — the "you're on Pro now" banner after a checkout.
+
+  A completed checkout (or a Free pick) lands on `billing.successRoute`, the
+  subscription page by default, which shows this banner itself. To land
+  somewhere else and still say so, put it on that page or in the layout:
+
+    <BridgeCheckoutNotice />
+
+  It renders nothing until a checkout has just completed, shows once, and is
+  gone after a reload. `children` replaces the text and receives the result;
+  for a message of your own anywhere else, read `checkoutResult`.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
+  import { useBridge, type BillingSubscriptionSnapshot, type Plan } from '@nebulr-group/bridge-auth-core';
+  import { subscriptionStore } from '../../../core/bridge-instance.js';
+  import { checkoutResult, clearCheckoutResult, type BridgeCheckoutResult } from '../../checkout-result.js';
+
+  interface Props {
+    /** Optional class on the banner. */
+    class?: string;
+    /** Show a close button. @default true */
+    dismissible?: boolean;
+    /** Replaces the banner's text. Receives the result, with the plan name when known. */
+    children?: Snippet<[Omit<BridgeCheckoutResult, 'planName'> & { planName: string | null }]>;
+  }
+
+  let { class: className = '', dismissible = true, children }: Props = $props();
+
+  let shown = $state<BridgeCheckoutResult | null>(null);
+  let snapshot = $state<BillingSubscriptionSnapshot | null>(null);
+  const unsubs: Array<() => void> = [];
+
+  onMount(() => {
+    // Take the result as soon as it is set, so it shows once — including on a
+    // page that is already open when a Free pick lands back on it.
+    unsubs.push(
+      checkoutResult.subscribe((value) => {
+        if (!value) return;
+        shown = value;
+        queueMicrotask(clearCheckoutResult);
+      }),
+    );
+    try {
+      const sub = useBridge().subscription;
+      snapshot = sub.snapshot();
+      unsubs.push(sub.subscribe((s) => (snapshot = s)));
+    } catch {
+      /* Bridge not initialised: the banner goes without the plan name */
+    }
+  });
+
+  onDestroy(() => unsubs.forEach((u) => u()));
+
+  const planName = $derived.by<string | null>(() => {
+    if (shown?.planName) return shown.planName;
+    if (snapshot?.state?.plan.name) return snapshot.state.plan.name;
+    const plan = $subscriptionStore.status?.plan;
+    return plan && typeof plan === 'object' ? ((plan as Plan).name ?? null) : null;
+  });
+</script>
+
+{#if shown}
+  <div
+    class={`bridge-checkout-notice ${className}`}
+    data-bridge-checkout-notice
+    data-kind={shown.kind}
+    role="status"
+  >
+    <svg class="bridge-checkout-notice-icon" width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="1.6" />
+      <path d="M6 10.2l2.6 2.6L14 7.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+    <div class="bridge-checkout-notice-body">
+      {#if children}
+        {@render children({ ...shown, planName })}
+      {:else}
+        <strong class="bridge-checkout-notice-title">
+          {planName ? `You're on ${planName} now` : 'Your new plan is active'}
+        </strong>
+        <span class="bridge-checkout-notice-text">
+          {shown.kind === 'checkout'
+            ? 'Your payment went through and the new plan is active.'
+            : 'The change takes effect right away.'}
+        </span>
+      {/if}
+    </div>
+    {#if dismissible}
+      <button
+        type="button"
+        class="bridge-checkout-notice-close"
+        aria-label="Dismiss"
+        onclick={() => (shown = null)}
+      >
+        ×
+      </button>
+    {/if}
+  </div>
+{/if}

package/dist/client/components/subscription/BridgeCheckoutNotice.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type BridgeCheckoutResult } from '../../checkout-result.js';
+interface Props {
+    /** Optional class on the banner. */
+    class?: string;
+    /** Show a close button. @default true */
+    dismissible?: boolean;
+    /** Replaces the banner's text. Receives the result, with the plan name when known. */
+    children?: Snippet<[Omit<BridgeCheckoutResult, 'planName'> & {
+        planName: string | null;
+    }]>;
+}
+declare const BridgeCheckoutNotice: import("svelte").Component<Props, {}, "">;
+type BridgeCheckoutNotice = ReturnType<typeof BridgeCheckoutNotice>;
+export default BridgeCheckoutNotice;

package/dist/client/components/subscription/BridgePaywallPage.svelte

@@ -13,8 +13,8 @@
   page has ever been visited — that is what the config line is for. Mounted
   anywhere else, this page says so in the dev console.
 
-  A completed checkout lands on the subscription success page
-  (`<billing.manageRoute>/success`); a cancelled one comes back here.
+  A completed checkout lands on `billing.successRoute` (the subscription page,
+  with a confirmation banner, by default); a cancelled one comes back here.
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
@@ -31,7 +31,7 @@
     heading?: string;
     /** Content between the heading and the plans — a welcome line, a checklist. */
     children?: Snippet;
-    /** Where a completed checkout lands. @default `<billing.manageRoute>/success` */
+    /** Where a completed checkout lands. @default `billing.successRoute`, else the subscription page */
     successRedirect?: string;
     /** Where a cancelled checkout lands. @default this page */
     cancelRedirect?: string;

package/dist/client/components/subscription/BridgePaywallPage.svelte.d.ts

@@ -5,7 +5,7 @@ interface Props {
     heading?: string;
     /** Content between the heading and the plans — a welcome line, a checklist. */
     children?: Snippet;
-    /** Where a completed checkout lands. @default `<billing.manageRoute>/success` */
+    /** Where a completed checkout lands. @default `billing.successRoute`, else the subscription page */
     successRedirect?: string;
     /** Where a cancelled checkout lands. @default this page */
     cancelRedirect?: string;

package/dist/client/components/subscription/PlanSelector.svelte

@@ -7,6 +7,8 @@
   import { ensureSubscription, getBridgeAuth, loadSubscription, subscriptionStore } from '../../../core/bridge-instance.js';
   import { refreshBilling } from '../../../core/billing-store.js';
   import { pickPlan } from './plan-pick.js';
+  import { formatAmount, intervalSuffix, minAmount, pickKind, pickLabel } from './plan-format.js';
+  import { markCheckoutComplete } from '../../checkout-result.js';
   import { getConfig } from '../../stores/config.store.js';
   import Alert from '../sdk-auth/shared/Alert.svelte';
   import Spinner from '../sdk-auth/shared/Spinner.svelte';
@@ -14,6 +16,8 @@
   type BillingInterval = PriceOfferSdk['recurrenceInterval'];
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** A heading above the plans, beside the Monthly/Yearly switch (TBP-813). */
+    heading?: string;
     successRedirect?: string;
     cancelRedirect?: string;
     /**
@@ -36,6 +40,7 @@
   }
 
   let {
+    heading,
     successRedirect = '/subscription',
     cancelRedirect = '/subscription',
     defaultInterval = 'year',
@@ -135,11 +140,6 @@
     return (plan as Plan & { features?: ReadonlyArray<{ key: string; name: string }> }).features ?? [];
   }
 
-  function minAmount(plan: Plan): number {
-    const amounts = (plan.prices ?? []).map((p) => p.amount);
-    return amounts.length > 0 ? Math.min(...amounts) : Number.POSITIVE_INFINITY;
-  }
-
   type UiState = 'idle' | 'payment-failed' | 'setup-payments' | 'select-plan' | 'active' | 'trial';
 
   const uiState = $derived<UiState>((() => {
@@ -187,15 +187,13 @@
   let successNotice = $state<string | null>(null);
   let successTimer: ReturnType<typeof setTimeout> | undefined;
 
-  const currentPlanName = $derived.by(() => {
-    const found = (plans ?? []).find((p) => p.key === currentPlanKey);
-    return found?.name ?? currentPlanKey ?? 'your current plan';
-  });
+  const currentPlan = $derived((plans ?? []).find((p) => p.key === currentPlanKey) ?? null);
+  const currentPlanName = $derived(currentPlan?.name ?? currentPlanKey ?? 'your current plan');
 
   function formatPrice(price: PriceOfferSdk): string {
     return price.amount === 0
       ? 'Free'
-      : `${price.amount} ${price.currency.toUpperCase()} / ${price.recurrenceInterval}`;
+      : `${formatAmount(price.amount, price.currency)} ${intervalSuffix(price)}`;
   }
 
   function showSuccess(message: string): void {
@@ -244,6 +242,7 @@
           leave: (url) => {
             window.location.href = url;
           },
+          complete: (picked) => markCheckoutComplete({ kind: 'plan', planName: picked.name }),
         },
       );
       if (outcome === 'confirm') {
@@ -320,7 +319,7 @@
         </div>
       {/if}
     {:else if plans}
-      {#if showIntervalTabs}
+      {#snippet intervalTabs()}
         <div
           class="bridge-plan-interval-tabs"
           data-bridge-plan-interval-tabs
@@ -339,6 +338,15 @@
             </button>
           {/each}
         </div>
+      {/snippet}
+
+      {#if heading}
+        <div class="bridge-plan-head" data-bridge-plan-head>
+          <h2 class="bridge-plan-heading">{heading}</h2>
+          {#if showIntervalTabs}{@render intervalTabs()}{/if}
+        </div>
+      {:else if showIntervalTabs}
+        {@render intervalTabs()}
       {/if}
 
       <div class="bridge-plan-cards" data-bridge-plan-cards>
@@ -346,6 +354,7 @@
           {@const isCurrent = plan.key === currentPlanKey}
           {@const onPick = (price: PriceOfferSdk) => handlePick(plan, price)}
           {@const visiblePrices = pricesForInterval(plan)}
+          {@const kind = pickKind(plan, currentPlan)}
 
           {#if planCard}
             {@render planCard({ plan, prices: plan.prices, isCurrent, interval: selectedInterval, onPick })}
@@ -354,8 +363,12 @@
               data-bridge-plan-card
               data-current={isCurrent}
               data-trial={plan.trial}
+              data-pick={kind}
               class="bridge-plan-card"
             >
+              {#if isCurrent}
+                <span class="bridge-plan-current-flag" data-bridge-plan-current-flag>Your plan</span>
+              {/if}
               <div class="bridge-plan-card-header">
                 <h3 class="bridge-plan-name">{plan.name}</h3>
                 {#if plan.trial && (plan.trialDays ?? 0) > 0}
@@ -363,6 +376,13 @@
                 {/if}
               </div>
 
+              {#if visiblePrices[0]}
+                <div class="bridge-plan-price" data-bridge-plan-price>
+                  <span class="bridge-plan-price-amount">{formatAmount(visiblePrices[0].amount, visiblePrices[0].currency)}</span>
+                  <span class="bridge-plan-price-interval">{intervalSuffix(visiblePrices[0])}</span>
+                </div>
+              {/if}
+
               {#if planDescription}
                 {@render planDescription({ plan, isCurrent })}
               {:else if plan.description}
@@ -372,7 +392,12 @@
               {#if planFeatures(plan).length > 0}
                 <ul class="bridge-plan-features" data-bridge-plan-features aria-label={`Included in ${plan.name}`}>
                   {#each planFeatures(plan) as feature (feature.key)}
-                    <li class="bridge-plan-feature" data-feature={feature.key}>{feature.name}</li>
+                    <li class="bridge-plan-feature" data-feature={feature.key}>
+                      <svg class="bridge-plan-feature-check" width="14" height="14" viewBox="0 0 16 16" aria-hidden="true">
+                        <path d="M3 8.5l3.2 3L13 4.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      </svg>
+                      <span>{feature.name}</span>
+                    </li>
                   {/each}
                 </ul>
               {/if}
@@ -380,27 +405,21 @@
               <div class="bridge-plan-prices">
                 {#each visiblePrices as price (price.recurrenceInterval + price.currency)}
                   <button
-                    class="bridge-btn-primary bridge-plan-select-btn"
+                    class={`${kind === 'current' || kind === 'switch' ? 'bridge-btn-secondary' : 'bridge-btn-primary'} bridge-plan-select-btn`}
                     disabled={isCurrent || picking}
                     onclick={() => onPick(price)}
                   >
-                    {#if isCurrent}
-                      Current plan
-                    {:else if price.amount === 0}
-                      Select free plan
-                    {:else}
-                      {price.amount} {price.currency.toUpperCase()} / {price.recurrenceInterval}
-                    {/if}
+                    {pickLabel(kind, plan)}{#if visiblePrices.length > 1 && !isCurrent}{` · ${formatAmount(price.amount, price.currency)}`}{/if}
                   </button>
                 {/each}
 
                 {#if plan.prices.length === 0}
                   <button
-                    class="bridge-btn-primary bridge-plan-select-btn"
+                    class={`${kind === 'current' || kind === 'switch' ? 'bridge-btn-secondary' : 'bridge-btn-primary'} bridge-plan-select-btn`}
                     disabled={isCurrent || picking}
                     onclick={() => handlePick(plan, { id: '', amount: 0, currency: 'usd', recurrenceInterval: 'month' })}
                   >
-                    {isCurrent ? 'Current plan' : 'Select plan'}
+                    {pickLabel(kind, plan)}
                   </button>
                 {:else if visiblePrices.length === 0}
                   <p class="bridge-plan-unavailable" data-bridge-plan-unavailable>

package/dist/client/components/subscription/PlanSelector.svelte.d.ts

@@ -3,6 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { Plan, PriceOfferSdk } from '@nebulr-group/bridge-auth-core';
 type BillingInterval = PriceOfferSdk['recurrenceInterval'];
 interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** A heading above the plans, beside the Monthly/Yearly switch (TBP-813). */
+    heading?: string;
     successRedirect?: string;
     cancelRedirect?: string;
     /**

package/dist/client/components/subscription/plan-format.d.ts

@@ -0,0 +1,17 @@
+import type { BillingSubscriptionState, Plan, PriceOfferSdk } from '@nebulr-group/bridge-auth-core';
+/** `29` + `usd` → `$29`; `9.5` → `$9.50`. An unknown currency code falls back to `29 XYZ`. */
+export declare function formatAmount(amount: number, currency: string, locale?: string): string;
+/** The cheapest price a plan has in any interval; plans with none sort last. */
+export declare function minAmount(plan: Plan): number;
+/** What picking a plan does, relative to the current one. */
+export type PickKind = 'current' | 'choose' | 'upgrade' | 'switch';
+export declare function pickKind(plan: Plan, current: Plan | null | undefined): PickKind;
+/** The button text for a pick. */
+export declare function pickLabel(kind: PickKind, plan: Plan): string;
+/** `/ month`, after a price. */
+export declare function intervalSuffix(price: PriceOfferSdk): string;
+/**
+ * The line under the current plan's name: renewal or end date, and the card on
+ * file. Only what the billing state actually carries; empty when it has none.
+ */
+export declare function subscriptionMeta(state: BillingSubscriptionState | null | undefined, locale?: string): string;

package/dist/client/components/subscription/plan-format.js

@@ -0,0 +1,81 @@
+// TBP-813 — how the plan cards and the current-plan panel word things, as pure
+// functions. Prices are whole currency units (29 = 29 USD), as Bridge stores them.
+/** `29` + `usd` → `$29`; `9.5` → `$9.50`. An unknown currency code falls back to `29 XYZ`. */
+export function formatAmount(amount, currency, locale) {
+    const code = currency.toUpperCase();
+    try {
+        return new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: code,
+            minimumFractionDigits: Number.isInteger(amount) ? 0 : 2,
+            maximumFractionDigits: 2,
+        }).format(amount);
+    }
+    catch {
+        return `${amount} ${code}`;
+    }
+}
+/** The cheapest price a plan has in any interval; plans with none sort last. */
+export function minAmount(plan) {
+    const amounts = (plan.prices ?? []).map((p) => p.amount);
+    return amounts.length > 0 ? Math.min(...amounts) : Number.POSITIVE_INFINITY;
+}
+export function pickKind(plan, current) {
+    if (current && current.key === plan.key)
+        return 'current';
+    if (!current)
+        return 'choose';
+    return minAmount(plan) > minAmount(current) ? 'upgrade' : 'switch';
+}
+/** The button text for a pick. */
+export function pickLabel(kind, plan) {
+    switch (kind) {
+        case 'current':
+            return 'Current plan';
+        case 'upgrade':
+            return `Upgrade to ${plan.name}`;
+        case 'switch':
+            return `Switch to ${plan.name}`;
+        default:
+            return `Choose ${plan.name}`;
+    }
+}
+/** `/ month`, after a price. */
+export function intervalSuffix(price) {
+    return `/ ${price.recurrenceInterval}`;
+}
+function formatDate(iso, locale) {
+    if (!iso)
+        return null;
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    return d.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+/**
+ * The line under the current plan's name: renewal or end date, and the card on
+ * file. Only what the billing state actually carries; empty when it has none.
+ */
+export function subscriptionMeta(state, locale) {
+    if (!state)
+        return '';
+    const parts = [];
+    const renews = formatDate(state.renewsAt, locale);
+    const ends = formatDate(state.endsAt, locale);
+    if (state.status === 'trial') {
+        if (ends)
+            parts.push(`Trial ends ${ends}`);
+        else if (typeof state.daysLeft === 'number')
+            parts.push(`${state.daysLeft} days left in trial`);
+    }
+    else if (state.status === 'cancel_at_period_end' || state.status === 'canceled') {
+        if (ends)
+            parts.push(`Ends ${ends}`);
+    }
+    else if (renews) {
+        parts.push(`Renews ${renews}`);
+    }
+    if (state.cardLast4)
+        parts.push(`Card ending ${state.cardLast4}`);
+    return parts.join(' · ');
+}

package/dist/client/components/subscription/plan-pick.d.ts

@@ -29,6 +29,8 @@ export interface PlanPickDeps {
     navigate: (url: string) => unknown;
     /** Leave the app (Stripe checkout). */
     leave: (url: string) => void;
+    /** TBP-813 — record that the plan changed, for the landing page's banner. */
+    complete?: (plan: Plan) => void;
 }
 /** `selected`: the plan changed here. `confirm`: ask first. `checkout`: off to Stripe. */
 export type PlanPickOutcome = 'selected' | 'confirm' | 'checkout';

package/dist/client/components/subscription/plan-pick.js

@@ -5,7 +5,8 @@
 // the page passed `onSelect`: the person was left on the plan picker, looking
 // as if nothing had happened. It now goes on exactly like a paid pick does —
 // to `successRedirect`, where a Stripe checkout returns — unless the page took
-// over with `onSelect`. Every pick that changed the plan re-reads the billing
+// over with `onSelect`. TBP-813: it also records the pick, so the landing page
+// shows the same confirmation banner a checkout gets. Every pick that changed the plan re-reads the billing
 // store (plan list, current plan, billing state) first, so the next page shows
 // the new plan.
 /** A $0 price on a plan with no metered cost is picked without checkout. */
@@ -43,5 +44,6 @@ async function settle(plan, price, opts, deps) {
         opts.onSelect({ plan, price });
         return;
     }
+    deps.complete?.(plan);
     await deps.navigate(opts.successRedirect);
 }

package/dist/index.d.ts

@@ -53,6 +53,9 @@ export { default as PlanSelector } from './client/components/subscription/PlanSe
 export { default as BridgeBillingRoutes } from './client/components/subscription/BridgeBillingRoutes.svelte';
 export { default as BridgePaywallPage } from './client/components/subscription/BridgePaywallPage.svelte';
 export { default as BillingPortalButton } from './client/components/subscription/BillingPortalButton.svelte';
+export { default as BridgeCheckoutNotice } from './client/components/subscription/BridgeCheckoutNotice.svelte';
+export { checkoutResult, takeCheckoutResult, clearCheckoutResult } from './client/checkout-result.js';
+export type { BridgeCheckoutResult } from './client/checkout-result.js';
 export { BRIDGE_BILLING_PAGES, BRIDGE_BILLING_DEFAULTS, parseBridgeBillingRoute } from './client/billing-routes.js';
 export type { BridgeBillingPage, BridgeBillingRoute } from './client/billing-routes.js';
 export { default as BridgeSubscriptionStatus } from './client/components/subscription/BridgeSubscriptionStatus.svelte';

package/dist/index.js

@@ -78,6 +78,10 @@ export { default as PlanSelector } from './client/components/subscription/PlanSe
 export { default as BridgeBillingRoutes } from './client/components/subscription/BridgeBillingRoutes.svelte';
 export { default as BridgePaywallPage } from './client/components/subscription/BridgePaywallPage.svelte';
 export { default as BillingPortalButton } from './client/components/subscription/BillingPortalButton.svelte';
+// TBP-813 — a completed checkout lands on `billing.successRoute` (the
+// subscription page by default); this banner, or `checkoutResult`, says so.
+export { default as BridgeCheckoutNotice } from './client/components/subscription/BridgeCheckoutNotice.svelte';
+export { checkoutResult, takeCheckoutResult, clearCheckoutResult } from './client/checkout-result.js';
 export { BRIDGE_BILLING_PAGES, BRIDGE_BILLING_DEFAULTS, parseBridgeBillingRoute } from './client/billing-routes.js';
 // Billing 2.0 (Phase A / US-2) — canonical-model drop-in.
 // Parallel to PlanSelector (which consumes the Stripe-direct path); these

package/dist/shared/types/config.d.ts

@@ -38,10 +38,17 @@ export interface BridgeConfig extends BridgeAuthConfig {
          *  @default '/subscription/error' */
         paymentErrorRoute?: string;
         /** The subscription page — the default destination of the Upgrade/Manage
-         *  CTA in <BridgeQuotaBanner> and <BridgeBillingNotice>. A completed
-         *  checkout lands on `<manageRoute>/success` by default.
+         *  CTA in <BridgeQuotaBanner> and <BridgeBillingNotice>, and where a
+         *  completed checkout lands unless `successRoute` says otherwise.
          *  @default '/subscription' */
         manageRoute?: string;
+        /** Where a completed checkout, or a Free plan pick, lands: any page of your
+         *  app, e.g. `'/dashboard'`. The subscription page shows a confirmation
+         *  banner; anywhere else, render `<BridgeCheckoutNotice />` for the same
+         *  banner, or read `checkoutResult` for your own message. The old
+         *  confirmation page is `'/subscription/success'`.
+         *  @default the subscription page (`manageRoute`) */
+        successRoute?: string;
         /** The dialog `<BridgeBootstrap />` opens when your backend refuses a
          *  request because a plan limit is reached — a `402` whose JSON body has
          *  `code: 'QUOTA_EXCEEDED'`, which bridge-nestjs's `@RequireQuota` sends

package/dist/styles.css

@@ -30,6 +30,8 @@
  *   --bridge-muted-bg         subtle fills: tab tracks, hovers, code boxes
  *   --bridge-border           input, table, card and secondary button borders
  *   --bridge-border-radius    corners of inputs, buttons, alerts, cards, dialogs
+ *   --bridge-card-bg          plan cards and the current-plan panel (defaults to --bridge-bg)
+ *   --bridge-card-shadow      their shadow; `none` for a flat look (dark apps often want it)
  *   --bridge-overlay          backdrop behind dialogs
  *   --bridge-alert-error-{bg,fg,border}     errors, critical billing notices
  *   --bridge-alert-success-{bg,fg,border}   confirmations, active plan badge
@@ -1044,6 +1046,26 @@
   margin-top: 0.75rem;
 }
 
+/* TBP-813 — a heading beside the interval switch (`heading` prop). */
+.bridge-plan-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.bridge-plan-heading {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+.bridge-plan-head .bridge-plan-interval-tabs {
+  margin: 0;
+}
+
 .bridge-plan-interval-tabs {
   /* Centered above the plan cards; flex + fit-content (not inline-flex) so
      auto margins can center it regardless of the host page's text alignment. */
@@ -1055,7 +1077,7 @@
   padding: 0.25rem;
   border: 1px solid var(--bridge-border);
   border-radius: var(--bridge-border-radius);
-  background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
+  background: var(--bridge-card-bg, var(--bridge-bg));
 }
 
 .bridge-plan-interval-tab {
@@ -1137,19 +1159,61 @@
 
 .bridge-plan-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 1rem;
+  align-items: stretch;
+}
+
+/* TBP-813 — cards, and the current-plan panel, are surfaces of their own, so
+   they read on any app background and take the app's tokens. */
+[data-bridge-plan-card],
+.bridge-billing-summary {
+  background: var(--bridge-card-bg, var(--bridge-bg));
+  color: var(--bridge-foreground);
+  border: 1px solid var(--bridge-border);
+  border-radius: calc(var(--bridge-border-radius) * 1.5);
+  box-shadow: var(--bridge-card-shadow, 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.04));
+}
+
+.bridge-billing-summary {
+  padding: 1.1rem 1.25rem;
+  background: color-mix(in srgb, var(--bridge-primary) 6%, var(--bridge-card-bg, var(--bridge-bg)));
+}
+
+.bridge-billing-summary .bss-plan {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.bridge-billing-summary-meta {
+  font-size: 0.85rem;
+  color: var(--bridge-muted);
+  font-variant-numeric: tabular-nums;
 }
 
 [data-bridge-plan-card] {
-  padding: 1.25rem;
+  position: relative;
+  padding: 1.35rem 1.25rem 1.25rem;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.9rem;
 }
 
 [data-bridge-plan-card][data-current="true"] {
-  outline: 2px solid currentColor;
+  border: 2px solid var(--bridge-primary);
+  padding: calc(1.35rem - 1px) calc(1.25rem - 1px) calc(1.25rem - 1px);
+}
+
+.bridge-plan-current-flag {
+  position: absolute;
+  top: -0.7rem;
+  left: 1.1rem;
+  padding: 0.15rem 0.55rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  background: var(--bridge-primary);
+  color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
 }
 
 .bridge-plan-card-header {
@@ -1169,22 +1233,62 @@
   display: inline-block;
   padding: 0.125rem 0.5rem;
   font-size: 0.7rem;
+  font-weight: 600;
   white-space: nowrap;
+  border-radius: 9999px;
+  border: 1px solid var(--bridge-alert-info-border);
+  background: var(--bridge-alert-info-bg);
+  color: var(--bridge-alert-info-fg);
+}
+
+.bridge-plan-price {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.bridge-plan-price-amount {
+  font-size: 1.9rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+
+.bridge-plan-price-interval {
+  font-size: 0.85rem;
+  color: var(--bridge-muted);
 }
 
 .bridge-plan-description {
   margin: 0;
   font-size: 0.875rem;
+  color: var(--bridge-muted);
 }
 
 /* TBP-755 — the features a plan includes. */
 .bridge-plan-features {
   margin: 0;
-  padding-left: 1.125rem;
+  padding: 0.9rem 0 0;
+  border-top: 1px solid var(--bridge-border);
+  list-style: none;
   font-size: 0.875rem;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.45rem;
+}
+
+.bridge-plan-feature {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.bridge-plan-feature-check {
+  flex: none;
+  margin-top: 0.2rem;
+  color: var(--bridge-primary);
 }
 
 .bridge-plan-prices {
@@ -1199,6 +1303,59 @@
   text-align: center;
 }
 
+[data-bridge-plan-card][data-current="true"] .bridge-plan-select-btn:disabled {
+  background: transparent;
+  color: var(--bridge-muted);
+  opacity: 1;
+}
+
+/* ─── BridgeCheckoutNotice (TBP-813) ─────────────────────────────────────── */
+
+.bridge-checkout-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--bridge-alert-success-border);
+  border-radius: var(--bridge-border-radius);
+  background: var(--bridge-alert-success-bg);
+  color: var(--bridge-alert-success-fg);
+  font-size: 0.875rem;
+}
+
+.bridge-checkout-notice-icon {
+  flex: none;
+  margin-top: 0.1rem;
+}
+
+.bridge-checkout-notice-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.bridge-checkout-notice-title {
+  display: block;
+  font-weight: 600;
+}
+
+.bridge-checkout-notice-close {
+  appearance: none;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 1.15rem;
+  line-height: 1;
+  padding: 0 0.2rem;
+  opacity: 0.7;
+}
+
+.bridge-checkout-notice-close:hover,
+.bridge-checkout-notice-close:focus-visible {
+  opacity: 1;
+}
+
 /* ─── WorkspaceSelector ─────────────────────────────────────────────── */
 
 [data-bridge-workspace-selector] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebulr-group/bridge-svelte",
-  "version": "0.9.1",
+  "version": "0.9.2-beta.0",
   "description": "The Bridge for SvelteKit: sign-in, workspaces and roles, feature flags, Stripe subscriptions and plan limits in one .env line and three files.",
   "author": "Iman Pouya",
   "license": "MIT",