@tribe-nest/forge 3.26.0 → 3.29.0

package/src/ui/styled/InvoicePayment.tsx

@@ -1,3 +1,4 @@
+import { useForgeT } from "../../i18n";
 import { useInvoicePayment } from "../headless/invoice/useInvoicePayment";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
@@ -26,13 +27,15 @@ const formatDate = (value: string | number | Date): string =>
  * or Paystack's inline modal behind a pay button.
  */
 export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoicePaymentProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const renderPayment = usePaymentRenderer();
   const { invoice, downloadPdf, clientSecret, returnUrl, isStarting, error, taxQuote, isPaystack, canOpenPaystack, openPaystackCheckout } =
     useInvoicePayment(invoiceId, { returnPath });
 
   if (invoice.isLoading) return <Loading fullPage />;
-  if (invoice.error || !invoice.data) return <p style={{ color: theme.colors.text }}>Invoice not found.</p>;
+  if (invoice.error || !invoice.data)
+    return <p style={{ color: theme.colors.text }}>{t("forge.invoice_payment.not_found")}</p>;
 
   const inv = invoice.data;
   const isPaid = inv.status === "paid" || !!inv.paidAt;
@@ -72,7 +75,9 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
     <div style={{ maxWidth: 640, margin: "0 auto", color: theme.colors.text }}>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
         <div>
-          <h1 style={{ fontSize: 26, fontWeight: 800 }}>Invoice {inv.invoiceNumber}</h1>
+          <h1 style={{ fontSize: 26, fontWeight: 800 }}>
+            {t("forge.invoice_payment.title", { invoice_number: inv.invoiceNumber })}
+          </h1>
           <p style={{ opacity: 0.7, fontSize: 14 }}>{inv.profileName}</p>
         </div>
         <button
@@ -88,18 +93,26 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
             fontSize: 14,
           }}
         >
-          {downloadPdf.isPending ? "Preparing…" : "Download PDF"}
+          {downloadPdf.isPending ? t("forge.invoice_payment.preparing_pdf") : t("forge.invoice_payment.download_pdf")}
         </button>
       </div>
 
       <div style={{ fontSize: 14, opacity: 0.85, marginBottom: 16 }}>
         <div>
-          Billed to: {inv.clientName}
-          {inv.clientCompany ? ` · ${inv.clientCompany}` : ""}
+          {inv.clientCompany
+            ? t("forge.invoice_payment.billed_to_company", {
+                client_name: inv.clientName,
+                client_company: inv.clientCompany,
+              })
+            : t("forge.invoice_payment.billed_to", { client_name: inv.clientName })}
         </div>
         <div>
-          Issued: {formatDate(inv.issueDate)}
-          {inv.dueDate ? ` · Due: ${formatDate(inv.dueDate)}` : ""}
+          {inv.dueDate
+            ? t("forge.invoice_payment.issued_due", {
+                issue_date: formatDate(inv.issueDate),
+                due_date: formatDate(inv.dueDate),
+              })
+            : t("forge.invoice_payment.issued", { issue_date: formatDate(inv.issueDate) })}
         </div>
       </div>
 
@@ -123,7 +136,10 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
           >
             <span>
               {li.description}
-              <span style={{ opacity: 0.6 }}> × {li.quantity}</span>
+              <span style={{ opacity: 0.6 }}>
+                {" "}
+                {t("forge.invoice_payment.line_item_quantity", { quantity: li.quantity })}
+              </span>
             </span>
             <span>{money(Number(li.amount))}</span>
           </div>
@@ -142,13 +158,13 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
                 opacity: 0.8,
               }}
             >
-              <span>Tax</span>
+              <span>{t("forge.invoice_payment.tax")}</span>
               <span>{taxSummary.formattedTax}</span>
             </div>
           ) : null;
         })()}
         <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 14px", fontWeight: 700 }}>
-          <span>Total</span>
+          <span>{t("forge.invoice_payment.total")}</span>
           <span style={{ color: theme.colors.primary, textAlign: "right" }}>
             {money(Number(inv.total))}
             {(() => {
@@ -168,18 +184,23 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
       {inv.notes && <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 16 }}>{inv.notes}</p>}
 
       {isPaid ? (
-        <p style={{ fontWeight: 700, color: theme.colors.primary }}>This invoice has been paid. Thank you!</p>
+        <p style={{ fontWeight: 700, color: theme.colors.primary }}>{t("forge.invoice_payment.paid_notice")}</p>
       ) : (
         <div>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>
+            {t("forge.invoice_payment.payment_heading")}
+          </h2>
           {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
           {/* Paystack brings its own modal, so it is checked before the Stripe
               renderer and needs none of it. */}
           {isPaystack ? (
             canOpenPaystack ? (
-              <PaystackPayButton onPay={openPaystackCheckout} label={`Pay ${money(Number(inv.total))}`} />
+              <PaystackPayButton
+                onPay={openPaystackCheckout}
+                label={t("forge.invoice_payment.pay_amount", { amount: money(Number(inv.total)) })}
+              />
             ) : (
-              <Loading label="Preparing payment…" size={22} />
+              <Loading label={t("forge.invoice_payment.preparing_payment")} size={22} />
             )
           ) : clientSecret ? (
             renderPayment?.({
@@ -191,9 +212,9 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
           ) : (
             <>
               {isStarting ? (
-                <Loading label="Preparing payment…" size={22} />
+                <Loading label={t("forge.invoice_payment.preparing_payment")} size={22} />
               ) : (
-                <p style={{ opacity: 0.7 }}>Payment is not available right now.</p>
+                <p style={{ opacity: 0.7 }}>{t("forge.invoice_payment.payment_unavailable")}</p>
               )}
             </>
           )}

package/src/ui/styled/LeadMagnet.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useLeadMagnetConfirm, useTrackLeadMagnetDownload } from "../../data/queries/useLeadMagnet";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -12,6 +13,7 @@ export interface LeadMagnetProps {
 
 /** Lead magnet delivery / download screen. Built on `useLeadMagnetConfirm` + `useTrackLeadMagnetDownload`. */
 export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const trackDownload = useTrackLeadMagnetDownload();
   const [isDownloading, setIsDownloading] = useState(false);
@@ -57,8 +59,10 @@ export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
   if (state === "error") {
     return (
       <div style={wrap}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Oops!</h1>
-        <p>{!leadMagnetId || !subscriberId ? "Invalid link" : "This link is invalid or has expired."}</p>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>{t("forge.lead_magnet.error_title")}</h1>
+        <p>
+          {!leadMagnetId || !subscriberId ? t("forge.lead_magnet.invalid_link") : t("forge.lead_magnet.expired_link")}
+        </p>
       </div>
     );
   }
@@ -67,11 +71,9 @@ export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
     <div style={wrap}>
       {profile && <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 8 }}>{profile.name}</p>}
       <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>
-        {leadMagnet?.thankYouMessage || "Thank you for subscribing!"}
+        {leadMagnet?.thankYouMessage || t("forge.lead_magnet.thank_you")}
       </h1>
-      <p style={{ opacity: 0.8, marginBottom: 32 }}>
-        Your download is ready. Click the button below to get your file.
-      </p>
+      <p style={{ opacity: 0.8, marginBottom: 32 }}>{t("forge.lead_magnet.description")}</p>
       <button
         onClick={handleDownload}
         disabled={isDownloading}
@@ -86,7 +88,7 @@ export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
           color: theme.colors.background,
         }}
       >
-        {isDownloading ? "Preparing…" : "Download Now"}
+        {isDownloading ? t("forge.lead_magnet.preparing") : t("forge.lead_magnet.download")}
       </button>
     </div>
   );

package/src/ui/styled/Loading.tsx

@@ -1,3 +1,4 @@
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 
 export interface LoadingProps {
@@ -14,6 +15,7 @@ const alpha = (hex: string, a: number) => hex + Math.round(a * 255).toString(16)
 /** Themed loading spinner — drop-in from `@tribe-nest/forge/ui`. */
 export function Loading({ size = 28, label, fullPage }: LoadingProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const border = Math.max(2, Math.round(size / 9));
 
   const content = (
@@ -45,7 +47,11 @@ export function Loading({ size = 28, label, fullPage }: LoadingProps) {
         }}
       />
       {label && <span style={{ fontSize: 14, opacity: 0.7 }}>{label}</span>}
-      {!label && <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>Loading</span>}
+      {!label && (
+        <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>
+          {t("forge.loading.loading")}
+        </span>
+      )}
     </div>
   );
 

package/src/ui/styled/LoginForm.tsx

@@ -1,5 +1,6 @@
 import { useLoginFlow } from "../headless/auth/useLoginFlow";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 
 export interface LoginFormProps {
   /** Called after a successful login. The shell typically redirects here. */
@@ -12,6 +13,7 @@ export interface LoginFormProps {
 
 /** Themed 2FA login form (credentials → emailed code), built on `useLoginFlow`. */
 export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const flow = useLoginFlow({ onSuccess });
 
@@ -48,9 +50,9 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
   if (flow.step === "code") {
     return (
       <div style={card}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>Verify your email</h1>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>{t("forge.login_form.verify_title")}</h1>
         <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 24 }}>
-          We sent a 6-digit code to <strong>{flow.email}</strong>
+          {t("forge.login_form.code_sent_to")} <strong>{flow.email}</strong>
         </p>
         {flow.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{flow.error}</p>}
         <form
@@ -71,12 +73,12 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
             style={{ ...input, textAlign: "center", fontSize: 24, letterSpacing: "0.4em" }}
           />
           <button type="submit" disabled={flow.isSubmitting || flow.code.length !== 6} style={button}>
-            {flow.isSubmitting ? "Verifying…" : "Verify & Sign In"}
+            {flow.isSubmitting ? t("forge.login_form.verifying") : t("forge.login_form.verify_submit")}
           </button>
         </form>
         <div style={{ display: "flex", justifyContent: "space-between", marginTop: 16, fontSize: 14 }}>
           <button type="button" onClick={flow.back} style={{ ...link, background: "none", border: "none", cursor: "pointer" }}>
-            Back to login
+            {t("forge.login_form.back_to_login")}
           </button>
           <button
             type="button"
@@ -84,7 +86,7 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
             disabled={flow.isSubmitting}
             style={{ ...link, background: "none", border: "none", cursor: "pointer" }}
           >
-            Resend code
+            {t("forge.login_form.resend_code")}
           </button>
         </div>
       </div>
@@ -93,7 +95,7 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
 
   return (
     <div style={card}>
-      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Login</h1>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>{t("forge.login_form.title")}</h1>
       {flow.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{flow.error}</p>}
       <form
         onSubmit={(e) => {
@@ -103,30 +105,36 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
         style={{ display: "flex", flexDirection: "column", gap: 16 }}
       >
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <label style={{ fontSize: 14 }}>Email</label>
-          <input type="email" placeholder="Email" value={flow.email} onChange={(e) => flow.setEmail(e.target.value)} style={input} />
+          <label style={{ fontSize: 14 }}>{t("forge.login_form.email_label")}</label>
+          <input
+            type="email"
+            placeholder={t("forge.login_form.email_placeholder")}
+            value={flow.email}
+            onChange={(e) => flow.setEmail(e.target.value)}
+            style={input}
+          />
         </div>
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <label style={{ fontSize: 14 }}>Password</label>
+          <label style={{ fontSize: 14 }}>{t("forge.login_form.password_label")}</label>
           <input
             type="password"
-            placeholder="Password"
+            placeholder={t("forge.login_form.password_placeholder")}
             value={flow.password}
             onChange={(e) => flow.setPassword(e.target.value)}
             style={input}
           />
           <a href={forgotHref} style={{ ...link, fontSize: 13 }}>
-            Forgot password?
+            {t("forge.login_form.forgot_password")}
           </a>
         </div>
         <button type="submit" disabled={flow.isSubmitting} style={button}>
-          {flow.isSubmitting ? "Sending code…" : "Login"}
+          {flow.isSubmitting ? t("forge.login_form.sending_code") : t("forge.login_form.submit")}
         </button>
       </form>
       <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
-        Don&apos;t have an account?{" "}
+        {t("forge.login_form.no_account")}{" "}
         <a href={signupHref} style={link}>
-          Sign up
+          {t("forge.login_form.sign_up")}
         </a>
       </p>
     </div>

package/src/ui/styled/MembershipCheckout.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties } from "react";
 import { useMembershipCheckout } from "../headless/membership/useMembershipCheckout";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { priceTaxCaption } from "../format/PriceDisplay";
@@ -44,6 +45,7 @@ export function MembershipCheckout({
   className,
   style,
 }: MembershipCheckoutProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
   // Memberships have no checkout tax quote (subscription rail) — inclusive
@@ -81,9 +83,9 @@ export function MembershipCheckout({
   if (!tier) {
     return (
       <div className={className} style={card}>
-        <p>Select a membership tier to continue.</p>
+        <p>{t("forge.membership_checkout.no_tier_body")}</p>
         <a href={membershipsPath} style={{ ...button, marginTop: 16, display: "inline-block", textAlign: "center", textDecoration: "none" }}>
-          View memberships
+          {t("forge.membership_checkout.view_memberships")}
         </a>
       </div>
     );
@@ -96,13 +98,20 @@ export function MembershipCheckout({
   if (checkout.step === "payment" && (checkout.clientSecret || checkout.canOpenPaystack)) {
     return (
       <div className={className} style={card}>
-        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>Payment</h1>
+        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>{t("forge.membership_checkout.payment_title")}</h1>
         <p style={{ opacity: 0.75, marginBottom: 24 }}>
-          {tier.name} · {fmt(checkout.amount)} / {checkout.billingCycle}
+          {t("forge.membership_checkout.payment_summary", {
+            tier_name: tier.name,
+            amount: fmt(checkout.amount),
+            cycle: checkout.billingCycle,
+          })}
         </p>
         <div style={box}>
           {checkout.isPaystack ? (
-            <PaystackPayButton onPay={checkout.openPaystackCheckout} label={`Pay ${fmt(checkout.amount)}`} />
+            <PaystackPayButton
+              onPay={checkout.openPaystackCheckout}
+              label={t("forge.membership_checkout.pay", { amount: fmt(checkout.amount) })}
+            />
           ) : (
             checkout.clientSecret &&
             renderPayment({
@@ -119,7 +128,7 @@ export function MembershipCheckout({
           onClick={() => checkout.setStep("select")}
           style={{ ...button, background: "transparent", color: theme.colors.text, border: `1px solid ${theme.colors.primary}40` }}
         >
-          Back
+          {t("forge.membership_checkout.back")}
         </button>
       </div>
     );
@@ -129,7 +138,9 @@ export function MembershipCheckout({
 
   return (
     <div className={className} style={card}>
-      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24 }}>Join {tier.name}</h1>
+      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24 }}>
+        {t("forge.membership_checkout.title", { tier_name: tier.name })}
+      </h1>
 
       <div style={box}>
         {tier.description && <p style={{ marginBottom: 16 }}>{tier.description}</p>}
@@ -148,7 +159,7 @@ export function MembershipCheckout({
       <div style={box}>
         {showBillingToggle && (
           <div style={{ marginBottom: 16 }}>
-            <p style={{ fontSize: 14, marginBottom: 8 }}>Billing cycle</p>
+            <p style={{ fontSize: 14, marginBottom: 8 }}>{t("forge.membership_checkout.billing_cycle_label")}</p>
             <div style={{ display: "flex", gap: 16 }}>
               {(["month", "year"] as const).map((cycle) => (
                 <label key={cycle} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
@@ -159,7 +170,9 @@ export function MembershipCheckout({
                     onChange={() => checkout.setBillingCycle(cycle)}
                     style={{ accentColor: theme.colors.primary }}
                   />
-                  {cycle === "month" ? "Monthly" : "Yearly"}
+                  {cycle === "month"
+                    ? t("forge.membership_checkout.billing_monthly")
+                    : t("forge.membership_checkout.billing_yearly")}
                 </label>
               ))}
             </div>
@@ -168,7 +181,9 @@ export function MembershipCheckout({
 
         {tier.payWhatYouWant && (
           <div style={{ marginBottom: 16 }}>
-            <label style={{ fontSize: 14, display: "block", marginBottom: 8 }}>How much would you like to pay?</label>
+            <label style={{ fontSize: 14, display: "block", marginBottom: 8 }}>
+              {t("forge.membership_checkout.pwyw_label")}
+            </label>
             <input
               type="number"
               min={tier.payWhatYouWantMinimum ?? 0}
@@ -189,9 +204,13 @@ export function MembershipCheckout({
         )}
 
         <div style={{ textAlign: "center", paddingTop: 16, borderTop: `1px solid ${theme.colors.primary}20` }}>
-          <p style={{ fontSize: 14, opacity: 0.75 }}>Total</p>
+          <p style={{ fontSize: 14, opacity: 0.75 }}>{t("forge.membership_checkout.total")}</p>
           <p style={{ fontSize: 28, fontWeight: 800 }}>{fmt(checkout.amount)}</p>
-          <p style={{ fontSize: 14, opacity: 0.75 }}>{checkout.billingCycle === "month" ? "per month" : "per year"}</p>
+          <p style={{ fontSize: 14, opacity: 0.75 }}>
+            {checkout.billingCycle === "month"
+              ? t("forge.membership_checkout.per_month")
+              : t("forge.membership_checkout.per_year")}
+          </p>
           {taxCaption && <p style={{ fontSize: 12, opacity: 0.65, marginTop: 2 }}>{taxCaption}</p>}
         </div>
       </div>
@@ -199,7 +218,7 @@ export function MembershipCheckout({
       {checkout.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{checkout.error}</p>}
 
       <button onClick={() => checkout.subscribe()} disabled={checkout.isProcessing} style={button}>
-        {checkout.isProcessing ? "Processing…" : "Subscribe"}
+        {checkout.isProcessing ? t("forge.membership_checkout.submitting") : t("forge.membership_checkout.submit")}
       </button>
     </div>
   );

package/src/ui/styled/MembershipTiers.tsx

@@ -4,6 +4,7 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { priceTaxCaption } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { useForgeT } from "../../i18n";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
 
@@ -33,27 +34,31 @@ export function MembershipTiers({
   formatAmount,
   checkoutPath = "/i/membership/checkout",
   onSelect,
-  heading = "Membership",
+  heading,
   className,
   style,
 }: MembershipTiersProps) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   // Display-only: inclusive stores caption tier prices as tax-inclusive.
   const pricesIncludeTax = usePricesIncludeTax();
   const taxCaption = priceTaxCaption({ pricesIncludeTax });
   const { data: tiers, isLoading } = useGetMembershipTiers();
+  // `null` still means "no heading"; anything else falls back to the default.
+  const resolvedHeading = heading === null ? null : (heading ?? t("forge.membership_tiers.heading"));
+  const freeLabel = t("forge.membership_tiers.price_free");
 
   if (isLoading) return <Loading fullPage />;
-  if (!tiers?.length) return <p style={{ color: t.text }}>No membership tiers available.</p>;
+  if (!tiers?.length) return <p style={{ color: tokens.text }}>{t("forge.membership_tiers.empty_title")}</p>;
 
   const priceLabel = (tier: MembershipTier) => {
     if (tier.payWhatYouWant) {
-      return `Pay what you want from ${fmt(tier.payWhatYouWantMinimum ?? 0)}/mo`;
+      return t("forge.membership_tiers.price_pwyw", { amount: fmt(tier.payWhatYouWantMinimum ?? 0) });
     }
-    if (tier.priceMonthly) return `${fmt(tier.priceMonthly)}/mo`;
-    if (tier.priceYearly) return `${fmt(tier.priceYearly)}/yr`;
-    return "Free";
+    if (tier.priceMonthly) return t("forge.membership_tiers.price_monthly", { amount: fmt(tier.priceMonthly) });
+    if (tier.priceYearly) return t("forge.membership_tiers.price_yearly", { amount: fmt(tier.priceYearly) });
+    return freeLabel;
   };
 
   const select = (tier: MembershipTier) => {
@@ -65,8 +70,12 @@ export function MembershipTiers({
   };
 
   return (
-    <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
-      {heading && <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24, fontFamily: t.headingFontFamily }}>{heading}</h1>}
+    <div className={className} style={{ color: tokens.text, fontFamily: tokens.fontFamily, ...style }}>
+      {resolvedHeading && (
+        <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24, fontFamily: tokens.headingFontFamily }}>
+          {resolvedHeading}
+        </h1>
+      )}
       <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center" }}>
         {tiers.map((tier) => (
           <div
@@ -75,20 +84,20 @@ export function MembershipTiers({
               flex: "1 1 260px",
               maxWidth: 340,
               width: "100%",
-              background: t.surface,
-              border: `1px solid ${t.primary}30`,
-              borderRadius: t.cornerRadius,
+              background: tokens.surface,
+              border: `1px solid ${tokens.primary}30`,
+              borderRadius: tokens.cornerRadius,
               padding: 24,
               display: "flex",
               flexDirection: "column",
               gap: 12,
             }}
           >
-            <h2 style={{ fontSize: 22, fontWeight: 700, fontFamily: t.headingFontFamily }}>{tier.name}</h2>
-            <div style={{ fontSize: 24, fontWeight: 800, color: t.primary }}>
+            <h2 style={{ fontSize: 22, fontWeight: 700, fontFamily: tokens.headingFontFamily }}>{tier.name}</h2>
+            <div style={{ fontSize: 24, fontWeight: 800, color: tokens.primary }}>
               {priceLabel(tier)}
-              {taxCaption && priceLabel(tier) !== "Free" && (
-                <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: t.text, opacity: 0.65 }}>
+              {taxCaption && priceLabel(tier) !== freeLabel && (
+                <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: tokens.text, opacity: 0.65 }}>
                   {taxCaption}
                 </span>
               )}
@@ -98,14 +107,14 @@ export function MembershipTiers({
               <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                 {tier.benefits.map((b) => (
                   <li key={b.id} style={{ display: "flex", gap: 8, opacity: 0.85 }}>
-                    <span style={{ color: t.primary }}>✓</span>
+                    <span style={{ color: tokens.primary }}>✓</span>
                     {b.title}
                   </li>
                 ))}
               </ul>
             )}
             <Button fullWidth style={{ marginTop: "auto" }} onClick={() => select(tier)}>
-              Select
+              {t("forge.membership_tiers.select")}
             </Button>
           </div>
         ))}