@tribe-nest/forge 3.25.0 → 3.29.0

package/src/ui/styled/AiAgentWidget.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAiAgent } from "../headless/agent/useAiAgent";
@@ -24,6 +25,7 @@ export interface AiAgentWidgetProps {
  * behavior. For custom UI, use the `useAiAgent()` hook instead.
  */
 export function AiAgentWidget({ position = "bottom-right", accentColor, title, zIndex = 9999 }: AiAgentWidgetProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const { isEnabled, config, messages, sending, error, send } = useAiAgent();
   const [open, setOpen] = useState(false);
@@ -33,7 +35,7 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
   const accent = accentColor || theme.colors.primary;
   const onAccent = readableTextOn(accent);
   const side = position === "bottom-left" ? { left: 20 } : { right: 20 };
-  const heading = title || config?.displayName || "Assistant";
+  const heading = title || config?.displayName || t("forge.ai_agent_widget.default_title");
 
   useEffect(() => {
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
@@ -67,14 +69,16 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
         >
           <div style={{ background: accent, color: onAccent, padding: "12px 16px", fontWeight: 600, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
             <span>{heading}</span>
-            <button onClick={() => setOpen(false)} style={{ background: "transparent", border: "none", color: onAccent, cursor: "pointer", fontSize: 20, lineHeight: 1 }} aria-label="Close">
+            <button onClick={() => setOpen(false)} style={{ background: "transparent", border: "none", color: onAccent, cursor: "pointer", fontSize: 20, lineHeight: 1 }} aria-label={t("forge.ai_agent_widget.aria_close")}>
               ×
             </button>
           </div>
 
           <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
             {messages.length === 0 && (
-              <div style={{ opacity: 0.7, fontSize: 14 }}>{config?.greeting || "Hi! Ask me anything."}</div>
+              <div style={{ opacity: 0.7, fontSize: 14 }}>
+                {config?.greeting || t("forge.ai_agent_widget.default_greeting")}
+              </div>
             )}
             {messages.map((m, i) => (
               <div
@@ -105,7 +109,7 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && submit()}
-              placeholder="Type a message…"
+              placeholder={t("forge.ai_agent_widget.input_placeholder")}
               disabled={sending}
               style={{
                 flex: 1,
@@ -123,7 +127,7 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
               disabled={sending || !input.trim()}
               style={{ background: accent, color: onAccent, border: "none", borderRadius: theme.cornerRadius, padding: "0 16px", cursor: "pointer", fontWeight: 600 }}
             >
-              Send
+              {t("forge.ai_agent_widget.send")}
             </button>
           </div>
         </div>
@@ -131,7 +135,7 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
 
       <button
         onClick={() => setOpen((o) => !o)}
-        aria-label="Open chat assistant"
+        aria-label={t("forge.ai_agent_widget.aria_open")}
         style={{
           width: 56,
           height: 56,

package/src/ui/styled/AudioPlayer.tsx

@@ -1,5 +1,6 @@
 import { SkipBack, SkipForward, Play, Pause, X } from "lucide-react";
 import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 
 function fmtTime(s: number): string {
@@ -26,6 +27,7 @@ export interface AudioPlayerProps {
  * playback and dismisses the bar.
  */
 export function AudioPlayer({ hideWhenEmpty = true, fixed = true }: AudioPlayerProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const a = useAudioPlayer();
 
@@ -64,19 +66,25 @@ export function AudioPlayer({ hideWhenEmpty = true, fixed = true }: AudioPlayerP
           style={{ width: 44, height: 44, borderRadius: theme.cornerRadius, objectFit: "cover", flexShrink: 0 }}
         />
       )}
-      <button onClick={a.playPrevious} style={ctrlBtn} aria-label="Previous">
+      <button onClick={a.playPrevious} style={ctrlBtn} aria-label={t("forge.audio_player.previous")}>
         <SkipBack size={18} />
       </button>
-      <button onClick={() => (a.isPlaying ? a.pause() : a.play())} style={ctrlBtn} aria-label={a.isPlaying ? "Pause" : "Play"}>
+      <button
+        onClick={() => (a.isPlaying ? a.pause() : a.play())}
+        style={ctrlBtn}
+        aria-label={a.isPlaying ? t("forge.audio_player.pause") : t("forge.audio_player.play")}
+      >
         {a.isPlaying ? <Pause size={20} /> : <Play size={20} />}
       </button>
-      <button onClick={a.playNext} style={ctrlBtn} aria-label="Next">
+      <button onClick={a.playNext} style={ctrlBtn} aria-label={t("forge.audio_player.next")}>
         <SkipForward size={18} />
       </button>
 
       <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-          {a.currentTrack?.title ?? "Nothing playing"}
+        <div
+          style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+        >
+          {a.currentTrack?.title ?? t("forge.audio_player.nothing_playing")}
           {a.currentTrack?.artist ? ` · ${a.currentTrack.artist}` : ""}
         </div>
         <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, opacity: 0.8 }}>
@@ -93,7 +101,7 @@ export function AudioPlayer({ hideWhenEmpty = true, fixed = true }: AudioPlayerP
         </div>
       </div>
 
-      <button onClick={a.stop} style={{ ...ctrlBtn, opacity: 0.7 }} aria-label="Close player">
+      <button onClick={a.stop} style={{ ...ctrlBtn, opacity: 0.7 }} aria-label={t("forge.audio_player.aria_close")}>
         <X size={18} />
       </button>
     </div>

package/src/ui/styled/BlogCategory.tsx

@@ -1,5 +1,6 @@
 import { useBlogCategory, useBlogCategoryPosts } from "../../data/queries/useBlog";
 import type { BlogPost, BlogCategory as BlogCategoryModel } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -19,11 +20,12 @@ function excerpt(html: string, len: number) {
 /** Blog category page — grid of posts in a category. Built on `useBlogCategory` + `useBlogCategoryPosts`. */
 export function BlogCategory({ slug, blogPostHref = (s) => `/i/blog/${s}`, initialCategory }: BlogCategoryProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const { data: category, isLoading: catLoading } = useBlogCategory(slug, { initialData: initialCategory });
   const { data: posts, isLoading: postsLoading } = useBlogCategoryPosts(slug, { page: 1, limit: 12 });
 
   if (catLoading || postsLoading) return <Loading fullPage />;
-  if (!category) return <p>Category not found.</p>;
+  if (!category) return <p>{t("forge.blog_category.not_found")}</p>;
 
   const list = posts?.data ?? [];
 
@@ -72,7 +74,7 @@ export function BlogCategory({ slug, blogPostHref = (s) => `/i/blog/${s}`, initi
           })}
         </div>
       ) : (
-        <p style={{ opacity: 0.7 }}>No posts yet.</p>
+        <p style={{ opacity: 0.7 }}>{t("forge.blog_category.empty_title")}</p>
       )}
     </div>
   );

package/src/ui/styled/BlogComments.tsx

@@ -9,6 +9,7 @@ import {
   type BlogComment,
 } from "../../data/queries/useBlogComments";
 import { BotProtection, EMPTY_BOT_FIELDS, type BotFields } from "./BotProtection";
+import { useForgeT } from "../../i18n";
 
 export interface BlogCommentsProps {
   blogPostId: string;
@@ -31,7 +32,8 @@ function formatDate(iso: string): string {
  * (apps/client, site-starter, AI-code-built sites). Renders nothing when the
  * profile has comments disabled.
  */
-export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", signInHref, className, style }: BlogCommentsProps) {
+export function BlogComments({ blogPostId, pageSize = 10, title, signInHref, className, style }: BlogCommentsProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const { token } = useForge();
   const isSignedIn = !!token;
@@ -53,6 +55,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
     [commentsQuery.data],
   );
   const total = commentsQuery.data?.pages?.[0]?.total ?? 0;
+  const heading = title ?? t("forge.blog_comments.title");
 
   const muted = theme.colors.muted ?? `${theme.colors.text}99`;
   const border = theme.colors.border ?? `${theme.colors.primary}33`;
@@ -74,11 +77,11 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
     setError(null);
     const trimmed = content.trim();
     if (!trimmed) {
-      setError("Please write a comment.");
+      setError(t("forge.blog_comments.error_empty"));
       return;
     }
     if (!isSignedIn && (!name.trim() || !email.trim())) {
-      setError("Name and email are required.");
+      setError(t("forge.blog_comments.error_identity_required"));
       return;
     }
     try {
@@ -96,7 +99,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
       setBotResetKey((k) => k + 1);
     } catch (e) {
       const message =
-        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ?? "Something went wrong. Please try again.";
+        (e as { response?: { data?: { message?: string } } })?.response?.data?.message ?? t("forge.blog_comments.error_generic");
       setError(message);
     }
   };
@@ -109,8 +112,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
       style={{ color: theme.colors.text, fontFamily: theme.fontFamily, textAlign: "left", ...style }}
     >
       <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>
-        {title}
-        {total > 0 ? ` (${total})` : ""}
+        {total > 0 ? t("forge.blog_comments.title_with_count", { title: heading, count: total }) : heading}
       </h2>
 
       {/* Form */}
@@ -118,33 +120,38 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
         <p style={{ color: muted, marginBottom: 24 }}>
           {signInHref ? (
             <a href={signInHref} style={{ color: theme.colors.primary }}>
-              Sign in
+              {t("forge.blog_comments.sign_in")}
             </a>
           ) : (
-            "Sign in"
+            t("forge.blog_comments.sign_in")
           )}{" "}
-          to leave a comment.
+          {t("forge.blog_comments.sign_in_suffix")}
         </p>
       ) : pendingNotice ? (
         <div
           style={{ padding: 12, borderRadius: theme.cornerRadius, background: `${theme.colors.primary}14`, marginBottom: 24 }}
         >
-          Thanks! Your comment is awaiting moderation.
+          {t("forge.blog_comments.pending_notice")}
           <button
             onClick={() => setPendingNotice(false)}
             style={{ marginLeft: 8, background: "none", border: "none", color: theme.colors.primary, cursor: "pointer" }}
           >
-            Write another
+            {t("forge.blog_comments.write_another")}
           </button>
         </div>
       ) : (
         <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 28 }}>
           {!isSignedIn && (
             <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
-              <input placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} style={{ ...inputStyle, flex: 1, minWidth: 160 }} />
+              <input
+                placeholder={t("forge.blog_comments.name_placeholder")}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                style={{ ...inputStyle, flex: 1, minWidth: 160 }}
+              />
               <input
                 type="email"
-                placeholder="Email (not published)"
+                placeholder={t("forge.blog_comments.email_placeholder")}
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 style={{ ...inputStyle, flex: 1, minWidth: 160 }}
@@ -152,7 +159,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
             </div>
           )}
           <textarea
-            placeholder="Add a comment…"
+            placeholder={t("forge.blog_comments.comment_placeholder")}
             value={content}
             onChange={(e) => setContent(e.target.value)}
             rows={3}
@@ -175,7 +182,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
                 opacity: submit.isPending ? 0.7 : 1,
               }}
             >
-              {submit.isPending ? "Posting…" : "Post comment"}
+              {submit.isPending ? t("forge.blog_comments.submitting") : t("forge.blog_comments.submit")}
             </button>
           </div>
         </div>
@@ -183,15 +190,15 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
 
       {/* List */}
       {commentsQuery.isLoading ? (
-        <p style={{ color: muted }}>Loading comments…</p>
+        <p style={{ color: muted }}>{t("forge.blog_comments.loading")}</p>
       ) : comments.length === 0 ? (
-        <p style={{ color: muted }}>No comments yet. Be the first.</p>
+        <p style={{ color: muted }}>{t("forge.blog_comments.empty_title")}</p>
       ) : (
         <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
           {comments.map((c) => (
             <div key={c.id}>
               <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
-                <strong>{c.authorName || "Anonymous"}</strong>
+                <strong>{c.authorName || t("forge.blog_comments.anonymous")}</strong>
                 <span style={{ color: muted, fontSize: 13 }}>{formatDate(c.createdAt)}</span>
               </div>
               <p style={{ margin: "4px 0", whiteSpace: "pre-wrap" }}>{c.content}</p>
@@ -200,7 +207,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
                   {c.replies.map((r) => (
                     <div key={r.id}>
                       <div style={{ display: "flex", justifyContent: "space-between", gap: 12 }}>
-                        <strong style={{ color: theme.colors.primary }}>{r.authorName || "Author"}</strong>
+                        <strong style={{ color: theme.colors.primary }}>{r.authorName || t("forge.blog_comments.author")}</strong>
                         <span style={{ color: muted, fontSize: 13 }}>{formatDate(r.createdAt)}</span>
                       </div>
                       <p style={{ margin: "4px 0", whiteSpace: "pre-wrap" }}>{r.content}</p>
@@ -227,7 +234,7 @@ export function BlogComments({ blogPostId, pageSize = 10, title = "Comments", si
               cursor: "pointer",
             }}
           >
-            {commentsQuery.isFetchingNextPage ? "Loading…" : "Load more comments"}
+            {commentsQuery.isFetchingNextPage ? t("forge.blog_comments.loading_more") : t("forge.blog_comments.load_more")}
           </button>
         </div>
       )}

package/src/ui/styled/BlogList.tsx

@@ -1,5 +1,6 @@
 import { useFeaturedBlogPost, useBlogPosts } from "../../data/queries/useBlog";
 import type { BlogPost } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { Loading } from "./Loading";
 
@@ -19,6 +20,7 @@ function excerpt(html: string, len: number) {
 
 /** Blog index — featured post + grid of remaining posts. Built on `useFeaturedBlogPost` + `useBlogPosts`. */
 export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogListProps = {}) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const { data: featured, isLoading: loadingFeatured } = useFeaturedBlogPost();
   const { data, isLoading: loadingPosts } = useBlogPosts({ page: 1, limit: 12 });
@@ -39,7 +41,7 @@ export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogLis
 
   return (
     <div style={{ maxWidth: 900, margin: "0 auto", color: theme.colors.text }}>
-      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24 }}>Blog</h1>
+      <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24 }}>{t("forge.blog_list.title")}</h1>
 
       {featured && (
         <a href={blogPostHref(featured.slug)} style={{ ...card, marginBottom: 32 }}>
@@ -61,7 +63,7 @@ export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogLis
                   color: theme.colors.background,
                 }}
               >
-                Featured
+                {t("forge.blog_list.featured_badge")}
               </span>
               {featured.publishedAt && (
                 <span style={{ fontSize: 13, opacity: 0.6 }}>{formatDate(featured.publishedAt)}</span>
@@ -94,7 +96,7 @@ export function BlogList({ blogPostHref = (slug) => `/i/blog/${slug}` }: BlogLis
           })}
         </div>
       ) : (
-        !featured && <p style={{ opacity: 0.7 }}>No blog posts available yet.</p>
+        !featured && <p style={{ opacity: 0.7 }}>{t("forge.blog_list.empty_body")}</p>
       )}
     </div>
   );

package/src/ui/styled/BlogPost.tsx

@@ -3,6 +3,7 @@ import { useBlogPost } from "../../data/queries/useBlog";
 import { useAudioPlayer } from "../../contexts/AudioPlayerContext";
 import type { BlogPost as BlogPostModel } from "../../types/models";
 import { useForgeTheme, useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
 // Baseline `.rich-text` content styles ship with Forge (WYSIWYG with the admin
 // editor) — no host-loaded stylesheet needed.
@@ -46,7 +47,8 @@ function AudioAttachmentBar({
   audio: BlogPostModel["media"][number];
   coverImage?: string;
 }) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const player = useAudioPlayer();
 
   const isCurrent = player.currentTrack?.id === post.id;
@@ -71,15 +73,15 @@ function AudioAttachmentBar({
         gap: 16,
         padding: 16,
         marginBottom: 24,
-        border: `1px solid ${t.border}`,
-        borderRadius: t.cornerRadius,
-        background: t.surface,
+        border: `1px solid ${tokens.border}`,
+        borderRadius: tokens.cornerRadius,
+        background: tokens.surface,
       }}
     >
       <button
         type="button"
         onClick={onClick}
-        aria-label={isPlaying ? "Pause" : "Play"}
+        aria-label={isPlaying ? t("forge.blog_post.pause") : t("forge.blog_post.play")}
         style={{
           display: "inline-flex",
           alignItems: "center",
@@ -89,12 +91,12 @@ function AudioAttachmentBar({
           border: "none",
           cursor: "pointer",
           fontWeight: 600,
-          background: t.primary,
-          color: t.textPrimary,
+          background: tokens.primary,
+          color: tokens.textPrimary,
         }}
       >
         {isPlaying ? <Pause size={18} /> : <Play size={18} />}
-        {isPlaying ? "Pause" : "Play"}
+        {isPlaying ? t("forge.blog_post.pause") : t("forge.blog_post.play")}
       </button>
       {duration && <span style={{ fontSize: 14, opacity: 0.6, fontVariantNumeric: "tabular-nums" }}>{duration}</span>}
     </div>
@@ -104,11 +106,12 @@ function AudioAttachmentBar({
 /** Blog post detail, resolved by slug. Built on `useBlogPost`. */
 export function BlogPost({ slug, blogHref = "/i/blog", initialPost }: BlogPostProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   // Detail is resolved by slug (the public API looks posts up by slug).
   const { data: post, isLoading } = useBlogPost(slug, { initialData: initialPost });
 
   if (isLoading) return <Loading fullPage />;
-  if (!post) return <p>Post not found.</p>;
+  if (!post) return <p>{t("forge.blog_post.not_found")}</p>;
 
   // Cover is the first image media — audio posts put the audio file first in
   // `media`, which must not be rendered as an <img>. `type` may be a bare kind
@@ -120,7 +123,7 @@ export function BlogPost({ slug, blogHref = "/i/blog", initialPost }: BlogPostPr
   return (
     <article style={{ maxWidth: 720, margin: "0 auto", color: theme.colors.text }}>
       <a href={blogHref} style={{ color: theme.colors.primary, fontSize: 14 }}>
-        ← Back to Blog
+        {t("forge.blog_post.back_to_blog")}
       </a>
 
       {cover && (
@@ -143,7 +146,7 @@ export function BlogPost({ slug, blogHref = "/i/blog", initialPost }: BlogPostPr
               color: theme.colors.background,
             }}
           >
-            Featured
+            {t("forge.blog_post.featured")}
           </span>
         )}
       </div>

package/src/ui/styled/BundleConfirmation.tsx

@@ -1,10 +1,18 @@
-import { useEffect } from "react";
+import { useEffect, type ReactNode } from "react";
 import { Clock, Loader2, Ticket, XCircle } from "lucide-react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, alpha } from "./Confirmation";
 import { useCheckoutFinalize } from "../../data/queries/useFinalize";
 import { useCart } from "../../contexts/CartContext";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { useForgeT } from "../../i18n";
+
+/** The card's padded, centered interior — the shell itself has neither, and
+    content dropped in bare sits left-aligned against the card edge. */
+function Body({ children }: { children: ReactNode }) {
+  return <div style={{ padding: "40px 32px", textAlign: "center" }}>{children}</div>;
+}
 
 export interface BundleConfirmationProps {
   checkoutId: string;
@@ -31,7 +39,11 @@ export function BundleConfirmation({
   checkoutPath = "/i/checkout",
 }: BundleConfirmationProps) {
   const theme = useForgeTheme();
+  const t = useForgeT();
   const { clearCart } = useCart();
+  // A guest has no account screen behind "View your orders": the link would
+  // land them on a login wall for an order their EMAIL is the receipt for.
+  const { user } = usePublicAuth();
   const failedRedirect = redirectStatus === "failed";
 
   const { data, isLoading, isError } = useCheckoutFinalize(
@@ -73,12 +85,14 @@ export function BundleConfirmation({
     return (
       <ConfirmationStage>
         <ConfirmationCard>
-          <WarnSeal icon={<XCircle size={28} />} />
-          <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>Payment didn&apos;t go through</h1>
-          <p style={{ opacity: 0.75, marginBottom: 20 }}>
-            Nothing was charged and your cart is still here. You can try again.
-          </p>
-          {link(checkoutPath, "Return to checkout", true)}
+          <Body>
+            <WarnSeal icon={<XCircle size={28} />} />
+            <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>
+              {t("forge.bundle_confirmation.failed_title")}
+            </h1>
+            <p style={{ opacity: 0.75, marginBottom: 20 }}>{t("forge.bundle_confirmation.failed_body")}</p>
+            {link(checkoutPath, t("forge.bundle_confirmation.return_to_checkout"), true)}
+          </Body>
         </ConfirmationCard>
       </ConfirmationStage>
     );
@@ -88,8 +102,11 @@ export function BundleConfirmation({
     return (
       <ConfirmationStage>
         <ConfirmationCard>
-          <Loader2 size={28} style={{ animation: "spin 1s linear infinite" }} />
-          <h1 style={{ fontSize: 20, fontWeight: 700, marginTop: 12 }}>Confirming your order…</h1>
+          <Body>
+            <Loader2 size={28} style={{ animation: "cc-spin 1s linear infinite" }} />
+            <style>{"@keyframes cc-spin{to{transform:rotate(360deg)}}"}</style>
+            <h1 style={{ fontSize: 20, fontWeight: 700, marginTop: 12 }}>{t("forge.bundle_confirmation.loading")}</h1>
+          </Body>
         </ConfirmationCard>
       </ConfirmationStage>
     );
@@ -102,16 +119,17 @@ export function BundleConfirmation({
     return (
       <ConfirmationStage>
         <ConfirmationCard>
-          <WarnSeal icon={<Clock size={28} />} />
-          <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>Payment received</h1>
-          <p style={{ opacity: 0.75, marginBottom: 20 }}>
-            Your payment went through and part of your order is confirmed. We&apos;re still finishing the rest. It
-            will arrive by email shortly, with nothing more to pay.
-          </p>
-          <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
-            {link(accountPath, "View your orders", true)}
-            {link(explorePath, "Continue shopping")}
-          </div>
+          <Body>
+            <WarnSeal icon={<Clock size={28} />} />
+            <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>
+              {t("forge.bundle_confirmation.partial_title")}
+            </h1>
+            <p style={{ opacity: 0.75, marginBottom: 20 }}>{t("forge.bundle_confirmation.partial_body")}</p>
+            <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
+              {user && link(accountPath, t("forge.bundle_confirmation.view_orders"), true)}
+              {link(explorePath, t("forge.bundle_confirmation.continue_shopping"), !user)}
+            </div>
+          </Body>
         </ConfirmationCard>
       </ConfirmationStage>
     );
@@ -120,41 +138,63 @@ export function BundleConfirmation({
   const ticketChildren = (data?.children ?? []).filter((c) => c.sourceType === "event_ticket_order").length;
   const orderChildren = (data?.children ?? []).filter((c) => c.sourceType === "order").length;
 
+  // One key per combination rather than three clauses glued together: German
+  // orders the halves differently, so a sentence assembled from fragments can
+  // only ever be right in English.
+  const summaryKey =
+    ticketChildren > 0 && orderChildren > 0
+      ? "forge.bundle_confirmation.summary_both"
+      : ticketChildren > 0
+        ? "forge.bundle_confirmation.summary_tickets"
+        : orderChildren > 0
+          ? "forge.bundle_confirmation.summary_order"
+          : "forge.bundle_confirmation.summary_paid";
+
   return (
     <ConfirmationStage>
       <ConfirmationCard>
-        <CheckSeal />
-        <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>You&apos;re all set</h1>
-        <p style={{ opacity: 0.75, marginBottom: 16 }}>
-          Paid in one go. {ticketChildren > 0 && "Your tickets are on their way by email"}
-          {ticketChildren > 0 && orderChildren > 0 && ", and "}
-          {orderChildren > 0 && `${ticketChildren > 0 ? "your order is confirmed" : "Your order is confirmed"}`}.
-        </p>
-
-        {ticketChildren > 0 && (
-          <div
+        <Body>
+          <CheckSeal />
+          <p
             style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "8px 14px",
-              borderRadius: theme.cornerRadius,
-              background: alpha(theme.colors.primary, 0.08),
+              margin: "22px 0 6px",
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: "0.22em",
+              textTransform: "uppercase",
               color: theme.colors.primary,
-              fontSize: 14,
-              fontWeight: 600,
-              marginBottom: 20,
             }}
           >
-            <Ticket size={16} />
-            Tickets emailed to you
-          </div>
-        )}
+            {t("forge.bundle_confirmation.eyebrow")}
+          </p>
+          <h1 style={{ fontSize: 24, fontWeight: 800, margin: "0 0 8px" }}>{t("forge.bundle_confirmation.title")}</h1>
+          <p style={{ opacity: 0.75, margin: "0 auto 16px", maxWidth: 360, lineHeight: 1.55 }}>{t(summaryKey)}</p>
 
-        <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
-          {link(accountPath, "View your orders", true)}
-          {link(explorePath, "Continue shopping")}
-        </div>
+          {ticketChildren > 0 && (
+            <div
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "8px 14px",
+                borderRadius: theme.cornerRadius,
+                background: alpha(theme.colors.primary, 0.08),
+                color: theme.colors.primary,
+                fontSize: 14,
+                fontWeight: 600,
+                marginBottom: 20,
+              }}
+            >
+              <Ticket size={16} />
+              {t("forge.bundle_confirmation.tickets_emailed")}
+            </div>
+          )}
+
+          <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
+            {user && link(accountPath, t("forge.bundle_confirmation.view_orders"), true)}
+            {link(explorePath, t("forge.bundle_confirmation.continue_shopping"), !user)}
+          </div>
+        </Body>
       </ConfirmationCard>
     </ConfirmationStage>
   );

package/src/ui/styled/CancellationTerms.tsx

@@ -1,6 +1,7 @@
 import { type CSSProperties } from "react";
 import { CalendarX2 } from "lucide-react";
 import type { CancellationTermsView } from "../../types/models";
+import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 
 export interface CancellationTermsProps {
@@ -38,6 +39,7 @@ export interface CancellationTermsProps {
  */
 export function CancellationTerms({ terms, variant = "card", className, style }: CancellationTermsProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   if (!terms?.description) return null;
 
   const muted = t.muted;
@@ -58,7 +60,7 @@ export function CancellationTerms({ terms, variant = "card", className, style }:
     >
       <CalendarX2 size={15} style={{ flexShrink: 0, marginTop: 2, color: muted }} aria-hidden />
       <div style={{ minWidth: 0 }}>
-        <p style={{ margin: 0, fontWeight: 600 }}>Cancellation policy</p>
+        <p style={{ margin: 0, fontWeight: 600 }}>{tr("forge.cancellation_terms.title")}</p>
         <p style={{ margin: "2px 0 0", color: muted }}>{terms.description}</p>
         {terms.terms && (
           // The seller's own words, preserved as written — line breaks included.