@tribe-nest/forge 3.63.0 → 3.65.0

package/src/ui/headless/coaching/useCoachingBooking.ts

@@ -12,7 +12,8 @@ import { useCouponField, type CouponQuoteFn } from "../coupon/useCouponField";
 import { readAttributionRef } from "../../../utils/attribution";
 import { readLanding } from "../../../utils/landing";
 import { forgetBookingSecret, rememberBookingSecret } from "../../../utils/bookingSecret";
-import type { CancellationTermsView } from "../../../types/models";
+import type { BookingSlot, CancellationTermsView } from "../../../types/models";
+import { bookingGrossAmount, bookingPricingMode, bookingSessionRange } from "../../format/bookingPricing";
 
 export type CoachingBookingStep = "slot" | "details" | "payment";
 
@@ -32,6 +33,13 @@ export interface UseCoachingBookingOptions {
    */
   fromDate?: string;
   toDate?: string;
+  /**
+   * Browse availability a WEEK at a time (the default, unchanged for existing
+   * sites) or a calendar MONTH at a time, the day-first pattern of popular
+   * booking platforms (`goPrevMonth` / `goNextMonth`). Forge's own
+   * `CoachingBooking` uses `month`.
+   */
+  view?: "week" | "month";
 }
 
 const errMessage = (e: unknown) =>
@@ -49,6 +57,12 @@ const addDays = (d: Date, n: number) => {
   return x;
 };
 const endOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
+const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
+const addMonths = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+const endOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth() + 1, 0, 23, 59, 59, 999);
+
+/** A slot the buyer picked, kept whole so it survives navigating to another month. */
+export type PickedSlot = Pick<BookingSlot, "id" | "startTime" | "endTime">;
 
 /**
  * Headless coaching booking: slot selection (reserve) → buyer details (update,
@@ -73,8 +87,30 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
   const goPrevWeek = () => setWeekStart((w) => (w.getTime() > currentWeekStart.getTime() ? addDays(w, -7) : w));
   const goNextWeek = () => setWeekStart((w) => addDays(w, 7));
 
-  const windowFrom = opts.fromDate ?? weekStart.toISOString();
-  const windowTo = opts.toDate ?? endOfDay(weekEnd).toISOString();
+  // Month navigation, bounded by "this month" and the product's booking window
+  // (`daysInFuture`): there is nothing to offer past it.
+  const isMonthView = opts.view === "month";
+  const [currentMonthStart] = useState(() => startOfMonth(new Date()));
+  const [monthStart, setMonthStart] = useState<Date>(currentMonthStart);
+  const lastBookableMonth = startOfMonth(
+    addDays(new Date(), Math.max(0, Number(product?.daysInFuture ?? 60))),
+  );
+  const canGoPrevMonth = monthStart.getTime() > currentMonthStart.getTime();
+  const canGoNextMonth = monthStart.getTime() < lastBookableMonth.getTime();
+  const goPrevMonth = () => setMonthStart((m) => (m.getTime() > currentMonthStart.getTime() ? addMonths(m, -1) : m));
+  const goNextMonth = () =>
+    setMonthStart((m) => (m.getTime() < lastBookableMonth.getTime() ? addMonths(m, 1) : m));
+
+  // "Now" is read ONCE, at mount. Reading it per render made the window's
+  // start (and so the query key) change on every render, refetching the
+  // month in a loop and leaving the calendar permanently loading.
+  const [openedAt] = useState(() => Date.now());
+  const windowFrom =
+    opts.fromDate ??
+    (isMonthView
+      ? new Date(Math.max(monthStart.getTime(), openedAt)).toISOString()
+      : weekStart.toISOString());
+  const windowTo = opts.toDate ?? (isMonthView ? endOfMonth(monthStart) : endOfDay(weekEnd)).toISOString();
   const availability = useCoachingAvailability(productId, windowFrom, windowTo);
   const reserve = useReserveCoachingBooking(productId);
   const update = useUpdateCoachingBooking(productId);
@@ -90,7 +126,21 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
    * backend returns it once and cannot reissue it.
    */
   const bookingSecretRef = useRef<string | undefined>(undefined);
-  const [selectedSlotId, setSelectedSlotId] = useState<string | null>(null);
+  /**
+   * The times picked for this booking, earliest first. One for a single
+   * session; up to the product's limit for a package or per-session booking.
+   * Kept as whole slots (not ids) so a pick made in October still shows in
+   * the basket while the buyer browses November.
+   */
+  const [selectedSlots, setSelectedSlots] = useState<PickedSlot[]>([]);
+  const setSelectedSlotId = (id: string | null) => {
+    if (!id) return setSelectedSlots([]);
+    const slot = (availability.data ?? []).find((s) => s.id === id);
+    setSelectedSlots(slot ? [slot] : [{ id, startTime: "", endTime: "" }]);
+  };
+  const selectedSlotId = selectedSlots[0]?.id ?? null;
+  const sessionRange = bookingSessionRange(product);
+  const pricingMode = bookingPricingMode(product);
   const [firstName, setFirstName] = useState(user?.firstName ?? "");
   const [lastName, setLastName] = useState(user?.lastName ?? "");
   const [email, setEmail] = useState(user?.email ?? "");
@@ -148,8 +198,35 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
     setSelectedSlotId(slotId);
   };
 
+  /**
+   * Add or remove a time from the basket. A single-session product replaces
+   * its one pick; a multi-session product adds up to its limit and reports
+   * `false` when the basket is already full.
+   */
+  const toggleSlot = (slot: PickedSlot): boolean => {
+    setError(null);
+    const already = selectedSlots.some((s) => s.id === slot.id);
+    if (sessionRange.max <= 1) {
+      setSelectedSlots(already ? [] : [slot]);
+      return true;
+    }
+    if (already) {
+      setSelectedSlots(selectedSlots.filter((s) => s.id !== slot.id));
+      return true;
+    }
+    if (selectedSlots.length >= sessionRange.max) return false;
+    setSelectedSlots(
+      [...selectedSlots, slot].sort((x, y) => new Date(x.startTime).getTime() - new Date(y.startTime).getTime()),
+    );
+    return true;
+  };
+  const removeSlot = (slotId: string) => {
+    setError(null);
+    setSelectedSlots((current) => current.filter((s) => s.id !== slotId));
+  };
+
   const changeWeek = (dir: -1 | 1) => {
-    setSelectedSlotId(null);
+    setSelectedSlots([]);
     if (dir === -1) goPrevWeek();
     else goNextWeek();
   };
@@ -165,13 +242,20 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
       setError("Please select an available time slot.");
       return;
     }
+    if (selectedSlots.length < sessionRange.min) {
+      setError(`Please pick ${sessionRange.min} times.`);
+      return;
+    }
     try {
       // Release any previously-held slot before reserving a new one.
       if (bookingId) {
-        await unreserve.mutateAsync({ bookingId }).catch(() => undefined);
+        await unreserve.mutateAsync({ bookingId, bookingSecret: bookingSecretRef.current }).catch(() => undefined);
         forgetBookingSecret(bookingId);
       }
-      const data = await reserve.mutateAsync({ slotId: selectedSlotId });
+      // Every picked time in ONE call: the server holds all of them or none.
+      const data = await reserve.mutateAsync(
+        selectedSlots.length > 1 ? { slotIds: selectedSlots.map((s) => s.id) } : { slotId: selectedSlotId },
+      );
       setBookingId(data.bookingId);
       bookingSecretRef.current = data.bookingSecret;
       // Written the instant it arrives: this is the only time the server will
@@ -179,12 +263,29 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
       // way to get it.
       rememberBookingSecret(data.bookingId, data.bookingSecret);
       setAgreedCancellation(data.cancellation ?? null);
-      setReservationExpiresAt(Date.now() + RESERVATION_HOLD_MS);
+      // The server's own deadline when it gives one, so the countdown matches.
+      const serverDeadline = data.holdExpiresAt ? Date.parse(data.holdExpiresAt) : NaN;
+      setReservationExpiresAt(Number.isFinite(serverDeadline) ? serverDeadline : Date.now() + RESERVATION_HOLD_MS);
       setStep("details");
     } catch (e) {
       setError(errMessage(e));
-      setSelectedSlotId(null);
-      availability.refetch();
+      // One session: start over. Several: keep the basket, drop only the
+      // picks this month's fresh grid no longer offers (someone took them).
+      if (selectedSlots.length <= 1) {
+        setSelectedSlots([]);
+        availability.refetch();
+      } else {
+        const fresh = await availability.refetch().catch(() => null);
+        const offered = new Set((fresh?.data ?? []).map((s) => s.id));
+        const from = Date.parse(windowFrom);
+        const to = Date.parse(windowTo);
+        setSelectedSlots((current) =>
+          current.filter((s) => {
+            const at = Date.parse(s.startTime);
+            return !(at >= from && at <= to) || offered.has(s.id);
+          }),
+        );
+      }
     }
   };
 
@@ -192,15 +293,19 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
    * Release the currently-held slot: unreserve the booking and clear the hold,
    * returning to slot selection. Call this when the user leaves/closes the flow.
    */
-  const releaseReservation = useCallback(async () => {
-    if (bookingId) await unreserve.mutateAsync({ bookingId }).catch(() => undefined);
+  const releaseReservation = useCallback(async (releaseOpts: { keepSelection?: boolean } = {}) => {
+    if (bookingId) {
+      await unreserve.mutateAsync({ bookingId, bookingSecret: bookingSecretRef.current }).catch(() => undefined);
+    }
     // The credential belonged to a booking that no longer exists — leaving it
     // in storage would strand a dead secret in the tab for the rest of the
     // session.
     forgetBookingSecret(bookingId);
     bookingSecretRef.current = undefined;
     setBookingId(null);
-    setSelectedSlotId(null);
+    // "Back" keeps the basket so the buyer can adjust it; closing or an
+    // expired hold starts over.
+    if (!releaseOpts.keepSelection) setSelectedSlots([]);
     setReservationExpiresAt(null);
     // The agreed terms belonged to a booking that no longer exists — the next
     // reserve snapshots afresh, and may snapshot something different.
@@ -268,6 +373,21 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
     step,
     setStep,
     selectedSlotId,
+    /** Every picked time, earliest first. */
+    selectedSlots,
+    toggleSlot,
+    removeSlot,
+    /** How many sessions this booking must hold: `{ min, max }` (1/1 for one session). */
+    sessionRange,
+    pricingMode,
+    /** True once the basket holds an allowed number of sessions. */
+    canReserve:
+      selectedSlots.length >= sessionRange.min && selectedSlots.length <= sessionRange.max && selectedSlots.length > 0,
+    /**
+     * The price of the current basket before a code or tax, for display only:
+     * the package price, or the per-session price times the picks (at least one).
+     */
+    quotedTotal: bookingGrossAmount(product, Math.max(selectedSlots.length, sessionRange.min)),
     bookingId,
     /**
      * The cancellation terms in force for THIS checkout (S.6): the booking's
@@ -281,6 +401,12 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
     reservationExpiresAt,
     expireReservation,
     releaseReservation,
+    // Month navigation (with `view: "month"`)
+    monthStart,
+    canGoPrevMonth,
+    canGoNextMonth,
+    goPrevMonth,
+    goNextMonth,
     // Week navigation
     weekStart,
     weekEnd,

package/src/ui/index.ts

@@ -135,6 +135,15 @@ export { AddToCalendar, type AddToCalendarProps } from "./styled/AddToCalendar";
 export { WalletPassButtons, type WalletPassButtonsProps } from "./styled/WalletPassButtons";
 export { CoachingBooking, type CoachingBookingProps } from "./styled/CoachingBooking";
 export { CoachingDetail, type CoachingDetailProps } from "./styled/CoachingDetail";
+export { BookingPriceSummary } from "./styled/BookingPriceSummary";
+export { CoachingSlotPicker, localDayKey } from "./styled/CoachingSlotPicker";
+export {
+  bookingGrossAmount,
+  bookingPricingMode,
+  bookingSessionRange,
+  packageSaving,
+  type BookingPricingMode,
+} from "./format/bookingPricing";
 // S.6: the buyer-facing cancellation policy block. Exported so a code site that
 // lays out its own booking page still has ONE renderer for these terms.
 export { CancellationTerms, type CancellationTermsProps } from "./styled/CancellationTerms";
@@ -268,6 +277,10 @@ export {
   resolveUnitPrice,
   ticketSubtotals,
 } from "./format/pwyw";
+// Free tickets: a zero-priced tier (not PWYW) reads "Free", an event page with
+// free and paid tiers reads "Free to $X", and one free tier is a reservation.
+export { isFreeTicket, summarizeTicketPrices, isSingleFreeTicketEvent } from "./format/ticketPrice";
+export type { TicketPriceSummary } from "./format/ticketPrice";
 // Membership pricing: which billing cycles a tier sells, a pay-what-you-want
 // cycle's floor, and the ONE number that may be sent to the subscriptions API.
 // Settlement-currency MAJOR units throughout: convert for the screen, never for

package/src/ui/styled/AccountDashboard.tsx

@@ -1228,10 +1228,18 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
         </div>
         <div style={{ textAlign: "right" }}>
           {cancelled && <div style={{ fontSize: 13, color: t.muted }}>{tr("forge.account_dashboard.cancelled")}</div>}
-          {booking.totalAmount != null && (
-            <div style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
-              {formatAmount(booking.totalAmount, booking.currency || currency)}
+          {(booking.sessionCount ?? 1) > 1 ? (
+            // One session of several bought together: the payment covers them
+            // all, so no per-row price that would read as this session's own.
+            <div data-testid="booking-package-badge" style={{ fontSize: 13, fontWeight: 600 }}>
+              {tr("forge.account_dashboard.booking_part_of", { count: booking.sessionCount ?? 1 })}
             </div>
+          ) : (
+            booking.totalAmount != null && (
+              <div style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
+                {formatAmount(booking.totalAmount, booking.currency || currency)}
+              </div>
+            )
           )}
         </div>
       </div>

package/src/ui/styled/BookingPriceSummary.tsx

@@ -0,0 +1,57 @@
+import type { CSSProperties } from "react";
+import type { CoachingProduct } from "../../types/models";
+import { useForgeT } from "../../i18n";
+import { bookingPricingMode, packageSaving } from "../format/bookingPricing";
+import { PriceDisplay } from "../format/PriceDisplay";
+
+/**
+ * A booking product's price as a buyer reads it: "$80", "$350 for 5
+ * sessions, save $50", or "$80 per session, book up to 6 at once".
+ *
+ * One component so the detail page, the listing cards and any custom site say
+ * it the same way.
+ */
+export function BookingPriceSummary({
+  product,
+  fmt,
+  pricesIncludeTax,
+  mutedColor,
+  style,
+}: {
+  product: Pick<CoachingProduct, "price" | "pricingMode" | "packageSessionCount" | "packagePrice" | "maxSessionsPerBooking">;
+  fmt: (n: number) => string;
+  pricesIncludeTax?: boolean;
+  mutedColor?: string;
+  style?: CSSProperties;
+}) {
+  const t = useForgeT();
+  const mode = bookingPricingMode(product);
+  const muted: CSSProperties = { fontSize: "0.85em", fontWeight: 500, opacity: 0.7 };
+
+  if (mode === "package") {
+    const saving = packageSaving(product);
+    return (
+      <span data-testid="booking-price-summary" style={{ display: "inline-flex", flexWrap: "wrap", alignItems: "baseline", gap: 6, ...style }}>
+        <PriceDisplay amount={Number(product.packagePrice ?? 0)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={mutedColor} captionStyle={{ opacity: 0.65 }} />
+        <span style={muted}>{t("forge.coaching_detail.price_for_sessions", { count: Number(product.packageSessionCount ?? 0) })}</span>
+        {saving > 0 && <span style={{ ...muted, fontWeight: 700, opacity: 1 }}>{t("forge.coaching_detail.price_save", { amount: fmt(saving) })}</span>}
+      </span>
+    );
+  }
+
+  if (mode === "per_session") {
+    return (
+      <span data-testid="booking-price-summary" style={{ display: "inline-flex", flexWrap: "wrap", alignItems: "baseline", gap: 6, ...style }}>
+        <PriceDisplay amount={Number(product.price ?? 0)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={mutedColor} captionStyle={{ opacity: 0.65 }} />
+        <span style={muted}>{t("forge.coaching_detail.price_per_session_suffix")}</span>
+        <span style={muted}>{t("forge.coaching_detail.price_up_to", { max: Number(product.maxSessionsPerBooking ?? 1) })}</span>
+      </span>
+    );
+  }
+
+  return (
+    <span data-testid="booking-price-summary" style={style}>
+      <PriceDisplay amount={Number(product.price ?? 0)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={mutedColor} captionStyle={{ opacity: 0.65 }} />
+    </span>
+  );
+}

package/src/ui/styled/CoachingBooking.tsx

@@ -12,6 +12,7 @@ import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePay
 import { buttonStyle } from "./Button";
 import { DiscountCodeField, DiscountSummaryLines } from "./DiscountCode";
 import { CancellationTerms } from "./CancellationTerms";
+import { CoachingSlotPicker, useNarrowViewport } from "./CoachingSlotPicker";
 import {
   DialogRoot,
   DialogTrigger,
@@ -67,7 +68,10 @@ export function CoachingBooking({
   const theme = useForgeTheme();
   const registered = usePaymentRenderer();
   const fmt = useAmountFormatter(formatAmount);
-  const c = useCoachingBooking(slug, { finalisePath, onComplete });
+  const c = useCoachingBooking(slug, { finalisePath, onComplete, view: "month" });
+  // Below 640px the booking takes the whole screen, so the browser bar and the
+  // keyboard never cover the button.
+  const narrow = useNarrowViewport();
   const renderPay = renderPayment ?? registered ?? undefined;
 
   const [open, setOpen] = useState(false);
@@ -89,18 +93,25 @@ export function CoachingBooking({
       <DialogPortal>
         <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
         <DialogContent
+          data-testid="coaching-booking-dialog"
           style={{
             position: "fixed",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: "min(640px, calc(100vw - 24px))",
-            maxHeight: "88vh",
+            ...(narrow
+              ? { inset: 0, width: "100%", height: "100dvh", borderRadius: 0, padding: "16px 16px 0" }
+              : {
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "min(760px, calc(100vw - 24px))",
+                  maxHeight: "88vh",
+                  borderRadius: theme.cornerRadius,
+                  padding: 24,
+                }),
+            display: "flex",
+            flexDirection: "column",
             overflowY: "auto",
             background: theme.colors.background,
             color: theme.colors.text,
-            borderRadius: theme.cornerRadius,
-            padding: 24,
             zIndex: 51,
             fontFamily: theme.fontFamily,
           }}
@@ -119,7 +130,9 @@ export function CoachingBooking({
 
           {c.isLoading && <Loading />}
           {!c.isLoading && !c.product && <p style={{ marginTop: 8 }}>{t("forge.coaching_booking.not_found")}</p>}
-          {c.product && <CoachingBookingBody c={c} product={c.product} fmt={fmt} renderPayment={renderPay} />}
+          {c.product && (
+            <CoachingBookingBody c={c} product={c.product} fmt={fmt} renderPayment={renderPay} narrow={narrow} />
+          )}
         </DialogContent>
       </DialogPortal>
     </DialogRoot>
@@ -133,20 +146,22 @@ function CoachingBookingBody({
   product,
   fmt,
   renderPayment,
+  narrow,
 }: {
   c: Booking;
   product: CoachingProduct;
   fmt: (n: number) => string;
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
+  narrow: boolean;
 }) {
   const stepIndex = c.step === "slot" ? 0 : c.step === "details" ? 1 : 2;
   return (
-    <div style={{ width: "100%" }}>
+    <div style={{ width: "100%", flex: 1, display: "flex", flexDirection: "column" }}>
       {/* Reservation hold countdown — isolated so its per-second tick re-renders
           only itself, not the modal body (esp. the Stripe payment form). */}
       <ReservationTimer expiresAt={c.reservationExpiresAt} onExpire={c.expireReservation} />
       <Progress current={stepIndex} />
-      {c.step === "slot" && <SlotStep c={c} product={product} fmt={fmt} />}
+      {c.step === "slot" && <CoachingSlotPicker c={c} product={product} fmt={fmt} narrow={narrow} />}
       {c.step === "details" && <DetailsStep c={c} product={product} fmt={fmt} />}
       {c.step === "payment" && <PaymentStep c={c} product={product} fmt={fmt} renderPayment={renderPayment} />}
     </div>
@@ -253,147 +268,7 @@ function Progress({ current }: { current: number }) {
   );
 }
 
-// ── Step 1: week navigation + slot selection (reserve happens on Continue) ─────
-function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; fmt: (n: number) => string }) {
-  const t = useForgeT();
-  const theme = useForgeTheme();
-  const slots: BookingSlot[] = c.availability.data ?? [];
-
-  const grouped = useMemo(() => {
-    const byDay: Record<string, { slotId: string; time: string; ts: number }[]> = {};
-    for (const slot of slots) {
-      const date = new Date(slot.startTime);
-      const dateKey = date.toISOString().split("T")[0];
-      if (!dateKey) continue;
-      // Shown in the visitor's own timezone (like the client app + the confirmation).
-      const time = date.toLocaleTimeString("en-US", {
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: true,
-      });
-      (byDay[dateKey] ??= []).push({ slotId: slot.id, time, ts: date.getTime() });
-    }
-    for (const key of Object.keys(byDay)) byDay[key]!.sort((x, y) => x.ts - y.ts);
-    return Object.entries(byDay).sort(([x], [y]) => x.localeCompare(y));
-  }, [slots]);
-
-  // The visitor's local timezone abbreviation (e.g. "EDT") — slots are shown in it.
-  const tzAbbr = (() => {
-    try {
-      return (
-        new Intl.DateTimeFormat("en-US", { timeZoneName: "short" })
-          .formatToParts(new Date())
-          .find((p) => p.type === "timeZoneName")?.value ?? ""
-      );
-    } catch {
-      return "";
-    }
-  })();
-
-  const weekLabel = t("forge.coaching_booking.week_range", {
-    start: c.weekStart.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
-    end: c.weekEnd.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }),
-  });
-  const navButton = (disabled: boolean): CSSProperties => ({
-    padding: 8,
-    borderRadius: theme.cornerRadius,
-    border: `1px solid ${a(theme.colors.primary, 0.25)}`,
-    background: "transparent",
-    color: disabled ? a(theme.colors.text, 0.3) : theme.colors.text,
-    cursor: disabled ? "not-allowed" : "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  });
-
-  return (
-    <div>
-      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 6 }}>{t("forge.coaching_booking.slot_title")}</h2>
-      <p style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: a(theme.colors.text, 0.6), margin: "0 0 16px" }}>
-        <Clock size={14} />{" "}
-        {tzAbbr
-          ? t("forge.coaching_booking.timezone_note_named", { timezone: tzAbbr })
-          : t("forge.coaching_booking.timezone_note")}
-      </p>
-
-      {/* Week navigation */}
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
-        <span style={{ fontSize: 14, color: a(theme.colors.text, 0.6) }}>{weekLabel}</span>
-        <div style={{ display: "flex", gap: 8 }}>
-          <button aria-label={t("forge.coaching_booking.aria_prev_week")} onClick={c.goPrevWeek} disabled={!c.canGoPrevWeek} style={navButton(!c.canGoPrevWeek)}>
-            <ChevronLeft size={16} />
-          </button>
-          <button aria-label={t("forge.coaching_booking.aria_next_week")} onClick={c.goNextWeek} style={navButton(false)}>
-            <ChevronRight size={16} />
-          </button>
-        </div>
-      </div>
-
-      {c.availability.isLoading ? (
-        <Loading label={t("forge.coaching_booking.loading_slots")} />
-      ) : grouped.length === 0 ? (
-        <p style={{ opacity: 0.7 }}>{t("forge.coaching_booking.no_slots")}</p>
-      ) : (
-        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
-          {grouped.map(([dateKey, daySlots]) => {
-            const date = new Date(dateKey);
-            const dayName = DAY_NAMES[date.getUTCDay()];
-            const dateString = date.toLocaleDateString("en-US", {
-              month: "short",
-              day: "numeric",
-              year: "numeric",
-              timeZone: "UTC",
-            });
-            return (
-              <div key={dateKey}>
-                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
-                  <Calendar size={18} style={{ color: theme.colors.primary }} />
-                  <h3 style={{ fontSize: 17, fontWeight: 600, margin: 0 }}>
-                    {dayName}, {dateString}
-                  </h3>
-                </div>
-                <div className="fg:grid fg:grid-cols-2 fg:md:grid-cols-4" style={{ gap: 10 }}>
-                  {daySlots.map((slot) => {
-                    const selected = slot.slotId === c.selectedSlotId;
-                    return (
-                      <button
-                        key={slot.slotId}
-                        onClick={() => c.selectSlot(slot.slotId)}
-                        disabled={c.isProcessing}
-                        style={{
-                          padding: "12px",
-                          borderRadius: theme.cornerRadius,
-                          border: `2px solid ${selected ? theme.colors.primary : a(theme.colors.primary, 0.25)}`,
-                          background: selected ? a(theme.colors.primary, 0.06) : "transparent",
-                          color: selected ? theme.colors.primary : theme.colors.text,
-                          cursor: c.isProcessing ? "not-allowed" : "pointer",
-                          fontWeight: 600,
-                          fontFamily: theme.fontFamily,
-                        }}
-                      >
-                        {slot.time}
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {c.error && <p style={{ color: "#ef4444", fontSize: 14, marginTop: 12 }}>{c.error}</p>}
-      <ActionBar
-        c={c}
-        product={product}
-        fmt={fmt}
-        onNext={c.reserveSelected}
-        nextLabel={c.isProcessing ? t("forge.coaching_booking.reserving") : t("forge.coaching_booking.continue")}
-        nextDisabled={!c.selectedSlotId || c.isProcessing}
-      />
-    </div>
-  );
-}
+// ── Step 1: day then time, in `CoachingSlotPicker` ──────────────────────────
 
 // ── Step 2: buyer details + questionnaire ─────────────────────────────────────
 function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; fmt: (n: number) => string }) {
@@ -424,7 +299,9 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
     c.continueToPayment();
   };
 
-  const isFree = Number(product.price) <= 0;
+  // The basket's price, not the per-session price: a package or several
+  // sessions are priced by the hook (and re-priced by the server).
+  const isFree = (c.totalAmount ?? c.quotedTotal) <= 0;
 
   return (
     <div>
@@ -499,7 +376,8 @@ function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct
         c={c}
         product={product}
         fmt={fmt}
-        onBack={() => void c.releaseReservation()}
+        // Back keeps the picked times so the buyer can adjust the basket.
+        onBack={() => void c.releaseReservation({ keepSelection: true })}
         onNext={onContinue}
         nextLabel={
           c.isProcessing
@@ -532,7 +410,7 @@ function PaymentStep({
 }) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const total = c.totalAmount ?? Number(product.price);
+  const total = c.totalAmount ?? c.quotedTotal;
   // Authoritative tax quote from start-payment — the charged total already
   // reflects it; we only caption the breakdown (display only).
   const taxSummary = summarizeTaxQuote(c.taxQuote);
@@ -549,7 +427,7 @@ function PaymentStep({
         }}
       >
         <DiscountSummaryLines
-          subTotal={c.subTotal ?? Number(product.price)}
+          subTotal={c.subTotal ?? c.quotedTotal}
           discountAmount={c.coupon.discountAmount}
           appliedCoupons={c.coupon.appliedCoupons}
           fmt={fmt}
@@ -614,7 +492,7 @@ function ActionBar({
 }) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const total = c.totalAmount ?? Number(product.price);
+  const total = c.totalAmount ?? c.quotedTotal;
   return (
     <div style={{ marginTop: 24 }}>
       <div
@@ -626,7 +504,7 @@ function ActionBar({
         }}
       >
         <DiscountSummaryLines
-          subTotal={c.subTotal ?? Number(product.price)}
+          subTotal={c.subTotal ?? c.quotedTotal}
           discountAmount={c.coupon.discountAmount}
           appliedCoupons={c.coupon.appliedCoupons}
           fmt={fmt}

package/src/ui/styled/CoachingConfirmation.tsx

@@ -158,14 +158,25 @@ export function CoachingConfirmation({
         <div className="cf-rise" style={{ padding: "28px 32px 12px", animationDelay: "0.38s" }}>
           {data && (
             <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 14, columnGap: 16, margin: 0 }}>
-              {data.sessionStartTime && (
+              {data.sessions && data.sessions.length > 1 ? (
+                // A package or several sessions: every time the buyer committed to.
+                data.sessions.map((session, index) => (
+                  <ConfirmationRow
+                    key={session.startTime}
+                    label={t("forge.coaching_confirmation.row_session_n", { index: index + 1, count: data.sessions!.length })}
+                    value={formatSession(session.startTime)}
+                    accent
+                    strong={index === 0}
+                  />
+                ))
+              ) : data.sessionStartTime ? (
                 <ConfirmationRow
                   label={t("forge.coaching_confirmation.row_session")}
                   value={formatSession(data.sessionStartTime)}
                   accent
                   strong
                 />
-              )}
+              ) : null}
               {data.durationMinutes ? (
                 <ConfirmationRow
                   label={t("forge.coaching_confirmation.row_duration")}