@carlonicora/nextjs-jsonapi 4.1.2 → 4.2.1

package/src/features/billing/contexts/PriceContext.tsx

@@ -8,7 +8,12 @@ import { usePageUrlGenerator } from "../../../hooks";
 import { BreadcrumbItemData } from "../../../interfaces";
 import { getRoleId } from "../../../roles";
 import { useCurrentUserContext } from "../../user/contexts";
-import { formatCurrency, formatInterval } from "../components/utils/currency";
+import {
+  type BillingFormatOptions,
+  formatCurrency,
+  formatInterval,
+  useBillingFormatOptions,
+} from "../components/utils";
 import { PriceArchiver } from "../stripe-price/components/forms/PriceArchiver";
 import PriceEditor from "../stripe-price/components/forms/PriceEditor";
 import { StripePriceInput, StripePriceInterface } from "../stripe-price/data/stripe-price.interface";
@@ -63,9 +68,15 @@ const defaultContextValue: PriceContextType = {
   productId: undefined,
 };
 
-/** Human label for a price: its nickname, else amount + interval. */
-export function priceLabel(price: StripePriceInterface): string {
-  return price.nickname ?? `${formatCurrency(price.unitAmount, price.currency)} ${formatInterval(price)}`.trim();
+/**
+ * Human label for a price: its nickname, else amount + interval. Pass the
+ * caller's `useBillingFormatOptions()` so the amount and interval follow the
+ * active locale; without it the label is formatted in English.
+ */
+export function priceLabel(price: StripePriceInterface, fmt: BillingFormatOptions = {}): string {
+  return (
+    price.nickname ?? `${formatCurrency(price.unitAmount, price.currency, fmt)} ${formatInterval(price, fmt)}`.trim()
+  );
 }
 
 export const PriceProvider = ({
@@ -75,6 +86,7 @@ export const PriceProvider = ({
   productId: productIdProp,
 }: PriceProviderProps) => {
   const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const generateUrl = usePageUrlGenerator();
   const { hasRole } = useCurrentUserContext();
 
@@ -170,7 +182,7 @@ export const PriceProvider = ({
         name: price.product.name,
         href: generateUrl({ page: Modules.StripeProduct, id: price.product.id }),
       });
-    if (price) items.push({ name: priceLabel(price) });
+    if (price) items.push({ name: priceLabel(price, fmt) });
     return items;
   };
 
@@ -178,7 +190,7 @@ export const PriceProvider = ({
     const response: any = { type: t("billing.admin.prices.title") };
     if (!price) return response;
 
-    response.element = priceLabel(price);
+    response.element = priceLabel(price, fmt);
 
     // narr8 note: gate on hasRole ONLY. hasPermissionToModule always returns
     // false in this app, so gating an editor on it hides the editor outright.

package/src/features/billing/i18n-keys.ts

@@ -108,3 +108,215 @@ export const BILLING_TOKENS_I18N_KEYS = [
   "billing.tokens.purchase_extra",
   "billing.tokens.upgrade_plan",
 ] as const;
+
+/**
+ * The `billing.ui.*` namespace (plus `billing.title`), read by the customer-facing
+ * billing surfaces: dashboard, cards, subscription wizard, invoices, payment
+ * methods and usage. A third export because these screens are neither the admin
+ * catalogue above nor the token indicator.
+ */
+export const BILLING_UI_I18N_KEYS = [
+  "billing.title",
+  "billing.ui.alert.payment_failed_description",
+  "billing.ui.alert.payment_failed_title",
+  "billing.ui.alert.trial_ending_description",
+  "billing.ui.alert.trial_ending_title",
+  "billing.ui.alert.update_payment_method",
+  "billing.ui.cards.customer.credit_balance",
+  "billing.ui.cards.customer.manage_portal",
+  "billing.ui.cards.customer.not_set_up",
+  "billing.ui.cards.customer.not_set_up_description",
+  "billing.ui.cards.customer.title",
+  "billing.ui.cards.invoices.empty_description",
+  "billing.ui.cards.invoices.invoice_from",
+  "billing.ui.cards.invoices.open_count",
+  "billing.ui.cards.invoices.paid_count",
+  "billing.ui.cards.invoices.title",
+  "billing.ui.cards.payment_method.add_card",
+  "billing.ui.cards.payment_method.empty_description",
+  "billing.ui.cards.payment_method.empty_title",
+  "billing.ui.cards.payment_method.more_cards",
+  "billing.ui.cards.payment_method.more_methods",
+  "billing.ui.cards.subscriptions.canceling",
+  "billing.ui.cards.subscriptions.cancels_on",
+  "billing.ui.cards.subscriptions.empty_description",
+  "billing.ui.cards.subscriptions.empty_title",
+  "billing.ui.cards.subscriptions.ends_on",
+  "billing.ui.cards.subscriptions.fallback_name",
+  "billing.ui.cards.subscriptions.more",
+  "billing.ui.cards.subscriptions.renews_on",
+  "billing.ui.cards.subscriptions.view_plans",
+  "billing.ui.cards.usage.across_meters",
+  "billing.ui.cards.usage.no_meters",
+  "billing.ui.cards.usage.no_meters_description",
+  "billing.ui.cards.usage.title",
+  "billing.ui.cards.usage.units",
+  "billing.ui.cards.view_all",
+  "billing.ui.cards.view_details",
+  "billing.ui.columns.actions",
+  "billing.ui.columns.amount",
+  "billing.ui.columns.date",
+  "billing.ui.columns.date_time",
+  "billing.ui.columns.description",
+  "billing.ui.columns.event_id",
+  "billing.ui.columns.invoice_number",
+  "billing.ui.columns.meter_event",
+  "billing.ui.columns.period",
+  "billing.ui.columns.plan",
+  "billing.ui.columns.quantity",
+  "billing.ui.columns.status",
+  "billing.ui.confirmation.subscribe",
+  "billing.ui.confirmation.title",
+  "billing.ui.dashboard.modal.invoices",
+  "billing.ui.dashboard.modal.subscriptions",
+  "billing.ui.dashboard.setting_up",
+  "billing.ui.dashboard.setup_button",
+  "billing.ui.dashboard.setup_description",
+  "billing.ui.dashboard.setup_title",
+  "billing.ui.interval.one_time",
+  "billing.ui.interval.per_day",
+  "billing.ui.interval.per_days",
+  "billing.ui.interval.per_month",
+  "billing.ui.interval.per_months",
+  "billing.ui.interval.per_week",
+  "billing.ui.interval.per_weeks",
+  "billing.ui.interval.per_year",
+  "billing.ui.interval.per_years",
+  "billing.ui.invalid_date",
+  "billing.ui.invoice_status.open",
+  "billing.ui.invoice_status.paid",
+  "billing.ui.invoice_status.uncollectible",
+  "billing.ui.invoice_status.void",
+  "billing.ui.invoice.amount_due",
+  "billing.ui.invoice.amount_paid",
+  "billing.ui.invoice.attempt_count",
+  "billing.ui.invoice.billing_period",
+  "billing.ui.invoice.download_pdf",
+  "billing.ui.invoice.due_date",
+  "billing.ui.invoice.line_items",
+  "billing.ui.invoice.paid_date",
+  "billing.ui.invoice.retry_payment",
+  "billing.ui.invoice.subtotal",
+  "billing.ui.invoice.tax",
+  "billing.ui.invoice.title",
+  "billing.ui.invoice.total",
+  "billing.ui.invoice.view_in_stripe",
+  "billing.ui.invoices.empty_description",
+  "billing.ui.invoices.empty_title",
+  "billing.ui.invoices.filter_all",
+  "billing.ui.invoices.loading",
+  "billing.ui.labels.plan",
+  "billing.ui.labels.status",
+  "billing.ui.not_available",
+  "billing.ui.payment_confirm.errors.failed",
+  "billing.ui.payment_confirm.errors.missing_details",
+  "billing.ui.payment_confirm.errors.not_completed",
+  "billing.ui.payment_confirm.errors.not_initialized",
+  "billing.ui.payment_confirm.errors.requires_action",
+  "billing.ui.payment_confirm.errors.unexpected",
+  "billing.ui.payment_form.errors.add",
+  "billing.ui.payment_form.errors.init",
+  "billing.ui.payment_form.errors.unexpected",
+  "billing.ui.payment_form.loading",
+  "billing.ui.payment_form.set_default",
+  "billing.ui.payment_method.expires",
+  "billing.ui.payment_method.title",
+  "billing.ui.payment_methods.add",
+  "billing.ui.payment_methods.add_description",
+  "billing.ui.payment_methods.add_first",
+  "billing.ui.payment_methods.default",
+  "billing.ui.payment_methods.empty_description",
+  "billing.ui.payment_methods.empty_title",
+  "billing.ui.payment_methods.loading",
+  "billing.ui.payment_methods.remove_default_warning",
+  "billing.ui.payment_methods.remove_description",
+  "billing.ui.payment_methods.remove_title",
+  "billing.ui.payment_methods.removing",
+  "billing.ui.payment_methods.set_default",
+  "billing.ui.payment_methods.title",
+  "billing.ui.pricing.card_aria",
+  "billing.ui.pricing.current",
+  "billing.ui.pricing.current_plan",
+  "billing.ui.pricing.no_plans",
+  "billing.ui.pricing.options_aria",
+  "billing.ui.pricing.selected",
+  "billing.ui.pricing.standard",
+  "billing.ui.promo_code.apply",
+  "billing.ui.promo_code.duration_forever",
+  "billing.ui.promo_code.duration_once",
+  "billing.ui.promo_code.duration_repeating",
+  "billing.ui.promo_code.placeholder",
+  "billing.ui.proration.net_due_today",
+  "billing.ui.proration.next_invoice",
+  "billing.ui.proration.title",
+  "billing.ui.subscription.billing_amount",
+  "billing.ui.subscription.cancel_at_period_end",
+  "billing.ui.subscription.cancel.canceling",
+  "billing.ui.subscription.cancel.confirm",
+  "billing.ui.subscription.cancel.description",
+  "billing.ui.subscription.cancel.keep",
+  "billing.ui.subscription.cancel.reason",
+  "billing.ui.subscription.cancel.reason_placeholder",
+  "billing.ui.subscription.cancel.remains_active",
+  "billing.ui.subscription.cancel.title",
+  "billing.ui.subscription.change_plan",
+  "billing.ui.subscription.current_period",
+  "billing.ui.subscription.details_description",
+  "billing.ui.subscription.details_title",
+  "billing.ui.subscription.manage_portal",
+  "billing.ui.subscription.pause",
+  "billing.ui.subscription.pausing",
+  "billing.ui.subscription.resume",
+  "billing.ui.subscription.resuming",
+  "billing.ui.subscription.trial_ends",
+  "billing.ui.subscription.upgrade",
+  "billing.ui.subscriptions.empty_description",
+  "billing.ui.subscriptions.empty_title",
+  "billing.ui.subscriptions.loading",
+  "billing.ui.subscriptions.purchase_addons",
+  "billing.ui.subscriptions.subscribe",
+  "billing.ui.subscriptions.title",
+  "billing.ui.usage.empty_description",
+  "billing.ui.usage.empty_title",
+  "billing.ui.usage.history_empty",
+  "billing.ui.usage.history_title",
+  "billing.ui.usage.loading",
+  "billing.ui.usage.no_limit",
+  "billing.ui.usage.of_limit_used",
+  "billing.ui.usage.percent_used",
+  "billing.ui.usage.period",
+  "billing.ui.usage.title",
+  "billing.ui.wizard.addons_description",
+  "billing.ui.wizard.back",
+  "billing.ui.wizard.errors.already_subscribed",
+  "billing.ui.wizard.errors.invalid_promo_code",
+  "billing.ui.wizard.errors.payment_method_required",
+  "billing.ui.wizard.errors.prepare_review",
+  "billing.ui.wizard.errors.process_subscription",
+  "billing.ui.wizard.errors.validate_promo_code",
+  "billing.ui.wizard.change_description",
+  "billing.ui.wizard.change_title",
+  "billing.ui.wizard.next_review",
+  "billing.ui.wizard.payment_description",
+  "billing.ui.wizard.review.amount_off",
+  "billing.ui.wizard.review.charge_now",
+  "billing.ui.wizard.review.confirm_change",
+  "billing.ui.wizard.review.due_now",
+  "billing.ui.wizard.review.interval_monthly",
+  "billing.ui.wizard.review.interval_one_time",
+  "billing.ui.wizard.review.interval_yearly",
+  "billing.ui.wizard.review.no_payment_on_file",
+  "billing.ui.wizard.review.no_plan",
+  "billing.ui.wizard.review.payment_on_file",
+  "billing.ui.wizard.review.percent_off",
+  "billing.ui.wizard.review.processing",
+  "billing.ui.wizard.review.promotion_code",
+  "billing.ui.wizard.review.proration_description",
+  "billing.ui.wizard.review.proration_summary",
+  "billing.ui.wizard.review.selected_plan",
+  "billing.ui.wizard.review.subscribe_now",
+  "billing.ui.wizard.review.trial_upgrade",
+  "billing.ui.wizard.review.trial_upgrade_description",
+  "billing.ui.wizard.steps.select_plan",
+  "billing.ui.wizard.subscribe_description",
+] as const;

package/src/features/billing/stripe-customer/components/containers/PaymentMethodsContainer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { CreditCard } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "../../../../../shadcnui";
@@ -8,6 +9,7 @@ import { PaymentMethodEditor } from "../forms/PaymentMethodEditor";
 import { PaymentMethodsList } from "../lists/PaymentMethodsList";
 
 export function PaymentMethodsContainer() {
+  const t = useTranslations();
   const [paymentMethods, setPaymentMethods] = useState<PaymentMethodInterface[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [showAddPaymentMethod, setShowAddPaymentMethod] = useState<boolean>(false);
@@ -31,7 +33,7 @@ export function PaymentMethodsContainer() {
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <p className="text-muted-foreground">Loading payment methods...</p>
+        <p className="text-muted-foreground">{t("billing.ui.payment_methods.loading")}</p>
       </div>
     );
   }
@@ -42,9 +44,9 @@ export function PaymentMethodsContainer() {
       <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">Payment Methods</h1>
+          <h1 className="text-primary text-3xl font-semibold">{t("billing.ui.payment_methods.title")}</h1>
         </div>
-        <Button onClick={() => setShowAddPaymentMethod(true)}>Add Payment Method</Button>
+        <Button onClick={() => setShowAddPaymentMethod(true)}>{t("billing.ui.payment_methods.add")}</Button>
       </div>
 
       {/* Empty State */}
@@ -52,11 +54,9 @@ export function PaymentMethodsContainer() {
         <div className="flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 bg-muted/50 p-12">
           <CreditCard className="h-16 w-16 text-muted-foreground" />
           <div className="text-center">
-            <h3 className="mb-2 text-sm font-medium">No payment methods</h3>
-            <p className="mb-4 text-muted-foreground">
-              Add a payment method to enable subscriptions and secure checkout.
-            </p>
-            <Button onClick={() => setShowAddPaymentMethod(true)}>Add Your First Card</Button>
+            <h3 className="mb-2 text-sm font-medium">{t("billing.ui.payment_methods.empty_title")}</h3>
+            <p className="mb-4 text-muted-foreground">{t("billing.ui.payment_methods.empty_description")}</p>
+            <Button onClick={() => setShowAddPaymentMethod(true)}>{t("billing.ui.payment_methods.add_first")}</Button>
           </div>
         </div>
       )}

package/src/features/billing/stripe-customer/components/details/PaymentMethodCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { MoreVertical } from "lucide-react";
 import { useEffect, useState } from "react";
 import {
@@ -37,6 +38,7 @@ const brandIcons: Record<string, string> = {
 };
 
 export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCardProps) {
+  const t = useTranslations();
   const [loading, setLoading] = useState<boolean>(false);
   const [customer, setCustomer] = useState<StripeCustomerInterface | null>(null);
   const [showRemoveDialog, setShowRemoveDialog] = useState<boolean>(false);
@@ -92,7 +94,7 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
         {/* Default Badge */}
         {isDefault && (
           <Badge variant="softGreen" className="absolute end-2 top-2">
-            Default
+            {t("billing.ui.payment_methods.default")}
           </Badge>
         )}
 
@@ -117,7 +119,7 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
             <DropdownMenuContent align="end">
               {!isDefault && (
                 <DropdownMenuItem onClick={handleSetDefault} disabled={loading}>
-                  Set as Default
+                  {t("billing.ui.payment_methods.set_default")}
                 </DropdownMenuItem>
               )}
               <DropdownMenuItem
@@ -125,7 +127,7 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
                 disabled={loading}
                 className="text-destructive"
               >
-                Remove
+                {t("ui.buttons.remove")}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -135,7 +137,7 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
           <div className="flex flex-col gap-y-1">
             <p className="text-lg font-semibold">•••• {last4}</p>
             <p className="text-sm text-muted-foreground">
-              Expires {String(expMonth).padStart(2, "0")}/{expYear}
+              {t("billing.ui.payment_method.expires", { date: `${String(expMonth).padStart(2, "0")}/${expYear}` })}
             </p>
           </div>
         </CardContent>
@@ -145,16 +147,16 @@ export function PaymentMethodCard({ paymentMethod, onUpdate }: PaymentMethodCard
       <AlertDialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Remove Payment Method</AlertDialogTitle>
+            <AlertDialogTitle>{t("billing.ui.payment_methods.remove_title")}</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to remove this payment method? This action cannot be undone.
-              {isDefault && " This is your default payment method."}
+              {t("billing.ui.payment_methods.remove_description")}
+              {isDefault && ` ${t("billing.ui.payment_methods.remove_default_warning")}`}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+            <AlertDialogCancel disabled={loading}>{t("ui.buttons.cancel")}</AlertDialogCancel>
             <AlertDialogAction onClick={handleRemove} disabled={loading} className="bg-red-600 hover:bg-red-700">
-              {loading ? "Removing..." : "Remove"}
+              {loading ? t("billing.ui.payment_methods.removing") : t("ui.buttons.remove")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../../../../shadcnui";
 import { PaymentMethodForm } from "./PaymentMethodForm";
 
@@ -10,6 +11,7 @@ type PaymentMethodEditorProps = {
 };
 
 export function PaymentMethodEditor({ open, onOpenChange, onSuccess }: PaymentMethodEditorProps) {
+  const t = useTranslations();
   const handleSuccess = () => {
     onSuccess();
     onOpenChange(false);
@@ -23,10 +25,8 @@ export function PaymentMethodEditor({ open, onOpenChange, onSuccess }: PaymentMe
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>Add Payment Method</DialogTitle>
-          <DialogDescription>
-            Add a new payment method to your account. Your card information is securely processed by Stripe.
-          </DialogDescription>
+          <DialogTitle>{t("billing.ui.payment_methods.add")}</DialogTitle>
+          <DialogDescription>{t("billing.ui.payment_methods.add_description")}</DialogDescription>
         </DialogHeader>
         {open && <PaymentMethodForm onSuccess={handleSuccess} onCancel={handleCancel} />}
       </DialogContent>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { useEffect, useState } from "react";
 import { Alert, AlertDescription, Button, Checkbox, Label } from "../../../../../shadcnui";
@@ -12,6 +13,7 @@ type PaymentMethodFormProps = {
 };
 
 export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: PaymentMethodFormProps) {
+  const t = useTranslations();
   const stripe = useStripe();
   const elements = useElements();
 
@@ -30,7 +32,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
         setSetupIntent(intent);
       } catch (err) {
         console.error("[PaymentMethodForm] Failed to create setup intent:", err);
-        setError("Failed to initialize payment form. Please try again.");
+        setError(t("billing.ui.payment_form.errors.init"));
       } finally {
         setLoading(false);
       }
@@ -67,7 +69,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
 
       if (stripeError) {
         console.error("[PaymentMethodForm] Stripe error:", stripeError);
-        setError(stripeError.message || "Failed to add payment method. Please check your card details.");
+        setError(stripeError.message || t("billing.ui.payment_form.errors.add"));
         setIsSubmitting(false);
         return;
       }
@@ -85,7 +87,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
       onSuccess();
     } catch (err: any) {
       console.error("[PaymentMethodForm] Error:", err);
-      setError(err.message || "An unexpected error occurred. Please try again.");
+      setError(err.message || t("billing.ui.payment_form.errors.unexpected"));
     } finally {
       setIsSubmitting(false);
     }
@@ -94,7 +96,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
   if (loading) {
     return (
       <div className="flex items-center justify-center py-8">
-        <p className="text-muted-foreground">Loading payment form...</p>
+        <p className="text-muted-foreground">{t("billing.ui.payment_form.loading")}</p>
       </div>
     );
   }
@@ -133,7 +135,7 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
       <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">
-          Set as default payment method
+          {t("billing.ui.payment_form.set_default")}
         </Label>
       </div>
 
@@ -147,10 +149,10 @@ export function PaymentMethodForm({ onSuccess, onCancel, isLoading = false }: Pa
       {/* Action Buttons */}
       <div className="flex justify-end gap-x-2">
         <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting || isLoading}>
-          Cancel
+          {t("ui.buttons.cancel")}
         </Button>
         <Button type="submit" disabled={!stripe || isSubmitting || isLoading}>
-          {isSubmitting ? "Processing..." : "Add Card"}
+          {isSubmitting ? t("billing.ui.wizard.review.processing") : t("billing.ui.cards.payment_method.add_card")}
         </Button>
       </div>
     </form>

package/src/features/billing/stripe-invoice/components/containers/InvoicesContainer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { Tabs, TabsList, TabsTrigger } from "../../../../../shadcnui";
 import { InvoiceStatus, StripeInvoiceInterface } from "../../data/stripe-invoice.interface";
@@ -9,6 +10,7 @@ import { InvoicesList } from "../lists/InvoicesList";
 type StatusFilter = InvoiceStatus | "all";
 
 export function InvoicesContainer() {
+  const t = useTranslations();
   const [invoices, setInvoices] = useState<StripeInvoiceInterface[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
@@ -40,22 +42,22 @@ export function InvoicesContainer() {
       {/* Status Filter Tabs */}
       <Tabs value={statusFilter} onValueChange={handleFilterChange}>
         <TabsList>
-          <TabsTrigger value="all">All</TabsTrigger>
-          <TabsTrigger value={InvoiceStatus.PAID}>Paid</TabsTrigger>
-          <TabsTrigger value={InvoiceStatus.OPEN}>Open</TabsTrigger>
-          <TabsTrigger value={InvoiceStatus.VOID}>Void</TabsTrigger>
-          <TabsTrigger value={InvoiceStatus.UNCOLLECTIBLE}>Uncollectible</TabsTrigger>
+          <TabsTrigger value="all">{t("billing.ui.invoices.filter_all")}</TabsTrigger>
+          <TabsTrigger value={InvoiceStatus.PAID}>{t("billing.ui.invoice_status.paid")}</TabsTrigger>
+          <TabsTrigger value={InvoiceStatus.OPEN}>{t("billing.ui.invoice_status.open")}</TabsTrigger>
+          <TabsTrigger value={InvoiceStatus.VOID}>{t("billing.ui.invoice_status.void")}</TabsTrigger>
+          <TabsTrigger value={InvoiceStatus.UNCOLLECTIBLE}>{t("billing.ui.invoice_status.uncollectible")}</TabsTrigger>
         </TabsList>
       </Tabs>
 
       {/* Loading State */}
-      {loading && <div className="text-center py-8 text-muted-foreground">Loading invoices...</div>}
+      {loading && <div className="text-center py-8 text-muted-foreground">{t("billing.ui.invoices.loading")}</div>}
 
       {/* Empty State */}
       {!loading && invoices.length === 0 && (
         <div className="border border-dashed border-gray-300 rounded-lg p-8 text-center">
-          <p className="text-lg font-medium text-muted-foreground mb-2">No invoices yet</p>
-          <p className="text-sm text-muted-foreground">Invoices will appear here after your first billing cycle</p>
+          <p className="text-lg font-medium text-muted-foreground mb-2">{t("billing.ui.invoices.empty_title")}</p>
+          <p className="text-sm text-muted-foreground">{t("billing.ui.invoices.empty_description")}</p>
         </div>
       )}