@tribe-nest/forge 3.59.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/MembershipCheckout.tsx

@@ -16,6 +16,9 @@ import { formatTrialDate, tierTrialDays } from "../headless/membership/membershi
 import { readableTextOn } from "../theme/contrast";
 import { cycleFloor, cycleIsFree, offeredCycles, type BillingCycle } from "../format/membershipPwyw";
 import type { MembershipTier } from "../../types/models";
+import { useOptionalCommunityContext } from "../../contexts/CommunityContext";
+import { useCommunityViewerState } from "../../data/queries/useCommunities";
+import { communitiesListPath, communityAboutPath, communityHomePath } from "../headless/communities/paths";
 import { Loading } from "./Loading";
 import { PaystackPayButton } from "./PaystackPayButton";
 
@@ -25,23 +28,24 @@ export interface MembershipCheckoutProps {
   /**
    * Called when the subscription is finished in-app: a free activation, a tier
    * change settled by proration, or a paid card payment that succeeded. The
-   * host navigates however it wants (e.g. to the account page). Omit to fall
-   * back to Forge's default `window.location` redirect.
+   * host navigates however it wants. Omit to fall back to Forge's default
+   * `window.location` redirect, which lands inside the community.
    *
    * `requiresConfirmation` is true only for a real provider payment, which is
    * the only case the account page has anything to reconcile.
    */
   onComplete?: (result: { requiresConfirmation: boolean }) => void;
   /** The URL Stripe returns to for a PAID subscription (its `return_url`, and the
-   * free/paid fallback redirect). Default `/i/account?tab=membership&confirmSubscription=true`. */
+   * free/paid fallback redirect). Default: the community home with
+   * `confirmSubscription=1` (the community comes from `<CommunityProvider>`). */
   successPath?: string;
-  /** Where the "View memberships" link points when the artist sells no tiers. Default `/i/membership`. */
+  /** Where the "View memberships" link points when there are no tiers. Default: the community's About page. */
   membershipsPath?: string;
   /**
-   * The fan's account page, where their applications are listed. The link
-   * after applying points here. Default `/i/account`.
+   * Where the link after applying points: the community home, which shows the
+   * pending application. Default: the surrounding community's home.
    */
-  accountPath?: string;
+  homePath?: string;
   /** Format a numeric amount for display. Defaults to the runtime currency formatter. */
   formatAmount?: (amount: number) => string;
   /**
@@ -83,9 +87,9 @@ export interface MembershipCheckoutProps {
 export function MembershipCheckout({
   initialTierId,
   onComplete,
-  successPath = "/i/account?tab=membership&confirmSubscription=true",
-  membershipsPath = "/i/membership",
-  accountPath = "/i/account",
+  successPath,
+  membershipsPath: membershipsPathProp,
+  homePath: homePathProp,
   formatAmount,
   inviteToken,
   className,
@@ -140,12 +144,28 @@ export function MembershipCheckout({
   const taxCaption = priceTaxCaption({ pricesIncludeTax: usePricesIncludeTax() });
   const renderPayment = usePaymentRenderer();
 
+  const communityContext = useOptionalCommunityContext();
+  const slug = communityContext?.slug;
+  // Inside a community, the fan's membership IN IT (not `user.membership`, the
+  // newest one on the profile) decides "current plan" and join vs change.
+  const viewer = useCommunityViewerState(communityContext?.communityId ?? slug, {
+    enabled: !!(communityContext?.communityId ?? slug),
+  });
+  const current =
+    communityContext && viewer.data
+      ? viewer.data.membership
+        ? { tierId: viewer.data.membership.tierId, status: viewer.data.membership.status }
+        : null
+      : undefined;
+  const membershipsPath = membershipsPathProp ?? (slug ? communityAboutPath(slug) : communitiesListPath());
+  const homePath = homePathProp ?? (slug ? communityHomePath(slug) : communitiesListPath());
   const checkout = useMembershipCheckout({
     initialTierId,
     returnPath: successPath,
     freeReturnPath: successPath,
     onComplete,
     inviteToken,
+    current,
   });
   const inviteInfo = useMembershipInviteInfo(checkout.inviteToken);
 
@@ -269,16 +289,16 @@ export function MembershipCheckout({
                 : t(APPLICATION_OUTCOME_BODY[checkout.applicationOutcome], { tier_name: tier.name })}
             </p>
           </div>
-          {/* A lodged or approved application is followed on the account page.
-              One that closed leaves the fan choosing again, so that goes back
-              to the tiers. */}
+          {/* A lodged or approved application is followed inside the community,
+              which shows it pending. One that closed leaves the fan choosing
+              again, so that goes back to the tiers. */}
           {checkout.applicationOutcome === "received" || checkout.applicationOutcome === "approved" ? (
             <a
-              href={accountPath}
-              data-testid="membership-application-account-link"
+              href={homePath}
+              data-testid="membership-application-home-link"
               style={{ ...ghostButton, display: "block", textAlign: "center", textDecoration: "none", boxSizing: "border-box" }}
             >
-              {t("forge.membership_checkout.go_to_account")}
+              {t("forge.membership_checkout.go_to_community")}
             </a>
           ) : (
             <a
@@ -445,7 +465,7 @@ export function MembershipCheckout({
                 returnUrl:
                   checkout.setupPurpose === "application" && checkout.applicationReturnUrl
                     ? checkout.applicationReturnUrl
-                    : `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
+                    : `${typeof window !== "undefined" ? window.location.origin : ""}${checkout.returnPath}`,
                 amount: checkout.amount,
                 currency: settlementCurrency,
                 mode: "manual",

package/src/ui/styled/MembershipTierCallout.tsx

@@ -4,6 +4,8 @@ import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { membershipPriceLabel } from "../format/membershipPriceLabel";
+import { usePublicCommunities } from "../../data/queries/useCommunities";
+import { communityAboutPath } from "../headless/communities/paths";
 
 export interface MembershipTierCalloutProps {
   /** The tier the visitor is on their way to join. Nothing is drawn without it. */
@@ -30,6 +32,9 @@ export interface MembershipTierCalloutProps {
  * site remembers too. The client app has always shown this; code websites did
  * not, so this is the same reassurance in a Forge component.
  *
+ * A tier belongs to exactly one community, so the callout names it and links
+ * to its About page with the tier preselected, where the join happens in place.
+ *
  * Renders NOTHING when there is no tier id, when the tiers have not loaded, or
  * when the id matches nothing the artist sells. A form that pushes itself down
  * the page a beat after it appeared is worse than one that never moved, and an
@@ -50,6 +55,9 @@ export function MembershipTierCallout({
   const { data: tiers } = useGetMembershipTiers(inviteToken ? { inviteToken } : {});
   const { data: invite } = useMembershipInviteInfo(inviteToken);
   const tier = membershipTierId ? tiers?.find((candidate) => candidate.id === membershipTierId) : undefined;
+  const tierCommunityId = (tier as { communityId?: string } | undefined)?.communityId;
+  const { data: communities } = usePublicCommunities({ enabled: !!tierCommunityId });
+  const community = tierCommunityId ? communities?.find((candidate) => candidate.id === tierCommunityId) : undefined;
 
   if (!tier) return null;
 
@@ -76,7 +84,18 @@ export function MembershipTierCallout({
       <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 8, fontFamily: tokens.headingFontFamily }}>
         {t("forge.membership_tier_callout.join_title", { tier_name: tier.name })}
       </h2>
-      <p style={{ fontSize: 14, marginBottom: shown.length || invite ? 12 : 0 }}>{membershipPriceLabel(tier, t, fmt)}</p>
+      <p style={{ fontSize: 14, marginBottom: shown.length || invite || community ? 12 : 0 }}>{membershipPriceLabel(tier, t, fmt)}</p>
+      {community && (
+        <p style={{ fontSize: 14, marginBottom: shown.length || invite ? 12 : 0 }}>
+          <a
+            href={communityAboutPath(community.slug, { tier: tier.id })}
+            data-testid="membership-tier-callout-community"
+            style={{ color: tokens.primary, fontWeight: 600 }}
+          >
+            {t("forge.membership_tier_callout.view_community", { community_name: community.name })}
+          </a>
+        </p>
+      )}
       {invite && invite.membershipTierId === tier.id && (
         <p style={{ fontSize: 14, fontWeight: 600, marginBottom: shown.length ? 12 : 0 }}>
           {t("forge.membership_tier_callout.invite_for_email", { email: invite.email })}

package/src/ui/styled/MembershipTiers.tsx

@@ -14,6 +14,9 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { useForgeT } from "../../i18n";
 import { PublicAuthContext } from "../../contexts/PublicAuthContext";
 import { membershipPriceLabel } from "../format/membershipPriceLabel";
+import { CommunityProvider, useOptionalCommunityContext } from "../../contexts/CommunityContext";
+import { usePublicCommunities } from "../../data/queries/useCommunities";
+import { communityAboutPath, communitiesListPath } from "../headless/communities/paths";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
 
@@ -21,8 +24,16 @@ export interface MembershipTiersProps {
   /** Format a numeric amount for display. Defaults to `$X.XX`. */
   formatAmount?: (amount: number) => string;
   /**
-   * Where "Select" sends the buyer. The chosen tier id is appended as the
-   * `membershipTierId` query param. Default `/i/membership/checkout`.
+   * The community whose tiers to show (slug or id). Omitted, the surrounding
+   * `<CommunityProvider>` is used; outside one, every tier on the profile is
+   * listed and each links to its own community.
+   */
+  community?: string;
+  /**
+   * Override where "Select" sends the buyer; the tier id is appended as the
+   * `membershipTierId` query param. Default: the tier's community About page
+   * with the tier preselected (`/i/communities/<slug>?tier=<id>`), which opens
+   * the join sheet in place.
    */
   checkoutPath?: string;
   /**
@@ -39,7 +50,11 @@ export interface MembershipTiersProps {
 }
 
 /**
- * Drop-in membership page. Renders every membership tier as a centered,
+ * Drop-in tier cards. `community` scopes them to one community:
+ *
+ *     <MembershipTiers community="fan-club" />
+ *
+ * Renders every membership tier as a centered,
  * responsive card row (a single tier sits at a natural card width rather than
  * stretching full-screen). "Select" routes to `checkoutPath` with the tier id,
  * or calls `onSelect` when provided.
@@ -53,14 +68,25 @@ export interface MembershipTiersProps {
  * "{days}-day free trial" badge, and an open tier's button reads "Start free
  * trial". An application tier keeps "Apply to join" (approval starts the trial).
  */
-export function MembershipTiers({
+export function MembershipTiers({ community, ...props }: MembershipTiersProps) {
+  if (community) {
+    return (
+      <CommunityProvider community={community}>
+        <MembershipTierCards {...props} />
+      </CommunityProvider>
+    );
+  }
+  return <MembershipTierCards {...props} />;
+}
+
+function MembershipTierCards({
   formatAmount,
-  checkoutPath = "/i/membership/checkout",
+  checkoutPath,
   onSelect,
   heading,
   className,
   style,
-}: MembershipTiersProps) {
+}: Omit<MembershipTiersProps, "community">) {
   const tokens = useThemeTokens();
   const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
@@ -68,6 +94,9 @@ export function MembershipTiers({
   const pricesIncludeTax = usePricesIncludeTax();
   const taxCaption = priceTaxCaption({ pricesIncludeTax });
   const { data: tiers, isLoading } = useGetMembershipTiers();
+  const context = useOptionalCommunityContext();
+  // Only needed to link a tier to its community when there is no provider.
+  const { data: communities } = usePublicCommunities({ enabled: !context && !checkoutPath && !onSelect });
   const withdraw = useWithdrawMembershipApplication();
   const [withdrawError, setWithdrawError] = useState<string | null>(null);
   // `null` still means "no heading"; anything else falls back to the default.
@@ -82,15 +111,24 @@ export function MembershipTiers({
   // the same sentence this page does.
   const priceLabel = (tier: MembershipTier) => membershipPriceLabel(tier, t, fmt);
 
-  const select = (tier: MembershipTier) => {
-    if (onSelect) return onSelect(tier);
-    if (typeof window !== "undefined") {
+  /** A tier belongs to exactly one community; its About page is where it is joined. */
+  const tierHref = (tier: MembershipTier): string => {
+    const invite = readMembershipInviteFromUrl();
+    if (checkoutPath) {
       const sep = checkoutPath.includes("?") ? "&" : "?";
-      const invite = readMembershipInviteFromUrl();
-      window.location.href = `${checkoutPath}${sep}membershipTierId=${encodeURIComponent(tier.id)}${
+      return `${checkoutPath}${sep}membershipTierId=${encodeURIComponent(tier.id)}${
         invite ? `&invite=${encodeURIComponent(invite)}` : ""
       }`;
     }
+    const tierCommunityId = (tier as MembershipTier & { communityId?: string }).communityId;
+    const slug =
+      context?.slug ?? communities?.find((candidate) => candidate.id === tierCommunityId)?.slug ?? undefined;
+    return slug ? communityAboutPath(slug, { tier: tier.id, ...(invite ? { invite } : {}) }) : communitiesListPath();
+  };
+
+  const select = (tier: MembershipTier) => {
+    if (onSelect) return onSelect(tier);
+    if (typeof window !== "undefined") window.location.href = tierHref(tier);
   };
 
   return (

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/Paywall.tsx

@@ -8,7 +8,7 @@ export interface PaywallProps {
   onAction?: () => void;
 }
 
-/** A themed "members only" card — pair with `<MembershipGate fallback={...}>`. */
+/** A themed "members only" card. Pair with `<CommunityGate fallback={...}>`. */
 export function Paywall({
   title = "Members only",
   message = "This content is available to members. Join to unlock it.",

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(
@@ -106,7 +106,7 @@ function render(rows: MyBooking[]): string {
           <ForgeThemeProvider
             theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
           >
-            <AccountDashboard tab="bookings" onNavigateMembership={() => {}} />
+            <AccountDashboard tab="bookings" />
           </ForgeThemeProvider>
         </PublicAuthContext.Provider>
       </ForgeClientProvider>