@tribe-nest/forge 3.22.0 → 3.24.0

package/src/ui/styled/EventTickets.tsx

@@ -1,13 +1,23 @@
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useState } from "react";
-import { AlertCircle, Clock, KeyRound, X } from "lucide-react";
+import { AlertCircle, CalendarClock, Clock, KeyRound, X } from "lucide-react";
 import type { IEvent, ITicket } from "../../types/models";
 import { useEventCheckout } from "../headless/event/useEventCheckout";
 import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay, summarizeTaxQuote } from "../format/PriceDisplay";
 import { clampChosenAmount, isPayWhatYouWant, pwywDefaultAmount, pwywMaximum } from "../format/pwyw";
+import {
+  maxAddableTickets,
+  onSaleBadge,
+  onSaleNotice,
+  ticketSaleWindow,
+  ticketSeatLabel,
+  ticketSeatNotice,
+  ticketSeatState,
+} from "../format/ticketAvailability";
 import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
 import { MembershipGateNotice } from "./MembershipGateNotice";
@@ -258,9 +268,17 @@ function TicketStep({
   };
 
   const setQty = (ticket: ITicket, qty: number) => {
-    const remaining = ticket.quantity - ticket.sold;
-    const maxAllowed = Math.min(remaining, ticket.maxPerPerson ?? remaining);
-    c.setTicketQty(ticket.id, Math.max(0, Math.min(qty, maxAllowed)));
+    // `maxAddableTickets` subtracts `held` and returns 0 before a scheduled
+    // on-sale — the same two facts the server sells on. Computed off `now` so
+    // the cap opens up on the tick the on-sale time passes, with no reload.
+    //
+    // 2.6b adds back the seats held for THIS visitor by a waitlist offer.
+    // Without it the offeree's own reservation makes the tier read sold out to
+    // them and the claim link is unusable.
+    c.setTicketQty(
+      ticket.id,
+      Math.max(0, Math.min(qty, maxAddableTickets(ticket, new Date(now), c.reservedForYou[ticket.id] ?? 0))),
+    );
   };
 
   return (
@@ -275,9 +293,27 @@ function TicketStep({
         {event.tickets.length === 0 && <p style={{ opacity: 0.7 }}>No tickets available.</p>}
         {event.tickets.map((ticket) => {
           const selectedQty = c.selectedTickets[ticket.id] ?? 0;
-          const remaining = ticket.quantity - ticket.sold;
-          const maxAllowed = Math.min(remaining, ticket.maxPerPerson ?? remaining);
-          const isSoldOut = remaining <= 0;
+          /**
+           * `quantity - sold - HELD`, which is what the server sells on. The
+           * old `quantity - sold` showed seats sitting in other buyers' live
+           * checkouts as available, so a fan in a rush was told "3 left",
+           * picked two, filled in the form and was refused at reserve.
+           */
+          // 2.6b — the offeree's own reservation is not "somebody else's
+          // checkout"; it is the seat they were emailed a deadline for.
+          const reserved = c.reservedForYou[ticket.id] ?? 0;
+          const seatState = ticketSeatState(ticket, reserved);
+          const maxAllowed = maxAddableTickets(ticket, new Date(now), reserved);
+          const isSoldOut = seatState !== "available";
+          const seatLabel = ticketSeatLabel(seatState);
+          const seatNotice = ticketSeatNotice(seatState);
+          /**
+           * Scheduled on-sale. Enforced since 1.2 and drawn on no storefront,
+           * so a tier going on sale Friday was clickable on Wednesday and the
+           * `ticket_not_yet_on_sale` refusal arrived on the payment screen.
+           */
+          const saleWindow = ticketSaleWindow(ticket, new Date(now));
+          const isScheduled = saleWindow.status === "scheduled";
           const u = urgency(ticket.expiresAt);
           const isExpired = !!u?.expired;
           /**
@@ -332,6 +368,33 @@ function TicketStep({
                       Presale
                     </div>
                   )}
+                  {/* A tier that is announced but not yet buyable says WHEN,
+                      in the same badge idiom as the presale and expiry ones.
+                      Deliberately not dimmed and deliberately not hidden: the
+                      whole point of scheduling an on-sale is that fans can see
+                      it coming. */}
+                  {isScheduled && (
+                    <div
+                      data-testid="ticket-on-sale-badge"
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "2px 8px",
+                        borderRadius: 6,
+                        fontSize: 12,
+                        fontWeight: 700,
+                        marginBottom: 6,
+                        marginRight: 6,
+                        background: a(theme.colors.primary, 0.1),
+                        color: theme.colors.primary,
+                        border: `1px solid ${a(theme.colors.primary, 0.3)}`,
+                      }}
+                    >
+                      <CalendarClock size={12} />
+                      {onSaleBadge(saleWindow.startsAt, new Date(now))}
+                    </div>
+                  )}
                   {u && !u.expired && (
                     <div
                       style={{
@@ -370,22 +433,28 @@ function TicketStep({
                 <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                   <button
                     onClick={() => setQty(ticket, selectedQty - 1)}
-                    disabled={selectedQty === 0 || isSoldOut}
+                    // Never disabled by availability — only by there being
+                    // nothing to remove. A buyer holding two seats on a tier
+                    // that has just gone unavailable must still be able to put
+                    // them back; disabling this would trap the cart.
+                    disabled={selectedQty === 0}
                     style={stepperStyle(theme, false)}
                   >
                     −
                   </button>
                   <span style={{ fontSize: 18, fontWeight: 700, minWidth: 32, textAlign: "center" }}>
-                    {isSoldOut ? "SOLD OUT" : selectedQty}
+                    {seatLabel ?? selectedQty}
                   </span>
                   <button
                     onClick={() => setQty(ticket, selectedQty + 1)}
-                    // A gated tier cannot be added. Not because the client is
-                    // the authority — `createOrder` refuses it regardless — but
-                    // because letting a buyer build a cart the server will not
-                    // sell is precisely the "discoverable only by failing"
+                    // A gated tier cannot be added, nor one whose on-sale time
+                    // has not arrived, nor one whose remaining seats are inside
+                    // somebody else's checkout. Not because the client is the
+                    // authority — `createOrder` refuses all three regardless —
+                    // but because letting a buyer build a cart the server will
+                    // not sell is precisely the "discoverable only by failing"
                     // journey this change exists to end.
-                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired || isGated}
+                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired || isGated || isScheduled}
                     style={stepperStyle(theme, true)}
                   >
                     +
@@ -396,7 +465,7 @@ function TicketStep({
                   before that there is nothing to price, and a row of empty
                   inputs down the tier list reads as a form to fill in rather
                   than a choice to make. */}
-              {isPayWhatYouWant(ticket) && selectedQty > 0 && !isSoldOut && !isExpired && (
+              {isPayWhatYouWant(ticket) && selectedQty > 0 && !isSoldOut && !isExpired && !isScheduled && (
                 <PwywAmountField
                   ticket={ticket}
                   quantity={selectedQty}
@@ -420,6 +489,24 @@ function TicketStep({
                 loginPath={loginPath}
                 membershipPath={membershipPath}
               />
+              {/* The badge says WHEN in two words; this says it in full, with
+                  the exact time, for a fan deciding whether to set an alarm. */}
+              {isScheduled && (
+                <div data-testid="ticket-on-sale-notice" style={infoNoticeStyle(theme.colors.primary, theme)}>
+                  <CalendarClock size={16} />
+                  {onSaleNotice(saleWindow.startsAt)}
+                </div>
+              )}
+              {/* "ON HOLD" in the stepper is two words; this is the sentence
+                  that stops it reading as a dead end. Seats inside somebody
+                  else's checkout come back if that checkout lapses, which a
+                  fan told only "SOLD OUT" would never wait for. */}
+              {seatNotice && (
+                <div data-testid="ticket-on-hold-notice" style={infoNoticeStyle("#f59e0b", theme)}>
+                  <Clock size={16} />
+                  {seatNotice}
+                </div>
+              )}
               {isExpired && (
                 <div
                   style={{
@@ -585,7 +672,7 @@ function DetailsStep({
               >
                 <span>
                   {slot.label}
-                  {slot.isBuyer && <span style={{ opacity: 0.6 }}> — that&rsquo;s you</span>}
+                  {slot.isBuyer && <span style={{ opacity: 0.6 }}> (that&rsquo;s you)</span>}
                 </span>
                 <input
                   placeholder="Full name"
@@ -695,7 +782,15 @@ function PaymentStep({
           </span>
         </div>
       </div>
-      {!renderPayment ? (
+      {/* Paystack needs no registered renderer at all (it has its own modal),
+          so it is checked BEFORE the "not configured" branch. */}
+      {c.isPaystack ? (
+        c.canOpenPaystack ? (
+          <PaystackPayButton onPay={c.openPaystackCheckout} label={`Pay ${fmt(c.totalAmount)}`} />
+        ) : (
+          <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+        )
+      ) : !renderPayment ? (
         <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
       ) : c.clientSecret ? (
         renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: c.totalAmount, mode: "redirect" })
@@ -905,8 +1000,8 @@ function PwywAmountField({
         Name your price
         <span style={{ fontWeight: 400, opacity: 0.7 }}>
           {" "}
-          — minimum {fmt(floor)}
-          {maximum != null ? `, up to ${fmt(maximum)}` : ""}
+          (minimum {fmt(floor)}
+          {maximum != null ? `, up to ${fmt(maximum)}` : ""})
         </span>
       </label>
       <input
@@ -923,9 +1018,9 @@ function PwywAmountField({
       />
       <p style={{ fontSize: 12, opacity: 0.7, marginTop: 6 }}>
         {belowFloor
-          ? `The minimum is ${fmt(floor)} — we'll use that.`
+          ? `The minimum is ${fmt(floor)}, so we'll use that.`
           : aboveMax
-            ? `The most you can pay is ${fmt(maximum!)} — we'll use that.`
+            ? `The most you can pay is ${fmt(maximum!)}, so we'll use that.`
             : quantity > 1
               ? `${fmt(effective)} each · ${fmt(effective * quantity)} for ${quantity}`
               : "Per ticket."}
@@ -934,6 +1029,25 @@ function PwywAmountField({
   );
 }
 
+/**
+ * The inline banner under a tier row — same shape as the expired one already
+ * below it, so "why can't I buy this?" always answers itself in one place and
+ * one visual language, whichever the reason.
+ */
+const infoNoticeStyle = (color: string, t: ForgeTheme): CSSProperties => ({
+  marginTop: 12,
+  padding: "8px 12px",
+  borderRadius: t.cornerRadius,
+  fontSize: 14,
+  fontWeight: 600,
+  background: a(color, 0.1),
+  color,
+  border: `1px solid ${a(color, 0.3)}`,
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+});
+
 const stepperStyle = (t: ForgeTheme, filled: boolean): CSSProperties => ({
   width: 40,
   height: 40,

package/src/ui/styled/EventWaitlist.tsx

@@ -168,7 +168,9 @@ function WaitlistPlaceCard({
         {offerOpen ? (
           <span style={{ display: "flex", alignItems: "center", gap: 6, fontWeight: 700, color: t.primary }}>
             <BellRing size={16} />
-            Tickets available
+            {/* 2.6b — "reserved for you" is a materially different promise from
+                "available", and the fan acts differently on each. */}
+            {entry.offer.seatsReserved ? "Reserved for you" : "Tickets available"}
           </span>
         ) : entry.position != null ? (
           <span style={{ fontSize: 14, opacity: 0.85 }}>
@@ -213,6 +215,9 @@ function WaitlistPlaceCard({
  */
 function OfferDeadline({ entry, t }: { entry: WaitlistEntry; t: ResolvedThemeTokens }) {
   const [remaining, setRemaining] = useState(entry.offer.secondsRemaining ?? 0);
+  // Absent on a payload from an older API build — read as "not reserved", which
+  // is the weaker and therefore safe reading.
+  const reserved = entry.offer.seatsReserved === true;
 
   useEffect(() => {
     setRemaining(entry.offer.secondsRemaining ?? 0);
@@ -254,8 +259,23 @@ function OfferDeadline({ entry, t }: { entry: WaitlistEntry; t: ResolvedThemeTok
       </div>
       {deadline && (
         <div style={{ opacity: 0.8, marginTop: 4 }}>
-          {remaining > 0 ? `Your tickets are held until ${deadline}.` : `Your offer expired at ${deadline}.`} Tickets are
-          not reserved — buy from the ticket options above to secure them.
+          {/*
+            2.6b — the sentence is chosen by whether the seats are actually
+            HELD, not by whether an offer exists.
+
+            The old copy said both things at once — "your tickets are held
+            until Friday" and "tickets are not reserved" — because the second
+            was true and the first was aspirational. Now one of them is true per
+            row: a reserved offer really does keep the seats off the market for
+            the window, and a grandfathered one really does not. Saying the
+            strong version of an offer that reserves nothing is the exact
+            failure this change closes.
+          */}
+          {remaining <= 0
+            ? `Your offer expired at ${deadline}.`
+            : reserved
+              ? `${entry.quantity === 1 ? "Your ticket is" : `Your ${entry.quantity} tickets are`} reserved until ${deadline}. Nobody else can buy ${entry.quantity === 1 ? "it" : "them"}. Check out from the ticket options above.`
+              : `Your offer closes ${deadline}. Tickets are not reserved. Buy from the ticket options above to secure them.`}
         </div>
       )}
     </div>

package/src/ui/styled/HoldNotice.tsx

@@ -91,7 +91,7 @@ export function HoldNotice({
             {/* The server's message names the right noun and the right verb
                 tense; ours only stands in before it has spoken. */}
             {expiredMessage ??
-              `These ${noun} are no longer held for you. Try again to reserve them — they may well still be available.`}
+              `These ${noun} are no longer held for you. Try again to reserve them: they may well still be available.`}
           </p>
           {(onRetry || secondaryAction) && (
             <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
@@ -163,7 +163,7 @@ export function HoldNotice({
         </p>
         <p style={{ fontSize: 13, opacity: 0.75, margin: "4px 0 0" }}>
           {hold.isUrgent
-            ? `Complete payment soon — after this your ${noun} go back on sale.`
+            ? `Complete payment soon: after this your ${noun} go back on sale.`
             : `We're holding your ${noun} while you pay.`}
         </p>
       </div>

package/src/ui/styled/InvoicePayment.tsx

@@ -4,6 +4,7 @@ import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { getCurrencySymbol } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 
 export interface InvoicePaymentProps {
   invoiceId: string;
@@ -21,14 +22,14 @@ const formatDate = (value: string | number | Date): string =>
 /**
  * Themed invoice view + payment surface, built on `useInvoicePayment` and the
  * app-registered payment renderer (`usePaymentRenderer`). Renders line items,
- * a PDF download, and — when unpaid — the Stripe payment surface.
+ * a PDF download, and (when unpaid) the payment surface: Stripe's card form,
+ * or Paystack's inline modal behind a pay button.
  */
 export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoicePaymentProps) {
   const theme = useForgeTheme();
   const renderPayment = usePaymentRenderer();
-  const { invoice, downloadPdf, clientSecret, returnUrl, isStarting, error, taxQuote } = useInvoicePayment(invoiceId, {
-    returnPath,
-  });
+  const { invoice, downloadPdf, clientSecret, returnUrl, isStarting, error, taxQuote, isPaystack, canOpenPaystack, openPaystackCheckout } =
+    useInvoicePayment(invoiceId, { returnPath });
 
   if (invoice.isLoading) return <Loading fullPage />;
   if (invoice.error || !invoice.data) return <p style={{ color: theme.colors.text }}>Invoice not found.</p>;
@@ -172,7 +173,15 @@ export function InvoicePayment({ invoiceId, formatAmount, returnPath }: InvoiceP
         <div>
           <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12 }}>Payment</h2>
           {error && <p style={{ color: "#ef4444", fontSize: 14, marginBottom: 8 }}>{error}</p>}
-          {clientSecret ? (
+          {/* Paystack brings its own modal, so it is checked before the Stripe
+              renderer and needs none of it. */}
+          {isPaystack ? (
+            canOpenPaystack ? (
+              <PaystackPayButton onPay={openPaystackCheckout} label={`Pay ${money(Number(inv.total))}`} />
+            ) : (
+              <Loading label="Preparing payment…" size={22} />
+            )
+          ) : clientSecret ? (
             renderPayment?.({
               clientSecret,
               returnUrl,

package/src/ui/styled/MembershipCheckout.tsx

@@ -7,6 +7,7 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { readableTextOn } from "../theme/contrast";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 
 export interface MembershipCheckoutProps {
   /** Pre-selected tier (e.g. from a `?membershipTierId=` param). */
@@ -88,23 +89,31 @@ export function MembershipCheckout({
     );
   }
 
-  // Payment step — render the registered payment UI (Stripe) in manual mode.
-  if (checkout.step === "payment" && checkout.clientSecret) {
+  // 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.
+  if (checkout.step === "payment" && (checkout.clientSecret || checkout.canOpenPaystack)) {
     return (
       <div className={className} style={card}>
         <h1 style={{ fontSize: 26, fontWeight: 800, marginBottom: 8 }}>Payment</h1>
         <p style={{ opacity: 0.75, marginBottom: 24 }}>
-          {tier.name} — {fmt(checkout.amount)} / {checkout.billingCycle}
+          {tier.name} · {fmt(checkout.amount)} / {checkout.billingCycle}
         </p>
         <div style={box}>
-          {renderPayment({
-            clientSecret: checkout.clientSecret,
-            returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
-            amount: checkout.amount,
-            mode: "manual",
-            onSucceeded: () => onComplete?.(),
-            onFailed: () => {},
-          })}
+          {checkout.isPaystack ? (
+            <PaystackPayButton onPay={checkout.openPaystackCheckout} label={`Pay ${fmt(checkout.amount)}`} />
+          ) : (
+            checkout.clientSecret &&
+            renderPayment({
+              clientSecret: checkout.clientSecret,
+              returnUrl: `${typeof window !== "undefined" ? window.location.origin : ""}${successPath}`,
+              amount: checkout.amount,
+              mode: "manual",
+              onSucceeded: () => onComplete?.(),
+              onFailed: () => {},
+            })
+          )}
         </div>
         <button
           onClick={() => checkout.setStep("select")}