@startsimpli/billing 0.4.23 → 0.4.25

package/src/components/SubscriptionManager.tsx

@@ -12,15 +12,28 @@
  *   />
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useSubscription } from "../hooks/useSubscription";
 import { useProduct } from "../hooks/useProduct";
 import { usePortal } from "../hooks/usePortal";
 import { useCheckout } from "../hooks/useCheckout";
 import { useUsage } from "../hooks/useUsage";
 import { useSuccessSync } from "../hooks/useSuccessSync";
-import type { OfferFeature, ProductOffer } from "../types";
+import { usePlanChange } from "../hooks/usePlanChange";
+import type { OfferFeature, PlanChangePreview, ProductOffer } from "../types";
 import { CurrentPlanCard } from "./CurrentPlanCard";
+import { PlanChangeConfirm } from "./PlanChangeConfirm";
+import {
+  isPayingSubscription,
+  isUnlistedOffer,
+  planCtaLabel,
+  planDirection,
+  trialApplies,
+  TRIAL_NOTE_FEATURE_KEY,
+  type PlanDirection,
+} from "../utils/plan";
+import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers } from "./IntervalToggle";
+import { formatFeatureLabel } from "../utils/format";
 
 export interface SubscriptionManagerProps {
   /** Product slug (e.g., "raise-simpli") */
@@ -29,28 +42,33 @@ export interface SubscriptionManagerProps {
   /** URL to return to after portal session */
   returnUrl: string;
 
-  /** Called when user clicks an available plan's CTA button */
-  onPlanChange?: (offer: ProductOffer) => void;
+  /** Does a paid plan change once the viewer has chosen (and, when they
+   * already pay, confirmed) it — typically a checkout via useCheckout. Gets
+   * the backend's preview when one was made. Return "navigating" after
+   * sending the browser away; throw to show an error. */
+  onPlanChange?: (offer: ProductOffer, preview?: PlanChangePreview | null) => unknown;
 
-  /** Optional status message to display (e.g., after checkout redirect) */
-  statusMessage?: "success" | "cancelled" | "activating" | null;
+  /** Optional status message to display (e.g., after checkout redirect).
+   * "success" shows "Activating…" until the paid plan is actually found;
+   * "scheduled" is a change that takes effect at period end. */
+  statusMessage?: "success" | "cancelled" | "activating" | "scheduled" | null;
+
+  /** The checkout session id from the success URL ({CHECKOUT_SESSION_ID}),
+   * passed to success-sync so it reads the checkout that was paid. */
+  checkoutSessionId?: string | null;
 }
 
+/** How long to keep looking for a just-paid subscription before saying so. */
+const ACTIVATION_POLLS = 5;
+const ACTIVATION_POLL_MS = 2000;
+
 /** Render one OfferFeature row. Skips boolean-false (the plan _doesn't_ have
  * that feature so we don't pretend it does). Numeric limits surface as
  * "Unlimited X" (-1) / "Up to N X" / "X" (no limit attribute).
  * startsim-o7u — kills the blank gap between price and CTA on plan cards. */
 function FeatureRow({ feature }: { feature: OfferFeature }) {
-  const v = feature.value;
-  if (v === false) return null;
-
-  let label = feature.name;
-  if (typeof v === "number" || typeof feature.limit === "number") {
-    const limit = typeof feature.limit === "number" ? feature.limit
-                : typeof v === "number" ? v : null;
-    if (limit === -1) label = `Unlimited ${feature.name.toLowerCase()}`;
-    else if (limit !== null && limit > 0) label = `Up to ${limit} ${feature.name.toLowerCase()}`;
-  }
+  if (feature.value === false) return null;
+  const label = formatFeatureLabel(feature);
 
   return (
     <li className="flex items-start gap-2 text-sm text-gray-700">
@@ -63,22 +81,25 @@ function FeatureRow({ feature }: { feature: OfferFeature }) {
   );
 }
 
-function PlanFeatureList({ features }: { features: OfferFeature[] }) {
+function PlanFeatureList({ features, showTrialNote = true }: { features: OfferFeature[]; showTrialNote?: boolean }) {
   if (!features || features.length === 0) return null;
+  const shown = showTrialNote ? features : features.filter((f) => f.key !== TRIAL_NOTE_FEATURE_KEY);
   return (
     <ul data-testid="plan-features" className="space-y-1.5 mb-4">
-      {features.map((f) => <FeatureRow key={f.key} feature={f} />)}
+      {shown.map((f) => <FeatureRow key={f.key} feature={f} />)}
     </ul>
   );
 }
 
 /** Subtle trial copy below the price block on offers that ship a trial.
- * startsim-pih — so users know "Start Free Trial" actually IS a free trial. */
+ * startsim-pih — so users know "Start Free Trial" actually IS a free trial.
+ * No "no card required": checkout collects a card up front and the offer
+ * carries nothing that says otherwise (crochet_patterns-34n7). */
 function TrialCopy({ trialDays }: { trialDays: number }) {
   if (!trialDays || trialDays <= 0) return null;
   return (
     <p data-testid="trial-copy" className="-mt-1 mb-3 text-xs text-gray-500">
-      {trialDays}-day free trial · no card required
+      {trialDays}-day free trial
     </p>
   );
 }
@@ -171,6 +192,7 @@ export function SubscriptionManager({
   returnUrl,
   onPlanChange,
   statusMessage,
+  checkoutSessionId = null,
 }: SubscriptionManagerProps) {
   const { subscription, loading: subLoading, error: subError, refetch: refetchSubscription } = useSubscription(productId);
   const { product, loading: productLoading, error: productError, refetch: refetchProduct } = useProduct(productId);
@@ -178,6 +200,27 @@ export function SubscriptionManager({
   const { subscribeFree } = useCheckout();
   const { usage } = useUsage(productId);
   const { sync: successSync } = useSuccessSync();
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    subscription?.offer?.id ?? null,
+  );
+
+  // Free offers → POST /billing/subscribe-free/ then refetch (no Stripe
+  // round-trip for $0 plans — startsim-6vk). Paid offers → the app's
+  // onPlanChange (a checkout). Either way only after the viewer has confirmed
+  // a change to a plan they already have (crochet_patterns-lr7mj).
+  const proceed = useCallback(
+    async (offer: ProductOffer, preview: PlanChangePreview | null) => {
+      if (offer.isFree) {
+        await subscribeFree(offer.id);
+        await refetchSubscription();
+        return;
+      }
+      return onPlanChange?.(offer, preview);
+    },
+    [subscribeFree, refetchSubscription, onPlanChange],
+  );
+  const planChange = usePlanChange(proceed);
 
   // startsim-ngw — when the user lands on ?status=success (just back from
   // Stripe checkout), POST /billing/success-sync/ ONCE to populate the cache
@@ -185,18 +228,35 @@ export function SubscriptionManager({
   // webhook, then refetch the subscription. The ref guard prevents the effect
   // re-firing on React StrictMode double-invokes.
   const successSyncedRef = useRef(false);
+  // "syncing" until the paid plan is found or we have looked long enough.
+  // The banner said "activated" from the URL alone, beside "You're on the
+  // Free plan" when the sync had not found it (crochet_patterns-nag60).
+  const [activation, setActivation] = useState<"idle" | "syncing" | "done">("idle");
+  const planFoundRef = useRef(false);
+  // Back from a checkout (session id in the URL): only a paid row is the
+  // plan just bought. Otherwise any row the change produced counts.
+  planFoundRef.current = !!subscription?.offer && (!checkoutSessionId || !subscription.offer.isFree);
   useEffect(() => {
     if (statusMessage === "success" && !successSyncedRef.current) {
       successSyncedRef.current = true;
+      setActivation("syncing");
       (async () => {
         try {
-          await successSync();
-        } finally {
+          await successSync({ sessionId: checkoutSessionId, productSlug: productId });
+        } catch {
+          /* the refetch below still tells us what the backend has */
+        }
+        const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+        for (let i = 0; i < ACTIVATION_POLLS; i++) {
           await refetchSubscription();
+          await sleep(50); // let the refetched row render before reading it
+          if (planFoundRef.current) break;
+          if (i < ACTIVATION_POLLS - 1) await sleep(ACTIVATION_POLL_MS);
         }
+        setActivation("done");
       })();
     }
-  }, [statusMessage, successSync, refetchSubscription]);
+  }, [statusMessage, successSync, refetchSubscription, checkoutSessionId, productId]);
 
   // startsim-z6f: skeleton matching the final layout (current-plan box +
   // 2-card grid) so the transition from loading → loaded doesn't reflow.
@@ -233,56 +293,30 @@ export function SubscriptionManager({
   // BillingApiClient, but guard here too so CurrentPlanCard can never deref
   // `subscription.offer.*` on undefined and white-screen the page.
   const usableSubscription = subscription?.offer ? subscription : null;
-  const currentOfferId = usableSubscription?.offer?.id ?? null;
-  const currentOffer = usableSubscription?.offer ?? null;
-  // Show ALL offers in the Change Plan grid (not just non-current ones) so users
-  // can compare and see what they have. The card matching their current sub
-  // gets a "Current Plan" badge + disabled CTA. startsim-1f1.
-  const allOffers = product?.offers ?? [];
-
-  /** Per-card direction relative to the current subscription:
-   * - "current"   → user is on this exact offer → "Current Plan" badge, no action
-   * - "upgrade"   → card is a higher tier (paid vs current free, or higher sortOrder)
-   * - "downgrade" → card is a lower tier (free when current is paid, or lower sortOrder)
-   * startsim-21f. */
-  type Direction = "current" | "upgrade" | "downgrade";
-  function directionFor(cardOffer: ProductOffer): Direction {
-    if (!currentOffer) return "upgrade"; // legacy: no sub → every card is an upgrade
-    if (cardOffer.id === currentOffer.id) return "current";
-    // Free vs Paid: paid is always an upgrade, free is always a downgrade.
-    if (cardOffer.isFree && !currentOffer.isFree) return "downgrade";
-    if (!cardOffer.isFree && currentOffer.isFree) return "upgrade";
-    // Both paid → compare sortOrder (apps order their tiers low → high).
-    return cardOffer.sortOrder > currentOffer.sortOrder ? "upgrade" : "downgrade";
-  }
-
-  /** Visible CTA label for the card, branching on direction. The default
-   * `offer.ctaText` (e.g. "Start Free Trial") is for UPGRADE only — using it
-   * on a Free card when a Pro user is looking is the bug startsim-21f closes. */
-  function ctaLabelFor(cardOffer: ProductOffer, direction: Direction): string {
-    if (direction === "current") return "Current Plan";
-    if (direction === "downgrade") return `Downgrade to ${cardOffer.name}`;
-    return cardOffer.ctaText || `Upgrade to ${cardOffer.name}`;
-  }
-
-  // Branch the offer CTA internally so apps don't reinvent it:
-  // - Free offers → POST /billing/subscribe-free/ then refetch subscription
-  //   (no Stripe round-trip needed for $0 plans — startsim-6vk).
-  // - Paid offers → app-supplied onPlanChange (typically a Stripe checkout
-  //   redirect via useCheckout).
-  const handleOfferClick = async (offer: ProductOffer) => {
+  // No subscription row once the fetch has settled (404 → null; a signed-out
+  // viewer gets a 401 and the error branch above) means the free plan:
+  // that card reads "Current plan" and is disabled (crochet_patterns-34n7).
+  const freeOffer = product?.offers.find((o) => o.isFree) ?? null;
+  const onFreeByDefault = !usableSubscription && !subLoading && !subError && freeOffer !== null;
+  const currentOffer = usableSubscription?.offer ?? (onFreeByDefault ? freeOffer : null);
+  const tierKeyOf = (offerId: string) =>
+    entries.find(({ tier }) => tier.monthly?.id === offerId || tier.annual?.id === offerId)?.tier.key ?? null;
+  // Show every tier in the Change Plan grid (not just non-current ones) so
+  // users can compare and see what they have; `entries` is one offer per tier
+  // for the chosen interval. The card matching their current plan gets a
+  // "Current plan" badge + disabled CTA. startsim-1f1, crochet_patterns-34n7.
+
+  // Direction and label per card, shared with /pricing (utils/plan):
+  // startsim-21f, crochet_patterns-anw61.
+  const paying = isPayingSubscription(usableSubscription);
+  const onUnlistedPlan = !!product && isUnlistedOffer(product.offers, usableSubscription?.offer);
+  const directionFor = (cardOffer: ProductOffer): PlanDirection =>
+    planDirection(cardOffer, currentOffer, tierKeyOf);
+
+  const handleOfferClick = (offer: ProductOffer) => {
     // Non-owner viewers can SEE the plans but can't change them — startsim-wo9.
     if (subscription?.viewerIsOwner === false) return;
-    if (offer.isFree) {
-      try {
-        await subscribeFree(offer.id);
-        await refetchSubscription();
-      } catch {
-        /* Error captured by hook state — banner not added here yet. */
-      }
-      return;
-    }
-    onPlanChange?.(offer);
+    void planChange.choose(offer, { paying, leavingUnlisted: onUnlistedPlan, currentOffer });
   };
 
   // The "Upgrade" CTA on the current-plan card points at the NEXT tier above
@@ -316,7 +350,7 @@ export function SubscriptionManager({
 
   return (
     <div data-testid="subscription-manager" className="max-w-3xl mx-auto px-6 py-12 space-y-8">
-      {statusMessage === "success" && (
+      {statusMessage === "success" && activation === "done" && planFoundRef.current && (
         <div data-testid="status-banner-success" className="rounded-xl bg-green-50 border border-green-200 p-4 flex items-center gap-3">
           <svg className="w-5 h-5 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
@@ -334,7 +368,32 @@ export function SubscriptionManager({
         </div>
       )}
 
-      {statusMessage === "activating" && (
+      {statusMessage === "success" && activation === "done" && !planFoundRef.current && (
+        <div data-testid="status-banner-pending" role="status" className="rounded-xl bg-amber-50 border border-amber-200 p-4">
+          <p className="text-sm font-medium text-amber-900">
+            We haven&apos;t received the payment confirmation yet. It can take a minute; refresh this page to check again. Please don&apos;t pay a second time.
+          </p>
+        </div>
+      )}
+
+      {statusMessage === "scheduled" && (
+        <div data-testid="status-banner-scheduled" role="status" className="rounded-xl bg-blue-50 border border-blue-200 p-4">
+          <p className="text-sm font-medium text-blue-900">
+            Your plan change is scheduled.
+            {usableSubscription?.currentPeriodEnd
+              ? <> You keep your current plan until {new Date(usableSubscription.currentPeriodEnd).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" })}.</>
+              : <> You keep your current plan until the end of this billing period.</>}
+          </p>
+        </div>
+      )}
+
+      {planChange.error && !planChange.pending && (
+        <div data-testid="plan-change-error" role="alert" className="rounded-xl bg-red-50 border border-red-200 p-4">
+          <p className="text-sm text-red-700">{planChange.error}</p>
+        </div>
+      )}
+
+      {(statusMessage === "activating" || (statusMessage === "success" && activation !== "done")) && (
         <div data-testid="status-banner-activating" className="rounded-xl bg-blue-50 border border-blue-200 p-4 flex items-center gap-3">
           <svg className="w-5 h-5 text-blue-600 shrink-0 animate-spin" fill="none" viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
@@ -370,7 +429,8 @@ export function SubscriptionManager({
               usableSubscription.viewerIsOwner !== false && usableSubscription.offer.isFree && featuredPaidOffer ? (
                 <button
                   data-testid="upgrade-cta-current-plan"
-                  onClick={() => handleOfferClick(featuredPaidOffer)}
+                  onClick={() => !planChange.busy && handleOfferClick(featuredPaidOffer)}
+                  disabled={planChange.busy}
                   className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-bold rounded-xl bg-blue-600 text-white hover:bg-blue-700 cursor-pointer transition-colors"
                 >
                   Upgrade to {featuredPaidOffer.name} →
@@ -379,6 +439,11 @@ export function SubscriptionManager({
             }
           />
         </>
+      ) : statusMessage === "success" && activation !== "done" ? null : onFreeByDefault && freeOffer ? (
+        <div data-testid="free-by-default" className="text-center py-8">
+          <p className="text-lg text-gray-600">You&apos;re on the {freeOffer.name} plan</p>
+          <p className="text-sm text-gray-400 mt-1">Choose a plan below to upgrade.</p>
+        </div>
       ) : (
         <div className="text-center py-8">
           <p className="text-lg text-gray-600">No active subscription</p>
@@ -419,17 +484,20 @@ export function SubscriptionManager({
 
       {/* Only render the Change Plan section when there are at least 2 offers
           to show. Single-tier apps (just Free) skip it entirely — startsim-ft2. */}
-      {!productLoading && !productError && allOffers.length >= 2 && (
+      {!productLoading && !productError && entries.length >= 2 && (
         <div data-testid="available-plans" className="space-y-4">
           <h3 className="text-lg font-semibold text-gray-900">
             {subscription ? "Change Plan" : "Available Plans"}
           </h3>
+          {hasChoice && <IntervalToggle interval={interval} onChange={setInterval} />}
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {allOffers.map((offer) => {
+            {entries.map((entry) => {
+              const { offer, tier } = entry;
               const direction = directionFor(offer);
               const isCurrent = direction === "current";
-              const isDowngrade = direction === "downgrade";
-              const ctaLabel = ctaLabelFor(offer, direction);
+              const isDowngrade = direction === "downgrade" || direction === "switch";
+              const ctaLabel = planCtaLabel(offer, direction, paying);
+              const showTrial = trialApplies(offer, direction, paying);
 
               // Border: current = solid ring; featured upgrade = blue; else gray.
               const cardBorder =
@@ -459,36 +527,29 @@ export function SubscriptionManager({
                       data-testid={`current-plan-badge-${offer.slug}`}
                       className="absolute -top-2.5 right-4 inline-block bg-primary text-primary-foreground text-xs font-bold uppercase tracking-wide px-2.5 py-0.5 rounded-full"
                     >
-                      Current Plan
+                      Current plan
                     </span>
                   )}
-                  <h4 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h4>
+                  <h4 className="text-lg font-bold text-gray-900 mb-2">{tier.name}</h4>
                   <div className="mb-3">
-                    {offer.isFree ? (
-                      <span aria-label="Free">
-                        <span aria-hidden="true" className="text-2xl font-extrabold text-gray-900">Free</span>
-                      </span>
-                    ) : (
-                      <span aria-label={`${Math.floor(parseFloat(offer.unitPrice) || 0)} dollars ${offer.intervalDisplay}`}>
-                        <span aria-hidden="true" className="text-2xl font-extrabold text-gray-900">
-                          ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-                        </span>
-                        <span aria-hidden="true" className="text-sm text-gray-500 ml-1">
-                          {offer.intervalDisplay}
-                        </span>
-                      </span>
-                    )}
+                    <OfferPrice
+                      offer={offer}
+                      amountClassName="text-2xl font-extrabold text-gray-900"
+                      intervalClassName="text-sm text-gray-500"
+                    />
+                    <AnnualNote entry={entry} className="mt-1" />
                   </div>
                   {/* Trial copy is for prospective trialers only — once the
                       user is on this offer or moving downward, drop the
                       "14-day free trial" sales pitch. */}
-                  {direction === "upgrade" && <TrialCopy trialDays={offer.trialDays} />}
-                  <PlanFeatureList features={offer.features} />
+                  {showTrial && <TrialCopy trialDays={offer.trialDays} />}
+                  <PlanFeatureList features={offer.features} showTrialNote={showTrial || !(offer.trialDays > 0)} />
                   <button
                     data-testid={`upgrade-cta-${offer.slug}`}
-                    onClick={() => !isCurrent && !isViewerNonOwner && handleOfferClick(offer)}
-                    disabled={isCurrent || isViewerNonOwner}
-                    aria-disabled={isCurrent || isViewerNonOwner || undefined}
+                    onClick={() => !isCurrent && !isViewerNonOwner && !planChange.busy && handleOfferClick(offer)}
+                    disabled={isCurrent || isViewerNonOwner || planChange.busy}
+                    aria-disabled={isCurrent || isViewerNonOwner || planChange.busy || undefined}
+                    aria-busy={planChange.busy && planChange.pending?.offer.id === offer.id ? true : undefined}
                     title={isViewerNonOwner ? "Only the team owner can change the plan" : undefined}
                     className={`w-full py-2.5 px-4 text-sm font-bold rounded-xl transition-colors ${ctaClass} ${isViewerNonOwner ? "opacity-60 cursor-not-allowed" : ""}`}
                   >
@@ -523,6 +584,14 @@ export function SubscriptionManager({
           </button>
         </div>
       )}
+
+      <PlanChangeConfirm
+        state={planChange.pending}
+        confirming={planChange.confirming}
+        error={planChange.pending ? planChange.error : null}
+        onConfirm={planChange.confirm}
+        onCancel={planChange.cancel}
+      />
     </div>
   );
 }

package/src/components/UpgradeModal.tsx

@@ -11,14 +11,35 @@
 
 import React, { useEffect, useRef, useCallback } from "react";
 import { useProduct } from "../hooks/useProduct";
-import type { ProductOffer } from "../types";
+import type { PlanChangePreview, ProductOffer } from "../types";
 import { FeatureIcon } from "./FeatureIcon";
+import { formatFeatureLabel } from "../utils/format";
+import {
+  isPayingSubscription,
+  isUnlistedOffer,
+  planCtaLabel,
+  planDirection,
+  resolveCurrentOffer,
+  trialApplies,
+  TRIAL_NOTE_FEATURE_KEY,
+  type CurrentPlanState,
+} from "../utils/plan";
+import { usePlanChange } from "../hooks/usePlanChange";
+import { PlanChangeConfirm } from "./PlanChangeConfirm";
+import { AnnualNote, IntervalToggle, OfferPrice, useIntervalOffers } from "./IntervalToggle";
 
 export interface UpgradeModalProps {
   productId: string;
   open: boolean;
   onClose: () => void;
-  onSelectOffer?: (offer: ProductOffer) => void;
+  /** Does the purchase / change. For a viewer who already pays it runs only
+   * after they confirm the charge (crochet_patterns-anw61). Return
+   * "navigating" after sending the browser away; throw to show an error. */
+  onSelectOffer?: (offer: ProductOffer, preview?: PlanChangePreview | null) => unknown;
+
+  /** The viewer's plan, so their card reads "Current plan" and is disabled.
+   * Omit on signed-out pages. crochet_patterns-34n7. */
+  currentPlan?: CurrentPlanState | null;
 }
 
 export function UpgradeModal({
@@ -26,8 +47,26 @@ export function UpgradeModal({
   open,
   onClose,
   onSelectOffer,
+  currentPlan,
 }: UpgradeModalProps) {
   const { product, loading, error } = useProduct(productId);
+  const currentOffer = resolveCurrentOffer(product?.offers ?? [], currentPlan);
+  const { interval, setInterval, hasChoice, entries } = useIntervalOffers(
+    product?.offers ?? [],
+    currentOffer?.id ?? null,
+  );
+  const planChange = usePlanChange(async (offer, preview) => onSelectOffer?.(offer, preview));
+  const paying = !!currentOffer && isPayingSubscription(currentPlan?.subscription);
+  const onUnlistedPlan = isUnlistedOffer(product?.offers ?? [], currentOffer);
+  const tierKeyOf = (offerId: string) =>
+    entries.find(({ tier }) => tier.monthly?.id === offerId || tier.annual?.id === offerId)?.tier.key ?? null;
+  const select = (offer: ProductOffer) => {
+    if (!currentOffer) {
+      onSelectOffer?.(offer);
+      return;
+    }
+    void planChange.choose(offer, { paying, leavingUnlisted: onUnlistedPlan, currentOffer });
+  };
   const modalRef = useRef<HTMLDivElement>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
 
@@ -120,10 +159,23 @@ export function UpgradeModal({
           </div>
         )}
 
+        {product && hasChoice && (
+          <div className="mb-6">
+            <IntervalToggle interval={interval} onChange={setInterval} />
+          </div>
+        )}
+
         {product && (
           <div data-testid="upgrade-offers" className="flex flex-wrap justify-center gap-5">
-            {product.offers.map((offer) => {
+            {entries.map((entry) => {
+              const { offer, tier } = entry;
               const isFeatured = offer.isFeatured;
+              const direction = currentOffer ? planDirection(offer, currentOffer, tierKeyOf) : null;
+              const isCurrent = direction === "current";
+              const trial = direction ? trialApplies(offer, direction, paying) : offer.trialDays > 0;
+              const features = trial || !(offer.trialDays > 0)
+                ? offer.features
+                : offer.features.filter((f) => f.key !== TRIAL_NOTE_FEATURE_KEY);
               return (
                 <div
                   key={offer.id}
@@ -136,59 +188,69 @@ export function UpgradeModal({
                     }
                   `}
                 >
-                  <h3 className="text-lg font-bold text-gray-900 mb-2">{offer.name}</h3>
+                  <h3 className="text-lg font-bold text-gray-900 mb-2">{tier.name}</h3>
 
                   <div className="mb-2">
-                    {offer.isFree ? (
-                      <span aria-label="Free">
-                        <span aria-hidden="true" className="text-2xl font-extrabold text-gray-900">Free</span>
-                      </span>
-                    ) : (
-                      <span aria-label={`${Math.floor(parseFloat(offer.unitPrice) || 0)} dollars ${offer.intervalDisplay}`}>
-                        <span aria-hidden="true" className="text-2xl font-extrabold text-gray-900">
-                          ${Math.floor(parseFloat(offer.unitPrice) || 0)}
-                        </span>
-                        <span aria-hidden="true" className="text-sm text-gray-500"> {offer.intervalDisplay}</span>
-                      </span>
-                    )}
+                    <OfferPrice
+                      offer={offer}
+                      amountClassName="text-2xl font-extrabold text-gray-900"
+                      intervalClassName="text-sm text-gray-500"
+                    />
+                    <AnnualNote entry={entry} className="mt-1" />
                   </div>
 
-                  {offer.trialDays > 0 && (
-                    <span className="inline-block bg-blue-50 text-blue-700 text-xs font-semibold px-2.5 py-0.5 rounded-md mb-3 w-fit">
+                  {trial && (
+                    <span data-testid={`trial-pill-${offer.slug}`} className="inline-block bg-blue-50 text-blue-700 text-xs font-semibold px-2.5 py-0.5 rounded-md mb-3 w-fit">
                       {offer.trialDays}-day free trial
                     </span>
                   )}
 
-                  {offer.features.length > 0 && (
+                  {features.length > 0 && (
                     <ul className="list-none p-0 m-0 mb-4 flex-1 space-y-0">
-                      {offer.features.map((f) => (
+                      {features.map((f) => (
                         <li key={f.key} className="flex items-center gap-1.5 py-1 text-sm text-gray-600">
                           <FeatureIcon value={f.value} size="w-3.5 h-3.5" />
-                          {f.name}
+                          <span>{formatFeatureLabel(f)}</span>
                         </li>
                       ))}
                     </ul>
                   )}
 
                   <button
-                    onClick={() => onSelectOffer?.(offer)}
+                    onClick={() => !isCurrent && !planChange.busy && select(offer)}
                     data-testid={`upgrade-cta-${offer.slug}`}
+                    disabled={isCurrent || planChange.busy}
+                    aria-disabled={isCurrent || planChange.busy || undefined}
                     className={`
-                      w-full py-2.5 px-4 text-sm font-bold rounded-lg cursor-pointer transition-colors
-                      ${isFeatured
-                        ? "bg-blue-600 text-white hover:bg-blue-700"
-                        : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+                      w-full py-2.5 px-4 text-sm font-bold rounded-lg transition-colors
+                      ${isCurrent
+                        ? "bg-gray-100 text-gray-500 cursor-not-allowed"
+                        : isFeatured
+                          ? "bg-blue-600 text-white hover:bg-blue-700 cursor-pointer"
+                          : "bg-gray-100 text-gray-800 hover:bg-gray-200 cursor-pointer"
                       }
                     `}
                   >
-                    {offer.ctaText}
+                    {isCurrent ? "Current plan" : direction ? planCtaLabel(offer, direction, paying) : offer.ctaText}
                   </button>
                 </div>
               );
             })}
           </div>
         )}
+        {planChange.error && !planChange.pending && (
+          <p data-testid="plan-change-error" role="alert" className="mt-4 rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
+            {planChange.error}
+          </p>
+        )}
       </div>
+      <PlanChangeConfirm
+        state={planChange.pending}
+        confirming={planChange.confirming}
+        error={planChange.pending ? planChange.error : null}
+        onConfirm={planChange.confirm}
+        onCancel={planChange.cancel}
+      />
     </div>
   );
 }