@tribe-nest/forge 3.2.0 → 3.4.0

package/src/ui/styled/DiscountCode.tsx

@@ -0,0 +1,206 @@
+import type { CSSProperties } from "react";
+import type { AppliedDiscountCoupon } from "../../types/models";
+import type { CouponField } from "../headless/coupon/useCouponField";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { buttonStyle } from "./Button";
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+export interface DiscountCodeFieldProps {
+  coupon: CouponField;
+  /** Format a numeric amount for display. */
+  fmt: (n: number) => string;
+  /**
+   * Disable the input. Used once the underlying record has been created and the
+   * code can no longer be changed (tickets, bundles).
+   */
+  disabled?: boolean;
+  /**
+   * What "Apply" does. `"quote"` re-prices immediately against the server;
+   * `"deferred"` means the code is carried into the next step, because the
+   * pillar has no endpoint that can price it without creating a record.
+   */
+  mode?: "quote" | "deferred";
+  /** Collapsed-state prompt. */
+  promptText?: string;
+}
+
+/**
+ * The buyer's discount-code input, shared by every checkout.
+ *
+ * Two things it deliberately does NOT do:
+ *
+ * 1. It never writes its own rejection copy. The backend answers a refused code
+ *    with the actual reason, already translated — minimum not met, expired,
+ *    already used, members only. Collapsing all of that into "invalid code"
+ *    throws away the only thing that tells the buyer whether to fix the cart,
+ *    fix the code, or give up.
+ * 2. It never computes a discount. Every figure it renders came back from the
+ *    server, including automatic (no-code) discounts, which is the ONLY way a
+ *    buyer learns one applied.
+ */
+export function DiscountCodeField({
+  coupon,
+  fmt,
+  disabled,
+  mode = "quote",
+  promptText = "Have a discount code?",
+}: DiscountCodeFieldProps) {
+  const theme = useForgeTheme();
+  // Automatic discounts have no code the buyer typed, so they are shown as
+  // applied even when the input was never opened.
+  const applied = coupon.appliedCoupons;
+  const showInput = coupon.showInput && !disabled;
+
+  return (
+    <div data-testid="discount-code" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      {!showInput && applied.length === 0 && !disabled && (
+        <button
+          type="button"
+          data-testid="discount-code-open"
+          onClick={() => coupon.setShowInput(true)}
+          style={{
+            background: "transparent",
+            border: "none",
+            padding: 0,
+            textAlign: "left",
+            fontSize: 14,
+            textDecoration: "underline",
+            cursor: "pointer",
+            color: theme.colors.primary,
+            fontFamily: theme.fontFamily,
+          }}
+        >
+          {promptText}
+        </button>
+      )}
+
+      {showInput && (
+        <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
+          <input
+            aria-label="Discount code"
+            data-testid="discount-code-input"
+            placeholder="Enter code"
+            value={coupon.code}
+            onChange={(e) => coupon.setCode(e.target.value.toUpperCase())}
+            style={{ ...inputStyle(theme), flex: 1 }}
+          />
+          {mode === "quote" && (
+            <button
+              type="button"
+              data-testid="discount-code-apply"
+              onClick={() => void coupon.apply()}
+              disabled={coupon.isApplying || !coupon.code.trim()}
+              style={{
+                ...buttonStyle(theme, { variant: "primary" }),
+                opacity: coupon.isApplying || !coupon.code.trim() ? 0.6 : 1,
+              }}
+            >
+              {coupon.isApplying ? "Applying…" : "Apply"}
+            </button>
+          )}
+        </div>
+      )}
+
+      {showInput && mode === "deferred" && (
+        <p style={{ fontSize: 12, opacity: 0.6, margin: 0 }}>Your code is applied at the next step.</p>
+      )}
+
+      {coupon.error && (
+        <p data-testid="discount-code-error" style={{ color: "#ef4444", fontSize: 13, margin: 0 }}>
+          {coupon.error}
+        </p>
+      )}
+
+      {applied.length > 0 && (
+        <div
+          data-testid="discount-code-applied"
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 8,
+            padding: 12,
+            borderRadius: theme.cornerRadius,
+            background: a(theme.colors.primary, 0.1),
+          }}
+        >
+          <div>
+            {applied.map((c) => (
+              <p key={c.code} style={{ margin: 0, fontSize: 14, fontWeight: 600, color: theme.colors.primary }}>
+                {c.code} — {fmt(c.discountAmount)} off
+              </p>
+            ))}
+          </div>
+          {coupon.canQuote && !disabled && (
+            <button
+              type="button"
+              data-testid="discount-code-remove"
+              onClick={() => void coupon.remove()}
+              disabled={coupon.isApplying}
+              style={{
+                background: "transparent",
+                border: "none",
+                padding: 0,
+                fontSize: 13,
+                textDecoration: "underline",
+                cursor: "pointer",
+                color: theme.colors.text,
+                fontFamily: theme.fontFamily,
+              }}
+            >
+              Remove
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export interface DiscountSummaryLinesProps {
+  /** GROSS, before the discount. */
+  subTotal: number;
+  /** MAJOR units. Nothing renders when this is not positive. */
+  discountAmount: number;
+  /** Named on the Discount row when the server told us which codes applied. */
+  appliedCoupons?: AppliedDiscountCoupon[];
+  fmt: (n: number) => string;
+}
+
+/**
+ * `Subtotal` + `Discount −X` rows, shown ABOVE the total.
+ *
+ * The whole point: a buyer who sees only a smaller number has no way to tell a
+ * working code from a silently-ignored one, and no reason to trust either.
+ */
+export function DiscountSummaryLines({ subTotal, discountAmount, appliedCoupons, fmt }: DiscountSummaryLinesProps) {
+  const theme = useForgeTheme();
+  if (!(discountAmount > 0)) return null;
+  const codes = (appliedCoupons ?? []).map((c) => c.code).filter(Boolean);
+  return (
+    <div data-testid="discount-summary" style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 8 }}>
+      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
+        <span style={{ opacity: 0.75 }}>Subtotal</span>
+        <span style={{ opacity: 0.75 }}>{fmt(subTotal)}</span>
+      </div>
+      <div data-testid="discount-line" style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
+        <span style={{ color: theme.colors.primary }}>
+          Discount{codes.length > 0 ? ` (${codes.join(", ")})` : ""}
+        </span>
+        <span style={{ color: theme.colors.primary }}>−{fmt(discountAmount)}</span>
+      </div>
+    </div>
+  );
+}
+
+const inputStyle = (t: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  padding: 10,
+  border: `1px solid ${a(t.colors.primary, 0.25)}`,
+  borderRadius: t.cornerRadius,
+  background: t.colors.background,
+  color: t.colors.text,
+  fontFamily: t.fontFamily,
+});

package/src/ui/styled/EventConfirmation.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle, ArrowRight, Calendar, MapPin, Ticket } from "lucide-react";
+import { AlertTriangle, ArrowRight, Calendar, MapPin, RotateCcw, Ticket } from "lucide-react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -6,20 +6,8 @@ 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,
-]);
+import { AddToCalendar } from "./AddToCalendar";
+import { getTicketOrderOutcome, TICKET_ORDER_REFUNDED_COPY } from "../../utils/ticketOrderOutcome";
 
 export interface EventConfirmationProps {
   slug: string;
@@ -78,7 +66,13 @@ export function EventConfirmation({
     );
   }
 
-  const paid = PAID_STATES.has(order.status);
+  // `cancelled` means two different things — swept-abandoned and refund-voided —
+  // and the copy for one is a lie told to the other. `getTicketOrderOutcome`
+  // reads the order's refund columns to tell them apart; the reasoning for why
+  // that is a trustworthy signal lives there.
+  const outcome = getTicketOrderOutcome(order);
+  const paid = outcome === "paid";
+  const refunded = outcome === "refunded";
   const fmt = (n: number) => formatAmt(n, order.currency || undefined);
   const location =
     event && event.type !== "virtual" && event.address
@@ -90,7 +84,14 @@ export function EventConfirmation({
       <ConfirmationCard>
         {/* ── Ceremony ── */}
         <div style={{ padding: "38px 30px 26px", textAlign: "center" }}>
-          {paid ? <CheckSeal /> : <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />}
+          {paid ? (
+            <CheckSeal />
+          ) : refunded ? (
+            // Neutral, not alarmed: a refund is a completed outcome, not a fault.
+            <NeutralSeal icon={<RotateCcw size={32} color={alpha(text, 0.65)} />} text={text} />
+          ) : (
+            <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
+          )}
 
           <p
             className="cf-rise"
@@ -100,19 +101,21 @@ export function EventConfirmation({
               fontWeight: 700,
               letterSpacing: "0.22em",
               textTransform: "uppercase",
-              color: paid ? primary : "#f59e0b",
+              color: paid ? primary : refunded ? alpha(text, 0.65) : "#f59e0b",
               animationDelay: "0.15s",
             }}
           >
-            {paid ? "E-Ticket" : "Order " + order.status.replace(/_/g, " ")}
+            {paid ? "E-Ticket" : refunded ? TICKET_ORDER_REFUNDED_COPY.eyebrow : "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"}
+            {paid ? "You’re going! 🎟" : refunded ? TICKET_ORDER_REFUNDED_COPY.heading : "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.`}
+              : refunded
+                ? TICKET_ORDER_REFUNDED_COPY.body
+                : `Your order is ${order.status.replace(/_/g, " ")}. If you were charged, contact support.`}
           </p>
         </div>
 
@@ -134,6 +137,20 @@ export function EventConfirmation({
               </>
             )}
           </div>
+
+          {/* Diarise it while the confirmation is still on screen — the single
+              highest-intent moment there is. Not offered for a called-off event. */}
+          {paid && event && event.status !== "cancelled" && (
+            <AddToCalendar
+              variant="compact"
+              title={event.title}
+              start={event.dateTime}
+              end={event.endDateTime}
+              description={event.description}
+              location={location}
+              style={{ marginTop: 12 }}
+            />
+          )}
         </div>
 
         <Perforation />
@@ -173,7 +190,11 @@ export function EventConfirmation({
               borderTop: `1px solid ${alpha(text, 0.1)}`,
             }}
           >
-            <span style={{ fontWeight: 700 }}>Total {paid ? "paid" : ""}</span>
+            {/* Never "Total paid" for money that has gone back, and never a bare
+                "Total" for money that never moved. */}
+            <span style={{ fontWeight: 700 }}>
+              {paid ? "Total paid" : refunded ? TICKET_ORDER_REFUNDED_COPY.totalLabel : "Total"}
+            </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
@@ -219,6 +240,31 @@ export function EventConfirmation({
   );
 }
 
+/**
+ * The seal for a refunded order: same geometry as `CheckSeal`/`WarnSeal`, but
+ * drawn in the theme's own text color rather than warning amber. A refund is a
+ * settled outcome, not an error, and an amber warning ring says otherwise.
+ */
+function NeutralSeal({ icon, text }: { icon: React.ReactNode; text: string }) {
+  return (
+    <div
+      className="cf-pop"
+      style={{
+        width: 76,
+        height: 76,
+        margin: "0 auto",
+        borderRadius: "50%",
+        display: "grid",
+        placeItems: "center",
+        background: alpha(text, 0.06),
+        border: `1px solid ${alpha(text, 0.18)}`,
+      }}
+    >
+      {icon}
+    </div>
+  );
+}
+
 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" }}>

package/src/ui/styled/EventDetail.tsx

@@ -8,6 +8,7 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
 import { EventTickets } from "./EventTickets";
 import { EventCountdown } from "./EventCountdown";
+import { AddToCalendar } from "./AddToCalendar";
 
 export interface EventDetailProps {
   /** Event slug (resolves the event). */
@@ -63,6 +64,10 @@ export function EventDetail({
 
   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;
+  const locationText =
+    event.type === "virtual" || !event.address
+      ? "Virtual"
+      : [event.address.name, event.address.street, event.address.city, event.address.country].filter(Boolean).join(", ");
 
   return (
     <div
@@ -96,14 +101,22 @@ export function EventDetail({
             </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(", ")}
+              {locationText}
             </span>
           </div>
 
+          {/* Nothing to diarise for an event that has been called off. */}
+          {event.status !== "cancelled" && (
+            <AddToCalendar
+              title={event.title}
+              start={event.dateTime}
+              end={event.endDateTime}
+              description={event.description}
+              location={locationText}
+              style={{ marginTop: 16 }}
+            />
+          )}
+
           {event.description && (
             <>
               <h2 style={{ fontSize: 20, fontWeight: 700, margin: "24px 0 8px", fontFamily: t.headingFontFamily }}>About this event</h2>

package/src/ui/styled/EventTickets.tsx

@@ -9,6 +9,7 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { Loading } from "./Loading";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
+import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
 import {
   DialogRoot,
   DialogTrigger,
@@ -420,6 +421,15 @@ function DetailsStep({ c, event, fmt }: { c: Checkout; event: IEvent; fmt: (n: n
           );
         })}
 
+        {/* Tickets have no apply-coupon endpoint, so the code is carried into
+            the order that "Continue" creates — hence `deferred`. Its result is
+            what draws the discount line on the payment step. */}
+        {c.subTotal > 0 && (
+          <div style={{ marginTop: 4, paddingTop: 12, borderTop: `1px solid ${a(theme.colors.primary, 0.13)}` }}>
+            <DiscountCodeField coupon={c.coupon} fmt={fmt} mode="deferred" />
+          </div>
+        )}
+
         {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
       </div>
       <ActionBar
@@ -461,6 +471,35 @@ function PaymentStep({
           marginBottom: 16,
         }}
       >
+        {/* What the code actually did, from the order response — never a total
+            that silently shrank. Automatic (no-code) discounts land here too. */}
+        <DiscountSummaryLines
+          subTotal={c.subTotal}
+          discountAmount={c.coupon.discountAmount}
+          appliedCoupons={c.coupon.appliedCoupons}
+          fmt={fmt}
+        />
+        {c.coupon.hasDiscount && (
+          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 8 }}>
+            <button
+              type="button"
+              data-testid="discount-code-remove"
+              onClick={c.clearCoupon}
+              style={{
+                background: "transparent",
+                border: "none",
+                padding: 0,
+                fontSize: 13,
+                textDecoration: "underline",
+                cursor: "pointer",
+                color: theme.colors.text,
+                fontFamily: theme.fontFamily,
+              }}
+            >
+              Remove discount
+            </button>
+          </div>
+        )}
         {taxSummary?.mode === "exclusive" && (
           <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
             <span style={{ fontSize: 14, opacity: 0.75 }}>Tax</span>
@@ -525,13 +564,18 @@ function ActionBar({
           border: `1px solid ${a(theme.colors.primary, 0.25)}`,
           borderRadius: theme.cornerRadius,
           marginBottom: 16,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
         }}
       >
-        <span style={{ fontWeight: 600 }}>Total</span>
-        <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(c.totalAmount)}</span>
+        <DiscountSummaryLines
+          subTotal={c.subTotal}
+          discountAmount={c.coupon.discountAmount}
+          appliedCoupons={c.coupon.appliedCoupons}
+          fmt={fmt}
+        />
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <span style={{ fontWeight: 600 }}>Total</span>
+          <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(c.totalAmount)}</span>
+        </div>
       </div>
       <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
         {secondary ? (