@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/AccountDashboard.tsx

@@ -21,6 +21,7 @@ import {
   useCancelMembership,
   useMembershipAccess,
   useOpenBillingPortal,
+  useCommunitySpaces,
   useUpdateAccount,
   useChangePassword,
   useExportAccountData,
@@ -30,6 +31,7 @@ import {
   OrderStatus,
   type NotificationPreferences,
 } from "../../index";
+import { useForgeT, type ForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useSiteConfig } from "../../data/queries/useWebsite";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -57,6 +59,21 @@ export const ACCOUNT_TABS = [
 ] as const;
 export type AccountTabKey = (typeof ACCOUNT_TABS)[number];
 
+/**
+ * The tab strip's visible labels. The tab keys themselves are route values, so
+ * the copy is looked up rather than read off the key.
+ */
+const TAB_LABEL_KEYS: Record<AccountTabKey, string> = {
+  membership: "forge.account_dashboard.tab_membership",
+  orders: "forge.account_dashboard.tab_orders",
+  tickets: "forge.account_dashboard.tab_tickets",
+  waitlist: "forge.account_dashboard.tab_waitlist",
+  bookings: "forge.account_dashboard.tab_bookings",
+  saved: "forge.account_dashboard.tab_saved",
+  account: "forge.account_dashboard.tab_account",
+  notifications: "forge.account_dashboard.tab_notifications",
+};
+
 export interface AccountDashboardProps {
   className?: string;
   style?: React.CSSProperties;
@@ -69,6 +86,17 @@ export interface AccountDashboardProps {
    * this to its router (e.g. `/i/membership`).
    */
   onNavigateMembership?: () => void;
+  /**
+   * Navigate to the community spaces, the member home's Spaces tab (host maps
+   * this to its router, e.g. `/i/members/spaces`).
+   *
+   * Optional, and drawn only when the signed-in member has at least one space
+   * they can actually open: `/public/community/spaces` returns open spaces plus
+   * the spaces gated to a tier they hold, so an empty list is the server saying
+   * there is no door here. Without that check the account page would offer a
+   * member a room they get bounced out of, which is worse than no link at all.
+   */
+  onNavigateCommunity?: () => void;
   /**
    * Optional currency formatter override. Defaults to Forge's `useFormatCurrency`
    * (which honors the visitor's selected currency + tenant exchange rates), so the
@@ -134,6 +162,7 @@ interface TabContext {
   formatDate: (value: string | number | Date) => string;
   currency?: string;
   onNavigateMembership?: () => void;
+  onNavigateCommunity?: () => void;
 }
 
 // ---- page -------------------------------------------------------------------
@@ -147,6 +176,7 @@ export function AccountDashboard({
   tab,
   onTabChange,
   onNavigateMembership,
+  onNavigateCommunity,
   formatAmount,
   formatDate,
   currency,
@@ -155,6 +185,7 @@ export function AccountDashboard({
 }: AccountDashboardProps) {
   const { user, logout } = usePublicAuth();
   const { t } = useCardStyles();
+  const tr = useForgeT();
   const { data: siteConfig } = useSiteConfig();
 
   const fmtAmount = useAmountFormatter(formatAmount);
@@ -167,6 +198,7 @@ export function AccountDashboard({
     // settlement currency (single source), unless the host overrides it.
     currency: currency ?? siteConfig?.currency,
     onNavigateMembership,
+    onNavigateCommunity,
   };
 
   if (!user) return <Loading fullPage />;
@@ -175,14 +207,16 @@ export function AccountDashboard({
     <div className={className} style={{ maxWidth: 900, margin: "0 auto", color: t.text, ...style }}>
       <div style={{ marginBottom: 24, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
         <div>
-          <h1 style={{ fontSize: 28, fontWeight: 800, fontFamily: t.headingFontFamily }}>My Account</h1>
+          <h1 style={{ fontSize: 28, fontWeight: 800, fontFamily: t.headingFontFamily }}>
+            {tr("forge.account_dashboard.title")}
+          </h1>
           <p style={{ opacity: 0.7 }}>{user.email}</p>
         </div>
         <button
           onClick={() => logout()}
           style={{ padding: "8px 14px", borderRadius: t.cornerRadius, background: "transparent", color: t.text, border: `1px solid ${t.primary}40`, cursor: "pointer" }}
         >
-          Log out
+          {tr("forge.account_dashboard.log_out")}
         </button>
       </div>
 
@@ -202,7 +236,7 @@ export function AccountDashboard({
               fontWeight: 600,
             }}
           >
-            {tabKey}
+            {tr(TAB_LABEL_KEYS[tabKey])}
           </button>
         ))}
       </div>
@@ -224,9 +258,24 @@ export function AccountDashboard({
 function MembershipTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
   const { t, card, button, ghostButton } = useCardStyles();
-  const { formatAmount, formatDate, currency, onNavigateMembership } = ctx;
+  const tr = useForgeT();
+  const { formatAmount, formatDate, currency, onNavigateMembership, onNavigateCommunity } = ctx;
   const cancelMembership = useCancelMembership();
+  // The way into the community, which the account page had no link to at all.
+  // The list is already access-filtered by the server (open spaces plus the
+  // ones gated to a tier this member holds), so its emptiness is the whole
+  // gate: no spaces, no link, and nobody is sent at a locked door.
+  const { data: communitySpaces } = useCommunitySpaces();
+  const canOpenCommunity = !!onNavigateCommunity && (communitySpaces?.length ?? 0) > 0;
   const [isCancelling, setIsCancelling] = useState(false);
+  /**
+   * Cancelling is destructive and irreversible from here, so it asks first.
+   * CLAUDE.md puts a destructive confirmation in the category that must stay
+   * VISIBLE rather than behind a `?`, and until now one click on Cancel simply
+   * ended the membership. The client app has always asked (`EditorModal` in
+   * `MembershipTab.tsx`); this surface was ported without it.
+   */
+  const [confirmingCancel, setConfirmingCancel] = useState(false);
   const [cancelError, setCancelError] = useState<string | null>(null);
 
   const membership = user?.membership;
@@ -252,7 +301,7 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
       window.location.reload();
     } catch (error) {
       const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      setCancelError(detail || "We couldn't cancel your membership. Please try again or contact us.");
+      setCancelError(detail || tr("forge.account_dashboard.membership_cancel_error"));
     } finally {
       setIsCancelling(false);
     }
@@ -265,13 +314,15 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
       window.location.href = url;
     } catch (error) {
       const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      setBillingError(detail || "We couldn't open the billing page. Please contact us.");
+      setBillingError(detail || tr("forge.account_dashboard.billing_portal_error"));
     }
   };
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>Current Membership</h2>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.membership_title")}
+      </h2>
       {membership ? (
         <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
           <div>
@@ -291,7 +342,10 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
             )}
             {!!membership.subscriptionAmount && (
               <p style={{ fontSize: 14, marginTop: 4 }}>
-                {formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency)} / {membership.billingCycle}
+                {tr("forge.account_dashboard.membership_price", {
+                  amount: formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency),
+                  cycle: membership.billingCycle,
+                })}
               </p>
             )}
           </div>
@@ -307,7 +361,9 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
           )}
           {membership.endDate && (
             <p style={{ fontSize: 14, opacity: 0.8 }}>
-              {access.billingState === "active" ? "Renews" : "Ends"} on {formatDate(membership.endDate)}
+              {access.billingState === "active"
+                ? tr("forge.account_dashboard.membership_renews_on", { date: formatDate(membership.endDate) })
+                : tr("forge.account_dashboard.membership_ends_on", { date: formatDate(membership.endDate) })}
             </p>
           )}
           {billingError && <p style={{ fontSize: 13, opacity: 0.9 }}>{billingError}</p>}
@@ -318,13 +374,22 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
           )}
         </div>
       ) : (
-        <p style={{ opacity: 0.8 }}>You don&apos;t have an active membership.</p>
+        <p style={{ opacity: 0.8 }}>{tr("forge.account_dashboard.membership_empty")}</p>
       )}
 
-      <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24 }}>
+      <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24, flexWrap: "wrap" }}>
+        {/* Kept hard left, apart from the billing actions: this is the door to
+            what the membership is FOR, not another thing to do to the plan. */}
+        {canOpenCommunity && (
+          <button onClick={() => onNavigateCommunity?.()} style={{ ...ghostButton, marginRight: "auto" }}>
+            {tr("forge.account_dashboard.community_spaces")}
+          </button>
+        )}
         {message.showUpdatePayment && (
           <button onClick={onUpdatePayment} disabled={openBillingPortal.isPending} style={button}>
-            {openBillingPortal.isPending ? "Opening…" : "Update payment method"}
+            {openBillingPortal.isPending
+              ? tr("forge.account_dashboard.billing_portal_opening")
+              : tr("forge.account_dashboard.update_payment_method")}
           </button>
         )}
         {/* Cancelling stays available for anyone who still HAS access — a
@@ -332,14 +397,51 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
             but not leave. Hidden once it is already scheduled ("Ending"), where
             the only honest label would be "Cancel again". */}
         {access.hasAccess && !access.cancelAtPeriodEnd && (
-          <button onClick={onCancel} disabled={isCancelling} style={ghostButton}>
-            {isCancelling ? "Cancelling…" : "Cancel"}
+          <button onClick={() => setConfirmingCancel(true)} disabled={isCancelling} style={ghostButton}>
+            {isCancelling ? tr("forge.account_dashboard.cancelling") : tr("forge.account_dashboard.cancel")}
           </button>
         )}
         <button onClick={() => onNavigateMembership?.()} style={button}>
-          {membership ? "Change" : "Join"}
+          {membership
+            ? tr("forge.account_dashboard.membership_change")
+            : tr("forge.account_dashboard.membership_join")}
         </button>
       </div>
+
+      {/* Says WHICH of the two cancellations this is. A paid membership runs to
+          the end of the period already paid for; a free one stops now. A flat
+          "are you sure" tells a member who paid this month that they have lost
+          the rest of it, which is not true and reads as a threat. */}
+      {confirmingCancel && (
+        <div role="alertdialog" aria-modal="true" style={{ ...card, marginTop: 16 }}>
+          <p style={{ fontWeight: 700 }}>{tr("forge.account_dashboard.cancel_confirm_title")}</p>
+          <p style={{ fontSize: 14, opacity: 0.85, marginTop: 8 }}>
+            {membership?.subscriptionAmount
+              ? membership.endDate
+                ? tr("forge.account_dashboard.cancel_confirm_paid_until", { date: formatDate(membership.endDate) })
+                : tr("forge.account_dashboard.cancel_confirm_paid")
+              : tr("forge.account_dashboard.cancel_confirm_free")}
+          </p>
+          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 16 }}>
+            <button onClick={() => setConfirmingCancel(false)} disabled={isCancelling} style={ghostButton}>
+              {tr("forge.account_dashboard.cancel_confirm_keep")}
+            </button>
+            <button
+              onClick={() => {
+                // Closed FIRST, so the dialog cannot be double-submitted while
+                // the request is in flight. The row behind it already renders
+                // "Cancelling" from `isCancelling`.
+                setConfirmingCancel(false);
+                void onCancel();
+              }}
+              disabled={isCancelling}
+              style={button}
+            >
+              {tr("forge.account_dashboard.cancel_confirm_confirm")}
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -369,6 +471,7 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
 function TicketsTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
   const { t, card } = useCardStyles();
+  const tr = useForgeT();
   const { formatAmount, formatDate, currency } = ctx;
   const { data, isLoading } = useMyTickets(user?.id);
   const cancelTicket = useCancelMyTicket();
@@ -385,7 +488,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
     } catch (err) {
       const message =
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
-        "We could not cancel this ticket. Please try again.";
+        tr("forge.account_dashboard.ticket_cancel_error");
       setError(message);
     } finally {
       setPendingId(null);
@@ -394,7 +497,9 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>My Tickets</h2>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.tickets_title")}
+      </h2>
       {error && (
         <div style={{ marginBottom: 16, padding: 12, borderRadius: t.cornerRadius, border: `1px solid ${t.primary}40`, fontSize: 14 }}>
           {error}
@@ -418,19 +523,26 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                     <div style={{ fontWeight: 600 }}>{ticket.eventTitle}</div>
                     <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(ticket.eventDateTime)}</div>
                   </div>
-                  {cancelled && <span style={{ fontSize: 13, color: t.primary }}>Cancelled</span>}
+                  {cancelled && (
+                    <span style={{ fontSize: 13, color: t.primary }}>{tr("forge.account_dashboard.cancelled")}</span>
+                  )}
                   {/* Says WHY this is in the list at all. Without it a
                       transferred ticket looks like a purchase the buyer cannot
                       remember making, with no prices on it. */}
                   {!cancelled && gifted && (
-                    <span style={{ fontSize: 13, color: t.primary }}>Sent to you</span>
+                    <span style={{ fontSize: 13, color: t.primary }}>
+                      {tr("forge.account_dashboard.ticket_transferred")}
+                    </span>
                   )}
                 </div>
 
                 {ticket.items.map((item) => (
                   <div key={item.id} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, padding: "4px 0" }}>
                     <span>
-                      {item.ticketTitle ?? "Ticket"} × {item.quantity}
+                      {tr("forge.account_dashboard.ticket_line", {
+                        title: item.ticketTitle ?? tr("forge.account_dashboard.ticket_fallback_title"),
+                        quantity: item.quantity,
+                      })}
                     </span>
                     {/* A holder is not shown a price, because the server did
                         not send one — `Number(null)` is 0, and a confident
@@ -443,7 +555,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
 
                 {!gifted && (
                   <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
-                    <span>Total</span>
+                    <span>{tr("forge.account_dashboard.total")}</span>
                     <span style={{ color: t.primary }}>{formatAmount(Number(ticket.totalAmount), ticket.currency || currency)}</span>
                   </div>
                 )}
@@ -522,7 +634,9 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                       fontWeight: 600,
                     }}
                   >
-                    {pendingId === ticket.id ? "Cancelling…" : "Cancel ticket"}
+                    {pendingId === ticket.id
+                      ? tr("forge.account_dashboard.cancelling")
+                      : tr("forge.account_dashboard.cancel_ticket")}
                   </button>
                 )}
               </div>
@@ -530,7 +644,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
           })}
         </div>
       ) : (
-        <p style={{ fontSize: 14, opacity: 0.7 }}>You have no tickets yet.</p>
+        <p style={{ fontSize: 14, opacity: 0.7 }}>{tr("forge.account_dashboard.tickets_empty")}</p>
       )}
     </div>
   );
@@ -555,12 +669,15 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
 function WaitlistTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
   const { t, card } = useCardStyles();
+  const tr = useForgeT();
   const { formatDate } = ctx;
   const { places, isLoading } = useMyWaitlistPlaces(user?.id);
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>My Waitlists</h2>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.waitlists_title")}
+      </h2>
       {isLoading ? (
         <Loading />
       ) : places.length > 0 ? (
@@ -570,7 +687,7 @@ function WaitlistTab({ ctx }: { ctx: TabContext }) {
           ))}
         </div>
       ) : (
-        <p style={{ fontSize: 14, opacity: 0.7 }}>You&apos;re not on any waitlists.</p>
+        <p style={{ fontSize: 14, opacity: 0.7 }}>{tr("forge.account_dashboard.waitlists_empty")}</p>
       )}
     </div>
   );
@@ -584,6 +701,7 @@ function WaitlistPlaceRow({
   formatDate: (value: string | number | Date) => string;
 }) {
   const { t } = useCardStyles();
+  const tr = useForgeT();
   const leave = useLeaveEventWaitlist(place.eventId);
   const [error, setError] = useState<string | null>(null);
 
@@ -594,7 +712,7 @@ function WaitlistPlaceRow({
     } catch (err) {
       const message =
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
-        "We could not remove you from this waitlist. Please try again.";
+        tr("forge.account_dashboard.waitlist_leave_error");
       setError(message);
     }
   };
@@ -611,22 +729,35 @@ function WaitlistPlaceRow({
     >
       <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
         <div>
-          <div style={{ fontWeight: 600 }}>{place.event?.title ?? "Event"}</div>
+          <div style={{ fontWeight: 600 }}>
+            {place.event?.title ?? tr("forge.account_dashboard.waitlist_event_fallback")}
+          </div>
           <div style={{ fontSize: 13, opacity: 0.7 }}>
-            {place.ticket?.title ?? "Ticket"} · {place.quantity} {place.quantity === 1 ? "ticket" : "tickets"}
+            {tr(
+              place.quantity === 1
+                ? "forge.account_dashboard.waitlist_ticket_line_one"
+                : "forge.account_dashboard.waitlist_ticket_line_other",
+              {
+                title: place.ticket?.title ?? tr("forge.account_dashboard.waitlist_ticket_fallback"),
+                quantity: place.quantity,
+              },
+            )}
           </div>
           {place.event?.dateTime && (
             <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(place.event.dateTime)}</div>
           )}
         </div>
         {place.offer.offerOpen ? (
-          <span style={{ fontWeight: 700, color: t.primary }}>Tickets available</span>
+          <span style={{ fontWeight: 700, color: t.primary }}>
+            {tr("forge.account_dashboard.waitlist_offer_open")}
+          </span>
         ) : place.position != null ? (
           <span style={{ fontSize: 14, opacity: 0.85 }}>
-            Position <strong style={{ color: t.primary }}>#{place.position}</strong>
+            {tr("forge.account_dashboard.waitlist_position_label")}{" "}
+            <strong style={{ color: t.primary }}>#{place.position}</strong>
           </span>
         ) : (
-          <span style={{ fontSize: 14, opacity: 0.85 }}>You&apos;re on the list</span>
+          <span style={{ fontSize: 14, opacity: 0.85 }}>{tr("forge.account_dashboard.waitlist_on_list")}</span>
         )}
       </div>
 
@@ -640,15 +771,21 @@ function WaitlistPlaceRow({
             fontSize: 14,
           }}
         >
-          <strong>Buy within {formatCountdown(place.offer.secondsRemaining ?? 0)}.</strong> Your offer closes{" "}
-          {deadline.toLocaleString(undefined, {
-            weekday: "short",
-            day: "numeric",
-            month: "short",
-            hour: "numeric",
-            minute: "2-digit",
-          })}
-          . Tickets are not reserved until you buy them.
+          <strong>
+            {tr("forge.account_dashboard.waitlist_offer_deadline", {
+              countdown: formatCountdown(place.offer.secondsRemaining ?? 0),
+            })}
+          </strong>{" "}
+          {tr("forge.account_dashboard.waitlist_offer_closes", {
+            datetime: deadline.toLocaleString(undefined, {
+              weekday: "short",
+              day: "numeric",
+              month: "short",
+              hour: "numeric",
+              minute: "2-digit",
+            }),
+          })}{" "}
+          {tr("forge.account_dashboard.waitlist_offer_not_reserved")}
         </div>
       )}
 
@@ -668,7 +805,9 @@ function WaitlistPlaceRow({
           fontWeight: 600,
         }}
       >
-        {leave.isPending ? "Leaving…" : "Leave waitlist"}
+        {leave.isPending
+          ? tr("forge.account_dashboard.waitlist_leaving")
+          : tr("forge.account_dashboard.leave_waitlist")}
       </button>
     </div>
   );
@@ -700,13 +839,16 @@ function WaitlistPlaceRow({
 function BookingsTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
   const { t, card } = useCardStyles();
+  const tr = useForgeT();
   const { data, isLoading } = useMyBookings(user?.id);
 
   const bookings = data?.data ?? [];
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>My Sessions</h2>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.sessions_title")}
+      </h2>
       {isLoading ? (
         <Loading />
       ) : bookings.length > 0 ? (
@@ -716,14 +858,14 @@ function BookingsTab({ ctx }: { ctx: TabContext }) {
           ))}
         </div>
       ) : (
-        <p style={{ fontSize: 14, opacity: 0.7 }}>You have no sessions booked.</p>
+        <p style={{ fontSize: 14, opacity: 0.7 }}>{tr("forge.account_dashboard.sessions_empty")}</p>
       )}
     </div>
   );
 }
 
 /** The session's window, in the coach's timezone where one is set. */
-function formatSessionWindow(booking: MyBooking): string {
+function formatSessionWindow(booking: MyBooking, tr: ForgeT): string {
   const zone = booking.coachingProductTimezone ?? undefined;
   const start = new Date(booking.sessionStartTime);
   const end = new Date(booking.sessionEndTime);
@@ -736,7 +878,9 @@ function formatSessionWindow(booking: MyBooking): string {
   });
   const from = start.toLocaleString(undefined, { hour: "numeric", minute: "2-digit", timeZone: zone });
   const to = end.toLocaleString(undefined, { hour: "numeric", minute: "2-digit", timeZone: zone });
-  return `${day}, ${from} to ${to}${zone ? ` (${zone})` : ""}`;
+  return zone
+    ? tr("forge.account_dashboard.session_window_zoned", { day, start: from, end: to, timezone: zone })
+    : tr("forge.account_dashboard.session_window", { day, start: from, end: to });
 }
 
 /**
@@ -766,12 +910,13 @@ function BookingLocationLine({
   location: MyBooking["location"];
   primary: string;
 }) {
+  const tr = useForgeT();
   if (!location) return null;
 
   if (location.type === "online") {
     return (
       <div style={{ fontSize: 13, marginTop: 4 }}>
-        <span style={{ opacity: 0.7 }}>Join: </span>
+        <span style={{ opacity: 0.7 }}>{tr("forge.account_dashboard.booking_join_label")}{" "}</span>
         <a
           href={location.url}
           target="_blank"
@@ -784,9 +929,27 @@ function BookingLocationLine({
     );
   }
 
+  /**
+   * A call on the platform's own media network. A LINE, never the call itself.
+   *
+   * There is no URL to render and there never will be: entry is a ticket minted
+   * per attempt and valid for minutes. Mounting the room here is also the wrong
+   * place mechanically - the call UI lives behind `@tribe-nest/forge/media`,
+   * whose media-client dependency is an OPTIONAL peer, and importing it from
+   * this entry point would break every site that has not installed it.
+   */
+  if (location.type === "video") {
+    return (
+      <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
+        <span style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.booking_join_label")}{" "}</span>
+        {tr("forge.account_dashboard.booking_video_call")}
+      </div>
+    );
+  }
+
   return (
     <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
-      <span style={{ fontWeight: 600 }}>Where: </span>
+      <span style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.booking_where_label")}{" "}</span>
       {location.address}
     </div>
   );
@@ -794,6 +957,7 @@ function BookingLocationLine({
 
 function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
   const { t } = useCardStyles();
+  const tr = useForgeT();
   const { formatAmount, currency } = ctx;
   const cancelBooking = useCancelMyBooking();
   const [picking, setPicking] = useState(false);
@@ -820,7 +984,7 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
       // wording, not ours.
       const message =
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
-        "We could not cancel this session. Please try again.";
+        tr("forge.account_dashboard.booking_cancel_error");
       setError(message);
     }
   };
@@ -837,14 +1001,18 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
       <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
         <div>
           <div style={{ fontWeight: 600 }}>{booking.coachingProductTitle}</div>
-          <div style={{ fontSize: 13, opacity: 0.7 }}>{formatSessionWindow(booking)}</div>
+          <div style={{ fontSize: 13, opacity: 0.7 }}>{formatSessionWindow(booking, tr)}</div>
           {booking.coachingProductDurationMinutes != null && (
-            <div style={{ fontSize: 13, opacity: 0.7 }}>{booking.coachingProductDurationMinutes} minutes</div>
+            <div style={{ fontSize: 13, opacity: 0.7 }}>
+              {tr("forge.account_dashboard.booking_duration", { minutes: booking.coachingProductDurationMinutes })}
+            </div>
           )}
           <BookingLocationLine location={booking.location} primary={t.primary} />
         </div>
         <div style={{ textAlign: "right" }}>
-          {cancelled && <div style={{ fontSize: 13, color: t.primary }}>Cancelled</div>}
+          {cancelled && (
+            <div style={{ fontSize: 13, color: t.primary }}>{tr("forge.account_dashboard.cancelled")}</div>
+          )}
           {booking.totalAmount != null && (
             <div style={{ fontWeight: 700, color: t.primary }}>
               {formatAmount(booking.totalAmount, booking.currency || currency)}
@@ -888,7 +1056,7 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
       <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
         {booking.canReschedule && !picking && (
           <button onClick={() => setPicking(true)} style={actionButton}>
-            Reschedule
+            {tr("forge.account_dashboard.reschedule")}
           </button>
         )}
         {booking.cancellation.canCancel && (
@@ -897,7 +1065,9 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
             disabled={cancelBooking.isPending}
             style={{ ...actionButton, cursor: cancelBooking.isPending ? "wait" : "pointer" }}
           >
-            {cancelBooking.isPending ? "Cancelling…" : "Cancel session"}
+            {cancelBooking.isPending
+              ? tr("forge.account_dashboard.cancelling")
+              : tr("forge.account_dashboard.cancel_session")}
           </button>
         )}
       </div>
@@ -919,6 +1089,7 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
  */
 function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone: () => void }) {
   const { t } = useCardStyles();
+  const tr = useForgeT();
   const reschedule = useRescheduleBooking();
   const [error, setError] = useState<string | null>(null);
   const [pendingSlotId, setPendingSlotId] = useState<string | null>(null);
@@ -943,7 +1114,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
     } catch (err) {
       const message =
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
-        "We could not move this session. Please try another time.";
+        tr("forge.account_dashboard.reschedule_error");
       setError(message);
     } finally {
       setPendingSlotId(null);
@@ -955,7 +1126,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
   return (
     <div style={{ marginTop: 12, padding: 12, borderRadius: t.cornerRadius, border: `1px solid ${t.primary}4d` }}>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
-        <strong style={{ fontSize: 14 }}>Choose a new time</strong>
+        <strong style={{ fontSize: 14 }}>{tr("forge.account_dashboard.reschedule_title")}</strong>
         <button
           onClick={onDone}
           style={{
@@ -968,7 +1139,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
             fontSize: 13,
           }}
         >
-          Close
+          {tr("forge.account_dashboard.close")}
         </button>
       </div>
 
@@ -1001,7 +1172,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
                 }}
               >
                 {busy
-                  ? "Moving…"
+                  ? tr("forge.account_dashboard.reschedule_moving")
                   : start.toLocaleString(undefined, {
                       weekday: "short",
                       day: "numeric",
@@ -1016,7 +1187,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
         </div>
       ) : (
         <p style={{ fontSize: 13, opacity: 0.7, marginTop: 12 }}>
-          No other times are open in the next two weeks.
+          {tr("forge.account_dashboard.reschedule_empty")}
         </p>
       )}
     </div>
@@ -1028,6 +1199,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
 function OrdersTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
   const { t, card } = useCardStyles();
+  const tr = useForgeT();
   const { formatAmount, formatDate, currency } = ctx;
   const { data: orders, isLoading } = useUserOrders(user?.id);
 
@@ -1035,7 +1207,9 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>My Orders</h2>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.orders_title")}
+      </h2>
       {isLoading ? (
         <Loading />
       ) : orders && orders.length > 0 ? (
@@ -1046,7 +1220,9 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
               <div key={order.id} style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16 }}>
                 <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
                   <div>
-                    <div style={{ fontWeight: 600 }}>Order #{order.id}</div>
+                    <div style={{ fontWeight: 600 }}>
+                      {tr("forge.account_dashboard.order_number", { order_id: order.id })}
+                    </div>
                     <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(order.createdAt)}</div>
                   </div>
                   <span style={{ fontSize: 13, color: t.primary }}>{formatStatus(order.status)}</span>
@@ -1055,7 +1231,7 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
                   group.items.map((item, i) => (
                     <div key={`${item.productVariantId}-${i}`} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, padding: "4px 0" }}>
                       <span>
-                        {item.title} × {item.quantity}
+                        {tr("forge.account_dashboard.order_line", { title: item.title, quantity: item.quantity })}
                         {/* Which version. Two versions of one release carry the
                             same title, so without this a buyer's own order
                             history shows what looks like the same thing bought
@@ -1068,14 +1244,14 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
                   )),
                 )}
                 <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
-                  <span>Total</span>
+                  <span>{tr("forge.account_dashboard.total")}</span>
                   <span style={{ color: t.primary }}>{formatAmount(order.totalAmount, order.currency || currency)}</span>
                 </div>
               </div>
             ))}
         </div>
       ) : (
-        <p style={{ opacity: 0.8 }}>You haven&apos;t placed any orders yet.</p>
+        <p style={{ opacity: 0.8 }}>{tr("forge.account_dashboard.orders_empty")}</p>
       )}
     </div>
   );
@@ -1086,12 +1262,15 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
 function SavedTab() {
   const { user } = usePublicAuth();
   const { t, card } = useCardStyles();
+  const tr = useForgeT();
   const { data, isLoading } = useSavedPosts(user?.id);
   const posts = data?.data;
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>Saved Posts</h2>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.saved_title")}
+      </h2>
       {isLoading ? (
         <Loading />
       ) : posts && posts.length > 0 ? (
@@ -1100,13 +1279,13 @@ function SavedTab() {
             <div key={post.id} style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16 }}>
               <p style={{ fontSize: 14, marginBottom: 8 }}>{post.caption}</p>
               <p style={{ fontSize: 12, opacity: 0.6 }}>
-                {post.likes} likes · {post.comments} comments
+                {tr("forge.account_dashboard.saved_post_stats", { likes: post.likes, comments: post.comments })}
               </p>
             </div>
           ))}
         </div>
       ) : (
-        <p style={{ opacity: 0.8 }}>You haven&apos;t saved any posts yet.</p>
+        <p style={{ opacity: 0.8 }}>{tr("forge.account_dashboard.saved_empty")}</p>
       )}
     </div>
   );
@@ -1117,6 +1296,7 @@ function SavedTab() {
 function AccountTab({ ctx }: { ctx: TabContext }) {
   const { user, refetchUser, logout } = usePublicAuth();
   const { t, card, button, ghostButton, input } = useCardStyles();
+  const tr = useForgeT();
   const { formatDate } = ctx;
 
   const updateAccount = useUpdateAccount();
@@ -1144,22 +1324,22 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
     try {
       await updateAccount.mutateAsync({ firstName, lastName });
       await refetchUser();
-      setProfileMsg("Profile updated.");
+      setProfileMsg(tr("forge.account_dashboard.profile_update_success"));
     } catch {
-      setProfileMsg("Failed to update profile.");
+      setProfileMsg(tr("forge.account_dashboard.profile_update_error"));
     }
   };
 
   const onChangePassword = async (e: React.FormEvent) => {
     e.preventDefault();
     setPasswordMsg("");
-    if (newPassword.length < 8) return setPasswordMsg("New password must be at least 8 characters.");
-    if (newPassword !== confirmPassword) return setPasswordMsg("Passwords don't match.");
+    if (newPassword.length < 8) return setPasswordMsg(tr("forge.account_dashboard.password_too_short"));
+    if (newPassword !== confirmPassword) return setPasswordMsg(tr("forge.account_dashboard.password_mismatch"));
     try {
       await changePassword.mutateAsync({ currentPassword, newPassword });
       logout();
     } catch {
-      setPasswordMsg("Failed to update password.");
+      setPasswordMsg(tr("forge.account_dashboard.password_update_error"));
     }
   };
 
@@ -1185,81 +1365,83 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
     <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
       {/* Profile */}
       <form onSubmit={onUpdateProfile} style={card}>
-        <h2 style={sectionTitle}>Profile Information</h2>
+        <h2 style={sectionTitle}>{tr("forge.account_dashboard.profile_section_title")}</h2>
         <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
           <div style={{ flex: 1 }}>
-            <label style={label}>First name</label>
+            <label style={label}>{tr("forge.account_dashboard.first_name")}</label>
             <input value={firstName} onChange={(e) => setFirstName(e.target.value)} style={input} />
           </div>
           <div style={{ flex: 1 }}>
-            <label style={label}>Last name</label>
+            <label style={label}>{tr("forge.account_dashboard.last_name")}</label>
             <input value={lastName} onChange={(e) => setLastName(e.target.value)} style={input} />
           </div>
         </div>
-        <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 12 }}>Email: {user?.email} (cannot be changed)</p>
+        <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 12 }}>
+          {tr("forge.account_dashboard.email_readonly", { email: user?.email ?? "" })}
+        </p>
         {profileMsg && <p style={{ fontSize: 13, marginBottom: 12 }}>{profileMsg}</p>}
         <button type="submit" style={button}>
-          Update Profile
+          {tr("forge.account_dashboard.update_profile")}
         </button>
       </form>
 
       {/* Password */}
       <form onSubmit={onChangePassword} style={card}>
-        <h2 style={sectionTitle}>Change Password</h2>
+        <h2 style={sectionTitle}>{tr("forge.account_dashboard.password_section_title")}</h2>
         {passwordMsg && <p style={{ color: "#ef4444", fontSize: 13, marginBottom: 12 }}>{passwordMsg}</p>}
         <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
           <div>
-            <label style={label}>Current password</label>
+            <label style={label}>{tr("forge.account_dashboard.current_password")}</label>
             <input type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} style={input} />
           </div>
           <div style={{ display: "flex", gap: 12 }}>
             <div style={{ flex: 1 }}>
-              <label style={label}>New password</label>
+              <label style={label}>{tr("forge.account_dashboard.new_password")}</label>
               <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} style={input} />
             </div>
             <div style={{ flex: 1 }}>
-              <label style={label}>Confirm new password</label>
+              <label style={label}>{tr("forge.account_dashboard.confirm_password")}</label>
               <input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} style={input} />
             </div>
           </div>
         </div>
         <button type="submit" style={{ ...button, marginTop: 16 }}>
-          Update Password
+          {tr("forge.account_dashboard.update_password")}
         </button>
       </form>
 
       {/* Data rights */}
       <div style={card}>
-        <h2 style={sectionTitle}>Your Data</h2>
-        <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 12 }}>Export a copy of your personal data.</p>
+        <h2 style={sectionTitle}>{tr("forge.account_dashboard.data_section_title")}</h2>
+        <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 12 }}>
+          {tr("forge.account_dashboard.data_export_description")}
+        </p>
         <button onClick={onExport} style={ghostButton}>
-          Export My Data
+          {tr("forge.account_dashboard.export_data")}
         </button>
       </div>
 
       {/* Delete account */}
       <div style={{ ...card, borderColor: "#ef444533" }}>
-        <h2 style={{ ...sectionTitle, color: "#ef4444" }}>Delete Account</h2>
+        <h2 style={{ ...sectionTitle, color: "#ef4444" }}>{tr("forge.account_dashboard.delete_section_title")}</h2>
         {scheduledAt ? (
           <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
             <p style={{ fontSize: 14 }}>
-              Account deletion scheduled for {formatDate(scheduledAt)}. You can cancel before then.
+              {tr("forge.account_dashboard.deletion_scheduled", { date: formatDate(scheduledAt) })}
             </p>
             <button onClick={() => cancelDeletion.mutate()} style={ghostButton}>
-              Cancel Deletion
+              {tr("forge.account_dashboard.cancel_deletion")}
             </button>
           </div>
         ) : confirmDelete ? (
           <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-            <p style={{ fontSize: 14 }}>
-              Your account will be scheduled for permanent deletion after a 30-day cooling-off period.
-            </p>
+            <p style={{ fontSize: 14 }}>{tr("forge.account_dashboard.deletion_confirm_body")}</p>
             <div style={{ display: "flex", gap: 12 }}>
               <button onClick={() => requestDeletion.mutate()} style={{ ...button, background: "#ef4444" }}>
-                Yes, delete my account
+                {tr("forge.account_dashboard.deletion_confirm")}
               </button>
               <button onClick={() => setConfirmDelete(false)} style={ghostButton}>
-                Cancel
+                {tr("forge.account_dashboard.cancel")}
               </button>
             </div>
           </div>
@@ -1268,7 +1450,7 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
             onClick={() => setConfirmDelete(true)}
             style={{ padding: "8px 14px", borderRadius: t.cornerRadius, background: "#ef444411", color: "#ef4444", border: "1px solid #ef444433", cursor: "pointer" }}
           >
-            Request Account Deletion
+            {tr("forge.account_dashboard.request_deletion")}
           </button>
         )}
       </div>
@@ -1280,6 +1462,7 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
 
 function NotificationsTab() {
   const { t, card } = useCardStyles();
+  const tr = useForgeT();
   const { data } = useNotificationPreferences();
   const updatePreference = useUpdateNotificationPreference();
 
@@ -1341,10 +1524,20 @@ function NotificationsTab() {
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>Notification Types</h2>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+        {tr("forge.account_dashboard.notifications_title")}
+      </h2>
       <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <Row k="newPosts" title="New Posts" desc="Get notified when new posts are published" />
-        <Row k="chatMessages" title="Chat Messages" desc="Get notified when new chat messages arrive" />
+        <Row
+          k="newPosts"
+          title={tr("forge.account_dashboard.notify_new_posts_title")}
+          desc={tr("forge.account_dashboard.notify_new_posts_description")}
+        />
+        <Row
+          k="chatMessages"
+          title={tr("forge.account_dashboard.notify_chat_title")}
+          desc={tr("forge.account_dashboard.notify_chat_description")}
+        />
       </div>
     </div>
   );