@tribe-nest/forge 3.60.0 → 3.61.0

package/src/ui/styled/EventDetail.tsx

@@ -13,6 +13,7 @@ import { EventCountdown } from "./EventCountdown";
 import { EventWaitlist } from "./EventWaitlist";
 import { AddToCalendar } from "./AddToCalendar";
 import { PresaleCodeField } from "./PresaleCode";
+import { useMetaViewContent } from "../analytics/useMetaEvents";
 
 export interface EventDetailProps {
   /** Event slug (resolves the event). */
@@ -67,6 +68,15 @@ export function EventDetail({
   // contains the tiers that code unlocked.
   const presale = usePresaleCode(slug, { initialEvent });
   const { event, isLoading } = presale;
+  useMetaViewContent(
+    event
+      ? {
+          id: event.id,
+          name: event.title,
+          value: event.tickets?.length ? Math.min(...event.tickets.map((ticket) => Number(ticket.price))) : undefined,
+        }
+      : null,
+  );
 
   if (isLoading) return <Loading fullPage />;
   if (!event) return <p>{tr("forge.event_detail.not_found")}</p>;

package/src/ui/styled/FilmLibrary.tsx

@@ -16,6 +16,11 @@ export interface FilmRentalListProps {
   basePath?: string;
   /** SPA navigation adapter. Defaults to a full-page visit. */
   navigate?: (href: string) => void;
+  /**
+   * `cards` (the default) boxes each rental. `rows` divides them with hairlines
+   * instead, the client portal's list style.
+   */
+  layout?: "cards" | "rows";
   className?: string;
   style?: CSSProperties;
 }
@@ -36,7 +41,7 @@ export type FilmLibraryProps = FilmRentalListProps;
  * that already read it (the dashboard does, to decide whether to draw the tab at
  * all) shares one request through react-query rather than making a second.
  */
-export function FilmRentalList({ basePath = "/i/films", navigate, className, style }: FilmRentalListProps) {
+export function FilmRentalList({ basePath = "/i/films", navigate, layout = "cards", className, style }: FilmRentalListProps) {
   const t = useForgeT();
   const tokens = useThemeTokens();
   const { user, isInitialized } = usePublicAuth();
@@ -47,11 +52,12 @@ export function FilmRentalList({ basePath = "/i/films", navigate, className, sty
 
   const rentals = data?.data ?? [];
 
+  const rows = layout === "rows";
   const notice: CSSProperties = {
     padding: "28px 20px",
     borderRadius: tokens.cornerRadius,
-    border: `1px solid ${tokens.border}`,
-    background: tokens.surface,
+    border: `1px ${rows ? "dashed" : "solid"} ${tokens.border}`,
+    background: rows ? "transparent" : tokens.surface,
     color: tokens.muted,
     textAlign: "center",
     fontSize: 14,
@@ -63,7 +69,8 @@ export function FilmRentalList({ basePath = "/i/films", navigate, className, sty
       style={{
         display: "flex",
         flexDirection: "column",
-        gap: 16,
+        gap: rows ? 0 : 16,
+        ...(rows && rentals.length > 0 ? { borderTop: `1px solid ${tokens.border}` } : {}),
         color: tokens.text,
         fontFamily: tokens.fontFamily,
         ...style,
@@ -92,7 +99,7 @@ export function FilmRentalList({ basePath = "/i/films", navigate, className, sty
       )}
 
       {rentals.map((rental) => (
-        <RentalRow key={rental.id} rental={rental} t={t} basePath={basePath} go={go} />
+        <RentalRow key={rental.id} rental={rental} t={t} basePath={basePath} go={go} rows={rows} />
       ))}
     </div>
   );
@@ -161,11 +168,13 @@ function RentalRow({
   t,
   basePath,
   go,
+  rows,
 }: {
   rental: MyFilmRental;
   t: ForgeT;
   basePath: string;
   go: (href: string) => void;
+  rows?: boolean;
 }) {
   const tokens = useThemeTokens();
   const remaining = splitRemainingMs(rental.msRemaining);
@@ -195,10 +204,14 @@ function RentalRow({
         gap: 14,
         alignItems: "center",
         flexWrap: "wrap",
-        padding: 14,
-        borderRadius: tokens.cornerRadius,
-        border: `1px solid ${tokens.border}`,
-        background: tokens.surface,
+        ...(rows
+          ? { padding: "16px 0", borderBottom: `1px solid ${tokens.border}` }
+          : {
+              padding: 14,
+              borderRadius: tokens.cornerRadius,
+              border: `1px solid ${tokens.border}`,
+              background: tokens.surface,
+            }),
         opacity: rental.isLive ? 1 : 0.85,
       }}
     >

package/src/ui/styled/MusicLinkPage.tsx

@@ -214,13 +214,13 @@ export function MusicLinkPage({
   const destinations = useMemo(() => link?.destinations ?? [], [link]);
 
   const onDestinationClick = (platform: string, url: string) => {
-    // ONE id, shared by the browser pixel event and the server-side CAPI twin
-    // that `maybeSendPageCapi` emits for this click. Meta deduplicates on
-    // (event_id, event_name), so without a shared id the same tap is counted as
-    // two conversions and the campaign optimises against inflated numbers.
+    // ONE id, the click's own, shared by the campaign pixel's Lead, its server
+    // copy and the first-party click. Meta deduplicates on (event_id,
+    // event_name), so without a shared id the same tap is counted as two
+    // conversions and the campaign optimises against inflated numbers.
     const eventId = newEventId();
 
-    fire("Lead", { content_name: serviceMeta(platform).label, content_category: "music_link" });
+    fire("Lead", { content_name: serviceMeta(platform).label, content_category: "music_link" }, eventId);
 
     trackBeacon("click", {
       pathname: typeof window !== "undefined" ? window.location.pathname : undefined,

package/src/ui/styled/ProductDetail.tsx

@@ -16,6 +16,7 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
 import { ReviewsSection } from "./ReviewsSection";
+import { useMetaViewContent } from "../analytics/useMetaEvents";
 
 export interface ProductDetailProps {
   /** Product slug (resolves the product). */
@@ -68,6 +69,11 @@ export function ProductDetail({
   const tr = useForgeT();
   const { data: product, isLoading } = useGetProduct(slug, { initialData: initialProduct });
   const fmt = useAmountFormatter(formatAmount);
+  useMetaViewContent(
+    product
+      ? { id: product.id, name: product.title, value: lowestPrice(product.variants?.map((v) => v.price)) }
+      : null,
+  );
 
   if (isLoading) return <Loading fullPage />;
   if (!product) return <p style={{ color: t.text }}>{tr("forge.product_detail.not_found")}</p>;
@@ -101,6 +107,12 @@ export function ProductDetail({
   );
 }
 
+/** The lowest numeric price, or undefined when none is a number. */
+function lowestPrice(prices: (number | string | null | undefined)[] | undefined): number | undefined {
+  const numbers = (prices ?? []).map((p) => Number(p)).filter((n) => Number.isFinite(n));
+  return numbers.length ? Math.min(...numbers) : undefined;
+}
+
 // ── Rich description (responsive media) ───────────────────────────────────────
 const RICH_CSS =
   ".forge-rich{overflow-wrap:break-word;line-height:1.6}" +

package/src/ui/styled/PwaRegistration.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { captureInstallPrompt } from "../../data/queries/usePWA";
 
 export interface PwaRegistrationProps {
   /**
@@ -17,7 +18,7 @@ export interface PwaRegistrationProps {
  * Registers the Forge service worker (`/sw.js`) on the published site. Renders
  * nothing. The SW source lives in `@tribe-nest/forge/server`
  * (`forgeServiceWorkerScript()`) and is served by the starter's `/sw.js` route,
- * so a Forge version bump propagates SW fixes to every deployed site — never
+ * so a Forge version bump propagates SW fixes to every deployed site, never
  * frozen into per-site files.
  *
  * Gating (locked decision): registration is skipped unless `enabled` is true,
@@ -28,6 +29,9 @@ export interface PwaRegistrationProps {
 export function PwaRegistration({ enabled = false, swUrl = "/sw.js" }: PwaRegistrationProps) {
   useEffect(() => {
     if (!enabled) return;
+    // Hold the browser's one install prompt from the first page, so an app
+    // prompt shown later (after joining, after a purchase) can still use it.
+    captureInstallPrompt();
     if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) return;
     let cancelled = false;
     const register = () => {

package/src/ui/styled/SignupForm.tsx

@@ -18,13 +18,22 @@ export interface SignupFormProps {
   /** The membership invite token riding on the same redirect, if any. See `MembershipTierCallout`. */
   membershipInviteToken?: string;
   couponCode?: string;
+  /** Start with this email filled in (a client-portal invite's address, for one). */
+  defaultEmail?: string;
 }
 
 /** Themed account signup form, built on `useSignupForm`. */
-export function SignupForm({ onSuccess, loginHref, membershipTierId, membershipInviteToken, couponCode }: SignupFormProps) {
+export function SignupForm({
+  onSuccess,
+  loginHref,
+  membershipTierId,
+  membershipInviteToken,
+  couponCode,
+  defaultEmail,
+}: SignupFormProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const form = useSignupForm({ onSuccess, membershipTierId, couponCode });
+  const form = useSignupForm({ onSuccess, membershipTierId, couponCode, defaultEmail });
 
   // One key for the whole sentence, split on its own `{email}` slot so the
   // address keeps its <strong> without the sentence being assembled from two
@@ -104,6 +113,7 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, membershipI
                 value={form.code}
                 onChange={(e) => form.setCode(e.target.value)}
                 style={input}
+                data-testid="signup-code"
                 placeholder="123456"
               />,
             )}
@@ -117,6 +127,7 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, membershipI
                   value={form.firstName}
                   onChange={(e) => form.setFirstName(e.target.value)}
                   style={input}
+                  data-testid="signup-first-name"
                   placeholder={t("forge.signup_form.first_name_placeholder")}
                 />,
               )}
@@ -126,6 +137,7 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, membershipI
                   value={form.lastName}
                   onChange={(e) => form.setLastName(e.target.value)}
                   style={input}
+                  data-testid="signup-last-name"
                   placeholder={t("forge.signup_form.last_name_placeholder")}
                 />,
               )}
@@ -137,6 +149,7 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, membershipI
                 value={form.email}
                 onChange={(e) => form.setEmail(e.target.value)}
                 style={input}
+                data-testid="signup-email"
                 placeholder={t("forge.signup_form.email_placeholder")}
               />,
             )}
@@ -147,6 +160,7 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, membershipI
                 value={form.password}
                 onChange={(e) => form.setPassword(e.target.value)}
                 style={input}
+                data-testid="signup-password"
                 placeholder={t("forge.signup_form.password_placeholder")}
               />,
             )}
@@ -155,13 +169,14 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, membershipI
                 type="checkbox"
                 checked={form.acceptedTerms}
                 onChange={(e) => form.setAcceptedTerms(e.target.checked)}
+                data-testid="signup-accept-terms"
                 style={{ accentColor: theme.colors.primary }}
               />
               {t("forge.signup_form.accept_terms")}
             </label>
           </>
         )}
-        <button type="submit" disabled={form.isSubmitting} style={button}>
+        <button type="submit" disabled={form.isSubmitting} style={button} data-testid="signup-submit">
           {form.isSubmitting
             ? t("forge.signup_form.submitting")
             : form.awaitingCode

package/src/ui/styled/_tests/AccountDashboardBookingCall.spec.tsx

@@ -90,11 +90,11 @@ const booking = (overrides: Partial<MyBooking> = {}): MyBooking => {
 
 function render(rows: MyBooking[]): string {
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  queryClient.setQueryData(["my-bookings", ACCOUNT_ID, PROFILE_ID, 1, 20], {
-    data: rows,
-    total: rows.length,
-    page: 1,
-    limit: 20,
+  // The list loads a page at a time (`useMyBookingsPaged`), so the cache holds
+  // infinite-query data: one page here.
+  queryClient.setQueryData(["my-bookings", ACCOUNT_ID, PROFILE_ID, "paged", 20], {
+    pages: [{ data: rows, total: rows.length, page: 1, limit: 20 }],
+    pageParams: [1],
   });
 
   return renderToStaticMarkup(

package/src/ui/styled/_tests/AccountNotifications.spec.tsx

@@ -0,0 +1,135 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { NotificationMatrix } from "../../../data/queries/useNotifications";
+import { AccountSection } from "../AccountDashboard";
+
+/**
+ * The notification settings, drawn from the server's matrix.
+ *
+ * The panel this replaced sent `{ newPosts: false }`, which the server dropped,
+ * and read `newPosts` back, which the server never sends: every switch looked
+ * on and nothing ever saved. These pin the two things that made it wrong (the
+ * keys it reads and writes are the server's `"<type>.<channel>"` keys) and the
+ * rule that only a channel a type can use is offered at all.
+ *
+ * The matrix is SEEDED into the query cache under `useNotificationMatrix`'s own
+ * key, so a rename of that key fails here.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const member = {
+  id: "account-1",
+  email: "fan@example.com",
+  firstName: "Fan",
+  lastName: "Person",
+  kind: "fan",
+  status: "active",
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  membership: null,
+};
+
+// The server's defaults, in the shape GET /public/notifications/preferences returns.
+const defaults: NotificationMatrix["defaults"] = {
+  dm: { inapp: true, push: true, email: true, emailMode: "immediate" },
+  chat_message: { inapp: false, push: true, email: false, emailMode: "none" },
+  mention: { inapp: true, push: true, email: true, emailMode: "immediate" },
+  reply: { inapp: true, push: true, email: true, emailMode: "digest" },
+  reaction: { inapp: true, push: false, email: true, emailMode: "digest" },
+  new_community_post: { inapp: true, push: false, email: true, emailMode: "digest" },
+  new_post: { inapp: true, push: true, email: true, emailMode: "digest" },
+  event_reminder: { inapp: true, push: true, email: false, emailMode: "none" },
+  stream_live: { inapp: true, push: true, email: false, emailMode: "none" },
+  mod: { inapp: true, push: false, email: true, emailMode: "digest" },
+  task_comment: { inapp: true, push: true, email: false, emailMode: "none" },
+};
+
+function resolved(overrides: Record<string, boolean>): Record<string, boolean> {
+  const out: Record<string, boolean> = {};
+  for (const [type, def] of Object.entries(defaults)) {
+    for (const channel of ["inapp", "push", "email"] as const) {
+      const key = `${type}.${channel}`;
+      out[key] = key in overrides ? overrides[key]! : def[channel];
+    }
+  }
+  return out;
+}
+
+function render(overrides: Record<string, boolean> = {}, digestCadence: NotificationMatrix["digestCadence"] = "daily") {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const matrix: NotificationMatrix = {
+    id: "pref-1",
+    accountId: member.id,
+    profileId: PROFILE_ID,
+    digestCadence,
+    preferences: resolved(overrides),
+    overrides,
+    defaults,
+  };
+  queryClient.setQueryData(["public-notification-preferences", PROFILE_ID], matrix);
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={{ user: member, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <AccountSection section="notifications" />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+const pressed = (html: string, key: string) => {
+  const match = html.match(new RegExp(`data-testid="notify-${key.replace(".", "\\.")}" aria-pressed="(true|false)"`));
+  return match ? match[1] === "true" : null;
+};
+
+describe("Account notification settings", () => {
+  it("groups the member's notifications and leaves out work notifications, which never reach them", () => {
+    const html = render();
+    expect(html).toContain("Messages");
+    expect(html).toContain("Community");
+    expect(html).toContain("Events and live");
+    expect(html).toContain('data-testid="notify-row-dm"');
+    expect(html).not.toContain('data-testid="notify-row-task_comment"');
+  });
+
+  it("offers only the channels a type can use", () => {
+    const html = render();
+    // A chat message writes no in-app row and never emails: push only.
+    expect(html).toContain('data-testid="notify-chat_message.push"');
+    expect(html).not.toContain('data-testid="notify-chat_message.inapp"');
+    expect(html).not.toContain('data-testid="notify-chat_message.email"');
+    // Reminders and "live now" never email.
+    expect(html).not.toContain('data-testid="notify-event_reminder.email"');
+    expect(html).not.toContain('data-testid="notify-stream_live.email"');
+    // A direct message can go anywhere.
+    for (const channel of ["inapp", "push", "email"]) {
+      expect(html).toContain(`data-testid="notify-dm.${channel}"`);
+    }
+  });
+
+  it("shows the server's resolved state, including an opt-out the member saved", () => {
+    const html = render({ "new_post.email": false, "reaction.push": true });
+    expect(pressed(html, "new_post.email")).toBe(false);
+    expect(pressed(html, "new_post.push")).toBe(true);
+    // Off by default, on because the member turned it on.
+    expect(pressed(html, "reaction.push")).toBe(true);
+  });
+
+  it("marks the member's email summary choice", () => {
+    const html = render({}, "hourly");
+    expect(html).toMatch(/data-testid="notify-digest-hourly"[^>]*aria-checked="true"|aria-checked="true"[^>]*data-testid="notify-digest-hourly"/);
+    expect(html).toMatch(/data-testid="notify-digest-daily"[^>]*aria-checked="false"|aria-checked="false"[^>]*data-testid="notify-digest-daily"/);
+  });
+});

package/src/ui/styled/_tests/DownloadPage.spec.tsx

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { DownloadPageInfo } from "../../headless/downloads/useDownloadPage";
+import { DownloadPage } from "../DownloadPage";
+
+/**
+ * The download page, rendered through `react-dom/server` with the page read
+ * SEEDED into the query cache so the real `useDownloadPage` stays in the path.
+ */
+
+const PROFILE_ID = "profile-1";
+const TOKEN = "tok_abcdefghijklmnopqrstuvwxyz0123456789ABCDEFG";
+
+function render(info: DownloadPageInfo | undefined, user: { id: string } | null = null) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (info) queryClient.setQueryData(["download-page", PROFILE_ID, TOKEN, user?.id ?? null], info);
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider value={{ user, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}>
+          <ForgeThemeProvider theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+            <DownloadPage token={TOKEN} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+const info: DownloadPageInfo = {
+  items: [{ title: "Night Drive", quantity: 1, coverImage: "https://cdn.test/cover.jpg" }],
+  files: [
+    { id: "archive", filename: "order-1.zip", size: 5 * 1024 * 1024 },
+    { id: "file-0", filename: "Master.wav", size: 700 * 1024 * 1024 },
+  ],
+  sentTo: "b***@example.com",
+  isGift: false,
+  signedInAsOwner: false,
+};
+
+describe("DownloadPage", () => {
+  it("names what was bought and every file, locked, and asks for a code sent to the recipient", () => {
+    const html = render(info);
+    expect(html).toContain("Night Drive");
+    expect(html).toContain("order-1.zip");
+    expect(html).toContain("5.0 MB");
+    expect(html).toContain("Master.wav");
+    expect(html).toContain('data-testid="download-gate"');
+    expect(html).toContain("We&#x27;ll email a 6-digit code to b***@example.com.");
+    expect(html).toContain("Email me a code");
+    // No download button and no address before the person proves who they are.
+    expect(html).not.toContain('data-testid="download-file-button"');
+    expect(html).not.toContain("http://api.test");
+  });
+
+  it("offers signing in, and brings the person back to this page", () => {
+    const html = render(info);
+    expect(html).toContain(`href="/i/login?redirect=${encodeURIComponent(`/i/downloads/${TOKEN}`)}"`);
+  });
+
+  it("says a gift is a gift", () => {
+    expect(render({ ...info, isGift: true })).toContain("A gift for you.");
+  });
+});