@tribe-nest/forge 3.64.0 → 3.67.0

package/src/ui/styled/AiAgentWidget.tsx

@@ -1,10 +1,29 @@
-import { useEffect, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { Phone, PhoneOff } from "lucide-react";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAiAgent } from "../headless/agent/useAiAgent";
+import { useAgentCall, type AgentCallErrorKind } from "../headless/agent/useAgentCall";
+import type { AgentCallRoomStatus } from "../headless/agent/useAgentCallRoom";
 import { Markdown } from "./Markdown";
 
+// The live call pulls in the media SDK and mediasoup, which no visitor needs
+// until they press Call. Split out so it stays out of every page's bundle.
+const loadCallRoom = () => import("./AiAgentCallRoom");
+const AiAgentCallRoom = lazy(loadCallRoom);
+
+/** The widget already draws errors in this red; hang up shares it. */
+const DANGER = "#c0392b";
+
+const CALL_ERROR_KEYS: Record<AgentCallErrorKind, string> = {
+  too_many: "forge.ai_agent_widget.call_error_too_many",
+  unavailable: "forge.ai_agent_widget.call_error_unavailable",
+  busy: "forge.ai_agent_widget.call_error_busy",
+  check_failed: "forge.ai_agent_widget.call_error_check_failed",
+  failed: "forge.ai_agent_widget.call_error_failed",
+};
+
 export interface AiAgentWidgetProps {
   /** Corner to anchor the floating bubble. Default "bottom-right". */
   position?: "bottom-right" | "bottom-left";
@@ -24,12 +43,24 @@ export interface AiAgentWidgetProps {
  * the profile, or when the visitor is on a page the artist excluded.
  * Appearance-only props let authors restyle it without touching behavior. For
  * custom UI, use the `useAiAgent()` hook instead.
+ *
+ * When the agent takes calls, a phone button sits beside the bubble ("Call
+ * us"): a voice call with the same agent, in the browser. `useAgentCall()` is
+ * its headless half.
  */
 export function AiAgentWidget({ position = "bottom-right", accentColor, title, zIndex = 9999 }: AiAgentWidgetProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const { isEnabled, config, messages, sending, error, send } = useAiAgent();
-  const [open, setOpen] = useState(false);
+  const { isEnabled, canCall, config, messages, sending, error, send, visitorId } = useAiAgent();
+  const call = useAgentCall({ visitorId });
+  const [view, setView] = useState<"chat" | "call" | null>(null);
+  const open = view === "chat";
+  const setOpen = (next: boolean | ((o: boolean) => boolean)) =>
+    setView((current) => {
+      const value = typeof next === "function" ? next(current === "chat") : next;
+      return value ? "chat" : null;
+    });
+  const [roomStatus, setRoomStatus] = useState<AgentCallRoomStatus>("connecting");
   const [input, setInput] = useState("");
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -42,8 +73,29 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
     scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
   }, [messages, sending]);
 
+  const callPhase = call.state.phase;
+  const callActive = callPhase === "connecting" || callPhase === "live";
+
+  // On a page where the widget hides (an excluded path) the call panel goes
+  // with it, and the call would run on with no way to hang up. Hang up instead.
+  const { end: endCall } = call;
+  useEffect(() => {
+    if (!isEnabled || !canCall) endCall();
+  }, [isEnabled, canCall, endCall]);
+
+  const startCall = () => {
+    void loadCallRoom();
+    setView("call");
+    if (callActive) return;
+    setRoomStatus("connecting");
+    void call.start();
+  };
+  const onRoomStatus = useCallback((status: AgentCallRoomStatus) => setRoomStatus(status), []);
+
   if (!isEnabled) return null;
 
+  const agentName = config?.displayName || heading;
+
   const submit = () => {
     if (!input.trim()) return;
     send(input);
@@ -146,24 +198,227 @@ export function AiAgentWidget({ position = "bottom-right", accentColor, title, z
         </div>
       )}
 
-      <button
-        onClick={() => setOpen((o) => !o)}
-        aria-label={t("forge.ai_agent_widget.aria_open")}
-        style={{
-          width: 56,
-          height: 56,
-          borderRadius: "50%",
-          background: accent,
-          color: onAccent,
-          border: "none",
-          cursor: "pointer",
-          boxShadow: "0 6px 20px rgba(0,0,0,0.25)",
-          fontSize: 24,
-          float: position === "bottom-left" ? "left" : "right",
-        }}
-      >
-        {open ? "×" : "💬"}
-      </button>
+      {/* Kept mounted, only hidden, while a call is on: unmounting it would
+          leave the media room with the call still running. */}
+      {(view === "call" || callActive) && (
+        <CallPanel
+          hidden={view !== "call"}
+          heading={heading}
+          agentName={agentName}
+          accent={accent}
+          onAccent={onAccent}
+          callState={call.state}
+          roomStatus={roomStatus}
+          onRoomStatus={onRoomStatus}
+          getCredentials={call.getCredentials}
+          onHangUp={call.end}
+          onRetry={startCall}
+          onClose={() => {
+            call.reset();
+            setView(null);
+          }}
+          onChat={() => {
+            call.reset();
+            setView("chat");
+          }}
+        />
+      )}
+
+      <div style={{ display: "flex", gap: 12, alignItems: "center", justifyContent: position === "bottom-left" ? "flex-start" : "flex-end" }}>
+        {canCall && (
+          <button
+            onClick={startCall}
+            aria-label={callActive ? t("forge.ai_agent_widget.aria_show_call") : t("forge.ai_agent_widget.aria_call")}
+            data-testid="forge-agent-call-button"
+            style={{
+              width: 48,
+              height: 48,
+              borderRadius: "50%",
+              background: callActive ? DANGER : theme.colors.background,
+              color: callActive ? readableTextOn(DANGER) : accent,
+              border: `2px solid ${callActive ? DANGER : accent}`,
+              cursor: "pointer",
+              boxShadow: "0 6px 20px rgba(0,0,0,0.18)",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              order: position === "bottom-left" ? 2 : 0,
+            }}
+          >
+            <Phone size={20} aria-hidden />
+          </button>
+        )}
+        <button
+          onClick={() => setOpen((o) => !o)}
+          aria-label={t("forge.ai_agent_widget.aria_open")}
+          style={{
+            width: 56,
+            height: 56,
+            borderRadius: "50%",
+            background: accent,
+            color: onAccent,
+            border: "none",
+            cursor: "pointer",
+            boxShadow: "0 6px 20px rgba(0,0,0,0.25)",
+            fontSize: 24,
+            order: 1,
+          }}
+        >
+          {open ? "×" : "💬"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+interface CallPanelProps {
+  hidden: boolean;
+  heading: string;
+  agentName: string;
+  accent: string;
+  onAccent: string;
+  callState: ReturnType<typeof useAgentCall>["state"];
+  roomStatus: AgentCallRoomStatus;
+  onRoomStatus: (status: AgentCallRoomStatus) => void;
+  getCredentials: () => Promise<{ mediaUrl: string; token: string }>;
+  onHangUp: () => void;
+  onRetry: () => void;
+  onClose: () => void;
+  onChat: () => void;
+}
+
+/** "Call us": the call's own card, in place of the chat panel. */
+function CallPanel({
+  hidden,
+  heading,
+  agentName,
+  accent,
+  onAccent,
+  callState,
+  roomStatus,
+  onRoomStatus,
+  getCredentials,
+  onHangUp,
+  onRetry,
+  onClose,
+  onChat,
+}: CallPanelProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const active = callState.phase === "connecting" || callState.phase === "live";
+  const speaking = callState.phase === "live" && roomStatus === "speaking";
+
+  const secondary: CSSProperties = {
+    background: "transparent",
+    color: theme.colors.text,
+    border: `1px solid ${theme.colors.text}33`,
+    borderRadius: theme.cornerRadius,
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: 14,
+  };
+  const primary: CSSProperties = { ...secondary, background: accent, color: onAccent, border: "none", fontWeight: 600 };
+
+  let body: ReactNode;
+  if (callState.phase === "live") {
+    body = (
+      <Suspense fallback={<CallStatus text={t("forge.ai_agent_widget.call_connecting")} />}>
+        <AiAgentCallRoom
+          getCredentials={getCredentials}
+          selfIdentity={callState.call.identity}
+          agentName={agentName}
+          onEnded={onHangUp}
+          onStatus={onRoomStatus}
+        />
+      </Suspense>
+    );
+  } else if (callState.phase === "ended") {
+    body = <CallStatus text={t("forge.ai_agent_widget.call_ended")} />;
+  } else if (callState.phase === "error") {
+    body = <CallStatus text={t(CALL_ERROR_KEYS[callState.error])} color={DANGER} alert />;
+  } else {
+    body = <CallStatus text={t("forge.ai_agent_widget.call_connecting")} />;
+  }
+
+  return (
+    <div
+      data-testid="forge-agent-call-panel"
+      data-phase={callState.phase}
+      style={{
+        width: "min(380px, calc(100vw - 40px))",
+        marginBottom: 12,
+        display: hidden ? "none" : "flex",
+        flexDirection: "column",
+        background: theme.colors.background,
+        color: theme.colors.text,
+        border: `1px solid ${theme.colors.text}1a`,
+        borderRadius: theme.cornerRadius,
+        overflow: "hidden",
+        boxShadow: "0 12px 40px rgba(0,0,0,0.18)",
+      }}
+    >
+      <div style={{ background: accent, color: onAccent, padding: "12px 16px", fontWeight: 600, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <span>{heading}</span>
+        {!active && (
+          <button onClick={onClose} style={{ background: "transparent", border: "none", color: onAccent, cursor: "pointer", fontSize: 20, lineHeight: 1 }} aria-label={t("forge.ai_agent_widget.aria_close")}>
+            ×
+          </button>
+        )}
+      </div>
+
+      <div style={{ padding: "24px 16px", display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
+        <div
+          aria-hidden
+          style={{
+            width: 64,
+            height: 64,
+            borderRadius: "50%",
+            background: accent,
+            color: onAccent,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transform: speaking ? "scale(1.12)" : "scale(1)",
+            boxShadow: speaking ? `0 0 0 8px ${accent}33` : "none",
+            transition: "transform 150ms ease, box-shadow 150ms ease",
+            opacity: active || callState.phase === "ended" ? 1 : 0.6,
+          }}
+        >
+          <Phone size={28} />
+        </div>
+        <div style={{ fontWeight: 600 }}>{agentName}</div>
+        {body}
+      </div>
+
+      <div style={{ display: "flex", gap: 8, padding: 12, justifyContent: "center", borderTop: `1px solid ${theme.colors.text}1a` }}>
+        {active ? (
+          <button
+            onClick={onHangUp}
+            data-testid="forge-agent-call-hangup"
+            style={{ ...primary, background: DANGER, color: readableTextOn(DANGER), display: "inline-flex", alignItems: "center", gap: 8 }}
+          >
+            <PhoneOff size={16} aria-hidden />
+            {t("forge.ai_agent_widget.call_hang_up")}
+          </button>
+        ) : (
+          <>
+            <button onClick={onRetry} style={primary} data-testid="forge-agent-call-again">
+              {callState.phase === "error" ? t("forge.ai_agent_widget.call_try_again") : t("forge.ai_agent_widget.call_again")}
+            </button>
+            <button onClick={onChat} style={secondary}>
+              {t("forge.ai_agent_widget.call_back_to_chat")}
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CallStatus({ text, color, alert }: { text: string; color?: string; alert?: boolean }) {
+  return (
+    <div role={alert ? "alert" : "status"} aria-live="polite" style={{ fontSize: 14, textAlign: "center", color }} data-testid="forge-agent-call-status">
+      {text}
     </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}