@tribe-nest/forge 3.53.0 → 3.57.0

package/src/ui/styled/EventConfirmation.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle, ArrowRight, Calendar, MapPin, RotateCcw, Ticket } from "lucide-react";
+import { AlertTriangle, ArrowRight, Ban, Calendar, Hourglass, MapPin, RotateCcw, Ticket, TimerOff } from "lucide-react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -8,7 +8,11 @@ import { useForgeT } from "../../i18n";
 import { useEventOrderFinalize } from "../../data/queries/useFinalize";
 import { useEvent } from "../../data/queries/useEvents";
 import { AddToCalendar } from "./AddToCalendar";
-import { getTicketOrderOutcome, TICKET_ORDER_REFUNDED_COPY } from "../../utils/ticketOrderOutcome";
+import {
+  getTicketOrderOutcome,
+  ticketRequestFailureKind,
+  TICKET_ORDER_REFUNDED_COPY,
+} from "../../utils/ticketOrderOutcome";
 
 export interface EventConfirmationProps {
   slug: string;
@@ -20,6 +24,12 @@ export interface EventConfirmationProps {
   formatAmount?: (n: number, currency?: string) => string;
   /** Where the "browse more events" action links. */
   explorePath?: string;
+  /**
+   * Where a fan whose ticket REQUEST lapsed or could not be settled is sent to
+   * try again: the event itself, which may still have seats. Default
+   * `/i/events/:slug`.
+   */
+  eventPath?: string;
 }
 
 /** Locale date-time formatting, replicating the site-starter `formatDateTime`. */
@@ -42,6 +52,7 @@ export function EventConfirmation({
   orderId,
   formatAmount,
   explorePath = "/i/events",
+  eventPath,
 }: EventConfirmationProps) {
   const theme = useForgeTheme();
   const t = useForgeT();
@@ -75,6 +86,15 @@ export function EventConfirmation({
   const outcome = getTicketOrderOutcome(order);
   const paid = outcome === "paid";
   const refunded = outcome === "refunded";
+  /**
+   * Ticket requests (curated access, feature 3). `awaiting` is a request the
+   * organiser has not decided; `requestEnded` names how one ended without a
+   * sale (declined, expired, or approved but the card could not be settled),
+   * and is `null` for an ordinary abandoned checkout, whose copy is unchanged.
+   */
+  const awaiting = outcome === "awaiting_approval";
+  const requestEnded = ticketRequestFailureKind(order);
+  const tryAgainPath = eventPath ?? `/i/events/${slug}`;
   const fmt = (n: number) => formatAmt(n, order.currency || undefined);
   const location =
     event && event.type !== "virtual" && event.address
@@ -91,6 +111,14 @@ export function EventConfirmation({
           ) : refunded ? (
             // Neutral, not alarmed: a refund is a completed outcome, not a fault.
             <NeutralSeal icon={<RotateCcw size={32} color={alpha(text, 0.65)} />} text={text} />
+          ) : awaiting ? (
+            // Waiting is the intended state of a request, so it gets the
+            // theme's own colour, not warning amber.
+            <NeutralSeal icon={<Hourglass size={32} color={primary} />} text={text} />
+          ) : requestEnded === "declined" ? (
+            <NeutralSeal icon={<Ban size={32} color={alpha(text, 0.65)} />} text={text} />
+          ) : requestEnded === "expired" ? (
+            <NeutralSeal icon={<TimerOff size={32} color={alpha(text, 0.65)} />} text={text} />
           ) : (
             <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
           )}
@@ -103,7 +131,12 @@ export function EventConfirmation({
               fontWeight: 700,
               letterSpacing: "0.22em",
               textTransform: "uppercase",
-              color: paid ? primary : refunded ? alpha(text, 0.65) : "#f59e0b",
+              color:
+                paid || awaiting
+                  ? primary
+                  : refunded || requestEnded === "declined" || requestEnded === "expired"
+                    ? alpha(text, 0.65)
+                    : "#f59e0b",
               animationDelay: "0.15s",
             }}
           >
@@ -111,22 +144,76 @@ export function EventConfirmation({
               ? t("forge.event_confirmation.eyebrow_paid")
               : refunded
                 ? TICKET_ORDER_REFUNDED_COPY.eyebrow
-                : t("forge.event_confirmation.eyebrow_status", { status: order.status.replace(/_/g, " ") })}
+                : awaiting
+                  ? t("forge.event_confirmation.eyebrow_awaiting")
+                  : requestEnded === "declined"
+                    ? t("forge.event_confirmation.eyebrow_declined")
+                    : requestEnded === "expired"
+                      ? t("forge.event_confirmation.eyebrow_expired")
+                      : requestEnded === "payment_failed"
+                        ? t("forge.event_confirmation.eyebrow_request_payment_failed")
+                        : t("forge.event_confirmation.eyebrow_status", { status: order.status.replace(/_/g, " ") })}
           </p>
           <h1 className="cf-rise" style={{ fontSize: 29, fontWeight: 800, lineHeight: 1.12, margin: "0 0 8px", animationDelay: "0.22s" }}>
             {paid
               ? t("forge.event_confirmation.title_paid")
               : refunded
                 ? TICKET_ORDER_REFUNDED_COPY.heading
-                : t("forge.event_confirmation.title_incomplete")}
+                : awaiting
+                  ? t("forge.event_confirmation.title_awaiting")
+                  : requestEnded === "declined"
+                    ? t("forge.event_confirmation.title_declined")
+                    : requestEnded === "expired"
+                      ? t("forge.event_confirmation.title_expired")
+                      : requestEnded === "payment_failed"
+                        ? t("forge.event_confirmation.title_request_payment_failed")
+                        : t("forge.event_confirmation.title_incomplete")}
           </h1>
           <p className="cf-rise" style={{ fontSize: 15, color: alpha(text, 0.7), margin: 0, animationDelay: "0.3s" }}>
             {paid
               ? t("forge.event_confirmation.body_paid", { email: order.email })
               : refunded
                 ? TICKET_ORDER_REFUNDED_COPY.body
-                : t("forge.event_confirmation.body_incomplete", { status: order.status.replace(/_/g, " ") })}
+                : awaiting
+                  ? t("forge.event_confirmation.body_awaiting_no_date")
+                  : requestEnded === "declined"
+                    ? t("forge.event_confirmation.body_declined")
+                    : requestEnded === "expired"
+                      ? t("forge.event_confirmation.body_expired")
+                      : requestEnded === "payment_failed"
+                        ? t("forge.event_confirmation.body_request_payment_failed")
+                        : t("forge.event_confirmation.body_incomplete", { status: order.status.replace(/_/g, " ") })}
           </p>
+          {/* "Nothing is charged until they approve" is the promise the whole
+              request rests on. Content, not help: a fan who has just committed
+              a card reads it every time. */}
+          {awaiting && (
+            <p
+              className="cf-rise"
+              data-testid="request-nothing-charged"
+              style={{ fontSize: 14, fontWeight: 600, color: primary, margin: "10px 0 0", animationDelay: "0.34s" }}
+            >
+              {t("forge.event_confirmation.awaiting_nothing_charged")}
+            </p>
+          )}
+          {/* The organiser's own words, when they gave any. Theirs, so quoted
+              rather than paraphrased. */}
+          {requestEnded === "declined" && order.approvalDecisionNote && (
+            <blockquote
+              data-testid="request-decision-note"
+              style={{
+                margin: "14px auto 0",
+                padding: "10px 14px",
+                maxWidth: 400,
+                fontSize: 14,
+                color: alpha(text, 0.8),
+                borderLeft: `3px solid ${alpha(text, 0.18)}`,
+                textAlign: "left",
+              }}
+            >
+              {order.approvalDecisionNote}
+            </blockquote>
+          )}
         </div>
 
         {/* ── Event summary ── */}
@@ -209,7 +296,9 @@ export function EventConfirmation({
                 ? t("forge.event_confirmation.total_paid")
                 : refunded
                   ? TICKET_ORDER_REFUNDED_COPY.totalLabel
-                  : t("forge.event_confirmation.total")}
+                  : awaiting
+                    ? t("forge.event_confirmation.total_on_approval")
+                    : t("forge.event_confirmation.total")}
             </span>
             {/* The exact charged total (charged currency) when present — never a re-converted catalog amount. */}
             <span style={{ fontSize: 18, fontWeight: 800, color: primary }}>
@@ -242,7 +331,10 @@ export function EventConfirmation({
         {/* ── Action ── */}
         <div className="cf-rise" style={{ padding: "20px 30px 30px", animationDelay: "0.52s" }}>
           <a
-            href={explorePath}
+            // A request that lapsed or could not be settled sends the fan back
+            // to the event, which may still have seats; everything else browses.
+            href={requestEnded === "expired" || requestEnded === "payment_failed" ? tryAgainPath : explorePath}
+            data-testid="confirmation-action"
             style={{
               display: "inline-flex",
               alignItems: "center",
@@ -257,7 +349,12 @@ export function EventConfirmation({
               textDecoration: "none",
             }}
           >
-            {t("forge.event_confirmation.explore")} <ArrowRight size={16} />
+            {requestEnded === "payment_failed"
+              ? t("forge.event_confirmation.buy_again")
+              : requestEnded === "expired"
+                ? t("forge.event_confirmation.view_event")
+                : t("forge.event_confirmation.explore")}{" "}
+            <ArrowRight size={16} />
           </a>
         </div>
       </ConfirmationCard>

package/src/ui/styled/EventTickets.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useState } from "react";
-import { AlertCircle, CalendarClock, Clock, KeyRound, X } from "lucide-react";
+import { AlertCircle, CalendarClock, Clock, KeyRound, ShieldCheck, X } from "lucide-react";
 import type { IEvent, ITicket } from "../../types/models";
 import { useEventCheckout } from "../headless/event/useEventCheckout";
 import { useForgeT } from "../../i18n";
@@ -26,6 +26,8 @@ import { MembershipGateNotice } from "./MembershipGateNotice";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
 import { PresaleCodeField } from "./PresaleCode";
 import { HoldNotice } from "./HoldNotice";
+import { CallHelpHint } from "../media/CallHelpHint";
+import { isDeferredSettlement, deferredChargeNotice } from "../payment/stripeConfirmOutcome";
 import {
   DialogRoot,
   DialogTrigger,
@@ -401,6 +403,16 @@ function TicketStep({
           const gate =
             event.membershipGate && !event.membershipGate.allowed ? event.membershipGate : ticket.membershipGate;
           const isGated = !!gate && !gate.allowed;
+          /**
+           * Ticket requests (curated access, feature 3). The badge says the
+           * tier is requested, not bought; the `?` beside it says what that
+           * means for the fan's card. `isMixBlocked` is the one rule the
+           * picker enforces itself: one order is either a request or a
+           * purchase, so once the selection is one kind the other kind's `+`
+           * goes dark, and the sentence under the row says why.
+           */
+          const needsApproval = ticket.requiresApproval === true;
+          const isMixBlocked = c.isTierBlockedByApprovalMix(ticket.id);
           const borderColor = isExpired ? "#ef4444" : u && !u.expired ? a(u.color, 0.5) : a(theme.colors.primary, 0.25);
           return (
             <div
@@ -471,6 +483,31 @@ function TicketStep({
                       {onSaleBadge(saleWindow.startsAt, new Date(now))}
                     </div>
                   )}
+                  {needsApproval && (
+                    <div
+                      data-testid="ticket-approval-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)}`,
+                      }}
+                    >
+                      <ShieldCheck size={12} />
+                      {t("forge.event_tickets.approval_badge")}
+                      <CallHelpHint label={t("forge.event_tickets.approval_help_label")}>
+                        {t("forge.event_tickets.approval_help_body")}
+                      </CallHelpHint>
+                    </div>
+                  )}
                   {u && !u.expired && (
                     <div
                       style={{
@@ -546,7 +583,9 @@ function TicketStep({
                     // 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}
+                    disabled={
+                      selectedQty >= maxAllowed || isSoldOut || isExpired || isGated || isScheduled || isMixBlocked
+                    }
                     style={stepperStyle(theme, true)}
                   >
                     +
@@ -603,6 +642,18 @@ function TicketStep({
                   {seatNotice}
                 </div>
               )}
+              {/* The `+` above went dark for this tier. That is state the fan
+                  has to act on (remove the others, or leave this one), so it
+                  stays visible; the reason lives behind the `?`. */}
+              {isMixBlocked && !isSoldOut && !isExpired && (
+                <div data-testid="ticket-approval-mix-notice" style={infoNoticeStyle(theme.colors.primary, theme)}>
+                  <AlertCircle size={16} />
+                  <span>{t("forge.event_tickets.approval_mix_blocked")}</span>
+                  <CallHelpHint label={t("forge.event_tickets.approval_mix_help_label")}>
+                    {t("forge.event_tickets.approval_mix_help_body")}
+                  </CallHelpHint>
+                </div>
+              )}
               {isExpired && (
                 <div
                   style={{
@@ -634,7 +685,12 @@ function TicketStep({
           it has to be the happy path, with a direct tickets-only checkout as
           the secondary exit. Without add-ons the original flow is untouched:
           Continue goes straight to details, the cart is the secondary exit. */}
-      {hasAddons ? (
+      {/* A request cannot go to the cart: a bundle forces payment and the API
+          refuses approval tiers in one. So a request selection gets the plain
+          Continue with no cart exit, whether or not the page sells add-ons. */}
+      {c.awaitingApproval ? (
+        <ActionBar c={c} fmt={fmt} onNext={c.goToDetails} nextLabel={t("forge.event_tickets.continue")} />
+      ) : hasAddons ? (
         <ActionBar
           c={c}
           fmt={fmt}
@@ -851,12 +907,18 @@ function DetailsStep({
         // fee and any discount: a free ticket with a FLAT booking fee still
         // costs money and still goes to payment, and a 100%-off code on a paid
         // ticket does not.
+        // A request says so on the button, priced or not: with a price the
+        // next screen authorises the card rather than charging it, and with
+        // none there is no next screen at all. Either way "Continue to
+        // payment" would promise a sale that is not happening.
         nextLabel={
           c.isProcessing
             ? t("forge.event_tickets.processing")
-            : c.totalAmount > 0
-              ? t("forge.event_tickets.continue_payment")
-              : t("forge.event_tickets.confirm")
+            : c.awaitingApproval
+              ? t("forge.event_tickets.request_tickets")
+              : c.totalAmount > 0
+                ? t("forge.event_tickets.continue_payment")
+                : t("forge.event_tickets.confirm")
         }
         nextDisabled={c.isProcessing}
       />
@@ -880,10 +942,17 @@ function PaymentStep({
   // row (already contained in the charged total below); inclusive stores get a
   // muted "Includes X tax" caption. Display only.
   const taxSummary = summarizeTaxQuote(c.taxQuote);
+  // A priced ticket request: start-payment said the charge is deferred, so
+  // this screen authorises the card and the wording must not say "purchase".
+  const deferred = isDeferredSettlement(c.settlement);
   return (
     <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>{t("forge.event_tickets.payment_title")}</h2>
-      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>{t("forge.event_tickets.payment_subtitle")}</p>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>
+        {deferred ? t("forge.event_tickets.authorize_title") : t("forge.event_tickets.payment_title")}
+      </h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>
+        {deferred ? t("forge.event_tickets.authorize_subtitle") : t("forge.event_tickets.payment_subtitle")}
+      </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. */}
@@ -954,17 +1023,42 @@ function PaymentStep({
           so it is checked BEFORE the "not configured" branch. */}
       {c.isPaystack ? (
         c.canOpenPaystack ? (
-          <PaystackPayButton
-            onPay={c.openPaystackCheckout}
-            label={t("forge.event_tickets.pay", { amount: fmt(c.totalAmount) })}
-          />
+          <>
+            <PaystackPayButton
+              onPay={c.openPaystackCheckout}
+              label={
+                deferred
+                  ? t("forge.event_tickets.authorize", { amount: fmt(c.totalAmount) })
+                  : t("forge.event_tickets.pay", { amount: fmt(c.totalAmount) })
+              }
+            />
+            {/* Content, not help: the fan has just been told "Authorize" and
+                must be told when the money moves. The built-in Stripe renderer
+                draws its own copy of this line under its own button. */}
+            {deferred && (
+              <p data-testid="deferred-charge-notice" style={{ fontSize: 13, opacity: 0.8, marginTop: 8 }}>
+                {t("forge.event_tickets.deferred_charged_on_approval")}
+                {deferredChargeNotice(c.deferredStrategy) === "authorization" && (
+                  <> {t("forge.event_tickets.deferred_hold_on_statement")}</>
+                )}
+              </p>
+            )}
+          </>
         ) : (
           <p style={{ opacity: 0.7 }}>{t("forge.event_tickets.preparing_payment")}</p>
         )
       ) : !renderPayment ? (
         <p style={{ color: "#ef4444", fontSize: 14 }}>{t("forge.event_tickets.payment_not_configured")}</p>
       ) : c.clientSecret ? (
-        renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: c.totalAmount, mode: "redirect" })
+        renderPayment({
+          clientSecret: c.clientSecret,
+          returnUrl: c.returnUrl,
+          amount: c.totalAmount,
+          mode: "redirect",
+          // Additive: a renderer that ignores these renders the sale it always did.
+          settlement: c.settlement,
+          deferredStrategy: c.deferredStrategy,
+        })
       ) : (
         <p style={{ opacity: 0.7 }}>{t("forge.event_tickets.preparing_payment")}</p>
       )}

package/src/ui/styled/LoginForm.tsx

@@ -17,10 +17,12 @@ export interface LoginFormProps {
    * form looks exactly as it did.
    */
   membershipTierId?: string;
+  /** The membership invite token riding on the same redirect, if any. See `MembershipTierCallout`. */
+  membershipInviteToken?: string;
 }
 
 /** Themed 2FA login form (credentials → emailed code), built on `useLoginFlow`. */
-export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId }: LoginFormProps) {
+export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId, membershipInviteToken }: LoginFormProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
   const flow = useLoginFlow({ onSuccess });
@@ -70,7 +72,7 @@ export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId
       <div style={card}>
         {/* Still on the way to the tier they picked, so it stays in view while
             they fetch the code out of their inbox. */}
-        <MembershipTierCallout membershipTierId={membershipTierId} />
+        <MembershipTierCallout membershipTierId={membershipTierId} inviteToken={membershipInviteToken} />
         <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8 }}>{t("forge.login_form.verify_title")}</h1>
         <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 24 }}>
           {t("forge.login_form.code_sent_to")} <strong>{flow.email}</strong>
@@ -118,7 +120,7 @@ export function LoginForm({ onSuccess, signupHref, forgotHref, membershipTierId
     <div style={card}>
       {/* What the fan was doing when they hit this wall. Nothing is drawn when
           they came here on their own. */}
-      <MembershipTierCallout membershipTierId={membershipTierId} />
+      <MembershipTierCallout membershipTierId={membershipTierId} inviteToken={membershipInviteToken} />
       <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>{t("forge.login_form.title")}</h1>
       {flow.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{flow.error}</p>}
       <form