@tribe-nest/forge 3.2.0 → 3.9.0

package/src/ui/styled/EventWaitlist.tsx

@@ -0,0 +1,448 @@
+import { useEffect, useState, type CSSProperties } from "react";
+import { BellRing, Clock, Users } from "lucide-react";
+import type { IEvent, ITicket } from "../../types/models";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { useEvent } from "../../data/queries/useEvents";
+import {
+  isEventWaitlistOpen,
+  isTicketSoldOut,
+  useEventWaitlistPlaces,
+  useJoinEventWaitlist,
+  useLeaveEventWaitlist,
+  type WaitlistEntry,
+} from "../../data/queries/useEventWaitlist";
+import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+/**
+ * Events 2.6 — the buyer-facing waitlist, on a sold-out event.
+ *
+ * Two jobs, and they are deliberately independent:
+ *
+ *   JOIN   is offered only where the tier has nothing left to sell. A queue for
+ *          something you could simply buy costs a sale — the joiner waits for a
+ *          release that never happens, because nothing froze in the first place.
+ *   PLACE  is shown for every live entry, sold out or not. A seat freeing up is
+ *          exactly what makes the tier buyable again, so the moment an offer
+ *          matters is the moment the join form disappears.
+ *
+ * Nothing here re-derives eligibility, position, or the offer window. Those come
+ * off the server on every read; mirroring them would give two answers to one
+ * question and the wrong one is what the buyer would act on. Same reasoning as
+ * the ticket-cancellation policy in `AccountDashboard`.
+ */
+
+export interface EventWaitlistProps {
+  /**
+   * The event, already loaded. Preferred: the waitlist API addresses events by
+   * UUID only, so a slug alone costs an extra round trip.
+   */
+  event?: IEvent;
+  /** Slug or id, when the host has not already loaded the event. */
+  slug?: string;
+  /** Section heading. */
+  title?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const alpha = (hex: string, a: number) => hex + Math.round(a * 255).toString(16).padStart(2, "0");
+
+export function EventWaitlist({ event: initialEvent, slug, title = "Waitlist", className, style }: EventWaitlistProps) {
+  const t = useThemeTokens();
+  const { user } = usePublicAuth();
+  const { data: fetched } = useEvent(initialEvent ? undefined : slug);
+  const event = initialEvent ?? fetched;
+
+  const { liveEntries: live, isLoading } = useEventWaitlistPlaces(event?.id, user?.id);
+
+  if (!event) return null;
+
+  const soldOutTiers = isEventWaitlistOpen(event)
+    ? event.tickets.filter((ticket) => isTicketSoldOut(ticket) && !live.some((e) => e.eventTicketId === ticket.id))
+    : [];
+
+  // Nothing to queue for and nothing queued — say nothing at all.
+  if (soldOutTiers.length === 0 && live.length === 0) return null;
+
+  return (
+    <section
+      className={className}
+      style={{
+        border: `1px solid ${alpha(t.primary, 0.25)}`,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+        color: t.text,
+        padding: 20,
+        ...style,
+      }}
+    >
+      <h2
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          fontSize: 18,
+          fontWeight: 700,
+          margin: "0 0 4px",
+          fontFamily: t.headingFontFamily,
+        }}
+      >
+        <Users size={18} style={{ color: t.primary }} />
+        {title}
+      </h2>
+      <p style={{ fontSize: 14, opacity: 0.75, margin: "0 0 16px" }}>
+        Sold out. Join the queue and we&apos;ll email you if a ticket is released.
+      </p>
+
+      {isLoading && live.length === 0 && soldOutTiers.length === 0 ? (
+        <Loading />
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          {live.map((entry) => (
+            <WaitlistPlaceCard
+              key={entry.id}
+              entry={entry}
+              eventId={event.id}
+              ticket={event.tickets.find((ticket) => ticket.id === entry.eventTicketId)}
+              t={t}
+            />
+          ))}
+          {soldOutTiers.map((ticket) => (
+            <JoinCard key={ticket.id} eventId={event.id} ticket={ticket} t={t} signedIn={!!user} />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+// ── A place already held ─────────────────────────────────────────────────────
+
+/**
+ * One live entry: its place, or the offer that replaced it.
+ *
+ * `position` is `null` for a notified entry by design — an offer is not a queue
+ * place — so the two states are rendered as different things rather than as a
+ * position that happens to be missing.
+ */
+function WaitlistPlaceCard({
+  entry,
+  eventId,
+  ticket,
+  t,
+}: {
+  entry: WaitlistEntry;
+  eventId: string;
+  ticket?: ITicket;
+  t: ResolvedThemeTokens;
+}) {
+  const leave = useLeaveEventWaitlist(eventId);
+  const [error, setError] = useState<string | null>(null);
+  const offerOpen = entry.offer.offerOpen;
+
+  const onLeave = async () => {
+    setError(null);
+    try {
+      await leave.mutateAsync({ entryId: entry.id });
+    } catch (err) {
+      setError(readError(err, "We could not remove you from the waitlist. Please try again."));
+    }
+  };
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${alpha(offerOpen ? t.primary : t.primary, offerOpen ? 0.6 : 0.2)}`,
+        borderRadius: t.cornerRadius,
+        padding: 16,
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
+        <div>
+          <div style={{ fontWeight: 600 }}>{ticket?.title ?? "Ticket"}</div>
+          <div style={{ fontSize: 13, opacity: 0.7 }}>
+            {entry.quantity} {entry.quantity === 1 ? "ticket" : "tickets"} requested
+          </div>
+        </div>
+        {offerOpen ? (
+          <span style={{ display: "flex", alignItems: "center", gap: 6, fontWeight: 700, color: t.primary }}>
+            <BellRing size={16} />
+            Tickets available
+          </span>
+        ) : entry.position != null ? (
+          <span style={{ fontSize: 14, opacity: 0.85 }}>
+            Position <strong style={{ color: t.primary }}>#{entry.position}</strong>
+          </span>
+        ) : (
+          <span style={{ fontSize: 14, opacity: 0.85 }}>You&apos;re on the list</span>
+        )}
+      </div>
+
+      {offerOpen && <OfferDeadline entry={entry} t={t} />}
+
+      {error && <p style={{ color: "#ef4444", fontSize: 13, marginTop: 12 }}>{error}</p>}
+
+      <button
+        type="button"
+        onClick={() => void onLeave()}
+        disabled={leave.isPending}
+        style={{
+          marginTop: 12,
+          padding: "8px 14px",
+          borderRadius: t.cornerRadius,
+          border: `1px solid ${alpha(t.primary, 0.4)}`,
+          background: "transparent",
+          color: t.text,
+          cursor: leave.isPending ? "wait" : "pointer",
+          fontWeight: 600,
+        }}
+      >
+        {leave.isPending ? "Leaving…" : "Leave waitlist"}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * The deadline on an open offer — the whole point of being notified.
+ *
+ * The absolute instant is the authoritative statement and is always shown; the
+ * countdown beside it starts from the server's own `secondsRemaining` and ticks
+ * locally, so a slow clock can shorten what the buyer sees but never lengthen it.
+ */
+function OfferDeadline({ entry, t }: { entry: WaitlistEntry; t: ResolvedThemeTokens }) {
+  const [remaining, setRemaining] = useState(entry.offer.secondsRemaining ?? 0);
+
+  useEffect(() => {
+    setRemaining(entry.offer.secondsRemaining ?? 0);
+  }, [entry.offer.secondsRemaining]);
+
+  // One interval for the whole open window — restarted only when the offer
+  // crosses between "time left" and "no time left", not on every tick.
+  const ticking = remaining > 0;
+  useEffect(() => {
+    if (!ticking) return;
+    const id = setInterval(() => setRemaining((value) => Math.max(0, value - 1)), 1000);
+    return () => clearInterval(id);
+  }, [ticking]);
+
+  const deadline = entry.offer.claimExpiresAt
+    ? new Date(entry.offer.claimExpiresAt).toLocaleString(undefined, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        hour: "numeric",
+        minute: "2-digit",
+      })
+    : null;
+
+  return (
+    <div
+      style={{
+        marginTop: 12,
+        padding: "10px 12px",
+        borderRadius: t.cornerRadius,
+        background: alpha(t.primary, 0.08),
+        border: `1px solid ${alpha(t.primary, 0.3)}`,
+        fontSize: 14,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 8, fontWeight: 600 }}>
+        <Clock size={14} style={{ color: t.primary }} />
+        {remaining > 0 ? `Buy within ${formatCountdown(remaining)}` : "This offer has closed"}
+      </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.
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Joining ──────────────────────────────────────────────────────────────────
+
+/**
+ * The join form for one sold-out tier.
+ *
+ * The email field appears only for an anonymous visitor: the server takes a
+ * signed-in caller's address from their account and ignores any sent, so asking
+ * for one would invite them to type an address that cannot take effect.
+ *
+ * A re-submission is NOT an error — the server returns the existing place with
+ * its original quantity, which is why the success copy says "you're on the list"
+ * rather than "joined", and why the requested quantity is read back from the
+ * response instead of from the form.
+ */
+function JoinCard({
+  eventId,
+  ticket,
+  t,
+  signedIn,
+}: {
+  eventId: string;
+  ticket: ITicket;
+  t: ResolvedThemeTokens;
+  signedIn: boolean;
+}) {
+  const join = useJoinEventWaitlist(eventId);
+  const [open, setOpen] = useState(false);
+  const [email, setEmail] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [quantity, setQuantity] = useState(1);
+  const [error, setError] = useState<string | null>(null);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (!signedIn && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      return setError("Please enter a valid email address.");
+    }
+    try {
+      await join.mutateAsync({
+        eventTicketId: ticket.id,
+        email: signedIn ? undefined : email,
+        firstName: firstName || undefined,
+        lastName: lastName || undefined,
+        quantity,
+      });
+    } catch (err) {
+      setError(readError(err, "We could not add you to the waitlist. Please try again."));
+    }
+  };
+
+  const input: CSSProperties = {
+    width: "100%",
+    padding: 10,
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${alpha(t.primary, 0.3)}`,
+    background: "transparent",
+    color: t.text,
+    fontFamily: t.fontFamily,
+  };
+
+  return (
+    <div style={{ border: `1px solid ${alpha(t.primary, 0.2)}`, borderRadius: t.cornerRadius, padding: 16 }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
+        <div>
+          <div style={{ fontWeight: 600 }}>{ticket.title}</div>
+          <div style={{ fontSize: 13, opacity: 0.7 }}>Sold out</div>
+        </div>
+        {!open && (
+          <button
+            type="button"
+            onClick={() => setOpen(true)}
+            style={{
+              padding: "8px 14px",
+              borderRadius: t.cornerRadius,
+              border: "none",
+              background: t.primary,
+              color: t.textPrimary,
+              fontWeight: 600,
+              cursor: "pointer",
+            }}
+          >
+            Join waitlist
+          </button>
+        )}
+      </div>
+
+      {open && (
+        <form onSubmit={onSubmit} style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }}>
+          {!signedIn && (
+            <input
+              type="email"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              style={input}
+              aria-label="Email"
+            />
+          )}
+          <div style={{ display: "flex", gap: 8 }}>
+            <input
+              placeholder="First name (optional)"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              style={input}
+              aria-label="First name"
+            />
+            <input
+              placeholder="Last name (optional)"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              style={input}
+              aria-label="Last name"
+            />
+          </div>
+          <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14 }}>
+            How many tickets?
+            <input
+              type="number"
+              min={1}
+              max={20}
+              value={quantity}
+              onChange={(e) => setQuantity(Math.max(1, Math.min(20, Number(e.target.value) || 1)))}
+              style={{ ...input, width: 80 }}
+            />
+          </label>
+          {error && <p style={{ color: "#ef4444", fontSize: 13, margin: 0 }}>{error}</p>}
+          <div style={{ display: "flex", gap: 8 }}>
+            <button
+              type="submit"
+              disabled={join.isPending}
+              style={{
+                padding: "8px 14px",
+                borderRadius: t.cornerRadius,
+                border: "none",
+                background: t.primary,
+                color: t.textPrimary,
+                fontWeight: 600,
+                cursor: join.isPending ? "wait" : "pointer",
+              }}
+            >
+              {join.isPending ? "Joining…" : "Join waitlist"}
+            </button>
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              style={{
+                padding: "8px 14px",
+                borderRadius: t.cornerRadius,
+                border: `1px solid ${alpha(t.primary, 0.3)}`,
+                background: "transparent",
+                color: t.text,
+                cursor: "pointer",
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+          <p style={{ fontSize: 12, opacity: 0.65, margin: 0 }}>
+            We&apos;ll only email you about tickets for this event.
+          </p>
+        </form>
+      )}
+    </div>
+  );
+}
+
+// ── Shared ───────────────────────────────────────────────────────────────────
+
+/** Whole hours and minutes while there is time; seconds once it is close. */
+export function formatCountdown(totalSeconds: number): string {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) return `${hours}h ${minutes}m`;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
+  return `${seconds}s`;
+}
+
+/** The server's own refusal, which is the only correct explanation to show. */
+function readError(err: unknown, fallback: string): string {
+  return (err as { response?: { data?: { message?: string } } })?.response?.data?.message ?? fallback;
+}