@carlonicora/nextjs-jsonapi 4.1.2 → 4.2.0

package/src/features/billing/stripe-invoice/components/details/InvoiceDetails.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Download, ExternalLink, RefreshCw } from "lucide-react";
 import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../../../../shadcnui";
-import { formatCurrency, formatDate } from "../../../components/utils";
+import { formatCurrency, formatDate, useBillingFormatOptions } from "../../../components/utils";
 import { InvoiceStatus, StripeInvoiceInterface } from "../../data/stripe-invoice.interface";
 import { InvoiceStatusBadge } from "../widgets/InvoiceStatusBadge";
 
@@ -19,6 +20,8 @@ export function InvoiceDetails({
   onOpenChange,
   onInvoiceChange: _onInvoiceChange,
 }: InvoiceDetailsProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const handleDownloadPDF = () => {
     if (invoice.stripePdfUrl) {
       window.open(invoice.stripePdfUrl, "_blank");
@@ -42,67 +45,67 @@ export function InvoiceDetails({
     return invoice.stripeInvoiceId.slice(-8);
   };
 
-  const productName = invoice.subscription?.price?.product?.name || "Subscription";
+  const productName = invoice.subscription?.price?.product?.name || t("billing.ui.cards.subscriptions.fallback_name");
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
-          <DialogTitle>Invoice {getInvoiceNumber()}</DialogTitle>
-          <DialogDescription>{formatDate(invoice.periodStart)}</DialogDescription>
+          <DialogTitle>{t("billing.ui.invoice.title", { number: getInvoiceNumber() })}</DialogTitle>
+          <DialogDescription>{formatDate(invoice.periodStart, fmt)}</DialogDescription>
         </DialogHeader>
 
         <div className="space-y-6">
           {/* Status */}
           <div className="flex items-center gap-x-3">
-            <span className="text-sm font-medium text-muted-foreground">Status:</span>
+            <span className="text-sm font-medium text-muted-foreground">{t("billing.ui.labels.status")}</span>
             <InvoiceStatusBadge status={invoice.status} />
           </div>
 
           {/* Invoice Info Grid */}
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <span className="text-muted-foreground text-xs">Billing Period:</span>
+              <span className="text-muted-foreground text-xs">{t("billing.ui.invoice.billing_period")}</span>
               <p className="text-sm">
-                {formatDate(invoice.periodStart)} - {formatDate(invoice.periodEnd)}
+                {formatDate(invoice.periodStart, fmt)} - {formatDate(invoice.periodEnd, fmt)}
               </p>
             </div>
 
             {invoice.dueDate && (
               <div>
-                <span className="text-muted-foreground text-xs">Due Date:</span>
-                <p className="text-sm">{formatDate(invoice.dueDate)}</p>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.invoice.due_date")}</span>
+                <p className="text-sm">{formatDate(invoice.dueDate, fmt)}</p>
               </div>
             )}
 
             {invoice.paidAt && (
               <div>
-                <span className="text-muted-foreground text-xs">Paid Date:</span>
-                <p className="text-sm">{formatDate(invoice.paidAt)}</p>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.invoice.paid_date")}</span>
+                <p className="text-sm">{formatDate(invoice.paidAt, fmt)}</p>
               </div>
             )}
 
             <div>
-              <span className="text-muted-foreground text-xs">Attempt Count:</span>
+              <span className="text-muted-foreground text-xs">{t("billing.ui.invoice.attempt_count")}</span>
               <p className="text-sm">{invoice.attemptCount}</p>
             </div>
           </div>
 
           {/* Line Items */}
           <div>
-            <h4 className="text-sm font-medium text-muted-foreground mb-2">Line Items</h4>
+            <h4 className="text-sm font-medium text-muted-foreground mb-2">{t("billing.ui.invoice.line_items")}</h4>
             <div className="border rounded-lg overflow-clip">
               <table className="w-full">
                 <thead className="bg-muted">
                   <tr>
-                    <th className="text-start p-3 text-sm font-medium">Description</th>
-                    <th className="text-end p-3 text-sm font-medium">Amount</th>
+                    <th className="text-start p-3 text-sm font-medium">{t("billing.ui.columns.description")}</th>
+                    <th className="text-end p-3 text-sm font-medium">{t("billing.ui.columns.amount")}</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr className="border-t">
                     <td className="p-3">{productName}</td>
-                    <td className="p-3 text-end">{formatCurrency(invoice.subtotal, invoice.currency)}</td>
+                    <td className="p-3 text-end">{formatCurrency(invoice.subtotal, invoice.currency, fmt)}</td>
                   </tr>
                 </tbody>
               </table>
@@ -112,34 +115,36 @@ export function InvoiceDetails({
           {/* Amount Breakdown */}
           <div className="space-y-2 border-t pt-4">
             <div className="flex justify-between">
-              <span className="text-muted-foreground text-xs">Subtotal:</span>
-              <span className="text-sm">{formatCurrency(invoice.subtotal, invoice.currency)}</span>
+              <span className="text-muted-foreground text-xs">{t("billing.ui.invoice.subtotal")}</span>
+              <span className="text-sm">{formatCurrency(invoice.subtotal, invoice.currency, fmt)}</span>
             </div>
 
             {invoice.tax !== undefined && invoice.tax > 0 && (
               <div className="flex justify-between">
-                <span className="text-muted-foreground text-xs">Tax:</span>
-                <span className="text-sm">{formatCurrency(invoice.tax, invoice.currency)}</span>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.invoice.tax")}</span>
+                <span className="text-sm">{formatCurrency(invoice.tax, invoice.currency, fmt)}</span>
               </div>
             )}
 
             <div className="flex justify-between text-lg font-semibold border-t pt-2">
-              <span>Total:</span>
-              <span>{formatCurrency(invoice.total, invoice.currency)}</span>
+              <span>{t("billing.ui.invoice.total")}</span>
+              <span>{formatCurrency(invoice.total, invoice.currency, fmt)}</span>
             </div>
 
             {invoice.amountPaid > 0 && (
               <div className="flex justify-between">
-                <span className="text-muted-foreground text-xs">Amount Paid:</span>
-                <span className="text-sm text-success">{formatCurrency(invoice.amountPaid, invoice.currency)}</span>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.invoice.amount_paid")}</span>
+                <span className="text-sm text-success">
+                  {formatCurrency(invoice.amountPaid, invoice.currency, fmt)}
+                </span>
               </div>
             )}
 
             {invoice.amountRemaining > 0 && (
               <div className="flex justify-between">
-                <span className="text-muted-foreground text-xs">Amount Due:</span>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.invoice.amount_due")}</span>
                 <span className="text-sm text-destructive">
-                  {formatCurrency(invoice.amountRemaining, invoice.currency)}
+                  {formatCurrency(invoice.amountRemaining, invoice.currency, fmt)}
                 </span>
               </div>
             )}
@@ -150,21 +155,21 @@ export function InvoiceDetails({
             {invoice.stripePdfUrl && (
               <Button variant="outline" onClick={handleDownloadPDF}>
                 <Download className="me-2 h-4 w-4" />
-                Download PDF
+                {t("billing.ui.invoice.download_pdf")}
               </Button>
             )}
 
             {invoice.status === InvoiceStatus.OPEN && invoice.attempted && (
               <Button variant="default" onClick={handleRetryPayment}>
                 <RefreshCw className="me-2 h-4 w-4" />
-                Retry Payment
+                {t("billing.ui.invoice.retry_payment")}
               </Button>
             )}
 
             {invoice.stripeHostedInvoiceUrl && (
               <Button variant="outline" onClick={handleViewInStripe}>
                 <ExternalLink className="me-2 h-4 w-4" />
-                View in Stripe
+                {t("billing.ui.invoice.view_in_stripe")}
               </Button>
             )}
           </div>

package/src/features/billing/stripe-invoice/components/lists/InvoicesList.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
-import { formatCurrency, formatDate } from "../../../components/utils";
+import { formatCurrency, formatDate, useBillingFormatOptions } from "../../../components/utils";
 import { StripeInvoiceInterface } from "../../data/stripe-invoice.interface";
 import { InvoiceDetails } from "../details/InvoiceDetails";
 import { InvoiceStatusBadge } from "../widgets/InvoiceStatusBadge";
@@ -13,6 +14,8 @@ type InvoicesListProps = {
 };
 
 export function InvoicesList({ invoices, onInvoicesChange }: InvoicesListProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const [selectedInvoice, setSelectedInvoice] = useState<StripeInvoiceInterface | null>(null);
 
   const handleRowClick = (invoice: StripeInvoiceInterface) => {
@@ -33,19 +36,19 @@ export function InvoicesList({ invoices, onInvoicesChange }: InvoicesListProps)
         <Table>
           <TableHeader className="bg-muted">
             <TableRow>
-              <TableHead>Invoice #</TableHead>
-              <TableHead>Date</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead className="text-end">Amount</TableHead>
-              <TableHead>Period</TableHead>
+              <TableHead>{t("billing.ui.columns.invoice_number")}</TableHead>
+              <TableHead>{t("billing.ui.columns.date")}</TableHead>
+              <TableHead>{t("billing.ui.columns.status")}</TableHead>
+              <TableHead className="text-end">{t("billing.ui.columns.amount")}</TableHead>
+              <TableHead>{t("billing.ui.columns.period")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {invoices.map((invoice) => {
               const invoiceNumber = getInvoiceNumber(invoice);
-              const date = formatDate(invoice.periodStart);
-              const amount = formatCurrency(invoice.total, invoice.currency);
-              const period = `${formatDate(invoice.periodStart)} - ${formatDate(invoice.periodEnd)}`;
+              const date = formatDate(invoice.periodStart, fmt);
+              const amount = formatCurrency(invoice.total, invoice.currency, fmt);
+              const period = `${formatDate(invoice.periodStart, fmt)} - ${formatDate(invoice.periodEnd, fmt)}`;
 
               return (
                 <TableRow

package/src/features/billing/stripe-invoice/components/widgets/InvoiceStatusBadge.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Badge, type BadgeProps } from "../../../../../shadcnui";
 import { InvoiceStatus } from "../../data/stripe-invoice.interface";
 
@@ -8,35 +9,37 @@ type InvoiceStatusBadgeProps = {
 };
 
 type StatusConfig = {
+  /** Message key, translated at render time. */
   label: string;
   variant: BadgeProps["variant"];
 };
 
 const statusConfig: Record<InvoiceStatus, StatusConfig> = {
   [InvoiceStatus.DRAFT]: {
-    label: "Draft",
+    label: "billing.ui.invoice_status.draft",
     variant: "softGray",
   },
   [InvoiceStatus.OPEN]: {
-    label: "Open",
+    label: "billing.ui.invoice_status.open",
     variant: "softBlue",
   },
   [InvoiceStatus.PAID]: {
-    label: "Paid",
+    label: "billing.ui.invoice_status.paid",
     variant: "softGreen",
   },
   [InvoiceStatus.VOID]: {
-    label: "Void",
+    label: "billing.ui.invoice_status.void",
     variant: "softGray",
   },
   [InvoiceStatus.UNCOLLECTIBLE]: {
-    label: "Uncollectible",
+    label: "billing.ui.invoice_status.uncollectible",
     variant: "softRed",
   },
 };
 
 export function InvoiceStatusBadge({ status }: InvoiceStatusBadgeProps) {
+  const t = useTranslations();
   const config = statusConfig[status] || statusConfig[InvoiceStatus.DRAFT];
 
-  return <Badge variant={config.variant}>{config.label}</Badge>;
+  return <Badge variant={config.variant}>{t(config.label)}</Badge>;
 }

package/src/features/billing/stripe-price/components/details/PriceDetails.tsx

@@ -5,11 +5,12 @@ import { DetailField, SectionHeader } from "../../../../../components";
 import { Modules } from "../../../../../core";
 import { usePageUrlGenerator } from "../../../../../hooks";
 import { Badge, Link } from "../../../../../shadcnui";
-import { formatCurrency, formatInterval } from "../../../components/utils/currency";
+import { formatCurrency, formatInterval, useBillingFormatOptions } from "../../../components/utils";
 import { usePriceContext } from "../../../contexts/PriceContext";
 
 export function PriceDetails() {
   const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const generateUrl = usePageUrlGenerator();
   const { price } = usePriceContext();
 
@@ -49,14 +50,14 @@ export function PriceDetails() {
           />
           <DetailField
             label={t("billing.admin.prices.fields.amount")}
-            value={<span className="tabular-nums">{formatCurrency(price.unitAmount, price.currency)}</span>}
+            value={<span className="tabular-nums">{formatCurrency(price.unitAmount, price.currency, fmt)}</span>}
           />
           <DetailField label={t("billing.admin.prices.fields.currency")} value={price.currency.toUpperCase()} />
           <DetailField
             label={t("billing.admin.prices.fields.type")}
             value={isRecurring ? t("billing.admin.prices.type.recurring") : t("billing.admin.prices.type.oneTime")}
           />
-          <DetailField label={t("billing.admin.prices.fields.billing")} value={formatInterval(price)} />
+          <DetailField label={t("billing.admin.prices.fields.billing")} value={formatInterval(price, fmt)} />
           {isRecurring && (
             <DetailField
               label={t("billing.admin.prices.fields.intervalCount")}

package/src/features/billing/stripe-price/components/forms/PriceArchiver.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { errorToast } from "../../../../../components/errors";
 import { Button, ConfirmDialog } from "../../../../../shadcnui";
+import { useBillingFormatOptions } from "../../../components/utils";
 import { priceLabel, usePriceContext } from "../../../contexts/PriceContext";
 import { StripePriceInterface } from "../../data/stripe-price.interface";
 
@@ -20,6 +21,7 @@ type PriceArchiverProps = {
  */
 export function PriceArchiver({ price }: PriceArchiverProps) {
   const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const { archivePrice, restorePrice } = usePriceContext();
   const [open, setOpen] = useState<boolean>(false);
 
@@ -36,7 +38,7 @@ export function PriceArchiver({ price }: PriceArchiverProps) {
         open={open}
         onOpenChange={setOpen}
         title={t(`billing.admin.prices.${scope}.title`)}
-        description={t(`billing.admin.prices.${scope}.description`, { label: priceLabel(price) })}
+        description={t(`billing.admin.prices.${scope}.description`, { label: priceLabel(price, fmt) })}
         confirmLabel={t(`billing.admin.prices.${scope}.confirm`)}
         cancelLabel={t("ui.buttons.cancel")}
         destructive={!isArchived}

package/src/features/billing/stripe-price/components/forms/PriceEditor.tsx

@@ -13,6 +13,7 @@ import { useI18nRouter } from "../../../../../i18n";
 import { Alert, AlertDescription, AlertTitle, Button, Checkbox, Input } from "../../../../../shadcnui";
 import { showToast } from "../../../../../utils/toast";
 import { FeatureInterface, FeatureService } from "../../../../feature";
+import { useBillingFormatOptions } from "../../../components/utils";
 import { priceLabel, usePriceContext } from "../../../contexts/PriceContext";
 import { StripePriceInput, StripePriceInterface } from "../../data/stripe-price.interface";
 import { StripePriceSeed } from "../../data/stripe-price.transfer";
@@ -54,6 +55,7 @@ function PriceEditorInternal({
   onDialogOpenChange,
 }: PriceEditorProps) {
   const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const router = useI18nRouter();
   const { createPrice, updatePrice, productId: contextProductId } = usePriceContext();
   const [allFeatures, setAllFeatures] = useState<FeatureInterface[]>([]);
@@ -266,7 +268,7 @@ function PriceEditorInternal({
     <EditorSheet
       form={form}
       entityType={t("billing.admin.prices.entity")}
-      entityName={price ? priceLabel(price) : undefined}
+      entityName={price ? priceLabel(price, fmt) : undefined}
       isEdit={isEdit}
       module={Modules.StripePrice}
       size="lg"

package/src/features/billing/stripe-price/hooks/useStripePriceTableStructure.tsx

@@ -7,7 +7,7 @@ import { useMemo } from "react";
 import { Modules } from "../../../../core";
 import { registerTableGenerator, TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../../hooks";
 import { Badge, Button, Link } from "../../../../shadcnui";
-import { formatCurrency, formatInterval } from "../../components/utils/currency";
+import { formatCurrency, formatInterval, useBillingFormatOptions } from "../../components/utils";
 import { StripePriceFields } from "../data/stripe-price.fields";
 import { StripePriceInterface } from "../data/stripe-price.interface";
 
@@ -31,6 +31,7 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
   params,
 ) => {
   const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const generateUrl = usePageUrlGenerator();
 
   const onClone = params.context?.onClone as StripePriceRowActions["onClone"];
@@ -56,7 +57,7 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
         const price: StripePriceInterface = row.original.jsonApiData;
         return (
           <Link href={generateUrl({ page: Modules.StripePrice, id: price.id })}>
-            {price.nickname ?? formatCurrency(price.unitAmount, price.currency)}
+            {price.nickname ?? formatCurrency(price.unitAmount, price.currency, fmt)}
           </Link>
         );
       },
@@ -72,7 +73,7 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
         // Typography role 15 (numeric): tabular-nums, end-aligned. NEVER font-mono.
         return (
           <span className="block text-xs tabular-nums text-end">
-            {formatCurrency(price.unitAmount, price.currency)}
+            {formatCurrency(price.unitAmount, price.currency, fmt)}
           </span>
         );
       },
@@ -86,7 +87,7 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
       cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
         const price: StripePriceInterface = row.original.jsonApiData;
         // Typography role 8 (UI chrome): single-line, plain text-xs.
-        return <span className="text-xs">{formatInterval(price)}</span>;
+        return <span className="text-xs">{formatInterval(price, fmt)}</span>;
       },
       enableSorting: false,
       enableHiding: false,
@@ -175,7 +176,7 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
     return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
       TableContent<StripePriceInterface>
     >[];
-  }, [params.fields, fieldColumnMap, t, generateUrl, onClone, onExport]);
+  }, [params.fields, fieldColumnMap, t, fmt, generateUrl, onClone, onExport]);
 
   return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
 };

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

@@ -1,8 +1,11 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { Check, X, Loader2 } from "lucide-react";
 import { Button, Input } from "../../../../shadcnui";
+import { useI18nLocale } from "../../../../i18n";
+import { formatFixed } from "../../components/utils";
 import { PromotionCodeValidationResult } from "../data/stripe-promotion-code.interface";
 
 type PromoCodeInputProps = {
@@ -22,6 +25,8 @@ export function PromoCodeInput({
   onRemove,
   disabled = false,
 }: PromoCodeInputProps) {
+  const t = useTranslations();
+  const locale = useI18nLocale();
   const [code, setCode] = useState("");
 
   const handleApply = () => {
@@ -40,23 +45,23 @@ export function PromoCodeInput({
   // Format discount for display
   const formatDiscount = (result: PromotionCodeValidationResult): string => {
     if (result.discountType === "percent_off") {
-      return `${result.discountValue}% off`;
+      return t("billing.ui.wizard.review.percent_off", { value: String(result.discountValue) });
     }
     // amount_off is in cents, convert to dollars
     const amount = (result.discountValue || 0) / 100;
     const currency = result.currency?.toUpperCase() || "USD";
-    return `${currency} ${amount.toFixed(2)} off`;
+    return t("billing.ui.wizard.review.amount_off", { amount: `${currency} ${formatFixed(amount, locale, 2)}` });
   };
 
   // Format duration for display
   const formatDuration = (result: PromotionCodeValidationResult): string => {
     switch (result.duration) {
       case "forever":
-        return "Applied to all payments";
+        return t("billing.ui.promo_code.duration_forever");
       case "once":
-        return "Applied to first payment only";
+        return t("billing.ui.promo_code.duration_once");
       case "repeating":
-        return `Applied for ${result.durationInMonths} months`;
+        return t("billing.ui.promo_code.duration_repeating", { months: String(result.durationInMonths) });
       default:
         return "";
     }
@@ -91,7 +96,7 @@ export function PromoCodeInput({
     <div className="space-y-2">
       <div className="flex gap-2">
         <Input
-          placeholder="Enter promo code"
+          placeholder={t("billing.ui.promo_code.placeholder")}
           value={code}
           onChange={(e) => setCode(e.target.value.toUpperCase())}
           onKeyDown={handleKeyDown}
@@ -99,7 +104,7 @@ export function PromoCodeInput({
           className="flex-1"
         />
         <Button variant="outline" onClick={handleApply} disabled={disabled || isValidating || !code.trim()}>
-          {isValidating ? <Loader2 className="h-4 w-4 animate-spin" /> : "Apply"}
+          {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>}

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

@@ -42,7 +42,9 @@ export class StripePromotionCodeService {
       return {
         valid: false,
         code: params.code,
-        errorMessage: response.error || "Failed to validate promotion code",
+        // No English fallback here: a service cannot translate, so the caller words
+        // the missing message in the active language.
+        errorMessage: response.error || undefined,
       };
     }
 

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { CreditCard } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "../../../../../shadcnui";
@@ -13,6 +14,7 @@ type SubscriptionsContainerProps = {
 };
 
 export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscription }: SubscriptionsContainerProps) {
+  const t = useTranslations();
   const [subscriptions, setSubscriptions] = useState<StripeSubscriptionInterface[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -44,7 +46,7 @@ export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscri
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <p className="text-muted-foreground">Loading subscriptions...</p>
+        <p className="text-muted-foreground">{t("billing.ui.subscriptions.loading")}</p>
       </div>
     );
   }
@@ -55,11 +57,13 @@ export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscri
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-x-3">
           <CreditCard className="h-8 w-8" />
-          <h1 className="text-primary text-3xl font-semibold">Subscriptions</h1>
+          <h1 className="text-primary text-3xl font-semibold">{t("billing.ui.subscriptions.title")}</h1>
         </div>
         {subscriptions.length > 0 && (
           <Button onClick={() => onOpenWizard?.()}>
-            {hasActiveRecurringSubscription ? "Purchase Add-ons" : "Subscribe to a Plan"}
+            {hasActiveRecurringSubscription
+              ? t("billing.ui.subscriptions.purchase_addons")
+              : t("billing.ui.subscriptions.subscribe")}
           </Button>
         )}
       </div>
@@ -74,9 +78,9 @@ export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscri
         <div className="flex flex-col items-center justify-center py-12 space-y-4">
           <CreditCard className="h-16 w-16 text-muted-foreground" />
           <div className="text-center">
-            <h3 className="text-sm font-medium mb-2">No Active Subscriptions</h3>
-            <p className="text-muted-foreground mb-6">Choose a subscription plan to get started with our services.</p>
-            <Button onClick={() => onOpenWizard?.()}>Subscribe to a Plan</Button>
+            <h3 className="text-sm font-medium mb-2">{t("billing.ui.subscriptions.empty_title")}</h3>
+            <p className="text-muted-foreground mb-6">{t("billing.ui.subscriptions.empty_description")}</p>
+            <Button onClick={() => onOpenWizard?.()}>{t("billing.ui.subscriptions.subscribe")}</Button>
           </div>
         </div>
       )}