@carlonicora/nextjs-jsonapi 4.1.2 → 4.2.1

package/src/features/billing/stripe-subscription/components/details/SubscriptionDetails.tsx

@@ -1,8 +1,14 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../../../../shadcnui";
-import { formatCurrency, formatDate } from "../../../components/utils";
+import {
+  type BillingFormatOptions,
+  formatCurrency,
+  formatDate,
+  useBillingFormatOptions,
+} from "../../../components/utils";
 import { StripeCustomerService } from "../../../stripe-customer";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { StripeSubscriptionInterface, StripeSubscriptionService, SubscriptionStatus } from "../../data";
@@ -13,8 +19,8 @@ import { SubscriptionStatusBadge } from "../widgets/SubscriptionStatusBadge";
  * Formats the plan name from price data.
  * Format: "Product Name - Nickname (Interval)" e.g., "Only 35 - Pro (Monthly)"
  */
-function formatPlanName(price: StripePriceInterface | undefined): string {
-  if (!price) return "N/A";
+function formatPlanName(price: StripePriceInterface | undefined, t: ReturnType<typeof useTranslations>): string {
+  if (!price) return t("billing.ui.not_available");
 
   const productName = price.product?.name || "";
   const nickname = price.nickname || "";
@@ -23,10 +29,10 @@ function formatPlanName(price: StripePriceInterface | undefined): string {
   let interval = "";
   if (price.recurring?.interval) {
     const intervalMap: Record<string, string> = {
-      day: "Daily",
-      week: "Weekly",
-      month: "Monthly",
-      year: "Yearly",
+      day: t("billing.admin.prices.interval.day"),
+      week: t("billing.admin.prices.interval.week"),
+      month: t("billing.admin.prices.interval.month"),
+      year: t("billing.admin.prices.interval.year"),
     };
     interval = intervalMap[price.recurring.interval] || price.recurring.interval;
   }
@@ -36,15 +42,19 @@ function formatPlanName(price: StripePriceInterface | undefined): string {
   const planLabel = parts.join(" - ");
 
   // Add interval in parentheses if available
-  return interval ? `${planLabel} (${interval})` : planLabel || "N/A";
+  return interval ? `${planLabel} (${interval})` : planLabel || t("billing.ui.not_available");
 }
 
 /**
  * Formats the billing amount from price data.
  */
-function formatBillingAmount(price: StripePriceInterface | undefined): string {
-  if (!price?.unitAmount) return "N/A";
-  return formatCurrency(price.unitAmount, price.currency);
+function formatBillingAmount(
+  price: StripePriceInterface | undefined,
+  notAvailable: string,
+  fmt: BillingFormatOptions,
+): string {
+  if (!price?.unitAmount) return notAvailable;
+  return formatCurrency(price.unitAmount, price.currency, fmt);
 }
 
 type SubscriptionDetailsProps = {
@@ -62,6 +72,8 @@ export function SubscriptionDetails({
   onSubscriptionChange,
   onChangePlan,
 }: SubscriptionDetailsProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const [showCancel, setShowCancel] = useState<boolean>(false);
   const [isProcessing, setIsProcessing] = useState<boolean>(false);
 
@@ -110,14 +122,14 @@ export function SubscriptionDetails({
       <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle>Subscription Details</DialogTitle>
-            <DialogDescription>View and manage your subscription</DialogDescription>
+            <DialogTitle>{t("billing.ui.subscription.details_title")}</DialogTitle>
+            <DialogDescription>{t("billing.ui.subscription.details_description")}</DialogDescription>
           </DialogHeader>
 
           <div className="space-y-6">
             {/* Status */}
             <div className="flex items-center gap-x-3">
-              <span className="text-muted-foreground text-xs">Status:</span>
+              <span className="text-muted-foreground text-xs">{t("billing.ui.labels.status")}</span>
               <SubscriptionStatusBadge
                 status={subscription.status}
                 cancelAtPeriodEnd={subscription.cancelAtPeriodEnd}
@@ -127,21 +139,23 @@ export function SubscriptionDetails({
             {/* Plan Info */}
             <div className="space-y-2">
               <div className="flex justify-between">
-                <span className="text-muted-foreground text-xs">Plan:</span>
-                <span className="text-sm">{formatPlanName(subscription.price)}</span>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.labels.plan")}</span>
+                <span className="text-sm">{formatPlanName(subscription.price, t)}</span>
               </div>
               <div className="flex justify-between">
-                <span className="text-muted-foreground text-xs">Billing Amount:</span>
-                <span className="text-sm">{formatBillingAmount(subscription.price)}</span>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.subscription.billing_amount")}</span>
+                <span className="text-sm">
+                  {formatBillingAmount(subscription.price, t("billing.ui.not_available"), fmt)}
+                </span>
               </div>
             </div>
 
             {/* Current Period */}
             <div className="space-y-2">
               <div className="flex justify-between">
-                <span className="text-muted-foreground text-xs">Current Period:</span>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.subscription.current_period")}</span>
                 <span className="text-sm">
-                  {formatDate(subscription.currentPeriodStart)} - {formatDate(subscription.currentPeriodEnd)}
+                  {formatDate(subscription.currentPeriodStart, fmt)} - {formatDate(subscription.currentPeriodEnd, fmt)}
                 </span>
               </div>
             </div>
@@ -149,8 +163,8 @@ export function SubscriptionDetails({
             {/* Trial Info */}
             {subscription.trialEnd && (
               <div className="flex justify-between">
-                <span className="text-muted-foreground text-xs">Trial Ends:</span>
-                <span className="text-sm">{formatDate(subscription.trialEnd)}</span>
+                <span className="text-muted-foreground text-xs">{t("billing.ui.subscription.trial_ends")}</span>
+                <span className="text-sm">{formatDate(subscription.trialEnd, fmt)}</span>
               </div>
             )}
 
@@ -158,8 +172,9 @@ export function SubscriptionDetails({
             {subscription.cancelAtPeriodEnd && (
               <div className="bg-warning/15 border-warning/30 rounded-lg border p-3">
                 <p className="text-warning text-xs/relaxed">
-                  This subscription will be canceled at the end of the current period on{" "}
-                  {formatDate(subscription.currentPeriodEnd)}.
+                  {t("billing.ui.subscription.cancel_at_period_end", {
+                    date: formatDate(subscription.currentPeriodEnd, fmt),
+                  })}
                 </p>
               </div>
             )}
@@ -168,30 +183,30 @@ export function SubscriptionDetails({
             <div className="flex flex-wrap gap-2 pt-4 border-t">
               {onChangePlan && (
                 <Button variant="default" onClick={() => onChangePlan(subscription)}>
-                  Change Plan
+                  {t("billing.ui.subscription.change_plan")}
                 </Button>
               )}
 
               {canPause && (
                 <Button variant="outline" onClick={handlePause} disabled={isProcessing}>
-                  {isProcessing ? "Pausing..." : "Pause"}
+                  {isProcessing ? t("billing.ui.subscription.pausing") : t("billing.ui.subscription.pause")}
                 </Button>
               )}
 
               {canResume && (
                 <Button variant="outline" onClick={handleResume} disabled={isProcessing}>
-                  {isProcessing ? "Resuming..." : "Resume"}
+                  {isProcessing ? t("billing.ui.subscription.resuming") : t("billing.ui.subscription.resume")}
                 </Button>
               )}
 
               {canCancel && (
                 <Button variant="destructive" onClick={() => setShowCancel(true)}>
-                  Cancel
+                  {t("ui.buttons.cancel")}
                 </Button>
               )}
 
               <Button variant="outline" onClick={handleManageViaPortal}>
-                Manage via Portal
+                {t("billing.ui.subscription.manage_portal")}
               </Button>
             </div>
           </div>

package/src/features/billing/stripe-subscription/components/forms/CancelSubscriptionDialog.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
@@ -14,7 +15,7 @@ import {
   DialogTitle,
   Form,
 } from "../../../../../shadcnui";
-import { formatDate } from "../../../components/utils";
+import { formatDate, useBillingFormatOptions } from "../../../components/utils";
 import { StripeSubscriptionInterface, StripeSubscriptionService } from "../../data";
 
 type CancelSubscriptionDialogProps = {
@@ -34,6 +35,8 @@ export function CancelSubscriptionDialog({
   onOpenChange,
   onSuccess,
 }: CancelSubscriptionDialogProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -61,38 +64,38 @@ export function CancelSubscriptionDialog({
     }
   };
 
-  const periodEndDate = formatDate(subscription.currentPeriodEnd);
+  const periodEndDate = formatDate(subscription.currentPeriodEnd, fmt);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>Cancel Subscription</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to cancel this subscription? This action cannot be undone.
-          </DialogDescription>
+          <DialogTitle>{t("billing.ui.subscription.cancel.title")}</DialogTitle>
+          <DialogDescription>{t("billing.ui.subscription.cancel.description")}</DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
             <div className="bg-primary/10 border-primary/30 text-foreground rounded-lg border p-3 text-sm">
-              Your subscription will remain active until {periodEndDate}. You can continue using the service until then.
+              {t("billing.ui.subscription.cancel.remains_active", { date: periodEndDate })}
             </div>
 
             <FormTextarea
               form={form}
               id="reason"
-              name="Reason (Optional)"
-              placeholder="Let us know why you're canceling..."
+              name={t("billing.ui.subscription.cancel.reason")}
+              placeholder={t("billing.ui.subscription.cancel.reason_placeholder")}
               className="min-h-24"
             />
 
             <div className="flex gap-x-2 justify-end pt-2">
               <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
-                Keep Subscription
+                {t("billing.ui.subscription.cancel.keep")}
               </Button>
               <Button type="submit" variant="destructive" disabled={isSubmitting}>
-                {isSubmitting ? "Canceling..." : "Confirm Cancellation"}
+                {isSubmitting
+                  ? t("billing.ui.subscription.cancel.canceling")
+                  : t("billing.ui.subscription.cancel.confirm")}
               </Button>
             </div>
           </form>

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

@@ -1,8 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
-import { formatCurrency, formatDate } from "../../../components/utils";
+import { formatCurrency, formatDate, useBillingFormatOptions } from "../../../components/utils";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { StripeSubscriptionInterface, SubscriptionStatus } from "../../data";
 import { SubscriptionDetails } from "../details/SubscriptionDetails";
@@ -12,8 +13,8 @@ import { SubscriptionStatusBadge } from "../widgets/SubscriptionStatusBadge";
  * Formats the plan name from price data.
  * Format: "Product Name - Nickname (Interval)" e.g., "Only 35 - Pro (Monthly)"
  */
-function formatPlanName(price: StripePriceInterface | undefined): string {
-  if (!price) return "N/A";
+function formatPlanName(price: StripePriceInterface | undefined, t: ReturnType<typeof useTranslations>): string {
+  if (!price) return t("billing.ui.not_available");
 
   const productName = price.product?.name || "";
   const nickname = price.nickname || "";
@@ -22,10 +23,10 @@ function formatPlanName(price: StripePriceInterface | undefined): string {
   let interval = "";
   if (price.recurring?.interval) {
     const intervalMap: Record<string, string> = {
-      day: "Daily",
-      week: "Weekly",
-      month: "Monthly",
-      year: "Yearly",
+      day: t("billing.admin.prices.interval.day"),
+      week: t("billing.admin.prices.interval.week"),
+      month: t("billing.admin.prices.interval.month"),
+      year: t("billing.admin.prices.interval.year"),
     };
     interval = intervalMap[price.recurring.interval] || price.recurring.interval;
   }
@@ -35,7 +36,7 @@ function formatPlanName(price: StripePriceInterface | undefined): string {
   const planLabel = parts.join(" - ");
 
   // Add interval in parentheses if available
-  return interval ? `${planLabel} (${interval})` : planLabel || "N/A";
+  return interval ? `${planLabel} (${interval})` : planLabel || t("billing.ui.not_available");
 }
 
 type SubscriptionsListProps = {
@@ -45,6 +46,8 @@ type SubscriptionsListProps = {
 };
 
 export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChangePlan }: SubscriptionsListProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const [selectedSub, setSelectedSub] = useState<StripeSubscriptionInterface | null>(null);
 
   const handleRowClick = (subscription: StripeSubscriptionInterface) => {
@@ -57,18 +60,18 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
         <Table>
           <TableHeader className="bg-muted">
             <TableRow>
-              <TableHead>Status</TableHead>
-              <TableHead>Plan</TableHead>
-              <TableHead>Period</TableHead>
-              <TableHead className="text-end">Amount</TableHead>
-              <TableHead className="text-end">Actions</TableHead>
+              <TableHead>{t("billing.ui.columns.status")}</TableHead>
+              <TableHead>{t("billing.ui.columns.plan")}</TableHead>
+              <TableHead>{t("billing.ui.columns.period")}</TableHead>
+              <TableHead className="text-end">{t("billing.ui.columns.amount")}</TableHead>
+              <TableHead className="text-end">{t("billing.ui.columns.actions")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {subscriptions.map((subscription) => {
               const price = subscription.price;
-              const amount = price?.unitAmount ? formatCurrency(price.unitAmount, price.currency) : "0";
-              const period = `${formatDate(subscription.currentPeriodStart)} - ${formatDate(subscription.currentPeriodEnd)}`;
+              const amount = price?.unitAmount ? formatCurrency(price.unitAmount, price.currency, fmt) : "0";
+              const period = `${formatDate(subscription.currentPeriodStart, fmt)} - ${formatDate(subscription.currentPeriodEnd, fmt)}`;
 
               return (
                 <TableRow
@@ -82,7 +85,7 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
                       cancelAtPeriodEnd={subscription.cancelAtPeriodEnd}
                     />
                   </TableCell>
-                  <TableCell className="font-medium">{formatPlanName(price)}</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">
@@ -97,7 +100,7 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
                             onChangePlan(subscription);
                           }}
                         >
-                          Upgrade
+                          {t("billing.ui.subscription.upgrade")}
                         </Button>
                       )}
                   </TableCell>

package/src/features/billing/stripe-subscription/components/widgets/IntervalToggle.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Tabs, TabsList, TabsTrigger } from "../../../../../shadcnui";
 
 export type BillingInterval = "month" | "year";
@@ -12,6 +13,7 @@ export type IntervalToggleProps = {
 };
 
 export function IntervalToggle({ value, onChange, hasMonthly, hasYearly }: IntervalToggleProps) {
+  const t = useTranslations();
   // Only render if BOTH intervals are available
   if (!hasMonthly || !hasYearly) {
     return null;
@@ -20,8 +22,8 @@ export function IntervalToggle({ value, onChange, hasMonthly, hasYearly }: Inter
   return (
     <Tabs value={value} onValueChange={(v) => onChange(v as BillingInterval)}>
       <TabsList>
-        <TabsTrigger value="month">Monthly</TabsTrigger>
-        <TabsTrigger value="year">Yearly</TabsTrigger>
+        <TabsTrigger value="month">{t("billing.admin.prices.interval.month")}</TabsTrigger>
+        <TabsTrigger value="year">{t("billing.admin.prices.interval.year")}</TabsTrigger>
       </TabsList>
     </Tabs>
   );

package/src/features/billing/stripe-subscription/components/widgets/PricingCard.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Check } from "lucide-react";
 import { KeyboardEvent } from "react";
 import { Badge, Button, Card, CardContent, CardFooter, CardHeader } from "../../../../../shadcnui";
-import { formatCurrency, formatInterval } from "../../../components/utils";
+import { formatCurrency, formatInterval, useBillingFormatOptions } from "../../../components/utils";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { cn } from "../../../../../utils/cn";
 
@@ -24,10 +25,12 @@ export function PricingCard({
   isLoading = false,
   onSelect,
 }: PricingCardProps) {
-  const description = price.description || price.nickname || "Standard";
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
+  const description = price.description || price.nickname || t("billing.ui.pricing.standard");
   const features = price.features || [];
-  const formattedPrice = formatCurrency(price.unitAmount, price.currency);
-  const interval = formatInterval(price);
+  const formattedPrice = formatCurrency(price.unitAmount, price.currency, fmt);
+  const interval = formatInterval(price, fmt);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if ((e.key === "Enter" || e.key === " ") && !isDisabled && !isCurrentPlan) {
@@ -46,7 +49,7 @@ export function PricingCard({
     <Card
       role="radio"
       aria-checked={isSelected}
-      aria-label={`${description} plan at ${formattedPrice} ${interval}`}
+      aria-label={t("billing.ui.pricing.card_aria", { description, price: formattedPrice, interval })}
       tabIndex={isDisabled ? -1 : 0}
       onKeyDown={handleKeyDown}
       onClick={handleClick}
@@ -62,7 +65,7 @@ export function PricingCard({
     >
       {isCurrentPlan && (
         <Badge variant="secondary" className="absolute top-2 end-2">
-          Current
+          {t("billing.ui.pricing.current")}
         </Badge>
       )}
 
@@ -94,7 +97,13 @@ export function PricingCard({
           className="w-full"
           disabled={isDisabled || isCurrentPlan || isLoading}
         >
-          {isLoading ? "Processing..." : isCurrentPlan ? "Current Plan" : isSelected ? "Selected" : "Select Plan"}
+          {isLoading
+            ? t("billing.ui.wizard.review.processing")
+            : isCurrentPlan
+              ? t("billing.ui.pricing.current_plan")
+              : isSelected
+                ? t("billing.ui.pricing.selected")
+                : t("billing.ui.wizard.steps.select_plan")}
         </Button>
       </CardFooter>
     </Card>

package/src/features/billing/stripe-subscription/components/widgets/ProductPricingList.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Skeleton } from "../../../../../shadcnui";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { StripeProductInterface } from "../../../stripe-product";
@@ -52,12 +53,13 @@ export function ProductPricingList({
   hideRecurringPrices = false,
   hideOneTimePrices = false,
 }: ProductPricingListProps) {
+  const t = useTranslations();
   if (loading) {
     return <ProductPricingListSkeleton />;
   }
 
   if (products.length === 0) {
-    return <div className="text-center py-8 text-muted-foreground">No plans available</div>;
+    return <div className="text-center py-8 text-muted-foreground">{t("billing.ui.pricing.no_plans")}</div>;
   }
 
   const sortedProducts = [...products].sort((a, b) => {

package/src/features/billing/stripe-subscription/components/widgets/ProductPricingRow.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { StripeProductInterface } from "../../../stripe-product";
 import { SectionHeader } from "../../../../../components/typography";
@@ -22,6 +23,7 @@ export function ProductPricingRow({
   loadingPriceId,
   onSelectPrice,
 }: ProductPricingRowProps) {
+  const t = useTranslations();
   if (prices.length === 0) {
     return null;
   }
@@ -35,7 +37,7 @@ export function ProductPricingRow({
       <div
         className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
         role="radiogroup"
-        aria-label={`Pricing options for ${product.name}`}
+        aria-label={t("billing.ui.pricing.options_aria", { name: product.name })}
       >
         {prices
           .sort((a, b) => (a.unitAmount ?? 0) - (b.unitAmount ?? 0))

package/src/features/billing/stripe-subscription/components/widgets/ProrationPreview.tsx

@@ -1,38 +1,43 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { ProrationPreviewInterface } from "../../../stripe-invoice/data/stripe-invoice.interface";
-import { formatCurrency, formatDate } from "../../../components/utils";
+import { formatCurrency, formatDate, useBillingFormatOptions } from "../../../components/utils";
 
 type ProrationPreviewProps = {
   preview: ProrationPreviewInterface;
 };
 
 export function ProrationPreview({ preview }: ProrationPreviewProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   return (
     <div className="bg-primary/10 border-primary/30 rounded-lg border p-4">
-      <h4 className="text-primary mb-3 font-semibold">Proration Breakdown</h4>
+      <h4 className="text-primary mb-3 font-semibold">{t("billing.ui.proration.title")}</h4>
 
       <div className="space-y-2">
         {preview.lineItems.map((item, index) => (
           <div key={index} className="flex justify-between text-sm">
             <span className="text-muted-foreground">{item.description}</span>
             <span className={`font-medium ${item.amount < 0 ? "text-success" : "text-foreground"}`}>
-              {formatCurrency(item.amount, preview.currency)}
+              {formatCurrency(item.amount, preview.currency, fmt)}
             </span>
           </div>
         ))}
 
         <div className="border-primary/30 mt-2 border-t pt-2">
           <div className="flex justify-between font-semibold">
-            <span className="text-foreground">Net Due Today</span>
-            <span className="text-foreground">{formatCurrency(preview.immediateCharge, preview.currency)}</span>
+            <span className="text-foreground">{t("billing.ui.proration.net_due_today")}</span>
+            <span className="text-foreground">{formatCurrency(preview.immediateCharge, preview.currency, fmt)}</span>
           </div>
         </div>
 
         {preview.lineItems.length > 0 && preview.lineItems[0].period && (
           <div className="text-muted-foreground mt-2 text-xs">
-            Next invoice on {formatDate(preview.lineItems[0].period.end)} for{" "}
-            {formatCurrency(preview.amountDue, preview.currency)}
+            {t("billing.ui.proration.next_invoice", {
+              date: formatDate(preview.lineItems[0].period.end, fmt),
+              amount: formatCurrency(preview.amountDue, preview.currency, fmt),
+            })}
           </div>
         )}
       </div>

package/src/features/billing/stripe-subscription/components/widgets/SubscriptionConfirmation.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Check, Loader2 } from "lucide-react";
 import { Button } from "../../../../../shadcnui";
-import { formatCurrency, formatInterval } from "../../../components/utils";
+import { formatCurrency, formatInterval, useBillingFormatOptions } from "../../../components/utils";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 
 type SubscriptionConfirmationProps = {
@@ -13,13 +14,15 @@ type SubscriptionConfirmationProps = {
 };
 
 export function SubscriptionConfirmation({ price, isLoading, onConfirm, onCancel }: SubscriptionConfirmationProps) {
-  const productName = price.product?.name || price.nickname || "Selected Plan";
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
+  const productName = price.product?.name || price.nickname || t("billing.ui.wizard.review.selected_plan");
   const productDescription = price.product?.description || price.description;
   const features = price.features || [];
 
   return (
     <div className="bg-accent/10 border border-accent/30 rounded-lg p-4">
-      <h4 className="font-semibold mb-3">Confirm Your Subscription</h4>
+      <h4 className="font-semibold mb-3">{t("billing.ui.confirmation.title")}</h4>
 
       <div className="space-y-3">
         {/* Plan name and description */}
@@ -30,8 +33,8 @@ export function SubscriptionConfirmation({ price, isLoading, onConfirm, onCancel
 
         {/* Price */}
         <div className="text-lg font-semibold">
-          {formatCurrency(price.unitAmount, price.currency)}
-          <span className="text-sm font-normal text-muted-foreground">{formatInterval(price)}</span>
+          {formatCurrency(price.unitAmount, price.currency, fmt)}
+          <span className="text-sm font-normal text-muted-foreground">{formatInterval(price, fmt)}</span>
         </div>
 
         {/* Features */}
@@ -49,16 +52,16 @@ export function SubscriptionConfirmation({ price, isLoading, onConfirm, onCancel
         {/* Action buttons */}
         <div className="flex justify-end gap-3 pt-2 border-t border-accent/30">
           <Button variant="outline" onClick={onCancel} disabled={isLoading}>
-            Cancel
+            {t("ui.buttons.cancel")}
           </Button>
           <Button onClick={onConfirm} disabled={isLoading}>
             {isLoading ? (
               <>
                 <Loader2 className="h-4 w-4 animate-spin me-2" />
-                Processing...
+                {t("billing.ui.wizard.review.processing")}
               </>
             ) : (
-              "Subscribe"
+              t("billing.ui.confirmation.subscribe")
             )}
           </Button>
         </div>