@carlonicora/nextjs-jsonapi 5.5.0 → 5.6.0

package/src/features/billing/stripe-coupon/utils/__tests__/to-promotion-code-result.spec.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { StripeCouponCodeInterface } from "../../data/stripe-coupon-code.interface";
+import { StripeCouponInterface } from "../../data/stripe-coupon.interface";
+import { toPromotionCodeResult } from "../to-promotion-code-result";
+
+const codeWith = (coupon: Partial<StripeCouponInterface>): StripeCouponCodeInterface =>
+  ({ stripePromotionCodeId: "promo_1", code: "FOUNDER", coupon }) as unknown as StripeCouponCodeInterface;
+
+describe("toPromotionCodeResult", () => {
+  it("maps a percentage coupon", () => {
+    expect(
+      toPromotionCodeResult(codeWith({ discountType: "percent_off", percentOff: 20, duration: "forever" })),
+    ).toEqual({
+      valid: true,
+      automatic: true,
+      promotionCodeId: "promo_1",
+      code: "FOUNDER",
+      discountType: "percent_off",
+      discountValue: 20,
+      duration: "forever",
+    });
+  });
+
+  it("maps a fixed-amount coupon to amountOff and its currency", () => {
+    const result = toPromotionCodeResult(
+      codeWith({
+        discountType: "amount_off",
+        amountOff: 500,
+        currency: "eur",
+        duration: "repeating",
+        durationInMonths: 3,
+      }),
+    );
+    expect(result.discountType).toBe("amount_off");
+    expect(result.discountValue).toBe(500);
+    expect(result.currency).toBe("eur");
+    expect(result.duration).toBe("repeating");
+    expect(result.durationInMonths).toBe(3);
+    expect(result.automatic).toBe(true);
+  });
+});

package/src/features/billing/stripe-coupon/utils/coupon-places.ts

@@ -0,0 +1,23 @@
+/**
+ * Places left on a code: the smaller of (coupon limit - coupon redeemed) and
+ * (code limit - code redeemed), counting only the limits that are set, never
+ * below zero. `null` = unlimited. Same rule as the backend `placesLeft`.
+ */
+type Redeemable = { maxRedemptions?: number; timesRedeemed: number };
+
+export function couponPlacesLeft(code: Redeemable, coupon: Redeemable): number | null {
+  const remaining = [code, coupon]
+    .filter((item) => typeof item.maxRedemptions === "number")
+    .map((item) => Math.max(0, (item.maxRedemptions as number) - (item.timesRedeemed ?? 0)));
+
+  return remaining.length === 0 ? null : Math.min(...remaining);
+}
+
+/** The smaller of the set limits, or `null` when neither is set. */
+export function couponPlacesTotal(code: Redeemable, coupon: Redeemable): number | null {
+  const limits = [code.maxRedemptions, coupon.maxRedemptions].filter(
+    (limit): limit is number => typeof limit === "number",
+  );
+
+  return limits.length === 0 ? null : Math.min(...limits);
+}

package/src/features/billing/stripe-coupon/utils/format-coupon-discount.ts

@@ -0,0 +1,36 @@
+import { formatCurrency } from "../../components/utils/currency";
+import { BillingFormatOptions, BillingTranslator } from "../../components/utils/format-options";
+import { StripeCouponDiscountType, StripeCouponDurationType } from "../data/stripe-coupon.interface";
+
+export type CouponDiscountShape = {
+  discountType: StripeCouponDiscountType;
+  percentOff?: number;
+  amountOff?: number; // minor units
+  currency?: string;
+  duration: StripeCouponDurationType;
+  durationInMonths?: number;
+};
+
+/** "20% off forever", "€5.00 off for 3 months", "€5.00 off once". */
+export function formatCouponDiscount(
+  coupon: CouponDiscountShape,
+  t: BillingTranslator,
+  fmt: BillingFormatOptions = {},
+): string {
+  const amount =
+    coupon.discountType === "percent_off"
+      ? t("billing.admin.coupons.discount.percent", { value: String(coupon.percentOff ?? 0) })
+      : t("billing.admin.coupons.discount.amount", {
+          amount: formatCurrency(coupon.amountOff, coupon.currency ?? "eur", fmt),
+        });
+
+  // Literal keys (no template) so the message validator sees every one in use.
+  const duration =
+    coupon.duration === "repeating"
+      ? t("billing.admin.coupons.discount.repeating", { months: String(coupon.durationInMonths ?? 0) })
+      : coupon.duration === "once"
+        ? t("billing.admin.coupons.discount.once")
+        : t("billing.admin.coupons.discount.forever");
+
+  return `${amount} ${duration}`;
+}

package/src/features/billing/stripe-coupon/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./coupon-places";
+export * from "./format-coupon-discount";
+export * from "./to-promotion-code-result";

package/src/features/billing/stripe-coupon/utils/to-promotion-code-result.ts

@@ -0,0 +1,23 @@
+import { PromotionCodeValidationResult } from "../../stripe-promotion-code/data/stripe-promotion-code.interface";
+import { StripeCouponCodeInterface } from "../data/stripe-coupon-code.interface";
+
+/**
+ * The automatic code as the wizard's promotion-code state, exactly as if the
+ * GM had typed and validated it.
+ */
+export function toPromotionCodeResult(code: StripeCouponCodeInterface): PromotionCodeValidationResult {
+  const coupon = code.coupon;
+  const discountType = coupon?.discountType;
+
+  return {
+    valid: true,
+    automatic: true,
+    promotionCodeId: code.stripePromotionCodeId,
+    code: code.code,
+    discountType,
+    discountValue: discountType === "amount_off" ? coupon?.amountOff : coupon?.percentOff,
+    currency: discountType === "amount_off" ? coupon?.currency : undefined,
+    duration: coupon?.duration,
+    durationInMonths: coupon?.durationInMonths,
+  };
+}

package/src/features/billing/stripe-customer/components/forms/PaymentMethodForm.tsx

@@ -10,9 +10,19 @@ type PaymentMethodFormProps = {
   onSuccess: () => void;
   onCancel: () => void;
   isLoading?: boolean;
+  /**
+   * Always make the new card the customer's default and hide the checkbox. The
+   * subscription wizard needs this: the next attempt must charge the card just added.
+   */
+  alwaysSetDefault?: boolean;
 };
 
-export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: PaymentMethodFormProps) {
+export function PaymentMethodForm({
+  onSuccess,
+  onCancel,
+  isLoading = false,
+  alwaysSetDefault = false,
+}: PaymentMethodFormProps) {
   const t = useTranslations();
   const stripe = useStripe();
   const elements = useElements();
@@ -75,7 +85,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
       }
 
       // Set as default if checkbox is checked
-      if (setAsDefault && confirmedSetupIntent?.payment_method) {
+      if ((alwaysSetDefault || setAsDefault) && confirmedSetupIntent?.payment_method) {
         await StripeCustomerService.setDefaultPaymentMethod({
           paymentMethodId:
             typeof confirmedSetupIntent.payment_method === "string"
@@ -132,12 +142,18 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
       </div>
 
       {/* Set as Default Checkbox */}
-      <div className="flex items-center gap-x-2">
-        <Checkbox id="setAsDefault" checked={setAsDefault} onCheckedChange={(checked) => setSetAsDefault(!!checked)} />
-        <Label htmlFor="setAsDefault" className="cursor-pointer font-normal">
-          {t("billing.ui.payment_form.set_default")}
-        </Label>
-      </div>
+      {!alwaysSetDefault && (
+        <div className="flex items-center gap-x-2">
+          <Checkbox
+            id="setAsDefault"
+            checked={setAsDefault}
+            onCheckedChange={(checked) => setSetAsDefault(!!checked)}
+          />
+          <Label htmlFor="setAsDefault" className="cursor-pointer font-normal">
+            {t("billing.ui.payment_form.set_default")}
+          </Label>
+        </div>
+      )}
 
       {/* Error Alert */}
       {error && (

package/src/features/billing/stripe-product/components/containers/ProductsListContainer.tsx

@@ -1,27 +1,42 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { RoundPageContainer } from "../../../../../components";
 import { Modules } from "../../../../../core";
+import { CouponProvider } from "../../../contexts/CouponContext";
 import { ProductProvider } from "../../../contexts/ProductContext";
+import { CouponsList } from "../../../stripe-coupon/components/lists/CouponsList";
 import { ProductsList } from "../lists/ProductsList";
 
 /**
- * Page container for the administrative product list.
+ * Page container for the administrative products page: two tabs, Products and
+ * Codes, with `sectionKey`s so the URL keeps the tab (`?section=codes`).
  *
  * Client component by necessity: `module={Modules.StripeProduct}` is a registry
  * entry carrying an icon component and methods, which a Server Component cannot
  * pass across the boundary. Routes mount this container instead — the same
  * shape as every other list page.
  *
- * No `forceHeader`: ContentListTable draws its own header row with the title
- * and the create action, exactly as the company and user list pages do.
+ * No `fullWidth`, on the page or the lists: the page keeps its title bar and
+ * each ContentListTable keeps its own bordered card in the tab (see ProductContainer). CouponProvider
+ * is nested with `publishChrome={false}`: SharedProvider REPLACES its value for
+ * the subtree (SharedContext.tsx:35-37), so a nested provider publishing chrome
+ * would blank the products page's own title.
  */
 export function ProductsListContainer() {
+  const t = useTranslations();
+
   return (
     <ProductProvider>
-      <RoundPageContainer module={Modules.StripeProduct} fullWidth>
-        <ProductsList fullWidth />
-      </RoundPageContainer>
+      <CouponProvider publishChrome={false}>
+        <RoundPageContainer
+          module={Modules.StripeProduct}
+          tabs={[
+            { sectionKey: "products", label: t("billing.admin.products.tabs.products"), content: <ProductsList /> },
+            { sectionKey: "codes", label: t("billing.admin.products.tabs.codes"), content: <CouponsList /> },
+          ]}
+        />
+      </CouponProvider>
     </ProductProvider>
   );
 }

package/src/features/billing/stripe-promotion-code/components/PromoCodeInput.tsx

@@ -29,6 +29,25 @@ export function PromoCodeInput({
   const locale = useI18nLocale();
   const [code, setCode] = useState("");
 
+  // Clear the typed text whenever a code becomes applied (typed or automatic):
+  // the box then reads empty after the applied code is removed, instead of
+  // still holding the removed code. Adjusting state during render on a prop
+  // change (React's "storing information from previous renders" pattern) —
+  // a failed validation keeps the text so the user can fix a typo.
+  const appliedKey = appliedCode?.valid
+    ? `${appliedCode.automatic ? "auto" : "typed"}:${appliedCode.code ?? ""}`
+    : null;
+  const [previousAppliedKey, setPreviousAppliedKey] = useState(appliedKey);
+  if (appliedKey !== previousAppliedKey) {
+    setPreviousAppliedKey(appliedKey);
+    if (appliedKey !== null) setCode("");
+  }
+
+  const handleRemove = () => {
+    setCode("");
+    onRemove();
+  };
+
   const handleApply = () => {
     if (code.trim()) {
       onApply(code.trim().toUpperCase());
@@ -67,6 +86,45 @@ export function PromoCodeInput({
     }
   };
 
+  const codeInput = (
+    <div className="space-y-2">
+      <div className="flex gap-2">
+        <Input
+          placeholder={t("billing.ui.promo_code.placeholder")}
+          value={code}
+          onChange={(e) => setCode(e.target.value.toUpperCase())}
+          onKeyDown={handleKeyDown}
+          disabled={disabled || isValidating}
+          className="flex-1"
+        />
+        <Button variant="outline" onClick={handleApply} disabled={disabled || isValidating || !code.trim()}>
+          {isValidating ? <Loader2 className="h-4 w-4 animate-spin" /> : t("billing.ui.promo_code.apply")}
+        </Button>
+      </div>
+      {error && <p className="text-destructive text-xs/relaxed">{error}</p>}
+    </div>
+  );
+
+  // Show the automatic code as applied, with the option to type a different one
+  if (appliedCode?.valid && appliedCode.automatic) {
+    return (
+      <div className="space-y-3">
+        <div className="space-y-2">
+          <div className="bg-success/15 border-success/30 flex items-center gap-2 rounded-lg border p-3">
+            <Check className="text-success h-4 w-4" />
+            <span className="text-success font-medium">{t("billing.ui.promo_code.automatic_label")}</span>
+            <span className="text-success text-sm">{formatDiscount(appliedCode)}</span>
+          </div>
+          <p className="text-success text-sm">{formatDuration(appliedCode)}</p>
+        </div>
+        <div className="space-y-2">
+          <p className="text-muted-foreground text-sm">{t("billing.ui.promo_code.use_different")}</p>
+          {codeInput}
+        </div>
+      </div>
+    );
+  }
+
   // Show applied code state
   if (appliedCode?.valid) {
     return (
@@ -80,7 +138,7 @@ export function PromoCodeInput({
           <Button
             variant="ghost"
             size="sm"
-            onClick={onRemove}
+            onClick={handleRemove}
             disabled={disabled}
             className="text-success hover:bg-success/25 hover:text-success"
           >
@@ -92,22 +150,5 @@ export function PromoCodeInput({
     );
   }
 
-  return (
-    <div className="space-y-2">
-      <div className="flex gap-2">
-        <Input
-          placeholder={t("billing.ui.promo_code.placeholder")}
-          value={code}
-          onChange={(e) => setCode(e.target.value.toUpperCase())}
-          onKeyDown={handleKeyDown}
-          disabled={disabled || isValidating}
-          className="flex-1"
-        />
-        <Button variant="outline" onClick={handleApply} disabled={disabled || isValidating || !code.trim()}>
-          {isValidating ? <Loader2 className="h-4 w-4 animate-spin" /> : t("billing.ui.promo_code.apply")}
-        </Button>
-      </div>
-      {error && <p className="text-destructive text-xs/relaxed">{error}</p>}
-    </div>
-  );
+  return codeInput;
 }

package/src/features/billing/stripe-promotion-code/data/stripe-promotion-code.interface.ts

@@ -11,4 +11,6 @@ export interface PromotionCodeValidationResult {
   duration?: "forever" | "once" | "repeating";
   durationInMonths?: number;
   errorMessage?: string;
+  /** True when the server applies this code by itself (no code typed by the GM). */
+  automatic?: boolean;
 }

package/src/features/billing/stripe-subscription/components/containers/SubscriptionsContainer.tsx

@@ -11,14 +11,33 @@ import { SubscriptionsList } from "../lists";
 type SubscriptionsContainerProps = {
   onOpenWizard?: (subscription?: StripeSubscriptionInterface) => void;
   hasActiveRecurringSubscription?: boolean;
+  /**
+   * The list a parent already holds (the billing dashboard). When given, the container
+   * shows it instead of loading its own, and a change asks the parent to refresh through
+   * `onSubscriptionsChange`, so the dialog and the cards behind it never disagree.
+   */
+  subscriptions?: StripeSubscriptionInterface[];
+  onSubscriptionsChange?: () => void;
 };
 
-export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscription }: SubscriptionsContainerProps) {
+export function SubscriptionsContainer({
+  onOpenWizard,
+  hasActiveRecurringSubscription,
+  subscriptions: parentSubscriptions,
+  onSubscriptionsChange,
+}: SubscriptionsContainerProps) {
   const t = useTranslations();
-  const [subscriptions, setSubscriptions] = useState<StripeSubscriptionInterface[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
+  const isControlled = parentSubscriptions !== undefined;
+  const [ownSubscriptions, setSubscriptions] = useState<StripeSubscriptionInterface[]>([]);
+  const [ownLoading, setLoading] = useState<boolean>(!isControlled);
+  const subscriptions = parentSubscriptions ?? ownSubscriptions;
+  const loading = isControlled ? false : ownLoading;
 
   const loadSubscriptions = useCallback(async () => {
+    if (isControlled) {
+      onSubscriptionsChange?.();
+      return;
+    }
     setLoading(true);
     try {
       const fetchedSubscriptions = await StripeSubscriptionService.listSubscriptions();
@@ -28,10 +47,10 @@ export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscri
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [isControlled, onSubscriptionsChange]);
 
   useEffect(() => {
-    loadSubscriptions();
+    if (!isControlled) loadSubscriptions();
   }, []);
 
   // Detect critical subscriptions

package/src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx

@@ -3,7 +3,13 @@
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
-import { formatCurrency, formatDate, useBillingFormatOptions } from "../../../components/utils";
+import {
+  applyDiscount,
+  formatCurrency,
+  formatDate,
+  subscriptionDiscount,
+  useBillingFormatOptions,
+} from "../../../components/utils";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { StripeSubscriptionInterface, SubscriptionStatus } from "../../data";
 import { SubscriptionDetails } from "../details/SubscriptionDetails";
@@ -71,6 +77,10 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
             {subscriptions.map((subscription) => {
               const price = subscription.price;
               const amount = price?.unitAmount ? formatCurrency(price.unitAmount, price.currency, fmt) : "0";
+              // What Stripe bills: the price after the discount the subscription carries.
+              const discountedAmount = price
+                ? applyDiscount(price.unitAmount, subscriptionDiscount(subscription))
+                : null;
               const period = `${formatDate(subscription.currentPeriodStart, fmt)} - ${formatDate(subscription.currentPeriodEnd, fmt)}`;
 
               return (
@@ -87,7 +97,16 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
                   </TableCell>
                   <TableCell className="font-medium">{formatPlanName(price, t)}</TableCell>
                   <TableCell className="text-muted-foreground text-sm">{period}</TableCell>
-                  <TableCell className="text-end font-medium">{amount}</TableCell>
+                  <TableCell className="text-end font-medium">
+                    {discountedAmount !== null && price ? (
+                      <>
+                        <span className="line-through text-muted-foreground me-2">{amount}</span>
+                        <span className="text-success">{formatCurrency(discountedAmount, price.currency, fmt)}</span>
+                      </>
+                    ) : (
+                      amount
+                    )}
+                  </TableCell>
                   <TableCell className="text-end">
                     {(subscription.status === SubscriptionStatus.ACTIVE ||
                       subscription.status === SubscriptionStatus.TRIALING) &&

package/src/features/billing/stripe-subscription/components/wizards/SubscriptionWizard.tsx

@@ -72,7 +72,7 @@ export function SubscriptionWizard({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{dialogTitle}</DialogTitle>
           <DialogDescription>{dialogDescription}</DialogDescription>

package/src/features/billing/stripe-subscription/components/wizards/WizardStepPaymentMethod.tsx

@@ -19,7 +19,7 @@ export function WizardStepPaymentMethod({ onBack, onSuccess, isProcessing }: Wiz
         <p className="text-sm text-muted-foreground">{t("billing.ui.wizard.payment_description")}</p>
       </div>
 
-      <PaymentMethodForm onSuccess={onSuccess} onCancel={onBack} isLoading={isProcessing} />
+      <PaymentMethodForm onSuccess={onSuccess} onCancel={onBack} isLoading={isProcessing} alwaysSetDefault />
     </div>
   );
 }

package/src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx

@@ -2,14 +2,23 @@
 
 import { useTranslations } from "next-intl";
 import { AlertCircle } from "lucide-react";
+import { useEffect, useState } from "react";
 import { Alert, AlertDescription, Badge, Button } from "../../../../../shadcnui";
 import { SectionHeader } from "../../../../../components/typography";
-import { formatCurrency, useBillingFormatOptions } from "../../../components/utils";
+import {
+  applyDiscount,
+  formatCurrency,
+  promotionCodeDiscount,
+  subscriptionDiscount,
+  useBillingFormatOptions,
+} from "../../../components/utils";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { ProrationPreviewInterface } from "../../../stripe-invoice/data/stripe-invoice.interface";
 import { PromotionCodeValidationResult } from "../../../stripe-promotion-code";
 import { PromoCodeInput } from "../../../stripe-promotion-code/components/PromoCodeInput";
 import { StripeSubscriptionInterface } from "../../data";
+import { StripeCustomerService } from "../../../stripe-customer/data/stripe-customer.service";
+import { ReviewCard, reviewCard } from "./review-card";
 
 type WizardStepReviewProps = {
   selectedPrice: StripePriceInterface | null;
@@ -50,6 +59,29 @@ export function WizardStepReview({
 }: WizardStepReviewProps) {
   const t = useTranslations();
   const fmt = useBillingFormatOptions();
+  const [card, setCard] = useState<ReviewCard | null>(null);
+
+  // Show which card is on file. The step remounts after the payment step, so a
+  // card just added is read again here.
+  useEffect(() => {
+    if (!hasPaymentMethod) {
+      setCard(null);
+      return;
+    }
+    let cancelled = false;
+    Promise.all([StripeCustomerService.listPaymentMethods(), StripeCustomerService.getCustomer()])
+      .then(([methods, customer]) => {
+        if (!cancelled) setCard(reviewCard(methods, customer?.defaultPaymentMethodId));
+      })
+      .catch((err) => {
+        console.error("[WizardStepReview] Failed to load the card on file:", err);
+        if (!cancelled) setCard(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [hasPaymentMethod]);
+
   if (!selectedPrice) {
     return <div className="text-center py-8 text-muted-foreground">{t("billing.ui.wizard.review.no_plan")}</div>;
   }
@@ -64,60 +96,28 @@ export function WizardStepReview({
       : t("billing.ui.wizard.review.interval_monthly");
   };
 
-  // Calculate discounted price if promotion code is applied
-  const calculateDiscountedPrice = (): number | null => {
-    if (!promotionCode?.valid || !selectedPrice.unitAmount) return null;
-
-    const originalPrice = selectedPrice.unitAmount;
-
-    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
-      return originalPrice * (1 - promotionCode.discountValue / 100);
-    }
-
-    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
-      // amount_off is in cents, same as unitAmount
-      return Math.max(0, originalPrice - promotionCode.discountValue);
-    }
+  // A code (typed or automatic) replaces the subscription's discount in Stripe.
+  // Without one, a plan change keeps the discount the subscription already carries.
+  const codeDiscount = promotionCodeDiscount(promotionCode);
+  const carriedDiscount = isChangingPlan && !codeDiscount ? subscriptionDiscount(subscription) : null;
+  const discount = codeDiscount ?? carriedDiscount;
 
-    return null;
-  };
-
-  const discountedPrice = calculateDiscountedPrice();
+  const discountedPrice = applyDiscount(selectedPrice.unitAmount, discount);
 
   // Calculate discounted immediate charge for proration preview
-  const calculateDiscountedImmediateCharge = (): number | null => {
-    if (!promotionCode?.valid || !prorationPreview?.immediateCharge) return null;
-
-    const originalCharge = prorationPreview.immediateCharge;
-
-    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
-      return originalCharge * (1 - promotionCode.discountValue / 100);
-    }
-
-    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
-      return Math.max(0, originalCharge - promotionCode.discountValue);
-    }
-
-    return null;
-  };
-
-  const discountedImmediateCharge = calculateDiscountedImmediateCharge();
+  const discountedImmediateCharge = applyDiscount(prorationPreview?.immediateCharge, discount);
 
   // Format the discount description
   const getDiscountDescription = (): string | null => {
-    if (!promotionCode?.valid) return null;
+    if (!discount) return null;
 
-    if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
-      return t("billing.ui.wizard.review.percent_off", { value: promotionCode.discountValue });
+    if (discount.discountType === "percent_off") {
+      return t("billing.ui.wizard.review.percent_off", { value: discount.discountValue });
     }
 
-    if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
-      return t("billing.ui.wizard.review.amount_off", {
-        amount: formatCurrency(promotionCode.discountValue, promotionCode.currency || selectedPrice.currency, fmt),
-      });
-    }
-
-    return null;
+    return t("billing.ui.wizard.review.amount_off", {
+      amount: formatCurrency(discount.discountValue, discount.currency || selectedPrice.currency, fmt),
+    });
   };
 
   const discountDescription = getDiscountDescription();
@@ -142,6 +142,9 @@ export function WizardStepReview({
                   {formatCurrency(discountedPrice, selectedPrice.currency, fmt)}
                 </p>
                 {discountDescription && <Badge variant="softGreen">{discountDescription}</Badge>}
+                {carriedDiscount && (
+                  <p className="text-sm text-muted-foreground">{t("billing.ui.wizard.review.discount_carries_over")}</p>
+                )}
               </>
             ) : (
               <p className="font-semibold text-lg">
@@ -165,7 +168,9 @@ export function WizardStepReview({
           </h4>
           <p className={`text-sm ${isTrialUpgrade ? "text-warning" : "text-foreground"}`}>
             {isTrialUpgrade
-              ? t("billing.ui.wizard.review.trial_upgrade_description")
+              ? discountedImmediateCharge !== null
+                ? t("billing.ui.wizard.review.trial_upgrade_description_discounted")
+                : t("billing.ui.wizard.review.trial_upgrade_description")
               : t("billing.ui.wizard.review.proration_description")}
           </p>
           <div className="flex justify-between text-sm">
@@ -210,11 +215,17 @@ export function WizardStepReview({
             <h4 className="font-medium">{t("billing.ui.payment_method.title")}</h4>
             <p className="text-sm text-muted-foreground">
               {hasPaymentMethod
-                ? t("billing.ui.wizard.review.payment_on_file")
+                ? card
+                  ? t("billing.ui.wizard.review.card_on_file", { brand: card.brand, last4: card.last4 })
+                  : t("billing.ui.wizard.review.payment_on_file")
                 : t("billing.ui.wizard.review.no_payment_on_file")}
             </p>
           </div>
-          {!hasPaymentMethod && (
+          {hasPaymentMethod ? (
+            <Button variant="outline" onClick={onAddPaymentMethod} disabled={isProcessing}>
+              {t("billing.ui.wizard.review.use_another_card")}
+            </Button>
+          ) : (
             <Button variant="outline" onClick={onAddPaymentMethod}>
               {t("billing.ui.payment_methods.add")}
             </Button>