@tribe-nest/forge 3.53.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/ReviewRequestPage.tsx

@@ -0,0 +1,214 @@
+/**
+ * The page a "how did we do?" email lands on.
+ *
+ * It lives in Forge rather than in either storefront because BOTH need it: the
+ * hosted `/i/reviews/$token` page renders it, and every site also keeps a
+ * root-level `/reviews/$token` route for links in emails that were sent before
+ * the move. Two copies of a page that must agree is the failure this avoids.
+ */
+// The emailed review-link form (`/reviews/:token`) built from the headless
+// `useReviewForm` primitive + Tailwind theme tokens. Lives under `/i/`
+// (centrally managed) — the top-level `/reviews/$token` route is a thin shell
+// so emailed links keep working while the page stays updatable.
+import { useState } from "react";
+import { CheckCircle2, Clock, Star } from "lucide-react";
+import { Loading } from "./Loading";
+import { useReviewForm } from "../headless";
+
+export function ReviewRequestPage({ token }: { token: string }) {
+  const form = useReviewForm(token);
+  const [hoverRating, setHoverRating] = useState(0);
+
+  if (form.status === "loading") return <Loading fullPage />;
+
+  if (form.status === "invalid") {
+    return (
+      <Panel>
+        <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">This review link isn't valid</h1>
+        <p className="fg:text-muted">
+          The link may have been mistyped or is no longer active. If you received it by email, try opening it again
+          from the original message.
+        </p>
+      </Panel>
+    );
+  }
+
+  if (form.status === "expired") {
+    return (
+      <Panel>
+        <Clock size={32} className="fg:text-primary" />
+        <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">This review link has expired</h1>
+        <p className="fg:text-muted">
+          Review links are only valid for a limited time after your purchase
+          {form.entityTitle ? ` of “${form.entityTitle}”` : ""}. Thanks anyway for your support!
+        </p>
+      </Panel>
+    );
+  }
+
+  if (form.status === "submitted" && form.submitted) {
+    return (
+      <Panel>
+        <CheckCircle2 size={36} className="fg:text-primary" />
+        <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">Thank you for your review!</h1>
+        <StarRow rating={form.submitted.rating} size={20} />
+        <p className="fg:text-muted">
+          {form.isHeld
+            ? "Your review has been received and is awaiting approval. It will appear once it's been checked."
+            : `Your review is now live${form.entityTitle ? ` on “${form.entityTitle}”` : ""}.`}
+        </p>
+      </Panel>
+    );
+  }
+
+  if (form.status === "locked" && form.existingReview) {
+    return (
+      <Panel>
+        <CheckCircle2 size={32} className="fg:text-primary" />
+        <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">You've already reviewed this</h1>
+        {form.entityTitle && <p className="fg:font-semibold fg:text-text">{form.entityTitle}</p>}
+        <StarRow rating={form.existingReview.rating} size={20} />
+        {form.existingReview.title && <p className="fg:font-bold fg:text-text">{form.existingReview.title}</p>}
+        {form.existingReview.body && <p className="fg:text-text/85">{form.existingReview.body}</p>}
+        <p className="fg:text-sm fg:text-muted">
+          Reviews can be edited for 30 days after they're written. This one can no longer be changed.
+        </p>
+      </Panel>
+    );
+  }
+
+  const displayStars = hoverRating || form.rating;
+
+  return (
+    <div className="fg:mx-auto fg:w-full fg:max-w-xl fg:px-4 fg:py-6">
+      <form
+        className="fg:flex fg:flex-col fg:gap-5 fg:rounded-xl fg:border fg:border-border fg:bg-surface fg:p-6"
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.submit();
+        }}
+      >
+        <div>
+          <h1 className="fg:text-2xl fg:font-extrabold fg:text-text">
+            {form.existingReview ? "Edit your review" : "Leave a review"}
+          </h1>
+          {form.entityTitle && (
+            <p className="fg:mt-1 fg:text-muted">
+              How was <span className="fg:font-bold fg:text-text">{form.entityTitle}</span>?
+            </p>
+          )}
+          {form.existingReview && (
+            <p className="fg:mt-1.5 fg:text-sm fg:text-muted">
+              You can edit your review within 30 days of writing it. Edits are re-checked before publishing.
+            </p>
+          )}
+        </div>
+
+        {/* Star picker */}
+        <div>
+          <span className="fg:mb-1.5 fg:block fg:text-sm fg:font-semibold fg:text-text">Your rating *</span>
+          <div className="fg:flex fg:gap-1.5" role="radiogroup" aria-label="Rating" onMouseLeave={() => setHoverRating(0)}>
+            {[1, 2, 3, 4, 5].map((star) => (
+              <button
+                key={star}
+                type="button"
+                role="radio"
+                aria-checked={form.rating === star}
+                aria-label={`${star} star${star === 1 ? "" : "s"}`}
+                onClick={() => form.setRating(star)}
+                onMouseEnter={() => setHoverRating(star)}
+                className="fg:p-0.5 fg:leading-none"
+              >
+                <Star
+                  size={30}
+                  className={star <= displayStars ? "fg:text-primary" : "fg:text-muted/50"}
+                  fill={star <= displayStars ? "currentColor" : "transparent"}
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <label className="fg:block">
+          <span className="fg:mb-1.5 fg:block fg:text-sm fg:font-semibold fg:text-text">
+            Title <span className="fg:font-normal fg:text-muted">(optional)</span>
+          </span>
+          <input
+            type="text"
+            maxLength={200}
+            value={form.title}
+            onChange={(e) => form.setTitle(e.target.value)}
+            placeholder="Sum it up in a few words"
+            className="fg:w-full fg:rounded-lg fg:border fg:border-border fg:bg-background fg:px-3 fg:py-2 fg:text-text fg:outline-none fg:focus:border-primary"
+          />
+        </label>
+
+        <label className="fg:block">
+          <span className="fg:mb-1.5 fg:block fg:text-sm fg:font-semibold fg:text-text">
+            Your review <span className="fg:font-normal fg:text-muted">(optional)</span>
+          </span>
+          <textarea
+            rows={5}
+            maxLength={5000}
+            value={form.body}
+            onChange={(e) => form.setBody(e.target.value)}
+            placeholder="What did you like or dislike?"
+            className="fg:w-full fg:resize-y fg:rounded-lg fg:border fg:border-border fg:bg-background fg:px-3 fg:py-2 fg:text-text fg:outline-none fg:focus:border-primary"
+          />
+        </label>
+
+        <label className="fg:block">
+          <span className="fg:mb-1.5 fg:block fg:text-sm fg:font-semibold fg:text-text">Display name</span>
+          <input
+            type="text"
+            maxLength={100}
+            value={form.reviewerName}
+            onChange={(e) => form.setReviewerName(e.target.value)}
+            className="fg:w-full fg:rounded-lg fg:border fg:border-border fg:bg-background fg:px-3 fg:py-2 fg:text-text fg:outline-none fg:focus:border-primary"
+          />
+          <span className="fg:mt-1 fg:block fg:text-xs fg:text-muted">Shown publicly next to your review.</span>
+        </label>
+
+        {form.errorMessage && (
+          <p className="fg:rounded-lg fg:border fg:border-border fg:bg-background fg:px-3 fg:py-2 fg:text-sm fg:text-text">
+            {form.errorMessage}
+          </p>
+        )}
+
+        <button
+          type="submit"
+          disabled={!form.canSubmit}
+          className="fg:w-full fg:rounded-lg fg:bg-primary fg:py-2.5 fg:font-semibold fg:disabled:opacity-50"
+          style={{ color: "var(--forge-text-primary, #fff)" }}
+        >
+          {form.isSubmitting ? "Submitting…" : form.existingReview ? "Update review" : "Submit review"}
+        </button>
+      </form>
+    </div>
+  );
+}
+
+function StarRow({ rating, size = 16 }: { rating: number; size?: number }) {
+  return (
+    <span className="fg:inline-flex fg:gap-0.5" aria-label={`${rating} out of 5 stars`}>
+      {[1, 2, 3, 4, 5].map((star) => (
+        <Star
+          key={star}
+          size={size}
+          className={star <= Math.round(rating) ? "fg:text-primary" : "fg:text-muted/50"}
+          fill={star <= Math.round(rating) ? "currentColor" : "transparent"}
+        />
+      ))}
+    </span>
+  );
+}
+
+function Panel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="fg:mx-auto fg:w-full fg:max-w-xl fg:px-4 fg:py-6">
+      <div className="fg:flex fg:flex-col fg:items-center fg:gap-3 fg:rounded-xl fg:border fg:border-border fg:bg-surface fg:p-8 fg:text-center">
+        {children}
+      </div>
+    </div>
+  );
+}

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