@tribe-nest/forge 3.22.0 → 3.23.0

package/src/ui/shell/diagnosticsGating.ts

@@ -65,13 +65,13 @@ const WHAT_LABEL: Record<string, string> = {
 
 /** Human copy for the banner. Pure — no React, no formatting concerns. */
 export function previewDiagnosticsMessage(d: ForgeSsrDiagnostics): PreviewDiagnosticsMessage {
-  const details = d.failures.map((f) => `Couldn't load the ${WHAT_LABEL[f.what] ?? f.what} — ${f.error}.`);
+  const details = d.failures.map((f) => `Couldn't load the ${WHAT_LABEL[f.what] ?? f.what}: ${f.error}.`);
 
   if (d.probe) {
     details.push(
       d.probe.ok
         ? `The API answered ${d.probe.url} in ${d.probe.ms}ms, so this looks like a per-route failure rather than a network one.`
-        : `Couldn't reach ${d.probe.url} either — ${d.probe.error ?? `HTTP ${d.probe.status}`} after ${d.probe.ms}ms. This preview has no route to the API.`,
+        : `Couldn't reach ${d.probe.url} either: ${d.probe.error ?? `HTTP ${d.probe.status}`} after ${d.probe.ms}ms. This preview has no route to the API.`,
     );
   }
   if (d.apiUrl) details.push(`API: ${d.apiUrl}`);
@@ -84,7 +84,7 @@ export function previewDiagnosticsMessage(d: ForgeSsrDiagnostics): PreviewDiagno
     // The sentence that would have saved the debugging session this was built
     // after: the defaults on screen are a symptom, not the setting.
     consequence:
-      "You're seeing Forge's default theme (white background, purple accent) and empty content because the data never arrived — not because of how your site is configured. Your published site is unaffected.",
+      "You're seeing Forge's default theme (white background, purple accent) and empty content because the data never arrived, not because of how your site is configured. Your published site is unaffected.",
     details,
   };
 }

package/src/ui/styled/AccountDashboard.tsx

@@ -227,6 +227,7 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const { formatAmount, formatDate, currency, onNavigateMembership } = ctx;
   const cancelMembership = useCancelMembership();
   const [isCancelling, setIsCancelling] = useState(false);
+  const [cancelError, setCancelError] = useState<string | null>(null);
 
   const membership = user?.membership;
   // Two separate questions, deliberately answered separately:
@@ -238,12 +239,20 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const openBillingPortal = useOpenBillingPortal();
   const [billingError, setBillingError] = useState<string | null>(null);
 
+  // A failure here used to be swallowed whole: the button said "Cancelling…",
+  // then said "Cancel" again, and the member was never told anything. That is
+  // how a free-tier member — whose cancel the server rejected outright — could
+  // press this forever with no effect and no explanation.
   const onCancel = async () => {
     if (!membership?.id) return;
+    setCancelError(null);
     setIsCancelling(true);
     try {
       await cancelMembership.mutateAsync({ membershipId: membership.id });
       window.location.reload();
+    } catch (error) {
+      const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      setCancelError(detail || "We couldn't cancel your membership. Please try again or contact us.");
     } finally {
       setIsCancelling(false);
     }
@@ -302,6 +311,11 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
             </p>
           )}
           {billingError && <p style={{ fontSize: 13, opacity: 0.9 }}>{billingError}</p>}
+          {cancelError && (
+            <p role="alert" style={{ fontSize: 13, opacity: 0.9, color: t.primary }}>
+              {cancelError}
+            </p>
+          )}
         </div>
       ) : (
         <p style={{ opacity: 0.8 }}>You don&apos;t have an active membership.</p>
@@ -315,8 +329,9 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
         )}
         {/* Cancelling stays available for anyone who still HAS access — a
             past_due member must not be trapped in a subscription they can see
-            but not leave. */}
-        {access.hasAccess && (
+            but not leave. Hidden once it is already scheduled ("Ending"), where
+            the only honest label would be "Cancel again". */}
+        {access.hasAccess && !access.cancelAtPeriodEnd && (
           <button onClick={onCancel} disabled={isCancelling} style={ghostButton}>
             {isCancelling ? "Cancelling…" : "Cancel"}
           </button>
@@ -625,7 +640,7 @@ function WaitlistPlaceRow({
             fontSize: 14,
           }}
         >
-          <strong>Buy within {formatCountdown(place.offer.secondsRemaining ?? 0)}</strong> — your offer closes{" "}
+          <strong>Buy within {formatCountdown(place.offer.secondsRemaining ?? 0)}.</strong> Your offer closes{" "}
           {deadline.toLocaleString(undefined, {
             weekday: "short",
             day: "numeric",
@@ -721,7 +736,60 @@ function formatSessionWindow(booking: MyBooking): string {
   });
   const from = start.toLocaleString(undefined, { hour: "numeric", minute: "2-digit", timeZone: zone });
   const to = end.toLocaleString(undefined, { hour: "numeric", minute: "2-digit", timeZone: zone });
-  return `${day}, ${from} – ${to}${zone ? ` (${zone})` : ""}`;
+  return `${day}, ${from} to ${to}${zone ? ` (${zone})` : ""}`;
+}
+
+/**
+ * WHERE the session is — the line this portal existed without.
+ *
+ * A client who bought a coaching call could see the time, the price and an
+ * add-to-calendar button, and nothing at all about how to attend; the answer
+ * arrived, if it arrived, in a separate email from the coach.
+ *
+ * The two kinds are not interchangeable, so they do not render the same. An
+ * online session's link is an anchor — at 9:59 for a 10:00 call it is the only
+ * thing on this row anyone wants — shown in full rather than as the word "Join",
+ * because the client may be reading this on a phone and about to type it into
+ * a laptop. An in-person address is plain text: it is the coach's own words,
+ * often "Studio B, ring the buzzer" rather than anything a maps provider could
+ * resolve, and linking it would guess at something they did not say.
+ *
+ * `location` is already resolved server-side (booking override over product
+ * default) and is null unless the session is confirmed, so there is no rule to
+ * apply here — which is the same discipline `canReschedule` follows two blocks
+ * down.
+ */
+function BookingLocationLine({
+  location,
+  primary,
+}: {
+  location: MyBooking["location"];
+  primary: string;
+}) {
+  if (!location) return null;
+
+  if (location.type === "online") {
+    return (
+      <div style={{ fontSize: 13, marginTop: 4 }}>
+        <span style={{ opacity: 0.7 }}>Join: </span>
+        <a
+          href={location.url}
+          target="_blank"
+          rel="noreferrer"
+          style={{ color: primary, textDecoration: "underline", wordBreak: "break-all" }}
+        >
+          {location.url}
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
+      <span style={{ fontWeight: 600 }}>Where: </span>
+      {location.address}
+    </div>
+  );
 }
 
 function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
@@ -773,6 +841,7 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
           {booking.coachingProductDurationMinutes != null && (
             <div style={{ fontSize: 13, opacity: 0.7 }}>{booking.coachingProductDurationMinutes} minutes</div>
           )}
+          <BookingLocationLine location={booking.location} primary={t.primary} />
         </div>
         <div style={{ textAlign: "right" }}>
           {cancelled && <div style={{ fontSize: 13, color: t.primary }}>Cancelled</div>}

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

@@ -13,6 +13,7 @@ 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`. */
@@ -798,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,
@@ -812,19 +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
@@ -897,25 +899,16 @@ function PaymentSection({
       {/* 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 && !paymentSecret && !isHoldExpired && <Loading label="Preparing payment…" size={22} />}
+      {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 && (
@@ -975,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 && (

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/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

@@ -211,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/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,
               )}`