@tribe-nest/forge 3.64.0 → 3.67.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";
@@ -197,6 +206,17 @@ export { NewDmDialog, type NewDmDialogProps } from "./styled/chat/NewDmDialog";
 export { AiAgentWidget, type AiAgentWidgetProps } from "./styled/AiAgentWidget";
 export { Markdown } from "./styled/Markdown";
 export { useAiAgent, type AiAgentMessage } from "./headless/agent/useAiAgent";
+// "Call us". The room hook (`useAgentCallRoom`) is deliberately not exported
+// here: it imports the media SDK, and this entry is on every page. A custom
+// call UI imports the media hooks from `@tribe-nest/forge/media` itself.
+export {
+  useAgentCall,
+  classifyAgentCallError,
+  type AgentCallState,
+  type AgentCallErrorKind,
+  type UseAgentCallOptions,
+} from "./headless/agent/useAgentCall";
+export { solveCallChallenge, leadingZeroBits, type SolveCallChallengeOptions } from "./headless/agent/callChallenge";
 export { InvoicePayment, type InvoicePaymentProps } from "./styled/InvoicePayment";
 export { PaymentLinkPayment, type PaymentLinkPaymentProps } from "./styled/PaymentLinkPayment";
 export { BlogList, type BlogListProps } from "./styled/BlogList";
@@ -268,6 +288,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/AiAgentCallRoom.tsx

@@ -0,0 +1,76 @@
+import { useEffect, type ReactNode } from "react";
+import { useForgeT } from "../../i18n";
+import { MediaRoomProvider } from "../media";
+import { useAgentAudio, useAgentCallRoom, type AgentCallRoomStatus } from "../headless/agent/useAgentCallRoom";
+
+export interface AiAgentCallRoomProps {
+  getCredentials: () => Promise<{ mediaUrl: string; token: string }>;
+  /** This browser's identity in the room, from the start response. */
+  selfIdentity: string;
+  /** The agent's name, for the status line. */
+  agentName: string;
+  /** The room says the call is over: the agent left, or the room closed. */
+  onEnded: () => void;
+  /** Told every status change, so the widget can style around it. */
+  onStatus?: (status: AgentCallRoomStatus) => void;
+}
+
+/**
+ * The live half of "Call us": the media room, the microphone out and the
+ * agent's voice in.
+ *
+ * A DEFAULT export on purpose. `AiAgentWidget` is on every page of every site
+ * and reaches this through `React.lazy(() => import(...))`, so the media SDK
+ * and mediasoup are fetched only by a visitor who actually presses Call.
+ */
+export default function AiAgentCallRoom({ getCredentials, ...rest }: AiAgentCallRoomProps): ReactNode {
+  const t = useForgeT();
+  return (
+    <MediaRoomProvider
+      getCredentials={getCredentials}
+      fallback={<StatusLine text={t("forge.ai_agent_call_room.connecting")} />}
+    >
+      <LiveCall {...rest} />
+    </MediaRoomProvider>
+  );
+}
+
+function LiveCall({ selfIdentity, agentName, onEnded, onStatus }: Omit<AiAgentCallRoomProps, "getCredentials">) {
+  const t = useForgeT();
+  const { status, agentAudioProducerIds, setAgentSpeaking } = useAgentCallRoom({ selfIdentity, onEnded });
+
+  useEffect(() => {
+    onStatus?.(status);
+  }, [status, onStatus]);
+
+  const text =
+    status === "no_mic"
+      ? t("forge.ai_agent_call_room.no_mic")
+      : status === "speaking"
+        ? t("forge.ai_agent_call_room.speaking", { name: agentName })
+        : status === "listening"
+          ? t("forge.ai_agent_call_room.listening", { name: agentName })
+          : t("forge.ai_agent_call_room.connecting");
+
+  return (
+    <>
+      {agentAudioProducerIds.map((id) => (
+        <AgentAudio key={id} producerId={id} onSpeaking={setAgentSpeaking} />
+      ))}
+      <StatusLine text={text} alert={status === "no_mic"} />
+    </>
+  );
+}
+
+function AgentAudio({ producerId, onSpeaking }: { producerId: string; onSpeaking: (speaking: boolean) => void }) {
+  const attach = useAgentAudio(producerId, onSpeaking);
+  return <audio ref={attach} autoPlay data-testid="forge-agent-call-audio" />;
+}
+
+function StatusLine({ text, alert }: { text: string; alert?: boolean }) {
+  return (
+    <div role={alert ? "alert" : "status"} aria-live="polite" style={{ fontSize: 14, textAlign: "center" }} data-testid="forge-agent-call-status">
+      {text}
+    </div>
+  );
+}