@tribe-nest/forge 3.35.0 → 3.37.0

package/src/ui/styled/MembershipTierCallout.tsx

@@ -0,0 +1,91 @@
+import type { CSSProperties } from "react";
+import { useGetMembershipTiers } from "../../data/queries/useMembership";
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { membershipPriceLabel } from "../format/membershipPriceLabel";
+
+export interface MembershipTierCalloutProps {
+  /** The tier the visitor is on their way to join. Nothing is drawn without it. */
+  membershipTierId?: string;
+  /** How many benefits to list before summarising the rest. Default 3. */
+  maxBenefits?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * "Join {tier}", with its price and a few of its benefits.
+ *
+ * Drawn above the login and signup forms when a visitor was sent there from a
+ * membership checkout. Without it the fan clicks Join, gets an unexplained
+ * sign-in wall, and has to remember which tier they picked and trust that the
+ * site remembers too. The client app has always shown this; code websites did
+ * not, so this is the same reassurance in a Forge component.
+ *
+ * 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
+ * id from a stale link must not print an empty box.
+ */
+export function MembershipTierCallout({
+  membershipTierId,
+  maxBenefits = 3,
+  className,
+  style,
+}: MembershipTierCalloutProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  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 tier = membershipTierId ? tiers?.find((candidate) => candidate.id === membershipTierId) : undefined;
+
+  if (!tier) return null;
+
+  const benefits = tier.benefits ?? [];
+  const shown = benefits.slice(0, maxBenefits);
+  const remaining = benefits.length - shown.length;
+
+  return (
+    <div
+      className={className}
+      style={{
+        // No width and no outer margin: this is placed INSIDE the host's card
+        // (the login and signup forms put it above their heading), so it must
+        // not carry a column of its own that fights the one around it.
+        marginBottom: 24,
+        padding: 16,
+        borderRadius: tokens.cornerRadius,
+        background: `${tokens.primary}1a`,
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      <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>
+      {!!shown.length && (
+        <div style={{ fontSize: 14 }}>
+          <p style={{ fontWeight: 500, marginBottom: 4 }}>{t("forge.membership_tier_callout.benefits_label")}</p>
+          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+            {shown.map((benefit) => (
+              <li key={benefit.id} style={{ display: "flex", gap: 8 }}>
+                <span style={{ color: tokens.primary }}>✓</span>
+                {benefit.title}
+              </li>
+            ))}
+            {remaining > 0 && (
+              <li style={{ fontSize: 12, opacity: 0.75 }}>
+                {t("forge.membership_tier_callout.more_benefits", { count: remaining })}
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/MembershipTiers.tsx

@@ -5,7 +5,7 @@ import { useAmountFormatter } from "../format/useFormatCurrency";
 import { priceTaxCaption } from "../format/PriceDisplay";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { useForgeT } from "../../i18n";
-import { cycleFloor, offeredCycles } from "../format/membershipPwyw";
+import { membershipPriceLabel } from "../format/membershipPriceLabel";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
 
@@ -53,20 +53,10 @@ export function MembershipTiers({
   if (isLoading) return <Loading fullPage />;
   if (!tiers?.length) return <p style={{ color: tokens.text }}>{t("forge.membership_tiers.empty_title")}</p>;
 
-  // A tier priced on ONE cycle must be advertised on that cycle. Reading the
-  // monthly minimum unconditionally printed "Pay what you want from $0/mo" on a
-  // yearly-only tier, which reads as free and is the opposite of the truth.
-  const priceLabel = (tier: MembershipTier) => {
-    const cycles = offeredCycles(tier);
-    if (tier.payWhatYouWant) {
-      return cycles.month
-        ? t("forge.membership_tiers.price_pwyw", { amount: fmt(cycleFloor(tier, "month")) })
-        : t("forge.membership_tiers.price_pwyw_yearly", { amount: fmt(cycleFloor(tier, "year")) });
-    }
-    if (cycles.month) return t("forge.membership_tiers.price_monthly", { amount: fmt(cycleFloor(tier, "month")) });
-    if (cycles.year) return t("forge.membership_tiers.price_yearly", { amount: fmt(cycleFloor(tier, "year")) });
-    return freeLabel;
-  };
+  // A tier priced on ONE cycle must be advertised on that cycle. The rule lives
+  // in `membershipPriceLabel` so the login and signup callout prices a tier with
+  // the same sentence this page does.
+  const priceLabel = (tier: MembershipTier) => membershipPriceLabel(tier, t, fmt);
 
   const select = (tier: MembershipTier) => {
     if (onSelect) return onSelect(tier);

package/src/ui/styled/SignupForm.tsx

@@ -1,12 +1,19 @@
 import { useSignupForm } from "../headless/auth/useSignupForm";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { MembershipTierCallout } from "./MembershipTierCallout";
 
 export interface SignupFormProps {
   /** Called after a successful signup. The shell typically redirects here. */
   onSuccess?: (smartLinkPath?: string) => void;
   /** Href for the "Login" link. */
   loginHref: string;
+  /**
+   * The tier this visitor is on their way to join. Shown above the form, so a
+   * fan who pressed Join and landed on a signup wall can see which tier they
+   * picked and that the wall is part of joining it. It also rides along on the
+   * create-account request, where a coupon can turn it into a membership.
+   */
   membershipTierId?: string;
   couponCode?: string;
 }
@@ -64,6 +71,9 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
 
   return (
     <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} />
       <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/AccountDashboardCommunity.spec.tsx

@@ -8,21 +8,20 @@ import { communityKeys, type CommunitySpace } from "../../../data/queries/useCom
 import { AccountDashboard } from "../AccountDashboard";
 
 /**
- * The account page's way into the members corner.
+ * The account page's way into the member area.
  *
  * Before this, a signed-in member landed on the membership card and the only
  * doors on it led back to billing: change the plan, cancel it, fix the card.
- * The community they were paying for was reachable only by typing the URL.
+ * The member area they were paying for was reachable only by typing the URL.
  *
- * The gate is the server's own answer. `/public/community/spaces` returns the
- * open spaces PLUS the ones gated to a tier the caller holds, so the list being
- * empty is the server saying "there is nothing here you can open". Drawing the
- * link anyway would walk a member into a bounce, which is why the empty case is
- * asserted as hard as the happy one.
+ * The first version gated the link on `/public/community/spaces` returning a
+ * space the caller could open, which hid it from precisely the fans who had not
+ * joined yet. Being signed in is now the whole gate: the member home shows the
+ * locked posts and the way to buy access, so it is never a dead end.
  *
  * Rendered through `react-dom/server`: no DOM, no effects, so the spaces query
- * is SEEDED into the react-query cache rather than mocked. That keeps the real
- * `useCommunitySpaces` in the path, and a rename of its query key fails here.
+ * is SEEDED into the react-query cache rather than mocked, which keeps the real
+ * data path in place for the rest of the card.
  */
 
 const PROFILE_ID = "profile-1";
@@ -65,21 +64,29 @@ const member = {
   },
 };
 
+/** The same signed-in fan, with no membership of any kind. */
+const nonMember = { ...member, membership: undefined };
+
 /**
  * The membership tab as a Forge code website draws it.
  *
- * `spaces === null` stands for the query never having answered (the member has
- * no accessible spaces cached), which is the state a non-member sits in.
+ * `spaces === null` stands for the query never having answered, which is the
+ * state every first paint sits in.
  */
-function render(opts: { spaces: CommunitySpace[] | null; onNavigateCommunity?: () => void }): string {
+function render(opts: {
+  spaces: CommunitySpace[] | null;
+  user?: typeof member | typeof nonMember | null;
+  onNavigateCommunity?: () => void;
+}): string {
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   if (opts.spaces) queryClient.setQueryData(communityKeys.spaces(PROFILE_ID), opts.spaces);
+  const user = opts.user === undefined ? member : opts.user;
 
   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}
+          value={{ user, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
         >
           <ForgeThemeProvider
             theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
@@ -96,39 +103,47 @@ function render(opts: { spaces: CommunitySpace[] | null; onNavigateCommunity?: (
   );
 }
 
-describe("AccountDashboard: the way into the members corner", () => {
-  it("REGRESSION: offers the community to a member who has a space to open", () => {
-    // The gap this closes. Without it the membership card's only exits are
-    // Change and Cancel, and the community is unreachable from the account page.
+describe("AccountDashboard: the way into the member area", () => {
+  it("REGRESSION: offers the member area to a member who has a space to open", () => {
+    // The original gap this closes. Without it the membership card's only exits
+    // are Change and Cancel, and the member area is unreachable from here.
     const html = render({ spaces: [space()], onNavigateCommunity: () => {} });
 
-    expect(html).toContain("Community spaces");
+    expect(html).toContain("Member Area");
+  });
+
+  it("REGRESSION: offers the member area to a signed-in fan with NO membership", () => {
+    // The second gap. The link used to require an openable space, so a fan who
+    // had not joined saw no way in, which is the fan the member home is most
+    // useful to: that page shows the locked posts and the offer to join.
+    const html = render({ spaces: [], user: nonMember, onNavigateCommunity: () => {} });
+
+    expect(html).toContain("Member Area");
+    // Still the non-member card and not some other state.
+    expect(html).toContain("You don&#x27;t have an active membership.");
   });
 
-  it("REGRESSION: says nothing when the member can open no space", () => {
-    // A link here would promise a door that is locked: the server returned no
-    // space this account may enter, so the honest account page is silent.
-    const html = render({ spaces: [], onNavigateCommunity: () => {} });
+  it("REGRESSION: offers it before the spaces query has answered", () => {
+    // First paint has no cached answer. The link no longer waits on that read,
+    // so it does not appear a beat late.
+    const html = render({ spaces: null, onNavigateCommunity: () => {} });
 
-    expect(html).not.toContain("Community spaces");
-    // The billing actions are untouched, so this is the entry point missing and
-    // not the whole card failing to draw.
-    expect(html).toContain("Change");
+    expect(html).toContain("Member Area");
   });
 
-  it("draws nothing when the host site has no community route to send anyone to", () => {
+  it("draws nothing when the host site has no member-area route to send anyone to", () => {
     // `onNavigateCommunity` is optional. A site that leaves it out gets no
-    // button, even with spaces in the cache, rather than a dead one.
+    // button rather than a dead one.
     const html = render({ spaces: [space()] });
 
-    expect(html).not.toContain("Community spaces");
+    expect(html).not.toContain("Member Area");
   });
 
-  it("stays quiet while the spaces query has not answered yet", () => {
-    // First paint has no cached answer. Guessing "yes" here would flash a link
-    // and then withdraw it from members who never had access.
-    const html = render({ spaces: null, onNavigateCommunity: () => {} });
+  it("draws nothing for a visitor who is not signed in", () => {
+    // The member area is behind a login. Offering it to a signed-out visitor
+    // sends them at a guard, not at the content.
+    const html = render({ spaces: [space()], user: null, onNavigateCommunity: () => {} });
 
-    expect(html).not.toContain("Community spaces");
+    expect(html).not.toContain("Member Area");
   });
 });

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

@@ -0,0 +1,200 @@
+import { describe, it, expect } 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 { MyFilmRental } from "../../../data/queries/useFilms";
+import { AccountDashboard, type AccountTabKey } from "../AccountDashboard";
+
+/**
+ * Rentals on the account page.
+ *
+ * A fan who rented a film could find their tickets, their orders and their
+ * coaching sessions on this page and no trace of the rental - `/i/films/library`
+ * held it, and nothing on the account page pointed there. So the tab exists, and
+ * these are the two things it must get right:
+ *
+ *   LIVE     - the window is open, so the row offers the way in (Resume when
+ *              there is progress to resume, Watch otherwise).
+ *   NOT LIVE - expired or refunded, so the row offers Rent again and NOT a
+ *              Watch button that leads to a player which would refuse them.
+ *
+ * `isLive` is the SERVER's answer (`msRemaining`, `expiresAt`, `revokedAt` are
+ * all decided there). Nothing here recomputes it, and these specs assert the
+ * rendering of that flag rather than any clock arithmetic in the browser.
+ *
+ * Rendered through `react-dom/server`, like the community spec beside it: no
+ * DOM and no effects, so the rentals query is SEEDED into the react-query cache
+ * rather than mocked. That keeps the real `useMyFilmRentals` in the path, and a
+ * rename of its query key fails here.
+ */
+
+const PROFILE_ID = "profile-1";
+const ACCOUNT_ID = "account-1";
+
+/** The key `useMyFilmRentals(accountId)` reads, at its default page and limit. */
+const RENTALS_KEY = ["my-film-rentals", ACCOUNT_ID, PROFILE_ID, 1, 20];
+
+const rental = (overrides: Partial<MyFilmRental> = {}): MyFilmRental => ({
+  id: "rental-1",
+  filmId: "film-1",
+  status: "active",
+  amountCents: 500,
+  currency: "USD",
+  rentalDurationHours: 48,
+  rentalOptionId: "option-1",
+  paidAt: "2026-08-01T00:00:00.000Z",
+  startBy: "2026-09-01T00:00:00.000Z",
+  firstPlayedAt: "2026-08-02T00:00:00.000Z",
+  expiresAt: "2026-08-04T00:00:00.000Z",
+  refundedAt: null,
+  revokedAt: null,
+  isLive: true,
+  msRemaining: 3 * 3600_000,
+  windowMs: 48 * 3600_000,
+  film: {
+    id: "film-1",
+    title: "The Long Goodbye",
+    slug: "the-long-goodbye",
+    kind: "film",
+    status: "published",
+    archivedAt: null,
+    cover: null,
+  },
+  progress: [],
+  ...overrides,
+});
+
+const fan = {
+  id: ACCOUNT_ID,
+  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,
+};
+
+function render(opts: { rentals: MyFilmRental[] | null; tab?: AccountTabKey }): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (opts.rentals) {
+    queryClient.setQueryData(RENTALS_KEY, {
+      data: opts.rentals,
+      total: opts.rentals.length,
+      page: 1,
+      limit: 20,
+    });
+  }
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={
+            {
+              user: fan,
+              isInitialized: true,
+              currencies: null,
+              userSelectedCurrency: "USD",
+              logout: () => {},
+            } as never
+          }
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            <AccountDashboard tab={opts.tab ?? "rentals"} onNavigateMembership={() => {}} />
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("AccountDashboard: the fan's rentals", () => {
+  it("REGRESSION: a running rental is reachable from the account page", () => {
+    // The gap this closes. The rental existed, the player existed, and the
+    // account page mentioned neither.
+    const html = render({ rentals: [rental()] });
+
+    expect(html).toContain("Rentals");
+    expect(html).toContain("The Long Goodbye");
+    expect(html).toContain("Watch");
+    // The window is state the fan acts on, so it is on the row rather than
+    // behind a `?`.
+    expect(html).toContain("3h 0m left");
+    expect(html).not.toContain("Rent again");
+  });
+
+  it("offers to resume the episode the fan stopped in the middle of", () => {
+    const html = render({
+      rentals: [rental({ progress: [{ episodeId: "episode-1", positionSec: 900, completedAt: null }] })],
+    });
+
+    expect(html).toContain("Resume");
+  });
+
+  it("REGRESSION: an expired rental offers Rent again, never Watch", () => {
+    // Drawing Watch here walks the fan into a player that refuses them: the
+    // window is the server's to judge and it has closed.
+    const html = render({
+      rentals: [rental({ isLive: false, msRemaining: 0, expiresAt: "2026-08-04T00:00:00.000Z" })],
+    });
+
+    expect(html).toContain("Rent again");
+    expect(html).toContain("Your window has closed.");
+    expect(html).not.toContain(">Watch<");
+    expect(html).not.toContain(">Resume<");
+  });
+
+  it("says a refunded rental was refunded rather than that it ran out", () => {
+    // Two different things happened, and "your window has closed" over a refund
+    // reads as the artist keeping the money.
+    const html = render({
+      rentals: [rental({ isLive: false, msRemaining: null, refundedAt: "2026-08-03T00:00:00.000Z" })],
+    });
+
+    expect(html).toContain("Refunded.");
+    expect(html).toContain("Rent again");
+  });
+
+  it("keeps a rental that has not been started apart from one that is running", () => {
+    // The clock starts at first play, so this fan has lost nothing by waiting.
+    // Saying "0m left" here would be a lie that costs them the film.
+    const html = render({ rentals: [rental({ firstPlayedAt: null, msRemaining: null, expiresAt: null })] });
+
+    expect(html).toContain("Not started.");
+    expect(html).toContain("Watch");
+  });
+
+  it("does not draw the tab on a site where this fan holds no rental", () => {
+    // Film rentals are off by default and per profile. An always-empty tab on
+    // every account page is noise on every site that never sells one.
+    const html = render({ rentals: [], tab: "membership" });
+
+    expect(html).not.toContain("Rentals");
+    // The rest of the strip is untouched, so this is the one tab missing rather
+    // than the dashboard failing to draw.
+    expect(html).toContain("Tickets");
+  });
+
+  it("stays quiet while the rentals query has not answered yet", () => {
+    // First paint has no cached answer. Drawing the tab on a guess flashes it
+    // and then withdraws it from fans who never rented anything.
+    const html = render({ rentals: null, tab: "membership" });
+
+    expect(html).not.toContain("Rentals");
+  });
+
+  it("keeps the tab drawn when it is the one being shown, even with nothing in it", () => {
+    // A receipt email links straight at `?tab=rentals`. A strip that disowns the
+    // panel underneath it is worse than an empty tab.
+    const html = render({ rentals: [], tab: "rentals" });
+
+    expect(html).toContain("Rentals");
+    expect(html).toContain("You have not rented anything yet.");
+  });
+});

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

@@ -0,0 +1,126 @@
+import { describe, it, expect } 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 { LoginForm } from "../LoginForm";
+import { SignupForm } from "../SignupForm";
+import type { MembershipTier } from "../../../types/models";
+
+/**
+ * What a fan sees after pressing Join while signed out.
+ *
+ * The auth guard sends them to `/i/login?redirect=/i/membership/checkout?membershipTierId=…`,
+ * which up to now was a bare sign-in card: no mention of the tier they had just
+ * chosen, no sign that the wall was part of joining at all. The client app has
+ * always shown the tier on this screen, so this is code websites catching up.
+ *
+ * Rendered through `react-dom/server`, with the tier list SEEDED into the
+ * react-query cache rather than mocked, so the real `useGetMembershipTiers` stays
+ * in the path and a rename of its query key fails here.
+ */
+
+const PROFILE_ID = "profile-1";
+
+const tier: MembershipTier = {
+  id: "tier-1",
+  profileId: PROFILE_ID,
+  name: "Inner Circle",
+  description: "The good stuff",
+  priceMonthly: 10,
+  priceYearly: null,
+  payWhatYouWant: false,
+  payWhatYouWantMinimum: null,
+  payWhatYouWantMaximum: null,
+  isDefault: false,
+  archived: false,
+  order: 0,
+  benefits: [
+    { id: "b1", title: "Early demos" },
+    { id: "b2", title: "Monthly livestream" },
+    { id: "b3", title: "Discord access" },
+    { id: "b4", title: "Name in the credits" },
+  ],
+} as unknown as MembershipTier;
+
+function render(node: React.ReactNode, opts: { tiers?: MembershipTier[] } = {}): string {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  if (opts.tiers) queryClient.setQueryData(["membership-tiers", PROFILE_ID], opts.tiers);
+  // Settlement currency, or every price formats as "N/A".
+  queryClient.setQueryData(["site-config", PROFILE_ID], { currency: "USD" });
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ForgeClientProvider apiUrl="http://api.test" profileId={PROFILE_ID}>
+        <PublicAuthContext.Provider
+          value={{ user: null, currencies: null, userSelectedCurrency: "USD", logout: () => {} } as never}
+        >
+          <ForgeThemeProvider
+            theme={{ colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 }}
+          >
+            {node}
+          </ForgeThemeProvider>
+        </PublicAuthContext.Provider>
+      </ForgeClientProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("the tier a signed-out fan was on their way to join", () => {
+  it("REGRESSION: names the tier, its price and its benefits above the login form", () => {
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />, {
+      tiers: [tier],
+    });
+
+    expect(html).toContain("Join Inner Circle");
+    expect(html).toContain("$10/mo");
+    expect(html).toContain("Early demos");
+    // The login form itself is untouched underneath.
+    expect(html).toContain("Password");
+  });
+
+  it("lists three benefits and counts the rest", () => {
+    // The whole list would push the form itself below the fold on a phone.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />, {
+      tiers: [tier],
+    });
+
+    expect(html).toContain("Discord access");
+    expect(html).not.toContain("Name in the credits");
+    expect(html).toContain("+1 more benefits");
+  });
+
+  it("REGRESSION: shows the same tier on the signup form", () => {
+    // A fan with no account gets sent on from login to signup, and the tier has
+    // to survive that hop or the reassurance disappears halfway through.
+    const html = render(<SignupForm loginHref="/i/login" membershipTierId="tier-1" />, { tiers: [tier] });
+
+    expect(html).toContain("Join Inner Circle");
+  });
+
+  it("says nothing when the visitor came to log in on their own", () => {
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" />, { tiers: [tier] });
+
+    expect(html).not.toContain("Join Inner Circle");
+    expect(html).toContain("Password");
+  });
+
+  it("says nothing when the id matches no tier the artist sells", () => {
+    // A stale link, or a tier that has since been archived. An empty box with a
+    // heading and no tier in it would be worse than no box.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="gone" />, {
+      tiers: [tier],
+    });
+
+    expect(html).not.toContain("Join");
+  });
+
+  it("says nothing before the tier list has arrived", () => {
+    // First paint has no cached answer. Drawing a heading now and the tier a
+    // beat later would move the form under the visitor's cursor.
+    const html = render(<LoginForm signupHref="/i/signup" forgotHref="/i/forgot-password" membershipTierId="tier-1" />);
+
+    expect(html).not.toContain("Join Inner Circle");
+  });
+});

package/src/ui/styled/forge-utilities.css

@@ -84,6 +84,9 @@
     .order-1 {
       order: 1;
     }
+    .order-2 {
+      order: 2;
+    }
     .container {
       width: 100%;
       @media (width >= 40rem) {