@tribe-nest/forge 1.13.0

package/src/ui/styled/EventConfirmation.tsx

@@ -0,0 +1,228 @@
+import { AlertTriangle, ArrowRight, Calendar, MapPin, Ticket } from "lucide-react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { Loading } from "./Loading";
+import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, Perforation, ConfirmationRow, alpha } from "./Confirmation";
+import { useEventOrderFinalize } from "../../data/queries/useFinalize";
+import { useEvent } from "../../data/queries/useEvents";
+import { OrderStatus } from "../../types/models";
+
+// A paid (or free) order advances through fulfillment — processing → shipped /
+// delivered / processed. All of these mean the order succeeded, so the ticket
+// confirmation should treat them as "paid"; only failed/pending-payment states
+// are "not completed". (A free order can be `delivered` by the time this loads.)
+const PAID_STATES = new Set<OrderStatus>([
+  OrderStatus.Paid,
+  OrderStatus.Processing,
+  OrderStatus.LabelPurchased,
+  OrderStatus.Shipped,
+  OrderStatus.Delivered,
+  OrderStatus.Processed,
+]);
+
+export interface EventConfirmationProps {
+  slug: string;
+  orderId?: string;
+  /**
+   * Formats a monetary amount for display. Receives the order's own currency as a
+   * second argument so the shell can honor it (defaults to plain USD-style).
+   */
+  formatAmount?: (n: number, currency?: string) => string;
+  /** Where the "browse more events" action links. */
+  explorePath?: string;
+}
+
+/** Locale date-time formatting, replicating the site-starter `formatDateTime`. */
+function formatDateTime(value: string | number | Date, timezone?: string): string {
+  return new Date(value).toLocaleString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone || "UTC",
+    timeZoneName: "short",
+  });
+}
+
+export function EventConfirmation({
+  slug,
+  orderId,
+  formatAmount,
+  explorePath = "/i/events",
+}: EventConfirmationProps) {
+  const theme = useForgeTheme();
+  const formatAmt = useAmountFormatter(formatAmount);
+  const { data: order, isLoading } = useEventOrderFinalize(slug, orderId);
+  const { data: event } = useEvent(slug);
+
+  const text = theme.colors.text;
+  const primary = theme.colors.primary;
+
+  if (isLoading) {
+    return (
+      <ConfirmationStage>
+        <Loading label="Finalizing your order…" />
+      </ConfirmationStage>
+    );
+  }
+
+  if (!order) {
+    return (
+      <ConfirmationStage>
+        <p style={{ color: text }}>We couldn’t find your order.</p>
+      </ConfirmationStage>
+    );
+  }
+
+  const paid = PAID_STATES.has(order.status);
+  const fmt = (n: number) => formatAmt(n, order.currency || undefined);
+  const location =
+    event && event.type !== "virtual" && event.address
+      ? [event.address.name, event.address.city, event.address.country].filter(Boolean).join(", ")
+      : "Virtual event";
+
+  return (
+    <ConfirmationStage>
+      <ConfirmationCard>
+        {/* ── Ceremony ── */}
+        <div style={{ padding: "38px 30px 26px", textAlign: "center" }}>
+          {paid ? <CheckSeal /> : <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />}
+
+          <p
+            className="cf-rise"
+            style={{
+              margin: "22px 0 6px",
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: "0.22em",
+              textTransform: "uppercase",
+              color: paid ? primary : "#f59e0b",
+              animationDelay: "0.15s",
+            }}
+          >
+            {paid ? "E-Ticket" : "Order " + 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 ? "You’re going! 🎟" : "Order not completed"}
+          </h1>
+          <p className="cf-rise" style={{ fontSize: 15, color: alpha(text, 0.7), margin: 0, animationDelay: "0.3s" }}>
+            {paid
+              ? `We’ve sent your tickets to ${order.email}.`
+              : `Your order is ${order.status.replace(/_/g, " ")}. If you were charged, contact support.`}
+          </p>
+        </div>
+
+        {/* ── Event summary ── */}
+        <div className="cf-rise" style={{ padding: "0 30px 24px", animationDelay: "0.36s" }}>
+          <div
+            style={{
+              borderRadius: theme.cornerRadius,
+              border: `1px solid ${alpha(primary, 0.18)}`,
+              background: alpha(primary, 0.04),
+              padding: 16,
+            }}
+          >
+            <div style={{ fontSize: 17, fontWeight: 800, marginBottom: 10 }}>{order.eventTitle}</div>
+            {event && (
+              <>
+                <Line icon={<Calendar size={15} color={primary} />} text={formatDateTime(event.dateTime, event.timezone)} muted={alpha(text, 0.75)} />
+                <Line icon={<MapPin size={15} color={primary} />} text={location} muted={alpha(text, 0.75)} />
+              </>
+            )}
+          </div>
+        </div>
+
+        <Perforation />
+
+        {/* ── Tickets stub ── */}
+        <div className="cf-rise" style={{ padding: "26px 30px 8px", animationDelay: "0.44s" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+            <Ticket size={16} color={primary} />
+            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: alpha(text, 0.55) }}>
+              Tickets
+            </span>
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {order.items.map((item) => (
+              <div key={item.id} style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
+                <span>
+                  {item.title} <span style={{ opacity: 0.55 }}>× {item.quantity}</span>
+                </span>
+                <span style={{ fontWeight: 600 }}>{fmt(item.price * item.quantity)}</span>
+              </div>
+            ))}
+          </div>
+
+          {Number(order.taxAmount || 0) > 0 && !order.taxInclusive && (
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, marginTop: 10, color: alpha(text, 0.6) }}>
+              <span>Tax</span>
+              <span>{formatAmt(Number(order.taxAmount), order.chargedCurrency || order.currency || undefined)}</span>
+            </div>
+          )}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginTop: 14,
+              paddingTop: 14,
+              borderTop: `1px solid ${alpha(text, 0.1)}`,
+            }}
+          >
+            <span style={{ fontWeight: 700 }}>Total {paid ? "paid" : ""}</span>
+            {/* The exact charged total (charged currency) when present — never a re-converted catalog amount. */}
+            <span style={{ fontSize: 18, fontWeight: 800, color: primary }}>
+              {order.totalAmountInChargedCurrency
+                ? formatAmt(Number(order.totalAmountInChargedCurrency), order.chargedCurrency || order.currency || undefined)
+                : fmt(order.totalAmount)}
+            </span>
+          </div>
+          {Number(order.taxAmount || 0) > 0 && order.taxInclusive && (
+            <div style={{ textAlign: "right", fontSize: 12, color: alpha(text, 0.6), marginTop: 4 }}>
+              Includes {formatAmt(Number(order.taxAmount), order.chargedCurrency || order.currency || undefined)} tax
+            </div>
+          )}
+
+          <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 10, columnGap: 16, margin: "16px 0 0" }}>
+            <ConfirmationRow label="Guest" value={`${order.firstName} ${order.lastName}`.trim() || "—"} />
+            <ConfirmationRow label="Reference" value={`#${order.id.slice(0, 8).toUpperCase()}`} mono />
+          </dl>
+        </div>
+
+        {/* ── Action ── */}
+        <div className="cf-rise" style={{ padding: "20px 30px 30px", animationDelay: "0.52s" }}>
+          <a
+            href={explorePath}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              width: "100%",
+              padding: "13px 18px",
+              borderRadius: theme.cornerRadius,
+              background: primary,
+              color: readableTextOn(primary),
+              fontWeight: 700,
+              textDecoration: "none",
+            }}
+          >
+            Browse more events <ArrowRight size={16} />
+          </a>
+        </div>
+      </ConfirmationCard>
+    </ConfirmationStage>
+  );
+}
+
+function Line({ icon, text, muted }: { icon: React.ReactNode; text: string; muted: string }) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: muted, padding: "3px 0" }}>
+      {icon} {text}
+    </div>
+  );
+}

package/src/ui/styled/EventCountdown.tsx

@@ -0,0 +1,98 @@
+import { Fragment, useEffect, useState } from "react";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+export interface EventCountdownProps {
+  /** Event start time (ISO). */
+  dateTime: string;
+  /** Reserved for future tz-aware rendering; the ISO time is used directly today. */
+  timezone?: string;
+}
+
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+/**
+ * Live days/hours/minutes/seconds countdown to an event, themed from
+ * `ForgeThemeProvider`. Port of the client app's EventCountdown — shows
+ * "This event has passed" once the start time is reached.
+ */
+export function EventCountdown({ dateTime }: EventCountdownProps) {
+  const theme = useForgeTheme();
+  const [remaining, setRemaining] = useState<{
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    isPast: boolean;
+  } | null>(null);
+
+  useEffect(() => {
+    const tick = () => {
+      const diff = new Date(dateTime).getTime() - Date.now();
+      if (diff <= 0) {
+        setRemaining({ days: 0, hours: 0, minutes: 0, seconds: 0, isPast: true });
+        return;
+      }
+      setRemaining({
+        days: Math.floor(diff / 86_400_000),
+        hours: Math.floor((diff % 86_400_000) / 3_600_000),
+        minutes: Math.floor((diff % 3_600_000) / 60_000),
+        seconds: Math.floor((diff % 60_000) / 1000),
+        isPast: false,
+      });
+    };
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [dateTime]);
+
+  if (!remaining) return null;
+
+  const box = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    padding: "16px 24px",
+    background: a(theme.colors.primary, 0.1),
+    border: `1px solid ${a(theme.colors.primary, 0.3)}`,
+    borderRadius: theme.cornerRadius,
+    fontFamily: theme.fontFamily,
+  } as const;
+
+  if (remaining.isPast) {
+    return (
+      <div style={box}>
+        <span style={{ color: theme.colors.text, fontWeight: 600 }}>This event has passed</span>
+      </div>
+    );
+  }
+
+  const units = [
+    { label: "Days", value: remaining.days },
+    { label: "Hours", value: remaining.hours },
+    { label: "Minutes", value: remaining.minutes },
+    { label: "Seconds", value: remaining.seconds },
+  ];
+
+  return (
+    <div style={box}>
+      {units.map((unit, index) => (
+        <Fragment key={unit.label}>
+          <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+            <div style={{ fontSize: 24, fontWeight: 700, color: theme.colors.primary }}>
+              {String(unit.value).padStart(2, "0")}
+            </div>
+            <div style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.05em", color: a(theme.colors.text, 0.7) }}>
+              {unit.label}
+            </div>
+          </div>
+          {index < units.length - 1 && (
+            <span style={{ fontSize: 20, margin: "0 4px", alignSelf: "flex-end", marginBottom: 16, color: a(theme.colors.text, 0.5) }}>
+              :
+            </span>
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/src/ui/styled/EventDetail.tsx

@@ -0,0 +1,141 @@
+import { Calendar, MapPin } from "lucide-react";
+import type { IEvent } from "../../types/models";
+import { useEvent } from "../../data/queries/useEvents";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { PriceDisplay } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { Loading } from "./Loading";
+import { EventTickets } from "./EventTickets";
+import { EventCountdown } from "./EventCountdown";
+
+export interface EventDetailProps {
+  /** Event slug (resolves the event). */
+  slug?: string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  /**
+   * Event fetched server-side (e.g. in a route loader). Seeds the query so the
+   * page renders with data on first paint — no client loading spinner — enabling
+   * SSR for SEO.
+   */
+  initialEvent?: IEvent;
+  /** Extra class(es) appended to the root element. */
+  className?: string;
+  /** Inline style merged LAST into the root element (callers can override). */
+  style?: React.CSSProperties;
+  /** Stripe return URL for a PAID purchase (forwarded to the ticket flow). */
+  finalisePath?: (slug: string, orderId: string) => string;
+  /** Host-owned navigation on FREE completion (forwarded to the ticket flow). */
+  onComplete?: (info: { slug: string; orderId: string }) => void;
+}
+
+/** Locale date-time formatting (inlined from the app's `formatDateTime`). */
+const formatDateTime = (value: string | number | Date, timezone?: string): string =>
+  new Date(value).toLocaleString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone || "UTC",
+    timeZoneName: "short",
+  });
+
+export function EventDetail({
+  slug,
+  formatAmount,
+  initialEvent,
+  className,
+  style,
+  finalisePath,
+  onComplete,
+}: EventDetailProps) {
+  const t = useThemeTokens();
+  const fmt = useAmountFormatter(formatAmount);
+  const pricesIncludeTax = usePricesIncludeTax();
+  const { data: event, isLoading } = useEvent(slug, { initialData: initialEvent });
+
+  if (isLoading) return <Loading fullPage />;
+  if (!event) return <p>Event not found.</p>;
+
+  const cover = event.media?.find((m) => m.type === "image")?.url ?? event.media?.[0]?.url;
+  const minPrice = event.tickets.length ? Math.min(...event.tickets.map((t) => t.price)) : 0;
+
+  return (
+    <div
+      className={`pb-32 md:pb-0${className ? ` ${className}` : ""}`}
+      style={{ maxWidth: 1040, margin: "0 auto", color: t.text, ...style }}
+    >
+      {cover && (
+        <img
+          src={cover}
+          alt={event.title}
+          style={{
+            width: "100%",
+            aspectRatio: "16/9",
+            objectFit: "cover",
+            objectPosition: "top",
+            borderRadius: t.cornerRadius,
+          }}
+        />
+      )}
+
+      <div className="flex flex-col md:flex-row md:items-start gap-6 mt-6">
+        <div className="flex-1 min-w-0">
+          <div style={{ marginBottom: 20 }}>
+            <EventCountdown dateTime={event.dateTime} timezone={event.timezone} />
+          </div>
+          <h1 style={{ fontSize: 32, fontWeight: 800, margin: "0 0 12px", fontFamily: t.headingFontFamily }}>{event.title}</h1>
+
+          <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
+            <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <Calendar size={16} /> {formatDateTime(event.dateTime, event.timezone)}
+            </span>
+            <span style={{ display: "flex", alignItems: "flex-start", gap: 8 }}>
+              <MapPin size={16} style={{ marginTop: 2, flexShrink: 0 }} />
+              {event.type === "virtual" || !event.address
+                ? "Virtual"
+                : [event.address.name, event.address.street, event.address.city, event.address.country]
+                    .filter(Boolean)
+                    .join(", ")}
+            </span>
+          </div>
+
+          {event.description && (
+            <>
+              <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 8px", fontFamily: t.headingFontFamily }}>About this event</h2>
+              <div dangerouslySetInnerHTML={{ __html: event.description }} style={{ lineHeight: 1.7, opacity: 0.9 }} />
+            </>
+          )}
+        </div>
+
+        {event.tickets.length > 0 && (
+          <aside
+            className="fixed bottom-0 left-0 right-0 z-40 w-full md:sticky md:top-4 md:bottom-auto md:left-auto md:right-auto md:w-[300px] md:shrink-0 flex flex-col gap-3"
+            style={{
+              padding: 16,
+              border: `1px solid ${t.primary}80`,
+              borderRadius: t.cornerRadius,
+              background: t.surface,
+            }}
+          >
+            <span style={{ fontWeight: 600 }}>
+              From{" "}
+              <PriceDisplay amount={minPrice} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
+            </span>
+            <EventTickets
+              slug={slug}
+              triggerText="Buy tickets"
+              formatAmount={fmt}
+              finalisePath={finalisePath}
+              onComplete={onComplete}
+            />
+          </aside>
+        )}
+      </div>
+    </div>
+  );
+}