@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/CourseAccess.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties } from "react";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useCourseClassroom, type UseCourseClassroomOptions } from "../headless/course/useCourseClassroom";
 import { Loading } from "./Loading";
+import { useForgeT } from "../../i18n";
 
 export interface CourseAccessProps extends UseCourseClassroomOptions {
   /** Course access id (route param). */
@@ -36,7 +37,8 @@ export function CourseAccess({
   style,
   ...classroomOptions
 }: CourseAccessProps) {
-  const t = useThemeTokens();
+  const t = useForgeT();
+  const tokens = useThemeTokens();
   const classroom = useCourseClassroom(accessId, classroomOptions);
   const go = navigate ?? ((href: string) => window.location.assign(href));
 
@@ -46,24 +48,24 @@ export function CourseAccess({
     maxWidth: 520,
     margin: "0 auto",
     padding: 28,
-    borderRadius: t.cornerRadius,
-    border: `1px solid ${t.border}`,
-    background: t.surface,
-    color: t.text,
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${tokens.border}`,
+    background: tokens.surface,
+    color: tokens.text,
     textAlign: "center",
     display: "flex",
     flexDirection: "column",
     gap: 12,
-    fontFamily: t.fontFamily,
+    fontFamily: tokens.fontFamily,
   };
 
   const primaryButton: CSSProperties = {
     alignSelf: "center",
     padding: "10px 20px",
-    borderRadius: t.cornerRadius,
+    borderRadius: tokens.cornerRadius,
     border: "none",
-    background: t.primary,
-    color: t.textPrimary,
+    background: tokens.primary,
+    color: tokens.textPrimary,
     fontSize: 14,
     fontWeight: 700,
     cursor: "pointer",
@@ -74,17 +76,17 @@ export function CourseAccess({
   if (gate) {
     return (
       <div className={className} style={{ ...panel, ...style }}>
-        <h1 style={{ fontSize: 20, fontWeight: 800, fontFamily: t.headingFontFamily || t.fontFamily }}>
+        <h1 style={{ fontSize: 20, fontWeight: 800, fontFamily: tokens.headingFontFamily || tokens.fontFamily }}>
           {gate.title}
         </h1>
-        <p style={{ fontSize: 14, color: t.muted, lineHeight: 1.6 }}>{gate.body}</p>
+        <p style={{ fontSize: 14, color: tokens.muted, lineHeight: 1.6 }}>{gate.body}</p>
 
         {/* Naming the session they are in is what makes "wrong account"
             actionable — otherwise the reader has no idea which of their
             addresses they are currently signed in with. */}
         {gate.kind === "wrong_account" && classroom.signedInEmail && (
-          <p style={{ fontSize: 13, color: t.muted }}>
-            Signed in as <strong style={{ color: t.text }}>{classroom.signedInEmail}</strong>
+          <p style={{ fontSize: 13, color: tokens.muted }}>
+            {t("forge.course_access.signed_in_as")} <strong style={{ color: tokens.text }}>{classroom.signedInEmail}</strong>
           </p>
         )}
 
@@ -120,8 +122,8 @@ export function CourseAccess({
         gap: 24,
         maxWidth: 1100,
         margin: "0 auto",
-        color: t.text,
-        fontFamily: t.fontFamily,
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
         ...style,
       }}
     >
@@ -135,56 +137,59 @@ export function CourseAccess({
             alignItems: "center",
             gap: 12,
             padding: "10px 14px",
-            borderRadius: t.cornerRadius,
-            border: `1px solid ${t.border}`,
-            background: `${t.primary}0d`,
+            borderRadius: tokens.cornerRadius,
+            border: `1px solid ${tokens.border}`,
+            background: `${tokens.primary}0d`,
             fontSize: 13,
           }}
         >
-          <span style={{ flex: "1 1 260px", color: t.muted, lineHeight: 1.5 }}>
-            Anyone with this link can open your course. Create an account with{" "}
-            <strong style={{ color: t.text }}>{securePrompt.email}</strong> to keep it to yourself.
+          <span style={{ flex: "1 1 260px", color: tokens.muted, lineHeight: 1.5 }}>
+            {t("forge.course_access.secure_prompt_lead")}{" "}
+            <strong style={{ color: tokens.text }}>{securePrompt.email}</strong> {t("forge.course_access.secure_prompt_tail")}
           </span>
           <button
             type="button"
             onClick={() => go(securePrompt.href)}
             style={{
               padding: "6px 14px",
-              borderRadius: t.cornerRadius,
-              border: `1px solid ${t.primary}`,
+              borderRadius: tokens.cornerRadius,
+              border: `1px solid ${tokens.primary}`,
               background: "transparent",
-              color: t.primary,
+              color: tokens.primary,
               fontSize: 13,
               fontWeight: 600,
               cursor: "pointer",
             }}
           >
-            Secure my access
+            {t("forge.course_access.secure_action")}
           </button>
           <button
             type="button"
             onClick={classroom.dismissSecurePrompt}
-            aria-label="Dismiss"
+            aria-label={t("forge.course_access.aria_dismiss")}
             style={{
               padding: "6px 10px",
               border: "none",
               background: "transparent",
-              color: t.muted,
+              color: tokens.muted,
               fontSize: 13,
               cursor: "pointer",
             }}
           >
-            Not now
+            {t("forge.course_access.dismiss")}
           </button>
         </div>
       )}
 
       <header>
-        <h1 style={{ fontSize: 26, fontWeight: 800, fontFamily: t.headingFontFamily || t.fontFamily }}>
+        <h1 style={{ fontSize: 26, fontWeight: 800, fontFamily: tokens.headingFontFamily || tokens.fontFamily }}>
           {data.course.title}
         </h1>
-        <p style={{ fontSize: 14, color: t.muted }}>
-          {classroom.completedCount} of {classroom.lessons.length} lessons completed
+        <p style={{ fontSize: 14, color: tokens.muted }}>
+          {t("forge.course_access.lessons_completed", {
+            completed: classroom.completedCount,
+            total: classroom.lessons.length,
+          })}
         </p>
       </header>
 
@@ -205,12 +210,12 @@ export function CourseAccess({
                       style={{
                         textAlign: "left",
                         padding: "8px 10px",
-                        borderRadius: t.cornerRadius,
+                        borderRadius: tokens.cornerRadius,
                         border: "none",
                         cursor: "pointer",
                         fontSize: 14,
-                        background: isSelected ? `${t.primary}20` : "transparent",
-                        color: isSelected ? t.primary : t.text,
+                        background: isSelected ? `${tokens.primary}20` : "transparent",
+                        color: isSelected ? tokens.primary : tokens.text,
                         fontWeight: isSelected ? 600 : 400,
                       }}
                     >
@@ -235,7 +240,7 @@ export function CourseAccess({
                   controls
                   playsInline
                   onTimeUpdate={(e) => classroom.reportProgress(e.currentTarget.currentTime, e.currentTarget.duration)}
-                  style={{ width: "100%", aspectRatio: "16/9", background: "#000", borderRadius: t.cornerRadius }}
+                  style={{ width: "100%", aspectRatio: "16/9", background: "#000", borderRadius: tokens.cornerRadius }}
                 />
               ) : (
                 <div
@@ -245,12 +250,12 @@ export function CourseAccess({
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    background: `${t.text}0d`,
-                    borderRadius: t.cornerRadius,
-                    color: t.muted,
+                    background: `${tokens.text}0d`,
+                    borderRadius: tokens.cornerRadius,
+                    color: tokens.muted,
                   }}
                 >
-                  No video available for this lesson
+                  {t("forge.course_access.no_video")}
                 </div>
               )}
 
@@ -259,7 +264,7 @@ export function CourseAccess({
                   fontSize: 20,
                   fontWeight: 700,
                   margin: "16px 0 8px",
-                  fontFamily: t.headingFontFamily || t.fontFamily,
+                  fontFamily: tokens.headingFontFamily || tokens.fontFamily,
                 }}
               >
                 {selected.title}
@@ -267,7 +272,7 @@ export function CourseAccess({
 
               {files.length > 0 && (
                 <div style={{ marginBottom: 16 }}>
-                  <h3 style={{ fontWeight: 600, marginBottom: 8 }}>Additional Resources</h3>
+                  <h3 style={{ fontWeight: 600, marginBottom: 8 }}>{t("forge.course_access.resources_title")}</h3>
                   <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                     {files.map((file) => (
                       <a
@@ -279,16 +284,18 @@ export function CourseAccess({
                           display: "flex",
                           justifyContent: "space-between",
                           padding: "10px 12px",
-                          borderRadius: t.cornerRadius,
-                          border: `1px solid ${t.border}`,
-                          background: `${t.primary}10`,
-                          color: t.text,
+                          borderRadius: tokens.cornerRadius,
+                          border: `1px solid ${tokens.border}`,
+                          background: `${tokens.primary}10`,
+                          color: tokens.text,
                           textDecoration: "none",
                           fontSize: 14,
                         }}
                       >
                         <span>{file.filename}</span>
-                        <span style={{ color: t.muted }}>{(file.size / 1024 / 1024).toFixed(2)} MB</span>
+                        <span style={{ color: tokens.muted }}>
+                          {t("forge.course_access.file_size_mb", { size: (file.size / 1024 / 1024).toFixed(2) })}
+                        </span>
                       </a>
                     ))}
                   </div>
@@ -300,7 +307,7 @@ export function CourseAccess({
               )}
             </>
           ) : (
-            <p style={{ color: t.muted }}>No lesson selected.</p>
+            <p style={{ color: tokens.muted }}>{t("forge.course_access.no_lesson_selected")}</p>
           )}
         </main>
       </div>

package/src/ui/styled/CourseCheckout.tsx

@@ -2,6 +2,7 @@ import { type CSSProperties, type ReactNode, useMemo, useState } from "react";
 import { X } from "lucide-react";
 import type { AppliedDiscountCoupon, PublicCourse, QuestionnaireQuestion } from "../../types/models";
 import { useCourseCheckout } from "../headless/course/useCourseCheckout";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
@@ -54,12 +55,13 @@ const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString
  */
 export function CourseCheckout({
   slug,
-  triggerText = "Enroll",
+  triggerText,
   formatAmount,
   renderPayment,
   finalisePath,
   onComplete,
 }: CourseCheckoutProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const registered = usePaymentRenderer();
   const fmt = useAmountFormatter(formatAmount);
@@ -70,7 +72,7 @@ export function CourseCheckout({
 
   const tryClose = (next: boolean) => {
     if (!next && c.step !== "details" && typeof window !== "undefined") {
-      if (!window.confirm("Are you sure you want to leave checkout?")) return;
+      if (!window.confirm(t("forge.course_checkout.confirm_leave"))) return;
     }
     setOpen(next);
   };
@@ -78,7 +80,7 @@ export function CourseCheckout({
   return (
     <DialogRoot open={open} onOpenChange={tryClose}>
       <DialogTrigger asChild>
-        <button style={triggerButtonStyle(theme)}>{triggerText}</button>
+        <button style={triggerButtonStyle(theme)}>{triggerText ?? t("forge.course_checkout.trigger")}</button>
       </DialogTrigger>
       <DialogPortal>
         <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
@@ -101,16 +103,18 @@ export function CourseCheckout({
           aria-describedby={undefined}
         >
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
-            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>{c.course?.title ?? "Checkout"}</DialogTitle>
+            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>
+              {c.course?.title ?? t("forge.course_checkout.title")}
+            </DialogTitle>
             <DialogClose asChild>
-              <button aria-label="Close" style={closeButtonStyle(theme)}>
+              <button aria-label={t("forge.course_checkout.aria_close")} style={closeButtonStyle(theme)}>
                 <X size={18} />
               </button>
             </DialogClose>
           </div>
 
           {c.isLoading && <Loading />}
-          {!c.isLoading && !c.course && <p style={{ marginTop: 8 }}>Course not found.</p>}
+          {!c.isLoading && !c.course && <p style={{ marginTop: 8 }}>{t("forge.course_checkout.not_found")}</p>}
           {c.course && <CourseCheckoutBody c={c} course={c.course} fmt={fmt} renderPayment={renderPay} />}
         </DialogContent>
       </DialogPortal>
@@ -184,6 +188,7 @@ function Progress({ current }: { current: number }) {
 
 // ── Step 1: buyer details + questionnaire ─────────────────────────────────────
 function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fmt: (n: number) => string }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const [confirmEmail, setConfirmEmail] = useState("");
   const [answers, setAnswers] = useState<Record<string, string>>({});
@@ -202,38 +207,43 @@ function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fm
 
   const onContinue = () => {
     setLocalError(null);
-    if (!c.firstName.trim() || !c.lastName.trim()) return setLocalError("Please enter your name.");
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email)) return setLocalError("Please enter a valid email.");
-    if (c.email !== confirmEmail) return setLocalError("Emails do not match.");
+    if (!c.firstName.trim() || !c.lastName.trim()) return setLocalError(t("forge.course_checkout.error_name_required"));
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email)) return setLocalError(t("forge.course_checkout.error_email_invalid"));
+    if (c.email !== confirmEmail) return setLocalError(t("forge.course_checkout.error_email_mismatch"));
     for (const q of questions) {
-      if (!q.optional && !(answers[q.id] ?? "").trim()) return setLocalError(`Please answer: ${q.question}`);
+      if (!q.optional && !(answers[q.id] ?? "").trim())
+        return setLocalError(t("forge.course_checkout.error_answer_required", { question: q.question }));
     }
     c.continueToPayment();
   };
 
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>{isFree ? "Get access" : "Contact Information"}</h2>
-      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>
-        Please provide your contact information for the purchase.
-      </p>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>
+        {isFree ? t("forge.course_checkout.free_title") : t("forge.course_checkout.details_title")}
+      </h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.course_checkout.details_subtitle")}</p>
       <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
         <div style={{ display: "flex", gap: 8 }}>
-          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle(theme)} />
-          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle(theme)} />
+          <input placeholder={t("forge.course_checkout.first_name_placeholder")} value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle(theme)} />
+          <input placeholder={t("forge.course_checkout.last_name_placeholder")} value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle(theme)} />
         </div>
         <div>
-          <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle(theme)} />
-          {c.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email) && <FieldError>Please enter a valid email address</FieldError>}
+          <input placeholder={t("forge.course_checkout.email_placeholder")} type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle(theme)} />
+          {c.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email) && (
+            <FieldError>{t("forge.course_checkout.email_invalid_hint")}</FieldError>
+          )}
         </div>
         <div>
-          <input placeholder="Confirm email" type="email" value={confirmEmail} onChange={(e) => setConfirmEmail(e.target.value)} style={inputStyle(theme)} />
-          {confirmEmail && c.email !== confirmEmail && <FieldError>Email addresses do not match</FieldError>}
+          <input placeholder={t("forge.course_checkout.confirm_email_placeholder")} type="email" value={confirmEmail} onChange={(e) => setConfirmEmail(e.target.value)} style={inputStyle(theme)} />
+          {confirmEmail && c.email !== confirmEmail && (
+            <FieldError>{t("forge.course_checkout.email_mismatch_hint")}</FieldError>
+          )}
         </div>
 
         {questions.length > 0 && (
           <div style={{ marginTop: 8, paddingTop: 16, borderTop: `1px solid ${a(theme.colors.primary, 0.13)}` }}>
-            <h3 style={{ fontSize: 17, fontWeight: 700, marginBottom: 12 }}>Additional Information</h3>
+            <h3 style={{ fontSize: 17, fontWeight: 700, marginBottom: 12 }}>{t("forge.course_checkout.questions_title")}</h3>
             <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
               {questions.map((q) => {
                 const missing = !q.optional && !(answers[q.id] ?? "").trim();
@@ -245,7 +255,7 @@ function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fm
                     </span>
                     {q.type === "select" && q.options && q.options.length > 0 ? (
                       <select value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)}>
-                        <option value="">Select…</option>
+                        <option value="">{t("forge.course_checkout.select_placeholder")}</option>
                         {q.options.map((opt) => (
                           <option key={opt} value={opt}>
                             {opt}
@@ -262,7 +272,7 @@ function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fm
                     ) : (
                       <input value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)} />
                     )}
-                    {missing && <FieldError>This field is required</FieldError>}
+                    {missing && <FieldError>{t("forge.course_checkout.field_required")}</FieldError>}
                   </label>
                 );
               })}
@@ -279,9 +289,7 @@ function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fm
           </div>
         )}
 
-        <p style={{ fontSize: 12, opacity: 0.6 }}>
-          By continuing, you agree to receive course access and important updates via email.
-        </p>
+        <p style={{ fontSize: 12, opacity: 0.6 }}>{t("forge.course_checkout.consent")}</p>
 
         {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
       </div>
@@ -293,7 +301,13 @@ function DetailsStep({ c, course, fmt }: { c: Checkout; course: PublicCourse; fm
         discountAmount={c.coupon.discountAmount}
         appliedCoupons={c.coupon.appliedCoupons}
         onNext={onContinue}
-        nextLabel={c.isProcessing ? "Processing…" : isFree ? "Confirm Purchase" : "Continue to Payment"}
+        nextLabel={
+          c.isProcessing
+            ? t("forge.course_checkout.processing")
+            : isFree
+              ? t("forge.course_checkout.confirm_purchase")
+              : t("forge.course_checkout.continue_to_payment")
+        }
         nextDisabled={c.isProcessing}
       />
     </div>
@@ -312,6 +326,7 @@ function PaymentStep({
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   // The server's figure once it exists — the booking quote is already net of
   // any discount, so the buyer never sees a total that disagrees with the charge.
@@ -322,8 +337,8 @@ function PaymentStep({
   const taxSummary = summarizeTaxQuote(c.taxQuote);
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Payment</h2>
-      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>Complete your purchase to access the course.</p>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>{t("forge.course_checkout.payment_title")}</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.course_checkout.payment_subtitle")}</p>
       <div
         style={{
           padding: 20,
@@ -339,7 +354,7 @@ function PaymentStep({
           fmt={fmt}
         />
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <span style={{ fontSize: 16 }}>Total Amount</span>
+        <span style={{ fontSize: 16 }}>{t("forge.course_checkout.total_amount")}</span>
         <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary }}>
           {compareAt != null && compareAt > amount && (
             <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 16 }}>
@@ -349,7 +364,9 @@ function PaymentStep({
           {fmt(amount)}
           {taxSummary && (
             <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
-              {taxSummary.mode === "inclusive" ? taxSummary.label : `+ ${taxSummary.formattedTax} tax`}
+              {taxSummary.mode === "inclusive"
+                ? taxSummary.label
+                : t("forge.course_checkout.tax_added", { amount: taxSummary.formattedTax })}
             </span>
           )}
         </span>
@@ -359,19 +376,19 @@ function PaymentStep({
           so it is checked BEFORE the "not configured" branch. */}
       {c.isPaystack ? (
         c.canOpenPaystack ? (
-          <PaystackPayButton onPay={c.openPaystackCheckout} label={`Pay ${fmt(amount)}`} />
+          <PaystackPayButton onPay={c.openPaystackCheckout} label={t("forge.course_checkout.pay", { amount: fmt(amount) })} />
         ) : (
-          <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+          <p style={{ opacity: 0.7 }}>{t("forge.course_checkout.preparing_payment")}</p>
         )
       ) : !renderPayment ? (
-        <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
+        <p style={{ color: "#ef4444", fontSize: 14 }}>{t("forge.course_checkout.payment_not_configured")}</p>
       ) : c.clientSecret ? (
         renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount, mode: "redirect" })
       ) : (
-        <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+        <p style={{ opacity: 0.7 }}>{t("forge.course_checkout.preparing_payment")}</p>
       )}
       <button onClick={() => c.setStep("details")} style={{ ...secondaryButtonStyle(theme), marginTop: 16 }}>
-        Back
+        {t("forge.course_checkout.back")}
       </button>
     </div>
   );
@@ -405,6 +422,7 @@ function ActionBar({
   nextLabel: string;
   nextDisabled?: boolean;
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   return (
     <div style={{ marginTop: 24 }}>
@@ -423,7 +441,7 @@ function ActionBar({
           fmt={fmt}
         />
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <span style={{ fontWeight: 600 }}>Total</span>
+          <span style={{ fontWeight: 600 }}>{t("forge.course_checkout.total")}</span>
           <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>
             {compareAt != null && compareAt > amount && (
               <span style={{ textDecoration: "line-through", opacity: 0.6, marginRight: 8, fontWeight: 400, fontSize: 14 }}>
@@ -436,7 +454,7 @@ function ActionBar({
       </div>
       <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
         <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>
-          Back
+          {t("forge.course_checkout.back")}
         </button>
         <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>
           {nextLabel}

package/src/ui/styled/CourseConfirmation.tsx

@@ -13,6 +13,7 @@ import {
   ConfirmationLostCheckout,
   alpha,
 } from "./Confirmation";
+import { useForgeT } from "../../i18n";
 import { useCourseBookingFinalize } from "../../data/queries/useFinalize";
 import { useGetCourse } from "../../data/queries/useCourses";
 import { useBookingSecret } from "../headless/booking/useBookingSecret";
@@ -39,6 +40,7 @@ export function CourseConfirmation({
   restartPath,
 }: CourseConfirmationProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   // The credential the checkout stashed before the payment redirect. `resolved`
   // gates the finalise: storage can only be read on the client, so firing before
@@ -57,7 +59,7 @@ export function CourseConfirmation({
   if (!resolved || isLoading) {
     return (
       <ConfirmationStage>
-        <Loading label="Confirming your enrollment…" />
+        <Loading label={t("forge.course_confirmation.loading")} />
       </ConfirmationStage>
     );
   }
@@ -70,17 +72,17 @@ export function CourseConfirmation({
       return (
         <ConfirmationStage>
           <ConfirmationLostCheckout
-            title="We can’t confirm your enrollment in this browser"
-            body="Confirming an enrollment needs the checkout details saved in the tab you started in, and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your enrollment email, so check your inbox before paying again. Otherwise, start the enrollment over."
+            title={t("forge.course_confirmation.lost_title")}
+            body={t("forge.course_confirmation.lost_body")}
             restartPath={restartPath ?? `/i/courses/${slug}`}
-            restartLabel="Start over"
+            restartLabel={t("forge.course_confirmation.lost_restart")}
           />
         </ConfirmationStage>
       );
     }
     return (
       <ConfirmationStage>
-        <p style={{ color: text }}>We couldn’t find your enrollment.</p>
+        <p style={{ color: text }}>{t("forge.course_confirmation.not_found")}</p>
       </ConfirmationStage>
     );
   }
@@ -107,15 +109,21 @@ export function CourseConfirmation({
               animationDelay: "0.15s",
             }}
           >
-            {confirmed ? "Enrollment" : "Action needed"}
+            {confirmed
+              ? t("forge.course_confirmation.eyebrow_confirmed")
+              : t("forge.course_confirmation.eyebrow_action_needed")}
           </p>
           <h1 className="cf-rise" style={{ fontSize: 29, fontWeight: 800, lineHeight: 1.12, margin: "0 0 8px", animationDelay: "0.22s" }}>
-            {confirmed ? "You’re enrolled 🎓" : "Enrollment not completed"}
+            {confirmed
+              ? t("forge.course_confirmation.title_confirmed")
+              : t("forge.course_confirmation.title_incomplete")}
           </h1>
           <p className="cf-rise" style={{ fontSize: 15, color: alpha(text, 0.7), margin: "0 auto", maxWidth: 340, animationDelay: "0.3s" }}>
             {confirmed
-              ? `Welcome aboard${data.firstName ? `, ${data.firstName}` : ""}! Your spot is secured.`
-              : `Your enrollment is ${data.status}. If you were charged, contact support and we’ll help.`}
+              ? data.firstName
+                ? t("forge.course_confirmation.body_confirmed", { first_name: data.firstName })
+                : t("forge.course_confirmation.body_confirmed_no_name")
+              : t("forge.course_confirmation.body_incomplete", { status: data.status })}
           </p>
         </div>
 
@@ -143,7 +151,9 @@ export function CourseConfirmation({
               <div style={{ minWidth: 0 }}>
                 <div style={{ fontSize: 16, fontWeight: 800 }}>{course.title}</div>
                 {course.modules?.length ? (
-                  <div style={{ fontSize: 13, color: alpha(text, 0.6) }}>{course.modules.length} modules</div>
+                  <div style={{ fontSize: 13, color: alpha(text, 0.6) }}>
+                    {t("forge.course_confirmation.module_count", { count: course.modules.length })}
+                  </div>
                 ) : null}
               </div>
             </div>
@@ -177,20 +187,30 @@ export function CourseConfirmation({
             </div>
           )}
           <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 12, columnGap: 16, margin: 0 }}>
-            <ConfirmationRow label="Student" value={`${data.firstName} ${data.lastName}`.trim() || "Not given"} />
-            <ConfirmationRow label="Reference" value={`#${data.id.slice(0, 8).toUpperCase()}`} mono />
+            <ConfirmationRow
+              label={t("forge.course_confirmation.row_student")}
+              value={`${data.firstName} ${data.lastName}`.trim() || t("forge.course_confirmation.not_given")}
+            />
+            <ConfirmationRow
+              label={t("forge.course_confirmation.row_reference")}
+              value={`#${data.id.slice(0, 8).toUpperCase()}`}
+              mono
+            />
             {Number(data.taxAmount || 0) > 0 && !data.taxInclusive && (
-              <ConfirmationRow label="Tax" value={fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} />
+              <ConfirmationRow
+                label={t("forge.course_confirmation.row_tax")}
+                value={fmt(Number(data.taxAmount), data.chargedCurrency || undefined)}
+              />
             )}
             {/* The exact charged total (charged currency) when present — never a re-converted catalog amount. */}
             <ConfirmationRow
-              label="Paid"
+              label={t("forge.course_confirmation.row_paid")}
               value={
                 Number(data.totalAmountInChargedCurrency ?? data.totalAmount) > 0
                   ? data.totalAmountInChargedCurrency
                     ? fmt(Number(data.totalAmountInChargedCurrency), data.chargedCurrency || undefined)
                     : fmt(data.totalAmount)
-                  : "Free"
+                  : t("forge.course_confirmation.free")
               }
               accent
               strong
@@ -198,7 +218,9 @@ export function CourseConfirmation({
           </dl>
           {Number(data.taxAmount || 0) > 0 && data.taxInclusive && (
             <div style={{ textAlign: "right", fontSize: 12, color: alpha(text, 0.6), marginTop: 6 }}>
-              Includes {fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} tax
+              {t("forge.course_confirmation.tax_included", {
+                amount: fmt(Number(data.taxAmount), data.chargedCurrency || undefined),
+              })}
             </div>
           )}
         </div>
@@ -221,7 +243,7 @@ export function CourseConfirmation({
               textDecoration: "none",
             }}
           >
-            Browse more courses <ArrowRight size={16} />
+            {t("forge.course_confirmation.explore")} <ArrowRight size={16} />
           </a>
         </div>
       </ConfirmationCard>