@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/EventConfirmation.tsx

@@ -4,6 +4,7 @@ import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
 import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, Perforation, ConfirmationRow, alpha } from "./Confirmation";
+import { useForgeT } from "../../i18n";
 import { useEventOrderFinalize } from "../../data/queries/useFinalize";
 import { useEvent } from "../../data/queries/useEvents";
 import { AddToCalendar } from "./AddToCalendar";
@@ -43,6 +44,7 @@ export function EventConfirmation({
   explorePath = "/i/events",
 }: EventConfirmationProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const formatAmt = useAmountFormatter(formatAmount);
   const { data: order, isLoading } = useEventOrderFinalize(slug, orderId);
   const { data: event } = useEvent(slug);
@@ -53,7 +55,7 @@ export function EventConfirmation({
   if (isLoading) {
     return (
       <ConfirmationStage>
-        <Loading label="Finalizing your order…" />
+        <Loading label={t("forge.event_confirmation.loading")} />
       </ConfirmationStage>
     );
   }
@@ -61,7 +63,7 @@ export function EventConfirmation({
   if (!order) {
     return (
       <ConfirmationStage>
-        <p style={{ color: text }}>We couldn’t find your order.</p>
+        <p style={{ color: text }}>{t("forge.event_confirmation.not_found")}</p>
       </ConfirmationStage>
     );
   }
@@ -77,7 +79,7 @@ export function EventConfirmation({
   const location =
     event && event.type !== "virtual" && event.address
       ? [event.address.name, event.address.city, event.address.country].filter(Boolean).join(", ")
-      : "Virtual event";
+      : t("forge.event_confirmation.virtual_location");
 
   return (
     <ConfirmationStage>
@@ -105,17 +107,25 @@ export function EventConfirmation({
               animationDelay: "0.15s",
             }}
           >
-            {paid ? "E-Ticket" : refunded ? TICKET_ORDER_REFUNDED_COPY.eyebrow : "Order " + order.status.replace(/_/g, " ")}
+            {paid
+              ? t("forge.event_confirmation.eyebrow_paid")
+              : refunded
+                ? TICKET_ORDER_REFUNDED_COPY.eyebrow
+                : t("forge.event_confirmation.eyebrow_status", { status: order.status.replace(/_/g, " ") })}
           </p>
           <h1 className="cf-rise" style={{ fontSize: 29, fontWeight: 800, lineHeight: 1.12, margin: "0 0 8px", animationDelay: "0.22s" }}>
-            {paid ? "You’re going! 🎟" : refunded ? TICKET_ORDER_REFUNDED_COPY.heading : "Order not completed"}
+            {paid
+              ? t("forge.event_confirmation.title_paid")
+              : refunded
+                ? TICKET_ORDER_REFUNDED_COPY.heading
+                : t("forge.event_confirmation.title_incomplete")}
           </h1>
           <p className="cf-rise" style={{ fontSize: 15, color: alpha(text, 0.7), margin: 0, animationDelay: "0.3s" }}>
             {paid
-              ? `We’ve sent your tickets to ${order.email}.`
+              ? t("forge.event_confirmation.body_paid", { email: order.email })
               : refunded
                 ? TICKET_ORDER_REFUNDED_COPY.body
-                : `Your order is ${order.status.replace(/_/g, " ")}. If you were charged, contact support.`}
+                : t("forge.event_confirmation.body_incomplete", { status: order.status.replace(/_/g, " ") })}
           </p>
         </div>
 
@@ -162,7 +172,7 @@ export function EventConfirmation({
           <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
             <Ticket size={16} color={primary} />
             <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: alpha(text, 0.55) }}>
-              Tickets
+              {t("forge.event_confirmation.tickets_heading")}
             </span>
           </div>
           <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
@@ -178,7 +188,7 @@ export function EventConfirmation({
 
           {Number(order.taxAmount || 0) > 0 && !order.taxInclusive && (
             <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, marginTop: 10, color: alpha(text, 0.6) }}>
-              <span>Tax</span>
+              <span>{t("forge.event_confirmation.tax")}</span>
               <span>{formatAmt(Number(order.taxAmount), order.chargedCurrency || order.currency || undefined)}</span>
             </div>
           )}
@@ -195,7 +205,11 @@ export function EventConfirmation({
             {/* Never "Total paid" for money that has gone back, and never a bare
                 "Total" for money that never moved. */}
             <span style={{ fontWeight: 700 }}>
-              {paid ? "Total paid" : refunded ? TICKET_ORDER_REFUNDED_COPY.totalLabel : "Total"}
+              {paid
+                ? t("forge.event_confirmation.total_paid")
+                : refunded
+                  ? TICKET_ORDER_REFUNDED_COPY.totalLabel
+                  : t("forge.event_confirmation.total")}
             </span>
             {/* The exact charged total (charged currency) when present — never a re-converted catalog amount. */}
             <span style={{ fontSize: 18, fontWeight: 800, color: primary }}>
@@ -206,13 +220,22 @@ export function EventConfirmation({
           </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 || order.currency || undefined)} tax
+              {t("forge.event_confirmation.tax_included", {
+                amount: formatAmt(Number(order.taxAmount), order.chargedCurrency || order.currency || undefined),
+              })}
             </div>
           )}
 
           <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 10, columnGap: 16, margin: "16px 0 0" }}>
-            <ConfirmationRow label="Guest" value={`${order.firstName} ${order.lastName}`.trim() || "Not given"} />
-            <ConfirmationRow label="Reference" value={`#${order.id.slice(0, 8).toUpperCase()}`} mono />
+            <ConfirmationRow
+              label={t("forge.event_confirmation.row_guest")}
+              value={`${order.firstName} ${order.lastName}`.trim() || t("forge.event_confirmation.not_given")}
+            />
+            <ConfirmationRow
+              label={t("forge.event_confirmation.row_reference")}
+              value={`#${order.id.slice(0, 8).toUpperCase()}`}
+              mono
+            />
           </dl>
         </div>
 
@@ -234,7 +257,7 @@ export function EventConfirmation({
               textDecoration: "none",
             }}
           >
-            Browse more events <ArrowRight size={16} />
+            {t("forge.event_confirmation.explore")} <ArrowRight size={16} />
           </a>
         </div>
       </ConfirmationCard>

package/src/ui/styled/EventCountdown.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useEffect, useState } from "react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 
 export interface EventCountdownProps {
   /** Event start time (ISO). */
@@ -17,6 +18,7 @@ const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString
  */
 export function EventCountdown({ dateTime }: EventCountdownProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const [remaining, setRemaining] = useState<{
     days: number;
     hours: number;
@@ -62,22 +64,24 @@ export function EventCountdown({ dateTime }: EventCountdownProps) {
   if (remaining.isPast) {
     return (
       <div style={box}>
-        <span style={{ color: theme.colors.text, fontWeight: 600 }}>This event has passed</span>
+        <span style={{ color: theme.colors.text, fontWeight: 600 }}>{t("forge.event_countdown.past")}</span>
       </div>
     );
   }
 
+  // `id` stays the React key: a translated label would change identity with the
+  // locale, and it is the unit that identifies the column, not its wording.
   const units = [
-    { label: "Days", value: remaining.days },
-    { label: "Hours", value: remaining.hours },
-    { label: "Minutes", value: remaining.minutes },
-    { label: "Seconds", value: remaining.seconds },
+    { id: "days", label: t("forge.event_countdown.unit_days"), value: remaining.days },
+    { id: "hours", label: t("forge.event_countdown.unit_hours"), value: remaining.hours },
+    { id: "minutes", label: t("forge.event_countdown.unit_minutes"), value: remaining.minutes },
+    { id: "seconds", label: t("forge.event_countdown.unit_seconds"), value: remaining.seconds },
   ];
 
   return (
     <div style={box}>
       {units.map((unit, index) => (
-        <Fragment key={unit.label}>
+        <Fragment key={unit.id}>
           <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
             <div style={{ fontSize: 24, fontWeight: 700, color: theme.colors.primary }}>
               {String(unit.value).padStart(2, "0")}

package/src/ui/styled/EventDetail.tsx

@@ -1,6 +1,7 @@
 import { Calendar, MapPin } from "lucide-react";
 import type { IEvent } from "../../types/models";
 import { usePresaleCode } from "../headless/event/usePresaleCode";
+import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
@@ -58,6 +59,7 @@ export function EventDetail({
   onComplete,
 }: EventDetailProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
   // Read the event THROUGH the presale field: it is the same query, fetched
@@ -67,14 +69,14 @@ export function EventDetail({
   const { event, isLoading } = presale;
 
   if (isLoading) return <Loading fullPage />;
-  if (!event) return <p>Event not found.</p>;
+  if (!event) return <p>{tr("forge.event_detail.not_found")}</p>;
 
   const cover = event.media?.find((m) => m.type === "image")?.url ?? event.media?.[0]?.url;
   const minPrice = event.tickets.length ? Math.min(...event.tickets.map((t) => t.price)) : 0;
   const feeNote = describeBookingFee(event.bookingFee, fmt);
   const locationText =
     event.type === "virtual" || !event.address
-      ? "Virtual"
+      ? tr("forge.event_detail.location_virtual")
       : [event.address.name, event.address.street, event.address.city, event.address.country].filter(Boolean).join(", ");
 
   return (
@@ -132,7 +134,7 @@ export function EventDetail({
 
           {event.description && (
             <>
-              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 8px", fontFamily: t.headingFontFamily }}>About this event</h2>
+              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 8px", fontFamily: t.headingFontFamily }}>{tr("forge.event_detail.about_title")}</h2>
               <div dangerouslySetInnerHTML={{ __html: event.description }} style={{ lineHeight: 1.7, opacity: 0.9 }} />
             </>
           )}
@@ -164,13 +166,13 @@ export function EventDetail({
             <PresaleCodeField presale={presale} />
             {event.tickets.length === 0 && (
               <span style={{ fontSize: 13, opacity: 0.7 }}>
-                Tickets for this event are presale only.
+                {tr("forge.event_detail.presale_only")}
               </span>
             )}
             {event.tickets.length > 0 && (
               <>
                 <span style={{ fontWeight: 600 }}>
-                  From{" "}
+                  {tr("forge.event_detail.price_from_label")}{" "}
                   <PriceDisplay amount={minPrice} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
                 </span>
                 {/* The cheapest tier is the number a buyer anchors on, and until
@@ -189,7 +191,7 @@ export function EventDetail({
             {event.tickets.length > 0 && (
               <EventTickets
                 slug={slug}
-                triggerText="Buy tickets"
+                triggerText={tr("forge.event_detail.buy_tickets")}
                 formatAmount={fmt}
                 finalisePath={finalisePath}
                 onComplete={onComplete}

package/src/ui/styled/EventSeriesDetail.tsx

@@ -1,6 +1,7 @@
 import { Calendar, MapPin } from "lucide-react";
 import type { IEventSeries, IEventSeriesDate } from "../../types/models";
 import { useEventSeries } from "../../data/queries/useEventSeries";
+import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -54,9 +55,11 @@ const formatTime = (value: string, timezone?: string): string =>
     timeZoneName: "short",
   });
 
-const locationText = (date: IEventSeriesDate): string => {
-  if (date.type === "virtual" || !date.address) return "Online";
-  return [date.address.name, date.address.city, date.address.country].filter(Boolean).join(", ") || "Online";
+// `onlineLabel` is passed in because this helper sits outside the component and
+// so cannot call the translate hook itself.
+const locationText = (date: IEventSeriesDate, onlineLabel: string): string => {
+  if (date.type === "virtual" || !date.address) return onlineLabel;
+  return [date.address.name, date.address.city, date.address.country].filter(Boolean).join(", ") || onlineLabel;
 };
 
 /**
@@ -94,10 +97,12 @@ export function EventSeriesDetail({
   style,
 }: EventSeriesDetailProps) {
   const t = useThemeTokens();
+  // Named `translate` rather than the usual `t`: `t` is already the theme tokens here.
+  const translate = useForgeT();
   const { data: series, isLoading } = useEventSeries(slug, { initialData: initialSeries });
 
   if (isLoading) return <Loading fullPage />;
-  if (!series) return <p style={{ color: t.text }}>Series not found.</p>;
+  if (!series) return <p style={{ color: t.text }}>{translate("forge.event_series_detail.not_found")}</p>;
 
   const cover = series.media?.find((m) => m.type === "image")?.url ?? series.media?.[0]?.url;
   const href = eventHref ?? ((date: IEventSeriesDate) => `/events/${date.slug}`);
@@ -126,13 +131,13 @@ export function EventSeriesDetail({
       <p style={{ marginTop: 8, opacity: 0.75, display: "flex", alignItems: "center", gap: 8 }}>
         <Calendar size={16} />
         <span>
-          {series.dateCount} dates
           {series.firstDateTime && series.lastDateTime
-            ? ` · ${formatDate(series.firstDateTime, series.events[0]?.timezone)} to ${formatDate(
-                series.lastDateTime,
-                series.events[series.events.length - 1]?.timezone,
-              )}`
-            : ""}
+            ? translate("forge.event_series_detail.date_count_range", {
+                count: series.dateCount,
+                first_date: formatDate(series.firstDateTime, series.events[0]?.timezone),
+                last_date: formatDate(series.lastDateTime, series.events[series.events.length - 1]?.timezone),
+              })
+            : translate("forge.event_series_detail.date_count", { count: series.dateCount })}
         </span>
       </p>
 
@@ -183,7 +188,7 @@ export function EventSeriesDetail({
                 <div style={{ fontWeight: 600 }}>{date.title}</div>
                 <div style={{ fontSize: 13, opacity: 0.75, display: "flex", alignItems: "center", gap: 6 }}>
                   <MapPin size={14} />
-                  <span>{locationText(date)}</span>
+                  <span>{locationText(date, translate("forge.event_series_detail.location_online"))}</span>
                 </div>
               </div>
 
@@ -200,12 +205,12 @@ export function EventSeriesDetail({
                       padding: "4px 8px",
                     }}
                   >
-                    Cancelled
+                    {translate("forge.event_series_detail.status_cancelled")}
                   </span>
                 )}
                 {date.status === "sold_out" && (
                   <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.6, textTransform: "uppercase" }}>
-                    Sold out
+                    {translate("forge.event_series_detail.status_sold_out")}
                   </span>
                 )}
               </div>