@tribe-nest/forge 3.21.0 → 3.23.0

package/src/ui/styled/AddToCalendar.tsx

@@ -17,9 +17,30 @@ export interface AddToCalendarProps extends AddToCalendarInput {
 }
 
 /**
- * "Add to calendar" — deep links that prefill Google / Outlook / Microsoft 365
- * with the event, plus an `.ics` download when the host supplies one (that is
- * the Apple Calendar route; there is no Apple web endpoint to link to).
+ * "Add to calendar" — deep links that prefill Google / Outlook / Microsoft 365,
+ * plus the two Apple-shaped options once the host supplies the platform's
+ * `.ics` address.
+ *
+ * ## Why Apple needs two entries and the others need none
+ *
+ * Google and Microsoft publish TEMPLATE URLs: the whole event travels in the
+ * query string and no server is involved. Apple publishes nothing of the kind —
+ * Calendar takes a FILE. So for as long as this component had no `.ics` to
+ * point at, an iPhone user had no option at all, which is precisely the state
+ * the product shipped in.
+ *
+ *  - **Apple Calendar** → `webcal://`. The scheme is what iOS and macOS route
+ *    to the Calendar app; it must be a plain same-window navigation, so it
+ *    carries neither `target="_blank"` (the OS handler, not a tab) nor
+ *    `download` (there is no file to save — the OS is opening an app).
+ *  - **Download .ics** → the https address, with `download`. Outlook desktop,
+ *    Thunderbird, Android calendar apps and anyone who would simply rather have
+ *    the file.
+ *
+ * Both are offered because `webcal:` has no handler on much of the desktop web,
+ * and a lone Apple button on Windows is a dead link. Neither appears at all
+ * when the host passes no URL — a site pinned to an older API build degrades to
+ * exactly the three-provider row it had before.
  *
  * Purely presentational: every URL comes from `useAddToCalendar`. Renders
  * nothing at all when the start time is missing or unparseable.
@@ -38,12 +59,14 @@ export function AddToCalendar({
 
   const compact = variant === "compact";
 
-  const options: { key: string; text: string; href: string; download?: boolean }[] = [
-    { key: "google", text: "Google", href: links.google },
-    { key: "outlook", text: "Outlook", href: links.outlook },
-    { key: "office365", text: "Microsoft 365", href: links.office365 },
+  const options: { key: string; text: string; href: string; download?: boolean; newTab?: boolean }[] = [
+    { key: "google", text: "Google", href: links.google, newTab: true },
+    { key: "outlook", text: "Outlook", href: links.outlook, newTab: true },
+    { key: "office365", text: "Microsoft 365", href: links.office365, newTab: true },
   ];
-  if (links.ics) options.push({ key: "ics", text: "Apple / .ics", href: links.ics, download: true });
+  // Apple first among the file-based options: it is the one a phone will use.
+  if (links.webcal) options.push({ key: "apple", text: "Apple Calendar", href: links.webcal });
+  if (links.ics) options.push({ key: "ics", text: "Download .ics", href: links.ics, download: true });
 
   const chip: React.CSSProperties = {
     display: "inline-flex",
@@ -89,8 +112,9 @@ export function AddToCalendar({
           <a
             key={o.key}
             href={o.href}
-            target="_blank"
-            rel="noopener noreferrer"
+            // `webcal:` hands off to the OS — a new tab would leave a blank one
+            // behind, and `rel` is meaningless for a non-http scheme.
+            {...(o.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}
             data-testid={`add-to-calendar-${o.key}`}
             {...(o.download ? { download: "" } : {})}
             style={chip}

package/src/ui/styled/AudioPlayer.tsx

@@ -77,7 +77,7 @@ export function AudioPlayer({ hideWhenEmpty = true, fixed = true }: AudioPlayerP
       <div style={{ flex: 1, minWidth: 0 }}>
         <div style={{ fontWeight: 600, fontSize: 14, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
           {a.currentTrack?.title ?? "Nothing playing"}
-          {a.currentTrack?.artist ? ` — ${a.currentTrack.artist}` : ""}
+          {a.currentTrack?.artist ? ` · ${a.currentTrack.artist}` : ""}
         </div>
         <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, opacity: 0.8 }}>
           <span>{fmtTime(a.currentTime)}</span>

package/src/ui/styled/BundleConfirmation.tsx

@@ -105,7 +105,7 @@ export function BundleConfirmation({
           <WarnSeal icon={<Clock size={28} />} />
           <h1 style={{ fontSize: 22, fontWeight: 800, margin: "12px 0 6px" }}>Payment received</h1>
           <p style={{ opacity: 0.75, marginBottom: 20 }}>
-            Your payment went through and part of your order is confirmed. We&apos;re still finishing the rest — it
+            Your payment went through and part of your order is confirmed. We&apos;re still finishing the rest. It
             will arrive by email shortly, with nothing more to pay.
           </p>
           <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>

package/src/ui/styled/Checkout.tsx

@@ -12,6 +12,8 @@ import { usePricesIncludeTax } from "../../data/queries/useWebsite";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { Loading } from "./Loading";
 import { CartLineOptions } from "./CartLineOptions";
+import { HoldNotice } from "./HoldNotice";
+import { PaystackPayButton } from "./PaystackPayButton";
 
 export interface CheckoutProps {
   /** Path used to build the post-payment return URL. Defaults to `/checkout/finalise`. */
@@ -797,11 +799,16 @@ export function Checkout({
 
 // ── Payment section ───────────────────────────────────────────────────────────
 /**
- * The payment stage. The order + payment-intent are created by `useCheckout`
- * (on entering this stage); here we only render the resolved provider UI —
- * Stripe via the registered `<ForgePaymentProvider>` renderer, Paystack via a
- * redirect button (the flow also auto-redirects). Re-keyed on the client secret
- * so a coupon that re-issues the intent remounts the form against the latest one.
+ * The payment stage. The order + charge are created by `useCheckout` (on
+ * entering this stage); here we only render the resolved provider UI: Stripe
+ * via the registered `<ForgePaymentProvider>` renderer, Paystack via a pay
+ * button that opens its inline modal ON THIS PAGE. Re-keyed on the client
+ * secret so a coupon that re-issues the intent remounts the form against the
+ * latest one.
+ *
+ * The buyer never leaves the creator's site on either provider now. Nothing
+ * happens on mount: the modal is opened by the button, so a buyer still reading
+ * the summary is not interrupted, and one who closes it can press it again.
  */
 function PaymentSection({
   checkout,
@@ -811,18 +818,15 @@ function PaymentSection({
   onBack?: () => void;
 }) {
   const theme = useForgeTheme();
-  const { formatCurrency } = useFormatCurrency();
   const renderPay = usePaymentRenderer();
   const { paymentSecret, chargedAmount, chargedCurrency, returnUrl, isPaystack, isCreatingOrder, startError } = checkout;
+  const { canOpenPaystack, openPaystackCheckout } = checkout;
+  const { hold, holdExpiredError, isHoldExpired, retryHold, isRetryingHold } = checkout;
 
-  // Paystack has no in-app form — send the buyer to the hosted checkout as soon
-  // as the redirect URL (paymentSecret) is ready. The button below is a manual
-  // fallback in case the automatic redirect is blocked (e.g. a pop-up blocker).
-  useEffect(() => {
-    if (isPaystack && paymentSecret && typeof window !== "undefined") {
-      window.location.href = paymentSecret;
-    }
-  }, [isPaystack, paymentSecret]);
+  // "There is something to pay with", whichever provider answered: Stripe's
+  // secret or Paystack's session. Used only to decide whether the preparing
+  // spinner is still honest.
+  const hasCharge = isPaystack ? canOpenPaystack : !!paymentSecret;
 
   const backButton = onBack ? (
     <button
@@ -880,25 +884,31 @@ function PaymentSection({
         </p>
       )}
 
-      {isCreatingOrder && !paymentSecret && <Loading label="Preparing payment…" size={22} />}
+      {/* The reservation — a countdown while it runs, and at zero (or on a 409)
+          the lapsed state with the retry that re-acquires the same units.
+          Renders nothing at all when no hold was taken, which is the ordinary
+          case for the profiles that have inventory holds switched off. */}
+      <HoldNotice
+        hold={hold}
+        expiredMessage={holdExpiredError || undefined}
+        onRetry={retryHold}
+        isRetrying={isRetryingHold}
+        secondaryAction={onBack ? { label: "Change your order", onClick: onBack } : undefined}
+      />
+
+      {/* Suppressed once the server has refused: there is no intent coming, so a
+          "Preparing payment…" spinner would sit there forever under a notice
+          that has already explained what happened. */}
+      {isCreatingOrder && !hasCharge && !isHoldExpired && <Loading label="Preparing payment…" size={22} />}
 
       {isPaystack
-        ? paymentSecret &&
-          !!chargedAmount && (
-            <button
-              type="button"
-              onClick={() => {
-                window.location.href = paymentSecret;
-              }}
-              className="w-full px-4 py-3 font-semibold"
-              style={{
-                backgroundColor: theme.colors.primary,
-                color: readableTextOn(theme.colors.primary),
-                borderRadius: `${theme.cornerRadius}px`,
-              }}
-            >
-              {`Pay ${formatCurrency(chargedAmount, chargedCurrency || undefined)} Now`}
-            </button>
+        ? canOpenPaystack && (
+            <PaystackPayButton
+              onPay={openPaystackCheckout}
+              amount={chargedAmount}
+              currency={chargedCurrency || undefined}
+              disabled={isHoldExpired}
+            />
           )
         : paymentSecret &&
           renderPay && (
@@ -958,7 +968,7 @@ function ShippingRateSelector({
             >
               <div>
                 <span className="text-sm font-medium" style={{ color: theme.colors.text }}>
-                  {group.rates[0].carrier} — {group.rates[0].service}
+                  {group.rates[0].carrier} · {group.rates[0].service}
                 </span>
                 {group.rates[0].estimatedDays != null && (
                   <span className="text-xs ml-2" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>

package/src/ui/styled/CheckoutConfirmation.tsx

@@ -215,10 +215,10 @@ function OrderConfirmation({
       ? `We’ve emailed your receipt to ${email}.`
       : "Your receipt is on its way."
     : isFailed
-      ? "Your payment didn’t go through — you haven’t been charged. You can try again."
+      ? "Your payment didn’t go through, so you haven’t been charged. You can try again."
       : gaveUp
         ? "This is taking longer than usual. We’ll email your receipt as soon as it clears."
-        : "Hang tight — this only takes a few seconds.";
+        : "Hang tight: this only takes a few seconds.";
 
   return (
     <ConfirmationStage>

package/src/ui/styled/CoachingBooking.tsx

@@ -6,6 +6,7 @@ import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
@@ -283,7 +284,7 @@ function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; f
     }
   })();
 
-  const weekLabel = `${c.weekStart.toLocaleDateString("en-US", { month: "short", day: "numeric" })} – ${c.weekEnd.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
+  const weekLabel = `${c.weekStart.toLocaleDateString("en-US", { month: "short", day: "numeric" })} to ${c.weekEnd.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
   const navButton = (disabled: boolean): CSSProperties => ({
     padding: 8,
     borderRadius: theme.cornerRadius,
@@ -545,7 +546,15 @@ function PaymentStep({
           the money moves, and a policy read three clicks earlier is not a policy
           read before committing. */}
       <CancellationTerms terms={c.cancellation} style={{ marginBottom: 16 }} />
-      {!renderPayment ? (
+      {/* Paystack needs no registered renderer at all (it has its own modal),
+          so it is checked BEFORE the "not configured" branch. */}
+      {c.isPaystack ? (
+        c.canOpenPaystack ? (
+          <PaystackPayButton onPay={c.openPaystackCheckout} label={`Pay ${fmt(total)}`} />
+        ) : (
+          <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+        )
+      ) : !renderPayment ? (
         <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
       ) : c.clientSecret ? (
         renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: total, mode: "redirect" })

package/src/ui/styled/CoachingConfirmation.tsx

@@ -79,7 +79,7 @@ export function CoachingConfirmation({
       <ConfirmationStage>
         <ConfirmationLostCheckout
           title="We can’t confirm your booking in this browser"
-          body="Confirming a booking needs the checkout details saved in the tab you started in — and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your confirmation email, so check your inbox before booking again. Otherwise, pick a new time and start over."
+          body="Confirming a booking needs the checkout details saved in the tab you started in, and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your confirmation email, so check your inbox before booking again. Otherwise, pick a new time and start over."
           restartPath={restartPath ?? `/i/coaching/${slug}`}
           restartLabel="Pick a new time"
         />
@@ -123,7 +123,7 @@ export function CoachingConfirmation({
             style={{ fontSize: 15, lineHeight: 1.5, color: alpha(text, 0.7), margin: "0 auto", maxWidth: 340, animationDelay: "0.3s" }}
           >
             {confirmed
-              ? `Nice one${data?.firstName ? `, ${data.firstName}` : ""} — your session is confirmed. We’ve sent the details to ${data?.email ?? "your inbox"}.`
+              ? `Nice one${data?.firstName ? `, ${data.firstName}` : ""}. Your session is confirmed. We’ve sent the details to ${data?.email ?? "your inbox"}.`
               : `Your booking is currently ${data?.status ?? "unresolved"}. If you were charged, reach out and we’ll sort it right away.`}
           </p>
         </div>
@@ -139,7 +139,7 @@ export function CoachingConfirmation({
                 <ConfirmationRow label="Session" value={formatSession(data.sessionStartTime)} accent strong />
               )}
               {data.durationMinutes ? <ConfirmationRow label="Duration" value={`${data.durationMinutes} minutes`} /> : null}
-              <ConfirmationRow label="Guest" value={`${data.firstName} ${data.lastName}`.trim() || "—"} />
+              <ConfirmationRow label="Guest" value={`${data.firstName} ${data.lastName}`.trim() || "Not given"} />
               <ConfirmationRow label="Email" value={data.email} />
               <ConfirmationRow label="Reference" value={`#${data.id.slice(0, 8).toUpperCase()}`} mono />
               {Number(data.taxAmount || 0) > 0 && !data.taxInclusive && (
@@ -173,6 +173,10 @@ export function CoachingConfirmation({
               start={data.sessionStartTime}
               end={data.sessionEndTime}
               defaultDurationMinutes={data.durationMinutes ?? undefined}
+              // The finalise response carries these only for a CONFIRMED
+              // booking, which is the same condition this block renders under.
+              icsUrl={data.calendarUrl}
+              webcalUrl={data.calendarWebcalUrl}
               style={{ marginTop: 18 }}
             />
           )}

package/src/ui/styled/CohortPage.tsx

@@ -34,7 +34,7 @@ export function CohortPage({ cohortId }: CohortPageProps) {
       {(cohort.startDate || cohort.endDate) && (
         <p style={{ opacity: 0.7, marginBottom: 16 }}>
           {cohort.startDate ? formatDate(cohort.startDate) : "TBD"}
-          {cohort.endDate ? ` – ${formatDate(cohort.endDate)}` : ""}
+          {cohort.endDate ? ` to ${formatDate(cohort.endDate)}` : ""}
         </p>
       )}
       {cohort.description && <p style={{ marginBottom: 24, lineHeight: 1.6 }}>{cohort.description}</p>}

package/src/ui/styled/ContactForm.tsx

@@ -11,7 +11,7 @@ export interface ContactFormProps {
 /** One-line themed website contact form, built on `useContactForm`. */
 export function ContactForm({
   buttonText = "Send Message",
-  successMessage = "Message sent — we'll be in touch.",
+  successMessage = "Message sent. We'll be in touch.",
   showJoinEmailList = true,
 }: ContactFormProps) {
   const theme = useForgeTheme();

package/src/ui/styled/CourseCheckout.tsx

@@ -6,6 +6,7 @@ import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { summarizeTaxQuote } from "../format/PriceDisplay";
 import { Loading } from "./Loading";
+import { PaystackPayButton } from "./PaystackPayButton";
 import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
 import { buttonStyle } from "./Button";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
@@ -354,7 +355,15 @@ function PaymentStep({
         </span>
         </div>
       </div>
-      {!renderPayment ? (
+      {/* Paystack needs no registered renderer at all (it has its own modal),
+          so it is checked BEFORE the "not configured" branch. */}
+      {c.isPaystack ? (
+        c.canOpenPaystack ? (
+          <PaystackPayButton onPay={c.openPaystackCheckout} label={`Pay ${fmt(amount)}`} />
+        ) : (
+          <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+        )
+      ) : !renderPayment ? (
         <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
       ) : c.clientSecret ? (
         renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount, mode: "redirect" })

package/src/ui/styled/CourseConfirmation.tsx

@@ -71,7 +71,7 @@ export function CourseConfirmation({
         <ConfirmationStage>
           <ConfirmationLostCheckout
             title="We can’t confirm your enrollment in this browser"
-            body="Confirming an enrollment needs the checkout details saved in the tab you started in — and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your enrollment email, so check your inbox before paying again. Otherwise, start the enrollment over."
+            body="Confirming an enrollment needs the checkout details saved in the tab you started in, and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your enrollment email, so check your inbox before paying again. Otherwise, start the enrollment over."
             restartPath={restartPath ?? `/i/courses/${slug}`}
             restartLabel="Start over"
           />
@@ -177,7 +177,7 @@ export function CourseConfirmation({
             </div>
           )}
           <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 12, columnGap: 16, margin: 0 }}>
-            <ConfirmationRow label="Student" value={`${data.firstName} ${data.lastName}`.trim() || "—"} />
+            <ConfirmationRow label="Student" value={`${data.firstName} ${data.lastName}`.trim() || "Not given"} />
             <ConfirmationRow label="Reference" value={`#${data.id.slice(0, 8).toUpperCase()}`} mono />
             {Number(data.taxAmount || 0) > 0 && !data.taxInclusive && (
               <ConfirmationRow label="Tax" value={fmt(Number(data.taxAmount), data.chargedCurrency || undefined)} />

package/src/ui/styled/CourseDetail.tsx

@@ -1,5 +1,6 @@
 import type { PublicCourse } from "../../types/models";
 import { useGetCourse } from "../../data/queries/useCourses";
+import { MembershipGateNotice } from "./MembershipGateNotice";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
@@ -23,6 +24,10 @@ export interface CourseDetailProps {
   finalisePath?: (slug: string, bookingId: string) => string;
   /** Host-owned navigation on FREE completion (forwarded to the enroll flow). */
   onComplete?: (info: { slug: string; bookingId: string }) => void;
+  /** Where a members-only course sends a signed-OUT visitor. Default `/login`. */
+  loginPath?: string;
+  /** Where a members-only course sends a signed-in NON-member. Default `/membership`. */
+  membershipPath?: string;
 }
 
 export function CourseDetail({
@@ -33,6 +38,8 @@ export function CourseDetail({
   initialCourse,
   finalisePath,
   onComplete,
+  loginPath,
+  membershipPath,
 }: CourseDetailProps) {
   const t = useThemeTokens();
   const fmt = useAmountFormatter(formatAmount);
@@ -42,6 +49,11 @@ export function CourseDetail({
   if (isLoading) return <Loading fullPage />;
   if (!course) return <p>Course not found.</p>;
 
+  /**
+   * Members-only course (S.4). Announced by the detail read, which is why the
+   * page can say so BEFORE the buyer opens a checkout that would refuse them.
+   */
+  const isGated = !!course.membershipGate && !course.membershipGate.allowed;
   const cover = course.media?.find((m) => m.type === "image")?.url ?? course.media?.[0]?.url;
   const introVideo = course.media?.find((m) => m.type === "video")?.url;
   const modules = course.modules ?? [];
@@ -129,7 +141,24 @@ export function CourseDetail({
               <PriceDisplay amount={Number(course.price)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
             )}
           </span>
-          <CourseCheckout slug={slug} formatAmount={fmt} finalisePath={finalisePath} onComplete={onComplete} />
+          {/*
+            A live gate locks the course even for someone who already bought it —
+            "this course is part of Gold" is a CONDITION for access, not a
+            one-off unlock — so a lapsed member lands here too and needs the way
+            back in, not a purchase button that will be refused.
+           */}
+          {isGated ? (
+            <MembershipGateNotice
+              gate={course.membershipGate}
+              variant="card"
+              itemLabel="This course"
+              loginPath={loginPath}
+              membershipPath={membershipPath}
+              style={{ padding: 0, border: "none", background: "transparent" }}
+            />
+          ) : (
+            <CourseCheckout slug={slug} formatAmount={fmt} finalisePath={finalisePath} onComplete={onComplete} />
+          )}
         </aside>
       </div>
 

package/src/ui/styled/DiscountCode.tsx

@@ -129,7 +129,7 @@ export function DiscountCodeField({
           <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
+                {c.code} · {fmt(c.discountAmount)} off
               </p>
             ))}
           </div>

package/src/ui/styled/EmailListForm.tsx

@@ -39,7 +39,7 @@ export function EmailListForm({
   if (f.isSuccess) {
     return (
       <div style={{ color: theme.colors.text, fontFamily: theme.fontFamily, textAlign: "center", padding: 8 }}>
-        {f.requiresConfirmation ? "Almost there — check your email to confirm." : successMessage}
+        {f.requiresConfirmation ? "Almost there: check your email to confirm." : successMessage}
       </div>
     );
   }

package/src/ui/styled/EventConfirmation.tsx

@@ -148,6 +148,8 @@ export function EventConfirmation({
               end={event.endDateTime}
               description={event.description}
               location={location}
+              icsUrl={event.calendarUrl}
+              webcalUrl={event.calendarWebcalUrl}
               style={{ marginTop: 12 }}
             />
           )}
@@ -209,7 +211,7 @@ export function EventConfirmation({
           )}
 
           <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="Guest" value={`${order.firstName} ${order.lastName}`.trim() || "Not given"} />
             <ConfirmationRow label="Reference" value={`#${order.id.slice(0, 8).toUpperCase()}`} mono />
           </dl>
         </div>

package/src/ui/styled/EventDetail.tsx

@@ -1,6 +1,6 @@
 import { Calendar, MapPin } from "lucide-react";
 import type { IEvent } from "../../types/models";
-import { useEvent } from "../../data/queries/useEvents";
+import { usePresaleCode } from "../headless/event/usePresaleCode";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { PriceDisplay } from "../format/PriceDisplay";
@@ -11,6 +11,7 @@ import { EventTickets } from "./EventTickets";
 import { EventCountdown } from "./EventCountdown";
 import { EventWaitlist } from "./EventWaitlist";
 import { AddToCalendar } from "./AddToCalendar";
+import { PresaleCodeField } from "./PresaleCode";
 
 export interface EventDetailProps {
   /** Event slug (resolves the event). */
@@ -59,7 +60,11 @@ export function EventDetail({
   const t = useThemeTokens();
   const fmt = useAmountFormatter(formatAmount);
   const pricesIncludeTax = usePricesIncludeTax();
-  const { data: event, isLoading } = useEvent(slug, { initialData: initialEvent });
+  // Read the event THROUGH the presale field: it is the same query, fetched
+  // with whatever code this buyer has applied, so `tickets` below already
+  // contains the tiers that code unlocked.
+  const presale = usePresaleCode(slug, { initialEvent });
+  const { event, isLoading } = presale;
 
   if (isLoading) return <Loading fullPage />;
   if (!event) return <p>Event not found.</p>;
@@ -116,6 +121,11 @@ export function EventDetail({
               end={event.endDateTime}
               description={event.description}
               location={locationText}
+              // The platform's own `.ics`, which is what makes an Apple option
+              // possible at all. Absent on an older API build, in which case
+              // the control quietly falls back to the three template providers.
+              icsUrl={event.calendarUrl}
+              webcalUrl={event.calendarWebcalUrl}
               style={{ marginTop: 16 }}
             />
           )}
@@ -133,7 +143,12 @@ export function EventDetail({
           <EventWaitlist event={event} style={{ marginTop: 24 }} />
         </div>
 
-        {event.tickets.length > 0 && (
+        {/* The card also appears for an event with NO visible tickets when a
+            presale is the only thing on sale (1.2). Every tier hidden behind a
+            code makes `tickets` empty, so gating the card on the tier list alone
+            left a presale-only event with no box, no button and nothing to do —
+            which is the shape most presales are announced in. */}
+        {(event.tickets.length > 0 || presale.visible) && (
           <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={{
@@ -143,27 +158,43 @@ export function EventDetail({
               background: t.surface,
             }}
           >
-            <span style={{ fontWeight: 600 }}>
-              From{" "}
-              <PriceDisplay amount={minPrice} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
-            </span>
-            {/* The cheapest tier is the number a buyer anchors on, and until now
-                it was the whole story they were given — the artist's booking fee
-                was added at checkout and named nowhere. There is no selection
-                here, so there is no amount to quote; the RULE is what makes the
-                "From" figure honest. Renders nothing when no fee is charged. */}
-            {feeNote && (
-              <span data-testid="booking-fee-note" style={{ fontSize: 12, opacity: 0.65 }}>
-                {feeNote}
+            {/* Above the price, because on a presale-only event it is the only
+                way to reach one. Renders nothing on an event with no coded
+                tier. */}
+            <PresaleCodeField presale={presale} />
+            {event.tickets.length === 0 && (
+              <span style={{ fontSize: 13, opacity: 0.7 }}>
+                Tickets for this event are presale only.
               </span>
             )}
-            <EventTickets
-              slug={slug}
-              triggerText="Buy tickets"
-              formatAmount={fmt}
-              finalisePath={finalisePath}
-              onComplete={onComplete}
-            />
+            {event.tickets.length > 0 && (
+              <>
+                <span style={{ fontWeight: 600 }}>
+                  From{" "}
+                  <PriceDisplay amount={minPrice} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} inlineCaption />
+                </span>
+                {/* The cheapest tier is the number a buyer anchors on, and until
+                    now it was the whole story they were given — the artist's
+                    booking fee was added at checkout and named nowhere. There is
+                    no selection here, so there is no amount to quote; the RULE is
+                    what makes the "From" figure honest. Renders nothing when no
+                    fee is charged, and nothing at all with no price to qualify. */}
+                {feeNote && (
+                  <span data-testid="booking-fee-note" style={{ fontSize: 12, opacity: 0.65 }}>
+                    {feeNote}
+                  </span>
+                )}
+              </>
+            )}
+            {event.tickets.length > 0 && (
+              <EventTickets
+                slug={slug}
+                triggerText="Buy tickets"
+                formatAmount={fmt}
+                finalisePath={finalisePath}
+                onComplete={onComplete}
+              />
+            )}
           </aside>
         )}
       </div>

package/src/ui/styled/EventSeriesDetail.tsx

@@ -128,7 +128,7 @@ export function EventSeriesDetail({
         <span>
           {series.dateCount} dates
           {series.firstDateTime && series.lastDateTime
-            ? ` · ${formatDate(series.firstDateTime, series.events[0]?.timezone)} – ${formatDate(
+            ? ` · ${formatDate(series.firstDateTime, series.events[0]?.timezone)} to ${formatDate(
                 series.lastDateTime,
                 series.events[series.events.length - 1]?.timezone,
               )}`