@tribe-nest/forge 3.54.0 → 3.57.0

package/src/ui/styled/MembershipTierCallout.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import { useGetMembershipTiers } from "../../data/queries/useMembership";
+import { useGetMembershipTiers, useMembershipInviteInfo } from "../../data/queries/useMembership";
 import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -10,6 +10,13 @@ export interface MembershipTierCalloutProps {
   membershipTierId?: string;
   /** How many benefits to list before summarising the rest. Default 3. */
   maxBenefits?: number;
+  /**
+   * The membership invite the visitor is holding (read off the same redirect as
+   * the tier id). An invite-only tier is only listed with it, and the callout
+   * then also names the email the invite was sent to, so the fan signs in with
+   * the right account.
+   */
+  inviteToken?: string;
   className?: string;
   style?: CSSProperties;
 }
@@ -31,6 +38,7 @@ export interface MembershipTierCalloutProps {
 export function MembershipTierCallout({
   membershipTierId,
   maxBenefits = 3,
+  inviteToken,
   className,
   style,
 }: MembershipTierCalloutProps) {
@@ -39,7 +47,8 @@ export function MembershipTierCallout({
   const fmt = useAmountFormatter();
   // The tier list is one cached query per profile, so this shares the fetch the
   // membership page and the checkout already make rather than adding a request.
-  const { data: tiers } = useGetMembershipTiers();
+  const { data: tiers } = useGetMembershipTiers(inviteToken ? { inviteToken } : {});
+  const { data: invite } = useMembershipInviteInfo(inviteToken);
   const tier = membershipTierId ? tiers?.find((candidate) => candidate.id === membershipTierId) : undefined;
 
   if (!tier) return null;
@@ -67,7 +76,12 @@ 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 ? 12 : 0 }}>{membershipPriceLabel(tier, t, fmt)}</p>
+      <p style={{ fontSize: 14, marginBottom: shown.length || invite ? 12 : 0 }}>{membershipPriceLabel(tier, t, fmt)}</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 })}
+        </p>
+      )}
       {!!shown.length && (
         <div style={{ fontSize: 14 }}>
           <p style={{ fontWeight: 500, marginBottom: 4 }}>{t("forge.membership_tier_callout.benefits_label")}</p>

package/src/ui/styled/MembershipTiers.tsx

@@ -1,10 +1,18 @@
 import type { MembershipTier } from "../../types/models";
-import { useGetMembershipTiers } from "../../data/queries/useMembership";
+import { useContext, useState } from "react";
+import {
+  readMembershipInviteFromUrl,
+  useGetMembershipTiers,
+  useWithdrawMembershipApplication,
+} from "../../data/queries/useMembership";
+import { tierCardAction } from "../headless/membership/membershipApplication";
+import { tierTrialDays } from "../headless/membership/membershipTrial";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { priceTaxCaption } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { useForgeT } from "../../i18n";
+import { PublicAuthContext } from "../../contexts/PublicAuthContext";
 import { membershipPriceLabel } from "../format/membershipPriceLabel";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
@@ -17,7 +25,12 @@ export interface MembershipTiersProps {
    * `membershipTierId` query param. Default `/i/membership/checkout`.
    */
   checkoutPath?: string;
-  /** Optional override for tier selection (e.g. router navigation). */
+  /**
+   * Optional override for tier selection (e.g. router navigation). Also what
+   * "Complete your membership" calls on an approved application whose card was
+   * declined. A host that overrides it should carry an `invite` search param
+   * through to the checkout.
+   */
   onSelect?: (tier: MembershipTier) => void;
   /** Optional page heading. Pass `null` to omit. Default `"Membership"`. */
   heading?: string | null;
@@ -30,6 +43,15 @@ export interface MembershipTiersProps {
  * 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.
+ *
+ * Curated access: an invite-only tier is only returned when the page was opened
+ * with its invite (`?invite=`), and reads "Accept invite"; an application tier
+ * reads "Apply to join". When the signed-in fan already applied, the card shows
+ * where that application stands instead of the button.
+ *
+ * Free trials: a paid tier with a trial the fan is still eligible for carries a
+ * "{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({
   formatAmount,
@@ -46,6 +68,8 @@ export function MembershipTiers({
   const pricesIncludeTax = usePricesIncludeTax();
   const taxCaption = priceTaxCaption({ pricesIncludeTax });
   const { data: tiers, isLoading } = useGetMembershipTiers();
+  const withdraw = useWithdrawMembershipApplication();
+  const [withdrawError, setWithdrawError] = useState<string | null>(null);
   // `null` still means "no heading"; anything else falls back to the default.
   const resolvedHeading = heading === null ? null : (heading ?? t("forge.membership_tiers.heading"));
   const freeLabel = t("forge.membership_tiers.price_free");
@@ -62,7 +86,10 @@ export function MembershipTiers({
     if (onSelect) return onSelect(tier);
     if (typeof window !== "undefined") {
       const sep = checkoutPath.includes("?") ? "&" : "?";
-      window.location.href = `${checkoutPath}${sep}membershipTierId=${encodeURIComponent(tier.id)}`;
+      const invite = readMembershipInviteFromUrl();
+      window.location.href = `${checkoutPath}${sep}membershipTierId=${encodeURIComponent(tier.id)}${
+        invite ? `&invite=${encodeURIComponent(invite)}` : ""
+      }`;
     }
   };
 
@@ -99,6 +126,7 @@ export function MembershipTiers({
                 </span>
               )}
             </div>
+            <TierTrialBadge tier={tier} />
             {tier.description && <p style={{ opacity: 0.75 }}>{tier.description}</p>}
             {!!tier.benefits?.length && (
               <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
@@ -110,12 +138,126 @@ export function MembershipTiers({
                 ))}
               </ul>
             )}
-            <Button fullWidth style={{ marginTop: "auto" }} onClick={() => select(tier)}>
-              {t("forge.membership_tiers.select")}
-            </Button>
+            <TierAction
+              tier={tier}
+              onSelect={() => select(tier)}
+              onWithdraw={async (applicationId) => {
+                setWithdrawError(null);
+                try {
+                  await withdraw.mutateAsync({ applicationId });
+                } catch (error) {
+                  const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
+                  setWithdrawError(detail || t("forge.membership_tiers.withdraw_error"));
+                }
+              }}
+              isWithdrawing={withdraw.isPending}
+              withdrawError={withdraw.variables?.applicationId === tier.myApplication?.id ? withdrawError : null}
+            />
           </div>
         ))}
       </div>
     </div>
   );
 }
+
+/** "{days}-day free trial" on a tier that gives this fan a trial; nothing otherwise. Exported for the spec. */
+export function TierTrialBadge({ tier }: { tier: MembershipTier }) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  // Read softly: the card also renders outside a signed-in tree.
+  const user = useContext(PublicAuthContext)?.user;
+  const days = tierTrialDays(tier, user?.membership);
+  if (days <= 0) return null;
+  return (
+    <span
+      data-testid="membership-tier-trial-badge"
+      style={{
+        alignSelf: "flex-start",
+        padding: "2px 10px",
+        borderRadius: 999,
+        fontSize: 12,
+        fontWeight: 700,
+        border: `1px solid ${tokens.primary}`,
+        color: tokens.primary,
+      }}
+    >
+      {t("forge.membership_tiers.trial_badge", { days })}
+    </span>
+  );
+}
+
+/**
+ * The bottom of a tier card: the join button in the tier's own words, or where
+ * the fan's application stands. Exported for the card-state spec.
+ */
+export function TierAction({
+  tier,
+  onSelect,
+  onWithdraw,
+  isWithdrawing,
+  withdrawError,
+}: {
+  tier: MembershipTier;
+  onSelect: () => void;
+  onWithdraw: (applicationId: string) => void;
+  isWithdrawing?: boolean;
+  withdrawError?: string | null;
+}) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  // Read softly: the card also renders outside a signed-in tree.
+  const user = useContext(PublicAuthContext)?.user;
+  const action = tierCardAction(tier);
+  const stateLine = (text: string) => (
+    <p data-testid="membership-tier-application-state" style={{ fontWeight: 600, color: tokens.text }}>
+      {text}
+    </p>
+  );
+
+  switch (action) {
+    case "pending":
+      return (
+        <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 8 }}>
+          {stateLine(t("forge.membership_tiers.application_pending"))}
+          <Button
+            fullWidth
+            variant="outline"
+            disabled={isWithdrawing}
+            onClick={() => tier.myApplication && onWithdraw(tier.myApplication.id)}
+          >
+            {isWithdrawing ? t("forge.membership_tiers.withdrawing") : t("forge.membership_tiers.withdraw")}
+          </Button>
+          {withdrawError && (
+            <p role="alert" style={{ fontSize: 13 }}>
+              {withdrawError}
+            </p>
+          )}
+        </div>
+      );
+    case "approved":
+      return <div style={{ marginTop: "auto" }}>{stateLine(t("forge.membership_tiers.application_approved"))}</div>;
+    case "declined":
+      return <div style={{ marginTop: "auto" }}>{stateLine(t("forge.membership_tiers.application_declined"))}</div>;
+    case "complete":
+      return (
+        <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 8 }}>
+          {stateLine(t("forge.membership_tiers.application_payment_failed"))}
+          <Button fullWidth onClick={onSelect}>
+            {t("forge.membership_tiers.complete_membership")}
+          </Button>
+        </div>
+      );
+    default:
+      return (
+        <Button fullWidth style={{ marginTop: "auto" }} onClick={onSelect}>
+          {action === "accept_invite"
+            ? t("forge.membership_tiers.accept_invite")
+            : action === "apply"
+              ? t("forge.membership_tiers.apply")
+              : tierTrialDays(tier, user?.membership) > 0
+                ? t("forge.membership_tiers.start_free_trial")
+                : t("forge.membership_tiers.select")}
+        </Button>
+      );
+  }
+}

package/src/ui/styled/ProductGrid.tsx

@@ -1,6 +1,6 @@
 import { Lock } from "lucide-react";
 import { useGetProducts, useGetProductsByIds } from "../../data/queries/useProducts";
-import type { IPublicProduct, ProductType } from "../../types/models";
+import type { IPublicProduct, PaginatedData, ProductType } from "../../types/models";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
@@ -9,6 +9,15 @@ import { Loading } from "./Loading";
 
 export interface ProductGridProps {
   columns?: number;
+  /**
+   * The first page of the shop listing, from a server render
+   * (`fetchProductsServer`).
+   *
+   * Seeds the query so the grid arrives with products in it instead of
+   * rendering a spinner into the document. Only applies to the plain listing:
+   * a grid showing `productIds` is a different query and ignores it.
+   */
+  initialProducts?: PaginatedData<IPublicProduct>;
   limit?: number;
   /**
    * Show these specific products, in this order, instead of the shop listing.
@@ -49,6 +58,7 @@ function minPrice(p: IPublicProduct): number {
 /** Themed product grid, built on `useGetProducts`. */
 export function ProductGrid({
   columns = 3,
+  initialProducts,
   limit,
   productIds,
   categoryId,
@@ -67,7 +77,9 @@ export function ProductGrid({
   const byIds = !!productIds?.length;
   // Both hooks are called unconditionally (rules of hooks); each disables
   // itself when it isn't the one in use.
-  const listQuery = useGetProducts({ page: 1, categoryId, collectionId, productType }, !byIds);
+  const listQuery = useGetProducts({ page: 1, categoryId, collectionId, productType }, !byIds, {
+    initialData: initialProducts,
+  });
   const idsQuery = useGetProductsByIds(byIds ? productIds! : []);
 
   const isLoading = byIds ? idsQuery.isLoading : listQuery.isLoading;

package/src/ui/styled/SignupForm.tsx

@@ -15,11 +15,13 @@ export interface SignupFormProps {
    * create-account request, where a coupon can turn it into a membership.
    */
   membershipTierId?: string;
+  /** The membership invite token riding on the same redirect, if any. See `MembershipTierCallout`. */
+  membershipInviteToken?: string;
   couponCode?: string;
 }
 
 /** Themed account signup form, built on `useSignupForm`. */
-export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode }: SignupFormProps) {
+export function SignupForm({ onSuccess, loginHref, membershipTierId, membershipInviteToken, couponCode }: SignupFormProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
   const form = useSignupForm({ onSuccess, membershipTierId, couponCode });
@@ -73,7 +75,7 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
     <div style={card}>
       {/* What the fan was doing when they hit this wall, kept in view through
           the emailed-code step as well. Nothing is drawn without a tier. */}
-      <MembershipTierCallout membershipTierId={membershipTierId} />
+      <MembershipTierCallout membershipTierId={membershipTierId} inviteToken={membershipInviteToken} />
       <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>
         {form.awaitingCode ? t("forge.signup_form.verify_title") : t("forge.signup_form.title")}
       </h1>

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

@@ -0,0 +1,105 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import axios, { type AxiosAdapter, type InternalAxiosRequestConfig } from "axios";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ForgeClientProvider } from "../../../provider/ForgeProvider";
+import { PublicAuthContext } from "../../../contexts/PublicAuthContext";
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import { AccountDashboard } from "../AccountDashboard";
+
+/**
+ * The account page during a free trial: the date the trial ends and what is
+ * charged after it replace "Renews on", and cancelling says access lasts to the
+ * trial end with nothing charged.
+ */
+
+const DAY = 24 * 60 * 60 * 1000;
+const inDays = (n: number) => new Date(Date.now() + n * DAY).toISOString();
+const fmt = (iso: string) =>
+  new Date(iso).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
+
+const memberWith = (membership: Record<string, unknown>) => ({
+  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: {
+    id: "membership-1",
+    membershipTierId: "tier-1",
+    status: "active",
+    startDate: "2026-09-17T00:00:00.000Z",
+    subscriptionAmount: 10,
+    subscriptionCurrency: "USD",
+    billingCycle: "month",
+    membershipTier: { id: "tier-1", name: "Inner Circle", benefits: [] },
+    ...membership,
+  },
+});
+
+let realAdapter: AxiosAdapter | undefined;
+
+function mount(user: unknown) {
+  // Every request answers empty, so the tab's side queries never reach a network.
+  realAdapter = axios.defaults.adapter as AxiosAdapter | undefined;
+  axios.defaults.adapter = (async (config: InternalAxiosRequestConfig) =>
+    ({ data: [], status: 200, statusText: "OK", headers: {}, config }) as never) as AxiosAdapter;
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId="profile-1">
+        <PublicAuthContext.Provider
+          value={{ user, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+            <AccountDashboard tab="membership" onNavigateMembership={() => {}} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  if (realAdapter) axios.defaults.adapter = realAdapter;
+});
+
+describe("AccountDashboard: a membership in its free trial", () => {
+  it("shows the trial end and what is charged after it, instead of Renews on", () => {
+    const ends = inDays(10);
+    mount(memberWith({ trialEndsAt: ends, endDate: ends }));
+
+    const state = screen.getByTestId("membership-trial-state");
+    expect(state.textContent).toContain(`Free trial until ${fmt(ends)}`);
+    expect(state.textContent).toMatch(new RegExp(`Then .*10.* per month from ${fmt(ends)}\\.`));
+    expect(document.body.textContent).not.toContain("Renews on");
+  });
+
+  it("says access lasts to the trial end with nothing charged when cancelling", () => {
+    const ends = inDays(10);
+    mount(memberWith({ trialEndsAt: ends, endDate: ends }));
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    const dialog = screen.getByRole("alertdialog");
+    expect(dialog.textContent).toContain(
+      `Your free trial will not turn into a paid membership. You keep your benefits until ${fmt(ends)}, and nothing is charged.`,
+    );
+  });
+
+  it("says nothing will be charged once a trial is cancelled", () => {
+    const ends = inDays(10);
+    mount(memberWith({ trialEndsAt: ends, endDate: ends, cancelAtPeriodEnd: true }));
+    expect(screen.getByTestId("membership-trial-state").textContent).toContain("Cancelled. Nothing will be charged.");
+  });
+
+  it("shows no trial line once the trial has ended", () => {
+    mount(memberWith({ trialEndsAt: inDays(-5), endDate: inDays(25) }));
+    expect(screen.queryByTestId("membership-trial-state")).toBeNull();
+    expect(document.body.textContent).toContain("Renews on");
+  });
+});

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

@@ -79,6 +79,24 @@ function installAdapter(tiers: MembershipTier[]) {
     if (url.includes("/public/membership-tiers")) return reply(tiers);
     if (url.includes("/public/websites/site-config")) return reply({ currency: "USD" });
     if (url.includes("/public/currencies")) return reply(currencies);
+    if (url.includes("/public/membership-applications")) {
+      return reply({
+        application: {
+          id: "app-1",
+          profileId: PROFILE_ID,
+          membershipTierId: "tier-1",
+          accountId: "account-1",
+          status: "pending",
+          billingCycle: null,
+          amount: null,
+          currency: null,
+          message: null,
+          closedReason: null,
+        },
+        requiresCard: false,
+        clientSecret: null,
+      });
+    }
     if (url.includes("/public/payments/subscriptions/free")) return reply({ membershipId: "m-1" });
     if (url.includes("/public/payments/subscriptions")) {
       return reply({ membershipId: "m-1", subscriptionId: "s-1", clientSecret: "pi_secret", requiresPayment: true });
@@ -362,3 +380,91 @@ describe("the tier grid, when no tier was chosen up front", () => {
     expect(await screen.findByRole("button", { name: "Confirm change" })).toBeTruthy();
   });
 });
+
+describe("free trials", () => {
+  it("shows the trial line and Start free trial on the select step for an eligible fan", async () => {
+    mount({ tiers: [tier({ priceMonthly: 12, trialDays: 14, trialEligible: true })] });
+
+    const line = await screen.findByTestId("membership-checkout-trial-line");
+    const ends = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+    expect(line.textContent).toBe(`14-day free trial. Your first charge is on ${ends}.`);
+    expect(screen.getByRole("button", { name: "Start free trial" })).toBeTruthy();
+  });
+
+  it("shows neither to a fan who already had a trial", async () => {
+    mount({ tiers: [tier({ priceMonthly: 12, trialDays: 14, trialEligible: false })] });
+
+    await screen.findByText("Inner Circle", { exact: false });
+    expect(screen.queryByTestId("membership-checkout-trial-line")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Start free trial" })).toBeNull();
+  });
+});
+
+describe("tier questionnaires", () => {
+  const questions = [
+    { id: "q-why", question: "Why do you want to join?", type: "textarea" },
+    { id: "q-city", question: "Which city?", type: "select", options: ["Berlin", "Lagos"] },
+    { id: "q-handle", question: "Instagram handle", type: "text", optional: true },
+  ];
+  const applicationPosts = () =>
+    sent.filter((r) => r.method === "post" && r.url.includes("/public/membership-applications"));
+
+  it("renders the questions, required ones marked, and no free-text message box", async () => {
+    mount({ tiers: [tier({ priceMonthly: 0, joinMode: "application", questionnaire: questions })] });
+
+    const why = (await screen.findByLabelText(/Why do you want to join\?/)) as HTMLTextAreaElement;
+    expect(why.tagName).toBe("TEXTAREA");
+    expect(why.required).toBe(true);
+    expect((screen.getByLabelText(/Which city\?/) as HTMLSelectElement).tagName).toBe("SELECT");
+    expect((screen.getByLabelText(/Instagram handle/) as HTMLInputElement).required).toBe(false);
+    expect(screen.queryByText(/Anything you'd like us to know/i)).toBeNull();
+    expect(screen.queryByPlaceholderText(/Tell us a little about yourself/i)).toBeNull();
+  });
+
+  it("refuses a blank required answer beside the questions and sends nothing", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10, questionnaire: questions })] });
+
+    await screen.findByLabelText(/Why do you want to join\?/);
+    fireEvent.click(subscribeButton());
+
+    const refusal = await screen.findByTestId("membership-questionnaire-refusal");
+    expect(refusal.textContent).toBe("Please answer: Why do you want to join?");
+    expect(screen.getAllByText("This field is required")).toHaveLength(2);
+    expect(subscriptionPosts()).toHaveLength(0);
+  });
+
+  it("sends the answers with the paid subscription", async () => {
+    mount({ tiers: [tier({ priceMonthly: 10, questionnaire: questions })] });
+
+    fireEvent.change(await screen.findByLabelText(/Why do you want to join\?/), { target: { value: "Big fan" } });
+    fireEvent.change(screen.getByLabelText(/Which city\?/), { target: { value: "Berlin" } });
+    fireEvent.click(subscribeButton());
+
+    await waitFor(() => expect(subscriptionPosts()).toHaveLength(1));
+    expect(subscriptionPosts()[0].body?.questionnaire).toEqual([
+      { id: "q-why", question: "Why do you want to join?", type: "textarea", answer: "Big fan" },
+      { id: "q-city", question: "Which city?", type: "select", options: ["Berlin", "Lagos"], answer: "Berlin" },
+      { id: "q-handle", question: "Instagram handle", type: "text", answer: "" },
+    ]);
+  });
+
+  it("after applying, links to the account page rather than the membership list", async () => {
+    mount({ tiers: [tier({ priceMonthly: 0, joinMode: "application", questionnaire: questions })] });
+
+    fireEvent.change(await screen.findByLabelText(/Why do you want to join\?/), { target: { value: "Big fan" } });
+    fireEvent.change(screen.getByLabelText(/Which city\?/), { target: { value: "Lagos" } });
+    fireEvent.click(screen.getByRole("button", { name: "Apply to join" }));
+
+    await waitFor(() => expect(applicationPosts()).toHaveLength(1));
+    expect(applicationPosts()[0].body).not.toHaveProperty("message");
+    expect(applicationPosts()[0].body?.questionnaire).toHaveLength(3);
+    expect(await screen.findByText("Application received")).toBeTruthy();
+    const link = screen.getByRole("link", { name: "Go to your account" }) as HTMLAnchorElement;
+    expect(link.getAttribute("href")).toBe("/i/account");
+    expect(screen.queryByRole("link", { name: "View memberships" })).toBeNull();
+  });
+});