@tribe-nest/forge 3.4.0 → 3.11.0

package/src/ui/styled/AccountDashboard.tsx

@@ -2,10 +2,24 @@ import { useEffect, useState } from "react";
 import {
   usePublicAuth,
   useUserOrders,
+  useMyTickets,
+  useCancelMyTicket,
+  myTicketPassIds,
+  type MyTicket,
+  useMyWaitlistPlaces,
+  useLeaveEventWaitlist,
+  type WaitlistPlace,
+  useMyBookings,
+  useRescheduleBooking,
+  useCancelMyBooking,
+  useCoachingAvailability,
+  type MyBooking,
   useSavedPosts,
   useNotificationPreferences,
   useUpdateNotificationPreference,
   useCancelMembership,
+  useMembershipAccess,
+  useOpenBillingPortal,
   useUpdateAccount,
   useChangePassword,
   useExportAccountData,
@@ -19,8 +33,25 @@ import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useSiteConfig } from "../../data/queries/useWebsite";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
+import { formatCountdown } from "./EventWaitlist";
+import { WalletPassButtons } from "./WalletPassButtons";
+import { TicketTransferPanel } from "./TicketTransfer";
 
-export const ACCOUNT_TABS = ["membership", "orders", "saved", "account", "notifications"] as const;
+export const ACCOUNT_TABS = [
+  "membership",
+  "orders",
+  "tickets",
+  // Next to tickets because it is the same question one step earlier: what am I
+  // holding for this artist's shows? (2.6)
+  "waitlist",
+  // Sessions bought from this artist (S.6 / bookings § 1.4). A booking is not an
+  // "order" — the Orders tab covers product orders only — so it needs its own
+  // tab or it is unreachable, which is what it was.
+  "bookings",
+  "saved",
+  "account",
+  "notifications",
+] as const;
 export type AccountTabKey = (typeof ACCOUNT_TABS)[number];
 
 export interface AccountDashboardProps {
@@ -175,6 +206,9 @@ export function AccountDashboard({
 
       {tab === "membership" && <MembershipTab ctx={ctx} />}
       {tab === "orders" && <OrdersTab ctx={ctx} />}
+      {tab === "tickets" && <TicketsTab ctx={ctx} />}
+      {tab === "waitlist" && <WaitlistTab ctx={ctx} />}
+      {tab === "bookings" && <BookingsTab ctx={ctx} />}
       {tab === "saved" && <SavedTab />}
       {tab === "account" && <AccountTab ctx={ctx} />}
       {tab === "notifications" && <NotificationsTab />}
@@ -192,7 +226,14 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   const [isCancelling, setIsCancelling] = useState(false);
 
   const membership = user?.membership;
-  const isActive = membership?.status === "active";
+  // Two separate questions, deliberately answered separately:
+  //   `access.hasAccess` → are the benefits live (true through past_due/grace)
+  //   `message`          → what the member is told, including a failed payment
+  // The old `status === "active"` answered both at once and got both wrong for
+  // anyone whose card bounced.
+  const { access, message } = useMembershipAccess();
+  const openBillingPortal = useOpenBillingPortal();
+  const [billingError, setBillingError] = useState<string | null>(null);
 
   const onCancel = async () => {
     if (!membership?.id) return;
@@ -205,6 +246,17 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
     }
   };
 
+  const onUpdatePayment = async () => {
+    setBillingError(null);
+    try {
+      const { url } = await openBillingPortal.mutateAsync({});
+      window.location.href = url;
+    } catch (error) {
+      const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      setBillingError(detail || "We couldn't open the billing page. Please contact us.");
+    }
+  };
+
   return (
     <div style={card}>
       <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>Current Membership</h2>
@@ -212,7 +264,19 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
         <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
           <div>
             <h3 style={{ fontWeight: 700 }}>{membership.membershipTier.name}</h3>
-            <p style={{ fontSize: 13, opacity: 0.7 }}>{isActive ? "Active" : "Cancelled"}</p>
+            <p
+              style={{
+                fontSize: 13,
+                opacity: 0.85,
+                fontWeight: message.tone === "warning" ? 700 : 400,
+                color: message.tone === "warning" ? t.primary : undefined,
+              }}
+            >
+              {message.label}
+            </p>
+            {message.detail && (
+              <p style={{ fontSize: 13, opacity: 0.8, marginTop: 4, maxWidth: 480 }}>{message.detail}</p>
+            )}
             {!!membership.subscriptionAmount && (
               <p style={{ fontSize: 14, marginTop: 4 }}>
                 {formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency)} / {membership.billingCycle}
@@ -231,16 +295,25 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
           )}
           {membership.endDate && (
             <p style={{ fontSize: 14, opacity: 0.8 }}>
-              {isActive ? "Renews" : "Ends"} on {formatDate(membership.endDate)}
+              {access.billingState === "active" ? "Renews" : "Ends"} on {formatDate(membership.endDate)}
             </p>
           )}
+          {billingError && <p style={{ fontSize: 13, opacity: 0.9 }}>{billingError}</p>}
         </div>
       ) : (
         <p style={{ opacity: 0.8 }}>You don&apos;t have an active membership.</p>
       )}
 
       <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24 }}>
-        {isActive && (
+        {message.showUpdatePayment && (
+          <button onClick={onUpdatePayment} disabled={openBillingPortal.isPending} style={button}>
+            {openBillingPortal.isPending ? "Opening…" : "Update payment method"}
+          </button>
+        )}
+        {/* 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 && (
           <button onClick={onCancel} disabled={isCancelling} style={ghostButton}>
             {isCancelling ? "Cancelling…" : "Cancel"}
           </button>
@@ -253,6 +326,571 @@ function MembershipTab({ ctx }: { ctx: TabContext }) {
   );
 }
 
+// ---- Tickets tab ------------------------------------------------------------
+
+/**
+ * The buyer's event tickets, and cancelling one inside the policy they were
+ * sold under (S.6).
+ *
+ * Before this, a ticket buyer had no purchase surface at all — the confirmation
+ * email and a one-shot finalise page were the only artefacts of the sale.
+ *
+ * Eligibility is NOT recomputed here. `cancellation.canCancel` and its reason
+ * come from the server, which reads the snapshot on the order; mirroring the
+ * date arithmetic in the UI would give two answers to the same question and the
+ * wrong one would be the one the buyer sees.
+ */
+function TicketsTab({ ctx }: { ctx: TabContext }) {
+  const { user } = usePublicAuth();
+  const { t, card } = useCardStyles();
+  const { formatAmount, formatDate, currency } = ctx;
+  const { data, isLoading } = useMyTickets(user?.id);
+  const cancelTicket = useCancelMyTicket();
+  const [pendingId, setPendingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const tickets = data?.data ?? [];
+
+  const onCancel = async (ticket: MyTicket) => {
+    setError(null);
+    setPendingId(ticket.id);
+    try {
+      await cancelTicket.mutateAsync({ orderId: ticket.id });
+    } catch (err) {
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        "We could not cancel this ticket. Please try again.";
+      setError(message);
+    } finally {
+      setPendingId(null);
+    }
+  };
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>My Tickets</h2>
+      {error && (
+        <div style={{ marginBottom: 16, padding: 12, borderRadius: t.cornerRadius, border: `1px solid ${t.primary}40`, fontSize: 14 }}>
+          {error}
+        </div>
+      )}
+      {isLoading ? (
+        <Loading />
+      ) : tickets.length > 0 ? (
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          {tickets.map((ticket) => {
+            const cancelled = !!ticket.selfCancelledAt;
+            return (
+              <div
+                key={ticket.id}
+                style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16, opacity: cancelled ? 0.6 : 1 }}
+              >
+                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, gap: 12 }}>
+                  <div>
+                    <div style={{ fontWeight: 600 }}>{ticket.eventTitle}</div>
+                    <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(ticket.eventDateTime)}</div>
+                  </div>
+                  {cancelled && <span style={{ fontSize: 13, color: t.primary }}>Cancelled</span>}
+                </div>
+
+                {ticket.items.map((item) => (
+                  <div key={item.id} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, padding: "4px 0" }}>
+                    <span>
+                      {item.ticketTitle ?? "Ticket"} × {item.quantity}
+                    </span>
+                    <span>{formatAmount(Number(item.price) * item.quantity, ticket.currency || currency)}</span>
+                  </div>
+                ))}
+
+                <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
+                  <span>Total</span>
+                  <span style={{ color: t.primary }}>{formatAmount(Number(ticket.totalAmount), ticket.currency || currency)}</span>
+                </div>
+
+                {/*
+                  Wallet passes (2.3). Renders NOTHING unless the API offers a
+                  real pass for a real pass id — which, with no signing
+                  credentials configured, is every ticket today. Deliberately
+                  not wrapped in a condition of its own: the component owns that
+                  decision, and a second copy of the rule here is how one of the
+                  two ends up out of date and leaks the feature's existence.
+
+                  Eligibility (cancelled order, rotating QR) is the server's
+                  call, exactly as it is for cancellation above.
+                */}
+                <WalletPassButtons passIds={myTicketPassIds(ticket)} variant="compact" style={{ marginTop: 12 }} />
+
+                {/*
+                  Transfer (2.2). The email a transfer sends points at
+                  `/i/tickets/claim`, so this affordance and that route ship
+                  together — a send with nowhere to land is undeliverable in
+                  practice.
+
+                  Renders nothing when the payload carries no `TN-…` pass ids
+                  (an older API build), because every pass-scoped endpoint would
+                  404. Whether THIS pass may be handed on is the server's call,
+                  answered on submit in its own words — not hidden behind a
+                  guess here.
+                */}
+                <TicketTransferPanel passIds={myTicketPassIds(ticket)} style={{ marginTop: 12 }} />
+
+                {/* The terms they agreed to, in the artist's own words where given. */}
+                {ticket.cancellation.description && (
+                  <div style={{ fontSize: 13, opacity: 0.75, marginTop: 12 }}>{ticket.cancellation.description}</div>
+                )}
+                {ticket.cancellation.terms && (
+                  <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{ticket.cancellation.terms}</div>
+                )}
+
+                {!cancelled && ticket.cancellation.canCancel && (
+                  <button
+                    onClick={() => void onCancel(ticket)}
+                    disabled={pendingId === ticket.id}
+                    style={{
+                      marginTop: 12,
+                      padding: "8px 14px",
+                      borderRadius: t.cornerRadius,
+                      border: `1px solid ${t.primary}40`,
+                      background: "transparent",
+                      color: t.text,
+                      cursor: pendingId === ticket.id ? "wait" : "pointer",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {pendingId === ticket.id ? "Cancelling…" : "Cancel ticket"}
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <p style={{ fontSize: 14, opacity: 0.7 }}>You have no tickets yet.</p>
+      )}
+    </div>
+  );
+}
+
+// ---- Waitlist tab -----------------------------------------------------------
+
+/**
+ * Every live place the buyer holds on a sold-out tier (2.6).
+ *
+ * Two states, and they are genuinely different things:
+ *
+ *   WAITING  — a 1-based `position` in the queue.
+ *   NOTIFIED — an OFFER with a deadline, and `position: null`. An offer is not a
+ *              queue place, so it is never rendered as one; the deadline is the
+ *              whole point and gets the emphasis.
+ *
+ * Nothing is recomputed here: position, offer state and the claim deadline all
+ * arrive from the server on each read, the same rule the tickets tab follows for
+ * cancellation eligibility.
+ */
+function WaitlistTab({ ctx }: { ctx: TabContext }) {
+  const { user } = usePublicAuth();
+  const { t, card } = useCardStyles();
+  const { formatDate } = ctx;
+  const { places, isLoading } = useMyWaitlistPlaces(user?.id);
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>My Waitlists</h2>
+      {isLoading ? (
+        <Loading />
+      ) : places.length > 0 ? (
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          {places.map((place) => (
+            <WaitlistPlaceRow key={place.id} place={place} formatDate={formatDate} />
+          ))}
+        </div>
+      ) : (
+        <p style={{ fontSize: 14, opacity: 0.7 }}>You&apos;re not on any waitlists.</p>
+      )}
+    </div>
+  );
+}
+
+function WaitlistPlaceRow({
+  place,
+  formatDate,
+}: {
+  place: WaitlistPlace;
+  formatDate: (value: string | number | Date) => string;
+}) {
+  const { t } = useCardStyles();
+  const leave = useLeaveEventWaitlist(place.eventId);
+  const [error, setError] = useState<string | null>(null);
+
+  const onLeave = async () => {
+    setError(null);
+    try {
+      await leave.mutateAsync({ entryId: place.id });
+    } catch (err) {
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        "We could not remove you from this waitlist. Please try again.";
+      setError(message);
+    }
+  };
+
+  const deadline = place.offer.claimExpiresAt ? new Date(place.offer.claimExpiresAt) : null;
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${t.primary}${place.offer.offerOpen ? "80" : "20"}`,
+        borderRadius: t.cornerRadius,
+        padding: 16,
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
+        <div>
+          <div style={{ fontWeight: 600 }}>{place.event?.title ?? "Event"}</div>
+          <div style={{ fontSize: 13, opacity: 0.7 }}>
+            {place.ticket?.title ?? "Ticket"} · {place.quantity} {place.quantity === 1 ? "ticket" : "tickets"}
+          </div>
+          {place.event?.dateTime && (
+            <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(place.event.dateTime)}</div>
+          )}
+        </div>
+        {place.offer.offerOpen ? (
+          <span style={{ fontWeight: 700, color: t.primary }}>Tickets available</span>
+        ) : place.position != null ? (
+          <span style={{ fontSize: 14, opacity: 0.85 }}>
+            Position <strong style={{ color: t.primary }}>#{place.position}</strong>
+          </span>
+        ) : (
+          <span style={{ fontSize: 14, opacity: 0.85 }}>You&apos;re on the list</span>
+        )}
+      </div>
+
+      {place.offer.offerOpen && deadline && (
+        <div
+          style={{
+            marginTop: 12,
+            padding: "10px 12px",
+            borderRadius: t.cornerRadius,
+            border: `1px solid ${t.primary}4d`,
+            fontSize: 14,
+          }}
+        >
+          <strong>Buy within {formatCountdown(place.offer.secondsRemaining ?? 0)}</strong> — your offer closes{" "}
+          {deadline.toLocaleString(undefined, {
+            weekday: "short",
+            day: "numeric",
+            month: "short",
+            hour: "numeric",
+            minute: "2-digit",
+          })}
+          . Tickets are not reserved until you buy them.
+        </div>
+      )}
+
+      {error && <p style={{ color: "#ef4444", fontSize: 13, marginTop: 12 }}>{error}</p>}
+
+      <button
+        onClick={() => void onLeave()}
+        disabled={leave.isPending}
+        style={{
+          marginTop: 12,
+          padding: "8px 14px",
+          borderRadius: t.cornerRadius,
+          border: `1px solid ${t.primary}40`,
+          background: "transparent",
+          color: t.text,
+          cursor: leave.isPending ? "wait" : "pointer",
+          fontWeight: 600,
+        }}
+      >
+        {leave.isPending ? "Leaving…" : "Leave waitlist"}
+      </button>
+    </div>
+  );
+}
+
+// ---- Bookings tab -----------------------------------------------------------
+
+/**
+ * The buyer's coaching sessions, and moving one (S.6 / bookings § 1.4).
+ *
+ * Session buyers had no purchase surface at all: `GET /public/coaching/bookings/mine`
+ * and the reschedule action shipped with nothing that could reach them.
+ *
+ * A booking is deliberately NOT folded into the Orders tab — that tab reads
+ * `/public/orders` and covers product orders only, so a session would never
+ * appear there however hard one looked.
+ *
+ * Nothing is recomputed here. `canReschedule` and `rescheduleReason` arrive on
+ * every row, and the slot grid the picker offers is the server's own
+ * availability read — which already excludes taken slots and hours the coach is
+ * busy on any of their services.
+ *
+ * `cancellation` comes from the POLICY SNAPSHOT taken on the booking at
+ * purchase, never the coach's current setting, and `canCancel` is the only
+ * thing that decides whether a cancel control is drawn. The cancel is
+ * idempotent server-side (one conditional UPDATE claims it before any provider
+ * call), so a double-click refunds once.
+ */
+function BookingsTab({ ctx }: { ctx: TabContext }) {
+  const { user } = usePublicAuth();
+  const { t, card } = useCardStyles();
+  const { data, isLoading } = useMyBookings(user?.id);
+
+  const bookings = data?.data ?? [];
+
+  return (
+    <div style={card}>
+      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>My Sessions</h2>
+      {isLoading ? (
+        <Loading />
+      ) : bookings.length > 0 ? (
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          {bookings.map((booking) => (
+            <BookingRow key={booking.id} booking={booking} ctx={ctx} />
+          ))}
+        </div>
+      ) : (
+        <p style={{ fontSize: 14, opacity: 0.7 }}>You have no sessions booked.</p>
+      )}
+    </div>
+  );
+}
+
+/** The session's window, in the coach's timezone where one is set. */
+function formatSessionWindow(booking: MyBooking): string {
+  const zone = booking.coachingProductTimezone ?? undefined;
+  const start = new Date(booking.sessionStartTime);
+  const end = new Date(booking.sessionEndTime);
+  const day = start.toLocaleString(undefined, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    timeZone: zone,
+  });
+  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})` : ""}`;
+}
+
+function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
+  const { t } = useCardStyles();
+  const { formatAmount, currency } = ctx;
+  const cancelBooking = useCancelMyBooking();
+  const [picking, setPicking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const cancelled = booking.status === "canceled" || !!booking.selfCancelledAt;
+
+  const actionButton: React.CSSProperties = {
+    padding: "8px 14px",
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.primary}40`,
+    background: "transparent",
+    color: t.text,
+    cursor: "pointer",
+    fontWeight: 600,
+  };
+
+  const onCancel = async () => {
+    setError(null);
+    try {
+      await cancelBooking.mutateAsync({ bookingId: booking.id });
+    } catch (err) {
+      // The server names the rule that stopped it (outside the notice window,
+      // already cancelled, a refund that cannot be made automatically). Its
+      // wording, not ours.
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        "We could not cancel this session. Please try again.";
+      setError(message);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${t.primary}20`,
+        borderRadius: t.cornerRadius,
+        padding: 16,
+        opacity: cancelled ? 0.6 : 1,
+      }}
+    >
+      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
+        <div>
+          <div style={{ fontWeight: 600 }}>{booking.coachingProductTitle}</div>
+          <div style={{ fontSize: 13, opacity: 0.7 }}>{formatSessionWindow(booking)}</div>
+          {booking.coachingProductDurationMinutes != null && (
+            <div style={{ fontSize: 13, opacity: 0.7 }}>{booking.coachingProductDurationMinutes} minutes</div>
+          )}
+        </div>
+        <div style={{ textAlign: "right" }}>
+          {cancelled && <div style={{ fontSize: 13, color: t.primary }}>Cancelled</div>}
+          {booking.totalAmount != null && (
+            <div style={{ fontWeight: 700, color: t.primary }}>
+              {formatAmount(booking.totalAmount, booking.currency || currency)}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* The terms they booked under, in the artist's own words where given. */}
+      {booking.cancellation.description && (
+        <div style={{ fontSize: 13, opacity: 0.75, marginTop: 12 }}>{booking.cancellation.description}</div>
+      )}
+      {booking.cancellation.terms && (
+        <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{booking.cancellation.terms}</div>
+      )}
+
+      {/*
+        The action row. Both controls are drawn from the SERVER's flags —
+        `canReschedule` and `cancellation.canCancel` — never from eligibility
+        re-derived in the browser, which would give two answers to one question.
+      */}
+      {error && (
+        <p style={{ color: "#ef4444", fontSize: 13, marginTop: 12 }} role="alert">
+          {error}
+        </p>
+      )}
+
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
+        {booking.canReschedule && !picking && (
+          <button onClick={() => setPicking(true)} style={actionButton}>
+            Reschedule
+          </button>
+        )}
+        {booking.cancellation.canCancel && (
+          <button
+            onClick={() => void onCancel()}
+            disabled={cancelBooking.isPending}
+            style={{ ...actionButton, cursor: cancelBooking.isPending ? "wait" : "pointer" }}
+          >
+            {cancelBooking.isPending ? "Cancelling…" : "Cancel session"}
+          </button>
+        )}
+      </div>
+
+      {picking && <RescheduleSlotPicker booking={booking} onDone={() => setPicking(false)} />}
+    </div>
+  );
+}
+
+/**
+ * Pick another time for a session already bought.
+ *
+ * The grid is `GET /public/coaching/products/:id/availability` over the next
+ * fortnight — the same read the original purchase used, which already drops
+ * taken slots and hours the coach is busy on any of their services. It is not
+ * filtered further here: a slot this list offers and the server then refuses
+ * (two buyers racing for one hour, decided by a database EXCLUDE constraint)
+ * comes back as the server's own 409 message, which is the honest answer.
+ */
+function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone: () => void }) {
+  const { t } = useCardStyles();
+  const reschedule = useRescheduleBooking();
+  const [error, setError] = useState<string | null>(null);
+  const [pendingSlotId, setPendingSlotId] = useState<string | null>(null);
+
+  // A fortnight from now. Computed once per mount rather than per render, so the
+  // query key does not change on every tick and refetch forever.
+  const [window] = useState(() => {
+    const from = new Date();
+    const to = new Date(from.getTime() + 14 * 24 * 3600_000);
+    return { from: from.toISOString(), to: to.toISOString() };
+  });
+
+  const { data: slots, isLoading } = useCoachingAvailability(booking.coachingProductId, window.from, window.to);
+  const zone = booking.coachingProductTimezone ?? undefined;
+
+  const onPick = async (slotId: string) => {
+    setError(null);
+    setPendingSlotId(slotId);
+    try {
+      await reschedule.mutateAsync({ bookingId: booking.id, slotId });
+      onDone();
+    } catch (err) {
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        "We could not move this session. Please try another time.";
+      setError(message);
+    } finally {
+      setPendingSlotId(null);
+    }
+  };
+
+  const open = (slots ?? []).filter((slot) => slot.id !== booking.coachingBookingSlotId);
+
+  return (
+    <div style={{ marginTop: 12, padding: 12, borderRadius: t.cornerRadius, border: `1px solid ${t.primary}4d` }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
+        <strong style={{ fontSize: 14 }}>Choose a new time</strong>
+        <button
+          onClick={onDone}
+          style={{
+            padding: "4px 10px",
+            borderRadius: t.cornerRadius,
+            border: `1px solid ${t.primary}40`,
+            background: "transparent",
+            color: t.text,
+            cursor: "pointer",
+            fontSize: 13,
+          }}
+        >
+          Close
+        </button>
+      </div>
+
+      {error && (
+        <p style={{ color: "#ef4444", fontSize: 13, marginTop: 10 }} role="alert">
+          {error}
+        </p>
+      )}
+
+      {isLoading ? (
+        <Loading />
+      ) : open.length > 0 ? (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 12 }}>
+          {open.map((slot) => {
+            const start = new Date(slot.startTime);
+            const busy = pendingSlotId === slot.id;
+            return (
+              <button
+                key={slot.id}
+                onClick={() => void onPick(slot.id)}
+                disabled={reschedule.isPending}
+                style={{
+                  padding: "8px 12px",
+                  borderRadius: t.cornerRadius,
+                  border: `1px solid ${t.primary}40`,
+                  background: "transparent",
+                  color: t.text,
+                  cursor: reschedule.isPending ? "wait" : "pointer",
+                  fontSize: 13,
+                }}
+              >
+                {busy
+                  ? "Moving…"
+                  : start.toLocaleString(undefined, {
+                      weekday: "short",
+                      day: "numeric",
+                      month: "short",
+                      hour: "numeric",
+                      minute: "2-digit",
+                      timeZone: zone,
+                    })}
+              </button>
+            );
+          })}
+        </div>
+      ) : (
+        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 12 }}>
+          No other times are open in the next two weeks.
+        </p>
+      )}
+    </div>
+  );
+}
+
 // ---- Orders tab -------------------------------------------------------------
 
 function OrdersTab({ ctx }: { ctx: TabContext }) {