@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/MembershipCheckout.tsx

@@ -1,11 +1,15 @@
-import type { CSSProperties } from "react";
+import { useEffect, useState, type CSSProperties } from "react";
 import { useMembershipCheckout } from "../headless/membership/useMembershipCheckout";
+import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
-import { useAmountFormatter } from "../format/useFormatCurrency";
+import { useAmountFormatter, useFormatCurrency, getCurrencySymbol } from "../format/useFormatCurrency";
 import { priceTaxCaption } from "../format/PriceDisplay";
-import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { usePricesIncludeTax, useSiteConfig } from "../../data/queries/useWebsite";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { readableTextOn } from "../theme/contrast";
+import { cycleFloor, cycleIsFree, offeredCycles, type BillingCycle } from "../format/membershipPwyw";
+import type { MembershipTier } from "../../types/models";
 import { Loading } from "./Loading";
 import { PaystackPayButton } from "./PaystackPayButton";
 
@@ -13,15 +17,19 @@ export interface MembershipCheckoutProps {
   /** Pre-selected tier (e.g. from a `?membershipTierId=` param). */
   initialTierId?: string;
   /**
-   * Called on a successful subscription (free activation, or after a paid
-   * payment succeeds) — the host navigates however it wants (e.g. to the account
-   * page). Omit to fall back to Forge's default `window.location` redirect.
+   * Called when the subscription is finished in-app: a free activation, a tier
+   * change settled by proration, or a paid card payment that succeeded. The
+   * host navigates however it wants (e.g. to the account page). Omit to fall
+   * back to Forge's default `window.location` redirect.
+   *
+   * `requiresConfirmation` is true only for a real provider payment, which is
+   * the only case the account page has anything to reconcile.
    */
-  onComplete?: () => void;
+  onComplete?: (result: { requiresConfirmation: boolean }) => void;
   /** The URL Stripe returns to for a PAID subscription (its `return_url`, and the
    * free/paid fallback redirect). Default `/i/account?tab=membership&confirmSubscription=true`. */
   successPath?: string;
-  /** Where the "View memberships" link points when no tier is selected. Default `/i/membership`. */
+  /** Where the "View memberships" link points when the artist sells no tiers. Default `/i/membership`. */
   membershipsPath?: string;
   /** Format a numeric amount for display. Defaults to the runtime currency formatter. */
   formatAmount?: (amount: number) => string;
@@ -30,10 +38,29 @@ export interface MembershipCheckoutProps {
 }
 
 /**
- * Themed membership subscribe — the full flow (tier summary → billing cycle /
- * pay-what-you-want → payment) on `useMembershipCheckout`. Free tiers activate
- * immediately; paid tiers render the registered payment UI (Stripe, manual mode).
- * A single drop-in reused by every site so the flow is fixed in one place.
+ * Themed membership subscribe: the full flow, ported from the client app's
+ * three stages (tier grid, tier detail with billing cycle and
+ * pay-what-you-want, payment) onto `useMembershipCheckout`. Free tiers activate
+ * immediately; paid tiers render the registered payment UI (Stripe) or the
+ * Paystack modal. A single drop-in reused by every site so the flow is fixed in
+ * one place.
+ *
+ * ## The pay-what-you-want box is in the VISITOR's currency
+ *
+ * Everything on this screen is shown converted into whatever currency the
+ * visitor picked. The amount box follows, because a page that prices a tier in
+ * dollars and then asks for euros is asking somebody to do arithmetic to buy
+ * something, and they will get it wrong.
+ *
+ * The API still takes the tenant's SETTLEMENT currency, so the typed figure is
+ * converted back before it is sent, and the floor is enforced on the settled
+ * number rather than the typed one. Both halves are needed: label the box in the
+ * visitor's currency and send it unconverted, and somebody types 5000 meaning
+ * naira and is charged 5000 dollars.
+ *
+ * The typed text is held as its own state rather than derived from the settled
+ * amount. Round-tripping through the rate on every keystroke would rewrite the
+ * digits under the cursor.
  */
 export function MembershipCheckout({
   initialTierId,
@@ -44,12 +71,54 @@ export function MembershipCheckout({
   className,
   style,
 }: MembershipCheckoutProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
-  // Memberships have no checkout tax quote (subscription rail) — inclusive
+  const { data: siteConfig } = useSiteConfig();
+  /** Settlement currency: the currency every tier number is already in. */
+  const settlementCurrency = siteConfig?.currency;
+  const { convertCurrency } = useFormatCurrency();
+  const { userSelectedCurrency } = usePublicAuth();
+  /** What the visitor is reading prices in. Falls back to settlement when they
+   * have not picked one, in which case both conversions below are identities. */
+  const displayCurrency = (userSelectedCurrency as string | undefined) ?? settlementCurrency;
+  const toDisplay = (value: number) => convertCurrency(value, settlementCurrency, displayCurrency);
+  /**
+   * The forward rate, derived rather than looked up backwards.
+   *
+   * `convertCurrency(x, display, settlement)` needs `exchangeRates[NGN][USD]`,
+   * and a tenant's table only has to carry the directions it QUOTES, which is
+   * settlement to everything else. When the reverse is missing that call returns
+   * the amount UNCHANGED, so a fan typing 75,000 meaning naira would be charged
+   * 75,000 dollars. Silently, because nothing throws.
+   *
+   * Dividing by the same rate the display multiplied by cannot go missing: if
+   * the screen converted, this un-converts it exactly.
+   */
+  const displayRate = toDisplay(1) || 1;
+  /**
+   * ROUNDED, because every membership price column is an `integer`.
+   *
+   * `profile_payment_prices.amount`, `price_monthly`, `pay_what_you_want_minimum`
+   * are all integers: a membership is priced in whole settlement units and there
+   * is no such thing as a fractional one. Sending the raw quotient reached
+   * `ProfilePaymentPrice.findOne({ amount })` and Postgres answered
+   * `invalid input syntax for type integer: "426.76681461249575"` - a 500 on the
+   * subscribe button, from a figure the fan never saw.
+   *
+   * Rounding means most typed figures are not exactly representable, so
+   * `settledCharge` below shows the fan what will actually be taken rather than
+   * letting them find out on the statement.
+   */
+  const toSettlement = (value: number) => {
+    const settled = Math.round(value / displayRate);
+    return Number.isFinite(settled) ? settled : 0;
+  };
+  // Memberships have no checkout tax quote (subscription rail). Inclusive
   // stores still caption the displayed price as tax-inclusive (display only).
   const taxCaption = priceTaxCaption({ pricesIncludeTax: usePricesIncludeTax() });
   const renderPayment = usePaymentRenderer();
+
   const checkout = useMembershipCheckout({
     initialTierId,
     returnPath: successPath,
@@ -57,7 +126,24 @@ export function MembershipCheckout({
     onComplete,
   });
 
+  /**
+   * The digits in the box, in the visitor's currency.
+   *
+   * Held separately from `checkout.customAmount` (which stays in settlement
+   * currency, because that is what the API takes). Deriving it would round-trip
+   * through the exchange rate on every keystroke and rewrite what somebody is
+   * halfway through typing.
+   */
+  const [typedAmount, setTypedAmount] = useState<string>("");
+  // Re-seeded when the floor moves, which is what happens on a tier or cycle
+  // change. Left alone otherwise, so it never fights the person typing.
+  useEffect(() => {
+    setTypedAmount(checkout.minimumAmount ? String(Number(toDisplay(checkout.minimumAmount).toFixed(2))) : "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [checkout.minimumAmount, displayCurrency]);
+
   const card: CSSProperties = { maxWidth: 560, margin: "0 auto", color: theme.colors.text, ...style };
+  const wide: CSSProperties = { maxWidth: 960, margin: "0 auto", color: theme.colors.text, ...style };
   const box: CSSProperties = {
     border: `1px solid ${theme.colors.primary}30`,
     borderRadius: theme.cornerRadius,
@@ -74,62 +160,173 @@ export function MembershipCheckout({
     fontWeight: 600,
     cursor: "pointer",
   };
+  const ghostButton: CSSProperties = {
+    ...button,
+    background: "transparent",
+    color: theme.colors.text,
+    border: `1px solid ${theme.colors.primary}40`,
+  };
+  const errorText: CSSProperties = { color: "#ef4444", fontSize: 14, marginTop: 8 };
 
   if (checkout.isLoading) return <Loading fullPage />;
 
   const tier = checkout.selectedTier;
+
+  // ---- Stage 1: pick a tier -------------------------------------------------
   if (!tier) {
+    const tiers = checkout.tiers ?? [];
+    if (!tiers.length) {
+      return (
+        <div className={className} style={card}>
+          <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>
+            {t("forge.membership_checkout.empty_title")}
+          </h1>
+          <p>{t("forge.membership_checkout.no_tier_body")}</p>
+          <a
+            href={membershipsPath}
+            style={{ ...button, marginTop: 16, display: "inline-block", textAlign: "center", textDecoration: "none" }}
+          >
+            {t("forge.membership_checkout.view_memberships")}
+          </a>
+        </div>
+      );
+    }
+
     return (
-      <div className={className} style={card}>
-        <p>Select a membership tier to continue.</p>
-        <a href={membershipsPath} style={{ ...button, marginTop: 16, display: "inline-block", textAlign: "center", textDecoration: "none" }}>
-          View memberships
-        </a>
+      <div className={className} style={wide}>
+        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24, textAlign: "center" }}>
+          {t("forge.membership_checkout.choose_title")}
+        </h1>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center" }}>
+          {tiers.map((option) => {
+            const isCurrent = option.id === checkout.currentTierId;
+            return (
+              <div
+                key={option.id}
+                style={{
+                  ...box,
+                  flex: "1 1 260px",
+                  maxWidth: 340,
+                  width: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 12,
+                  opacity: isCurrent ? 0.6 : 1,
+                  borderColor: isCurrent ? `${theme.colors.primary}99` : `${theme.colors.primary}30`,
+                }}
+              >
+                {isCurrent && (
+                  <span
+                    style={{
+                      alignSelf: "center",
+                      padding: "2px 10px",
+                      borderRadius: 999,
+                      fontSize: 12,
+                      fontWeight: 700,
+                      background: theme.colors.primary,
+                      color: readableTextOn(theme.colors.primary),
+                    }}
+                  >
+                    {t("forge.membership_checkout.current_plan")}
+                  </span>
+                )}
+                <h2 style={{ fontSize: 20, fontWeight: 700, textAlign: "center" }}>{option.name}</h2>
+                <p style={{ fontSize: 18, fontWeight: 700, textAlign: "center", color: theme.colors.primary }}>
+                  {tierPriceLabel(option, t, fmt)}
+                </p>
+                {!!option.benefits?.length && (
+                  <ul
+                    style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}
+                  >
+                    {option.benefits.slice(0, 3).map((b) => (
+                      <li key={b.id} style={{ display: "flex", gap: 8, fontSize: 14 }}>
+                        <span style={{ color: theme.colors.primary }}>✓</span>
+                        {b.title}
+                      </li>
+                    ))}
+                    {option.benefits.length > 3 && (
+                      <li style={{ fontSize: 12, opacity: 0.75 }}>
+                        {t("forge.membership_checkout.more_benefits", { count: option.benefits.length - 3 })}
+                      </li>
+                    )}
+                  </ul>
+                )}
+                <div style={{ marginTop: "auto" }}>
+                  {isCurrent ? (
+                    <p style={{ fontSize: 13, opacity: 0.75, textAlign: "center" }}>
+                      {t("forge.membership_checkout.on_this_plan")}
+                    </p>
+                  ) : (
+                    <button onClick={() => checkout.selectTier(option)} style={button}>
+                      {t("forge.membership_checkout.select_tier")}
+                    </button>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
       </div>
     );
   }
 
-  // Payment step: the registered payment UI (Stripe) in manual mode, or the
-  // Paystack modal behind a pay button. The Paystack branch is also what a
-  // member who closed the popup comes back to, so it must render whether or not
-  // a Stripe secret was ever issued.
+  // ---- Stage 3: payment -----------------------------------------------------
+  // The registered payment UI (Stripe) in manual mode, or the Paystack modal
+  // behind a pay button. The Paystack branch is also what a member who closed
+  // the popup comes back to, so it must render whether or not a Stripe secret
+  // was ever issued.
   if (checkout.step === "payment" && (checkout.clientSecret || checkout.canOpenPaystack)) {
     return (
       <div className={className} style={card}>
-        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>Payment</h1>
+        <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>
+          {t("forge.membership_checkout.payment_title")}
+        </h1>
         <p style={{ opacity: 0.75, marginBottom: 24 }}>
-          {tier.name} · {fmt(checkout.amount)} / {checkout.billingCycle}
+          {t("forge.membership_checkout.payment_summary", {
+            tier_name: tier.name,
+            amount: fmt(checkout.amount),
+            cycle: checkout.billingCycle,
+          })}
         </p>
         <div style={box}>
           {checkout.isPaystack ? (
-            <PaystackPayButton onPay={checkout.openPaystackCheckout} label={`Pay ${fmt(checkout.amount)}`} />
+            <PaystackPayButton
+              onPay={checkout.openPaystackCheckout}
+              label={t("forge.membership_checkout.pay", { amount: fmt(checkout.amount) })}
+            />
           ) : (
             checkout.clientSecret &&
             renderPayment({
               clientSecret: checkout.clientSecret,
               returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
               amount: checkout.amount,
+              currency: settlementCurrency,
               mode: "manual",
-              onSucceeded: () => onComplete?.(),
+              // A card that has just been charged still needs the account page
+              // to reconcile the subscription, so this is the one completion
+              // that asks for confirmation.
+              onSucceeded: () => checkout.finish(true),
               onFailed: () => {},
             })
           )}
         </div>
-        <button
-          onClick={() => checkout.setStep("select")}
-          style={{ ...button, background: "transparent", color: theme.colors.text, border: `1px solid ${theme.colors.primary}40` }}
-        >
-          Back
+        {checkout.error && <p style={errorText}>{checkout.error}</p>}
+        <button onClick={() => checkout.setStep("select")} style={ghostButton}>
+          {t("forge.membership_checkout.back")}
         </button>
       </div>
     );
   }
 
-  const showBillingToggle = !tier.payWhatYouWant && !!tier.priceMonthly && !!tier.priceYearly;
+  // ---- Stage 2: tier detail, billing cycle, pay-what-you-want ---------------
+  const cycles = checkout.cycles;
+  const showBillingToggle = cycles.month && cycles.year;
 
   return (
     <div className={className} style={card}>
-      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24 }}>Join {tier.name}</h1>
+      <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 24 }}>
+        {t("forge.membership_checkout.title", { tier_name: tier.name })}
+      </h1>
 
       <div style={box}>
         {tier.description && <p style={{ marginBottom: 16 }}>{tier.description}</p>}
@@ -148,8 +345,8 @@ export function MembershipCheckout({
       <div style={box}>
         {showBillingToggle && (
           <div style={{ marginBottom: 16 }}>
-            <p style={{ fontSize: 14, marginBottom: 8 }}>Billing cycle</p>
-            <div style={{ display: "flex", gap: 16 }}>
+            <p style={{ fontSize: 14, marginBottom: 8 }}>{t("forge.membership_checkout.billing_cycle_label")}</p>
+            <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
               {(["month", "year"] as const).map((cycle) => (
                 <label key={cycle} style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
                   <input
@@ -159,7 +356,7 @@ export function MembershipCheckout({
                     onChange={() => checkout.setBillingCycle(cycle)}
                     style={{ accentColor: theme.colors.primary }}
                   />
-                  {cycle === "month" ? "Monthly" : "Yearly"}
+                  {cycleLabel(tier, cycle, t, fmt)}
                 </label>
               ))}
             </div>
@@ -168,39 +365,134 @@ export function MembershipCheckout({
 
         {tier.payWhatYouWant && (
           <div style={{ marginBottom: 16 }}>
-            <label style={{ fontSize: 14, display: "block", marginBottom: 8 }}>How much would you like to pay?</label>
+            {/* The floor is printed in the SETTLEMENT currency because that is
+                the currency of the number this box sends. A unit that changes
+                what you type belongs in the label. */}
+            <label htmlFor="forge-pwyw-amount" style={{ fontSize: 14, display: "block", marginBottom: 8 }}>
+              {t("forge.membership_checkout.pwyw_label")}{" "}
+              {t("forge.membership_checkout.pwyw_min", { amount: fmt(checkout.minimumAmount) })}
+            </label>
             <input
+              id="forge-pwyw-amount"
               type="number"
-              min={tier.payWhatYouWantMinimum ?? 0}
-              value={checkout.customAmount || ""}
-              onChange={(e) => checkout.setCustomAmount(Number(e.target.value))}
+              min={Number(toDisplay(checkout.minimumAmount).toFixed(2))}
+              step="any"
+              value={typedAmount}
+              onChange={(e) => {
+                setTypedAmount(e.target.value);
+                // Converted back on the way out. The floor is checked against
+                // THIS number, not the typed one, so a rate that rounds down
+                // cannot slip a fan under the artist's minimum.
+                checkout.setCustomAmount(toSettlement(Number(e.target.value)));
+              }}
+              aria-invalid={!!checkout.amountRefusal}
               style={{
                 width: "100%",
                 height: 40,
                 padding: "8px 12px",
                 borderRadius: theme.cornerRadius,
-                border: `1px solid ${theme.colors.primary}40`,
+                border: `1px solid ${checkout.amountRefusal ? "#ef4444" : `${theme.colors.primary}40`}`,
                 background: "transparent",
                 color: theme.colors.text,
                 outline: "none",
               }}
             />
+            {/* What will ACTUALLY be taken, when rounding to a whole settlement
+                unit means it is not quite what was typed. Shown only when the
+                two differ, because a line that always appears is a line nobody
+                reads. This is state the fan has to act on, not an explanation,
+                so it stays visible rather than going behind a `?`. */}
+            {!checkout.amountRefusal && Number(typedAmount) > 0 && (() => {
+              const settled = toSettlement(Number(typedAmount));
+              const backInDisplay = Number(toDisplay(settled).toFixed(2));
+              return Math.abs(backInDisplay - Number(typedAmount)) >= 0.01 ? (
+                <p style={{ fontSize: 13, opacity: 0.75, marginTop: 6 }}>
+                  {t("forge.membership_checkout.pwyw_charged_as", { amount: fmt(settled) })}
+                </p>
+              ) : null;
+            })()}
+            {checkout.amountRefusal && (
+              <p role="alert" style={errorText}>
+                {checkout.amountRefusal.reason === "below_minimum"
+                  ? t("forge.membership_checkout.amount_below_minimum", {
+                      minimum: fmt(checkout.amountRefusal.minimum),
+                    })
+                  : t("forge.membership_checkout.amount_not_positive")}
+              </p>
+            )}
           </div>
         )}
 
         <div style={{ textAlign: "center", paddingTop: 16, borderTop: `1px solid ${theme.colors.primary}20` }}>
-          <p style={{ fontSize: 14, opacity: 0.75 }}>Total</p>
-          <p style={{ fontSize: 28, fontWeight: 800 }}>{fmt(checkout.amount)}</p>
-          <p style={{ fontSize: 14, opacity: 0.75 }}>{checkout.billingCycle === "month" ? "per month" : "per year"}</p>
-          {taxCaption && <p style={{ fontSize: 12, opacity: 0.65, marginTop: 2 }}>{taxCaption}</p>}
+          <p style={{ fontSize: 14, opacity: 0.75 }}>{t("forge.membership_checkout.total")}</p>
+          <p style={{ fontSize: 28, fontWeight: 800 }}>
+            {checkout.isFreeCycle ? t("forge.membership_checkout.free") : fmt(checkout.amount)}
+          </p>
+          <p style={{ fontSize: 14, opacity: 0.75 }}>
+            {checkout.billingCycle === "month"
+              ? t("forge.membership_checkout.per_month")
+              : t("forge.membership_checkout.per_year")}
+          </p>
+          {taxCaption && !checkout.isFreeCycle && (
+            <p style={{ fontSize: 12, opacity: 0.65, marginTop: 2 }}>{taxCaption}</p>
+          )}
         </div>
       </div>
 
-      {checkout.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{checkout.error}</p>}
+      {checkout.error && <p style={{ ...errorText, marginBottom: 16 }}>{checkout.error}</p>}
 
-      <button onClick={() => checkout.subscribe()} disabled={checkout.isProcessing} style={button}>
-        {checkout.isProcessing ? "Processing…" : "Subscribe"}
-      </button>
+      <div style={{ display: "flex", gap: 12 }}>
+        {!initialTierId && (
+          <button onClick={checkout.backToTierList} disabled={checkout.isProcessing} style={ghostButton}>
+            {t("forge.membership_checkout.back")}
+          </button>
+        )}
+        <button onClick={() => checkout.subscribe()} disabled={checkout.isProcessing} style={button}>
+          {checkout.isProcessing
+            ? t("forge.membership_checkout.submitting")
+            : checkout.isChange
+              ? t("forge.membership_checkout.confirm_change")
+              : t("forge.membership_checkout.submit")}
+        </button>
+      </div>
     </div>
   );
 }
+
+/** The price line on a tier card in the grid. Read-only, so it converts. */
+function tierPriceLabel(
+  tier: MembershipTier,
+  t: (key: string, vars?: Record<string, string | number>) => string,
+  fmt: (amount: number) => string,
+): string {
+  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 t("forge.membership_checkout.free");
+}
+
+/** A billing-cycle radio's label. Read-only, so it converts. */
+function cycleLabel(
+  tier: MembershipTier,
+  cycle: BillingCycle,
+  t: (key: string, vars?: Record<string, string | number>) => string,
+  fmt: (amount: number) => string,
+): string {
+  const amount = fmt(cycleFloor(tier, cycle));
+  if (cycleIsFree(tier, cycle)) {
+    return cycle === "month" ? t("forge.membership_checkout.billing_monthly") : t("forge.membership_checkout.billing_yearly");
+  }
+  if (tier.payWhatYouWant) {
+    return cycle === "month"
+      ? t("forge.membership_checkout.billing_monthly_pwyw", { amount })
+      : t("forge.membership_checkout.billing_yearly_pwyw", { amount });
+  }
+  return cycle === "month"
+    ? t("forge.membership_checkout.billing_monthly_price", { amount })
+    : t("forge.membership_checkout.billing_yearly_price", { amount });
+}

package/src/ui/styled/MembershipTiers.tsx

@@ -4,6 +4,8 @@ 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 { cycleFloor, offeredCycles } from "../format/membershipPwyw";
 import { Button } from "./Button";
 import { Loading } from "./Loading";
 
@@ -33,27 +35,37 @@ export function MembershipTiers({
   formatAmount,
   checkoutPath = "/i/membership/checkout",
   onSelect,
-  heading = "Membership",
+  heading,
   className,
   style,
 }: MembershipTiersProps) {
-  const t = useThemeTokens();
+  const tokens = useThemeTokens();
+  const t = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   // Display-only: inclusive stores caption tier prices as tax-inclusive.
   const pricesIncludeTax = usePricesIncludeTax();
   const taxCaption = priceTaxCaption({ pricesIncludeTax });
   const { data: tiers, isLoading } = useGetMembershipTiers();
+  // `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");
 
   if (isLoading) return <Loading fullPage />;
-  if (!tiers?.length) return <p style={{ color: t.text }}>No membership tiers available.</p>;
+  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 `Pay what you want from ${fmt(tier.payWhatYouWantMinimum ?? 0)}/mo`;
+      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 (tier.priceMonthly) return `${fmt(tier.priceMonthly)}/mo`;
-    if (tier.priceYearly) return `${fmt(tier.priceYearly)}/yr`;
-    return "Free";
+    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;
   };
 
   const select = (tier: MembershipTier) => {
@@ -65,8 +77,12 @@ export function MembershipTiers({
   };
 
   return (
-    <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
-      {heading && <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24, fontFamily: t.headingFontFamily }}>{heading}</h1>}
+    <div className={className} style={{ color: tokens.text, fontFamily: tokens.fontFamily, ...style }}>
+      {resolvedHeading && (
+        <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 24, fontFamily: tokens.headingFontFamily }}>
+          {resolvedHeading}
+        </h1>
+      )}
       <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center" }}>
         {tiers.map((tier) => (
           <div
@@ -75,20 +91,20 @@ export function MembershipTiers({
               flex: "1 1 260px",
               maxWidth: 340,
               width: "100%",
-              background: t.surface,
-              border: `1px solid ${t.primary}30`,
-              borderRadius: t.cornerRadius,
+              background: tokens.surface,
+              border: `1px solid ${tokens.primary}30`,
+              borderRadius: tokens.cornerRadius,
               padding: 24,
               display: "flex",
               flexDirection: "column",
               gap: 12,
             }}
           >
-            <h2 style={{ fontSize: 22, fontWeight: 700, fontFamily: t.headingFontFamily }}>{tier.name}</h2>
-            <div style={{ fontSize: 24, fontWeight: 800, color: t.primary }}>
+            <h2 style={{ fontSize: 22, fontWeight: 700, fontFamily: tokens.headingFontFamily }}>{tier.name}</h2>
+            <div style={{ fontSize: 24, fontWeight: 800, color: tokens.primary }}>
               {priceLabel(tier)}
-              {taxCaption && priceLabel(tier) !== "Free" && (
-                <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: t.text, opacity: 0.65 }}>
+              {taxCaption && priceLabel(tier) !== freeLabel && (
+                <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: tokens.text, opacity: 0.65 }}>
                   {taxCaption}
                 </span>
               )}
@@ -98,14 +114,14 @@ export function MembershipTiers({
               <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                 {tier.benefits.map((b) => (
                   <li key={b.id} style={{ display: "flex", gap: 8, opacity: 0.85 }}>
-                    <span style={{ color: t.primary }}>✓</span>
+                    <span style={{ color: tokens.primary }}>✓</span>
                     {b.title}
                   </li>
                 ))}
               </ul>
             )}
             <Button fullWidth style={{ marginTop: "auto" }} onClick={() => select(tier)}>
-              Select
+              {t("forge.membership_tiers.select")}
             </Button>
           </div>
         ))}