@tribe-nest/forge 2.2.0 → 3.4.0

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 ? (

package/src/ui/styled/SignupForm.tsx

@@ -52,51 +52,102 @@ export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode
 
   return (
     <div style={card}>
-      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Create your account</h1>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>
+        {form.awaitingCode ? "Check your email" : "Create your account"}
+      </h1>
       {form.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{form.error}</p>}
       <form
         onSubmit={(e) => {
           e.preventDefault();
-          form.submit();
+          // Signup is two steps: create, then redeem the emailed code.
+          if (form.awaitingCode) form.submitCode();
+          else form.submit();
         }}
         style={{ display: "flex", flexDirection: "column", gap: 16 }}
       >
-        <div style={{ display: "flex", gap: 12 }}>
-          {field(
-            "First name",
-            <input value={form.firstName} onChange={(e) => form.setFirstName(e.target.value)} style={input} placeholder="First name" />,
-          )}
-          {field(
-            "Last name",
-            <input value={form.lastName} onChange={(e) => form.setLastName(e.target.value)} style={input} placeholder="Last name" />,
-          )}
-        </div>
-        {field(
-          "Email",
-          <input type="email" value={form.email} onChange={(e) => form.setEmail(e.target.value)} style={input} placeholder="Email" />,
+        {form.awaitingCode ? (
+          <>
+            <p style={{ fontSize: 14, margin: 0 }}>
+              We emailed a 6-digit code to <strong>{form.email}</strong>. Enter it to finish creating your account.
+            </p>
+            {field(
+              "Verification code",
+              <input
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                value={form.code}
+                onChange={(e) => form.setCode(e.target.value)}
+                style={input}
+                placeholder="123456"
+              />,
+            )}
+          </>
+        ) : (
+          <>
+            <div style={{ display: "flex", gap: 12 }}>
+              {field(
+                "First name",
+                <input
+                  value={form.firstName}
+                  onChange={(e) => form.setFirstName(e.target.value)}
+                  style={input}
+                  placeholder="First name"
+                />,
+              )}
+              {field(
+                "Last name",
+                <input
+                  value={form.lastName}
+                  onChange={(e) => form.setLastName(e.target.value)}
+                  style={input}
+                  placeholder="Last name"
+                />,
+              )}
+            </div>
+            {field(
+              "Email",
+              <input
+                type="email"
+                value={form.email}
+                onChange={(e) => form.setEmail(e.target.value)}
+                style={input}
+                placeholder="Email"
+              />,
+            )}
+            {field(
+              "Password",
+              <input
+                type="password"
+                value={form.password}
+                onChange={(e) => form.setPassword(e.target.value)}
+                style={input}
+                placeholder="At least 8 characters"
+              />,
+            )}
+            <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13 }}>
+              <input
+                type="checkbox"
+                checked={form.acceptedTerms}
+                onChange={(e) => form.setAcceptedTerms(e.target.checked)}
+                style={{ accentColor: theme.colors.primary }}
+              />
+              I accept the Terms and Privacy Policy
+            </label>
+          </>
         )}
-        {field(
-          "Password",
-          <input
-            type="password"
-            value={form.password}
-            onChange={(e) => form.setPassword(e.target.value)}
-            style={input}
-            placeholder="At least 8 characters"
-          />,
-        )}
-        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13 }}>
-          <input
-            type="checkbox"
-            checked={form.acceptedTerms}
-            onChange={(e) => form.setAcceptedTerms(e.target.checked)}
-            style={{ accentColor: theme.colors.primary }}
-          />
-          I accept the Terms and Privacy Policy
-        </label>
         <button type="submit" disabled={form.isSubmitting} style={button}>
-          {form.isSubmitting ? "Creating account…" : "Sign up"}
+          {form.isSubmitting ? "Working…" : form.awaitingCode ? "Verify and continue" : "Sign up"}
         </button>
+        {form.awaitingCode && (
+          <button
+            type="button"
+            onClick={() => form.resendCode()}
+            disabled={form.isSubmitting}
+            style={{ background: "none", border: "none", color: theme.colors.primary, cursor: "pointer", fontSize: 13 }}
+          >
+            Resend code
+          </button>
+        )}
       </form>
       <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
         Already have an account?{" "}