@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/styled/AiAgentWidget.tsx

@@ -51,7 +51,19 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
   };
 
   return (
-    <div style={{ position: "fixed", bottom: 20, zIndex, ...side }}>
+    // Lifted above any fixed bottom bar a page draws (the client portal's on a
+    // phone), which publishes its height as `--forge-bottom-bar-height`.
+    // Otherwise the bubble sits on top of that bar's last button. A page with
+    // its own message box pinned above the bar (a community chat on a phone)
+    // publishes `--forge-floating-lift` so the bubble clears its Send button too.
+    <div
+      style={{
+        position: "fixed",
+        bottom: "calc(20px + var(--forge-bottom-bar-height, 0px) + var(--forge-floating-lift, 0px))",
+        zIndex,
+        ...side,
+      }}
+    >
       {open && (
         <div
           style={{

package/src/ui/styled/ChatRoom.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { Lock } from "lucide-react";
 import type { ChatChannel, ChatMessage } from "../../data/queries/useChat";
 import { useForgeT, type ForgeT } from "../../i18n";
@@ -10,6 +10,14 @@ import { MessageBubble } from "./chat/MessageBubble";
 import { ChatComposer } from "./chat/ChatComposer";
 import { ChatThreadPanel } from "./chat/ChatThreadPanel";
 import { NewDmDialog } from "./chat/NewDmDialog";
+import { isCommunityAgentDm, useCommunityAgent } from "../../data/queries/useCommunityAgent";
+import { useCommunityAgentAnswerRatings } from "../headless/community/useCommunityAgent";
+import {
+  CommunityAgentAvatar,
+  CommunityAgentName,
+  CommunityAgentThinking,
+  type CommunityAgentIdentity,
+} from "./community/CommunityAgent";
 
 export interface ChatRoomProps {}
 
@@ -29,8 +37,22 @@ export function ChatRoom(_props: ChatRoomProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
   const room = useChatRoom();
+  // The community AI: its DM entry point, and its name and avatar on that DM.
+  const { agent } = useCommunityAgent();
   const [showSidebar, setShowSidebar] = useState(true);
   const [showNewDm, setShowNewDm] = useState(false);
+  const [agentDmFailed, setAgentDmFailed] = useState(false);
+  const hasAgentDm = room.channels.some((c) => isCommunityAgentDm(c));
+
+  const openAgentDm = async () => {
+    setAgentDmFailed(false);
+    try {
+      await room.startAgentDm();
+      setShowSidebar(false);
+    } catch {
+      setAgentDmFailed(true);
+    }
+  };
 
   const border = `1px solid ${theme.colors.text}1a`;
 
@@ -69,10 +91,19 @@ export function ChatRoom(_props: ChatRoomProps) {
             fontWeight: active ? 700 : 500,
           }}
         >
-          {icon}
-          <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
-            {icon ? (c.name ?? t("forge.chat_room.channel_fallback")) : channelLabel(c, t)}
-          </span>
+          {isCommunityAgentDm(c) ? (
+            <>
+              <CommunityAgentAvatar agent={agentIdentity(c, agent)} size={20} />
+              <CommunityAgentName agent={agentIdentity(c, agent)} fontWeight={active ? 700 : 500} />
+            </>
+          ) : (
+            <>
+              {icon}
+              <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {icon ? (c.name ?? t("forge.chat_room.channel_fallback")) : channelLabel(c, t)}
+              </span>
+            </>
+          )}
         </span>
         {unread > 0 && (
           <span
@@ -116,7 +147,9 @@ export function ChatRoom(_props: ChatRoomProps) {
     <div
       style={{
         display: "flex",
-        height: "calc(100vh - 200px)",
+        // Inside a member home on a phone the bottom bar takes the last strip of
+        // the screen, so the composer ends above it rather than behind it.
+        height: "calc(100dvh - 200px - var(--forge-bottom-bar-height, 0px) - env(safe-area-inset-bottom))",
         border,
         borderRadius: theme.cornerRadius,
         overflow: "hidden",
@@ -168,7 +201,42 @@ export function ChatRoom(_props: ChatRoomProps) {
           t("forge.chat_room.group_dms"),
           room.channels.filter((c) => c.type === "dm"),
         )}
-        {room.channels.length === 0 && (
+        {agent?.dmEnabled && !hasAgentDm && (
+          <div style={{ padding: "8px 16px" }}>
+            <button
+              type="button"
+              onClick={openAgentDm}
+              disabled={room.isStartingAgentDm}
+              data-testid="chat-agent-dm-open"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                background: "none",
+                border,
+                borderRadius: theme.cornerRadius,
+                padding: "8px 10px",
+                cursor: room.isStartingAgentDm ? "wait" : "pointer",
+                color: theme.colors.text,
+                fontSize: 13,
+                fontWeight: 600,
+                textAlign: "left",
+              }}
+            >
+              <CommunityAgentAvatar agent={agent} size={22} />
+              <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                {t("forge.chat_room.message_agent", { agent_name: agent.name })}
+              </span>
+            </button>
+          </div>
+        )}
+        {agentDmFailed && (
+          <div role="alert" style={{ padding: "0 16px 8px", fontSize: 12 }}>
+            {t("forge.chat_room.agent_dm_failed")}
+          </div>
+        )}
+        {room.channels.length === 0 && !agent?.dmEnabled && (
           <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>{t("forge.chat_room.empty_title")}</div>
         )}
       </aside>
@@ -176,7 +244,7 @@ export function ChatRoom(_props: ChatRoomProps) {
       {/* Message panel */}
       <section className={`${showSidebar ? "fg:hidden" : "fg:flex"} fg:md:flex fg:flex-1 fg:flex-col fg:min-w-0`}>
         {room.selectedChannel ? (
-          <MessagePanel room={room} onBack={() => setShowSidebar(true)} border={border} />
+          <MessagePanel room={room} onBack={() => setShowSidebar(true)} border={border} agent={agent} />
         ) : (
           <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", opacity: 0.5 }}>
             {t("forge.chat_room.select_channel")}
@@ -193,6 +261,8 @@ export function ChatRoom(_props: ChatRoomProps) {
           onClose={room.closeThread}
           onMarkAsRead={room.markAsRead}
           border={border}
+          agentThinking={room.isAgentThinking(room.activeThreadParent.channelId, room.activeThreadParent.id)}
+          agentName={agent?.name}
         />
       )}
 
@@ -212,14 +282,24 @@ export function ChatRoom(_props: ChatRoomProps) {
   );
 }
 
+/** The agent as drawn on its DM: the live agent when known, else the channel's own name. */
+function agentIdentity(
+  channel: ChatChannel,
+  agent: { name: string; avatarUrl: string | null } | null,
+): CommunityAgentIdentity {
+  return { name: agent?.name ?? channel.name ?? "", avatarUrl: agent?.avatarUrl ?? null };
+}
+
 function MessagePanel({
   room,
   onBack,
   border,
+  agent,
 }: {
   room: ReturnType<typeof useChatRoom>;
   onBack: () => void;
   border: string;
+  agent: { name: string; avatarUrl: string | null } | null;
 }) {
   const t = useForgeT();
   const theme = useForgeTheme();
@@ -228,13 +308,20 @@ function MessagePanel({
   // Mark visible messages as read when they change.
   useEffect(() => {
     const unreadIds = room.messages
-      .filter((m: ChatMessage) => m.senderAccountId !== room.currentAccountId)
+      .filter((m: ChatMessage) => !m.senderAccountId || m.senderAccountId !== room.currentAccountId)
       .map((m) => m.id);
     if (unreadIds.length) room.markAsRead(unreadIds);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [room.messages.length, room.selectedChannel?.id]);
 
   const title = room.selectedChannel ? channelLabel(room.selectedChannel, t) : t("forge.chat_room.channel_fallback");
+  const inAgentDm = isCommunityAgentDm(room.selectedChannel);
+  const channelId = room.selectedChannel?.id;
+  // The viewer's own ratings on the AI answers in this channel (its DM answers, mostly).
+  const ratings = useCommunityAgentAnswerRatings(
+    "chat_message",
+    room.messages.filter((m) => m.senderAgentId).map((m) => m.id),
+  );
 
   return (
     <>
@@ -245,7 +332,14 @@ function MessagePanel({
         >
           ←
         </button>
-        <strong>{title}</strong>
+        {inAgentDm && room.selectedChannel ? (
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+            <CommunityAgentAvatar agent={agentIdentity(room.selectedChannel, agent)} size={24} />
+            <CommunityAgentName agent={agentIdentity(room.selectedChannel, agent)} fontWeight={700} />
+          </span>
+        ) : (
+          <strong>{title}</strong>
+        )}
       </header>
 
       {room.pinnedMessages.length > 0 && (
@@ -255,13 +349,29 @@ function MessagePanel({
       )}
 
       <div ref={listRef} style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column-reverse", gap: 10 }}>
+        {/* The list runs bottom-up, so the DM's thinking line comes first. */}
+        {inAgentDm && room.isAgentThinking(channelId, null) && (
+          <div style={{ alignSelf: "flex-start" }}>
+            <CommunityAgentThinking name={agent?.name ?? room.selectedChannel?.name} />
+          </div>
+        )}
         {room.messages.map((m: ChatMessage) => (
-          <MessageBubble
-            key={m.id}
-            message={m}
-            mine={m.senderAccountId === room.currentAccountId}
-            onOpenThread={room.openThread}
-          />
+          <Fragment key={m.id}>
+            {/* Answering in this message's thread: shown under the message. */}
+            {!inAgentDm && room.isAgentThinking(channelId, m.id) && (
+              <div style={{ alignSelf: "flex-start" }}>
+                <CommunityAgentThinking name={agent?.name} />
+              </div>
+            )}
+            <MessageBubble
+              message={m}
+              mine={!!m.senderAccountId && m.senderAccountId === room.currentAccountId}
+              onOpenThread={room.openThread}
+              showThreadControls={!inAgentDm}
+              showAgentFeedback={!!m.senderAgentId && ratings.canRate(m.id)}
+              savedAgentRating={ratings.ratingOf(m.id)}
+            />
+          </Fragment>
         ))}
         {room.hasMore && (
           <button

package/src/ui/styled/Checkout.tsx

@@ -18,6 +18,7 @@ import { Loading } from "./Loading";
 import { CartLineOptions } from "./CartLineOptions";
 import { HoldNotice } from "./HoldNotice";
 import { PaystackPayButton } from "./PaystackPayButton";
+import { useMetaInitiateCheckout } from "../analytics/useMetaEvents";
 
 export interface CheckoutProps {
   /** Path used to build the post-payment return URL. Defaults to `/checkout/finalise`. */
@@ -76,6 +77,13 @@ export function Checkout({
   const pricesIncludeTax = usePricesIncludeTax();
 
   const c = useCheckout({ finalisePath });
+  // Meta InitiateCheckout, once per mount with a non-empty cart.
+  useMetaInitiateCheckout({
+    ready: c.isCartReady,
+    cartItems: c.cartItems,
+    ticketItems: c.ticketItems,
+    subTotal: c.subTotal,
+  });
   const taxSummary = summarizeTaxQuote(c.taxQuote, formatCurrency);
 
   const go = (path: string) => {

package/src/ui/styled/CheckoutConfirmation.tsx

@@ -22,6 +22,8 @@ import { usePublicAuth } from "../../contexts/PublicAuthContext";
 import { OrderStatus, ProductDeliveryType, type IPublicOrder } from "../../types/models";
 import { CartLineOptions } from "./CartLineOptions";
 import { useForgeT } from "../../i18n";
+import { useMetaPurchase } from "../analytics/useMetaEvents";
+import { useAppInstallRequest } from "../headless/siteApp/useAppInstallRequest";
 
 export interface CheckoutConfirmationProps {
   orderId?: string;
@@ -155,6 +157,12 @@ function OrderConfirmation({
     return () => clearTimeout(t);
   }, [isPending]);
 
+  // The browser copy of the server's Purchase: same id (the order id), value
+  // and currency, so Meta keeps one.
+  useMetaPurchase({ recordId: order?.id, paid: isPaid, value: order?.totalAmount, currency: order?.currency });
+  // A confirmed purchase is a moment the site app offers itself.
+  useAppInstallRequest(isPaid, "purchase");
+
   // Clear the cart once the order is confirmed paid.
   useEffect(() => {
     if (isPaid && cartItems.length > 0) clearCart();

package/src/ui/styled/CoachingConfirmation.tsx

@@ -15,6 +15,8 @@ import {
 } from "./Confirmation";
 import { useForgeT } from "../../i18n";
 import { useCoachingBookingFinalize } from "../../data/queries/useFinalize";
+import { useMetaPurchase } from "../analytics/useMetaEvents";
+import { useAppInstallRequest } from "../headless/siteApp/useAppInstallRequest";
 import { useBookingSecret } from "../headless/booking/useBookingSecret";
 import { AddToCalendar } from "./AddToCalendar";
 
@@ -62,6 +64,12 @@ export function CoachingConfirmation({
     secret ?? undefined,
   );
 
+  // The browser copy of the server's Purchase, keyed on the booking id. A free
+  // booking has no value, so it fires nothing here (it is a Schedule).
+  useMetaPurchase({ recordId: data?.id, paid: !error && data?.status === "confirmed", value: data?.totalAmount });
+  // A confirmed booking is a moment the site app offers itself.
+  useAppInstallRequest(!error && data?.status === "confirmed", "booking");
+
   const primary = theme.colors.primary;
   const text = theme.colors.text;
 

package/src/ui/styled/CoachingDetail.tsx

@@ -10,6 +10,7 @@ import { Loading } from "./Loading";
 import { CoachingBooking } from "./CoachingBooking";
 import { CancellationTerms } from "./CancellationTerms";
 import { ReviewsSection } from "./ReviewsSection";
+import { useMetaViewContent } from "../analytics/useMetaEvents";
 
 export interface CoachingDetailProps {
   /** Coaching product slug (resolves the product). */
@@ -42,6 +43,7 @@ export function CoachingDetail({
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
   const { data: product, isLoading } = useGetCoachingProduct(slug, { initialData: initialCoaching });
+  useMetaViewContent(product ? { id: product.id, name: product.title, value: product.price } : null);
 
   if (isLoading) return <Loading fullPage />;
   if (!product) return <p>{t("forge.coaching_detail.not_found")}</p>;

package/src/ui/styled/CourseConfirmation.tsx

@@ -15,6 +15,8 @@ import {
 } from "./Confirmation";
 import { useForgeT } from "../../i18n";
 import { useCourseBookingFinalize } from "../../data/queries/useFinalize";
+import { useMetaPurchase } from "../analytics/useMetaEvents";
+import { useAppInstallRequest } from "../headless/siteApp/useAppInstallRequest";
 import { useGetCourse } from "../../data/queries/useCourses";
 import { useBookingSecret } from "../headless/booking/useBookingSecret";
 
@@ -52,6 +54,9 @@ export function CourseConfirmation({
     secret ?? undefined,
   );
   const { data: course } = useGetCourse(slug);
+  // The browser copy of the server's Purchase, keyed on the booking id.
+  useMetaPurchase({ recordId: data?.id, paid: !error && data?.status === "confirmed", value: data?.totalAmount });
+  useAppInstallRequest(!error && data?.status === "confirmed", "purchase");
 
   const text = theme.colors.text;
   const primary = theme.colors.primary;

package/src/ui/styled/CourseDetail.tsx

@@ -9,6 +9,7 @@ import { useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
 import { CourseCheckout } from "./CourseCheckout";
 import { ReviewsSection } from "./ReviewsSection";
+import { useMetaViewContent } from "../analytics/useMetaEvents";
 
 export interface CourseDetailProps {
   /** Course slug (resolves the course). */
@@ -47,6 +48,7 @@ export function CourseDetail({
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
   const { data: course, isLoading } = useGetCourse(slug, { initialData: initialCourse });
+  useMetaViewContent(course ? { id: course.id, name: course.title, value: course.price } : null);
 
   if (isLoading) return <Loading fullPage />;
   if (!course) return <p>{t("forge.course_detail.not_found")}</p>;

package/src/ui/styled/DownloadPage.tsx

@@ -0,0 +1,263 @@
+/**
+ * The page a digital delivery email links to (`/i/downloads/$token`).
+ *
+ * The link finds the order; it does not open it. A signed-in owner downloads
+ * straight away. Anyone else is shown what they bought and asked for a code we
+ * email to the recipient, because an email link is forwarded, archived and
+ * indexed, and a link that alone handed over the files would be a permanent
+ * public address. Each file is a short-lived signed read, fetched on the click.
+ */
+import { useState } from "react";
+import { Download, FileArchive, Lock, PackageOpen } from "lucide-react";
+import { useForgeT } from "../../i18n";
+import { internalPath } from "../../runtime/pages";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useDownloadPage, useOtpCodeInput, OTP_LENGTH, type DownloadFileInfo } from "../headless";
+import { Loading } from "./Loading";
+import { usePortalButtons } from "./portal/shared";
+import { formatFileSize } from "./portal/PortalFiles";
+
+export function DownloadPage({ token }: { token: string }) {
+  const tr = useForgeT();
+  const t = useThemeTokens();
+  const page = useDownloadPage(token);
+
+  if (page.status === "loading") return <Loading fullPage />;
+
+  if (page.status === "missing" || !page.info) {
+    return (
+      <Shell>
+        <div data-testid="download-missing" className="fg:py-10 fg:text-center">
+          <PackageOpen size={36} aria-hidden style={{ color: t.muted, margin: "0 auto 12px" }} />
+          <h1 style={{ margin: "0 0 8px", fontSize: 22, fontWeight: 700 }}>{tr("forge.download_page.missing_title")}</h1>
+          <p style={{ margin: 0, color: t.muted }}>{tr("forge.download_page.missing_body")}</p>
+        </div>
+      </Shell>
+    );
+  }
+
+  const { info } = page;
+  const cover = info.items.find((item) => item.coverImage)?.coverImage ?? null;
+  const unlocked = page.status === "unlocked";
+
+  return (
+    <Shell>
+      <header className="fg:flex fg:items-center fg:gap-4" style={{ marginBottom: 28 }}>
+        {cover ? (
+          <img
+            src={cover}
+            alt=""
+            className="fg:h-16 fg:w-16 fg:shrink-0"
+            style={{ borderRadius: t.cornerRadius, objectFit: "cover" }}
+          />
+        ) : null}
+        <div className="fg:min-w-0">
+          <h1 style={{ margin: 0, fontSize: 24, fontWeight: 700, lineHeight: 1.25 }}>
+            {info.items.map((item) => item.title).join(", ") || tr("forge.download_page.title")}
+          </h1>
+          <p style={{ margin: "4px 0 0", color: t.muted, fontSize: 14 }}>
+            {info.isGift ? tr("forge.download_page.subtitle_gift") : tr("forge.download_page.subtitle")}
+          </p>
+        </div>
+      </header>
+
+      <ul data-testid="download-files" style={{ listStyle: "none", margin: 0, padding: 0, borderTop: `1px solid ${t.border}` }}>
+        {info.files.map((file) => (
+          <FileRow key={file.id} file={file} unlocked={unlocked} urlFor={page.urlFor} />
+        ))}
+      </ul>
+
+      {!unlocked ? <CodeGate page={page} token={token} /> : null}
+    </Shell>
+  );
+}
+
+function Shell({ children }: { children: React.ReactNode }) {
+  const t = useThemeTokens();
+  return (
+    <main
+      data-testid="download-page"
+      className="fg:mx-auto fg:w-full fg:max-w-2xl fg:px-4 fg:py-10 fg:md:py-16"
+      style={{ color: t.text, fontFamily: t.fontFamily }}
+    >
+      {children}
+    </main>
+  );
+}
+
+function FileRow({
+  file,
+  unlocked,
+  urlFor,
+}: {
+  file: DownloadFileInfo;
+  unlocked: boolean;
+  urlFor: (fileId: string) => Promise<string | null>;
+}) {
+  const tr = useForgeT();
+  const t = useThemeTokens();
+  const buttons = usePortalButtons();
+  const [busy, setBusy] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const size = formatFileSize(file.size);
+
+  const download = async () => {
+    setBusy(true);
+    setFailed(false);
+    try {
+      const url = await urlFor(file.id);
+      if (!url) throw new Error("no url");
+      // Same tab: the signed read answers with `attachment`, so the browser
+      // saves the file and the page stays where it is.
+      window.location.assign(url);
+    } catch {
+      setFailed(true);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <li
+      data-testid="download-file"
+      className="fg:flex fg:items-center fg:gap-3"
+      style={{ padding: "14px 0", borderBottom: `1px solid ${t.border}` }}
+    >
+      <FileArchive size={18} aria-hidden style={{ color: t.muted, flexShrink: 0 }} />
+      <div className="fg:min-w-0 fg:flex-1">
+        <p className="fg:truncate" style={{ margin: 0, fontWeight: 600 }} title={file.filename}>
+          {file.filename}
+        </p>
+        {size ? <p style={{ margin: "2px 0 0", fontSize: 13, color: t.muted }}>{size}</p> : null}
+        {failed ? (
+          <p role="alert" style={{ margin: "4px 0 0", fontSize: 13, fontWeight: 600 }}>
+            {tr("forge.download_page.download_failed")}
+          </p>
+        ) : null}
+      </div>
+      {unlocked ? (
+        <button
+          type="button"
+          data-testid="download-file-button"
+          onClick={() => void download()}
+          disabled={busy}
+          style={{ ...buttons.primary, opacity: busy ? 0.7 : 1 }}
+        >
+          <Download size={15} aria-hidden />
+          {tr("forge.download_page.download")}
+        </button>
+      ) : (
+        <Lock size={16} aria-label={tr("forge.download_page.locked")} style={{ color: t.muted, flexShrink: 0 }} />
+      )}
+    </li>
+  );
+}
+
+function CodeGate({ page, token }: { page: ReturnType<typeof useDownloadPage>; token: string }) {
+  const tr = useForgeT();
+  const t = useThemeTokens();
+  const buttons = usePortalButtons();
+  const otp = useOtpCodeInput({
+    disabled: page.isUnlocking,
+    onComplete: (code) => page.submitCode(code),
+  });
+  const sentTo = page.codeSentTo ?? page.info?.sentTo ?? "";
+  const backHere = internalPath("downloads/$token", { token });
+  const loginHref = `${internalPath("login")}?redirect=${encodeURIComponent(backHere)}`;
+  const error = page.unlockError ?? page.sendCodeError;
+
+  return (
+    <section
+      data-testid="download-gate"
+      aria-labelledby="download-gate-title"
+      style={{ marginTop: 28, padding: 20, border: `1px solid ${t.border}`, borderRadius: t.cornerRadius }}
+    >
+      <h2 id="download-gate-title" style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 700 }}>
+        {tr("forge.download_page.gate_title")}
+      </h2>
+      {!page.codeSentTo ? (
+        <>
+          <p style={{ margin: "0 0 16px", color: t.muted, fontSize: 14 }}>
+            {tr("forge.download_page.gate_body", { email: sentTo })}
+          </p>
+          <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-4">
+            <button
+              type="button"
+              data-testid="download-send-code"
+              onClick={page.requestCode}
+              disabled={page.isSendingCode}
+              style={{ ...buttons.primary, opacity: page.isSendingCode ? 0.7 : 1 }}
+            >
+              {page.isSendingCode ? tr("forge.download_page.sending") : tr("forge.download_page.send_code")}
+            </button>
+            <a href={loginHref} data-testid="download-sign-in" style={buttons.text}>
+              {tr("forge.download_page.sign_in")}
+            </a>
+          </div>
+        </>
+      ) : (
+        <>
+          <p style={{ margin: "0 0 16px", color: t.muted, fontSize: 14 }}>
+            {tr("forge.download_page.code_sent", { email: sentTo })}
+          </p>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (otp.code.length === OTP_LENGTH) page.submitCode(otp.code);
+            }}
+          >
+            <fieldset style={{ border: "none", margin: 0, padding: 0 }}>
+              <legend className="fg:sr-only">{tr("forge.download_page.code_label")}</legend>
+              <div className="fg:flex fg:gap-2" style={{ marginBottom: 16 }}>
+                {otp.digits.map((_, index) => (
+                  <input
+                    key={index}
+                    {...otp.getInputProps(index)}
+                    data-testid="download-code-digit"
+                    aria-label={tr("forge.download_page.code_digit", { n: index + 1 })}
+                    className="fg:h-12 fg:w-11 fg:text-center"
+                    style={{
+                      fontSize: 20,
+                      fontWeight: 600,
+                      color: t.text,
+                      background: "transparent",
+                      border: `1px solid ${t.border}`,
+                      borderRadius: t.cornerRadius,
+                      fontFamily: t.fontFamily,
+                    }}
+                  />
+                ))}
+              </div>
+            </fieldset>
+            <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-4">
+              <button
+                type="submit"
+                data-testid="download-unlock"
+                disabled={page.isUnlocking || !otp.isComplete}
+                style={{ ...buttons.primary, opacity: page.isUnlocking || !otp.isComplete ? 0.6 : 1 }}
+              >
+                {page.isUnlocking ? tr("forge.download_page.unlocking") : tr("forge.download_page.unlock")}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  otp.reset();
+                  page.requestCode();
+                }}
+                disabled={page.isSendingCode}
+                style={buttons.text}
+              >
+                {tr("forge.download_page.resend")}
+              </button>
+            </div>
+          </form>
+        </>
+      )}
+      {error ? (
+        <p role="alert" data-testid="download-error" style={{ margin: "12px 0 0", fontSize: 14, fontWeight: 600 }}>
+          {error}
+        </p>
+      ) : null}
+    </section>
+  );
+}

package/src/ui/styled/EventConfirmation.tsx

@@ -8,6 +8,8 @@ import { useForgeT } from "../../i18n";
 import { useEventOrderFinalize } from "../../data/queries/useFinalize";
 import { useEvent } from "../../data/queries/useEvents";
 import { AddToCalendar } from "./AddToCalendar";
+import { useMetaPurchase } from "../analytics/useMetaEvents";
+import { useAppInstallRequest } from "../headless/siteApp/useAppInstallRequest";
 import {
   getTicketOrderOutcome,
   ticketRequestFailureKind,
@@ -59,6 +61,14 @@ export function EventConfirmation({
   const formatAmt = useAmountFormatter(formatAmount);
   const { data: order, isLoading } = useEventOrderFinalize(slug, orderId);
   const { data: event } = useEvent(slug);
+  // The browser copy of the server's Purchase, keyed on the ticket order id.
+  useMetaPurchase({
+    recordId: order?.id,
+    paid: !!order && getTicketOrderOutcome(order) === "paid",
+    value: order?.totalAmount,
+    currency: order?.currency,
+  });
+  useAppInstallRequest(!!order && getTicketOrderOutcome(order) === "paid", "purchase");
 
   const text = theme.colors.text;
   const primary = theme.colors.primary;