@tribe-nest/forge 3.57.0 → 3.59.0

package/src/ui/styled/forge-utilities.css

@@ -65,6 +65,9 @@
   .fg\:inset-0 {
     inset: calc(var(--fg-spacing) * 0);
   }
+  .fg\:top-2 {
+    top: calc(var(--fg-spacing) * 2);
+  }
   .fg\:top-4 {
     top: calc(var(--fg-spacing) * 4);
   }
@@ -74,18 +77,30 @@
   .fg\:right-0 {
     right: calc(var(--fg-spacing) * 0);
   }
+  .fg\:right-2 {
+    right: calc(var(--fg-spacing) * 2);
+  }
+  .fg\:right-14 {
+    right: calc(var(--fg-spacing) * 14);
+  }
   .fg\:bottom-0 {
     bottom: calc(var(--fg-spacing) * 0);
   }
   .fg\:left-0 {
     left: calc(var(--fg-spacing) * 0);
   }
+  .fg\:left-2 {
+    left: calc(var(--fg-spacing) * 2);
+  }
   .fg\:z-40 {
     z-index: 40;
   }
   .fg\:z-50 {
     z-index: 50;
   }
+  .fg\:m-0 {
+    margin: calc(var(--fg-spacing) * 0);
+  }
   .fg\:mx-auto {
     margin-inline: auto;
   }
@@ -158,33 +173,54 @@
   .fg\:hidden {
     display: none;
   }
+  .fg\:inline-block {
+    display: inline-block;
+  }
   .fg\:inline-flex {
     display: inline-flex;
   }
   .fg\:h-0\.5 {
     height: calc(var(--fg-spacing) * 0.5);
   }
+  .fg\:h-3 {
+    height: calc(var(--fg-spacing) * 3);
+  }
   .fg\:h-4 {
     height: calc(var(--fg-spacing) * 4);
   }
   .fg\:h-8 {
     height: calc(var(--fg-spacing) * 8);
   }
+  .fg\:h-9 {
+    height: calc(var(--fg-spacing) * 9);
+  }
   .fg\:h-12 {
     height: calc(var(--fg-spacing) * 12);
   }
   .fg\:h-\[70vh\] {
     height: 70vh;
   }
+  .fg\:h-\[320px\] {
+    height: 320px;
+  }
   .fg\:h-full {
     height: 100%;
   }
+  .fg\:min-h-\[320px\] {
+    min-height: 320px;
+  }
+  .fg\:w-3 {
+    width: calc(var(--fg-spacing) * 3);
+  }
   .fg\:w-4 {
     width: calc(var(--fg-spacing) * 4);
   }
   .fg\:w-8 {
     width: calc(var(--fg-spacing) * 8);
   }
+  .fg\:w-9 {
+    width: calc(var(--fg-spacing) * 9);
+  }
   .fg\:w-10 {
     width: calc(var(--fg-spacing) * 10);
   }
@@ -224,9 +260,15 @@
   .fg\:cursor-pointer {
     cursor: pointer;
   }
+  .fg\:touch-none {
+    touch-action: none;
+  }
   .fg\:resize-y {
     resize: vertical;
   }
+  .fg\:list-none {
+    list-style-type: none;
+  }
   .fg\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -236,6 +278,9 @@
   .fg\:flex-col {
     flex-direction: column;
   }
+  .fg\:flex-row {
+    flex-direction: row;
+  }
   .fg\:flex-wrap {
     flex-wrap: wrap;
   }
@@ -308,6 +353,9 @@
       margin-block-end: calc(calc(var(--fg-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .fg\:gap-x-4 {
+    column-gap: calc(var(--fg-spacing) * 4);
+  }
   .fg\:space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -315,6 +363,9 @@
       margin-inline-end: calc(calc(var(--fg-spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .fg\:gap-y-2 {
+    row-gap: calc(var(--fg-spacing) * 2);
+  }
   .fg\:overflow-hidden {
     overflow: hidden;
   }
@@ -340,6 +391,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .fg\:border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .fg\:border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -387,6 +442,9 @@
   .fg\:bg-transparent {
     background-color: transparent;
   }
+  .fg\:p-0 {
+    padding: calc(var(--fg-spacing) * 0);
+  }
   .fg\:p-0\.5 {
     padding: calc(var(--fg-spacing) * 0.5);
   }
@@ -583,6 +641,10 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .fg\:select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
   .fg\:focus\:border-primary {
     &:focus {
       border-color: var(--fg-color-primary);
@@ -678,6 +740,11 @@
       height: calc(var(--fg-spacing) * 64);
     }
   }
+  .fg\:md\:h-\[440px\] {
+    @media (width >= 48rem) {
+      height: 440px;
+    }
+  }
   .fg\:md\:w-64 {
     @media (width >= 48rem) {
       width: calc(var(--fg-spacing) * 64);

package/src/ui/styled/seating/EventSeatPicker.tsx

@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useMemo, useState, type CSSProperties } from "react";
+import { AlertCircle, X } from "lucide-react";
+import type { IEvent } from "../../../types/models";
+import type { EventSeat, EventSeatingState } from "../../headless/event/useEventSeating";
+import type { ToggleSeatResult } from "../../headless/event/useEventCheckout";
+import { useForgeT } from "../../../i18n";
+import { useForgeTheme, type ForgeTheme } from "../../theme/ForgeThemeProvider";
+import { CallHelpHint } from "../../media/CallHelpHint";
+import { Loading } from "../Loading";
+import { SeatMapCanvas } from "./SeatMapCanvas";
+import { SeatLegend, type SeatLegendTier } from "./SeatLegend";
+import { tierColorMap } from "./paint";
+
+export interface EventSeatPickerProps {
+  /** The event whose tiers price the seats. Tier order fixes the palette. */
+  event: IEvent;
+  /** The joined seating read, from `useEventCheckout().seating` or `useEventSeating`. */
+  seating: EventSeatingState;
+  /** ticketId -> the EVENT seat ids the buyer holds. */
+  selectedSeats: Record<string, string[]>;
+  /**
+   * A tap on a seat. `useEventCheckout().toggleSeat` fits directly; a host
+   * driving its own state may return nothing, in which case no notice is shown.
+   */
+  onToggleSeat: (ticketId: string, seatId: string) => ToggleSeatResult | void;
+  /** Seats that left the selection because somebody else got them. Rendered as an alert. */
+  seatsTaken?: { labels: string[] } | null;
+  onDismissSeatsTaken?: () => void;
+  /** Format a numeric amount for display. */
+  formatAmount: (amount: number) => string;
+  /** Host classes on the outer element, passed through untouched. */
+  className?: string;
+}
+
+/** Append an alpha to a 6-digit hex color. */
+const a = (hex: string, alpha: number) =>
+  hex +
+  Math.round(alpha * 255)
+    .toString(16)
+    .padStart(2, "0");
+
+const NOTICE_MS = 2500;
+
+/**
+ * The buyer's seat picker: the map, the legend, and the two notices a buyer
+ * must see without asking (seats taken from under them, a tier at its cap).
+ *
+ * Rendered inside `EventTickets`' ticket step when `event.hasSeatMap`, and
+ * exported on its own for a host that composes the checkout from the headless
+ * hook. Colours come from the site theme except the tier palette, which the
+ * map, the legend and the tier rows share through `tierColorMap`.
+ */
+export function EventSeatPicker({
+  event,
+  seating,
+  selectedSeats,
+  onToggleSeat,
+  seatsTaken,
+  onDismissSeatsTaken,
+  formatAmount,
+  className,
+}: EventSeatPickerProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const [notice, setNotice] = useState<string | null>(null);
+
+  // A brief inline notice, cleared on its own: it answers "why did nothing
+  // happen?" for one tap and must not sit on the map for ever.
+  useEffect(() => {
+    if (!notice) return;
+    const id = setTimeout(() => setNotice(null), NOTICE_MS);
+    return () => clearTimeout(id);
+  }, [notice]);
+
+  const tierColors = useMemo(() => tierColorMap(event.tickets.map((ticket) => ticket.id)), [event.tickets]);
+
+  const selectedIds = useMemo(() => new Set(Object.values(selectedSeats).flat()), [selectedSeats]);
+
+  const legendTiers = useMemo<SeatLegendTier[]>(
+    () =>
+      event.tickets
+        .filter((ticket) => seating.seatedTierIds.has(ticket.id))
+        .map((ticket) => ({
+          id: ticket.id,
+          title: ticket.title,
+          price: Number(ticket.price),
+          color: tierColors[ticket.id]!,
+          left: seating.availableByTier[ticket.id] ?? 0,
+        })),
+    [event.tickets, seating.seatedTierIds, seating.availableByTier, tierColors],
+  );
+
+  const onSeatTap = useCallback(
+    (seat: EventSeat) => {
+      const result = onToggleSeat(seat.eventTicketId, seat.id);
+      if (!result || result.ok) return;
+      const tier = event.tickets.find((ticket) => ticket.id === seat.eventTicketId);
+      if (result.reason === "max") setNotice(t("forge.event_seat_picker.max_reached", { tier: tier?.title ?? "" }));
+      else if (result.reason === "unavailable") setNotice(t("forge.event_seat_picker.seat_unavailable"));
+      else if (result.reason === "mix") setNotice(t("forge.event_seat_picker.mix_blocked"));
+    },
+    [onToggleSeat, event.tickets, t],
+  );
+
+  const layout = seating.seating?.layout;
+
+  return (
+    <div data-testid="event-seat-picker" className={className ?? "fg:flex fg:flex-col fg:gap-3"}>
+      <div className="fg:flex fg:items-center fg:gap-2">
+        <h3 style={{ fontSize: 16, fontWeight: 700, margin: 0 }}>{t("forge.event_seat_picker.title")}</h3>
+        <CallHelpHint label={t("forge.event_seat_picker.help_label")}>{t("forge.event_seat_picker.help_body")}</CallHelpHint>
+      </div>
+
+      {/* State the buyer has to act on, so it is a visible alert and not a
+          `?`: their selection just shrank, and these are the seats that went. */}
+      {seatsTaken && seatsTaken.labels.length > 0 && (
+        <div role="alert" data-testid="seats-taken-alert" style={alertStyle("#dc2626", theme)}>
+          <AlertCircle size={16} style={{ flexShrink: 0, marginTop: 2 }} />
+          <div style={{ flex: 1 }}>
+            <div style={{ fontWeight: 700 }}>{t("forge.event_seat_picker.seats_taken_title")}</div>
+            <div style={{ fontWeight: 400, marginTop: 2 }}>
+              {t("forge.event_seat_picker.seats_taken_body", { seats: seatsTaken.labels.join(", ") })}
+            </div>
+          </div>
+          {onDismissSeatsTaken && (
+            <button
+              type="button"
+              aria-label={t("forge.event_seat_picker.dismiss")}
+              onClick={onDismissSeatsTaken}
+              className="fg:cursor-pointer fg:p-0 fg:bg-transparent fg:border-0"
+              style={{ color: "inherit" }}
+            >
+              <X size={16} />
+            </button>
+          )}
+        </div>
+      )}
+
+      {seating.isLoading && !layout && (
+        <div
+          data-testid="seat-picker-loading"
+          className="fg:flex fg:items-center fg:justify-center fg:min-h-[320px]"
+          style={{ border: `1px solid ${a(theme.colors.primary, 0.25)}`, borderRadius: theme.cornerRadius }}
+        >
+          <Loading label={t("forge.event_seat_picker.loading")} />
+        </div>
+      )}
+
+      {!seating.isLoading && !layout && (
+        <p data-testid="seat-picker-empty" style={{ opacity: 0.7, fontSize: 14, margin: 0 }}>
+          {t("forge.event_seat_picker.empty")}
+        </p>
+      )}
+
+      {layout && (
+        <>
+          <SeatMapCanvas
+            layout={layout}
+            bySource={seating.bySource}
+            tierColors={tierColors}
+            selectedIds={selectedIds}
+            onSeatTap={onSeatTap}
+            overlay={
+              notice ? (
+                <div role="status" data-testid="seat-picker-notice" style={{ ...alertStyle(theme.colors.primary, theme), marginTop: 0 }}>
+                  <AlertCircle size={14} />
+                  {notice}
+                </div>
+              ) : null
+            }
+          />
+          <SeatLegend tiers={legendTiers} formatAmount={formatAmount} />
+        </>
+      )}
+    </div>
+  );
+}
+
+const alertStyle = (color: string, t: ForgeTheme): CSSProperties => ({
+  padding: "8px 12px",
+  borderRadius: t.cornerRadius,
+  fontSize: 14,
+  fontWeight: 600,
+  background: a(color, 0.1),
+  color,
+  border: `1px solid ${a(color, 0.3)}`,
+  display: "flex",
+  alignItems: "flex-start",
+  gap: 8,
+});

package/src/ui/styled/seating/SeatLegend.tsx

@@ -0,0 +1,73 @@
+import { useForgeT } from "../../../i18n";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { UNAVAILABLE_FILL } from "./paint";
+
+export interface SeatLegendTier {
+  id: string;
+  title: string;
+  /** Per-unit price, in the artist's currency. */
+  price: number;
+  /** The tier's colour on the map. */
+  color: string;
+  /** Seats still available on this tier. */
+  left: number;
+}
+
+export interface SeatLegendProps {
+  tiers: SeatLegendTier[];
+  formatAmount: (amount: number) => string;
+  /** Host classes on the outer element, passed through untouched. */
+  className?: string;
+}
+
+/**
+ * What the colours on the map mean: one chip per seated tier (colour, name,
+ * price, how many are left), plus the two states every seat can be in
+ * regardless of tier. The colours come from the same `tierColorMap` the
+ * canvas and the tier rows use, so this is the key to the map by construction.
+ */
+export function SeatLegend({ tiers, formatAmount, className }: SeatLegendProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  return (
+    <ul
+      data-testid="seat-legend"
+      aria-label={t("forge.seat_legend.aria_label")}
+      className={className ?? "fg:flex fg:flex-wrap fg:gap-x-4 fg:gap-y-2 fg:list-none fg:m-0 fg:p-0"}
+      style={{ fontSize: 13, color: theme.colors.text }}
+    >
+      {tiers.map((tier) => (
+        <li key={tier.id} data-testid="seat-legend-tier" className="fg:flex fg:items-center fg:gap-2">
+          <Swatch color={tier.color} />
+          <span style={{ fontWeight: 600 }}>{tier.title}</span>
+          <span style={{ opacity: 0.8 }}>{formatAmount(tier.price)}</span>
+          <span style={{ opacity: 0.65 }}>
+            {tier.left === 0
+              ? t("forge.seat_legend.sold_out")
+              : tier.left === 1
+                ? t("forge.seat_legend.left_one", { count: tier.left })
+                : t("forge.seat_legend.left_other", { count: tier.left })}
+          </span>
+        </li>
+      ))}
+      <li className="fg:flex fg:items-center fg:gap-2">
+        <Swatch color={theme.colors.primary} ring={theme.colors.primary} />
+        <span>{t("forge.seat_legend.selected")}</span>
+      </li>
+      <li className="fg:flex fg:items-center fg:gap-2">
+        <Swatch color={UNAVAILABLE_FILL} />
+        <span>{t("forge.seat_legend.unavailable")}</span>
+      </li>
+    </ul>
+  );
+}
+
+function Swatch({ color, ring }: { color: string; ring?: string }) {
+  return (
+    <span
+      aria-hidden
+      className="fg:inline-block fg:w-3 fg:h-3 fg:rounded-full fg:shrink-0"
+      style={{ background: color, boxShadow: ring ? `0 0 0 2px #ffffff, 0 0 0 3.5px ${ring}` : undefined }}
+    />
+  );
+}