@tribe-nest/forge 3.25.0 → 3.29.0

package/src/ui/styled/EventTickets.tsx

@@ -2,6 +2,7 @@ import { type CSSProperties, type ReactNode, useEffect, useMemo, useState } from
 import { AlertCircle, CalendarClock, Clock, KeyRound, X } from "lucide-react";
 import type { IEvent, ITicket } from "../../types/models";
 import { useEventCheckout } from "../headless/event/useEventCheckout";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay, summarizeTaxQuote } from "../format/PriceDisplay";
@@ -16,6 +17,7 @@ import {
   ticketSeatState,
 } from "../format/ticketAvailability";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { usePageActions } from "../../data/queries/usePageActions";
 import { Loading } from "./Loading";
 import { PaystackPayButton } from "./PaystackPayButton";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
@@ -41,7 +43,7 @@ export interface EventTicketsProps {
   triggerText?: string;
   /** Format a numeric amount for display. */
   formatAmount?: (amount: number) => string;
-  /** Optional payment renderer — falls back to a registered <ForgePaymentProvider>. */
+  /** Optional payment renderer. Falls back to a registered <ForgePaymentProvider>. */
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
   /** Stripe return URL for a PAID purchase. Default `/i/events/:slug/finalise`. */
   finalisePath?: (slug: string, orderId: string) => string;
@@ -52,21 +54,25 @@ export interface EventTicketsProps {
    * code sites mount theirs under `/i`. The sign-in returns them here.
    */
   loginPath?: string;
-  /** Where a members-only tier sends a signed-in NON-member — the tier listing. */
+  /** Where a members-only tier sends a signed-in NON-member: the tier listing. */
   membershipPath?: string;
 }
 
 /** 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");
 
 /**
- * Themed event ticket purchase — a "Buy tickets" trigger + modal running the
+ * Themed event ticket purchase: a "Buy tickets" trigger + modal running the
  * three-step flow (tickets → details → payment) on `useEventCheckout`. Port of
  * the client app's EventTickets modal, styled from `ForgeThemeProvider`.
  */
 export function EventTickets({
   slug,
-  triggerText = "Buy tickets",
+  triggerText,
   formatAmount,
   renderPayment,
   finalisePath,
@@ -74,17 +80,32 @@ export function EventTickets({
   loginPath,
   membershipPath,
 }: EventTicketsProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const registered = usePaymentRenderer();
   const fmt = useAmountFormatter(formatAmount);
   const c = useEventCheckout(slug, { finalisePath, onComplete });
   const renderPay = renderPayment ?? registered ?? undefined;
 
+  // Does this page sell add-ons for this event? Same query key as the page's
+  // own <PageActions> mount, so this is a cache read, not a second request.
+  // When add-ons exist, the PRIMARY exit from ticket selection is the cart
+  // (that's what unlocks the add-on grid); direct payment stays the happy
+  // path only on pages without add-ons.
+  const { data: pageActionsData } = usePageActions("event_detail", c.event?.id);
+  const hasAddons = useMemo(
+    () =>
+      (pageActionsData?.actions ?? []).some(
+        (action) => action.type === "product_cards" && Boolean((action.config as Record<string, unknown>)?.isAddon),
+      ),
+    [pageActionsData],
+  );
+
   const [open, setOpen] = useState(false);
 
   const tryClose = (next: boolean) => {
     if (!next && c.step !== "tickets" && typeof window !== "undefined") {
-      if (!window.confirm("Are you sure you want to leave checkout?")) return;
+      if (!window.confirm(t("forge.event_tickets.leave_confirm"))) return;
     }
     setOpen(next);
   };
@@ -92,7 +113,7 @@ export function EventTickets({
   return (
     <DialogRoot open={open} onOpenChange={tryClose}>
       <DialogTrigger asChild>
-        <button style={triggerButtonStyle(theme)}>{triggerText}</button>
+        <button style={triggerButtonStyle(theme)}>{triggerText ?? t("forge.event_tickets.trigger")}</button>
       </DialogTrigger>
       <DialogPortal>
         <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
@@ -115,16 +136,18 @@ export function EventTickets({
           aria-describedby={undefined}
         >
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
-            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>{c.event?.title ?? "Tickets"}</DialogTitle>
+            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>
+              {c.event?.title ?? t("forge.event_tickets.title")}
+            </DialogTitle>
             <DialogClose asChild>
-              <button aria-label="Close" style={closeButtonStyle(theme)}>
+              <button aria-label={t("forge.event_tickets.aria_close")} style={closeButtonStyle(theme)}>
                 <X size={18} />
               </button>
             </DialogClose>
           </div>
 
           {c.isLoading && <Loading />}
-          {!c.isLoading && !c.event && <p style={{ marginTop: 8 }}>Event not found.</p>}
+          {!c.isLoading && !c.event && <p style={{ marginTop: 8 }}>{t("forge.event_tickets.not_found")}</p>}
           {c.event && (
             <EventTicketsBody
               c={c}
@@ -133,9 +156,20 @@ export function EventTickets({
               renderPayment={renderPay}
               loginPath={loginPath}
               membershipPath={membershipPath}
-              // Selection is safe in the cart now — close so the buyer can go
-              // browse the add-ons.
-              onAddedToCart={() => setOpen(false)}
+              hasAddons={hasAddons}
+              // Selection is safe in the cart now: close, and bring the
+              // freshly unlocked add-on grid into view so the buyer lands on
+              // the next step instead of wherever they left the page.
+              onAddedToCart={() => {
+                setOpen(false);
+                if (typeof document !== "undefined") {
+                  setTimeout(() => {
+                    document
+                      .querySelector('[data-testid="addons-block"]')
+                      ?.scrollIntoView({ behavior: "smooth", block: "center" });
+                  }, 100);
+                }
+              }}
             />
           )}
         </DialogContent>
@@ -152,6 +186,7 @@ function EventTicketsBody({
   fmt,
   renderPayment,
   onAddedToCart,
+  hasAddons,
   loginPath,
   membershipPath,
 }: {
@@ -160,6 +195,7 @@ function EventTicketsBody({
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
   onAddedToCart?: () => void;
+  hasAddons?: boolean;
   loginPath?: string;
   membershipPath?: string;
 }) {
@@ -173,6 +209,7 @@ function EventTicketsBody({
           event={event}
           fmt={fmt}
           onAddedToCart={onAddedToCart}
+          hasAddons={hasAddons}
           loginPath={loginPath}
           membershipPath={membershipPath}
         />
@@ -232,6 +269,7 @@ function TicketStep({
   event,
   fmt,
   onAddedToCart,
+  hasAddons,
   loginPath,
   membershipPath,
 }: {
@@ -239,9 +277,11 @@ function TicketStep({
   event: IEvent;
   fmt: (n: number) => string;
   onAddedToCart?: () => void;
+  hasAddons?: boolean;
   loginPath?: string;
   membershipPath?: string;
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   // Inclusive stores caption ticket prices as tax-inclusive (display only).
   const pricesIncludeTax = usePricesIncludeTax();
@@ -255,21 +295,55 @@ function TicketStep({
   const urgency = (expiresAt?: string) => {
     if (!expiresAt) return null;
     const diff = new Date(expiresAt).getTime() - now;
-    if (diff <= 0) return { expired: true, color: "#ef4444", alert: true, message: "This ticket has expired" };
+    if (diff <= 0)
+      return { expired: true, color: "#ef4444", alert: true, message: t("forge.event_tickets.expired_badge") };
     const hours = Math.floor(diff / 3_600_000);
     const minutes = Math.floor((diff % 3_600_000) / 60_000);
     const totalMinutes = hours * 60 + minutes;
-    if (totalMinutes < 30) return { expired: false, color: "#dc2626", alert: true, message: `⚠️ Only ${minutes} minute${minutes !== 1 ? "s" : ""} left!` };
-    if (totalMinutes < 60) return { expired: false, color: "#f59e0b", alert: true, message: "⏰ Less than 1 hour remaining!" };
-    if (hours < 6) return { expired: false, color: "#f97316", alert: false, message: `⏰ Expires in ${hours} hour${hours !== 1 ? "s" : ""}!` };
-    if (hours < 24) return { expired: false, color: theme.colors.primary, alert: false, message: `Expires in ${hours} hours` };
+    if (totalMinutes < 30)
+      return {
+        expired: false,
+        color: "#dc2626",
+        alert: true,
+        message:
+          minutes !== 1
+            ? t("forge.event_tickets.minutes_left_other", { count: minutes })
+            : t("forge.event_tickets.minutes_left_one", { count: minutes }),
+      };
+    if (totalMinutes < 60)
+      return { expired: false, color: "#f59e0b", alert: true, message: t("forge.event_tickets.less_than_hour") };
+    if (hours < 6)
+      return {
+        expired: false,
+        color: "#f97316",
+        alert: false,
+        message:
+          hours !== 1
+            ? t("forge.event_tickets.expires_hours_soon_other", { count: hours })
+            : t("forge.event_tickets.expires_hours_soon_one", { count: hours }),
+      };
+    if (hours < 24)
+      return {
+        expired: false,
+        color: theme.colors.primary,
+        alert: false,
+        message: t("forge.event_tickets.expires_hours", { count: hours }),
+      };
     const days = Math.floor(hours / 24);
-    return { expired: false, color: theme.colors.primary, alert: false, message: `Expires in ${days} day${days !== 1 ? "s" : ""}` };
+    return {
+      expired: false,
+      color: theme.colors.primary,
+      alert: false,
+      message:
+        days !== 1
+          ? t("forge.event_tickets.expires_days_other", { count: days })
+          : t("forge.event_tickets.expires_days_one", { count: days }),
+    };
   };
 
   const setQty = (ticket: ITicket, qty: number) => {
     // `maxAddableTickets` subtracts `held` and returns 0 before a scheduled
-    // on-sale — the same two facts the server sells on. Computed off `now` so
+    // on-sale, the same two facts the server sells on. Computed off `now` so
     // the cap opens up on the tick the on-sale time passes, with no reload.
     //
     // 2.6b adds back the seats held for THIS visitor by a waitlist offer.
@@ -283,14 +357,14 @@ function TicketStep({
 
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>Select Tickets</h2>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>{t("forge.event_tickets.select_title")}</h2>
       {/* Renders nothing on an event with no coded tier (1.2). Here as well as
-          on the page because this modal is reachable on its own — from an offer,
-          and from the broadcast-pass prompt — where there is no page-level box.
+          on the page because this modal is reachable on its own (from an offer,
+          and from the broadcast-pass prompt) where there is no page-level box.
           Both read the SAME stored code, so unlocking in one unlocks the other. */}
       <PresaleCodeField presale={c.presale} style={{ marginBottom: 16 }} />
       <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        {event.tickets.length === 0 && <p style={{ opacity: 0.7 }}>No tickets available.</p>}
+        {event.tickets.length === 0 && <p style={{ opacity: 0.7 }}>{t("forge.event_tickets.no_tickets")}</p>}
         {event.tickets.map((ticket) => {
           const selectedQty = c.selectedTickets[ticket.id] ?? 0;
           /**
@@ -299,7 +373,7 @@ function TicketStep({
            * checkouts as available, so a fan in a rush was told "3 left",
            * picked two, filled in the form and was refused at reserve.
            */
-          // 2.6b — the offeree's own reservation is not "somebody else's
+          // 2.6b: the offeree's own reservation is not "somebody else's
           // checkout"; it is the seat they were emailed a deadline for.
           const reserved = c.reservedForYou[ticket.id] ?? 0;
           const seatState = ticketSeatState(ticket, reserved);
@@ -319,8 +393,8 @@ function TicketStep({
           /**
            * A members-only tier the buyer cannot have (S.4).
            *
-           * The event-level gate applies to EVERY tier — "no ticket to this show
-           * sells to a non-member" — so it is folded in here rather than drawn
+           * The event-level gate applies to EVERY tier ("no ticket to this show
+           * sells to a non-member"), so it is folded in here rather than drawn
            * once at the top: a buyer reading one tier row must be able to tell
            * from that row whether they can buy it.
            */
@@ -339,11 +413,13 @@ function TicketStep({
                 opacity: isSoldOut || isExpired ? 0.5 : 1,
               }}
             >
-              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
+              <div
+                style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}
+              >
                 <div style={{ flex: 1 }}>
                   <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 6 }}>{ticket.title}</h3>
                   {/* A hidden tier is only ever on screen because a code
-                      revealed it — so say so. Without the badge, a code that
+                      revealed it, so say so. Without the badge, a code that
                       unlocked a tier the buyer had not seen listed looks like it
                       did nothing. */}
                   {ticket.isHidden && (
@@ -365,7 +441,7 @@ function TicketStep({
                       }}
                     >
                       <KeyRound size={12} />
-                      Presale
+                      {t("forge.event_tickets.presale_badge")}
                     </div>
                   )}
                   {/* A tier that is announced but not yet buyable says WHEN,
@@ -417,23 +493,39 @@ function TicketStep({
                   )}
                   <div style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary }}>
                     {ticket.compareAtPrice != null && Number(ticket.compareAtPrice) > Number(ticket.price) && (
-                      <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 16 }}>
+                      <span
+                        style={{
+                          textDecoration: "line-through",
+                          opacity: 0.6,
+                          marginRight: 8,
+                          fontWeight: 400,
+                          fontSize: 16,
+                        }}
+                      >
                         {fmt(Number(ticket.compareAtPrice))}
                       </span>
                     )}
                     {/* On a PWYW tier `price` is the FLOOR, so it is labelled as
-                        one — showing it bare would read as a fixed price the
+                        one. Showing it bare would read as a fixed price the
                         buyer is about to be charged. */}
                     {isPayWhatYouWant(ticket) && (
-                      <span style={{ fontSize: 14, fontWeight: 500, opacity: 0.7, marginRight: 6 }}>from</span>
+                      <span style={{ fontSize: 14, fontWeight: 500, opacity: 0.7, marginRight: 6 }}>
+                        {t("forge.event_tickets.price_from")}
+                      </span>
                     )}
-                    <PriceDisplay amount={Number(ticket.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={theme.colors.text} captionStyle={{ opacity: 0.65 }} />
+                    <PriceDisplay
+                      amount={Number(ticket.price)}
+                      pricesIncludeTax={pricesIncludeTax}
+                      formatAmount={fmt}
+                      mutedColor={theme.colors.text}
+                      captionStyle={{ opacity: 0.65 }}
+                    />
                   </div>
                 </div>
                 <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                   <button
                     onClick={() => setQty(ticket, selectedQty - 1)}
-                    // Never disabled by availability — only by there being
+                    // Never disabled by availability, only by there being
                     // nothing to remove. A buyer holding two seats on a tier
                     // that has just gone unavailable must still be able to put
                     // them back; disabling this would trap the cart.
@@ -450,7 +542,7 @@ function TicketStep({
                     // A gated tier cannot be added, nor one whose on-sale time
                     // has not arrived, nor one whose remaining seats are inside
                     // somebody else's checkout. Not because the client is the
-                    // authority — `createOrder` refuses all three regardless —
+                    // authority (`createOrder` refuses all three regardless)
                     // but because letting a buyer build a cart the server will
                     // not sell is precisely the "discoverable only by failing"
                     // journey this change exists to end.
@@ -461,8 +553,8 @@ function TicketStep({
                   </button>
                 </div>
               </div>
-              {/* The amount box appears only once a seat is actually selected —
-                  before that there is nothing to price, and a row of empty
+              {/* The amount box appears only once a seat is actually selected.
+                  Before that there is nothing to price, and a row of empty
                   inputs down the tier list reads as a form to fill in rather
                   than a choice to make. */}
               {isPayWhatYouWant(ticket) && selectedQty > 0 && !isSoldOut && !isExpired && !isScheduled && (
@@ -479,13 +571,17 @@ function TicketStep({
                 <p dangerouslySetInnerHTML={{ __html: ticket.description }} style={{ marginTop: 12, fontSize: 14 }} />
               )}
               {/* Named on the TIER, before the buyer has typed anything. The
-                  tier stays in the list on purpose — hiding it kills the upsell
-                  — so this is what turns "visible but mysteriously unbuyable"
+                  tier stays in the list on purpose (hiding it kills the upsell)
+                  so this is what turns "visible but mysteriously unbuyable"
                   into an offer with a way in. */}
               <MembershipGateNotice
                 gate={gate}
                 variant="badge"
-                itemLabel={event.membershipGate && !event.membershipGate.allowed ? "This event" : "This ticket"}
+                itemLabel={
+                  event.membershipGate && !event.membershipGate.allowed
+                    ? t("forge.event_tickets.item_label_event")
+                    : t("forge.event_tickets.item_label_ticket")
+                }
                 loginPath={loginPath}
                 membershipPath={membershipPath}
               />
@@ -524,7 +620,7 @@ function TicketStep({
                   }}
                 >
                   <AlertCircle size={16} />
-                  This ticket has expired and is no longer available
+                  {t("forge.event_tickets.expired_notice")}
                 </div>
               )}
             </div>
@@ -533,21 +629,43 @@ function TicketStep({
       </div>
 
       {c.error && <p style={{ color: "#ef4444", fontSize: 14, marginTop: 12 }}>{c.error}</p>}
-      <ActionBar
-        c={c}
-        fmt={fmt}
-        onNext={c.goToDetails}
-        nextLabel="Continue"
-        // Buying tickets alone still goes straight down the untouched
-        // per-event flow; this exit exists so the buyer can go add merch and
-        // come back with the selection intact.
-        secondary={{
-          label: c.ticketsInCart ? "Update cart" : "Add to cart",
-          onClick: () => {
+      {/* Two shapes of this bar. With add-ons on the page, the PRIMARY action
+          is the cart: that is the only path that unlocks the add-on grid, so
+          it has to be the happy path, with a direct tickets-only checkout as
+          the secondary exit. Without add-ons the original flow is untouched:
+          Continue goes straight to details, the cart is the secondary exit. */}
+      {hasAddons ? (
+        <ActionBar
+          c={c}
+          fmt={fmt}
+          onNext={() => {
             if (c.addTicketsToCart()) onAddedToCart?.();
-          },
-        }}
-      />
+          }}
+          nextLabel={
+            c.ticketsInCart ? t("forge.event_tickets.update_cart_addons") : t("forge.event_tickets.continue_addons")
+          }
+          nextTestId="tickets-add-to-cart"
+          secondary={{
+            label: t("forge.event_tickets.checkout_tickets_only"),
+            onClick: c.goToDetails,
+            testId: "tickets-checkout-only",
+          }}
+        />
+      ) : (
+        <ActionBar
+          c={c}
+          fmt={fmt}
+          onNext={c.goToDetails}
+          nextLabel={t("forge.event_tickets.continue")}
+          secondary={{
+            label: c.ticketsInCart ? t("forge.event_tickets.update_cart") : t("forge.event_tickets.add_to_cart"),
+            onClick: () => {
+              if (c.addTicketsToCart()) onAddedToCart?.();
+            },
+            testId: "tickets-add-to-cart",
+          }}
+        />
+      )}
     </div>
   );
 }
@@ -566,6 +684,7 @@ function DetailsStep({
   loginPath?: string;
   membershipPath?: string;
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const [confirmEmail, setConfirmEmail] = useState("");
   const [answers, setAnswers] = useState<Record<string, string>>({});
@@ -581,30 +700,57 @@ function DetailsStep({
 
   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.event_tickets.error_name"));
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email)) return setLocalError(t("forge.event_tickets.error_email"));
+    if (c.email !== confirmEmail) return setLocalError(t("forge.event_tickets.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.event_tickets.error_answer_required", { question: q.question }));
     }
     c.continueToPayment();
   };
 
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>Your details</h2>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>{t("forge.event_tickets.details_title")}</h2>
       <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.event_tickets.first_name_placeholder")}
+            value={c.firstName}
+            onChange={(e) => c.setFirstName(e.target.value)}
+            style={inputStyle(theme)}
+          />
+          <input
+            placeholder={t("forge.event_tickets.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.event_tickets.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.event_tickets.invalid_email")}</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.event_tickets.confirm_email_placeholder")}
+            type="email"
+            value={confirmEmail}
+            onChange={(e) => setConfirmEmail(e.target.value)}
+            style={inputStyle(theme)}
+          />
+          {confirmEmail && c.email !== confirmEmail && (
+            <FieldError>{t("forge.event_tickets.email_mismatch")}</FieldError>
+          )}
         </div>
 
         {questions.map((q) => {
@@ -616,8 +762,12 @@ function DetailsStep({
                 {!q.optional && <span style={{ color: "#ef4444" }}> *</span>}
               </span>
               {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>
+                <select
+                  value={answers[q.id] ?? ""}
+                  onChange={(e) => onAnswer(q.id, e.target.value)}
+                  style={inputStyle(theme)}
+                >
+                  <option value="">{t("forge.event_tickets.select_option")}</option>
                   {q.options.map((opt) => (
                     <option key={opt} value={opt}>
                       {opt}
@@ -625,15 +775,19 @@ function DetailsStep({
                   ))}
                 </select>
               ) : (
-                <input value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)} />
+                <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.event_tickets.field_required")}</FieldError>}
             </label>
           );
         })}
 
         {/* Tickets have no apply-coupon endpoint, so the code is carried into
-            the order that "Continue" creates — hence `deferred`. Its result is
+            the order that "Continue" creates, hence `deferred`. Its result is
             what draws the discount line on the payment step. */}
         {c.subTotal > 0 && (
           <div style={{ marginTop: 4, paddingTop: 12, borderTop: `1px solid ${a(theme.colors.primary, 0.13)}` }}>
@@ -643,14 +797,14 @@ function DetailsStep({
 
         {/* The refusal path. It should be unreachable now that the tier itself
             is badged, but a membership can lapse mid-checkout and a page can be
-            served from cache — and when it happens the buyer gets the tier's
+            served from cache, and when it happens the buyer gets the tier's
             name and a way in, not a red line reading "Something went wrong."
             `c.error` is deliberately not set for this case, so the two cannot
             both draw. */}
         <MembershipGateNotice
           refusal={c.gateRefusal}
           variant="card"
-          itemLabel="This ticket"
+          itemLabel={t("forge.event_tickets.item_label_ticket")}
           loginPath={loginPath}
           membershipPath={membershipPath}
           style={{ marginTop: 4 }}
@@ -659,10 +813,9 @@ function DetailsStep({
         {c.attendeeSlots.length > 0 && (
           <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 4 }}>
             <div>
-              <h3 style={{ fontSize: 16, fontWeight: 700 }}>Who is coming?</h3>
+              <h3 style={{ fontSize: 16, fontWeight: 700 }}>{t("forge.event_tickets.attendees_title")}</h3>
               <p style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>
-                This event prints each attendee&rsquo;s name on their own pass, so the door list matches who
-                actually turns up.
+                {t("forge.event_tickets.attendees_description")}
               </p>
             </div>
             {c.attendeeSlots.map((slot) => (
@@ -672,10 +825,10 @@ function DetailsStep({
               >
                 <span>
                   {slot.label}
-                  {slot.isBuyer && <span style={{ opacity: 0.6 }}> (that&rsquo;s you)</span>}
+                  {slot.isBuyer && <span style={{ opacity: 0.6 }}> {t("forge.event_tickets.attendee_is_you")}</span>}
                 </span>
                 <input
-                  placeholder="Full name"
+                  placeholder={t("forge.event_tickets.attendee_name_placeholder")}
                   value={slot.value}
                   onChange={(e) => c.setAttendee(slot.ticketId, slot.index, e.target.value)}
                   style={inputStyle(theme)}
@@ -692,7 +845,19 @@ function DetailsStep({
         fmt={fmt}
         onBack={() => c.setStep("tickets")}
         onNext={onContinue}
-        nextLabel={c.isProcessing ? "Processing…" : "Continue to payment"}
+        // Nothing to pay means no payment step follows, so promising one is a
+        // lie the next screen immediately contradicts. Read off `totalAmount`
+        // rather than the ticket prices because it already carries the booking
+        // fee and any discount: a free ticket with a FLAT booking fee still
+        // costs money and still goes to payment, and a 100%-off code on a paid
+        // ticket does not.
+        nextLabel={
+          c.isProcessing
+            ? t("forge.event_tickets.processing")
+            : c.totalAmount > 0
+              ? t("forge.event_tickets.continue_payment")
+              : t("forge.event_tickets.confirm")
+        }
         nextDisabled={c.isProcessing}
       />
     </div>
@@ -709,6 +874,7 @@ function PaymentStep({
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   // Authoritative tax quote from start-payment: exclusive stores get a "Tax"
   // row (already contained in the charged total below); inclusive stores get a
@@ -716,10 +882,10 @@ 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 tickets.</p>
-      {/* The reservation clock. Event ticket holds are taken unconditionally —
-          no feature switch — so this is the one checkout where the countdown
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>{t("forge.event_tickets.payment_title")}</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.event_tickets.payment_subtitle")}</p>
+      {/* The reservation clock. Event ticket holds are taken unconditionally
+          (no feature switch), so this is the one checkout where the countdown
           fires for every profile, and it was the one that did not render it. */}
       <HoldNotice hold={c.hold} expiredMessage={c.error ?? undefined} style={{ marginBottom: 16 }} />
       <div
@@ -730,7 +896,7 @@ function PaymentStep({
           marginBottom: 16,
         }}
       >
-        {/* What the code actually did, from the order response — never a total
+        {/* What the code actually did, from the order response, never a total
             that silently shrank. Automatic (no-code) discounts land here too. */}
         <DiscountSummaryLines
           subTotal={c.subTotal}
@@ -755,27 +921,29 @@ function PaymentStep({
                 fontFamily: theme.fontFamily,
               }}
             >
-              Remove discount
+              {t("forge.event_tickets.remove_discount")}
             </button>
           </div>
         )}
         {/* Above the tax row, because tax is charged ON the fee: the order total
             the tax quote priced already contained it. By this step the number is
-            the SERVER's own — what it wrote to the order — so the itemisation
+            the SERVER's own (what it wrote to the order), so the itemisation
             adds up to the amount that will actually be charged. */}
         <BookingFeeLine c={c} fmt={fmt} />
         {taxSummary?.mode === "exclusive" && (
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
-            <span style={{ fontSize: 14, opacity: 0.75 }}>Tax</span>
+            <span style={{ fontSize: 14, opacity: 0.75 }}>{t("forge.event_tickets.tax")}</span>
             <span style={{ fontSize: 14, opacity: 0.75 }}>{taxSummary.formattedTax}</span>
           </div>
         )}
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <span style={{ fontSize: 16 }}>Total Amount</span>
+          <span style={{ fontSize: 16 }}>{t("forge.event_tickets.total_amount")}</span>
           <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary, textAlign: "right" }}>
             {fmt(c.totalAmount)}
             {taxSummary?.mode === "inclusive" && (
-              <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
+              <span
+                style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}
+              >
                 {taxSummary.label}
               </span>
             )}
@@ -786,19 +954,22 @@ function PaymentStep({
           so it is checked BEFORE the "not configured" branch. */}
       {c.isPaystack ? (
         c.canOpenPaystack ? (
-          <PaystackPayButton onPay={c.openPaystackCheckout} label={`Pay ${fmt(c.totalAmount)}`} />
+          <PaystackPayButton
+            onPay={c.openPaystackCheckout}
+            label={t("forge.event_tickets.pay", { amount: fmt(c.totalAmount) })}
+          />
         ) : (
-          <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+          <p style={{ opacity: 0.7 }}>{t("forge.event_tickets.preparing_payment")}</p>
         )
       ) : !renderPayment ? (
-        <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
+        <p style={{ color: "#ef4444", fontSize: 14 }}>{t("forge.event_tickets.payment_not_configured")}</p>
       ) : c.clientSecret ? (
         renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: c.totalAmount, mode: "redirect" })
       ) : (
-        <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+        <p style={{ opacity: 0.7 }}>{t("forge.event_tickets.preparing_payment")}</p>
       )}
       <button onClick={() => c.setStep("details")} style={{ ...secondaryButtonStyle(theme), marginTop: 16 }}>
-        Back
+        {t("forge.event_tickets.back")}
       </button>
     </div>
   );
@@ -813,7 +984,7 @@ function FieldError({ children }: { children: ReactNode }) {
  *
  * This is the line that did not exist. The fee was added to `total_amount` on
  * the server and named on no surface, so a buyer choosing £50 of tickets was
- * shown "Total £50" and charged £52.75 — and even after a discount, where
+ * shown "Total £50" and charged £52.75, and even after a discount, where
  * `Subtotal` and `Discount` were both drawn, the total did not reconcile with
  * them and nothing explained why. A mandatory charge disclosed only on the
  * receipt is what the FTC's junk-fee rule, the CMA's guidance and the EU
@@ -821,7 +992,7 @@ function FieldError({ children }: { children: ReactNode }) {
  *
  * Renders NOTHING when the fee is zero. The payload always arrives (so callers
  * can rely on its shape), which means "this artist charges no fee" comes down as
- * a zero — and a "+£0.00 booking fee" row would invent a charge that does not
+ * a zero, and a "+£0.00 booking fee" row would invent a charge that does not
  * exist and hint that one might appear later. There is nothing to disclose when
  * nothing is charged.
  *
@@ -831,6 +1002,7 @@ function FieldError({ children }: { children: ReactNode }) {
  * ON.
  */
 function BookingFeeLine({ c, fmt }: { c: Checkout; fmt: (n: number) => string }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   if (!(c.bookingFeeAmount > 0)) return null;
   const discountDrewSubtotal = c.coupon.discountAmount > 0;
@@ -842,15 +1014,12 @@ function BookingFeeLine({ c, fmt }: { c: Checkout; fmt: (n: number) => string })
     >
       {!discountDrewSubtotal && (
         <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
-          <span style={{ opacity: 0.75 }}>Subtotal</span>
+          <span style={{ opacity: 0.75 }}>{t("forge.event_tickets.subtotal")}</span>
           <span style={{ opacity: 0.75 }}>{fmt(c.subTotal)}</span>
         </div>
       )}
-      <div
-        data-testid="booking-fee-line"
-        style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}
-      >
-        <span style={{ color: theme.colors.text, opacity: 0.75 }}>Booking fee</span>
+      <div data-testid="booking-fee-line" style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
+        <span style={{ color: theme.colors.text, opacity: 0.75 }}>{t("forge.event_tickets.booking_fee")}</span>
         <span style={{ color: theme.colors.text, opacity: 0.75 }}>{fmt(c.bookingFeeAmount)}</span>
       </div>
     </div>
@@ -865,6 +1034,7 @@ function ActionBar({
   onNext,
   nextLabel,
   nextDisabled,
+  nextTestId,
   secondary,
 }: {
   c: Checkout;
@@ -873,9 +1043,13 @@ function ActionBar({
   onNext: () => void;
   nextLabel: string;
   nextDisabled?: boolean;
-  /** Extra exit shown next to Back — "Add to cart" on the selection step. */
-  secondary?: { label: string; onClick: () => void };
+  /** Test id for the primary button; the caller says which button is which
+      action, because add-to-cart moves between slots depending on add-ons. */
+  nextTestId?: string;
+  /** Extra exit shown next to Back on the selection step. */
+  secondary?: { label: string; onClick: () => void; testId?: string };
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   return (
     <div style={{ marginTop: 24 }}>
@@ -894,25 +1068,34 @@ function ActionBar({
           fmt={fmt}
         />
         {/* `Total` below is the figure the buyer reads as final while they are
-            still choosing quantities — so the fee has to be named HERE, not
+            still choosing quantities, so the fee has to be named HERE, not
             three screens later. */}
         <BookingFeeLine c={c} fmt={fmt} />
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <span style={{ fontWeight: 600 }}>Total</span>
+          <span style={{ fontWeight: 600 }}>{t("forge.event_tickets.total")}</span>
           <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(c.totalAmount)}</span>
         </div>
       </div>
       <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
         {secondary ? (
-          <button data-testid="tickets-add-to-cart" onClick={secondary.onClick} style={secondaryButtonStyle(theme)}>
+          <button data-testid={secondary.testId} onClick={secondary.onClick} style={secondaryButtonStyle(theme)}>
             {secondary.label}
           </button>
         ) : (
-          <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>
-            Back
+          <button
+            onClick={onBack}
+            disabled={!onBack}
+            style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}
+          >
+            {t("forge.event_tickets.back")}
           </button>
         )}
-        <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>
+        <button
+          data-testid={nextTestId}
+          onClick={onNext}
+          disabled={nextDisabled}
+          style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}
+        >
           {nextLabel}
         </button>
       </div>
@@ -945,7 +1128,7 @@ const closeButtonStyle = (t: ForgeTheme): CSSProperties => ({
  * to the floor on every keystroke), and "1" on the way to "15" must not be
  * clamped up to the minimum the instant it is typed.
  *
- * Correction happens on BLUR, when the buyer has finished — and the server
+ * Correction happens on BLUR, when the buyer has finished, and the server
  * clamps again regardless, so nothing here is load-bearing for money.
  */
 function PwywAmountField({
@@ -963,12 +1146,13 @@ function PwywAmountField({
   fmt: (amount: number) => string;
   theme: ForgeTheme;
 }) {
+  const t = useForgeT();
   const floor = Number(ticket.price);
   const maximum = pwywMaximum(ticket);
   const suggested = pwywDefaultAmount(ticket);
   const [draft, setDraft] = useState<string>(String(value ?? suggested));
 
-  // Follow the tier's own default when the buyer hasn't typed anything — an
+  // Follow the tier's own default when the buyer hasn't typed anything: an
   // operator's suggested amount arriving late (or the selection being cleared
   // and remade) should re-seed the box rather than leave a stale figure.
   useEffect(() => {
@@ -993,15 +1177,13 @@ function PwywAmountField({
 
   return (
     <div style={{ marginTop: 12 }}>
-      <label
-        htmlFor={`pwyw-${ticket.id}`}
-        style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6 }}
-      >
-        Name your price
+      <label htmlFor={`pwyw-${ticket.id}`} style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6 }}>
+        {t("forge.event_tickets.pwyw_label")}
         <span style={{ fontWeight: 400, opacity: 0.7 }}>
           {" "}
-          (minimum {fmt(floor)}
-          {maximum != null ? `, up to ${fmt(maximum)}` : ""})
+          {maximum != null
+            ? t("forge.event_tickets.pwyw_range_min_max", { min: fmt(floor), max: fmt(maximum) })
+            : t("forge.event_tickets.pwyw_range_min", { min: fmt(floor) })}
         </span>
       </label>
       <input
@@ -1018,19 +1200,23 @@ function PwywAmountField({
       />
       <p style={{ fontSize: 12, opacity: 0.7, marginTop: 6 }}>
         {belowFloor
-          ? `The minimum is ${fmt(floor)}, so we'll use that.`
+          ? t("forge.event_tickets.pwyw_below_min", { min: fmt(floor) })
           : aboveMax
-            ? `The most you can pay is ${fmt(maximum!)}, so we'll use that.`
+            ? t("forge.event_tickets.pwyw_above_max", { max: fmt(maximum!) })
             : quantity > 1
-              ? `${fmt(effective)} each · ${fmt(effective * quantity)} for ${quantity}`
-              : "Per ticket."}
+              ? t("forge.event_tickets.pwyw_each", {
+                  amount: fmt(effective),
+                  total: fmt(effective * quantity),
+                  count: quantity,
+                })
+              : t("forge.event_tickets.pwyw_per_ticket")}
       </p>
     </div>
   );
 }
 
 /**
- * The inline banner under a tier row — same shape as the expired one already
+ * The inline banner under a tier row, same shape as the expired one already
  * below it, so "why can't I buy this?" always answers itself in one place and
  * one visual language, whichever the reason.
  */