@carlonicora/nextjs-jsonapi 4.1.2 → 4.2.0

package/src/features/assistant-action/components/__tests__/ApprovalActionCard.spec.tsx

@@ -2,6 +2,25 @@ import { render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ApprovalActionCard } from "../ApprovalActionCard";
 
+/**
+ * A message catalogue the test fills in. Keys it does not hold behave like a
+ * host app without them: `t()` hands back the key path and `t.has()` is false,
+ * so the card must fall back to the humanised attribute name.
+ */
+const messages = vi.hoisted(() => ({}) as Record<string, string>);
+
+vi.mock("next-intl", () => {
+  const t = (key: string) => messages[key] ?? key;
+  (t as unknown as { has: (key: string) => boolean }).has = (key: string) => key in messages;
+  return {
+    useTranslations: () => t,
+    useLocale: () => "en",
+    useNow: () => new Date(),
+    useTimeZone: () => "UTC",
+    useFormatter: () => ({ dateTime: vi.fn(), number: vi.fn(), relativeTime: vi.fn() }),
+  };
+});
+
 const findOne = vi.fn();
 const approve = vi.fn();
 const deny = vi.fn();
@@ -45,6 +64,7 @@ function makeAction(overrides: Record<string, unknown> = {}) {
 
 describe("ApprovalActionCard", () => {
   beforeEach(() => {
+    for (const key of Object.keys(messages)) delete messages[key];
     findOne.mockReset();
     approve.mockReset();
     deny.mockReset();
@@ -254,6 +274,67 @@ describe("ApprovalActionCard", () => {
     expect(screen.queryByText(UUID_LIKE)).toBeNull();
   });
 
+  it("labels fields with the entity editor's own message keys when the app defines them", async () => {
+    Object.assign(messages, {
+      "features.npc.fields.name.label": "Nome",
+      "features.npc.fields.tldr.label": "Riassunto",
+      "entities.npcs": "PNG",
+    });
+    findOne.mockResolvedValue(makeAction());
+
+    render(<ApprovalActionCard actionId="act-1" />);
+
+    expect(await screen.findByText("Nome")).toBeInTheDocument();
+    expect(screen.getByText("Riassunto")).toBeInTheDocument();
+    // `related` has no editor key and no generic key: humanised, as before
+    expect(screen.getByText("Related")).toBeInTheDocument();
+    expect(screen.queryByText("Name")).toBeNull();
+    expect(screen.queryByText("Tldr")).toBeNull();
+  });
+
+  it("falls back to the generic ui.fields key, and finds editor keys for irregular plurals", async () => {
+    Object.assign(messages, {
+      "ui.fields.related": "Collegati",
+      "features.knife.fields.name.label": "Nome del gancio",
+    });
+    findOne.mockResolvedValue(
+      makeAction({
+        proposal: JSON.stringify({
+          type: "knives",
+          attributes: { name: "The sister left behind", publicDescription: "Visible" },
+          relationships: { related: [{ id: "r1", type: "npcs", label: "Zoe" }] },
+        }),
+      }),
+    );
+
+    render(<ApprovalActionCard actionId="act-1" />);
+
+    expect(await screen.findByText("Nome del gancio")).toBeInTheDocument();
+    expect(screen.getByText("Collegati")).toBeInTheDocument();
+    // no key anywhere: the humanised attribute name, unchanged
+    expect(screen.getByText("Public Description")).toBeInTheDocument();
+  });
+
+  it("translates the relationship name on a link proposal", async () => {
+    Object.assign(messages, { "features.clue.fields.containedInScene.label": "Contenuto nella scena" });
+    findOne.mockResolvedValue(
+      makeAction({
+        toolName: "link_entities",
+        proposal: JSON.stringify({
+          type: "clues",
+          target: { id: "c1", type: "clues", label: "Bloody knife" },
+          relationship: "containedInScene",
+          targets: [{ id: "s1", type: "scenes", label: "The docks" }],
+        }),
+      }),
+    );
+
+    render(<ApprovalActionCard actionId="act-1" />);
+
+    expect(await screen.findByText("Contenuto nella scena")).toBeInTheDocument();
+    expect(screen.getByText("The docks")).toBeInTheDocument();
+  });
+
   it("still renders the summary and the buttons when neither payload parses", async () => {
     findOne.mockResolvedValue(makeAction({ proposal: "{not-json", toolArgs: "{not-json" }));
 

package/src/features/assistant-message/components/parts/RelevanceMeter.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 interface Props {
   /** 0-1 (decimal) or 0-100 (percent). Auto-detected. */
   value: number;
@@ -7,6 +9,7 @@ interface Props {
 }
 
 export function RelevanceMeter({ value, className = "" }: Props) {
+  const t = useTranslations();
   const pct = Math.max(0, Math.min(100, value <= 1 ? value * 100 : value));
   const label = `${Math.round(pct)}%`;
   return (
@@ -15,7 +18,7 @@ export function RelevanceMeter({ value, className = "" }: Props) {
       aria-valuenow={Math.round(pct)}
       aria-valuemin={0}
       aria-valuemax={100}
-      aria-label={`Relevance ${label}`}
+      aria-label={`${t("common.relevance")} ${label}`}
       className={`bg-muted relative mx-auto flex h-5 w-20 items-center justify-center overflow-hidden rounded border ${className}`}
     >
       <div className="bg-accent absolute top-0 start-0 h-full" style={{ width: `${pct}%` }} />

package/src/features/assistant-message/components/parts/tabs/UsersTab.tsx

@@ -101,7 +101,8 @@ export function UsersTab({ users, citations, sources }: Props) {
             return null;
           }
           const href = generate({ page: module, id: user.id });
-          const name = (user as any).name ?? (user as any).fullName ?? user.identifier ?? "User";
+          const name =
+            (user as any).name ?? (user as any).fullName ?? user.identifier ?? t("entities.users", { count: 1 });
           const avatarUrl = (user as any).avatar as string | undefined;
           const showCounts = citationCount > 0 || contentCount > 0;
           return (

package/src/features/auth/components/buttons/GoogleSignInButton.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { getPublicApiUrl } from "../../../../client/config";
 import { isGoogleAuthEnabled } from "../../../../login";
 import { Button, Link } from "../../../../shadcnui";
@@ -9,6 +10,8 @@ interface GoogleSignInButtonProps {
 }
 
 export function GoogleSignInButton({ referralCode }: GoogleSignInButtonProps) {
+  const t = useTranslations();
+
   if (!isGoogleAuthEnabled()) {
     return null;
   }
@@ -45,7 +48,7 @@ export function GoogleSignInButton({ referralCode }: GoogleSignInButtonProps) {
             d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
           />
         </svg>
-        Sign in with Google
+        {t("auth.buttons.sign_in_with_google")}
       </Button>
     </Link>
   );

package/src/features/auth/components/details/LandingComponent.tsx

@@ -55,7 +55,7 @@ export function LandingComponent() {
         {isDiscordAuthEnabled() && (
           <Link href={`${getPublicApiUrl()}auth/discord`} className="flex w-full justify-end">
             <Button className="w-full" variant={`outline`} data-testid="page-login-button-initial-login">
-              Login with Discord
+              {t(`auth.buttons.login_with_discord`)}
             </Button>
           </Link>
         )}

package/src/features/auth/components/forms/ForgotPassword.tsx

@@ -49,7 +49,7 @@ export function ForgotPassword() {
       await AuthService.initialiseForgotPassword(payload);
       setShowConfirmation(true);
     } catch (e) {
-      errorToast({ error: e });
+      errorToast({ title: t("common.errors.error"), error: e });
     }
   };
 

package/src/features/auth/components/forms/Login.tsx

@@ -152,7 +152,7 @@ export function Login() {
             {isDiscordAuthEnabled() && (
               <Link href={buildDiscordOAuthUrl()} className="flex w-full justify-end">
                 <Button className="w-full" variant={`outline`} data-testid="page-login-button-initial-login">
-                  Login with Discord
+                  {t(`auth.buttons.login_with_discord`)}
                 </Button>
               </Link>
             )}

package/src/features/auth/components/forms/Register.tsx

@@ -159,7 +159,7 @@ export default function Register() {
       clearReferralCode();
       setShowConfirmation(true);
     } catch (e) {
-      errorToast({ error: e });
+      errorToast({ title: t("common.errors.error"), error: e });
     }
   };
 

package/src/features/auth/components/forms/ResetPassword.tsx

@@ -106,8 +106,8 @@ export function ResetPassword() {
         ) : (
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
-              <FormPassword form={form} id="password" name={"Password"} />
-              <FormPassword form={form} id="passwordRetype" name={"Retype Password"} />
+              <FormPassword form={form} id="password" name={t(`user.fields.password.label`)} />
+              <FormPassword form={form} id="passwordRetype" name={t(`auth.fields.retype_password.retype_label`)} />
               <Button className="mt-4 w-full" type={"submit"}>
                 {t(`auth.buttons.reset_password`)}
               </Button>

package/src/features/auth/components/two-factor/BackupCodesDialog.tsx

@@ -59,7 +59,7 @@ export function BackupCodesDialog({ remainingCodes, onRegenerate, trigger }: Bac
   };
 
   const handleDownload = () => {
-    const text = `Backup Codes\n\n${codes.join("\n")}\n\nKeep these codes safe. Each code can only be used once.`;
+    const text = `${t("auth.two_factor.backup_codes")}\n\n${codes.join("\n")}\n\n${t("auth.two_factor.backup_codes_file_note")}`;
     const blob = new Blob([text], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");

package/src/features/auth/components/two-factor/PasskeyButton.tsx

@@ -38,7 +38,7 @@ export function PasskeyButton({ pendingToken, onSuccess, onError, disabled = fal
 
       onSuccess(auth);
     } catch (error) {
-      onError(error instanceof Error ? error : new Error("Passkey authentication failed"));
+      onError(error instanceof Error ? error : new Error(t("auth.two_factor.passkey_failed")));
     } finally {
       setIsLoading(false);
     }

package/src/features/billing/components/cards/BillingUsageSummaryCard.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Activity, ChevronRight } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, Skeleton } from "../../../../shadcnui";
+import { useI18nLocale } from "../../../../i18n";
 import { MeterInterface, MeterSummaryInterface } from "../../stripe-usage";
 
 type BillingUsageSummaryCardProps = {
@@ -12,8 +14,8 @@ type BillingUsageSummaryCardProps = {
   onViewDetailsClick: () => void;
 };
 
-function formatNumber(value: number): string {
-  return new Intl.NumberFormat(undefined, {
+function formatNumber(value: number, locale: string): string {
+  return new Intl.NumberFormat(locale, {
     notation: "compact",
     compactDisplay: "short",
   }).format(value);
@@ -26,11 +28,13 @@ export function BillingUsageSummaryCard({
   error,
   onViewDetailsClick,
 }: BillingUsageSummaryCardProps) {
+  const t = useTranslations();
+  const locale = useI18nLocale();
   if (loading) {
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Usage This Month</CardTitle>
+          <CardTitle>{t("billing.ui.cards.usage.title")}</CardTitle>
           <Activity className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -45,7 +49,7 @@ export function BillingUsageSummaryCard({
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Usage This Month</CardTitle>
+          <CardTitle>{t("billing.ui.cards.usage.title")}</CardTitle>
           <Activity className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -67,26 +71,32 @@ export function BillingUsageSummaryCard({
   return (
     <Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={onViewDetailsClick}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle>Usage This Month</CardTitle>
+        <CardTitle>{t("billing.ui.cards.usage.title")}</CardTitle>
         <Activity className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
         {meters.length === 0 ? (
           <div className="space-y-2">
-            <p className="text-xl font-bold text-muted-foreground">No meters</p>
-            <p className="text-xs text-muted-foreground">No usage meters are configured</p>
+            <p className="text-xl font-bold text-muted-foreground">{t("billing.ui.cards.usage.no_meters")}</p>
+            <p className="text-xs text-muted-foreground">{t("billing.ui.cards.usage.no_meters_description")}</p>
           </div>
         ) : (
           <div className="space-y-2">
-            <p className="text-xl font-bold">{formatNumber(totalUsage)} units</p>
+            <p className="text-xl font-bold">
+              {t("billing.ui.cards.usage.units", { value: formatNumber(totalUsage, locale) })}
+            </p>
             {primaryMeter && primarySummary && (
               <p className="text-sm text-muted-foreground">
-                {primaryMeter.displayName}: {formatNumber(primarySummary.aggregatedValue)}
+                {primaryMeter.displayName}: {formatNumber(primarySummary.aggregatedValue, locale)}
+              </p>
+            )}
+            {meters.length > 1 && (
+              <p className="text-xs text-muted-foreground">
+                {t("billing.ui.cards.usage.across_meters", { count: meters.length })}
               </p>
             )}
-            {meters.length > 1 && <p className="text-xs text-muted-foreground">Across {meters.length} meters</p>}
             <span className="flex items-center text-xs text-muted-foreground">
-              View details
+              {t("billing.ui.cards.view_details")}
               <ChevronRight className="h-3 w-3 ms-1 rtl:rotate-180" />
             </span>
           </div>

package/src/features/billing/components/cards/CustomerInfoCard.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { ExternalLink, User } from "lucide-react";
 import { useState } from "react";
 import { Button, Card, CardContent, CardHeader, CardTitle, Skeleton } from "../../../../shadcnui";
+import { useI18nLocale } from "../../../../i18n";
 import { StripeCustomerInterface, StripeCustomerService } from "../../stripe-customer";
 
 type CustomerInfoCardProps = {
@@ -11,18 +13,19 @@ type CustomerInfoCardProps = {
   error?: string;
 };
 
-function formatBalance(balance: number | undefined, currency: string | undefined): string {
-  if (balance === undefined || balance === 0) return "$0.00";
+function formatBalance(balance: number | undefined, currency: string | undefined, locale: string): string {
   const currencyCode = currency?.toUpperCase() || "USD";
   // Balance in Stripe is negative when customer has credit
-  const displayBalance = -balance;
-  return new Intl.NumberFormat(undefined, {
+  const displayBalance = balance ? -balance : 0;
+  return new Intl.NumberFormat(locale, {
     style: "currency",
     currency: currencyCode,
   }).format(displayBalance / 100);
 }
 
 export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardProps) {
+  const t = useTranslations();
+  const locale = useI18nLocale();
   const [portalLoading, setPortalLoading] = useState(false);
 
   const handlePortalClick = async (e: React.MouseEvent) => {
@@ -42,7 +45,7 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Billing Account</CardTitle>
+          <CardTitle>{t("billing.ui.cards.customer.title")}</CardTitle>
           <User className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -58,7 +61,7 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Billing Account</CardTitle>
+          <CardTitle>{t("billing.ui.cards.customer.title")}</CardTitle>
           <User className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -72,12 +75,12 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Billing Account</CardTitle>
+          <CardTitle>{t("billing.ui.cards.customer.title")}</CardTitle>
           <User className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <p className="text-xl font-bold text-muted-foreground">Not set up</p>
-          <p className="text-xs text-muted-foreground">Billing account will be created when you subscribe</p>
+          <p className="text-xl font-bold text-muted-foreground">{t("billing.ui.cards.customer.not_set_up")}</p>
+          <p className="text-xs text-muted-foreground">{t("billing.ui.cards.customer.not_set_up_description")}</p>
         </CardContent>
       </Card>
     );
@@ -86,7 +89,7 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle>Billing Account</CardTitle>
+        <CardTitle>{t("billing.ui.cards.customer.title")}</CardTitle>
         <User className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
@@ -95,14 +98,14 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
           {customer.email && <p className="text-sm text-muted-foreground">{customer.email}</p>}
           {customer.balance !== undefined && customer.balance !== 0 && (
             <p className="text-sm">
-              <span className="text-muted-foreground">Credit Balance: </span>
+              <span className="text-muted-foreground">{t("billing.ui.cards.customer.credit_balance")} </span>
               <span className={customer.balance < 0 ? "text-success" : "text-destructive"}>
-                {formatBalance(customer.balance, customer.currency)}
+                {formatBalance(customer.balance, customer.currency, locale)}
               </span>
             </p>
           )}
           <Button variant="outline" size="sm" className="mt-2" onClick={handlePortalClick} disabled={portalLoading}>
-            {portalLoading ? "Loading..." : "Manage in Stripe Portal"}
+            {portalLoading ? t("common.loading") : t("billing.ui.cards.customer.manage_portal")}
             <ExternalLink className="h-4 w-4 ms-1" />
           </Button>
         </div>

package/src/features/billing/components/cards/InvoicesSummaryCard.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { ChevronRight, ReceiptIcon } from "lucide-react";
 import { Badge, Card, CardContent, CardHeader, CardTitle, Skeleton } from "../../../../shadcnui";
 import { InvoiceStatus, StripeInvoiceInterface } from "../../stripe-invoice";
+import { formatDate, useBillingFormatOptions } from "../utils";
 
 type InvoicesSummaryCardProps = {
   invoices: StripeInvoiceInterface[];
@@ -11,6 +13,9 @@ type InvoicesSummaryCardProps = {
   onViewAllClick: () => void;
 };
 
+/** Statuses with a `billing.ui.invoice_status.*` label; anything else Stripe adds is shown raw. */
+const INVOICE_STATUSES: string[] = Object.values(InvoiceStatus);
+
 function getStatusBadgeVariant(status: InvoiceStatus): "default" | "secondary" | "destructive" | "outline" {
   switch (status) {
     case InvoiceStatus.PAID:
@@ -25,28 +30,22 @@ function getStatusBadgeVariant(status: InvoiceStatus): "default" | "secondary" |
   }
 }
 
-function formatDate(date: Date): string {
-  return new Date(date).toLocaleDateString(undefined, {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-}
-
-function formatAmount(amount: number, currency: string): string {
+function formatAmount(amount: number, currency: string, locale: string): string {
   const currencyCode = currency?.toUpperCase() || "USD";
-  return new Intl.NumberFormat(undefined, {
+  return new Intl.NumberFormat(locale, {
     style: "currency",
     currency: currencyCode,
   }).format(amount / 100);
 }
 
 export function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }: InvoicesSummaryCardProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   if (loading) {
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Recent Invoices</CardTitle>
+          <CardTitle>{t("billing.ui.cards.invoices.title")}</CardTitle>
           <ReceiptIcon className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -62,7 +61,7 @@ export function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Recent Invoices</CardTitle>
+          <CardTitle>{t("billing.ui.cards.invoices.title")}</CardTitle>
           <ReceiptIcon className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -80,29 +79,42 @@ export function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }
   return (
     <Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={onViewAllClick}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle>Recent Invoices</CardTitle>
+        <CardTitle>{t("billing.ui.cards.invoices.title")}</CardTitle>
         <ReceiptIcon className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
         {invoices.length === 0 ? (
           <div className="space-y-2">
-            <p className="text-xl font-bold text-muted-foreground">No invoices yet</p>
-            <p className="text-xs text-muted-foreground">Invoices will appear after your first billing cycle</p>
+            <p className="text-xl font-bold text-muted-foreground">{t("billing.ui.invoices.empty_title")}</p>
+            <p className="text-xs text-muted-foreground">{t("billing.ui.cards.invoices.empty_description")}</p>
           </div>
         ) : latestInvoice ? (
           <div className="space-y-2">
             <div className="flex items-center gap-2">
-              <p className="text-xl font-bold">{formatAmount(latestInvoice.total, latestInvoice.currency)}</p>
-              <Badge variant={getStatusBadgeVariant(latestInvoice.status)}>{latestInvoice.status}</Badge>
+              <p className="text-xl font-bold">
+                {formatAmount(latestInvoice.total, latestInvoice.currency, fmt.locale)}
+              </p>
+              <Badge variant={getStatusBadgeVariant(latestInvoice.status)}>
+                {INVOICE_STATUSES.includes(latestInvoice.status)
+                  ? t(`billing.ui.invoice_status.${latestInvoice.status}`)
+                  : latestInvoice.status}
+              </Badge>
             </div>
             <p className="text-sm text-muted-foreground">
-              {latestInvoice.stripeInvoiceNumber || `Invoice from ${formatDate(latestInvoice.periodStart)}`}
+              {latestInvoice.stripeInvoiceNumber ||
+                t("billing.ui.cards.invoices.invoice_from", { date: formatDate(latestInvoice.periodStart, fmt) })}
             </p>
             <div className="flex items-center gap-4 text-xs text-muted-foreground">
-              {paidInvoices.length > 0 && <span>{paidInvoices.length} paid</span>}
-              {openInvoices.length > 0 && <span className="text-warning">{openInvoices.length} open</span>}
+              {paidInvoices.length > 0 && (
+                <span>{t("billing.ui.cards.invoices.paid_count", { count: paidInvoices.length })}</span>
+              )}
+              {openInvoices.length > 0 && (
+                <span className="text-warning">
+                  {t("billing.ui.cards.invoices.open_count", { count: openInvoices.length })}
+                </span>
+              )}
               <span className="flex items-center">
-                View all
+                {t("billing.ui.cards.view_all")}
                 <ChevronRight className="h-3 w-3 ms-1 rtl:rotate-180" />
               </span>
             </div>

package/src/features/billing/components/cards/PaymentMethodSummaryCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Wallet, ChevronRight } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, Button, Skeleton } from "../../../../shadcnui";
 import { PaymentMethodInterface } from "../../stripe-customer";
@@ -32,11 +33,12 @@ export function PaymentMethodSummaryCard({
   error,
   onManageClick,
 }: PaymentMethodSummaryCardProps) {
+  const t = useTranslations();
   if (loading) {
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Payment Method</CardTitle>
+          <CardTitle>{t("billing.ui.payment_method.title")}</CardTitle>
           <Wallet className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -51,7 +53,7 @@ export function PaymentMethodSummaryCard({
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle>Payment Method</CardTitle>
+          <CardTitle>{t("billing.ui.payment_method.title")}</CardTitle>
           <Wallet className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -67,14 +69,16 @@ export function PaymentMethodSummaryCard({
   return (
     <Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={onManageClick}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle>Payment Method</CardTitle>
+        <CardTitle>{t("billing.ui.payment_method.title")}</CardTitle>
         <Wallet className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
         {paymentMethods.length === 0 ? (
           <div className="space-y-2">
-            <p className="text-xl font-bold text-muted-foreground">No payment method</p>
-            <p className="text-xs text-muted-foreground">Add a card to enable subscriptions</p>
+            <p className="text-xl font-bold text-muted-foreground">
+              {t("billing.ui.cards.payment_method.empty_title")}
+            </p>
+            <p className="text-xs text-muted-foreground">{t("billing.ui.cards.payment_method.empty_description")}</p>
             <Button
               variant="outline"
               size="sm"
@@ -84,7 +88,7 @@ export function PaymentMethodSummaryCard({
                 onManageClick();
               }}
             >
-              Add Card
+              {t("billing.ui.cards.payment_method.add_card")}
               <ChevronRight className="h-4 w-4 ms-1 rtl:rotate-180" />
             </Button>
           </div>
@@ -94,17 +98,23 @@ export function PaymentMethodSummaryCard({
               {getCardBrandIcon(defaultMethod.card.brand)} ****{defaultMethod.card.last4}
             </p>
             <p className="text-sm text-muted-foreground">
-              Expires {String(defaultMethod.card.expMonth).padStart(2, "0")}/{defaultMethod.card.expYear}
+              {t("billing.ui.payment_method.expires", {
+                date: `${String(defaultMethod.card.expMonth).padStart(2, "0")}/${defaultMethod.card.expYear}`,
+              })}
             </p>
             {paymentMethods.length > 1 && (
-              <p className="text-xs text-muted-foreground">+{paymentMethods.length - 1} more card(s)</p>
+              <p className="text-xs text-muted-foreground">
+                {t("billing.ui.cards.payment_method.more_cards", { count: paymentMethods.length - 1 })}
+              </p>
             )}
           </div>
         ) : (
           <div className="space-y-2">
-            <p className="text-xl font-bold">{defaultMethod?.type || "Payment Method"}</p>
+            <p className="text-xl font-bold">{defaultMethod?.type || t("billing.ui.payment_method.title")}</p>
             {paymentMethods.length > 1 && (
-              <p className="text-xs text-muted-foreground">+{paymentMethods.length - 1} more method(s)</p>
+              <p className="text-xs text-muted-foreground">
+                {t("billing.ui.cards.payment_method.more_methods", { count: paymentMethods.length - 1 })}
+              </p>
             )}
           </div>
         )}