@tribe-nest/forge 3.54.0 → 3.58.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/PhoneInput.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { usePhoneInput, type UsePhoneInputOptions, type UsePhoneInputReturn } from "../headless/forms/usePhoneInput";
+
+export interface PhoneInputProps extends UsePhoneInputOptions {
+  /** Drive the field from a hook the parent already owns (checkout does this). */
+  controller?: UsePhoneInputReturn;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  id?: string;
+}
+
+/**
+ * Country select plus a national-format number field.
+ *
+ * The visitor picks a flag and types their number the way they would say it
+ * aloud, with no country code and no `+`. The E.164 string the rest of the
+ * platform needs is derived, never typed.
+ *
+ * The hint sits in the placeholder rather than under the field. A real national
+ * example for the selected country (`07700 900123` under GB) says more than a
+ * sentence would, and a permanent muted line under every phone field is exactly
+ * the kind of copy people stop reading. The "without the country code" wording
+ * appears only when someone has typed a `+` anyway, which is the moment it is
+ * worth saying.
+ */
+export function PhoneInput({ controller, label, required, disabled, id, ...opts }: PhoneInputProps) {
+  const theme = useForgeTheme();
+  const t = useForgeT();
+  const own = usePhoneInput(opts);
+  const f = controller ?? own;
+
+  const fieldId = id ?? "forge-phone";
+  const errorId = `${fieldId}-error`;
+  const alpha = (a: number) =>
+    Math.round(a * 255)
+      .toString(16)
+      .padStart(2, "0");
+
+  const shared: React.CSSProperties = {
+    padding: "8px 12px",
+    border: `1px solid ${f.error ? "#ef4444" : `${theme.colors.primary}${alpha(0.3)}`}`,
+    backgroundColor: theme.colors.background,
+    color: theme.colors.text,
+    borderRadius: `${theme.cornerRadius}px`,
+    fontSize: 14,
+  };
+
+  const errorText =
+    f.error === "required"
+      ? t("forge.phone_input.error_required")
+      : f.error === "no_country"
+        ? t("forge.phone_input.error_no_country")
+        : f.error === "invalid"
+          ? t("forge.phone_input.error_invalid")
+          : null;
+
+  return (
+    <div className="fg:flex fg:flex-col fg:gap-1 fg:w-full">
+      {label && (
+        <label htmlFor={fieldId} style={{ color: theme.colors.text, fontSize: 14, fontWeight: 500 }}>
+          {label}
+          {required && <span style={{ color: "#ef4444" }}> *</span>}
+        </label>
+      )}
+
+      <div className="fg:flex fg:flex-row fg:gap-2 fg:w-full">
+        <select
+          aria-label={t("forge.phone_input.country_label")}
+          value={f.country ?? ""}
+          disabled={disabled || !f.isReady}
+          onChange={(e) => f.setCountry(e.target.value as never)}
+          style={{ ...shared, flex: "0 0 auto", maxWidth: 140, cursor: disabled ? "default" : "pointer" }}
+        >
+          {!f.country && <option value="">{t("forge.phone_input.country_placeholder")}</option>}
+          {f.countries.map((c) => (
+            <option key={c.country} value={c.country}>
+              {c.flag} {c.country} {c.callingCode}
+            </option>
+          ))}
+        </select>
+
+        <input
+          id={fieldId}
+          type="tel"
+          inputMode="tel"
+          autoComplete="tel-national"
+          disabled={disabled}
+          // Until the metadata lands there is no national example to show, so
+          // fall back to the generic hint rather than an empty field.
+          placeholder={f.placeholder || t("forge.phone_input.placeholder_fallback")}
+          value={f.value}
+          onChange={(e) => f.setValue(e.target.value)}
+          onBlur={f.markTouched}
+          aria-invalid={!!f.error}
+          aria-describedby={f.error ? errorId : undefined}
+          style={{ ...shared, flex: "1 1 auto", minWidth: 0 }}
+        />
+      </div>
+
+      {errorText && (
+        <p id={errorId} role="alert" style={{ color: "#ef4444", fontSize: 13 }}>
+          {errorText}
+        </p>
+      )}
+
+      {/* A landline can be delivered to by a courier but cannot receive a text.
+          Worth saying, never worth blocking on: the line type is a guess from a
+          numbering plan, and refusing a real number on a guess is worse than
+          spending one credit to find out. */}
+      {!errorText && f.warning === "landline" && (
+        <p style={{ color: theme.colors.text, opacity: 0.7, fontSize: 13 }}>
+          {t("forge.phone_input.warning_landline")}
+        </p>
+      )}
+
+      {/* Only once they have typed a country code anyway. */}
+      {!errorText && f.value.trim().startsWith("+") && (
+        <p style={{ color: theme.colors.text, opacity: 0.7, fontSize: 13 }}>
+          {t("forge.phone_input.hint_no_country_code")}
+        </p>
+      )}
+    </div>
+  );
+}

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/AccountDashboardBookingCall.spec.tsx

@@ -192,3 +192,39 @@ describe("AccountDashboard: the way into a coaching video call", () => {
     expect(html).not.toContain("the room opens");
   });
 });
+
+describe("AccountDashboard: the reschedule rule a session was sold under", () => {
+  it("shows a reschedule rule of the booking's own", () => {
+    const html = render([
+      booking({
+        location: null,
+        reschedulePolicy: {
+          policy: "until",
+          cutoffHours: 12,
+          followsCancellation: false,
+          description: "You can reschedule up to 12 hours before this starts.",
+        },
+      }),
+    ]);
+    expect(html).toContain("You can reschedule up to 12 hours before this starts.");
+  });
+
+  it("repeats nothing when moves follow the cancellation window", () => {
+    const html = render([
+      booking({
+        location: null,
+        reschedulePolicy: {
+          policy: "anytime",
+          cutoffHours: null,
+          followsCancellation: true,
+          description: "You can reschedule any time before this starts.",
+        },
+      }),
+    ]);
+    expect(html).not.toContain("You can reschedule");
+  });
+
+  it("renders a row from an older API that sends no reschedule rule", () => {
+    expect(() => render([booking({ location: null })])).not.toThrow();
+  });
+});

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");
+  });
+});