@carlonicora/nextjs-jsonapi 5.4.0 → 5.6.0

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-price/stripe-price.module.ts

@@ -1,3 +1,4 @@
+import { CreditCardIcon } from "lucide-react";
 import { ModuleFactory } from "../../../permissions";
 import { StripePrice } from "./data/stripe-price";
 
@@ -11,4 +12,5 @@ export const StripePriceModule = (factory: ModuleFactory) =>
     pageUrl: "/administration/prices",
     model: StripePrice,
     moduleId: "a7d3e5f1-8c9b-4a2e-b6d7-3f1c8e9a4b5d",
+    icon: CreditCardIcon,
   });

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-product/stripe-product.module.ts

@@ -1,3 +1,4 @@
+import { CreditCardIcon } from "lucide-react";
 import { ModuleFactory } from "../../../permissions";
 import { StripeProduct } from "./data";
 
@@ -11,4 +12,5 @@ export const StripeProductModule = (factory: ModuleFactory) =>
     pageUrl: "/administration/products",
     model: StripeProduct,
     moduleId: "f8c4a1e9-3b2d-4f7a-9e5c-1d8a6b3c9f2e",
+    icon: CreditCardIcon,
   });

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>

package/src/features/billing/stripe-subscription/components/wizards/__tests__/review-card.spec.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { PaymentMethodInterface } from "../../../../stripe-customer/data/payment-method.interface";
+import { reviewCard } from "../review-card";
+
+const card = (id: string, brand: string, last4: string): PaymentMethodInterface => ({
+  id,
+  type: "card",
+  card: { brand, last4, expMonth: 1, expYear: 2030 },
+});
+
+describe("reviewCard", () => {
+  it("returns null when there is no card", () => {
+    expect(reviewCard([], "pm_1")).toBe(null);
+    expect(reviewCard(null, null)).toBe(null);
+    expect(reviewCard(undefined, undefined)).toBe(null);
+  });
+
+  it("returns the customer's default card", () => {
+    expect(reviewCard([card("pm_new", "visa", "4242"), card("pm_old", "mastercard", "0005")], "pm_old")).toEqual({
+      brand: "Mastercard",
+      last4: "0005",
+    });
+  });
+
+  it("falls back to the first card when no default is set or the default is gone", () => {
+    const methods = [card("pm_new", "visa", "4242"), card("pm_old", "mastercard", "0005")];
+    expect(reviewCard(methods, null)).toEqual({ brand: "Visa", last4: "4242" });
+    expect(reviewCard(methods, "pm_detached")).toEqual({ brand: "Visa", last4: "4242" });
+  });
+
+  it("returns null when the card has no last 4 digits", () => {
+    expect(reviewCard([{ id: "pm_1", type: "sepa_debit" }], "pm_1")).toBe(null);
+  });
+});

package/src/features/billing/stripe-subscription/components/wizards/review-card.ts

@@ -0,0 +1,24 @@
+import { PaymentMethodInterface } from "../../../stripe-customer/data/payment-method.interface";
+
+export type ReviewCard = { brand: string; last4: string };
+
+/**
+ * The card the review shows as the one on file: the customer's default, or the
+ * first card listed when no default is set (or the default is no longer listed).
+ * Null when no card with a brand and last 4 digits is known.
+ */
+export function reviewCard(
+  methods: PaymentMethodInterface[] | null | undefined,
+  defaultPaymentMethodId: string | null | undefined,
+): ReviewCard | null {
+  if (!methods || methods.length === 0) return null;
+
+  const method = (defaultPaymentMethodId && methods.find((m) => m.id === defaultPaymentMethodId)) || methods[0];
+  if (!method.card?.last4) return null;
+
+  const brand = method.card.brand
+    ? method.card.brand.charAt(0).toUpperCase() + method.card.brand.slice(1)
+    : method.type.charAt(0).toUpperCase() + method.type.slice(1);
+
+  return { brand, last4: method.card.last4 };
+}

package/src/features/billing/stripe-subscription/data/__tests__/stripe-subscription.discount.spec.ts

@@ -0,0 +1,67 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import { ModuleRegistry } from "../../../../../core/registry/ModuleRegistry";
+import { ModuleFactory, ModuleWithPermissions } from "../../../../../permissions/types";
+import { StripePriceModule } from "../../../stripe-price/stripe-price.module";
+import { StripeSubscription } from "../stripe-subscription";
+
+// rehydrate reads Modules.StripePrice for the price relationship, so the module must be registered.
+const moduleFactory: ModuleFactory = (params) =>
+  ({ pageUrl: params.pageUrl, name: params.name, model: params.model }) as ModuleWithPermissions;
+
+beforeAll(() => {
+  ModuleRegistry.register("StripePrice", StripePriceModule(moduleFactory));
+});
+
+const subscriptionWith = (attributes: Record<string, unknown>) =>
+  new StripeSubscription().rehydrate({
+    jsonApi: {
+      id: "sub-1",
+      type: "stripe-subscriptions",
+      attributes: {
+        stripeSubscriptionId: "sub_1",
+        status: "active",
+        currentPeriodStart: "2026-10-01T00:00:00.000Z",
+        currentPeriodEnd: "2026-11-01T00:00:00.000Z",
+        ...attributes,
+      },
+    },
+    included: [],
+  });
+
+describe("StripeSubscription discount", () => {
+  it("rehydrates a percentage discount that lasts forever", () => {
+    const subscription = subscriptionWith({ discountPercentOff: 20, discountDuration: "forever" });
+
+    expect(subscription.discount).toEqual({
+      percentOff: 20,
+      amountOff: undefined,
+      currency: undefined,
+      duration: "forever",
+      durationInMonths: undefined,
+      end: undefined,
+    });
+  });
+
+  it("rehydrates a repeating amount discount with its end as a Date", () => {
+    const subscription = subscriptionWith({
+      discountAmountOff: 200,
+      discountCurrency: "eur",
+      discountDuration: "repeating",
+      discountDurationInMonths: 3,
+      discountEnd: "2027-01-01T00:00:00.000Z",
+    });
+
+    expect(subscription.discount?.amountOff).toBe(200);
+    expect(subscription.discount?.currency).toBe("eur");
+    expect(subscription.discount?.durationInMonths).toBe(3);
+    expect(subscription.discount?.end).toEqual(new Date("2027-01-01T00:00:00.000Z"));
+  });
+
+  it("has no discount when the API sends none", () => {
+    expect(subscriptionWith({}).discount).toBeUndefined();
+  });
+
+  it("has no discount when the duration comes without an amount", () => {
+    expect(subscriptionWith({ discountDuration: "forever" }).discount).toBeUndefined();
+  });
+});