@tribe-nest/forge 3.26.0 → 3.29.0

package/src/ui/styled/SignupForm.tsx

@@ -1,4 +1,5 @@
 import { useSignupForm } from "../headless/auth/useSignupForm";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 
 export interface SignupFormProps {
@@ -12,9 +13,15 @@ export interface SignupFormProps {
 
 /** Themed account signup form, built on `useSignupForm`. */
 export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode }: SignupFormProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const form = useSignupForm({ onSuccess, membershipTierId, couponCode });
 
+  // One key for the whole sentence, split on its own `{email}` slot so the
+  // address keeps its <strong> without the sentence being assembled from two
+  // separately translated fragments.
+  const codeSentParts = t("forge.signup_form.code_sent").split("{email}");
+
   const card: React.CSSProperties = {
     maxWidth: 420,
     margin: "40px auto 0",
@@ -53,7 +60,7 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
   return (
     <div style={card}>
       <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>
-        {form.awaitingCode ? "Check your email" : "Create your account"}
+        {form.awaitingCode ? t("forge.signup_form.verify_title") : t("forge.signup_form.title")}
       </h1>
       {form.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{form.error}</p>}
       <form
@@ -68,10 +75,12 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
         {form.awaitingCode ? (
           <>
             <p style={{ fontSize: 14, margin: 0 }}>
-              We emailed a 6-digit code to <strong>{form.email}</strong>. Enter it to finish creating your account.
+              {codeSentParts[0]}
+              <strong>{form.email}</strong>
+              {codeSentParts[1]}
             </p>
             {field(
-              "Verification code",
+              t("forge.signup_form.code_label"),
               <input
                 inputMode="numeric"
                 autoComplete="one-time-code"
@@ -86,42 +95,42 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
           <>
             <div style={{ display: "flex", gap: 12 }}>
               {field(
-                "First name",
+                t("forge.signup_form.first_name_label"),
                 <input
                   value={form.firstName}
                   onChange={(e) => form.setFirstName(e.target.value)}
                   style={input}
-                  placeholder="First name"
+                  placeholder={t("forge.signup_form.first_name_placeholder")}
                 />,
               )}
               {field(
-                "Last name",
+                t("forge.signup_form.last_name_label"),
                 <input
                   value={form.lastName}
                   onChange={(e) => form.setLastName(e.target.value)}
                   style={input}
-                  placeholder="Last name"
+                  placeholder={t("forge.signup_form.last_name_placeholder")}
                 />,
               )}
             </div>
             {field(
-              "Email",
+              t("forge.signup_form.email_label"),
               <input
                 type="email"
                 value={form.email}
                 onChange={(e) => form.setEmail(e.target.value)}
                 style={input}
-                placeholder="Email"
+                placeholder={t("forge.signup_form.email_placeholder")}
               />,
             )}
             {field(
-              "Password",
+              t("forge.signup_form.password_label"),
               <input
                 type="password"
                 value={form.password}
                 onChange={(e) => form.setPassword(e.target.value)}
                 style={input}
-                placeholder="At least 8 characters"
+                placeholder={t("forge.signup_form.password_placeholder")}
               />,
             )}
             <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13 }}>
@@ -131,12 +140,16 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
                 onChange={(e) => form.setAcceptedTerms(e.target.checked)}
                 style={{ accentColor: theme.colors.primary }}
               />
-              I accept the Terms and Privacy Policy
+              {t("forge.signup_form.accept_terms")}
             </label>
           </>
         )}
         <button type="submit" disabled={form.isSubmitting} style={button}>
-          {form.isSubmitting ? "Working…" : form.awaitingCode ? "Verify and continue" : "Sign up"}
+          {form.isSubmitting
+            ? t("forge.signup_form.submitting")
+            : form.awaitingCode
+              ? t("forge.signup_form.verify_submit")
+              : t("forge.signup_form.submit")}
         </button>
         {form.awaitingCode && (
           <button
@@ -145,14 +158,14 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
             disabled={form.isSubmitting}
             style={{ background: "none", border: "none", color: theme.colors.primary, cursor: "pointer", fontSize: 13 }}
           >
-            Resend code
+            {t("forge.signup_form.resend_code")}
           </button>
         )}
       </form>
       <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
-        Already have an account?{" "}
+        {t("forge.signup_form.login_prompt")}{" "}
         <a href={loginHref} style={{ color: theme.colors.primary, textDecoration: "underline" }}>
-          Login
+          {t("forge.signup_form.login_link")}
         </a>
       </p>
     </div>

package/src/ui/styled/TicketTransfer.tsx

@@ -9,6 +9,7 @@ import {
 } from "../../data/queries/usePassTransfers";
 import type { MyTicketPass, MyTicketPendingTransfer } from "../../data/queries/useMyTickets";
 import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 
 /**
  * Events 2.2 — handing a ticket to somebody else, and taking one.
@@ -131,7 +132,7 @@ export interface TicketTransferPanelProps {
  * bridge across the refetch that follows a send.
  */
 export function TicketTransferPanel({ passIds, passes, className, style }: TicketTransferPanelProps) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
   const [openFor, setOpenFor] = useState<string | null>(null);
 
   if (passIds.length === 0) return null;
@@ -150,7 +151,7 @@ export function TicketTransferPanel({ passIds, passes, className, style }: Ticke
           key={passId}
           passId={passId}
           serverTransfer={byId.get(passId)?.pendingTransfer ?? null}
-          t={t}
+          tokens={tokens}
           showPassId={!single}
           isOpen={openFor === passId}
           onToggle={() => setOpenFor((current) => (current === passId ? null : passId))}
@@ -163,18 +164,19 @@ export function TicketTransferPanel({ passIds, passes, className, style }: Ticke
 function TicketTransferRow({
   passId,
   serverTransfer,
-  t,
+  tokens,
   showPassId,
   isOpen,
   onToggle,
 }: {
   passId: string;
   serverTransfer: MyTicketPendingTransfer | null;
-  t: ResolvedThemeTokens;
+  tokens: ResolvedThemeTokens;
   showPassId: boolean;
   isOpen: boolean;
   onToggle: () => void;
 }) {
+  const t = useForgeT();
   const send = useSendPassTransfer();
   const cancel = useCancelPassTransfer();
   const remembered = usePendingPassTransfers(passId);
@@ -199,7 +201,7 @@ function TicketTransferRow({
       // The server distinguishes "already has a live transfer", "you have
       // checked in", "the show was cancelled" and several more. Its wording,
       // not ours.
-      setError(serverMessage(err, "We could not send this ticket. Please try again."));
+      setError(serverMessage(err, t("forge.ticket_transfer.send_error")));
     }
   };
 
@@ -209,27 +211,27 @@ function TicketTransferRow({
     try {
       await cancel.mutateAsync({ transferId });
     } catch (err) {
-      setError(serverMessage(err, "We could not withdraw this transfer. Please try again."));
+      setError(serverMessage(err, t("forge.ticket_transfer.withdraw_error")));
     }
   };
 
   return (
     <div
       style={{
-        border: `1px solid ${t.primary}20`,
-        borderRadius: t.cornerRadius,
+        border: `1px solid ${tokens.primary}20`,
+        borderRadius: tokens.cornerRadius,
         padding: 12,
-        color: t.text,
-        fontFamily: t.fontFamily,
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
       }}
     >
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
         <div>
-          <div style={{ fontWeight: 600, fontSize: 14 }}>Transfer this ticket</div>
-          {showPassId && <div style={{ fontSize: 12, color: t.muted }}>{passId}</div>}
+          <div style={{ fontWeight: 600, fontSize: 14 }}>{t("forge.ticket_transfer.row_title")}</div>
+          {showPassId && <div style={{ fontSize: 12, color: tokens.muted }}>{passId}</div>}
         </div>
-        <button type="button" onClick={onToggle} style={ghostButton(t, false)} aria-expanded={isOpen}>
-          {isOpen ? "Close" : "Send to someone"}
+        <button type="button" onClick={onToggle} style={ghostButton(tokens, false)} aria-expanded={isOpen}>
+          {isOpen ? t("forge.ticket_transfer.close") : t("forge.ticket_transfer.open_send")}
         </button>
       </div>
 
@@ -240,8 +242,8 @@ function TicketTransferRow({
           style={{
             marginTop: 12,
             padding: 12,
-            borderRadius: t.cornerRadius,
-            border: `1px solid ${t.primary}4d`,
+            borderRadius: tokens.cornerRadius,
+            border: `1px solid ${tokens.primary}4d`,
             fontSize: 14,
           }}
         >
@@ -251,21 +253,21 @@ function TicketTransferRow({
               ? `. The link works until ${formatWhen(pending.expiresAt)}.`
               : "."}
           </div>
-          <div style={{ fontSize: 13, color: t.muted, marginTop: 4 }}>
+          <div style={{ fontSize: 13, color: tokens.muted, marginTop: 4 }}>
             {pending.open
-              ? "Your QR code keeps working until they claim it."
-              : /* Lapsed but not yet swept. Still `pending`, still withdrawable —
+              ? t("forge.ticket_transfer.pending_open")
+              : /* Lapsed but not yet swept. Still `pending`, still withdrawable -
                    hiding it would leave the sender with a live row and no way to
                    address it. */
-                "That link has expired. Withdraw it to send this ticket to someone else."}
+                t("forge.ticket_transfer.pending_expired")}
           </div>
           <button
             type="button"
             onClick={() => void onCancel(pending.transferId)}
             disabled={cancel.isPending}
-            style={{ ...ghostButton(t, cancel.isPending), marginTop: 10 }}
+            style={{ ...ghostButton(tokens, cancel.isPending), marginTop: 10 }}
           >
-            {cancel.isPending ? "Withdrawing…" : "Withdraw transfer"}
+            {cancel.isPending ? t("forge.ticket_transfer.withdrawing") : t("forge.ticket_transfer.withdraw")}
           </button>
         </div>
       )}
@@ -277,7 +279,7 @@ function TicketTransferRow({
       )}
 
       {error && (
-        <p style={{ fontSize: 13, marginTop: 10, color: t.primary }} role="alert">
+        <p style={{ fontSize: 13, marginTop: 10, color: tokens.primary }} role="alert">
           {error}
         </p>
       )}
@@ -289,24 +291,22 @@ function TicketTransferRow({
             required
             value={toEmail}
             onChange={(event) => setToEmail(event.target.value)}
-            placeholder="Their email address"
-            aria-label="Recipient email address"
-            style={inputStyle(t)}
+            placeholder={t("forge.ticket_transfer.recipient_email_placeholder")}
+            aria-label={t("forge.ticket_transfer.recipient_email_label")}
+            style={inputStyle(tokens)}
           />
           <input
             type="text"
             maxLength={240}
             value={toName}
             onChange={(event) => setToName(event.target.value)}
-            placeholder="Their name (optional)"
-            aria-label="Recipient name"
-            style={inputStyle(t)}
+            placeholder={t("forge.ticket_transfer.recipient_name_placeholder")}
+            aria-label={t("forge.ticket_transfer.recipient_name_label")}
+            style={inputStyle(tokens)}
           />
-          <p style={{ fontSize: 12, color: t.muted, margin: 0 }}>
-            They get a link to claim it. Once they do, this ticket becomes theirs and your QR code stops working.
-          </p>
-          <button type="submit" disabled={send.isPending} style={primaryButton(t, send.isPending)}>
-            {send.isPending ? "Sending…" : "Send ticket"}
+          <p style={{ fontSize: 12, color: tokens.muted, margin: 0 }}>{t("forge.ticket_transfer.send_note")}</p>
+          <button type="submit" disabled={send.isPending} style={primaryButton(tokens, send.isPending)}>
+            {send.isPending ? t("forge.ticket_transfer.sending") : t("forge.ticket_transfer.send")}
           </button>
         </form>
       )}
@@ -339,7 +339,8 @@ export interface ClaimTicketTransferProps {
  * was cancelled since — comes back from the server with its own wording.
  */
 export function ClaimTicketTransfer({ token, onClaimed, className, style }: ClaimTicketTransferProps) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const claim = useClaimPassTransfer();
   const [name, setName] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -348,18 +349,18 @@ export function ClaimTicketTransfer({ token, onClaimed, className, style }: Clai
   const card: CSSProperties = {
     maxWidth: 460,
     margin: "0 auto",
-    color: t.text,
-    fontFamily: t.fontFamily,
+    color: tokens.text,
+    fontFamily: tokens.fontFamily,
     ...style,
   };
 
   if (!token) {
     return (
       <div className={className} style={{ ...card, textAlign: "center" }}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: t.headingFontFamily }}>Invalid claim link</h1>
-        <p style={{ color: t.muted, marginTop: 8 }}>
-          Your link is missing its code. Please use the link from your email.
-        </p>
+        <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: tokens.headingFontFamily }}>
+          {t("forge.ticket_transfer.invalid_title")}
+        </h1>
+        <p style={{ color: tokens.muted, marginTop: 8 }}>{t("forge.ticket_transfer.invalid_body")}</p>
       </div>
     );
   }
@@ -367,7 +368,9 @@ export function ClaimTicketTransfer({ token, onClaimed, className, style }: Clai
   if (claimed) {
     return (
       <div className={className} style={card}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: t.headingFontFamily }}>The ticket is yours</h1>
+        <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: tokens.headingFontFamily }}>
+          {t("forge.ticket_transfer.claimed_title")}
+        </h1>
         <p style={{ marginTop: 8 }}>
           Ticket <strong>{claimed.eventPassId}</strong> is now in your name. We have emailed it to{" "}
           <strong>{claimed.toEmail}</strong>. Bring that QR code to the door.
@@ -386,35 +389,33 @@ export function ClaimTicketTransfer({ token, onClaimed, className, style }: Clai
     } catch (err) {
       // "Already claimed" and "expired" are materially different answers to
       // somebody standing outside a venue. Never collapsed into one sentence.
-      setError(serverMessage(err, "We could not claim this ticket. Your link may have expired or already been used."));
+      setError(serverMessage(err, t("forge.ticket_transfer.claim_error")));
     }
   };
 
   return (
     <div className={className} style={card}>
-      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8, fontFamily: t.headingFontFamily }}>
-        Claim your ticket
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8, fontFamily: tokens.headingFontFamily }}>
+        {t("forge.ticket_transfer.claim_title")}
       </h1>
-      <p style={{ color: t.muted, marginBottom: 24 }}>
-        Someone sent you their ticket. Tell us what to put on it. You do not need an account.
-      </p>
+      <p style={{ color: tokens.muted, marginBottom: 24 }}>{t("forge.ticket_transfer.claim_subtitle")}</p>
       <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         <input
           type="text"
           maxLength={240}
           value={name}
           onChange={(event) => setName(event.target.value)}
-          placeholder="Your name (optional)"
-          aria-label="Your name"
-          style={inputStyle(t)}
+          placeholder={t("forge.ticket_transfer.claim_name_placeholder")}
+          aria-label={t("forge.ticket_transfer.claim_name_label")}
+          style={inputStyle(tokens)}
         />
         {error && (
-          <p style={{ color: t.primary, fontSize: 14 }} role="alert">
+          <p style={{ color: tokens.primary, fontSize: 14 }} role="alert">
             {error}
           </p>
         )}
-        <button type="submit" disabled={claim.isPending} style={primaryButton(t, claim.isPending)}>
-          {claim.isPending ? "Claiming…" : "Claim ticket"}
+        <button type="submit" disabled={claim.isPending} style={primaryButton(tokens, claim.isPending)}>
+          {claim.isPending ? t("forge.ticket_transfer.claiming") : t("forge.ticket_transfer.claim_submit")}
         </button>
       </form>
     </div>

package/src/ui/styled/UserMenu.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { User, LogIn, LogOut } from "lucide-react";
 import { usePublicAuth } from "../../contexts/PublicAuthContext";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 
 export interface UserMenuProps {
   /** Custom trigger icon (defaults to a user icon). */
@@ -41,7 +42,8 @@ export function UserMenu({
   className,
   style,
 }: UserMenuProps) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const { user, logout } = usePublicAuth();
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
@@ -63,7 +65,7 @@ export function UserMenu({
   }, [open]);
 
   const item: React.CSSProperties = {
-    color: t.primary,
+    color: tokens.primary,
     background: "transparent",
     border: "none",
     cursor: "pointer",
@@ -81,13 +83,13 @@ export function UserMenu({
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
-        aria-label="Account"
+        aria-label={t("forge.user_menu.aria_trigger")}
         aria-expanded={open}
         style={{
           background: "transparent",
           border: "none",
           cursor: "pointer",
-          color: t.text,
+          color: tokens.text,
           display: "inline-flex",
           alignItems: "center",
           padding: 4,
@@ -105,14 +107,14 @@ export function UserMenu({
             ...(align === "left" ? { left: 0 } : { right: 0 }),
             minWidth: 220,
             maxWidth: "calc(100vw - 32px)",
-            background: t.background,
-            color: t.text,
-            border: `1px solid ${t.border}`,
-            borderRadius: t.cornerRadius,
+            background: tokens.background,
+            color: tokens.text,
+            border: `1px solid ${tokens.border}`,
+            borderRadius: tokens.cornerRadius,
             boxShadow: "0 10px 30px -12px rgba(0,0,0,0.4)",
             padding: 16,
             zIndex: 60,
-            fontFamily: t.fontFamily,
+            fontFamily: tokens.fontFamily,
           }}
         >
           {user ? (
@@ -126,7 +128,7 @@ export function UserMenu({
               <div
                 style={{
                   paddingTop: 8,
-                  borderTop: `1px solid ${t.border}`,
+                  borderTop: `1px solid ${tokens.border}`,
                   display: "flex",
                   flexDirection: "column",
                   gap: 10,
@@ -134,7 +136,7 @@ export function UserMenu({
                 }}
               >
                 <a href={accountHref} role="menuitem" style={item} onClick={() => setOpen(false)}>
-                  My Account
+                  {t("forge.user_menu.account")}
                 </a>
                 <button
                   type="button"
@@ -145,17 +147,17 @@ export function UserMenu({
                     void logout();
                   }}
                 >
-                  <LogOut size={14} /> Log out
+                  <LogOut size={14} /> {t("forge.user_menu.log_out")}
                 </button>
               </div>
             </div>
           ) : (
             <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start" }}>
               <a href={loginHref} role="menuitem" style={item} onClick={() => setOpen(false)}>
-                <LogIn size={16} /> Log in
+                <LogIn size={16} /> {t("forge.user_menu.log_in")}
               </a>
               <a href={signupHref} role="menuitem" style={item} onClick={() => setOpen(false)}>
-                Create account
+                {t("forge.user_menu.create_account")}
               </a>
             </div>
           )}