@tribe-nest/forge 3.54.0 → 3.58.0

package/src/ui/styled/Checkout.tsx

@@ -4,6 +4,9 @@ import { CreditCard, MapPin, Package, User } from "lucide-react";
 import { useCheckout, CHECKOUT_STAGE_ORDER, type CheckoutStage } from "../headless/checkout/useCheckout";
 import type { SelectedShippingRate } from "../headless/checkout/useCheckout";
 import type { ShippingRate, ShippingGroup } from "../../data/queries/useShipping";
+import type { CountryCode } from "libphonenumber-js";
+import { usePhoneInput } from "../headless/forms/usePhoneInput";
+import { PhoneInput } from "./PhoneInput";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
@@ -94,6 +97,26 @@ export function Checkout({
     if (selectedCountryCode) shippingForm.setValue("stateCode", "");
   }, [selectedCountryCode, shippingForm]);
 
+  /**
+   * The delivery phone, in `shipping` mode.
+   *
+   * `shipping` rather than `messaging` because this number is for a courier to
+   * ring, so a landline is a perfectly good answer and the only bar is that the
+   * number is real. It also means no SMS warning appears on a field that has
+   * nothing to do with SMS.
+   *
+   * The country comes from the address the visitor is already filling in, which
+   * is the most confident source there is, and it arrives AFTER first render:
+   * `usePhoneInput` adopts a late-resolving default, but stops doing so once
+   * the visitor has touched the select themselves. A number kept in a form
+   * field is only ever the E.164 string, never what was typed.
+   */
+  const shippingPhone = usePhoneInput({
+    mode: "shipping",
+    defaultCountry: (selectedCountryCode || undefined) as CountryCode | undefined,
+    onChange: (e164) => shippingForm.setValue("phone", e164 ?? "", { shouldValidate: true }),
+  });
+
   const handleLogin = () => {
     const here = typeof window !== "undefined" ? window.location.pathname : "/checkout";
     go(`${loginPath}?redirect=${encodeURIComponent(here)}`);
@@ -155,7 +178,15 @@ export function Checkout({
     </button>
   );
 
-  const SecondaryButton = ({ text, onClick, fullWidth }: { text: string; onClick?: () => void; fullWidth?: boolean }) => (
+  const SecondaryButton = ({
+    text,
+    onClick,
+    fullWidth,
+  }: {
+    text: string;
+    onClick?: () => void;
+    fullWidth?: boolean;
+  }) => (
     <button
       type="button"
       onClick={onClick}
@@ -186,7 +217,12 @@ export function Checkout({
     return (
       <div
         className={["fg:w-full fg:max-w-4xl fg:mx-auto fg:p-6", className].filter(Boolean).join(" ")}
-        style={{ backgroundColor: theme.colors.background, color: theme.colors.text, fontFamily: theme.fontFamily, ...style }}
+        style={{
+          backgroundColor: theme.colors.background,
+          color: theme.colors.text,
+          fontFamily: theme.fontFamily,
+          ...style,
+        }}
       >
         <div className="fg:text-center fg:py-12">
           <h1 className="fg:text-2xl fg:font-bold fg:mb-4" style={{ color: theme.colors.text }}>
@@ -218,7 +254,12 @@ export function Checkout({
   return (
     <div
       className={["fg:w-full fg:max-w-6xl fg:mx-auto fg:p-6", className].filter(Boolean).join(" ")}
-      style={{ backgroundColor: theme.colors.background, color: theme.colors.text, fontFamily: theme.fontFamily, ...style }}
+      style={{
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
+        fontFamily: theme.fontFamily,
+        ...style,
+      }}
     >
       {/* Progress Indicator */}
       <div className="fg:mb-8">
@@ -227,7 +268,9 @@ export function Checkout({
             const reached = currentIdx >= stageIdx(stage.key);
             return (
               <React.Fragment key={stage.key}>
-                {idx > 0 && <div className="fg:w-4 fg:h-0.5" style={{ backgroundColor: `${theme.colors.text}${alpha(0.3)}` }} />}
+                {idx > 0 && (
+                  <div className="fg:w-4 fg:h-0.5" style={{ backgroundColor: `${theme.colors.text}${alpha(0.3)}` }} />
+                )}
                 <div
                   className="fg:flex fg:items-center"
                   style={{ color: reached ? theme.colors.primary : `${theme.colors.text}${alpha(0.4)}` }}
@@ -263,6 +306,48 @@ export function Checkout({
             </div>
           )}
 
+          {/* Seats in the cart that another buyer took (seating wave 2). State
+              the buyer has to act on, so it is a visible alert, never a help
+              hint: the seats by name and the one way forward, which is back to
+              that event's picker. No seat is substituted here. */}
+          {c.seatsConflict && (
+            <div
+              role="alert"
+              data-testid="seats-conflict"
+              className="fg:mb-4 fg:p-4 fg:text-sm"
+              style={{
+                color: theme.colors.text,
+                border: `1px solid ${theme.colors.primary}`,
+                backgroundColor: `${theme.colors.primary}${alpha(0.08)}`,
+                borderRadius: `${theme.cornerRadius}px`,
+              }}
+            >
+              <p className="fg:font-semibold fg:mb-1">{tr("forge.checkout.seats_conflict_title")}</p>
+              <p className="fg:mb-3">
+                {tr("forge.checkout.seats_conflict_body", {
+                  seats: c.seatsConflict.labels.join(", "),
+                  event_title: c.seatsConflict.eventTitle,
+                })}
+              </p>
+              <button
+                type="button"
+                data-testid="seats-conflict-choose"
+                className="fg:px-4 fg:py-2 fg:font-semibold"
+                style={{
+                  backgroundColor: theme.colors.primary,
+                  color: readableTextOn(theme.colors.primary),
+                  borderRadius: `${theme.cornerRadius}px`,
+                }}
+                onClick={() => {
+                  const path = c.chooseOtherSeats();
+                  if (path) go(path);
+                }}
+              >
+                {tr("forge.checkout.seats_conflict_action")}
+              </button>
+            </div>
+          )}
+
           {/* Stage: User Details */}
           {c.currentStage === "userDetails" && !c.user && (
             <div
@@ -290,7 +375,10 @@ export function Checkout({
                 <form onSubmit={guestForm.handleSubmit(c.submitGuest)} className="fg:space-y-4">
                   <div className="fg:grid fg:grid-cols-1 fg:md:grid-cols-2 fg:gap-4">
                     <div>
-                      <label className="fg:block fg:text-sm fg:font-medium fg:mb-2" style={{ color: theme.colors.text }}>
+                      <label
+                        className="fg:block fg:text-sm fg:font-medium fg:mb-2"
+                        style={{ color: theme.colors.text }}
+                      >
                         {tr("forge.checkout.first_name")}
                       </label>
                       <Controller
@@ -306,11 +394,16 @@ export function Checkout({
                         )}
                       />
                       {guestForm.formState.errors.firstName && (
-                        <p className="fg:text-sm fg:text-red-500 fg:mt-1">{guestForm.formState.errors.firstName.message}</p>
+                        <p className="fg:text-sm fg:text-red-500 fg:mt-1">
+                          {guestForm.formState.errors.firstName.message}
+                        </p>
                       )}
                     </div>
                     <div>
-                      <label className="fg:block fg:text-sm fg:font-medium fg:mb-2" style={{ color: theme.colors.text }}>
+                      <label
+                        className="fg:block fg:text-sm fg:font-medium fg:mb-2"
+                        style={{ color: theme.colors.text }}
+                      >
                         {tr("forge.checkout.last_name")}
                       </label>
                       <Controller
@@ -326,7 +419,9 @@ export function Checkout({
                         )}
                       />
                       {guestForm.formState.errors.lastName && (
-                        <p className="fg:text-sm fg:text-red-500 fg:mt-1">{guestForm.formState.errors.lastName.message}</p>
+                        <p className="fg:text-sm fg:text-red-500 fg:mt-1">
+                          {guestForm.formState.errors.lastName.message}
+                        </p>
                       )}
                     </div>
                   </div>
@@ -403,7 +498,9 @@ export function Checkout({
                     )}
                   />
                   {shippingForm.formState.errors.address1 && (
-                    <p className="fg:text-sm fg:text-red-500 fg:mt-1">{shippingForm.formState.errors.address1.message}</p>
+                    <p className="fg:text-sm fg:text-red-500 fg:mt-1">
+                      {shippingForm.formState.errors.address1.message}
+                    </p>
                   )}
                 </div>
 
@@ -464,13 +561,18 @@ export function Checkout({
                       )}
                     />
                     {shippingForm.formState.errors.countryCode && (
-                      <p className="fg:text-sm fg:text-red-500 fg:mt-1">{shippingForm.formState.errors.countryCode.message}</p>
+                      <p className="fg:text-sm fg:text-red-500 fg:mt-1">
+                        {shippingForm.formState.errors.countryCode.message}
+                      </p>
                     )}
                   </div>
 
                   {selectedCountry?.states && selectedCountry.states.length > 0 && (
                     <div>
-                      <label className="fg:block fg:text-sm fg:font-medium fg:mb-2" style={{ color: theme.colors.text }}>
+                      <label
+                        className="fg:block fg:text-sm fg:font-medium fg:mb-2"
+                        style={{ color: theme.colors.text }}
+                      >
                         {tr("forge.checkout.state_label")}
                       </label>
                       <Controller
@@ -489,7 +591,9 @@ export function Checkout({
                         )}
                       />
                       {shippingForm.formState.errors.stateCode && (
-                        <p className="fg:text-sm fg:text-red-500 fg:mt-1">{shippingForm.formState.errors.stateCode.message}</p>
+                        <p className="fg:text-sm fg:text-red-500 fg:mt-1">
+                          {shippingForm.formState.errors.stateCode.message}
+                        </p>
                       )}
                     </div>
                   )}
@@ -503,11 +607,11 @@ export function Checkout({
                     control={shippingForm.control}
                     name="phone"
                     rules={{ required: tr("forge.checkout.phone_required") }}
-                    render={({ field }) => (
-                      <input {...field} placeholder={tr("forge.checkout.phone_placeholder")} style={inputStyle} />
-                    )}
+                    render={() => <PhoneInput controller={shippingPhone} />}
                   />
-                  {shippingForm.formState.errors.phone && (
+                  {/* The field reports its own shape errors. This line is for the
+                      form-level "we need one at all", which the field cannot know. */}
+                  {shippingForm.formState.errors.phone && !shippingPhone.error && (
                     <p className="fg:text-sm fg:text-red-500 fg:mt-1">{shippingForm.formState.errors.phone.message}</p>
                   )}
                 </div>
@@ -652,7 +756,10 @@ export function Checkout({
 
             {/* Shipping Info */}
             {c.hasPhysicalProduct && c.shippingData && (
-              <div className="fg:mb-4 fg:pb-4" style={{ borderBottom: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}>
+              <div
+                className="fg:mb-4 fg:pb-4"
+                style={{ borderBottom: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}
+              >
                 <h4 className="fg:font-semibold fg:mb-2" style={{ color: theme.colors.text }}>
                   {tr("forge.checkout.summary_shipping_address")}
                 </h4>
@@ -683,7 +790,11 @@ export function Checkout({
                     .map(([ticketId, qty]) => {
                       const meta = t.ticketMeta[ticketId];
                       return (
-                        <div key={`${t.eventId}-${ticketId}`} className="fg:flex fg:justify-between fg:text-sm" data-testid="summary-ticket-line">
+                        <div
+                          key={`${t.eventId}-${ticketId}`}
+                          className="fg:flex fg:justify-between fg:text-sm"
+                          data-testid="summary-ticket-line"
+                        >
                           <div className="fg:flex-1">
                             <p className="fg:font-medium" style={{ color: theme.colors.text }}>
                               {meta?.title ?? tr("forge.checkout.ticket_fallback")}
@@ -694,6 +805,19 @@ export function Checkout({
                             <p className="fg:text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
                               {tr("forge.checkout.qty", { count: qty })}
                             </p>
+                            {/* The seats being paid for, by name: the one thing
+                                on this page the buyer chose on a map. */}
+                            {(meta?.seats?.length ?? 0) > 0 && (
+                              <p
+                                className="fg:text-xs"
+                                data-testid="summary-ticket-seats"
+                                style={{ color: `${theme.colors.text}${alpha(0.6)}` }}
+                              >
+                                {tr("forge.checkout.seats_label", {
+                                  seats: (meta?.seats ?? []).map((seat) => seat.label).join(", "),
+                                })}
+                              </p>
+                            )}
                           </div>
                           <p className="fg:font-medium" style={{ color: theme.colors.text }}>
                             {formatCurrency((meta?.price ?? 0) * qty)}
@@ -740,7 +864,10 @@ export function Checkout({
                 that creates it, and one typed afterwards goes through
                 `/public/checkouts/apply-coupon`. Neither freezes the field. */}
             {((c.currentStage === "payment" && c.orderId) || c.isBundle) && (
-              <div className="fg:mb-4 fg:pb-4" style={{ borderBottom: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}>
+              <div
+                className="fg:mb-4 fg:pb-4"
+                style={{ borderBottom: `1px solid ${theme.colors.primary}${alpha(0.2)}` }}
+              >
                 {!c.showCouponInput && !c.appliedCoupon && c.isCouponEditable && (
                   <button
                     type="button"
@@ -873,13 +1000,19 @@ export function Checkout({
               {/* Inclusive mode: the total already contains tax — break out the
                   contained amount once known, else a generic muted caption. */}
               {taxSummary?.mode === "inclusive" ? (
-                <p className="fg:text-xs fg:text-right" style={{ color: `${theme.colors.text}${alpha(0.6)}`, margin: 0 }}>
+                <p
+                  className="fg:text-xs fg:text-right"
+                  style={{ color: `${theme.colors.text}${alpha(0.6)}`, margin: 0 }}
+                >
                   {taxSummary.label}
                 </p>
               ) : (
                 !taxSummary &&
                 pricesIncludeTax && (
-                  <p className="fg:text-xs fg:text-right" style={{ color: `${theme.colors.text}${alpha(0.6)}`, margin: 0 }}>
+                  <p
+                    className="fg:text-xs fg:text-right"
+                    style={{ color: `${theme.colors.text}${alpha(0.6)}`, margin: 0 }}
+                  >
                     {tr("forge.checkout.incl_tax")}
                   </p>
                 )
@@ -905,19 +1038,14 @@ export function Checkout({
  * happens on mount: the modal is opened by the button, so a buyer still reading
  * the summary is not interrupted, and one who closes it can press it again.
  */
-function PaymentSection({
-  checkout,
-  onBack,
-}: {
-  checkout: ReturnType<typeof useCheckout>;
-  onBack?: () => void;
-}) {
+function PaymentSection({ checkout, onBack }: { checkout: ReturnType<typeof useCheckout>; onBack?: () => void }) {
   const theme = useForgeTheme();
   const tr = useForgeT();
   const renderPay = usePaymentRenderer();
-  const { paymentSecret, chargedAmount, chargedCurrency, returnUrl, isPaystack, isCreatingOrder, startError } = checkout;
+  const { paymentSecret, chargedAmount, chargedCurrency, returnUrl, isPaystack, isCreatingOrder, startError } =
+    checkout;
   const { canOpenPaystack, openPaystackCheckout } = checkout;
-  const { hold, holdExpiredError, isHoldExpired, retryHold, isRetryingHold } = checkout;
+  const { hold, holdExpiredError, isHoldExpired, retryHold, isRetryingHold, seatsConflict } = checkout;
 
   // "There is something to pay with", whichever provider answered: Stripe's
   // secret or Paystack's session. Used only to decide whether the preparing
@@ -995,7 +1123,7 @@ function PaymentSection({
       {/* Suppressed once the server has refused: there is no intent coming, so a
           "Preparing payment…" spinner would sit there forever under a notice
           that has already explained what happened. */}
-      {isCreatingOrder && !hasCharge && !isHoldExpired && (
+      {isCreatingOrder && !hasCharge && !isHoldExpired && !seatsConflict && (
         <Loading label={tr("forge.checkout.preparing_payment")} size={22} />
       )}
 
@@ -1063,7 +1191,10 @@ function ShippingRateSelector({
             // Flat / external — a single, auto-selected rate.
             <div
               className="fg:flex fg:items-center fg:justify-between fg:p-3 fg:rounded-md"
-              style={{ backgroundColor: `${theme.colors.primary}${alpha(0.05)}`, borderRadius: `${theme.cornerRadius}px` }}
+              style={{
+                backgroundColor: `${theme.colors.primary}${alpha(0.05)}`,
+                borderRadius: `${theme.cornerRadius}px`,
+              }}
             >
               <div>
                 <span className="fg:text-sm fg:font-medium" style={{ color: theme.colors.text }}>

package/src/ui/styled/EmailListForm.tsx

@@ -1,4 +1,6 @@
+import type { CountryCode } from "libphonenumber-js";
 import { useEmailListForm } from "../headless/forms/useEmailListForm";
+import { PhoneInput } from "./PhoneInput";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
@@ -8,6 +10,8 @@ export interface EmailListFormProps {
   leadMagnetId?: string;
   includeName?: boolean;
   includePhoneNumber?: boolean;
+  /** Seeds the phone country select. Undefined lets the visitor choose. */
+  defaultCountry?: CountryCode;
   title?: string;
   description?: string;
   buttonText?: string;
@@ -20,6 +24,7 @@ export function EmailListForm({
   leadMagnetId,
   includeName,
   includePhoneNumber,
+  defaultCountry,
   title,
   description,
   buttonText,
@@ -27,7 +32,7 @@ export function EmailListForm({
 }: EmailListFormProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const f = useEmailListForm({ emailListId, leadMagnetId, includeName, includePhoneNumber });
+  const f = useEmailListForm({ emailListId, leadMagnetId, includeName, includePhoneNumber, defaultCountry });
 
   // Defaults resolve here rather than in the signature so they can be
   // translated. `??` keeps a caller-supplied "" falsy exactly as before.
@@ -71,14 +76,7 @@ export function EmailListForm({
         onChange={(e) => f.setEmail(e.target.value)}
         style={inputStyle}
       />
-      {includePhoneNumber && (
-        <input
-          placeholder={t("forge.email_list_form.phone_placeholder")}
-          value={f.phoneNumber}
-          onChange={(e) => f.setPhoneNumber(e.target.value)}
-          style={inputStyle}
-        />
-      )}
+      {includePhoneNumber && <PhoneInput controller={f.phone} />}
       {f.error && <p style={{ color: "#ef4444", fontSize: 14 }}>{f.error}</p>}
       <button
         onClick={f.submit}

package/src/ui/styled/EventTickets.tsx

@@ -26,6 +26,8 @@ import { MembershipGateNotice } from "./MembershipGateNotice";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
 import { PresaleCodeField } from "./PresaleCode";
 import { HoldNotice } from "./HoldNotice";
+import { EventSeatPicker } from "./seating/EventSeatPicker";
+import { tierColorMap } from "./seating/paint";
 import { CallHelpHint } from "../media/CallHelpHint";
 import { isDeferredSettlement, deferredChargeNotice } from "../payment/stripeConfirmOutcome";
 import {
@@ -86,7 +88,11 @@ export function EventTickets({
   const theme = useForgeTheme();
   const registered = usePaymentRenderer();
   const fmt = useAmountFormatter(formatAmount);
-  const c = useEventCheckout(slug, { finalisePath, onComplete });
+  const [open, setOpen] = useState(false);
+  // `seatingActive`: the seating read is requested, and polled, only while
+  // this modal is open. Closed, an event page with a seat map costs the API
+  // nothing more than one without.
+  const c = useEventCheckout(slug, { finalisePath, onComplete, seatingActive: open });
   const renderPay = renderPayment ?? registered ?? undefined;
 
   // Does this page sell add-ons for this event? Same query key as the page's
@@ -103,8 +109,6 @@ export function EventTickets({
     [pageActionsData],
   );
 
-  const [open, setOpen] = useState(false);
-
   const tryClose = (next: boolean) => {
     if (!next && c.step !== "tickets" && typeof window !== "undefined") {
       if (!window.confirm(t("forge.event_tickets.leave_confirm"))) return;
@@ -288,6 +292,9 @@ function TicketStep({
   // Inclusive stores caption ticket prices as tax-inclusive (display only).
   const pricesIncludeTax = usePricesIncludeTax();
   const [now, setNow] = useState(() => Date.now());
+  // The same palette the map and the legend use, so the swatch on a tier row
+  // is the colour of its seats by construction.
+  const tierColors = useMemo(() => tierColorMap(event.tickets.map((ticket) => ticket.id)), [event.tickets]);
 
   useEffect(() => {
     const id = setInterval(() => setNow(Date.now()), 1000);
@@ -365,10 +372,38 @@ function TicketStep({
           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 }} />
+      {/* Reserved seating (wave 2). The map sits above the tier list so the
+          buyer picks a seat first and reads the tier row as the receipt for
+          it; the row's own controls (chips, best available, the stepper) all
+          write the same selection. */}
+      {event.hasSeatMap && (
+        <div style={{ marginBottom: 16 }}>
+          <EventSeatPicker
+            event={event}
+            seating={c.seating}
+            selectedSeats={c.selectedSeats}
+            onToggleSeat={c.toggleSeat}
+            seatsTaken={c.seatsTaken}
+            onDismissSeatsTaken={c.dismissSeatsTaken}
+            formatAmount={fmt}
+          />
+        </div>
+      )}
       <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
         {event.tickets.length === 0 && <p style={{ opacity: 0.7 }}>{t("forge.event_tickets.no_tickets")}</p>}
         {event.tickets.map((ticket) => {
           const selectedQty = c.selectedTickets[ticket.id] ?? 0;
+          /**
+           * A tier that sells reserved seats: its quantity IS the seat
+           * selection, so the row shows the chosen seats as removable chips
+           * and offers "Best available" beside the stepper. The stepper stays,
+           * picking or dropping best-available seats, for a buyer who does not
+           * care where they sit.
+           */
+          const isSeated = event.hasSeatMap === true && c.isSeatedTier(ticket.id);
+          const tierColor = isSeated ? tierColors[ticket.id] : undefined;
+          const seatsLeft = c.seating.availableByTier[ticket.id] ?? 0;
+          const chosenSeats = c.seatSummary.find((s) => s.ticketId === ticket.id)?.seats ?? [];
           /**
            * `quantity - sold - HELD`, which is what the server sells on. The
            * old `quantity - sold` showed seats sitting in other buyers' live
@@ -429,7 +464,25 @@ function TicketStep({
                 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>
+                  <h3
+                    style={{
+                      fontSize: 17,
+                      fontWeight: 600,
+                      marginBottom: 6,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                    }}
+                  >
+                    {tierColor && (
+                      <span
+                        aria-hidden
+                        data-testid="ticket-tier-swatch"
+                        style={{ width: 12, height: 12, borderRadius: 9999, background: tierColor, flexShrink: 0 }}
+                      />
+                    )}
+                    {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
@@ -592,6 +645,56 @@ function TicketStep({
                   </button>
                 </div>
               </div>
+              {isSeated && !isSoldOut && !isExpired && !isScheduled && !isGated && (
+                <div
+                  data-testid="ticket-seat-controls"
+                  style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8, marginTop: 4 }}
+                >
+                  {chosenSeats.map((seat) => (
+                    <span
+                      key={seat.id}
+                      data-testid="ticket-seat-chip"
+                      style={seatChipStyle(tierColor ?? theme.colors.primary, theme)}
+                    >
+                      {seat.label}
+                      <button
+                        type="button"
+                        aria-label={t("forge.event_tickets.seat_remove_aria", { seat: seat.label })}
+                        onClick={() => c.toggleSeat(ticket.id, seat.id)}
+                        style={{
+                          background: "transparent",
+                          border: "none",
+                          padding: 0,
+                          cursor: "pointer",
+                          color: "inherit",
+                          display: "inline-flex",
+                        }}
+                      >
+                        <X size={12} />
+                      </button>
+                    </span>
+                  ))}
+                  <button
+                    type="button"
+                    data-testid="ticket-best-available"
+                    onClick={() => c.pickBestAvailable(ticket.id, Math.max(1, selectedQty))}
+                    disabled={seatsLeft === 0 || isMixBlocked}
+                    style={{
+                      ...secondaryButtonStyle(theme),
+                      padding: "6px 10px",
+                      fontSize: 13,
+                      opacity: seatsLeft === 0 || isMixBlocked ? 0.5 : 1,
+                    }}
+                  >
+                    {t("forge.event_tickets.seat_best_available")}
+                  </button>
+                  <span style={{ fontSize: 13, opacity: 0.7 }}>
+                    {seatsLeft === 1
+                      ? t("forge.event_tickets.seats_left_one", { count: seatsLeft })
+                      : t("forge.event_tickets.seats_left_other", { count: seatsLeft })}
+                  </span>
+                </div>
+              )}
               {/* The amount box appears only once a seat is actually selected.
                   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
@@ -688,6 +791,9 @@ function TicketStep({
       {/* 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. */}
+      {/* Reserved seats ride in the bundle cart like any other line (the cart
+          line carries their ids and labels, and the bundle checkout re-checks
+          them before payment), so a seated selection keeps the cart exits. */}
       {c.awaitingApproval ? (
         <ActionBar c={c} fmt={fmt} onNext={c.goToDetails} nextLabel={t("forge.event_tickets.continue")} />
       ) : hasAddons ? (
@@ -965,6 +1071,24 @@ function PaymentStep({
           marginBottom: 16,
         }}
       >
+        {/* The seats being paid for, by name. The one thing on this screen the
+            buyer chose on a map rather than typed, so it is the one thing they
+            will want to re-read before the card. */}
+        {c.seatSummary.length > 0 && (
+          <div data-testid="payment-seat-summary" style={{ marginBottom: 12, fontSize: 14 }}>
+            <div style={{ fontWeight: 600, marginBottom: 4 }}>{t("forge.event_tickets.seats_title")}</div>
+            {c.seatSummary.map((tier) => (
+              <div key={tier.ticketId} style={{ display: "flex", flexDirection: "column", gap: 2, marginBottom: 6 }}>
+                <span style={{ opacity: 0.75 }}>{tier.title}</span>
+                {tier.seats.map((seat) => (
+                  <span key={seat.id} style={{ paddingLeft: 12 }}>
+                    {seat.label}
+                  </span>
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
         {/* What the code actually did, from the order response, never a total
             that silently shrank. Automatic (no-code) discounts land here too. */}
         <DiscountSummaryLines
@@ -1328,6 +1452,21 @@ const infoNoticeStyle = (color: string, t: ForgeTheme): CSSProperties => ({
   gap: 8,
 });
 
+/** A chosen seat under its tier row, in the tier's colour, with its remove button. */
+const seatChipStyle = (color: string, t: ForgeTheme): CSSProperties => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 6,
+  padding: "4px 8px",
+  borderRadius: t.cornerRadius,
+  fontSize: 13,
+  fontWeight: 600,
+  background: a(color, 0.12),
+  color: t.colors.text,
+  border: `1px solid ${a(color, 0.5)}`,
+  borderLeft: `4px solid ${color}`,
+});
+
 const stepperStyle = (t: ForgeTheme, filled: boolean): CSSProperties => ({
   width: 40,
   height: 40,

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