@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/EventWaitlist.tsx

@@ -11,6 +11,7 @@ import {
   useLeaveEventWaitlist,
   type WaitlistEntry,
 } from "../../data/queries/useEventWaitlist";
+import { useForgeT } from "../../i18n";
 import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -40,7 +41,7 @@ export interface EventWaitlistProps {
   event?: IEvent;
   /** Slug or id, when the host has not already loaded the event. */
   slug?: string;
-  /** Section heading. */
+  /** Section heading. Defaults to Forge's own translated heading. */
   title?: string;
   className?: string;
   style?: CSSProperties;
@@ -48,8 +49,9 @@ export interface EventWaitlistProps {
 
 const alpha = (hex: string, a: number) => hex + Math.round(a * 255).toString(16).padStart(2, "0");
 
-export function EventWaitlist({ event: initialEvent, slug, title = "Waitlist", className, style }: EventWaitlistProps) {
+export function EventWaitlist({ event: initialEvent, slug, title, className, style }: EventWaitlistProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const { user } = usePublicAuth();
   const { data: fetched } = useEvent(initialEvent ? undefined : slug);
   const event = initialEvent ?? fetched;
@@ -89,11 +91,9 @@ export function EventWaitlist({ event: initialEvent, slug, title = "Waitlist", c
         }}
       >
         <Users size={18} style={{ color: t.primary }} />
-        {title}
+        {title ?? tr("forge.event_waitlist.title")}
       </h2>
-      <p style={{ fontSize: 14, opacity: 0.75, margin: "0 0 16px" }}>
-        Sold out. Join the queue and we&apos;ll email you if a ticket is released.
-      </p>
+      <p style={{ fontSize: 14, opacity: 0.75, margin: "0 0 16px" }}>{tr("forge.event_waitlist.subtitle")}</p>
 
       {isLoading && live.length === 0 && soldOutTiers.length === 0 ? (
         <Loading />
@@ -138,6 +138,7 @@ function WaitlistPlaceCard({
   t: ResolvedThemeTokens;
 }) {
   const leave = useLeaveEventWaitlist(eventId);
+  const tr = useForgeT();
   const [error, setError] = useState<string | null>(null);
   const offerOpen = entry.offer.offerOpen;
 
@@ -146,7 +147,7 @@ function WaitlistPlaceCard({
     try {
       await leave.mutateAsync({ entryId: entry.id });
     } catch (err) {
-      setError(readError(err, "We could not remove you from the waitlist. Please try again."));
+      setError(readError(err, tr("forge.event_waitlist.leave_error")));
     }
   };
 
@@ -160,9 +161,11 @@ function WaitlistPlaceCard({
     >
       <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
         <div>
-          <div style={{ fontWeight: 600 }}>{ticket?.title ?? "Ticket"}</div>
+          <div style={{ fontWeight: 600 }}>{ticket?.title ?? tr("forge.event_waitlist.ticket_fallback")}</div>
           <div style={{ fontSize: 13, opacity: 0.7 }}>
-            {entry.quantity} {entry.quantity === 1 ? "ticket" : "tickets"} requested
+            {entry.quantity === 1
+              ? tr("forge.event_waitlist.quantity_requested_one", { count: entry.quantity })
+              : tr("forge.event_waitlist.quantity_requested_other", { count: entry.quantity })}
           </div>
         </div>
         {offerOpen ? (
@@ -170,14 +173,16 @@ function WaitlistPlaceCard({
             <BellRing size={16} />
             {/* 2.6b — "reserved for you" is a materially different promise from
                 "available", and the fan acts differently on each. */}
-            {entry.offer.seatsReserved ? "Reserved for you" : "Tickets available"}
+            {entry.offer.seatsReserved
+              ? tr("forge.event_waitlist.offer_reserved")
+              : tr("forge.event_waitlist.offer_available")}
           </span>
         ) : entry.position != null ? (
           <span style={{ fontSize: 14, opacity: 0.85 }}>
-            Position <strong style={{ color: t.primary }}>#{entry.position}</strong>
+            {tr("forge.event_waitlist.position_label")} <strong style={{ color: t.primary }}>#{entry.position}</strong>
           </span>
         ) : (
-          <span style={{ fontSize: 14, opacity: 0.85 }}>You&apos;re on the list</span>
+          <span style={{ fontSize: 14, opacity: 0.85 }}>{tr("forge.event_waitlist.on_the_list")}</span>
         )}
       </div>
 
@@ -200,7 +205,7 @@ function WaitlistPlaceCard({
           fontWeight: 600,
         }}
       >
-        {leave.isPending ? "Leaving…" : "Leave waitlist"}
+        {leave.isPending ? tr("forge.event_waitlist.leaving") : tr("forge.event_waitlist.leave")}
       </button>
     </div>
   );
@@ -214,6 +219,7 @@ function WaitlistPlaceCard({
  * locally, so a slow clock can shorten what the buyer sees but never lengthen it.
  */
 function OfferDeadline({ entry, t }: { entry: WaitlistEntry; t: ResolvedThemeTokens }) {
+  const tr = useForgeT();
   const [remaining, setRemaining] = useState(entry.offer.secondsRemaining ?? 0);
   // Absent on a payload from an older API build — read as "not reserved", which
   // is the weaker and therefore safe reading.
@@ -255,7 +261,9 @@ function OfferDeadline({ entry, t }: { entry: WaitlistEntry; t: ResolvedThemeTok
     >
       <div style={{ display: "flex", alignItems: "center", gap: 8, fontWeight: 600 }}>
         <Clock size={14} style={{ color: t.primary }} />
-        {remaining > 0 ? `Buy within ${formatCountdown(remaining)}` : "This offer has closed"}
+        {remaining > 0
+          ? tr("forge.event_waitlist.buy_within", { time: formatCountdown(remaining) })
+          : tr("forge.event_waitlist.offer_closed")}
       </div>
       {deadline && (
         <div style={{ opacity: 0.8, marginTop: 4 }}>
@@ -272,10 +280,12 @@ function OfferDeadline({ entry, t }: { entry: WaitlistEntry; t: ResolvedThemeTok
             failure this change closes.
           */}
           {remaining <= 0
-            ? `Your offer expired at ${deadline}.`
+            ? tr("forge.event_waitlist.offer_expired_at", { deadline })
             : reserved
-              ? `${entry.quantity === 1 ? "Your ticket is" : `Your ${entry.quantity} tickets are`} reserved until ${deadline}. Nobody else can buy ${entry.quantity === 1 ? "it" : "them"}. Check out from the ticket options above.`
-              : `Your offer closes ${deadline}. Tickets are not reserved. Buy from the ticket options above to secure them.`}
+              ? entry.quantity === 1
+                ? tr("forge.event_waitlist.reserved_until_one", { deadline })
+                : tr("forge.event_waitlist.reserved_until_other", { count: entry.quantity, deadline })
+              : tr("forge.event_waitlist.offer_not_reserved", { deadline })}
         </div>
       )}
     </div>
@@ -308,6 +318,7 @@ function JoinCard({
   signedIn: boolean;
 }) {
   const join = useJoinEventWaitlist(eventId);
+  const tr = useForgeT();
   const [open, setOpen] = useState(false);
   const [email, setEmail] = useState("");
   const [firstName, setFirstName] = useState("");
@@ -319,7 +330,7 @@ function JoinCard({
     e.preventDefault();
     setError(null);
     if (!signedIn && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      return setError("Please enter a valid email address.");
+      return setError(tr("forge.event_waitlist.email_invalid"));
     }
     try {
       await join.mutateAsync({
@@ -330,7 +341,7 @@ function JoinCard({
         quantity,
       });
     } catch (err) {
-      setError(readError(err, "We could not add you to the waitlist. Please try again."));
+      setError(readError(err, tr("forge.event_waitlist.join_error")));
     }
   };
 
@@ -349,7 +360,7 @@ function JoinCard({
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
         <div>
           <div style={{ fontWeight: 600 }}>{ticket.title}</div>
-          <div style={{ fontSize: 13, opacity: 0.7 }}>Sold out</div>
+          <div style={{ fontSize: 13, opacity: 0.7 }}>{tr("forge.event_waitlist.sold_out")}</div>
         </div>
         {!open && (
           <button
@@ -365,7 +376,7 @@ function JoinCard({
               cursor: "pointer",
             }}
           >
-            Join waitlist
+            {tr("forge.event_waitlist.join")}
           </button>
         )}
       </div>
@@ -375,31 +386,31 @@ function JoinCard({
           {!signedIn && (
             <input
               type="email"
-              placeholder="Email"
+              placeholder={tr("forge.event_waitlist.email_placeholder")}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               style={input}
-              aria-label="Email"
+              aria-label={tr("forge.event_waitlist.aria_email")}
             />
           )}
           <div style={{ display: "flex", gap: 8 }}>
             <input
-              placeholder="First name (optional)"
+              placeholder={tr("forge.event_waitlist.first_name_placeholder")}
               value={firstName}
               onChange={(e) => setFirstName(e.target.value)}
               style={input}
-              aria-label="First name"
+              aria-label={tr("forge.event_waitlist.aria_first_name")}
             />
             <input
-              placeholder="Last name (optional)"
+              placeholder={tr("forge.event_waitlist.last_name_placeholder")}
               value={lastName}
               onChange={(e) => setLastName(e.target.value)}
               style={input}
-              aria-label="Last name"
+              aria-label={tr("forge.event_waitlist.aria_last_name")}
             />
           </div>
           <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14 }}>
-            How many tickets?
+            {tr("forge.event_waitlist.quantity_label")}
             <input
               type="number"
               min={1}
@@ -424,7 +435,7 @@ function JoinCard({
                 cursor: join.isPending ? "wait" : "pointer",
               }}
             >
-              {join.isPending ? "Joining…" : "Join waitlist"}
+              {join.isPending ? tr("forge.event_waitlist.joining") : tr("forge.event_waitlist.join")}
             </button>
             <button
               type="button"
@@ -438,12 +449,10 @@ function JoinCard({
                 cursor: "pointer",
               }}
             >
-              Cancel
+              {tr("forge.event_waitlist.cancel")}
             </button>
           </div>
-          <p style={{ fontSize: 12, opacity: 0.65, margin: 0 }}>
-            We&apos;ll only email you about tickets for this event.
-          </p>
+          <p style={{ fontSize: 12, opacity: 0.65, margin: 0 }}>{tr("forge.event_waitlist.email_promise")}</p>
         </form>
       )}
     </div>

package/src/ui/styled/EventsList.tsx

@@ -2,6 +2,7 @@ import { useEvents } from "../../data/queries/useEvents";
 import type { IEvent } from "../../types/models";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
+import { useForgeT } from "../../i18n";
 
 export interface EventsListProps {
   limit?: number;
@@ -22,23 +23,24 @@ function formatDate(dateTime: string, timezone?: string) {
   });
 }
 
-function locationText(event: IEvent): string {
-  if (event.type === "virtual") return "Virtual";
+function locationText(event: IEvent, virtualLabel: string): string {
+  if (event.type === "virtual") return virtualLabel;
   if (event.address) return event.address.name || event.address.city;
-  return "Virtual";
+  return virtualLabel;
 }
 
 /** Themed upcoming-events list, built on `useEvents`. */
 export function EventsList({ limit, onSelect, className, style }: EventsListProps) {
-  const t = useThemeTokens();
+  const t = useForgeT();
+  const tokens = useThemeTokens();
   const { data, isLoading } = useEvents();
   const events = (data ?? []).slice(0, limit ?? 100);
 
   if (isLoading) return <Loading />;
-  if (!events.length) return <p style={{ color: t.text, opacity: 0.7 }}>No upcoming events.</p>;
+  if (!events.length) return <p style={{ color: tokens.text, opacity: 0.7 }}>{t("forge.events_list.empty_title")}</p>;
 
   return (
-    <div className={className} style={{ display: "flex", flexDirection: "column", gap: 12, fontFamily: t.fontFamily, ...style }}>
+    <div className={className} style={{ display: "flex", flexDirection: "column", gap: 12, fontFamily: tokens.fontFamily, ...style }}>
       {events.map((ev) => {
         const cover = ev.media?.find((m) => m.type === "image")?.url ?? ev.media?.[0]?.url;
         return (
@@ -51,21 +53,21 @@ export function EventsList({ limit, onSelect, className, style }: EventsListProp
               alignItems: "center",
               textAlign: "left",
               cursor: onSelect ? "pointer" : "default",
-              background: t.surface,
-              border: `1px solid ${t.primary}20`,
-              borderRadius: t.cornerRadius,
+              background: tokens.surface,
+              border: `1px solid ${tokens.primary}20`,
+              borderRadius: tokens.cornerRadius,
               padding: 10,
-              color: t.text,
+              color: tokens.text,
             }}
           >
             <div
               style={{
                 width: 72,
                 height: 72,
-                borderRadius: t.cornerRadius,
+                borderRadius: tokens.cornerRadius,
                 overflow: "hidden",
                 flexShrink: 0,
-                background: `${t.primary}10`,
+                background: `${tokens.primary}10`,
               }}
             >
               {cover && <img src={cover} alt={ev.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
@@ -73,7 +75,7 @@ export function EventsList({ limit, onSelect, className, style }: EventsListProp
             <div>
               <div style={{ fontWeight: 600 }}>{ev.title}</div>
               <div style={{ fontSize: 13, opacity: 0.75 }}>{formatDate(ev.dateTime, ev.timezone)}</div>
-              <div style={{ fontSize: 13, opacity: 0.75 }}>{locationText(ev)}</div>
+              <div style={{ fontSize: 13, opacity: 0.75 }}>{locationText(ev, t("forge.events_list.virtual"))}</div>
             </div>
           </button>
         );

package/src/ui/styled/ForgotPasswordForm.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useForgotPassword } from "../../data/queries/useAuthActions";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 
 export interface ForgotPasswordFormProps {
@@ -11,6 +12,7 @@ const msg = (e: unknown) => (e as { response?: { data?: { message?: string } } }
 
 /** Themed forgot-password request form, built on `useForgotPassword`. */
 export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const forgotPassword = useForgotPassword();
   const [email, setEmail] = useState("");
@@ -19,6 +21,11 @@ export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
   const [isSuccess, setIsSuccess] = useState(false);
 
   const card: React.CSSProperties = {
+    // See `LoginForm`. The host layout is a COLUMN flex container, and an auto
+    // cross-axis margin disables `align-items: stretch`, so `maxWidth` alone
+    // leaves the card shrink-to-fit. The cap is unchanged: this fills the
+    // container UP TO 420 and no further.
+    width: "100%",
     maxWidth: 420,
     margin: "40px auto 0",
     padding: 24,
@@ -46,7 +53,7 @@ export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
       await forgotPassword.mutateAsync({ email, origin: window.location.origin });
       setIsSuccess(true);
     } catch (err) {
-      setError(msg(err) || "Something went wrong. Please try again.");
+      setError(msg(err) || t("forge.forgot_password_form.error"));
     } finally {
       setIsSubmitting(false);
     }
@@ -55,12 +62,10 @@ export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
   if (isSuccess) {
     return (
       <div style={card}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Check your email</h1>
-        <p style={{ fontSize: 14, marginBottom: 24 }}>
-          If an account exists with that email, we&apos;ve sent a password reset link. Please check your inbox.
-        </p>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>{t("forge.forgot_password_form.sent_title")}</h1>
+        <p style={{ fontSize: 14, marginBottom: 24 }}>{t("forge.forgot_password_form.sent_body")}</p>
         <a href={loginHref} style={link}>
-          Back to login
+          {t("forge.forgot_password_form.back_to_login")}
         </a>
       </div>
     );
@@ -68,14 +73,14 @@ export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
 
   return (
     <div style={card}>
-      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Reset password</h1>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>{t("forge.forgot_password_form.title")}</h1>
       {error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{error}</p>}
       <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <label style={{ fontSize: 14 }}>Email</label>
+          <label style={{ fontSize: 14 }}>{t("forge.forgot_password_form.email_label")}</label>
           <input
             type="email"
-            placeholder="Email"
+            placeholder={t("forge.forgot_password_form.email_placeholder")}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             style={{
@@ -91,13 +96,13 @@ export function ForgotPasswordForm({ loginHref }: ForgotPasswordFormProps) {
           />
         </div>
         <button type="submit" disabled={isSubmitting} style={button}>
-          {isSubmitting ? "Sending…" : "Send reset email"}
+          {isSubmitting ? t("forge.forgot_password_form.submitting") : t("forge.forgot_password_form.submit")}
         </button>
       </form>
       <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
-        Already have an account?{" "}
+        {t("forge.forgot_password_form.login_prompt")}{" "}
         <a href={loginHref} style={link}>
-          Login
+          {t("forge.forgot_password_form.login_link")}
         </a>
       </p>
     </div>

package/src/ui/styled/FormRenderer.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { usePublicForm, useSubmitPublicForm } from "../../data/queries/useForms";
 import type { FormField } from "../../types/models";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
 
 export interface FormRendererProps {
@@ -15,6 +16,7 @@ export interface FormRendererProps {
  */
 export function FormRenderer({ formId }: FormRendererProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const { data: form, isLoading } = usePublicForm(formId);
   const submitMutation = useSubmitPublicForm(formId);
 
@@ -33,12 +35,12 @@ export function FormRenderer({ formId }: FormRendererProps) {
     setError("");
     for (const field of fields) {
       if (field.isRequired && !answers[field.id]) {
-        setError(`"${field.label}" is required`);
+        setError(t("forge.form_renderer.required_error", { label: field.label }));
         return;
       }
       if (field.type === "email" && answers[field.id]) {
         if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(answers[field.id])) {
-          setError("Please enter a valid email address");
+          setError(t("forge.form_renderer.invalid_email"));
           return;
         }
       }
@@ -48,7 +50,7 @@ export function FormRenderer({ formId }: FormRendererProps) {
       await submitMutation.mutateAsync(entries);
       setIsCompleted(true);
     } catch {
-      setError("Failed to submit. Please try again.");
+      setError(t("forge.form_renderer.submit_error"));
     }
   };
 
@@ -58,9 +60,9 @@ export function FormRenderer({ formId }: FormRendererProps) {
     return (
       <div style={{ ...wrap, textAlign: "center" }}>
         <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>
-          {settings.thankYouTitle || "Thank you!"}
+          {settings.thankYouTitle || t("forge.form_renderer.thank_you_title")}
         </h1>
-        <p style={{ opacity: 0.8 }}>{settings.thankYouMessage || "Your response has been recorded."}</p>
+        <p style={{ opacity: 0.8 }}>{settings.thankYouMessage || t("forge.form_renderer.thank_you_body")}</p>
       </div>
     );
   }
@@ -99,7 +101,9 @@ export function FormRenderer({ formId }: FormRendererProps) {
           color: theme.colors.background,
         }}
       >
-        {submitMutation.isPending ? "Submitting…" : settings.submitButtonText || "Submit"}
+        {submitMutation.isPending
+          ? t("forge.form_renderer.submitting")
+          : settings.submitButtonText || t("forge.form_renderer.submit")}
       </button>
     </div>
   );
@@ -116,6 +120,7 @@ export function FieldInput({
   onChange: (v: string) => void;
   theme: ReturnType<typeof useForgeTheme>;
 }) {
+  const t = useForgeT();
   const inputStyle: React.CSSProperties = {
     width: "100%",
     padding: "10px 12px",
@@ -149,7 +154,7 @@ export function FieldInput({
     case "single_select":
       control = (
         <select value={value} onChange={(e) => onChange(e.target.value)} style={inputStyle}>
-          <option value="">Select…</option>
+          <option value="">{t("forge.form_renderer.select_placeholder")}</option>
           {field.options?.map((o) => (
             <option key={o.id} value={o.label}>
               {o.label}

package/src/ui/styled/InstallBanner.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useInstallPrompt } from "../../data/queries/usePWA";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 import { Button } from "./Button";
 
 const DISMISS_KEY = "forge-install-banner-dismissed";
@@ -25,13 +26,15 @@ export interface InstallBannerProps {
  *     iOS the installed PWA is also the gateway to web push (iOS 16.4+).
  * Hidden when installed, already dismissed (localStorage), or not `enabled`.
  */
-export function InstallBanner({
-  enabled = true,
-  title = "Install this app",
-  description = "Add it to your home screen for a faster, full-screen experience.",
-  iosInstructions = "Tap the Share icon, then “Add to Home Screen”.",
-}: InstallBannerProps) {
-  const t = useThemeTokens();
+export function InstallBanner({ enabled = true, title, description, iosInstructions }: InstallBannerProps) {
+  const tokens = useThemeTokens();
+  const t = useForgeT();
+  // The defaults moved out of the signature because they are now translated,
+  // and a hook cannot be called in a parameter default. A caller-supplied
+  // string still wins, exactly as before.
+  const heading = title ?? t("forge.install_banner.title");
+  const body = description ?? t("forge.install_banner.description");
+  const iosBody = iosInstructions ?? t("forge.install_banner.ios_instructions");
   const { isInstallable, isInstalled, isIOS, isStandalone, promptInstall } = useInstallPrompt();
   const [dismissed, setDismissed] = useState(true);
 
@@ -59,7 +62,7 @@ export function InstallBanner({
   return (
     <div
       role="dialog"
-      aria-label={title}
+      aria-label={heading}
       style={{
         position: "fixed",
         left: 12,
@@ -69,10 +72,10 @@ export function InstallBanner({
         maxWidth: 520,
         margin: "0 auto",
         padding: 16,
-        borderRadius: t.cornerRadius,
-        background: t.surface,
-        color: t.text,
-        border: `1px solid ${t.border}`,
+        borderRadius: tokens.cornerRadius,
+        background: tokens.surface,
+        color: tokens.text,
+        border: `1px solid ${tokens.border}`,
         boxShadow: "0 8px 30px rgba(0,0,0,0.18)",
         display: "flex",
         flexDirection: "column",
@@ -81,14 +84,14 @@ export function InstallBanner({
     >
       <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
         <div>
-          <div style={{ fontWeight: 700, fontSize: 15 }}>{title}</div>
-          <div style={{ fontSize: 13, color: t.muted, marginTop: 2 }}>{isIOS ? iosInstructions : description}</div>
+          <div style={{ fontWeight: 700, fontSize: 15 }}>{heading}</div>
+          <div style={{ fontSize: 13, color: tokens.muted, marginTop: 2 }}>{isIOS ? iosBody : body}</div>
         </div>
         <button
           type="button"
-          aria-label="Dismiss"
+          aria-label={t("forge.install_banner.aria_dismiss")}
           onClick={dismiss}
-          style={{ background: "transparent", border: "none", color: t.muted, cursor: "pointer", fontSize: 18, lineHeight: 1 }}
+          style={{ background: "transparent", border: "none", color: tokens.muted, cursor: "pointer", fontSize: 18, lineHeight: 1 }}
         >
           {"×"}
         </button>
@@ -102,10 +105,10 @@ export function InstallBanner({
               if (ok) dismiss();
             }}
           >
-            Install
+            {t("forge.install_banner.install")}
           </Button>
           <Button size="sm" variant="ghost" onClick={dismiss}>
-            Not now
+            {t("forge.install_banner.not_now")}
           </Button>
         </div>
       )}

package/src/ui/styled/InvoiceConfirmation.tsx

@@ -1,3 +1,4 @@
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
@@ -20,30 +21,37 @@ export function InvoiceConfirmation({
   invoicePath = `/i/invoice/${invoiceId}`,
 }: InvoiceConfirmationProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   const { data, isLoading, error } = useInvoiceFinalize(invoiceId);
 
   if (isLoading) return <Loading fullPage />;
-  if (error || !data) return <p style={{ color: theme.colors.text }}>We couldn’t load this invoice.</p>;
+  if (error || !data) return <p style={{ color: theme.colors.text }}>{t("forge.invoice_confirmation.load_error")}</p>;
 
   const paid = data.status === "paid" || !!data.paidAt;
 
   return (
     <div style={{ maxWidth: 520, margin: "0 auto", textAlign: "center", color: theme.colors.text }}>
       <h1 style={{ fontSize: 28, fontWeight: 800, marginBottom: 8 }}>
-        {paid ? "Payment received" : "Payment not completed"}
+        {paid ? t("forge.invoice_confirmation.paid_title") : t("forge.invoice_confirmation.unpaid_title")}
       </h1>
       <p style={{ opacity: 0.75, marginBottom: 16 }}>
         {paid
-          ? `Thank you, ${data.clientName}. Invoice ${data.invoiceNumber} is now paid.`
-          : `Invoice ${data.invoiceNumber} is ${data.status}. If you were charged, please contact support.`}
+          ? t("forge.invoice_confirmation.paid_body", {
+              client_name: data.clientName,
+              invoice_number: data.invoiceNumber,
+            })
+          : t("forge.invoice_confirmation.unpaid_body", {
+              invoice_number: data.invoiceNumber,
+              status: data.status,
+            })}
       </p>
       <p style={{ fontWeight: 700, color: theme.colors.primary }}>{fmt(Number(data.total), data.currency)}</p>
       <a
         href={invoicePath}
         style={{ display: "inline-block", marginTop: 24, color: theme.colors.primary, textDecoration: "underline" }}
       >
-        View invoice
+        {t("forge.invoice_confirmation.view_invoice")}
       </a>
     </div>
   );