@tribe-nest/forge 3.4.0 → 3.9.0

package/src/ui/styled/TicketTransfer.tsx

@@ -0,0 +1,393 @@
+import { useState, type CSSProperties } from "react";
+import {
+  useSendPassTransfer,
+  useCancelPassTransfer,
+  useClaimPassTransfer,
+  usePendingPassTransfers,
+  type PassTransfer,
+} from "../../data/queries/usePassTransfers";
+import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
+
+/**
+ * Events 2.2 — handing a ticket to somebody else, and taking one.
+ *
+ * Two components, because the two halves have nothing in common but the
+ * endpoint family:
+ *
+ *   `<TicketTransferPanel>`  — the HOLDER's affordance, inside their portal.
+ *   `<ClaimTicketTransfer>`  — the RECIPIENT's page, reached from an email and
+ *                              usable while signed out.
+ *
+ * ## Nothing here decides anything
+ *
+ * Whether a pass may be handed on (checked in, refunded, show cancelled, show
+ * over), whether a claim still works, whether a cancel is still possible — all
+ * of it is the server's, re-checked at claim time because days pass between
+ * sending a link and clicking it. Every refusal is rendered as the server's own
+ * message. The states are not enumerable from here and inventing copy for them
+ * is how a buyer gets told the wrong thing at a venue door.
+ *
+ * The one thing the UI does decide is where to DRAW the send form, and it draws
+ * it for any pass the buyer's own ticket list gave it. A pass that cannot be
+ * transferred is answered on submit, in the server's words, rather than by a
+ * hidden button that leaves the buyer with no explanation at all.
+ */
+
+// ── shared styling ──────────────────────────────────────────────────────────
+
+const inputStyle = (t: ResolvedThemeTokens): CSSProperties => ({
+  width: "100%",
+  padding: "8px 12px",
+  borderRadius: t.cornerRadius,
+  border: `1px solid ${t.primary}40`,
+  background: "transparent",
+  color: t.text,
+  fontFamily: t.fontFamily,
+  outline: "none",
+});
+
+const primaryButton = (t: ResolvedThemeTokens, busy: boolean): CSSProperties => ({
+  padding: "8px 14px",
+  borderRadius: t.cornerRadius,
+  background: t.primary,
+  color: t.textPrimary,
+  border: "none",
+  fontWeight: 600,
+  cursor: busy ? "wait" : "pointer",
+  opacity: busy ? 0.7 : 1,
+  fontFamily: t.fontFamily,
+});
+
+const ghostButton = (t: ResolvedThemeTokens, busy: boolean): CSSProperties => ({
+  padding: "8px 14px",
+  borderRadius: t.cornerRadius,
+  background: "transparent",
+  color: t.text,
+  border: `1px solid ${t.primary}40`,
+  fontWeight: 600,
+  cursor: busy ? "wait" : "pointer",
+  fontFamily: t.fontFamily,
+});
+
+/** The server's own words, or a last-resort fallback for a transport failure. */
+const serverMessage = (error: unknown, fallback: string): string =>
+  (error as { response?: { data?: { message?: string } } })?.response?.data?.message ?? fallback;
+
+const formatWhen = (value: string | null | undefined): string | null => {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return date.toLocaleString(undefined, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+};
+
+// ── The holder's side ───────────────────────────────────────────────────────
+
+export interface TicketTransferPanelProps {
+  /** The `TN-…` pass ids on this order — `myTicketPassIds(ticket)`. */
+  passIds: string[];
+  /** Extra class(es) on the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element. */
+  style?: CSSProperties;
+}
+
+/**
+ * "Transfer this ticket" for the passes on one order, plus a way to withdraw a
+ * transfer that has not been claimed.
+ *
+ * Renders nothing when the order carries no pass ids — an older API build that
+ * does not emit them cannot address any pass-scoped endpoint, so an affordance
+ * would only ever 404.
+ *
+ * The pending list comes from this browser's local record of its own sends,
+ * because the transfer HISTORY endpoint is operator-only by design (it names
+ * every previous holder) and nothing on `my-tickets` carries transfer state.
+ * That limit is stated to the buyer rather than hidden: the recipient's email is
+ * the durable copy.
+ */
+export function TicketTransferPanel({ passIds, className, style }: TicketTransferPanelProps) {
+  const t = useThemeTokens();
+  const [openFor, setOpenFor] = useState<string | null>(null);
+
+  if (passIds.length === 0) return null;
+
+  const single = passIds.length === 1;
+
+  return (
+    <div
+      data-testid="ticket-transfer-panel"
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 10, ...style }}
+    >
+      {passIds.map((passId) => (
+        <TicketTransferRow
+          key={passId}
+          passId={passId}
+          t={t}
+          showPassId={!single}
+          isOpen={openFor === passId}
+          onToggle={() => setOpenFor((current) => (current === passId ? null : passId))}
+        />
+      ))}
+    </div>
+  );
+}
+
+function TicketTransferRow({
+  passId,
+  t,
+  showPassId,
+  isOpen,
+  onToggle,
+}: {
+  passId: string;
+  t: ResolvedThemeTokens;
+  showPassId: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
+}) {
+  const send = useSendPassTransfer();
+  const cancel = useCancelPassTransfer();
+  const pending = usePendingPassTransfers(passId);
+
+  const [toEmail, setToEmail] = useState("");
+  const [toName, setToName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [sent, setSent] = useState<PassTransfer | null>(null);
+
+  const onSend = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    try {
+      const transfer = await send.mutateAsync({ passId, toEmail: toEmail.trim(), toName: toName.trim() });
+      setSent(transfer);
+      setToEmail("");
+      setToName("");
+    } catch (err) {
+      // The server distinguishes "already has a live transfer", "you have
+      // checked in", "the show was cancelled" and several more. Its wording,
+      // not ours.
+      setError(serverMessage(err, "We could not send this ticket. Please try again."));
+    }
+  };
+
+  const onCancel = async (transferId: string) => {
+    setError(null);
+    setSent(null);
+    try {
+      await cancel.mutateAsync({ transferId });
+    } catch (err) {
+      setError(serverMessage(err, "We could not withdraw this transfer. Please try again."));
+    }
+  };
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${t.primary}20`,
+        borderRadius: t.cornerRadius,
+        padding: 12,
+        color: t.text,
+        fontFamily: t.fontFamily,
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
+        <div>
+          <div style={{ fontWeight: 600, fontSize: 14 }}>Transfer this ticket</div>
+          {showPassId && <div style={{ fontSize: 12, color: t.muted }}>{passId}</div>}
+        </div>
+        <button type="button" onClick={onToggle} style={ghostButton(t, false)} aria-expanded={isOpen}>
+          {isOpen ? "Close" : "Send to someone"}
+        </button>
+      </div>
+
+      {/* A live transfer this browser sent. One per pass is a database
+          guarantee, so this is a list only because the store is one. */}
+      {pending.map((item) => {
+        const expires = formatWhen(item.expiresAt);
+        return (
+          <div
+            key={item.transferId}
+            style={{
+              marginTop: 12,
+              padding: 12,
+              borderRadius: t.cornerRadius,
+              border: `1px solid ${t.primary}4d`,
+              fontSize: 14,
+            }}
+          >
+            <div>
+              Sent to <strong>{item.toEmail}</strong>
+              {expires ? ` — the link works until ${expires}.` : "."}
+            </div>
+            <div style={{ fontSize: 13, color: t.muted, marginTop: 4 }}>
+              Your QR code keeps working until they claim it.
+            </div>
+            <button
+              type="button"
+              onClick={() => void onCancel(item.transferId)}
+              disabled={cancel.isPending}
+              style={{ ...ghostButton(t, cancel.isPending), marginTop: 10 }}
+            >
+              {cancel.isPending ? "Withdrawing…" : "Withdraw transfer"}
+            </button>
+          </div>
+        );
+      })}
+
+      {sent && (
+        <p style={{ fontSize: 13, marginTop: 10 }}>
+          We emailed <strong>{sent.toEmail}</strong> a link to claim this ticket.
+        </p>
+      )}
+
+      {error && (
+        <p style={{ fontSize: 13, marginTop: 10, color: t.primary }} role="alert">
+          {error}
+        </p>
+      )}
+
+      {isOpen && (
+        <form onSubmit={onSend} style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 12 }}>
+          <input
+            type="email"
+            required
+            value={toEmail}
+            onChange={(event) => setToEmail(event.target.value)}
+            placeholder="Their email address"
+            aria-label="Recipient email address"
+            style={inputStyle(t)}
+          />
+          <input
+            type="text"
+            maxLength={240}
+            value={toName}
+            onChange={(event) => setToName(event.target.value)}
+            placeholder="Their name (optional)"
+            aria-label="Recipient name"
+            style={inputStyle(t)}
+          />
+          <p style={{ fontSize: 12, color: t.muted, margin: 0 }}>
+            They get a link to claim it. Once they do, this ticket becomes theirs and your QR code stops working.
+          </p>
+          <button type="submit" disabled={send.isPending} style={primaryButton(t, send.isPending)}>
+            {send.isPending ? "Sending…" : "Send ticket"}
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}
+
+// ── The recipient's side ────────────────────────────────────────────────────
+
+export interface ClaimTicketTransferProps {
+  /** The 64-character token out of the claim link's `?token=`. */
+  token?: string | null;
+  /** Called once the claim lands, with the pass now in the claimant's name. */
+  onClaimed?: (result: PassTransfer & { eventPassId: string }) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The claim page's body. **Works for a visitor who is not signed in and has no
+ * account** — which is the common case and the whole reason the endpoint is
+ * open to anonymous callers.
+ *
+ * The only input is a name, and it is optional: the server falls back to
+ * whatever the sender addressed them as, and then to the address itself, so
+ * `owner_name` is never blank on the ticket that goes to the door.
+ *
+ * A missing token is the one state judged locally, because there is no request
+ * to make. Everything else — expired, already claimed, withdrawn, a show that
+ * was cancelled since — comes back from the server with its own wording.
+ */
+export function ClaimTicketTransfer({ token, onClaimed, className, style }: ClaimTicketTransferProps) {
+  const t = useThemeTokens();
+  const claim = useClaimPassTransfer();
+  const [name, setName] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [claimed, setClaimed] = useState<(PassTransfer & { eventPassId: string }) | null>(null);
+
+  const card: CSSProperties = {
+    maxWidth: 460,
+    margin: "0 auto",
+    color: t.text,
+    fontFamily: t.fontFamily,
+    ...style,
+  };
+
+  if (!token) {
+    return (
+      <div className={className} style={{ ...card, textAlign: "center" }}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: t.headingFontFamily }}>Invalid claim link</h1>
+        <p style={{ color: t.muted, marginTop: 8 }}>
+          Your link is missing its code. Please use the link from your email.
+        </p>
+      </div>
+    );
+  }
+
+  if (claimed) {
+    return (
+      <div className={className} style={card}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, fontFamily: t.headingFontFamily }}>The ticket is yours</h1>
+        <p style={{ marginTop: 8 }}>
+          Ticket <strong>{claimed.eventPassId}</strong> is now in your name. We have emailed it to{" "}
+          <strong>{claimed.toEmail}</strong> — bring that QR code to the door.
+        </p>
+      </div>
+    );
+  }
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    try {
+      const result = await claim.mutateAsync({ token, name: name.trim() });
+      setClaimed(result);
+      onClaimed?.(result);
+    } catch (err) {
+      // "Already claimed" and "expired" are materially different answers to
+      // somebody standing outside a venue. Never collapsed into one sentence.
+      setError(serverMessage(err, "We could not claim this ticket. Your link may have expired or already been used."));
+    }
+  };
+
+  return (
+    <div className={className} style={card}>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 8, fontFamily: t.headingFontFamily }}>
+        Claim your ticket
+      </h1>
+      <p style={{ color: t.muted, marginBottom: 24 }}>
+        Someone sent you their ticket. Tell us what to put on it — you do not need an account.
+      </p>
+      <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <input
+          type="text"
+          maxLength={240}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+          placeholder="Your name (optional)"
+          aria-label="Your name"
+          style={inputStyle(t)}
+        />
+        {error && (
+          <p style={{ color: t.primary, fontSize: 14 }} role="alert">
+            {error}
+          </p>
+        )}
+        <button type="submit" disabled={claim.isPending} style={primaryButton(t, claim.isPending)}>
+          {claim.isPending ? "Claiming…" : "Claim ticket"}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/ui/styled/WalletPassButtons.tsx

@@ -0,0 +1,208 @@
+import { type CSSProperties } from "react";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { useDownloadApplePass, useWalletPasses, type WalletPassEntry } from "../../data/queries/useWalletPass";
+import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
+
+/**
+ * Events 2.3 — "Add to Apple Wallet" / "Save to Google Wallet", on a ticket the
+ * buyer already holds.
+ *
+ * ## This component's whole job is knowing when NOT to exist
+ *
+ * No wallet signing credentials are configured in production yet, so the status
+ * endpoint currently answers `available: false` for every pass. In that state
+ * **this renders `null`** — not a disabled button, not a "coming soon", not a
+ * hint. A ticket-holder who will never get a wallet pass must not be able to
+ * tell the feature is there at all.
+ *
+ * It reaches `null` the same way for every other negative case too: anonymous
+ * visitor, a pass that is not theirs (the API answers 404 by design), a
+ * cancelled order, a pass on signed rotating QR that no static wallet barcode
+ * could satisfy, a network failure, or simply not having answered yet. There is
+ * no loading placeholder — a spinner where a button will never appear is the
+ * same tell as the button itself.
+ *
+ * `useWalletPasses` returns ONLY the passes with a real artefact, so the check
+ * below is a length test rather than a chain of conditions that a later edit
+ * could get wrong.
+ *
+ * ## The badges
+ *
+ * Apple and Google both specify a badge lockup: a high-contrast pill, the
+ * brandmark on the left, a fixed phrase. The shape, the phrasing and the
+ * brandmarks here follow that; the COLOURS come from the site's theme rather
+ * than the official black, because Forge blocks may only draw with theme tokens
+ * and a hardcoded black pill is unreadable on half the themes it would land in.
+ * The Google "G" keeps its official four colours — a monochrome G is a brand
+ * violation, and it is a mark rather than a styling choice.
+ *
+ * Official artwork is deliberately not committed: the assets are large binaries
+ * whose licence travels with brand approval, and inline SVG costs nothing.
+ */
+
+export interface WalletPassButtonsProps {
+  /** One pass id (`TN-…`). Ignored when `passIds` is given. */
+  passId?: string;
+  /** Several pass ids — an order is usually more than one ticket. */
+  passIds?: string[];
+  /**
+   * `default` stacks a labelled row per pass. `compact` drops the per-pass label
+   * and packs the badges into one wrapping row — for a dense list.
+   */
+  variant?: "default" | "compact";
+  /** Extra class(es) appended to the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element (callers can override). */
+  style?: CSSProperties;
+}
+
+/** The Apple mark. `currentColor` so it inherits the badge's themed label colour. */
+function AppleMark({ size = 15 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
+      <path d="M17.05 12.04c-.03-2.9 2.37-4.3 2.48-4.36-1.35-1.98-3.46-2.25-4.21-2.28-1.79-.18-3.5 1.05-4.41 1.05-.91 0-2.31-1.03-3.8-1-1.96.03-3.76 1.14-4.77 2.89-2.03 3.53-.52 8.76 1.46 11.62.97 1.4 2.12 2.97 3.63 2.91 1.46-.06 2.01-.94 3.77-.94 1.76 0 2.26.94 3.8.91 1.57-.03 2.56-1.42 3.52-2.83 1.11-1.62 1.57-3.19 1.6-3.27-.04-.02-3.06-1.17-3.09-4.66zM14.2 4.6c.8-.98 1.34-2.33 1.19-3.68-1.15.05-2.55.77-3.38 1.74-.74.86-1.39 2.24-1.22 3.56 1.29.1 2.6-.65 3.41-1.62z" />
+    </svg>
+  );
+}
+
+/** The Google mark, in its official four colours — a monochrome "G" is a brand violation. */
+function GoogleMark({ size = 15 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <path
+        fill="#4285F4"
+        d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47a5.53 5.53 0 0 1-2.4 3.63v3.02h3.88c2.27-2.09 3.54-5.17 3.54-8.89z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.88-3.01c-1.08.72-2.45 1.16-4.05 1.16-3.13 0-5.78-2.11-6.73-4.96H1.28v3.09A11.99 11.99 0 0 0 12 24z"
+      />
+      <path fill="#FBBC05" d="M5.27 14.28a7.2 7.2 0 0 1 0-4.56V6.63H1.28a12 12 0 0 0 0 10.74l3.99-3.09z" />
+      <path
+        fill="#EA4335"
+        d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.44-3.44C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.69 1.28 6.63l3.99 3.09C6.22 6.86 8.87 4.75 12 4.75z"
+      />
+    </svg>
+  );
+}
+
+/**
+ * The badge lockup, themed.
+ *
+ * Inverted against the page — `text` as the fill, `background` as the label —
+ * which is how both vendors' badges read (a high-contrast pill against the
+ * content) while staying entirely inside the theme.
+ */
+function badgeStyle(t: ResolvedThemeTokens, compact: boolean): CSSProperties {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 7,
+    padding: compact ? "6px 12px" : "8px 14px",
+    fontSize: compact ? 12 : 13,
+    fontWeight: 600,
+    lineHeight: 1.2,
+    whiteSpace: "nowrap",
+    color: t.background,
+    background: t.text,
+    border: `1px solid ${t.text}`,
+    borderRadius: t.cornerRadius,
+    textDecoration: "none",
+    cursor: "pointer",
+    fontFamily: t.fontFamily,
+  };
+}
+
+export function WalletPassButtons({ passId, passIds, variant = "default", className, style }: WalletPassButtonsProps) {
+  const t = useThemeTokens();
+  const { user } = usePublicAuth();
+
+  // One hook for both prop shapes — a branch here would violate the rules of
+  // hooks, and an empty array is exactly the disabled state the query wants.
+  const ids = passIds ?? (passId ? [passId] : []);
+  const { entries } = useWalletPasses(ids, user?.id);
+  const download = useDownloadApplePass();
+
+  // THE gate. Empty is the production state today, and it means: draw nothing.
+  if (entries.length === 0) return null;
+
+  const compact = variant === "compact";
+
+  return (
+    <div
+      data-testid="wallet-pass-buttons"
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: compact ? 6 : 10, ...style }}
+    >
+      {entries.map((entry) => (
+        <WalletPassRow
+          key={entry.passId}
+          entry={entry}
+          t={t}
+          compact={compact}
+          showLabel={!compact && entries.length > 1}
+          onDownloadApple={(downloadUrl) => {
+            // Failure is swallowed on purpose. The buyer's ticket is the PDF and
+            // the QR in their portal; a wallet pass is an extra, and an error
+            // banner for an extra they never asked about is worse than nothing.
+            void download.mutateAsync({ passId: entry.passId, downloadUrl }).catch(() => undefined);
+          }}
+          isDownloading={download.isPending && download.variables?.passId === entry.passId}
+        />
+      ))}
+    </div>
+  );
+}
+
+function WalletPassRow({
+  entry,
+  t,
+  compact,
+  showLabel,
+  onDownloadApple,
+  isDownloading,
+}: {
+  entry: WalletPassEntry;
+  t: ResolvedThemeTokens;
+  compact: boolean;
+  showLabel: boolean;
+  onDownloadApple: (downloadUrl: string) => void;
+  isDownloading: boolean;
+}) {
+  const badge = badgeStyle(t, compact);
+  const { apple, google } = entry.status;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      {showLabel && (
+        <span style={{ fontSize: 12, fontWeight: 600, color: t.muted, fontFamily: t.fontFamily }}>{entry.passId}</span>
+      )}
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+        {apple.available && apple.downloadUrl && (
+          <button
+            type="button"
+            onClick={() => onDownloadApple(apple.downloadUrl!)}
+            disabled={isDownloading}
+            style={{ ...badge, cursor: isDownloading ? "wait" : "pointer" }}
+            aria-label={`Add ticket ${entry.passId} to Apple Wallet`}
+          >
+            <AppleMark size={compact ? 13 : 15} />
+            {isDownloading ? "Preparing…" : "Add to Apple Wallet"}
+          </button>
+        )}
+        {google.saveUrl && (
+          <a
+            href={google.saveUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={badge}
+            aria-label={`Save ticket ${entry.passId} to Google Wallet`}
+          >
+            <GoogleMark size={compact ? 13 : 15} />
+            Save to Google Wallet
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}