@tribe-nest/forge 3.26.0 → 3.29.0

package/src/ui/styled/CheckoutConfirmation.tsx

@@ -21,6 +21,7 @@ import { useCart } from "../../contexts/CartContext";
 import { usePublicAuth } from "../../contexts/PublicAuthContext";
 import { OrderStatus, ProductDeliveryType, type IPublicOrder } from "../../types/models";
 import { CartLineOptions } from "./CartLineOptions";
+import { useForgeT } from "../../i18n";
 
 export interface CheckoutConfirmationProps {
   orderId?: string;
@@ -60,10 +61,10 @@ const PAID_STATES = new Set<OrderStatus>([
 const FAILED_STATES = new Set<OrderStatus>([OrderStatus.PaymentFailed, OrderStatus.Failed, OrderStatus.Cancelled]);
 const PENDING_STATES = new Set<OrderStatus>([OrderStatus.InitiatedPayment, OrderStatus.Processing]);
 
-const DELIVERY_LABEL: Record<ProductDeliveryType, string> = {
-  [ProductDeliveryType.Physical]: "Physical delivery",
-  [ProductDeliveryType.Service]: "Service delivery",
-  [ProductDeliveryType.Digital]: "Digital delivery",
+const DELIVERY_LABEL_KEY: Record<ProductDeliveryType, string> = {
+  [ProductDeliveryType.Physical]: "forge.checkout_confirmation.delivery_physical",
+  [ProductDeliveryType.Service]: "forge.checkout_confirmation.delivery_service",
+  [ProductDeliveryType.Digital]: "forge.checkout_confirmation.delivery_digital",
 };
 
 /** Short date only, e.g. "Jun 30, 2026". */
@@ -130,6 +131,7 @@ function OrderConfirmation({
   accountPath = "/i/account",
   checkoutPath = "/i/checkout",
 }: CheckoutConfirmationProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const formatAmt = useAmountFormatter(formatAmount);
   const text = theme.colors.text;
@@ -165,7 +167,7 @@ function OrderConfirmation({
         <div style={{ textAlign: "center", color: alpha(text, 0.75) }}>
           <Loader2 size={40} color={primary} style={{ animation: "cc-spin 1s linear infinite" }} />
           <style>{"@keyframes cc-spin{to{transform:rotate(360deg)}}"}</style>
-          <p style={{ marginTop: 16, fontSize: 15 }}>Confirming your payment…</p>
+          <p style={{ marginTop: 16, fontSize: 15 }}>{t("forge.checkout_confirmation.confirming")}</p>
         </div>
       </ConfirmationStage>
     );
@@ -178,14 +180,14 @@ function OrderConfirmation({
         <ConfirmationCard width={440}>
           <div style={{ padding: "40px 30px", textAlign: "center" }}>
             <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
-            <h1 style={{ fontSize: 24, fontWeight: 800, margin: "22px 0 8px" }}>Order not found</h1>
+            <h1 style={{ fontSize: 24, fontWeight: 800, margin: "22px 0 8px" }}>{t("forge.checkout_confirmation.not_found_title")}</h1>
             <p style={{ fontSize: 15, color: alpha(text, 0.7), margin: "0 0 24px" }}>
               {isError
-                ? "We couldn’t confirm this order. If you were charged, your receipt will still arrive by email."
-                : "This confirmation link looks incomplete or has expired."}
+                ? t("forge.checkout_confirmation.not_found_error_body")
+                : t("forge.checkout_confirmation.not_found_body")}
             </p>
             <Action href={explorePath} primary={primary}>
-              Continue shopping <ArrowRight size={16} />
+              {t("forge.checkout_confirmation.continue_shopping")} <ArrowRight size={16} />
             </Action>
           </div>
         </ConfirmationCard>
@@ -207,18 +209,28 @@ function OrderConfirmation({
   const discount = order?.discountAmount || 0;
   const email = order?.customerEmail;
 
-  const eyebrow = isPaid ? "Order confirmed" : isFailed ? "Payment failed" : "Payment processing";
+  const eyebrow = isPaid
+    ? t("forge.checkout_confirmation.eyebrow_paid")
+    : isFailed
+      ? t("forge.checkout_confirmation.eyebrow_failed")
+      : t("forge.checkout_confirmation.eyebrow_pending");
   const eyebrowColor = isPaid ? primary : isFailed ? "#f59e0b" : primary;
-  const heading = isPaid ? "Thank you! 🛍" : isFailed ? "Payment not completed" : gaveUp ? "Still processing" : "Confirming your payment…";
+  const heading = isPaid
+    ? t("forge.checkout_confirmation.heading_paid")
+    : isFailed
+      ? t("forge.checkout_confirmation.heading_failed")
+      : gaveUp
+        ? t("forge.checkout_confirmation.heading_still_processing")
+        : t("forge.checkout_confirmation.confirming");
   const sub = isPaid
     ? email
-      ? `We’ve emailed your receipt to ${email}.`
-      : "Your receipt is on its way."
+      ? t("forge.checkout_confirmation.receipt_emailed", { email })
+      : t("forge.checkout_confirmation.receipt_on_way")
     : isFailed
-      ? "Your payment didn’t go through, so you haven’t been charged. You can try again."
+      ? t("forge.checkout_confirmation.failed_body")
       : gaveUp
-        ? "This is taking longer than usual. We’ll email your receipt as soon as it clears."
-        : "Hang tight: this only takes a few seconds.";
+        ? t("forge.checkout_confirmation.slow_body")
+        : t("forge.checkout_confirmation.pending_body");
 
   return (
     <ConfirmationStage>
@@ -284,17 +296,21 @@ function OrderConfirmation({
         {isFailed ? (
           <div className="cf-rise" style={{ padding: "6px 30px 34px", animationDelay: "0.4s" }}>
             <Action href={checkoutPath} primary={primary}>
-              Return to checkout <ArrowRight size={16} />
+              {t("forge.checkout_confirmation.return_to_checkout")} <ArrowRight size={16} />
             </Action>
           </div>
         ) : (
           <>
             {/* ── Order items (grouped by delivery) ── */}
             <div className="cf-rise" style={{ padding: "0 30px 8px", animationDelay: "0.42s" }}>
-              <SectionLabel icon={<ShoppingBag size={16} color={primary} />} text="Your order" muted={alpha(text, 0.55)} />
+              <SectionLabel
+                icon={<ShoppingBag size={16} color={primary} />}
+                text={t("forge.checkout_confirmation.order_section")}
+                muted={alpha(text, 0.55)}
+              />
               {groups.length === 0 ? (
                 <p style={{ textAlign: "center", padding: "12px 0", color: alpha(text, 0.6), fontSize: 14 }}>
-                  No items in this order.
+                  {t("forge.checkout_confirmation.no_items")}
                 </p>
               ) : (
                 <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
@@ -308,24 +324,32 @@ function OrderConfirmation({
             {/* ── Totals ── */}
             <div className="cf-rise" style={{ padding: "12px 30px 0", animationDelay: "0.48s" }}>
               <div style={{ paddingTop: 14, borderTop: `1px solid ${alpha(text, 0.1)}`, display: "flex", flexDirection: "column", gap: 6 }}>
-                <SummaryLine label="Subtotal" value={fmt(subtotal)} muted={alpha(text, 0.6)} />
-                {shipping > 0 && <SummaryLine label="Shipping" value={fmt(shipping)} muted={alpha(text, 0.6)} />}
-                {discount > 0 && <SummaryLine label="Discount" value={`−${fmt(discount)}`} muted={alpha(text, 0.6)} />}
+                <SummaryLine label={t("forge.checkout_confirmation.subtotal")} value={fmt(subtotal)} muted={alpha(text, 0.6)} />
+                {shipping > 0 && (
+                  <SummaryLine label={t("forge.checkout_confirmation.shipping")} value={fmt(shipping)} muted={alpha(text, 0.6)} />
+                )}
+                {discount > 0 && (
+                  <SummaryLine label={t("forge.checkout_confirmation.discount")} value={`−${fmt(discount)}`} muted={alpha(text, 0.6)} />
+                )}
                 {Number(order?.taxAmount || 0) > 0 && !order?.taxInclusive && (
                   <SummaryLine
-                    label="Tax"
+                    label={t("forge.checkout_confirmation.tax")}
                     value={formatAmt(Number(order?.taxAmount), order?.chargedCurrency || currency)}
                     muted={alpha(text, 0.6)}
                   />
                 )}
               </div>
               <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12 }}>
-                <span style={{ fontWeight: 700 }}>Total {isPaid ? "paid" : ""}</span>
+                <span style={{ fontWeight: 700 }}>
+                  {isPaid ? t("forge.checkout_confirmation.total_paid") : t("forge.checkout_confirmation.total")}
+                </span>
                 <span style={{ fontSize: 20, fontWeight: 800, color: primary }}>{totalDisplay}</span>
               </div>
               {Number(order?.taxAmount || 0) > 0 && order?.taxInclusive && (
                 <div style={{ textAlign: "right", fontSize: 12, color: alpha(text, 0.6), marginTop: 4 }}>
-                  Includes {formatAmt(Number(order?.taxAmount), order?.chargedCurrency || currency)} tax
+                  {t("forge.checkout_confirmation.tax_inclusive_note", {
+                    amount: formatAmt(Number(order?.taxAmount), order?.chargedCurrency || currency),
+                  })}
                 </div>
               )}
             </div>
@@ -337,22 +361,28 @@ function OrderConfirmation({
             {/* ── Details ── */}
             <div className="cf-rise" style={{ padding: "20px 30px 8px", animationDelay: "0.54s" }}>
               <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 10, columnGap: 16, margin: 0 }}>
-                <ConfirmationRow label="Order" value={`#${order!.id.slice(0, 8).toUpperCase()}`} mono />
-                <ConfirmationRow label="Date" value={formatDate(order!.createdAt)} />
-                {order!.customerName && <ConfirmationRow label="Name" value={order!.customerName} />}
-                {email && <ConfirmationRow label="Email" value={email} />}
+                <ConfirmationRow
+                  label={t("forge.checkout_confirmation.row_order")}
+                  value={`#${order!.id.slice(0, 8).toUpperCase()}`}
+                  mono
+                />
+                <ConfirmationRow label={t("forge.checkout_confirmation.row_date")} value={formatDate(order!.createdAt)} />
+                {order!.customerName && (
+                  <ConfirmationRow label={t("forge.checkout_confirmation.row_name")} value={order!.customerName} />
+                )}
+                {email && <ConfirmationRow label={t("forge.checkout_confirmation.row_email")} value={email} />}
               </dl>
             </div>
 
             {/* ── Actions ── */}
             <div className="cf-rise" style={{ padding: "22px 30px 30px", display: "flex", flexDirection: "column", gap: 10, animationDelay: "0.6s" }}>
               <Action href={explorePath} primary={primary}>
-                Continue shopping <ArrowRight size={16} />
+                {t("forge.checkout_confirmation.continue_shopping")} <ArrowRight size={16} />
               </Action>
               {/* Orders live behind auth — only offer the link to signed-in buyers. */}
               {user && (
                 <Action href={accountPath} primary={primary} ghost>
-                  View your orders
+                  {t("forge.checkout_confirmation.view_orders")}
                 </Action>
               )}
             </div>
@@ -381,15 +411,16 @@ function GroupBlock({
   fmt: (n: number) => string;
   theme: ReturnType<typeof useForgeTheme>;
 }) {
+  const t = useForgeT();
   const text = theme.colors.text;
   const primary = theme.colors.primary;
   return (
     <div style={{ borderRadius: theme.cornerRadius, border: `1px solid ${alpha(primary, 0.16)}`, background: alpha(primary, 0.04), overflow: "hidden" }}>
       {/* group header */}
       <div style={{ padding: "10px 14px", borderBottom: `1px solid ${alpha(primary, 0.12)}` }}>
-        <div style={{ fontSize: 13, fontWeight: 700, color: text }}>{DELIVERY_LABEL[group.deliveryType]}</div>
+        <div style={{ fontSize: 13, fontWeight: 700, color: text }}>{t(DELIVERY_LABEL_KEY[group.deliveryType])}</div>
         <div style={{ fontSize: 12, color: alpha(text, 0.65), marginTop: 2 }}>
-          To {group.recipientName} ({group.recipientEmail})
+          {t("forge.checkout_confirmation.recipient", { name: group.recipientName, email: group.recipientEmail })}
         </div>
         {group.recipientMessage && (
           <div style={{ fontSize: 12, color: alpha(text, 0.6), marginTop: 2, fontStyle: "italic" }}>“{group.recipientMessage}”</div>
@@ -418,14 +449,14 @@ function GroupBlock({
                 {item.title}
               </div>
               <div style={{ fontSize: 12, color: alpha(text, 0.6), marginTop: 2 }}>
-                {fmt(item.price)} · Qty {item.quantity}
+                {t("forge.checkout_confirmation.item_price_qty", { price: fmt(item.price), quantity: item.quantity })}
               </div>
               {/* Which version — the receipt has to say, or a buyer cannot check
                   they were charged for the one they picked. */}
               <CartLineOptions item={item} accent={primary} size="small" />
               {item.isGift && (
                 <div style={{ fontSize: 12, marginTop: 4, color: primary }}>
-                  🎁 Gift for {item.recipientName} ({item.recipientEmail})
+                  {t("forge.checkout_confirmation.gift_for", { name: item.recipientName ?? "", email: item.recipientEmail ?? "" })}
                 </div>
               )}
               {item.recipientMessage && (

package/src/ui/styled/CoachingBooking.tsx

@@ -2,6 +2,7 @@ import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useStat
 import { Calendar, ChevronLeft, ChevronRight, Clock, X } from "lucide-react";
 import type { BookingSlot, CoachingProduct } from "../../types/models";
 import { useCoachingBooking } from "../headless/coaching/useCoachingBooking";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
@@ -56,12 +57,13 @@ const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString
  */
 export function CoachingBooking({
   slug,
-  triggerText = "Select Availability",
+  triggerText,
   formatAmount,
   renderPayment,
   finalisePath,
   onComplete,
 }: CoachingBookingProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const registered = usePaymentRenderer();
   const fmt = useAmountFormatter(formatAmount);
@@ -72,7 +74,7 @@ export function CoachingBooking({
 
   const tryClose = (next: boolean) => {
     if (!next && c.step !== "slot") {
-      if (typeof window !== "undefined" && !window.confirm("Are you sure you want to leave checkout?")) return;
+      if (typeof window !== "undefined" && !window.confirm(t("forge.coaching_booking.confirm_leave"))) return;
       // Release the held slot so it's not locked until the timer runs out.
       void c.releaseReservation();
     }
@@ -82,7 +84,7 @@ export function CoachingBooking({
   return (
     <DialogRoot open={open} onOpenChange={tryClose}>
       <DialogTrigger asChild>
-        <button style={triggerButtonStyle(theme)}>{triggerText}</button>
+        <button style={triggerButtonStyle(theme)}>{triggerText ?? t("forge.coaching_booking.trigger")}</button>
       </DialogTrigger>
       <DialogPortal>
         <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
@@ -106,17 +108,17 @@ export function CoachingBooking({
         >
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
             <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>
-              {c.product?.title ?? "Book a session"}
+              {c.product?.title ?? t("forge.coaching_booking.title")}
             </DialogTitle>
             <DialogClose asChild>
-              <button aria-label="Close" style={closeButtonStyle(theme)}>
+              <button aria-label={t("forge.coaching_booking.aria_close")} style={closeButtonStyle(theme)}>
                 <X size={18} />
               </button>
             </DialogClose>
           </div>
 
           {c.isLoading && <Loading />}
-          {!c.isLoading && !c.product && <p style={{ marginTop: 8 }}>Coaching session not found.</p>}
+          {!c.isLoading && !c.product && <p style={{ marginTop: 8 }}>{t("forge.coaching_booking.not_found")}</p>}
           {c.product && <CoachingBookingBody c={c} product={c.product} fmt={fmt} renderPayment={renderPay} />}
         </DialogContent>
       </DialogPortal>
@@ -156,6 +158,7 @@ function CoachingBookingBody({
 // (keeps the Stripe form in the payment step from re-mounting). Fires `onExpire`
 // exactly once when the hold runs out.
 function ReservationTimer({ expiresAt, onExpire }: { expiresAt: number | null; onExpire: () => void }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const [now, setNow] = useState(() => Date.now());
   const firedRef = useRef(false);
@@ -202,7 +205,9 @@ function ReservationTimer({ expiresAt, onExpire }: { expiresAt: number | null; o
       }}
     >
       <Clock size={16} style={{ color }} />
-      <span style={{ fontWeight: 600, fontSize: 14, color }}>Time remaining: {mmss}</span>
+      <span style={{ fontWeight: 600, fontSize: 14, color }}>
+        {t("forge.coaching_booking.time_remaining", { time: mmss })}
+      </span>
     </div>
   );
 }
@@ -250,6 +255,7 @@ function Progress({ current }: { current: number }) {
 
 // ── Step 1: week navigation + slot selection (reserve happens on Continue) ─────
 function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; fmt: (n: number) => string }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const slots: BookingSlot[] = c.availability.data ?? [];
 
@@ -284,7 +290,10 @@ function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; f
     }
   })();
 
-  const weekLabel = `${c.weekStart.toLocaleDateString("en-US", { month: "short", day: "numeric" })} to ${c.weekEnd.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
+  const weekLabel = t("forge.coaching_booking.week_range", {
+    start: c.weekStart.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+    end: c.weekEnd.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }),
+  });
   const navButton = (disabled: boolean): CSSProperties => ({
     padding: 8,
     borderRadius: theme.cornerRadius,
@@ -299,28 +308,31 @@ function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; f
 
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 6 }}>Select Availability</h2>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 6 }}>{t("forge.coaching_booking.slot_title")}</h2>
       <p style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: a(theme.colors.text, 0.6), margin: "0 0 16px" }}>
-        <Clock size={14} /> Times shown in your timezone{tzAbbr ? ` (${tzAbbr})` : ""}
+        <Clock size={14} />{" "}
+        {tzAbbr
+          ? t("forge.coaching_booking.timezone_note_named", { timezone: tzAbbr })
+          : t("forge.coaching_booking.timezone_note")}
       </p>
 
       {/* Week navigation */}
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
         <span style={{ fontSize: 14, color: a(theme.colors.text, 0.6) }}>{weekLabel}</span>
         <div style={{ display: "flex", gap: 8 }}>
-          <button aria-label="Previous week" onClick={c.goPrevWeek} disabled={!c.canGoPrevWeek} style={navButton(!c.canGoPrevWeek)}>
+          <button aria-label={t("forge.coaching_booking.aria_prev_week")} onClick={c.goPrevWeek} disabled={!c.canGoPrevWeek} style={navButton(!c.canGoPrevWeek)}>
             <ChevronLeft size={16} />
           </button>
-          <button aria-label="Next week" onClick={c.goNextWeek} style={navButton(false)}>
+          <button aria-label={t("forge.coaching_booking.aria_next_week")} onClick={c.goNextWeek} style={navButton(false)}>
             <ChevronRight size={16} />
           </button>
         </div>
       </div>
 
       {c.availability.isLoading ? (
-        <Loading label="Loading available slots…" />
+        <Loading label={t("forge.coaching_booking.loading_slots")} />
       ) : grouped.length === 0 ? (
-        <p style={{ opacity: 0.7 }}>No available slots for this week.</p>
+        <p style={{ opacity: 0.7 }}>{t("forge.coaching_booking.no_slots")}</p>
       ) : (
         <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
           {grouped.map(([dateKey, daySlots]) => {
@@ -376,7 +388,7 @@ function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; f
         product={product}
         fmt={fmt}
         onNext={c.reserveSelected}
-        nextLabel={c.isProcessing ? "Reserving…" : "Continue"}
+        nextLabel={c.isProcessing ? t("forge.coaching_booking.reserving") : t("forge.coaching_booking.continue")}
         nextDisabled={!c.selectedSlotId || c.isProcessing}
       />
     </div>
@@ -385,6 +397,7 @@ function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; f
 
 // ── Step 2: buyer details + questionnaire ─────────────────────────────────────
 function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; fmt: (n: number) => string }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const [confirmEmail, setConfirmEmail] = useState("");
   const [answers, setAnswers] = useState<Record<string, string>>({});
@@ -400,11 +413,13 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
 
   const onContinue = () => {
     setLocalError(null);
-    if (!c.firstName.trim() || !c.lastName.trim()) return setLocalError("Please enter your name.");
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email)) return setLocalError("Please enter a valid email.");
-    if (c.email !== confirmEmail) return setLocalError("Emails do not match.");
+    if (!c.firstName.trim() || !c.lastName.trim()) return setLocalError(t("forge.coaching_booking.error_name_required"));
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email))
+      return setLocalError(t("forge.coaching_booking.error_email_invalid"));
+    if (c.email !== confirmEmail) return setLocalError(t("forge.coaching_booking.error_email_mismatch"));
     for (const q of questions) {
-      if (!q.optional && !(answers[q.id] ?? "").trim()) return setLocalError(`Please answer: ${q.question}`);
+      if (!q.optional && !(answers[q.id] ?? "").trim())
+        return setLocalError(t("forge.coaching_booking.error_answer_required", { question: q.question }));
     }
     c.continueToPayment();
   };
@@ -413,22 +428,24 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
 
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>Contact Information</h2>
-      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>
-        Please provide your contact information for the booking.
-      </p>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>{t("forge.coaching_booking.details_title")}</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.coaching_booking.details_subtitle")}</p>
       <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
         <div style={{ display: "flex", gap: 8 }}>
-          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle(theme)} />
-          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle(theme)} />
+          <input placeholder={t("forge.coaching_booking.first_name_placeholder")} value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle(theme)} />
+          <input placeholder={t("forge.coaching_booking.last_name_placeholder")} value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle(theme)} />
         </div>
         <div>
-          <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle(theme)} />
-          {c.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email) && <FieldError>Please enter a valid email address</FieldError>}
+          <input placeholder={t("forge.coaching_booking.email_placeholder")} type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle(theme)} />
+          {c.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email) && (
+            <FieldError>{t("forge.coaching_booking.email_invalid_hint")}</FieldError>
+          )}
         </div>
         <div>
-          <input placeholder="Confirm email" type="email" value={confirmEmail} onChange={(e) => setConfirmEmail(e.target.value)} style={inputStyle(theme)} />
-          {confirmEmail && c.email !== confirmEmail && <FieldError>Email addresses do not match</FieldError>}
+          <input placeholder={t("forge.coaching_booking.confirm_email_placeholder")} type="email" value={confirmEmail} onChange={(e) => setConfirmEmail(e.target.value)} style={inputStyle(theme)} />
+          {confirmEmail && c.email !== confirmEmail && (
+            <FieldError>{t("forge.coaching_booking.email_mismatch_hint")}</FieldError>
+          )}
         </div>
 
         {questions.map((q) => {
@@ -441,7 +458,7 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
               </span>
               {q.type === "select" && q.options && q.options.length > 0 ? (
                 <select value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)}>
-                  <option value="">Select…</option>
+                  <option value="">{t("forge.coaching_booking.select_placeholder")}</option>
                   {q.options.map((opt) => (
                     <option key={opt} value={opt}>
                       {opt}
@@ -453,7 +470,7 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
               ) : (
                 <input value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)} />
               )}
-              {missing && <FieldError>This field is required</FieldError>}
+              {missing && <FieldError>{t("forge.coaching_booking.field_required")}</FieldError>}
             </label>
           );
         })}
@@ -475,7 +492,7 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
         <CancellationTerms terms={c.cancellation} />
 
         <p style={{ fontSize: 12, color: a(theme.colors.text, 0.6), marginTop: 4 }}>
-          By continuing, you agree to receive booking confirmations and important updates about your session via email.
+          {t("forge.coaching_booking.consent")}
         </p>
       </div>
       <ActionBar
@@ -484,7 +501,13 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
         fmt={fmt}
         onBack={() => void c.releaseReservation()}
         onNext={onContinue}
-        nextLabel={c.isProcessing ? "Processing…" : isFree ? "Confirm Booking" : "Continue to payment"}
+        nextLabel={
+          c.isProcessing
+            ? t("forge.coaching_booking.processing")
+            : isFree
+              ? t("forge.coaching_booking.confirm_booking")
+              : t("forge.coaching_booking.continue_to_payment")
+        }
         nextDisabled={c.isProcessing}
       />
     </div>
@@ -507,6 +530,7 @@ function PaymentStep({
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const total = c.totalAmount ?? Number(product.price);
   // Authoritative tax quote from start-payment — the charged total already
@@ -514,8 +538,8 @@ function PaymentStep({
   const taxSummary = summarizeTaxQuote(c.taxQuote);
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Payment</h2>
-      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>Complete your purchase to secure your booking.</p>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>{t("forge.coaching_booking.payment_title")}</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.coaching_booking.payment_subtitle")}</p>
       <div
         style={{
           padding: 20,
@@ -531,12 +555,14 @@ function PaymentStep({
           fmt={fmt}
         />
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <span style={{ fontSize: 16 }}>Total Amount</span>
+        <span style={{ fontSize: 16 }}>{t("forge.coaching_booking.total_amount")}</span>
         <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary, textAlign: "right" }}>
           {fmt(total)}
           {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.coaching_booking.tax_included", { amount: taxSummary.formattedTax })}
             </span>
           )}
         </span>
@@ -550,19 +576,19 @@ function PaymentStep({
           so it is checked BEFORE the "not configured" branch. */}
       {c.isPaystack ? (
         c.canOpenPaystack ? (
-          <PaystackPayButton onPay={c.openPaystackCheckout} label={`Pay ${fmt(total)}`} />
+          <PaystackPayButton onPay={c.openPaystackCheckout} label={t("forge.coaching_booking.pay", { amount: fmt(total) })} />
         ) : (
-          <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+          <p style={{ opacity: 0.7 }}>{t("forge.coaching_booking.preparing_payment")}</p>
         )
       ) : !renderPayment ? (
-        <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
+        <p style={{ color: "#ef4444", fontSize: 14 }}>{t("forge.coaching_booking.payment_not_configured")}</p>
       ) : c.clientSecret ? (
         renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: total, mode: "redirect" })
       ) : (
-        <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+        <p style={{ opacity: 0.7 }}>{t("forge.coaching_booking.preparing_payment")}</p>
       )}
       <button onClick={() => c.setStep("details")} style={{ ...secondaryButtonStyle(theme), marginTop: 16 }}>
-        Back
+        {t("forge.coaching_booking.back")}
       </button>
     </div>
   );
@@ -586,6 +612,7 @@ function ActionBar({
   nextLabel?: string;
   nextDisabled?: boolean;
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const total = c.totalAmount ?? Number(product.price);
   return (
@@ -605,14 +632,14 @@ function ActionBar({
           fmt={fmt}
         />
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <span style={{ fontWeight: 600 }}>Total</span>
+          <span style={{ fontWeight: 600 }}>{t("forge.coaching_booking.total")}</span>
           <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(total)}</span>
         </div>
       </div>
       {(onBack || onNext) && (
         <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
           <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>
-            Back
+            {t("forge.coaching_booking.back")}
           </button>
           {onNext && (
             <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>