@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/InvoicePayment.tsx

@@ -1,3 +1,4 @@
+import { useForgeT } from "../../i18n";
 import { useInvoicePayment } from "../headless/invoice/useInvoicePayment";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
@@ -26,13 +27,15 @@ const formatDate = (value: string | number | Date): string =>
  * or Paystack's inline modal behind a pay button.
  */
 export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoicePaymentProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const renderPayment = usePaymentRenderer();
   const { invoice, downloadPdf, clientSecret, returnUrl, isStarting, error, taxQuote, isPaystack, canOpenPaystack, openPaystackCheckout } =
     useInvoicePayment(invoiceId, { returnPath });
 
   if (invoice.isLoading) return <Loading fullPage />;
-  if (invoice.error || !invoice.data) return <p style={{ color: theme.colors.text }}>Invoice not found.</p>;
+  if (invoice.error || !invoice.data)
+    return <p style={{ color: theme.colors.text }}>{t("forge.invoice_payment.not_found")}</p>;
 
   const inv = invoice.data;
   const isPaid = inv.status === "paid" || !!inv.paidAt;
@@ -72,7 +75,9 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
     <div style={{ maxWidth: 640, margin: "0 auto", color: theme.colors.text }}>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
         <div>
-          <h1 style={{ fontSize: 26, fontWeight: 800 }}>Invoice {inv.invoiceNumber}</h1>
+          <h1 style={{ fontSize: 26, fontWeight: 800 }}>
+            {t("forge.invoice_payment.title", { invoice_number: inv.invoiceNumber })}
+          </h1>
           <p style={{ opacity: 0.7, fontSize: 14 }}>{inv.profileName}</p>
         </div>
         <button
@@ -88,18 +93,26 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
             fontSize: 14,
           }}
         >
-          {downloadPdf.isPending ? "Preparing…" : "Download PDF"}
+          {downloadPdf.isPending ? t("forge.invoice_payment.preparing_pdf") : t("forge.invoice_payment.download_pdf")}
         </button>
       </div>
 
       <div style={{ fontSize: 14, opacity: 0.85, marginBottom: 16 }}>
         <div>
-          Billed to: {inv.clientName}
-          {inv.clientCompany ? ` · ${inv.clientCompany}` : ""}
+          {inv.clientCompany
+            ? t("forge.invoice_payment.billed_to_company", {
+                client_name: inv.clientName,
+                client_company: inv.clientCompany,
+              })
+            : t("forge.invoice_payment.billed_to", { client_name: inv.clientName })}
         </div>
         <div>
-          Issued: {formatDate(inv.issueDate)}
-          {inv.dueDate ? ` · Due: ${formatDate(inv.dueDate)}` : ""}
+          {inv.dueDate
+            ? t("forge.invoice_payment.issued_due", {
+                issue_date: formatDate(inv.issueDate),
+                due_date: formatDate(inv.dueDate),
+              })
+            : t("forge.invoice_payment.issued", { issue_date: formatDate(inv.issueDate) })}
         </div>
       </div>
 
@@ -123,7 +136,10 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
           >
             <span>
               {li.description}
-              <span style={{ opacity: 0.6 }}> × {li.quantity}</span>
+              <span style={{ opacity: 0.6 }}>
+                {" "}
+                {t("forge.invoice_payment.line_item_quantity", { quantity: li.quantity })}
+              </span>
             </span>
             <span>{money(Number(li.amount))}</span>
           </div>
@@ -142,13 +158,13 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
                 opacity: 0.8,
               }}
             >
-              <span>Tax</span>
+              <span>{t("forge.invoice_payment.tax")}</span>
               <span>{taxSummary.formattedTax}</span>
             </div>
           ) : null;
         })()}
         <div style={{ display: "flex", justifyContent: "space-between", padding: "12px 14px", fontWeight: 700 }}>
-          <span>Total</span>
+          <span>{t("forge.invoice_payment.total")}</span>
           <span style={{ color: theme.colors.primary, textAlign: "right" }}>
             {money(Number(inv.total))}
             {(() => {
@@ -168,18 +184,23 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
       {inv.notes && <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 16 }}>{inv.notes}</p>}
 
       {isPaid ? (
-        <p style={{ fontWeight: 700, color: theme.colors.primary }}>This invoice has been paid. Thank you!</p>
+        <p style={{ fontWeight: 700, color: theme.colors.primary }}>{t("forge.invoice_payment.paid_notice")}</p>
       ) : (
         <div>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>
+            {t("forge.invoice_payment.payment_heading")}
+          </h2>
           {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
           {/* Paystack brings its own modal, so it is checked before the Stripe
               renderer and needs none of it. */}
           {isPaystack ? (
             canOpenPaystack ? (
-              <PaystackPayButton onPay={openPaystackCheckout} label={`Pay ${money(Number(inv.total))}`} />
+              <PaystackPayButton
+                onPay={openPaystackCheckout}
+                label={t("forge.invoice_payment.pay_amount", { amount: money(Number(inv.total)) })}
+              />
             ) : (
-              <Loading label="Preparing payment…" size={22} />
+              <Loading label={t("forge.invoice_payment.preparing_payment")} size={22} />
             )
           ) : clientSecret ? (
             renderPayment?.({
@@ -191,9 +212,9 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
           ) : (
             <>
               {isStarting ? (
-                <Loading label="Preparing payment…" size={22} />
+                <Loading label={t("forge.invoice_payment.preparing_payment")} size={22} />
               ) : (
-                <p style={{ opacity: 0.7 }}>Payment is not available right now.</p>
+                <p style={{ opacity: 0.7 }}>{t("forge.invoice_payment.payment_unavailable")}</p>
               )}
             </>
           )}

package/src/ui/styled/LeadMagnet.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useLeadMagnetConfirm, useTrackLeadMagnetDownload } from "../../data/queries/useLeadMagnet";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -12,6 +13,7 @@ export interface LeadMagnetProps {
 
 /** Lead magnet delivery / download screen. Built on `useLeadMagnetConfirm` + `useTrackLeadMagnetDownload`. */
 export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const trackDownload = useTrackLeadMagnetDownload();
   const [isDownloading, setIsDownloading] = useState(false);
@@ -57,8 +59,10 @@ export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
   if (state === "error") {
     return (
       <div style={wrap}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Oops!</h1>
-        <p>{!leadMagnetId || !subscriberId ? "Invalid link" : "This link is invalid or has expired."}</p>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>{t("forge.lead_magnet.error_title")}</h1>
+        <p>
+          {!leadMagnetId || !subscriberId ? t("forge.lead_magnet.invalid_link") : t("forge.lead_magnet.expired_link")}
+        </p>
       </div>
     );
   }
@@ -67,11 +71,9 @@ export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
     <div style={wrap}>
       {profile && <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 8 }}>{profile.name}</p>}
       <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>
-        {leadMagnet?.thankYouMessage || "Thank you for subscribing!"}
+        {leadMagnet?.thankYouMessage || t("forge.lead_magnet.thank_you")}
       </h1>
-      <p style={{ opacity: 0.8, marginBottom: 32 }}>
-        Your download is ready. Click the button below to get your file.
-      </p>
+      <p style={{ opacity: 0.8, marginBottom: 32 }}>{t("forge.lead_magnet.description")}</p>
       <button
         onClick={handleDownload}
         disabled={isDownloading}
@@ -86,7 +88,7 @@ export function LeadMagnet({ leadMagnetId, subscriberId }: LeadMagnetProps) {
           color: theme.colors.background,
         }}
       >
-        {isDownloading ? "Preparing…" : "Download Now"}
+        {isDownloading ? t("forge.lead_magnet.preparing") : t("forge.lead_magnet.download")}
       </button>
     </div>
   );

package/src/ui/styled/LiveBroadcastList.tsx

@@ -0,0 +1,171 @@
+import { Calendar, Play } from "lucide-react";
+import { useLiveBroadcasts } from "../../data/queries/useBroadcasts";
+import type { ILiveBroadcast } from "../../types/models";
+import { formatDateTime } from "../../utils/formatDateTime";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { broadcastListStatus } from "../headless/broadcast/broadcastState";
+import { Loading } from "./Loading";
+
+export interface LiveBroadcastListProps {
+  /** Host-owned navigation. Falls back to a full page load. */
+  navigate?: (href: string) => void;
+  /** Where a card leads. Default `/i/live/:broadcastId`. */
+  broadcastPath?: (broadcastId: string) => string;
+}
+
+/**
+ * What is on now: the tenant's live, upcoming and just-ended broadcasts.
+ *
+ * The list itself is public. The paywall is on the WATCH page, where a gated
+ * broadcast asks for a ticket before a single frame is mounted, so a card here
+ * gives away nothing but a title and a start time.
+ */
+export function LiveBroadcastList({ navigate, broadcastPath }: LiveBroadcastListProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const { data: broadcasts, isLoading, error } = useLiveBroadcasts();
+
+  const href = (id: string) => (broadcastPath ? broadcastPath(id) : `/i/live/${id}`);
+  const go = (id: string) => {
+    const path = href(id);
+    if (navigate) navigate(path);
+    else if (typeof window !== "undefined") window.location.assign(path);
+  };
+
+  const centered = (title: string, body: string) => (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 400,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ textAlign: "center" }}>
+        <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>{title}</h3>
+        <p style={{ opacity: 0.8 }}>{body}</p>
+      </div>
+    </div>
+  );
+
+  if (isLoading) return <Loading fullPage />;
+
+  if (error) {
+    return centered(t("forge.live_broadcast_list.error_title"), t("forge.live_broadcast_list.error_body"));
+  }
+
+  if (!broadcasts || broadcasts.length === 0) {
+    return centered(t("forge.live_broadcast_list.empty_title"), t("forge.live_broadcast_list.empty_body"));
+  }
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        padding: "24px 16px",
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+      }}
+    >
+      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
+        <div style={{ marginBottom: 32 }}>
+          <h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 8, fontFamily: theme.headingFontFamily }}>
+            {t("forge.live_broadcast_list.title")}
+          </h1>
+          <p style={{ opacity: 0.8 }}>{t("forge.live_broadcast_list.subtitle")}</p>
+        </div>
+
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+            gap: 24,
+          }}
+        >
+          {broadcasts.map((broadcast: ILiveBroadcast) => {
+            const status = broadcastListStatus(broadcast);
+            const thumb = broadcast.thumbnailUrl || broadcast.generatedThumbnailUrl;
+
+            return (
+              <button
+                key={broadcast.id}
+                type="button"
+                onClick={() => go(broadcast.id)}
+                data-testid="live-broadcast-card"
+                style={{
+                  textAlign: "left",
+                  padding: 0,
+                  cursor: "pointer",
+                  overflow: "hidden",
+                  backgroundColor: theme.colors.background,
+                  color: theme.colors.text,
+                  borderRadius: theme.cornerRadius,
+                  boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+                  border: `1px solid ${theme.colors.primary}30`,
+                }}
+              >
+                <div style={{ position: "relative" }}>
+                  <div
+                    style={{
+                      aspectRatio: "16/9",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      position: "relative",
+                      background: `linear-gradient(135deg, ${theme.colors.primary}20, ${theme.colors.primary}10)`,
+                    }}
+                  >
+                    {thumb && (
+                      <img
+                        src={thumb}
+                        alt={broadcast.title}
+                        style={{
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover",
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                        }}
+                      />
+                    )}
+                    <Play size={40} style={{ color: theme.colors.primary, position: "relative", zIndex: 1 }} />
+                  </div>
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: 8,
+                      left: 8,
+                      padding: "4px 8px",
+                      borderRadius: 999,
+                      fontSize: 12,
+                      fontWeight: 600,
+                      background: status.background,
+                      color: status.color,
+                    }}
+                  >
+                    {status.text}
+                  </div>
+                </div>
+
+                <div style={{ padding: 16 }}>
+                  <h3 style={{ fontWeight: 600, marginBottom: 8 }}>{broadcast.title}</h3>
+                  {broadcast.startDate && (
+                    <div style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 13, opacity: 0.8 }}>
+                      <Calendar size={14} />
+                      <span>{formatDateTime(broadcast.startDate)}</span>
+                    </div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/Loading.tsx

@@ -1,3 +1,4 @@
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 
 export interface LoadingProps {
@@ -14,6 +15,7 @@ const alpha = (hex: string, a: number) => hex + Math.round(a * 255).toString(16)
 /** Themed loading spinner — drop-in from `@tribe-nest/forge/ui`. */
 export function Loading({ size = 28, label, fullPage }: LoadingProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const border = Math.max(2, Math.round(size / 9));
 
   const content = (
@@ -45,7 +47,11 @@ export function Loading({ size = 28, label, fullPage }: LoadingProps) {
         }}
       />
       {label && <span style={{ fontSize: 14, opacity: 0.7 }}>{label}</span>}
-      {!label && <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>Loading</span>}
+      {!label && (
+        <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>
+          {t("forge.loading.loading")}
+        </span>
+      )}
     </div>
   );
 

package/src/ui/styled/LoginForm.tsx

@@ -1,5 +1,6 @@
 import { useLoginFlow } from "../headless/auth/useLoginFlow";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 
 export interface LoginFormProps {
   /** Called after a successful login. The shell typically redirects here. */
@@ -12,10 +13,21 @@ export interface LoginFormProps {
 
 /** Themed 2FA login form (credentials → emailed code), built on `useLoginFlow`. */
 export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const flow = useLoginFlow({ onSuccess });
 
   const card: React.CSSProperties = {
+    // `width: 100%` is what stops this collapsing to its content.
+    //
+    // The host layout is a COLUMN flex container, and an auto cross-axis margin
+    // disables `align-items: stretch`. So `maxWidth` alone left the card
+    // shrink-to-fit and the auto margins centred whatever that came to. Sign-in
+    // has the least content of the auth forms (two fields, short labels), so it
+    // collapsed the furthest and looked broken next to signup.
+    //
+    // The cap is unchanged: this fills the container UP TO 420 and no further.
+    width: "100%",
     maxWidth: 420,
     margin: "40px auto 0",
     padding: 24,
@@ -48,9 +60,9 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
   if (flow.step === "code") {
     return (
       <div style={card}>
-        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>Verify your email</h1>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>{t("forge.login_form.verify_title")}</h1>
         <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 24 }}>
-          We sent a 6-digit code to <strong>{flow.email}</strong>
+          {t("forge.login_form.code_sent_to")} <strong>{flow.email}</strong>
         </p>
         {flow.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{flow.error}</p>}
         <form
@@ -71,12 +83,12 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
             style={{ ...input, textAlign: "center", fontSize: 24, letterSpacing: "0.4em" }}
           />
           <button type="submit" disabled={flow.isSubmitting || flow.code.length !== 6} style={button}>
-            {flow.isSubmitting ? "Verifying…" : "Verify & Sign In"}
+            {flow.isSubmitting ? t("forge.login_form.verifying") : t("forge.login_form.verify_submit")}
           </button>
         </form>
         <div style={{ display: "flex", justifyContent: "space-between", marginTop: 16, fontSize: 14 }}>
           <button type="button" onClick={flow.back} style={{ ...link, background: "none", border: "none", cursor: "pointer" }}>
-            Back to login
+            {t("forge.login_form.back_to_login")}
           </button>
           <button
             type="button"
@@ -84,7 +96,7 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
             disabled={flow.isSubmitting}
             style={{ ...link, background: "none", border: "none", cursor: "pointer" }}
           >
-            Resend code
+            {t("forge.login_form.resend_code")}
           </button>
         </div>
       </div>
@@ -93,7 +105,7 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
 
   return (
     <div style={card}>
-      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Login</h1>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>{t("forge.login_form.title")}</h1>
       {flow.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{flow.error}</p>}
       <form
         onSubmit={(e) => {
@@ -103,30 +115,36 @@ export function LoginForm({ onSuccess, signupHref, forgotHref }: LoginFormProps)
         style={{ display: "flex", flexDirection: "column", gap: 16 }}
       >
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <label style={{ fontSize: 14 }}>Email</label>
-          <input type="email" placeholder="Email" value={flow.email} onChange={(e) => flow.setEmail(e.target.value)} style={input} />
+          <label style={{ fontSize: 14 }}>{t("forge.login_form.email_label")}</label>
+          <input
+            type="email"
+            placeholder={t("forge.login_form.email_placeholder")}
+            value={flow.email}
+            onChange={(e) => flow.setEmail(e.target.value)}
+            style={input}
+          />
         </div>
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <label style={{ fontSize: 14 }}>Password</label>
+          <label style={{ fontSize: 14 }}>{t("forge.login_form.password_label")}</label>
           <input
             type="password"
-            placeholder="Password"
+            placeholder={t("forge.login_form.password_placeholder")}
             value={flow.password}
             onChange={(e) => flow.setPassword(e.target.value)}
             style={input}
           />
           <a href={forgotHref} style={{ ...link, fontSize: 13 }}>
-            Forgot password?
+            {t("forge.login_form.forgot_password")}
           </a>
         </div>
         <button type="submit" disabled={flow.isSubmitting} style={button}>
-          {flow.isSubmitting ? "Sending code…" : "Login"}
+          {flow.isSubmitting ? t("forge.login_form.sending_code") : t("forge.login_form.submit")}
         </button>
       </form>
       <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
-        Don&apos;t have an account?{" "}
+        {t("forge.login_form.no_account")}{" "}
         <a href={signupHref} style={link}>
-          Sign up
+          {t("forge.login_form.sign_up")}
         </a>
       </p>
     </div>