@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/CourseDetail.tsx

@@ -5,6 +5,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
 import { CourseCheckout } from "./CourseCheckout";
 import { ReviewsSection } from "./ReviewsSection";
@@ -41,13 +42,14 @@ export function CourseDetail({
   loginPath,
   membershipPath,
 }: CourseDetailProps) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
   const { data: course, isLoading } = useGetCourse(slug, { initialData: initialCourse });
 
   if (isLoading) return <Loading fullPage />;
-  if (!course) return <p>Course not found.</p>;
+  if (!course) return <p>{t("forge.course_detail.not_found")}</p>;
 
   /**
    * Members-only course (S.4). Announced by the detail read, which is why the
@@ -61,27 +63,27 @@ export function CourseDetail({
   return (
     <div
       className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
-      style={{ maxWidth: 1040, margin: "0 auto", color: t.text, ...style }}
+      style={{ maxWidth: 1040, margin: "0 auto", color: tokens.text, ...style }}
     >
       {introVideo ? (
         <video
           src={introVideo}
           controls
-          style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: t.cornerRadius }}
+          style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: tokens.cornerRadius }}
         />
       ) : (
         cover && (
           <img
             src={cover}
             alt={course.title}
-            style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: t.cornerRadius }}
+            style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: tokens.cornerRadius }}
           />
         )
       )}
 
       <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
         <div className="flex-1 min-w-0">
-          <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: t.headingFontFamily }}>{course.title}</h1>
+          <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: tokens.headingFontFamily }}>{course.title}</h1>
 
           {course.description && (
             <div dangerouslySetInnerHTML={{ __html: course.description }} style={{ lineHeight: 1.7, opacity: 0.9 }} />
@@ -89,15 +91,19 @@ export function CourseDetail({
 
           {modules.length > 0 && (
             <>
-              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 12px", fontFamily: t.headingFontFamily }}>Course Content</h2>
+              <h2
+                style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 12px", fontFamily: tokens.headingFontFamily }}
+              >
+                {t("forge.course_detail.content_title")}
+              </h2>
               <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                 {modules.map((module) => (
                   <div
                     key={module.id}
                     style={{
                       padding: 16,
-                      border: `1px solid ${t.primary}40`,
-                      borderRadius: t.cornerRadius,
+                      border: `1px solid ${tokens.primary}40`,
+                      borderRadius: tokens.cornerRadius,
                     }}
                   >
                     <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: module.description ? 6 : 0 }}>
@@ -124,21 +130,21 @@ export function CourseDetail({
           className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
           style={{
             padding: 16,
-            border: `1px solid ${t.primary}80`,
-            borderRadius: t.cornerRadius,
-            background: t.surface,
+            border: `1px solid ${tokens.primary}80`,
+            borderRadius: tokens.cornerRadius,
+            background: tokens.surface,
           }}
         >
-          <span style={{ fontWeight: 700, fontSize: 22, color: t.primary }}>
+          <span style={{ fontWeight: 700, fontSize: 22, color: tokens.primary }}>
             {course.compareAtPrice != null && Number(course.compareAtPrice) > Number(course.price) && (
               <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 16 }}>
                 {fmt(Number(course.compareAtPrice))}
               </span>
             )}
             {Number(course.price) <= 0 ? (
-              "Free"
+              t("forge.course_detail.free")
             ) : (
-              <PriceDisplay amount={Number(course.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
+              <PriceDisplay amount={Number(course.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={tokens.text} captionStyle={{ opacity: 0.65 }} />
             )}
           </span>
           {/*

package/src/ui/styled/CoursesGrid.tsx

@@ -1,5 +1,6 @@
 import { useGetCourses } from "../../data/queries/useCourses";
 import type { PublicCourse } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
@@ -18,13 +19,14 @@ export interface CoursesGridProps {
 /** Themed courses grid, built on `useGetCourses`. */
 export function CoursesGrid({ columns = 3, limit, formatAmount, onSelect, className, style }: CoursesGridProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
   const { data, isLoading } = useGetCourses({ page: 1 });
   const courses = (data?.data ?? []).slice(0, limit ?? 100);
 
   if (isLoading) return <Loading />;
-  if (!courses.length) return <p style={{ color: t.text, opacity: 0.7 }}>No courses yet.</p>;
+  if (!courses.length) return <p style={{ color: t.text, opacity: 0.7 }}>{tr("forge.courses_grid.empty_title")}</p>;
 
   const gap = 16;
   const track = `minmax(max(150px, calc((100% - ${(columns - 1) * gap}px) / ${columns})), 1fr)`;
@@ -73,7 +75,7 @@ export function CoursesGrid({ columns = 3, limit, formatAmount, onSelect, classN
                 {price > 0 ? (
                   <PriceDisplay amount={price} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
                 ) : (
-                  "Free"
+                  tr("forge.courses_grid.free")
                 )}
               </div>
             </div>

package/src/ui/styled/CurrencySwitcher.tsx

@@ -1,4 +1,5 @@
 import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { useForgeT } from "../../i18n";
 import { currencySymbol, type Currency } from "../../types/models";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 
@@ -18,6 +19,8 @@ export interface CurrencySwitcherProps {
  */
 export function CurrencySwitcher({ className, style }: CurrencySwitcherProps) {
   const t = useThemeTokens();
+  // Named `translate` rather than the usual `t`: `t` is already the theme tokens here.
+  const translate = useForgeT();
   const { currencies, userSelectedCurrency, setUserSelectedCurrency } = usePublicAuth();
 
   if (!currencies || !currencies.supportedCurrencies?.length) return null;
@@ -25,7 +28,7 @@ export function CurrencySwitcher({ className, style }: CurrencySwitcherProps) {
   return (
     <select
       className={className}
-      aria-label="Currency"
+      aria-label={translate("forge.currency_switcher.aria_currency")}
       value={userSelectedCurrency ?? currencies.userCurrency ?? ""}
       onChange={(e) => setUserSelectedCurrency(e.target.value as Currency)}
       style={{

package/src/ui/styled/DiscountCode.tsx

@@ -1,11 +1,16 @@
 import type { CSSProperties } from "react";
 import type { AppliedDiscountCoupon } from "../../types/models";
 import type { CouponField } from "../headless/coupon/useCouponField";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { buttonStyle } from "./Button";
 
 /** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
-const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+const a = (hex: string, alpha: number) =>
+  hex +
+  Math.round(alpha * 255)
+    .toString(16)
+    .padStart(2, "0");
 
 export interface DiscountCodeFieldProps {
   coupon: CouponField;
@@ -32,7 +37,7 @@ export interface DiscountCodeFieldProps {
  * Two things it deliberately does NOT do:
  *
  * 1. It never writes its own rejection copy. The backend answers a refused code
- *    with the actual reason, already translated — minimum not met, expired,
+ *    with the actual reason, already translated: minimum not met, expired,
  *    already used, members only. Collapsing all of that into "invalid code"
  *    throws away the only thing that tells the buyer whether to fix the cart,
  *    fix the code, or give up.
@@ -40,14 +45,10 @@ export interface DiscountCodeFieldProps {
  *    server, including automatic (no-code) discounts, which is the ONLY way a
  *    buyer learns one applied.
  */
-export function DiscountCodeField({
-  coupon,
-  fmt,
-  disabled,
-  mode = "quote",
-  promptText = "Have a discount code?",
-}: DiscountCodeFieldProps) {
+export function DiscountCodeField({ coupon, fmt, disabled, mode = "quote", promptText }: DiscountCodeFieldProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
+  const prompt = promptText ?? t("forge.discount_code.prompt");
   // Automatic discounts have no code the buyer typed, so they are shown as
   // applied even when the input was never opened.
   const applied = coupon.appliedCoupons;
@@ -72,16 +73,16 @@ export function DiscountCodeField({
             fontFamily: theme.fontFamily,
           }}
         >
-          {promptText}
+          {prompt}
         </button>
       )}
 
       {showInput && (
         <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
           <input
-            aria-label="Discount code"
+            aria-label={t("forge.discount_code.aria_input")}
             data-testid="discount-code-input"
-            placeholder="Enter code"
+            placeholder={t("forge.discount_code.placeholder")}
             value={coupon.code}
             onChange={(e) => coupon.setCode(e.target.value.toUpperCase())}
             style={{ ...inputStyle(theme), flex: 1 }}
@@ -97,14 +98,14 @@ export function DiscountCodeField({
                 opacity: coupon.isApplying || !coupon.code.trim() ? 0.6 : 1,
               }}
             >
-              {coupon.isApplying ? "Applying…" : "Apply"}
+              {coupon.isApplying ? t("forge.discount_code.applying") : t("forge.discount_code.apply")}
             </button>
           )}
         </div>
       )}
 
       {showInput && mode === "deferred" && (
-        <p style={{ fontSize: 12, opacity: 0.6, margin: 0 }}>Your code is applied at the next step.</p>
+        <p style={{ fontSize: 12, opacity: 0.6, margin: 0 }}>{t("forge.discount_code.deferred_note")}</p>
       )}
 
       {coupon.error && (
@@ -129,7 +130,7 @@ export function DiscountCodeField({
           <div>
             {applied.map((c) => (
               <p key={c.code} style={{ margin: 0, fontSize: 14, fontWeight: 600, color: theme.colors.primary }}>
-                {c.code} · {fmt(c.discountAmount)} off
+                {t("forge.discount_code.applied_line", { code: c.code, amount: fmt(c.discountAmount) })}
               </p>
             ))}
           </div>
@@ -150,7 +151,7 @@ export function DiscountCodeField({
                 fontFamily: theme.fontFamily,
               }}
             >
-              Remove
+              {t("forge.discount_code.remove")}
             </button>
           )}
         </div>
@@ -176,18 +177,21 @@ export interface DiscountSummaryLinesProps {
  * working code from a silently-ignored one, and no reason to trust either.
  */
 export function DiscountSummaryLines({ subTotal, discountAmount, appliedCoupons, fmt }: DiscountSummaryLinesProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   if (!(discountAmount > 0)) return null;
   const codes = (appliedCoupons ?? []).map((c) => c.code).filter(Boolean);
   return (
     <div data-testid="discount-summary" style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 8 }}>
       <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
-        <span style={{ opacity: 0.75 }}>Subtotal</span>
+        <span style={{ opacity: 0.75 }}>{t("forge.discount_code.subtotal")}</span>
         <span style={{ opacity: 0.75 }}>{fmt(subTotal)}</span>
       </div>
       <div data-testid="discount-line" style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
         <span style={{ color: theme.colors.primary }}>
-          Discount{codes.length > 0 ? ` (${codes.join(", ")})` : ""}
+          {codes.length > 0
+            ? t("forge.discount_code.discount_with_codes", { codes: codes.join(", ") })
+            : t("forge.discount_code.discount")}
         </span>
         <span style={{ color: theme.colors.primary }}>−{fmt(discountAmount)}</span>
       </div>

package/src/ui/styled/DonationButton.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { useForgeT } from "../../i18n";
 import { Donation, useDonationContext, type DonationPaymentRenderProps } from "../headless/donation";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
@@ -28,6 +29,7 @@ export interface DonationButtonProps {
  */
 export function DonationButton({ donationId, text, returnUrl, onSuccess, renderPayment, formatAmount }: DonationButtonProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const registered = usePaymentRenderer();
   const fmt = useAmountFormatter(formatAmount);
   // Donations confirm in place, so default the registered renderer to "manual".
@@ -49,7 +51,7 @@ export function DonationButton({ donationId, text, returnUrl, onSuccess, renderP
             fontFamily: theme.fontFamily,
           }}
         >
-          {text ?? "Donate"}
+          {text ?? t("forge.donation_button.donate")}
         </button>
       </Donation.Trigger>
 
@@ -71,7 +73,7 @@ export function DonationButton({ donationId, text, returnUrl, onSuccess, renderP
           fontFamily: theme.fontFamily,
         }}
       >
-        <Donation.Title className="">{text ?? "Support"}</Donation.Title>
+        <Donation.Title className="">{text ?? t("forge.donation_button.title")}</Donation.Title>
         <DonationBody fmt={fmt} renderPayment={renderPay} />
       </Donation.Modal>
     </Donation>
@@ -87,6 +89,7 @@ function DonationBody({
 }) {
   const c = useDonationContext();
   const theme = useForgeTheme();
+  const t = useForgeT();
   // Authoritative tax quote from the donation start-payment (display only).
   const taxSummary = summarizeTaxQuote(c.startResult?.taxQuote);
   const inputStyle = {
@@ -106,17 +109,19 @@ function DonationBody({
     return (
       <div style={{ textAlign: "center", padding: "16px 0" }}>
         <h3 style={{ marginBottom: 8 }}>
-          {c.outcome === "succeeded" ? "Donation received" : "Payment failed"}
+          {c.outcome === "succeeded"
+            ? t("forge.donation_button.result_success_title")
+            : t("forge.donation_button.result_failed_title")}
         </h3>
         <p style={{ opacity: 0.8 }}>
           {c.outcome === "succeeded"
-            ? c.donation?.successMessage || "Thank you for your contribution."
-            : c.paymentErrorMessage || "Your card was not charged. Please try again."}
+            ? c.donation?.successMessage || t("forge.donation_button.success_body")
+            : c.paymentErrorMessage || t("forge.donation_button.failed_body")}
         </p>
         <div style={{ display: "flex", gap: 8, marginTop: 16, justifyContent: "center" }}>
           {c.outcome === "failed" && (
             <button onClick={c.reset} style={{ ...inputStyle, width: "auto", cursor: "pointer" }}>
-              Try again
+              {t("forge.donation_button.retry")}
             </button>
           )}
           <Donation.Close asChild>
@@ -130,7 +135,7 @@ function DonationBody({
                 cursor: "pointer",
               }}
             >
-              Close
+              {t("forge.donation_button.close")}
             </button>
           </Donation.Close>
         </div>
@@ -143,12 +148,14 @@ function DonationBody({
     return (
       <div style={{ marginTop: 16 }}>
         <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
-          <span>Total</span>
+          <span>{t("forge.donation_button.total")}</span>
           <strong style={{ color: theme.colors.primary, textAlign: "right" }}>
             {fmt(c.startResult?.totalAmount ?? c.estimatedTotal)}
             {taxSummary && (
               <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
-                {taxSummary.mode === "inclusive" ? taxSummary.label : `incl. ${taxSummary.formattedTax} tax`}
+                {taxSummary.mode === "inclusive"
+                  ? taxSummary.label
+                  : t("forge.donation_button.tax_included", { amount: taxSummary.formattedTax })}
               </span>
             )}
           </strong>
@@ -156,7 +163,7 @@ function DonationBody({
         {renderPayment ? (
           <Donation.PaymentStep>{(p) => renderPayment(p)}</Donation.PaymentStep>
         ) : (
-          <p style={{ opacity: 0.7 }}>Payment is not configured.</p>
+          <p style={{ opacity: 0.7 }}>{t("forge.donation_button.payment_not_configured")}</p>
         )}
       </div>
     );
@@ -195,7 +202,9 @@ function DonationBody({
         )}
 
         <label>
-          Custom amount{c.minimum > 0 ? ` (min ${fmt(c.minimum)})` : ""}
+          {c.minimum > 0
+            ? t("forge.donation_button.custom_amount_min", { amount: fmt(c.minimum) })
+            : t("forge.donation_button.custom_amount")}
           <input
             type="number"
             min={c.minimum || 0}
@@ -212,16 +221,38 @@ function DonationBody({
         {c.donation?.coverFeesEnabled && c.effectiveAmount > 0 && (
           <label style={{ display: "flex", gap: 8, alignItems: "center" }}>
             <input type="checkbox" checked={c.coverFees} onChange={(e) => c.setCoverFees(e.target.checked)} />
-            <span>Cover the {fmt(c.estimatedFee)} processing fee</span>
+            <span>{t("forge.donation_button.cover_fees", { amount: fmt(c.estimatedFee) })}</span>
           </label>
         )}
 
         <div style={{ display: "flex", gap: 8 }}>
-          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle} />
-          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle} />
+          <input
+            placeholder={t("forge.donation_button.first_name_placeholder")}
+            value={c.firstName}
+            onChange={(e) => c.setFirstName(e.target.value)}
+            style={inputStyle}
+          />
+          <input
+            placeholder={t("forge.donation_button.last_name_placeholder")}
+            value={c.lastName}
+            onChange={(e) => c.setLastName(e.target.value)}
+            style={inputStyle}
+          />
         </div>
-        <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle} />
-        <textarea placeholder="Message (optional)" value={c.message} onChange={(e) => c.setMessage(e.target.value)} rows={2} style={inputStyle} />
+        <input
+          placeholder={t("forge.donation_button.email_placeholder")}
+          type="email"
+          value={c.email}
+          onChange={(e) => c.setEmail(e.target.value)}
+          style={inputStyle}
+        />
+        <textarea
+          placeholder={t("forge.donation_button.message_placeholder")}
+          value={c.message}
+          onChange={(e) => c.setMessage(e.target.value)}
+          rows={2}
+          style={inputStyle}
+        />
 
         {c.startError && <p style={{ color: "#ef4444", fontSize: 14 }}>{c.startError}</p>}
 
@@ -239,7 +270,11 @@ function DonationBody({
             opacity: c.isStarting ? 0.6 : 1,
           }}
         >
-          {c.isStarting ? "Processing…" : `Donate ${c.effectiveAmount > 0 ? fmt(c.estimatedTotal) : ""}`.trim()}
+          {c.isStarting
+            ? t("forge.donation_button.processing")
+            : c.effectiveAmount > 0
+              ? t("forge.donation_button.submit_amount", { amount: fmt(c.estimatedTotal) })
+              : t("forge.donation_button.submit")}
         </button>
       </div>
     </Donation.AmountStep>

package/src/ui/styled/DonationPage.tsx

@@ -1,5 +1,6 @@
 import { DonationButton } from "./DonationButton";
 import { useAmountFormatter } from "../format/useFormatCurrency";
+import { useForgeT } from "../../i18n";
 
 export interface DonationPageProps {
   /** Donation id from the URL search param (`?id=`). */
@@ -10,13 +11,12 @@ export interface DonationPageProps {
 
 /** Standalone donation page — heading + copy wrapping the `DonationButton` flow. */
 export function DonationPage({ donationId, formatAmount }: DonationPageProps) {
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   return (
     <div style={{ maxWidth: 520, margin: "0 auto", textAlign: "center" }}>
-      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 12 }}>Support the work</h1>
-      <p style={{ opacity: 0.75, marginBottom: 24 }}>
-        Your contribution keeps this going. Thank you.
-      </p>
+      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 12 }}>{t("forge.donation_page.title")}</h1>
+      <p style={{ opacity: 0.75, marginBottom: 24 }}>{t("forge.donation_page.subtitle")}</p>
       {donationId ? (
         <DonationButton donationId={donationId} formatAmount={fmt} />
       ) : (

package/src/ui/styled/EmailListForm.tsx

@@ -1,4 +1,5 @@
 import { useEmailListForm } from "../headless/forms/useEmailListForm";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 
@@ -19,14 +20,21 @@ export function EmailListForm({
   leadMagnetId,
   includeName,
   includePhoneNumber,
-  title = "Join my email list",
+  title,
   description,
-  buttonText = "Join",
-  successMessage = "Thanks for subscribing!",
+  buttonText,
+  successMessage,
 }: EmailListFormProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const f = useEmailListForm({ emailListId, leadMagnetId, includeName, includePhoneNumber });
 
+  // Defaults resolve here rather than in the signature so they can be
+  // translated. `??` keeps a caller-supplied "" falsy exactly as before.
+  const titleText = title ?? t("forge.email_list_form.title");
+  const buttonLabel = buttonText ?? t("forge.email_list_form.submit");
+  const successText = successMessage ?? t("forge.email_list_form.success");
+
   const inputStyle = {
     width: "100%",
     padding: 10,
@@ -39,28 +47,33 @@ export function EmailListForm({
   if (f.isSuccess) {
     return (
       <div style={{ color: theme.colors.text, fontFamily: theme.fontFamily, textAlign: "center", padding: 8 }}>
-        {f.requiresConfirmation ? "Almost there: check your email to confirm." : successMessage}
+        {f.requiresConfirmation ? t("forge.email_list_form.confirm_required") : successText}
       </div>
     );
   }
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 10, color: theme.colors.text, fontFamily: theme.fontFamily }}>
-      {title && <h3 style={{ fontWeight: 600 }}>{title}</h3>}
+      {titleText && <h3 style={{ fontWeight: 600 }}>{titleText}</h3>}
       {description && <p style={{ opacity: 0.8, fontSize: 14 }}>{description}</p>}
       {includeName && (
-        <input placeholder="Your name" value={f.name} onChange={(e) => f.setName(e.target.value)} style={inputStyle} />
+        <input
+          placeholder={t("forge.email_list_form.name_placeholder")}
+          value={f.name}
+          onChange={(e) => f.setName(e.target.value)}
+          style={inputStyle}
+        />
       )}
       <input
         type="email"
-        placeholder="Email address"
+        placeholder={t("forge.email_list_form.email_placeholder")}
         value={f.email}
         onChange={(e) => f.setEmail(e.target.value)}
         style={inputStyle}
       />
       {includePhoneNumber && (
         <input
-          placeholder="Phone number"
+          placeholder={t("forge.email_list_form.phone_placeholder")}
           value={f.phoneNumber}
           onChange={(e) => f.setPhoneNumber(e.target.value)}
           style={inputStyle}
@@ -81,7 +94,7 @@ export function EmailListForm({
           opacity: f.isSubmitting ? 0.6 : 1,
         }}
       >
-        {f.isSubmitting ? "Joining…" : buttonText}
+        {f.isSubmitting ? t("forge.email_list_form.submitting") : buttonLabel}
       </button>
     </div>
   );