@tribe-nest/forge 3.21.0 → 3.23.0

package/src/ui/styled/EventTickets.tsx

@@ -1,16 +1,29 @@
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useState } from "react";
-import { AlertCircle, Clock, 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";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
+import { PresaleCodeField } from "./PresaleCode";
+import { HoldNotice } from "./HoldNotice";
 import {
   DialogRoot,
   DialogTrigger,
@@ -34,6 +47,13 @@ export interface EventTicketsProps {
   finalisePath?: (slug: string, orderId: string) => string;
   /** Host-owned navigation on FREE completion (e.g. router navigate). */
   onComplete?: (info: { slug: string; orderId: string }) => void;
+  /**
+   * Where a members-only tier sends a signed-OUT visitor. Default `/login`;
+   * code sites mount theirs under `/i`. The sign-in returns them here.
+   */
+  loginPath?: string;
+  /** Where a members-only tier sends a signed-in NON-member — the tier listing. */
+  membershipPath?: string;
 }
 
 /** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
@@ -51,6 +71,8 @@ export function EventTickets({
   renderPayment,
   finalisePath,
   onComplete,
+  loginPath,
+  membershipPath,
 }: EventTicketsProps) {
   const theme = useForgeTheme();
   const registered = usePaymentRenderer();
@@ -109,6 +131,8 @@ export function EventTickets({
               event={c.event}
               fmt={fmt}
               renderPayment={renderPay}
+              loginPath={loginPath}
+              membershipPath={membershipPath}
               // Selection is safe in the cart now — close so the buyer can go
               // browse the add-ons.
               onAddedToCart={() => setOpen(false)}
@@ -128,19 +152,34 @@ function EventTicketsBody({
   fmt,
   renderPayment,
   onAddedToCart,
+  loginPath,
+  membershipPath,
 }: {
   c: Checkout;
   event: IEvent;
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
   onAddedToCart?: () => void;
+  loginPath?: string;
+  membershipPath?: string;
 }) {
   const stepIndex = c.step === "tickets" ? 0 : c.step === "details" ? 1 : 2;
   return (
     <div style={{ width: "100%" }}>
       <Progress current={stepIndex} />
-      {c.step === "tickets" && <TicketStep c={c} event={event} fmt={fmt} onAddedToCart={onAddedToCart} />}
-      {c.step === "details" && <DetailsStep c={c} event={event} fmt={fmt} />}
+      {c.step === "tickets" && (
+        <TicketStep
+          c={c}
+          event={event}
+          fmt={fmt}
+          onAddedToCart={onAddedToCart}
+          loginPath={loginPath}
+          membershipPath={membershipPath}
+        />
+      )}
+      {c.step === "details" && (
+        <DetailsStep c={c} event={event} fmt={fmt} loginPath={loginPath} membershipPath={membershipPath} />
+      )}
       {c.step === "payment" && <PaymentStep c={c} fmt={fmt} renderPayment={renderPayment} />}
     </div>
   );
@@ -193,11 +232,15 @@ function TicketStep({
   event,
   fmt,
   onAddedToCart,
+  loginPath,
+  membershipPath,
 }: {
   c: Checkout;
   event: IEvent;
   fmt: (n: number) => string;
   onAddedToCart?: () => void;
+  loginPath?: string;
+  membershipPath?: string;
 }) {
   const theme = useForgeTheme();
   // Inclusive stores caption ticket prices as tax-inclusive (display only).
@@ -225,23 +268,65 @@ 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 (
     <div>
       <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16 }}>Select Tickets</h2>
+      {/* Renders nothing on an event with no coded tier (1.2). Here as well as
+          on the page because this modal is reachable on its own — from an offer,
+          and from the broadcast-pass prompt — where there is no page-level box.
+          Both read the SAME stored code, so unlocking in one unlocks the other. */}
+      <PresaleCodeField presale={c.presale} style={{ marginBottom: 16 }} />
       <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         {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;
+          /**
+           * A members-only tier the buyer cannot have (S.4).
+           *
+           * The event-level gate applies to EVERY tier — "no ticket to this show
+           * sells to a non-member" — so it is folded in here rather than drawn
+           * once at the top: a buyer reading one tier row must be able to tell
+           * from that row whether they can buy it.
+           */
+          const gate =
+            event.membershipGate && !event.membershipGate.allowed ? event.membershipGate : ticket.membershipGate;
+          const isGated = !!gate && !gate.allowed;
           const borderColor = isExpired ? "#ef4444" : u && !u.expired ? a(u.color, 0.5) : a(theme.colors.primary, 0.25);
           return (
             <div
@@ -257,6 +342,59 @@ function TicketStep({
               <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
                 <div style={{ flex: 1 }}>
                   <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 6 }}>{ticket.title}</h3>
+                  {/* A hidden tier is only ever on screen because a code
+                      revealed it — so say so. Without the badge, a code that
+                      unlocked a tier the buyer had not seen listed looks like it
+                      did nothing. */}
+                  {ticket.isHidden && (
+                    <div
+                      data-testid="presale-tier-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)}`,
+                      }}
+                    >
+                      <KeyRound size={12} />
+                      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={{
@@ -295,17 +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)}
-                    disabled={selectedQty >= maxAllowed || isSoldOut || isExpired}
+                    // 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 || isScheduled}
                     style={stepperStyle(theme, true)}
                   >
                     +
@@ -316,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}
@@ -329,6 +478,35 @@ function TicketStep({
               {ticket.description && (
                 <p dangerouslySetInnerHTML={{ __html: ticket.description }} style={{ marginTop: 12, fontSize: 14 }} />
               )}
+              {/* Named on the TIER, before the buyer has typed anything. The
+                  tier stays in the list on purpose — hiding it kills the upsell
+                  — so this is what turns "visible but mysteriously unbuyable"
+                  into an offer with a way in. */}
+              <MembershipGateNotice
+                gate={gate}
+                variant="badge"
+                itemLabel={event.membershipGate && !event.membershipGate.allowed ? "This event" : "This ticket"}
+                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={{
@@ -375,7 +553,19 @@ function TicketStep({
 }
 
 // ── Step 2: buyer details + questionnaire ─────────────────────────────────────
-function DetailsStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: number) => string }) {
+function DetailsStep({
+  c,
+  event,
+  fmt,
+  loginPath,
+  membershipPath,
+}: {
+  c: Checkout;
+  event: IEvent;
+  fmt: (n: number) => string;
+  loginPath?: string;
+  membershipPath?: string;
+}) {
   const theme = useForgeTheme();
   const [confirmEmail, setConfirmEmail] = useState("");
   const [answers, setAnswers] = useState<Record<string, string>>({});
@@ -451,6 +641,50 @@ function DetailsStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: n
           </div>
         )}
 
+        {/* The refusal path. It should be unreachable now that the tier itself
+            is badged, but a membership can lapse mid-checkout and a page can be
+            served from cache — and when it happens the buyer gets the tier's
+            name and a way in, not a red line reading "Something went wrong."
+            `c.error` is deliberately not set for this case, so the two cannot
+            both draw. */}
+        <MembershipGateNotice
+          refusal={c.gateRefusal}
+          variant="card"
+          itemLabel="This ticket"
+          loginPath={loginPath}
+          membershipPath={membershipPath}
+          style={{ marginTop: 4 }}
+        />
+
+        {c.attendeeSlots.length > 0 && (
+          <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 4 }}>
+            <div>
+              <h3 style={{ fontSize: 16, fontWeight: 700 }}>Who is coming?</h3>
+              <p style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>
+                This event prints each attendee&rsquo;s name on their own pass, so the door list matches who
+                actually turns up.
+              </p>
+            </div>
+            {c.attendeeSlots.map((slot) => (
+              <label
+                key={`${slot.ticketId}-${slot.index}`}
+                style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}
+              >
+                <span>
+                  {slot.label}
+                  {slot.isBuyer && <span style={{ opacity: 0.6 }}> (that&rsquo;s you)</span>}
+                </span>
+                <input
+                  placeholder="Full name"
+                  value={slot.value}
+                  onChange={(e) => c.setAttendee(slot.ticketId, slot.index, e.target.value)}
+                  style={inputStyle(theme)}
+                />
+              </label>
+            ))}
+          </div>
+        )}
+
         {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
       </div>
       <ActionBar
@@ -484,6 +718,10 @@ function PaymentStep({
     <div>
       <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Payment</h2>
       <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>Complete your purchase to secure your tickets.</p>
+      {/* The reservation clock. Event ticket holds are taken unconditionally —
+          no feature switch — so this is the one checkout where the countdown
+          fires for every profile, and it was the one that did not render it. */}
+      <HoldNotice hold={c.hold} expiredMessage={c.error ?? undefined} style={{ marginBottom: 16 }} />
       <div
         style={{
           padding: 20,
@@ -544,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" })
@@ -754,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
@@ -772,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."}
@@ -783,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>