@carlonicora/nextjs-jsonapi 4.1.1 → 4.2.0

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Badge, type BadgeProps } from "../../../../../shadcnui";
 import { SubscriptionStatus } from "../../data";
 
@@ -9,55 +10,57 @@ type SubscriptionStatusBadgeProps = {
 };
 
 type StatusConfig = {
+  /** Message key, translated at render time. */
   label: string;
   variant: BadgeProps["variant"];
 };
 
 const statusConfig: Record<SubscriptionStatus, StatusConfig> = {
   [SubscriptionStatus.ACTIVE]: {
-    label: "Active",
+    label: "billing.ui.subscription_status.active",
     variant: "softGreen",
   },
   [SubscriptionStatus.TRIALING]: {
-    label: "Trial",
+    label: "billing.ui.subscription_status.trialing",
     variant: "softBlue",
   },
   [SubscriptionStatus.PAST_DUE]: {
-    label: "Past Due",
+    label: "billing.ui.subscription_status.past_due",
     variant: "softRed",
   },
   [SubscriptionStatus.CANCELED]: {
-    label: "Canceled",
+    label: "billing.ui.subscription_status.canceled",
     variant: "softGray",
   },
   [SubscriptionStatus.PAUSED]: {
-    label: "Paused",
+    label: "billing.ui.subscription_status.paused",
     variant: "softYellow",
   },
   [SubscriptionStatus.UNPAID]: {
-    label: "Unpaid",
+    label: "billing.ui.subscription_status.unpaid",
     variant: "softOrange",
   },
   [SubscriptionStatus.INCOMPLETE]: {
-    label: "Incomplete",
+    label: "billing.ui.subscription_status.incomplete",
     variant: "softGray",
   },
   [SubscriptionStatus.INCOMPLETE_EXPIRED]: {
-    label: "Expired",
+    label: "billing.ui.subscription_status.incomplete_expired",
     variant: "softGray",
   },
 };
 
 const cancelingConfig: StatusConfig = {
-  label: "Canceling",
+  label: "billing.ui.cards.subscriptions.canceling",
   variant: "softAmber",
 };
 
 export function SubscriptionStatusBadge({ status, cancelAtPeriodEnd }: SubscriptionStatusBadgeProps) {
+  const t = useTranslations();
   // Show "Canceling" when subscription is set to cancel at period end
   const config = cancelAtPeriodEnd
     ? cancelingConfig
     : statusConfig[status] || statusConfig[SubscriptionStatus.CANCELED];
 
-  return <Badge variant={config.variant}>{config.label}</Badge>;
+  return <Badge variant={config.variant}>{t(config.label)}</Badge>;
 }

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useRef } from "react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../../../../../shadcnui";
 import { StripeSubscriptionInterface } from "../../data";
@@ -24,6 +25,7 @@ export function SubscriptionWizard({
   hasActiveRecurringSubscription,
   subscription,
 }: SubscriptionWizardProps) {
+  const t = useTranslations();
   const handleClose = useCallback(() => onOpenChange(false), [onOpenChange]);
 
   const { state, actions } = useSubscriptionWizard({
@@ -57,16 +59,16 @@ export function SubscriptionWizard({
   const isChangePlanMode = !!subscription;
 
   const dialogTitle = subscription
-    ? "Change Subscription Plan"
+    ? t("billing.ui.wizard.change_title")
     : isPurchasingAddons
-      ? "Purchase Add-ons"
-      : "Subscribe to a Plan";
+      ? t("billing.ui.subscriptions.purchase_addons")
+      : t("billing.ui.subscriptions.subscribe");
 
   const dialogDescription = subscription
-    ? "Select a new plan for your subscription"
+    ? t("billing.ui.wizard.change_description")
     : isPurchasingAddons
-      ? "Select one-time products to purchase"
-      : "Choose a subscription plan to get started";
+      ? t("billing.ui.wizard.addons_description")
+      : t("billing.ui.wizard.subscribe_description");
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Check } from "lucide-react";
 import { WizardStep } from "../../hooks/useSubscriptionWizard";
 
@@ -7,10 +8,11 @@ type WizardProgressIndicatorProps = {
   currentStep: WizardStep;
 };
 
+// `label` is a message key, translated at render time.
 const STEPS: { key: WizardStep; label: string }[] = [
-  { key: "plan-selection", label: "Select Plan" },
-  { key: "review", label: "Review" },
-  { key: "payment-method", label: "Payment" },
+  { key: "plan-selection", label: "billing.ui.wizard.steps.select_plan" },
+  { key: "review", label: "billing.ui.wizard.steps.review" },
+  { key: "payment-method", label: "billing.ui.wizard.steps.payment" },
 ];
 
 function getStepIndex(step: WizardStep): number {
@@ -18,6 +20,7 @@ function getStepIndex(step: WizardStep): number {
 }
 
 export function WizardProgressIndicator({ currentStep }: WizardProgressIndicatorProps) {
+  const t = useTranslations();
   const currentIndex = getStepIndex(currentStep);
 
   return (
@@ -43,7 +46,7 @@ export function WizardProgressIndicator({ currentStep }: WizardProgressIndicator
 
             {/* Step Label */}
             <span className={`text-sm ${isCurrent ? "font-medium text-foreground" : "text-muted-foreground"}`}>
-              {step.label}
+              {t(step.label)}
             </span>
 
             {/* Connector */}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { PaymentMethodForm } from "../../../stripe-customer/components/forms/PaymentMethodForm";
 import { SectionHeader } from "../../../../../components/typography";
 
@@ -10,11 +11,12 @@ type WizardStepPaymentMethodProps = {
 };
 
 export function WizardStepPaymentMethod({ onBack, onSuccess, isProcessing }: WizardStepPaymentMethodProps) {
+  const t = useTranslations();
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <SectionHeader>Add Payment Method</SectionHeader>
-        <p className="text-sm text-muted-foreground">Enter your card details to complete your subscription</p>
+        <SectionHeader>{t("billing.ui.payment_methods.add")}</SectionHeader>
+        <p className="text-sm text-muted-foreground">{t("billing.ui.wizard.payment_description")}</p>
       </div>
 
       <PaymentMethodForm onSuccess={onSuccess} onCancel={onBack} isLoading={isProcessing} />

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "../../../../../shadcnui";
 import { StripeProductInterface, StripeProductService } from "../../../stripe-product";
@@ -30,6 +31,7 @@ export function WizardStepPlanSelection({
   onNext,
   isProcessing,
 }: WizardStepPlanSelectionProps) {
+  const t = useTranslations();
   const [products, setProducts] = useState<StripeProductInterface[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -100,7 +102,7 @@ export function WizardStepPlanSelection({
       {/* Action Buttons */}
       <div className="flex justify-end pt-4 border-t">
         <Button onClick={onNext} disabled={!selectedPrice || isProcessing}>
-          {isProcessing ? "Loading..." : "Next: Review"}
+          {isProcessing ? t("common.loading") : t("billing.ui.wizard.next_review")}
         </Button>
       </div>
     </div>

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

@@ -1,9 +1,10 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { AlertCircle } from "lucide-react";
 import { Alert, AlertDescription, Badge, Button } from "../../../../../shadcnui";
 import { SectionHeader } from "../../../../../components/typography";
-import { formatCurrency } from "../../../components/utils/currency";
+import { formatCurrency, 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";
@@ -47,18 +48,20 @@ export function WizardStepReview({
   onRemovePromoCode,
   isTrialUpgrade,
 }: WizardStepReviewProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   if (!selectedPrice) {
-    return (
-      <div className="text-center py-8 text-muted-foreground">No plan selected. Please go back and select a plan.</div>
-    );
+    return <div className="text-center py-8 text-muted-foreground">{t("billing.ui.wizard.review.no_plan")}</div>;
   }
 
   const isChangingPlan = subscription && subscription.price?.id !== selectedPrice.id;
 
   const formatInterval = (price: StripePriceInterface) => {
-    if (price.priceType === "one_time") return "one-time";
+    if (price.priceType === "one_time") return t("billing.ui.wizard.review.interval_one_time");
     const interval = price.recurring?.interval || "month";
-    return interval === "year" ? "yearly" : "monthly";
+    return interval === "year"
+      ? t("billing.ui.wizard.review.interval_yearly")
+      : t("billing.ui.wizard.review.interval_monthly");
   };
 
   // Calculate discounted price if promotion code is applied
@@ -105,11 +108,13 @@ export function WizardStepReview({
     if (!promotionCode?.valid) return null;
 
     if (promotionCode.discountType === "percent_off" && promotionCode.discountValue) {
-      return `${promotionCode.discountValue}% off`;
+      return t("billing.ui.wizard.review.percent_off", { value: promotionCode.discountValue });
     }
 
     if (promotionCode.discountType === "amount_off" && promotionCode.discountValue) {
-      return `${formatCurrency(promotionCode.discountValue, promotionCode.currency || selectedPrice.currency)} off`;
+      return t("billing.ui.wizard.review.amount_off", {
+        amount: formatCurrency(promotionCode.discountValue, promotionCode.currency || selectedPrice.currency, fmt),
+      });
     }
 
     return null;
@@ -121,7 +126,7 @@ export function WizardStepReview({
     <div className="space-y-6">
       {/* Selected Plan Summary */}
       <div className="bg-muted/50 rounded-lg p-4 space-y-3">
-        <SectionHeader>Selected Plan</SectionHeader>
+        <SectionHeader>{t("billing.ui.wizard.review.selected_plan")}</SectionHeader>
         <div className="flex justify-between items-center">
           <div>
             <p className="font-medium">{selectedPrice.product?.name}</p>
@@ -131,16 +136,16 @@ export function WizardStepReview({
             {discountedPrice !== null ? (
               <>
                 <p className="text-sm text-muted-foreground line-through">
-                  {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
+                  {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency, fmt)}
                 </p>
                 <p className="text-success text-lg font-semibold">
-                  {formatCurrency(discountedPrice, selectedPrice.currency)}
+                  {formatCurrency(discountedPrice, selectedPrice.currency, fmt)}
                 </p>
                 {discountDescription && <Badge variant="softGreen">{discountDescription}</Badge>}
               </>
             ) : (
               <p className="font-semibold text-lg">
-                {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
+                {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency, fmt)}
               </p>
             )}
             <p className="text-sm text-muted-foreground">{formatInterval(selectedPrice)}</p>
@@ -154,29 +159,31 @@ export function WizardStepReview({
           className={`${isTrialUpgrade ? "bg-warning/15 border-warning/30" : "bg-primary/10 border-primary/30"} space-y-2 rounded-lg border p-4`}
         >
           <h4 className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-primary"}`}>
-            {isTrialUpgrade ? "Trial Upgrade" : "Proration Summary"}
+            {isTrialUpgrade
+              ? t("billing.ui.wizard.review.trial_upgrade")
+              : t("billing.ui.wizard.review.proration_summary")}
           </h4>
           <p className={`text-sm ${isTrialUpgrade ? "text-warning" : "text-foreground"}`}>
             {isTrialUpgrade
-              ? "Your trial will end immediately and you will be charged the full price."
-              : "Your next charge will be adjusted to account for the plan change."}
+              ? t("billing.ui.wizard.review.trial_upgrade_description")
+              : t("billing.ui.wizard.review.proration_description")}
           </p>
           <div className="flex justify-between text-sm">
             <span className={`${isTrialUpgrade ? "text-warning" : "text-muted-foreground"}`}>
-              {isTrialUpgrade ? "Amount to charge now:" : "Amount due now:"}
+              {isTrialUpgrade ? t("billing.ui.wizard.review.charge_now") : t("billing.ui.wizard.review.due_now")}
             </span>
             <span className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-foreground"}`}>
               {discountedImmediateCharge !== null ? (
                 <>
                   <span className="line-through text-muted-foreground me-2">
-                    {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
+                    {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency, fmt)}
                   </span>
                   <span className="text-success">
-                    {formatCurrency(discountedImmediateCharge, prorationPreview.currency)}
+                    {formatCurrency(discountedImmediateCharge, prorationPreview.currency, fmt)}
                   </span>
                 </>
               ) : (
-                formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)
+                formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency, fmt)
               )}
             </span>
           </div>
@@ -185,7 +192,7 @@ export function WizardStepReview({
 
       {/* Promotion Code */}
       <div className="border rounded-lg p-4 space-y-3">
-        <h4 className="font-medium">Promotion Code</h4>
+        <h4 className="font-medium">{t("billing.ui.wizard.review.promotion_code")}</h4>
         <PromoCodeInput
           appliedCode={promotionCode}
           isValidating={isValidatingPromoCode}
@@ -200,14 +207,16 @@ export function WizardStepReview({
       <div className="border rounded-lg p-4">
         <div className="flex justify-between items-center">
           <div>
-            <h4 className="font-medium">Payment Method</h4>
+            <h4 className="font-medium">{t("billing.ui.payment_method.title")}</h4>
             <p className="text-sm text-muted-foreground">
-              {hasPaymentMethod ? "A payment method is on file" : "No payment method on file"}
+              {hasPaymentMethod
+                ? t("billing.ui.wizard.review.payment_on_file")
+                : t("billing.ui.wizard.review.no_payment_on_file")}
             </p>
           </div>
           {!hasPaymentMethod && (
             <Button variant="outline" onClick={onAddPaymentMethod}>
-              Add Payment Method
+              {t("billing.ui.payment_methods.add")}
             </Button>
           )}
         </div>
@@ -224,16 +233,16 @@ export function WizardStepReview({
       {/* Action Buttons */}
       <div className="flex justify-between pt-4 border-t">
         <Button variant="outline" onClick={onBack} disabled={isProcessing}>
-          Back
+          {t("billing.ui.wizard.back")}
         </Button>
         <Button onClick={hasPaymentMethod ? onConfirm : onAddPaymentMethod} disabled={isProcessing}>
           {isProcessing
-            ? "Processing..."
+            ? t("billing.ui.wizard.review.processing")
             : hasPaymentMethod
               ? isChangingPlan
-                ? "Confirm Plan Change"
-                : "Subscribe Now"
-              : "Add Payment Method"}
+                ? t("billing.ui.wizard.review.confirm_change")
+                : t("billing.ui.wizard.review.subscribe_now")
+              : t("billing.ui.payment_methods.add")}
         </Button>
       </div>
     </div>

package/src/features/billing/stripe-subscription/hooks/useConfirmSubscriptionPayment.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { useStripe } from "@stripe/react-stripe-js";
+import { useTranslations } from "next-intl";
 import { useCallback, useState } from "react";
 
 export interface ConfirmPaymentResult {
@@ -42,6 +43,7 @@ export interface UseConfirmSubscriptionPaymentReturn {
  */
 export function useConfirmSubscriptionPayment(): UseConfirmSubscriptionPaymentReturn {
   const stripe = useStripe();
+  const t = useTranslations();
   const [isConfirming, setIsConfirming] = useState(false);
 
   const confirmPayment = useCallback(
@@ -50,7 +52,7 @@ export function useConfirmSubscriptionPayment(): UseConfirmSubscriptionPaymentRe
         console.error("[useConfirmSubscriptionPayment] Stripe not initialized");
         return {
           success: false,
-          error: "Payment system not initialized. Please refresh the page and try again.",
+          error: t("billing.ui.payment_confirm.errors.not_initialized"),
         };
       }
 
@@ -58,7 +60,7 @@ export function useConfirmSubscriptionPayment(): UseConfirmSubscriptionPaymentRe
         console.error("[useConfirmSubscriptionPayment] No client secret provided");
         return {
           success: false,
-          error: "Payment confirmation failed. Missing payment details.",
+          error: t("billing.ui.payment_confirm.errors.missing_details"),
         };
       }
 
@@ -71,7 +73,7 @@ export function useConfirmSubscriptionPayment(): UseConfirmSubscriptionPaymentRe
           console.error("[useConfirmSubscriptionPayment] Stripe error:", stripeError);
           return {
             success: false,
-            error: stripeError.message || "Payment confirmation failed. Please try again.",
+            error: stripeError.message || t("billing.ui.payment_confirm.errors.failed"),
           };
         }
 
@@ -83,25 +85,25 @@ export function useConfirmSubscriptionPayment(): UseConfirmSubscriptionPaymentRe
           // This shouldn't happen as Stripe handles 3DS inline, but handle it just in case
           return {
             success: false,
-            error: "Additional authentication required. Please complete the verification.",
+            error: t("billing.ui.payment_confirm.errors.requires_action"),
           };
         }
 
         return {
           success: false,
-          error: "Payment could not be completed. Please try again.",
+          error: t("billing.ui.payment_confirm.errors.not_completed"),
         };
       } catch (err: any) {
         console.error("[useConfirmSubscriptionPayment] Unexpected error:", err);
         return {
           success: false,
-          error: err.message || "An unexpected error occurred during payment confirmation.",
+          error: err.message || t("billing.ui.payment_confirm.errors.unexpected"),
         };
       } finally {
         setIsConfirming(false);
       }
     },
-    [stripe],
+    [stripe, t],
   );
 
   return {

package/src/features/billing/stripe-subscription/hooks/useSubscriptionWizard.ts

@@ -1,7 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useCallback, useMemo, useReducer, useRef } from "react";
 import { v4 } from "uuid";
+import { useI18nLocale } from "../../../../i18n";
 import { StripeCustomerService } from "../../stripe-customer/data/stripe-customer.service";
 import { ProrationPreviewInterface } from "../../stripe-invoice/data/stripe-invoice.interface";
 import { StripePriceInterface } from "../../stripe-price/data/stripe-price.interface";
@@ -93,6 +95,8 @@ export type UseSubscriptionWizardOptions = {
 };
 
 export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseSubscriptionWizardOptions) {
+  const t = useTranslations();
+  const locale = useI18nLocale();
   const [state, dispatch] = useReducer(wizardReducer, {
     ...initialState,
     selectedPrice: subscription?.price || null,
@@ -146,7 +150,7 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
           dispatch({ type: "SET_STEP", step: "payment-method" });
           dispatch({
             type: "SET_ERROR",
-            error: "A payment method is required to upgrade from your trial.",
+            error: t("billing.ui.wizard.errors.payment_method_required"),
           });
           return;
         }
@@ -164,11 +168,11 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
       dispatch({ type: "SET_STEP", step: "review" });
     } catch (error: any) {
       console.error("[useSubscriptionWizard] Error preparing review:", error);
-      dispatch({ type: "SET_ERROR", error: error?.message || "Failed to prepare review" });
+      dispatch({ type: "SET_ERROR", error: error?.message || t("billing.ui.wizard.errors.prepare_review") });
     } finally {
       dispatch({ type: "SET_PROCESSING", isProcessing: false });
     }
-  }, [state.selectedPrice, state.hasPaymentMethod, subscription, checkPaymentMethod]);
+  }, [state.selectedPrice, state.hasPaymentMethod, subscription, checkPaymentMethod, t]);
 
   const confirmSubscription = useCallback(async () => {
     if (!state.selectedPrice) return;
@@ -202,7 +206,7 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
       if (error?.status === 409 || error?.response?.status === 409) {
         dispatch({
           type: "SET_ERROR",
-          error: "You already have an active subscription. Please change your existing plan instead.",
+          error: t("billing.ui.wizard.errors.already_subscribed"),
         });
         return;
       }
@@ -214,11 +218,11 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
         return;
       }
 
-      dispatch({ type: "SET_ERROR", error: error?.message || "Failed to process subscription" });
+      dispatch({ type: "SET_ERROR", error: error?.message || t("billing.ui.wizard.errors.process_subscription") });
     } finally {
       dispatch({ type: "SET_PROCESSING", isProcessing: false });
     }
-  }, [state.selectedPrice, state.promotionCode, subscription]);
+  }, [state.selectedPrice, state.promotionCode, subscription, t]);
 
   const handlePaymentMethodSuccess = useCallback(async () => {
     dispatch({ type: "SET_HAS_PAYMENT_METHOD", hasMethod: true });
@@ -239,21 +243,28 @@ export function useSubscriptionWizard({ subscription, onSuccess, onClose }: UseS
         const result = await StripePromotionCodeService.validatePromotionCode({
           code,
           stripePriceId: state.selectedPrice?.id,
+          language: locale,
         });
 
         if (result.valid) {
           dispatch({ type: "SET_PROMOTION_CODE", code: result });
         } else {
-          dispatch({ type: "SET_PROMO_CODE_ERROR", error: result.errorMessage || "Invalid promotion code" });
+          dispatch({
+            type: "SET_PROMO_CODE_ERROR",
+            error: result.errorMessage || t("billing.ui.wizard.errors.invalid_promo_code"),
+          });
         }
       } catch (error: any) {
         console.error("[useSubscriptionWizard] Promo code validation error:", error);
-        dispatch({ type: "SET_PROMO_CODE_ERROR", error: error?.message || "Failed to validate promotion code" });
+        dispatch({
+          type: "SET_PROMO_CODE_ERROR",
+          error: error?.message || t("billing.ui.wizard.errors.validate_promo_code"),
+        });
       } finally {
         dispatch({ type: "SET_VALIDATING_PROMO_CODE", isValidating: false });
       }
     },
-    [state.selectedPrice?.id],
+    [state.selectedPrice?.id, t, locale],
   );
 
   const clearPromoCode = useCallback(() => {

package/src/features/billing/stripe-usage/components/containers/UsageContainer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Activity } from "lucide-react";
 import { useEffect, useState } from "react";
 import { StripeSubscriptionInterface, StripeSubscriptionService } from "../../../stripe-subscription";
@@ -8,6 +9,7 @@ import { StripeUsageService } from "../../data/stripe-usage.service";
 import { UsageSummaryCards } from "../widgets/UsageSummaryCards";
 
 export function UsageContainer() {
+  const t = useTranslations();
   const [meters, setMeters] = useState<MeterInterface[]>([]);
   const [summaries, setSummaries] = useState<Record<string, MeterSummaryInterface | null>>({});
   const [loading, setLoading] = useState<boolean>(true);
@@ -76,7 +78,7 @@ export function UsageContainer() {
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center">
-        <p className="text-muted-foreground">Loading usage data...</p>
+        <p className="text-muted-foreground">{t("billing.ui.usage.loading")}</p>
       </div>
     );
   }
@@ -86,7 +88,7 @@ export function UsageContainer() {
       {/* Header */}
       <div className="flex items-center gap-x-3">
         <Activity className="h-8 w-8" />
-        <h1 className="text-primary text-3xl font-semibold">Usage Tracking</h1>
+        <h1 className="text-primary text-3xl font-semibold">{t("billing.ui.usage.title")}</h1>
       </div>
 
       {/* Empty State */}
@@ -94,10 +96,8 @@ export function UsageContainer() {
         <div className="bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 p-12">
           <Activity className="text-muted-foreground h-16 w-16" />
           <div className="text-center">
-            <h3 className="mb-2 text-sm font-medium">No usage meters configured</h3>
-            <p className="text-muted-foreground">
-              Usage tracking will appear here when you have metered subscriptions with configured meters.
-            </p>
+            <h3 className="mb-2 text-sm font-medium">{t("billing.ui.usage.empty_title")}</h3>
+            <p className="text-muted-foreground">{t("billing.ui.usage.empty_description")}</p>
           </div>
         </div>
       )}