@wix/himalaya-cli 0.1525.0 → 0.1527.0

package/templates/branded-lite/tier5-src/himi-booking-time/index.ts

@@ -1,5 +1,6 @@
+import { withOnlineWrites, offlineWritesEnabled } from "../_shared/online-actions.js";
 // Tier-5 bundle: himi-booking — availability and member booking.
-import { defineService } from "@himalaya/state";
+import { defineService as registerService, navigate } from "@himalaya/state";
 // Local-day keying + shared day/time labelling. `addDays` below stays local and
 // UTC-based on purpose: it bounds the availability QUERY window, which is an
 // instant range, not a calendar day.
@@ -13,12 +14,12 @@ import { hostedCheckoutOpener, isHostedWorker } from "../_shared/hosted-checkout
 import { session as wixPlatformSession } from "@himalaya/wix-platform";
 import { displayName, getMyData, type WixMyData } from "@himalaya/wix-users";
 import { formatServicePrice, serviceIsChargeable } from "../_shared/wix-service-price.js";
-import { stashCopy, copyParam, copyPlural } from "../_shared/himi-copy.js";
+import { stashCopy, copyParam, copyPlural, copyTemplate } from "../_shared/himi-copy.js";
 import { upsert as dbUpsert, remove as dbRemove, enqueue as dbEnqueue, type DbEntity } from "@himalaya/local-db";
 import { isBridgeUnavailable } from "../_shared/owner-load-error.js";
 import { emitHostEvent, hostEventInstant } from "../_shared/host-events.js";
 import { availabilityBeyond, courseReadWindows, courseSessionsAvailability, courseWindowOpen, slotIdAt } from "../_shared/himi-bookings.js";
-import { wixMediaUrl, WIX_DETAIL_IMAGE } from "@himalaya/wix-media";
+import { wixMediaUrl, WIX_DETAIL_IMAGE, WIX_LIST_IMAGE } from "@himalaya/wix-media";
 import { mayUseRegularBookingCheckout } from "../_shared/iap-attendance.js";
 import { ATTENDANCE_INITIAL, ATTENDANCE_NOT_HYDRATED, createAttendancePurchase, type AttendancePurchaseFields } from "../_shared/iap-attendance-purchase.js";
 import { resetUnhydratedKeysOnOlderRuntime } from "../_shared/iap-worker.js";
@@ -60,6 +61,55 @@ interface SlotRow {
   notSelectable: boolean;
   selected: boolean;
   notSelected: boolean;
+  /** The slot's start (ISO), for ordering and the pill label. */
+  start: string;
+  /** The staff member (`slot.resource`): id, else name; "" when the slot names none. */
+  staffKey: string;
+  staffName: string;
+  /** The slot's location key (id, else name + address) and its labels; "" when it has none. */
+  locKey: string;
+  locLabel: string;
+  locSub: string;
+}
+
+/** One time in a staff group: a pill with three looks. */
+interface TimePill {
+  id: string;
+  label: string;
+  badge: string;
+  hasBadge: boolean;
+  noBadge: boolean;
+  a11y: string;
+  available: boolean;
+  notAvailable: boolean;
+  picked: boolean;
+  notPicked: boolean;
+  unavailable: boolean;
+  notUnavailable: boolean;
+}
+
+/** The selected day's times for one staff member (or the times that name no one). */
+interface StaffGroup {
+  id: string;
+  name: string;
+  image: string;
+  hasImage: boolean;
+  noImage: boolean;
+  noStaffHeader: boolean;
+  hasStaffHeader: boolean;
+  times: TimePill[];
+}
+
+/** One row of the location sheet. `id` "" is "All locations". */
+interface LocationOption {
+  id: string;
+  label: string;
+  sub: string;
+  hasSub: boolean;
+  noSub: boolean;
+  selected: boolean;
+  notSelected: boolean;
+  a11y: string;
 }
 
 interface S extends AttendancePurchaseFields {
@@ -146,6 +196,38 @@ interface S extends AttendancePurchaseFields {
   bookingInFlight: boolean;
   notBooking: boolean;
   bookingsScreenId: string;
+  /** First day of the day strip (`YYYY-MM-DD`): today, or the first two weeks with times. */
+  windowStart: string;
+  /** The location filter: "" is every location. */
+  locationId: string;
+  locationLabel: string;
+  locationA11y: string;
+  locationOptions: LocationOption[];
+  locationSheetOpen: boolean;
+  /** Two or more locations: the trailing side of the day row opens the sheet. */
+  hasLocationMenu: boolean;
+  noLocationMenu: boolean;
+  /** Exactly one location with a name or an address: its name, not tappable. */
+  singleLocation: string;
+  hasSingleLocation: boolean;
+  noSingleLocation: boolean;
+  /** The selected day's times, grouped by staff member. */
+  groups: StaffGroup[];
+  /** The selected day has no time to book (the window has some). */
+  dayEmpty: boolean;
+  hasDayTimes: boolean;
+  /** Nothing to book in the next 90 days: one message under the header. */
+  noUpcoming: boolean;
+  hasUpcoming: boolean;
+  /** The result of a tap, in a sheet above the tab bar: a booking stays until closed, other
+   *  results close by themselves. */
+  resultText: string;
+  resultSticky: boolean;
+  resultAuto: boolean;
+  resultIsBooking: boolean;
+  resultNotBooking: boolean;
+  /** A course has no times: its messages stay on the screen, under its button. */
+  courseMessage: string;
 }
 
 /** One day-strip chip — the `FilterChips` option shape `dateStrip` binds. */
@@ -172,6 +254,19 @@ let allRows: SlotRow[] = [];
 // could neither see nor book. Worker state now carries one day's rows, so the
 // bound that list needed is gone, and the availability query has no paging.
 const WINDOW_DAYS = 14;
+/** How far ahead the screen looks for a first time, and for "Check Next Availability". */
+const HORIZON_DAYS = 90;
+const DAY_MS = 86_400_000;
+
+/** The service record of the last load (its type and waitlist policy shape new rows). */
+let lastService: WixService | undefined;
+/** The selected day's times that cannot be booked (full, too early, too late), by day. They show
+ *  greyed. Read with `bookable: false` for one day at a time, because that response is large. */
+let greyByDay = new Map<string, SlotRow[]>();
+/** Staff photos from the service's `staffMemberDetails`, by staff id and by name. */
+let staffPhotos = { byId: new Map<string, string>(), byName: new Map<string, string>() };
+/** True while a tap books. A second tap, or a tap during a booking, sends nothing. */
+let bookingLock = false;
 
 /** A course booking created by an earlier tap whose checkout or payment did not finish. It stays
  *  on Wix, so the next tap pays for THIS booking instead of creating a second one for the same
@@ -356,7 +451,187 @@ function chosenDay(arg: unknown): string {
   return typeof a?.id === "string" ? a.id : "";
 }
 
-/** Every day of the window from today (local), plus any day a slot lands on
+/** A slot's location: a key to compare by (id, else name + address) and its labels. A location
+ *  with neither a name nor an address has no key: it is not offered and not counted. */
+function locationOf(slot: WixBookingSlotFull): { key: string; label: string; sub: string } {
+  const loc = (slot.location ?? {}) as { id?: unknown; name?: unknown; formattedAddress?: unknown; locationType?: unknown };
+  const name = typeof loc.name === "string" ? loc.name.trim() : "";
+  const address = typeof loc.formattedAddress === "string" ? loc.formattedAddress.trim() : "";
+  const id = typeof loc.id === "string" ? loc.id : "";
+  if (loc.locationType === "CUSTOMER") return { key: id || "customer", label: copyParam("bookingCommon.clientPlace", "Client's place"), sub: "" };
+  if (!name && !address) return { key: "", label: "", sub: "" };
+  return { key: id || `${name}|${address}`, label: name || address, sub: name && address ? address : "" };
+}
+
+function staffOf(slot: WixBookingSlotFull): { key: string; name: string } {
+  const resource = (slot.resource ?? {}) as { id?: unknown; name?: unknown };
+  const name = typeof resource.name === "string" ? resource.name.trim() : "";
+  const id = typeof resource.id === "string" ? resource.id : "";
+  return { key: id || name, name };
+}
+
+/** The rows for one availability response. A class lists its full sessions too (greyed, or a
+ *  waitlist). Two slots at the same instant with different staff get distinct ids. */
+function slotRows(entries: ReadonlyArray<{ slot?: WixBookingSlotFull; bookable?: boolean; openSpots?: number; waitingList?: { openSpots?: number } }>, service: WixService | undefined): { rows: SlotRow[]; slots: Map<string, WixBookingSlotFull>; waitlist: Set<string> } {
+  const slots = new Map<string, WixBookingSlotFull>();
+  const waitlist = new Set<string>();
+  const rows: SlotRow[] = [];
+  const used = new Set<string>();
+  // Group by LOCAL calendar day, not by the formatted heading: two
+  // distinct days can render the same text, and a UTC-derived key can
+  // name a different day than the heading beside it.
+  const classService = service?.type === "CLASS";
+  for (const [index, entry] of entries
+    .filter((candidate) => candidate.slot?.startDate && (candidate.bookable !== false || (classService && candidate.openSpots === 0)))
+    .entries()) {
+    const slot = entry.slot as WixBookingSlotFull;
+    const key = dayKey(slot.startDate);
+    if (!key) continue;
+    const staff = staffOf(slot);
+    const base = String(slot.sessionId ?? slot.startDate ?? `slot-${index}`);
+    const slotId = used.has(base) ? `${base}#${staff.key || index}` : base;
+    used.add(slotId);
+    const openSpots = classService && typeof entry.openSpots === "number" && entry.openSpots >= 0 ? entry.openSpots : undefined;
+    const isWaitlist = openSpots === 0 && service?.bookingPolicy?.waitlistPolicy?.enabled === true &&
+      typeof entry.waitingList?.openSpots === "number" && entry.waitingList.openSpots > 0;
+    const selectable = (entry.bookable !== false && openSpots !== 0) || isWaitlist;
+    if (isWaitlist) waitlist.add(slotId);
+    else if (selectable) slots.set(slotId, slot);
+    const label = fmtRange(slot.startDate, slot.endDate);
+    const loc = locationOf(slot);
+    rows.push({
+      id: slotId,
+      dayKey: key,
+      day: label.day,
+      dayChip: dayLabel(slot.startDate, { format: "compact" }),
+      title: label.title,
+      subtitle: label.subtitle,
+      badge: openSpots == null ? "" : openSpots > 0
+        ? copyPlural("time.spotsLeft", "{n, plural, one {# spot left} other {# spots left}}", openSpots)
+        : isWaitlist ? copyParam("time.waitlistBadge", "Waitlist") : copyParam("time.fullBadge", "Full"),
+      noBadge: openSpots == null,
+      badgeWarning: openSpots != null && openSpots > 0 && openSpots <= 3,
+      badgeNeutral: openSpots == null || openSpots === 0 || openSpots > 3,
+      selectable,
+      notSelectable: !selectable,
+      selected: false,
+      notSelected: true,
+      start: slot.startDate ?? "",
+      staffKey: staff.key,
+      staffName: staff.name,
+      locKey: loc.key,
+      locLabel: loc.label,
+      locSub: loc.sub,
+    });
+  }
+  return { rows, slots, waitlist };
+}
+
+/** The unbookable times of one day's `bookable: false` response that are still ahead (full,
+ *  too early or too late to book). Never a past time, and never one the window already lists. */
+function greyRows(entries: ReadonlyArray<{ slot?: WixBookingSlotFull; bookable?: boolean }>, day: string, known: SlotRow[], now: number): SlotRow[] {
+  const seen = new Set(known.map((row) => `${row.start}|${row.staffKey}`));
+  const unbookable = entries.filter((entry) => entry.bookable === false && entry.slot?.startDate
+    && Date.parse(entry.slot.startDate) > now && dayKey(entry.slot.startDate) === day)
+    .map((entry) => ({ ...entry, bookable: true }));
+  return slotRows(unbookable, undefined).rows
+    .filter((row) => !seen.has(`${row.start}|${row.staffKey}`))
+    .map((row) => ({ ...row, id: `grey:${row.id}`, selectable: false, notSelectable: true }));
+}
+
+/** Earliest day first. A plain string compare: `YYYY-MM-DD` keys sort as text, and a worker on
+ *  a watch engine has no locale-aware string compare. */
+function byDay(a: SlotRow, b: SlotRow): number {
+  return a.dayKey < b.dayKey ? -1 : a.dayKey > b.dayKey ? 1 : 0;
+}
+
+function locationMatches(row: SlotRow, locationId: string): boolean {
+  return !locationId || row.locKey === locationId;
+}
+
+/** Every distinct location of the window's times (the greyed ones read so far included), in the
+ *  order they first appear. */
+function windowLocations(): Array<{ key: string; label: string; sub: string }> {
+  const seen = new Map<string, { key: string; label: string; sub: string }>();
+  for (const row of [...allRows, ...[...greyByDay.values()].flat()]) if (row.locKey && !seen.has(row.locKey)) seen.set(row.locKey, { key: row.locKey, label: row.locLabel, sub: row.locSub });
+  return [...seen.values()];
+}
+
+function staffPhoto(key: string, name: string): string {
+  return staffPhotos.byId.get(key) ?? (name ? staffPhotos.byName.get(name.toLowerCase()) : undefined) ?? "";
+}
+
+function readStaffPhotos(service: WixService | undefined): void {
+  const byId = new Map<string, string>();
+  const byName = new Map<string, string>();
+  for (const member of service?.staffMemberDetails?.staffMembers ?? []) {
+    const url = wixMediaUrl(member?.mainMedia?.image?.url, WIX_LIST_IMAGE);
+    if (!url) continue;
+    const m = member as { staffMemberId?: string; resourceId?: string; name?: string };
+    if (m.staffMemberId) byId.set(m.staffMemberId, url);
+    if (m.resourceId) byId.set(m.resourceId, url);
+    if (m.name) byName.set(m.name.trim().toLowerCase(), url);
+  }
+  staffPhotos = { byId, byName };
+}
+
+/** The selected day's times after the location filter, grouped by staff member. Groups are ordered
+ *  by their first time (ties by name); a group's times by start. Times that name no staff member
+ *  share one group with no header. */
+function groupsOf(s: S): StaffGroup[] {
+  const day = [...allRows, ...(greyByDay.get(s.selectedDay) ?? [])]
+    .filter((row) => row.dayKey === s.selectedDay && locationMatches(row, s.locationId))
+    .sort((a, b) => Date.parse(a.start) - Date.parse(b.start));
+  const anyStaff = day.some((row) => row.staffKey);
+  const groups = new Map<string, { name: string; rows: SlotRow[] }>();
+  for (const row of day) {
+    const key = anyStaff ? row.staffKey : "";
+    const group = groups.get(key) ?? { name: row.staffName, rows: [] };
+    group.rows.push(row);
+    groups.set(key, group);
+  }
+  return [...groups.entries()]
+    .sort(([ka, a], [kb, b]) => (!ka ? 1 : !kb ? -1 : 0) || Date.parse(a.rows[0]!.start) - Date.parse(b.rows[0]!.start) || (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+    .map(([key, group]) => {
+      const image = key ? staffPhoto(key, group.name) : "";
+      return {
+        id: key || "none",
+        name: group.name,
+        image,
+        hasImage: !!image,
+        noImage: !image,
+        noStaffHeader: !key,
+        hasStaffHeader: !!key,
+        times: group.rows.map((row) => {
+          const picked = row.selectable && row.id === s.selectedSlotId;
+          const available = row.selectable && !picked;
+          const label = row.title;
+          const named = group.name
+            ? copyTemplate("time.slotLabel", "{time} with {staff}", { time: label, staff: group.name })
+            : label;
+          const a11y = row.selectable
+            ? [named, row.badge, picked ? copyParam("bookingCommon.selected", "Selected") : ""].filter(Boolean).join(", ")
+            : copyTemplate("time.slotUnavailable", "{time}, unavailable", { time: label });
+          return {
+            id: row.id,
+            label,
+            badge: row.badge,
+            hasBadge: !!row.badge,
+            noBadge: !row.badge,
+            a11y,
+            available,
+            notAvailable: !available,
+            picked,
+            notPicked: !picked,
+            unavailable: !row.selectable,
+            notUnavailable: row.selectable,
+          };
+        }),
+      };
+    });
+}
+
+/** Every day of the window from `now` (local), plus any day a slot lands on
  *  outside it, sorted — each with its slot count. */
 function daysOf(rows: SlotRow[], now: Date = new Date()): DayOption[] {
   const counts = new Map<string, number>();
@@ -377,7 +652,7 @@ function daysOf(rows: SlotRow[], now: Date = new Date()): DayOption[] {
   });
 }
 
-/** Show `day`: its rows (selection flags from the current selection) + heading. */
+/** Show `day`: its heading. `derive` fills its rows from the current selection and location. */
 function withDay(s: S, day: string): S {
   const rows = allRows.filter((row) => row.dayKey === day);
   const noon = day ? new Date(`${day}T12:00:00`) : null;
@@ -389,12 +664,48 @@ function withDay(s: S, day: string): S {
   };
 }
 
-function derive(s: S): S {
+/** The day strip, the day's rows, the staff groups and the location row, from the window's rows,
+ *  the selected day and the location filter. Only for a loaded list of times (not a course). */
+function timesView(s: S): Pick<S, "days" | "slots" | "groups" | "locationOptions" | "locationLabel" | "locationA11y" | "hasLocationMenu" | "noLocationMenu" | "singleLocation" | "hasSingleLocation" | "noSingleLocation"> {
+  const all = copyParam("time.allLocations", "All locations");
+  const shown = s.status === "ready" && !s.isCourse && !s.errored && !!s.windowStart;
+  const locations = shown ? windowLocations() : [];
+  const visible = allRows.filter((row) => locationMatches(row, s.locationId));
+  const label = s.locationId ? (locations.find((l) => l.key === s.locationId)?.label ?? all) : all;
+  const single = locations.length === 1 ? locations[0]!.label : "";
+  return {
+    days: shown ? daysOf(visible, new Date(`${s.windowStart}T12:00:00`)) : s.days,
+    slots: shown
+      ? visible.filter((row) => row.dayKey === s.selectedDay).map((row) => ({ ...row, selected: row.id === s.selectedSlotId, notSelected: row.id !== s.selectedSlotId }))
+      : s.slots,
+    groups: shown ? groupsOf(s) : [],
+    locationOptions: locations.length >= 2 ? [{ key: "", label: all, sub: "" }, ...locations].map((l) => {
+      const selected = l.key === s.locationId;
+      return { id: l.key, label: l.label, sub: l.sub, hasSub: !!l.sub, noSub: !l.sub, selected, notSelected: !selected,
+        a11y: [l.label, l.sub, selected ? copyParam("bookingCommon.selected", "Selected") : ""].filter(Boolean).join(", ") };
+    }) : [],
+    locationLabel: label,
+    locationA11y: copyTemplate("time.locationLabel", "Location, {label}", { label }),
+    hasLocationMenu: locations.length >= 2,
+    noLocationMenu: locations.length < 2,
+    singleLocation: single,
+    hasSingleLocation: !!single,
+    noSingleLocation: !single,
+  };
+}
+
+function derive(input: S): S {
+  const s: S = { ...input, ...timesView(input) };
   const regular = regularCheckoutAllowed || applePurchase.usesRegularPlatform();
   // `hasSlots` is the WHOLE window (it drives the screen-level empty state); the
   // selected day having none is a per-day line, not an empty screen.
   const hasSlots = s.days.some((d) => d.hasSlots) || s.slots.length > 0;
   const hasDaySlots = s.slots.length > 0;
+  const timesShown = s.status === "ready" && !s.isCourse && !s.errored;
+  // Nothing to BOOK in the 90 days: a class's full sessions alone (grey rows) are no upcoming session.
+  const noUpcoming = timesShown && !allRows.some((row) => row.selectable);
+  const dayEmpty = timesShown && !noUpcoming && !s.slots.some((row) => row.selectable);
+  const resultText = s.isCourse ? "" : (s.successMessage || s.message);
   const hasSelected = s.isCourse ? !!s.scheduleId && s.courseAvailable : !!s.selectedSlotId;
   const selectedWaitlist = !s.isCourse && waitlistIds.has(s.selectedSlotId);
   const hasSuccess = !!s.successMessage;
@@ -406,7 +717,7 @@ function derive(s: S): S {
     _poll: undefined,
     servicePrice: regular ? regularServicePrice : "",
     // A course is booked whole, not from the 14-day window of times, so it has no window line.
-    serviceLine: s.status === "ready" ? [s.serviceDuration, regular ? regularServicePrice : "", s.isCourse ? "" : copyParam("time.availabilityWindow", "Available in the next 14 days")].filter(Boolean).join(" · ") : s.serviceLine,
+    serviceLine: s.status === "ready" ? [s.serviceDuration, regular ? regularServicePrice : ""].filter(Boolean).join(" · ") : s.serviceLine,
     message: regular && !regularCheckoutAllowed && s.message === copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable.") ? "" : s.message,
     hasSlots,
     // A waitlist pick or a course is not an in-app purchase: neither enables the Apple button.
@@ -426,9 +737,21 @@ function derive(s: S): S {
     noWindowSlots: !hasSlots && !s.isCourse,
     // Only a quiet DAY in a window that has times gets the per-day line; a
     // window with no times at all is the screen-level empty state's job.
-    dayEmptyText: hasDaySlots || !s.selectedDay || !hasSlots
+    // The window (not the location filter) decides: a location with only greyed times keeps the
+    // strip, the location row and "Check Next Availability".
+    dayEmptyText: !dayEmpty || !s.selectedDay
       ? ""
-      : copyParam("time.dayEmptyText", "No times on this day. Try another day."),
+      : copyParam("time.dayEmptyText", "Nothing available for this date."),
+    dayEmpty: dayEmpty && !!s.selectedDay,
+    hasDayTimes: !(dayEmpty && !!s.selectedDay),
+    noUpcoming,
+    hasUpcoming: !noUpcoming,
+    resultText,
+    resultSticky: !!resultText && !!s.successMessage,
+    resultAuto: !!resultText && !s.successMessage,
+    resultIsBooking: !!s.successMessage,
+    resultNotBooking: !s.successMessage,
+    courseMessage: s.isCourse ? (s.successMessage || s.message) : "",
     hasSuccess,
     noSuccess: !hasSuccess,
     canBook,
@@ -437,8 +760,8 @@ function derive(s: S): S {
     hideCourseBook: !canBook || !s.isCourse,
     // Joining a waitlist buys nothing, so it does not wait on the purchase route.
     hideWaitlistBook: !s.isMember || !hasSelected || s.isCourse || !selectedWaitlist || s.bookingInFlight || hasSuccess,
-    hideDayPicker: s.isCourse || !hasSlots,
-    hideDaySlots: s.isCourse || !hasDaySlots,
+    hideDayPicker: s.isCourse || !timesShown || noUpcoming,
+    hideDaySlots: s.isCourse || s.groups.length === 0,
     hideDayEmpty: s.isCourse || hasDaySlots,
     showChoosePrompt,
     hideChoosePrompt: !showChoosePrompt,
@@ -575,12 +898,108 @@ async function resolveMsid(): Promise<string> {
   }
 }
 
+/** Read `day`'s unbookable times once (cached). A failure shows the bookable times only. */
+async function loadGreyDay(serviceId: string, day: string): Promise<void> {
+  if (!day || greyByDay.has(day)) return;
+  const from = new Date(`${day}T00:00:00`);
+  const until = new Date(from.getFullYear(), from.getMonth(), from.getDate() + 1);
+  if (Number.isNaN(from.getTime())) return;
+  try {
+    const res = await queryServiceAvailability(serviceId, isoDate(from), isoDate(until), { bookable: false });
+    greyByDay.set(day, greyRows(res.availabilityEntries ?? [], day, allRows, Date.now()));
+  } catch {
+    greyByDay.set(day, []);
+  }
+}
+
+/** The first two-week window from `from` with a time to book (at `locationId`, "" for any), up to
+ *  90 days after `now`: at most seven reads. `undefined` when there is none. */
+async function nextWindowWithTimes(serviceId: string, from: Date, now: Date, includeFull: boolean, service: WixService | undefined, locationId: string): Promise<{ built: ReturnType<typeof slotRows>; windowStart: string } | undefined> {
+  const horizon = now.getTime() + HORIZON_DAYS * DAY_MS;
+  for (let start = new Date(from.getFullYear(), from.getMonth(), from.getDate()); start.getTime() < horizon;
+    start = new Date(start.getFullYear(), start.getMonth(), start.getDate() + WINDOW_DAYS)) {
+    // Calendar days, as the step above: across a DST change 14 × 24 h would end the window an hour
+    // short of where the next one starts.
+    const until = new Date(Math.min(new Date(start.getFullYear(), start.getMonth(), start.getDate() + WINDOW_DAYS).getTime(), horizon));
+    const res = await queryServiceAvailability(serviceId, isoDate(new Date(Math.max(start.getTime(), now.getTime()))), isoDate(until), { bookable: !includeFull });
+    const built = slotRows(res.availabilityEntries ?? [], service);
+    if (built.rows.some((row) => row.selectable && locationMatches(row, locationId))) return { built, windowStart: dayKey(start) };
+  }
+  return undefined;
+}
+
+/** After a booking went through (or its checkout opened, which already holds a booking), the time
+ *  is no longer bookable here: it shows greyed and is no longer selected, so another tap on it cannot
+ *  send a second booking or charge. */
+function afterBooking(result: S, slotId: string): S {
+  const booked = !!result.successMessage || result.message === copyParam("time.checkoutOpened", "Complete your payment in the checkout to confirm this booking.");
+  if (!booked || !slotId || result.isCourse) return result;
+  allRows = allRows.map((row) => row.id === slotId ? { ...row, selectable: false, notSelectable: true } : row);
+  slotsById.delete(slotId);
+  waitlistIds.delete(slotId);
+  return derive({ ...result, selectedSlotId: "", selectedLine: "" });
+}
+
+/** The selection, kept only while its time is still in the window and at the chosen location: a
+ *  hidden pick would leave the in-app purchase button buying a time the screen no longer shows. */
+function visibleSelection(s: S): S {
+  const row = allRows.find((r) => r.id === s.selectedSlotId);
+  return row && row.selectable && locationMatches(row, s.locationId) ? s : { ...s, selectedSlotId: "", selectedLine: "" };
+}
+
+/** Counts day changes, so a slow read for an older day choice cannot move the screen back to it. */
+let dayRevision = 0;
+/** True while "Check Next Availability" searches; a second tap waits for the first. */
+let checkingNextLock = false;
+
+/** `{ slotId, signInScreenId }` from a pill tap (or a bare slot id). */
+function tapped(arg: unknown): { slotId: string; signInScreenId: string } {
+  if (typeof arg === "string") return { slotId: arg, signInScreenId: "" };
+  const a = (arg ?? {}) as { slotId?: unknown; id?: unknown; signInScreenId?: unknown };
+  const slotId = typeof a.slotId === "string" ? a.slotId : typeof a.id === "string" ? a.id : "";
+  return { slotId, signInScreenId: typeof a.signInScreenId === "string" ? a.signInScreenId : "" };
+}
+
+/** Select a bookable time, as a tap does: the pick-storage rules and the selection revision. */
+function selectSlotIn(s: S, slotId: string): S {
+  const selected = allRows.find((slot) => slot.id === slotId && slot.selectable);
+  if (selected) {
+    selectionRevision++;
+    pendingStart = "";
+    pendingSession = "";
+    if (s.isMember) clearPick();
+    else rememberPick(s.id, slotId);
+  }
+  return derive({
+    ...s,
+    selectedSlotId: selected ? slotId : s.selectedSlotId,
+    selectedLine: selected ? [selected.day, selected.title, selected.subtitle].filter(Boolean).join(" · ") : s.selectedLine,
+    message: "",
+    successMessage: "",
+    slots: s.slots.map((slot) => ({ ...slot, selected: slot.id === slotId, notSelected: slot.id !== slotId })),
+  });
+}
+
 const id = inputId();
+// A member's tap on a time books it, so pickSlot needs a connection too; a guest's tap only opens
+// the sign-in screen (or the sign-in card), which works offline.
+const defineService = withOnlineWrites(registerService, ["bookSelected", "buyApple", "signIn", "register", "pickSlot"], {
+  derive,
+  secretFields: ["password"],
+  requiresConnectivity: (action, state, arg) => action !== "pickSlot" || (state.isMember
+    && (regularCheckoutAllowed || applePurchase.usesRegularPlatform() || waitlistIds.has(tapped(arg).slotId))),
+});
 const svc = defineService<S, {
   load: (s: S, arg?: unknown) => Promise<S>;
   refreshMember: (s: S, arg?: unknown) => Promise<S>;
-  selectDay: (s: S, arg?: unknown) => S;
+  selectDay: (s: S, arg?: unknown) => Promise<S>;
   selectSlot: (s: S, arg?: unknown) => S;
+  pickSlot: (s: S, arg?: unknown) => Promise<S | undefined>;
+  openLocations: (s: S) => S;
+  closeLocations: (s: S) => S;
+  selectLocation: (s: S, arg?: unknown) => Promise<S>;
+  checkNext: (s: S) => Promise<S>;
+  closeResult: (s: S) => S;
   setEmail: (s: S, arg?: unknown) => S;
   setPassword: (s: S, arg?: unknown) => S;
   setFirstName: (s: S, arg?: unknown) => S;
@@ -667,6 +1086,28 @@ const svc = defineService<S, {
     bookingInFlight: false,
     notBooking: true,
     bookingsScreenId: "himi_bookings",
+    windowStart: "",
+    locationId: "",
+    locationLabel: "All locations",
+    locationA11y: "",
+    locationOptions: [],
+    locationSheetOpen: false,
+    hasLocationMenu: false,
+    noLocationMenu: true,
+    singleLocation: "",
+    hasSingleLocation: false,
+    noSingleLocation: true,
+    groups: [],
+    dayEmpty: false,
+    hasDayTimes: true,
+    noUpcoming: false,
+    hasUpcoming: true,
+    resultText: "",
+    resultSticky: false,
+    resultAuto: false,
+    resultIsBooking: false,
+    resultNotBooking: true,
+    courseMessage: "",
   }),
   actions: {
     iapPublish: (s) => derive(lastReady ?? s),
@@ -688,7 +1129,12 @@ const svc = defineService<S, {
       try {
         const now = new Date();
         const beyond = availabilityBeyond(now, farStart);
-        const serviceRes = await getService(s.id).catch(() => ({ service: undefined }));
+        // Staff photos need STAFF_MEMBER_DETAILS; a token that may not read them still gets the service.
+        const serviceRes = await getService(s.id, { conditionalFields: ["STAFF_MEMBER_DETAILS"] })
+          .catch(() => getService(s.id))
+          .catch(() => ({ service: undefined }));
+        lastService = serviceRes.service;
+        readStaffPhotos(serviceRes.service);
         if (courseInput && !serviceRes.service) {
           slotsById = new Map();
           allRows = [];
@@ -739,54 +1185,28 @@ const svc = defineService<S, {
           });
         }
         const includeFull = serviceRes.service?.type === "CLASS";
-        const [availability, target] = await Promise.all([
-          queryServiceAvailability(s.id, isoDate(now), isoDate(new Date(now.getTime() + WINDOW_DAYS * 86_400_000)), { bookable: !includeFull }),
+        const [first, target] = await Promise.all([
+          queryServiceAvailability(s.id, isoDate(now), isoDate(new Date(now.getTime() + WINDOW_DAYS * DAY_MS)), { bookable: !includeFull }),
           // A host's start past the window (an Agenda session weeks out): its day alone, so it can
           // be preselected. Its failure costs only that preselection.
           beyond ? queryServiceAvailability(s.id, isoDate(beyond.from), isoDate(beyond.until), { bookable: !includeFull }).catch(() => ({ availabilityEntries: [] })) : undefined,
         ]);
-        slotsById = new Map();
-        waitlistIds = new Set();
-        const rows: SlotRow[] = [];
-        // Group by LOCAL calendar day, not by the formatted heading: two
-        // distinct days can render the same text, and a UTC-derived key can
-        // name a different day than the heading beside it.
-        const classService = serviceRes.service?.type === "CLASS";
-        for (const [index, entry] of [...(availability.availabilityEntries ?? []), ...(target?.availabilityEntries ?? [])]
-          .filter((candidate) => candidate.slot?.startDate && (candidate.bookable !== false || (classService && candidate.openSpots === 0)))
-          .entries()) {
-          const slot = entry.slot as WixBookingSlotFull;
-          const key = dayKey(slot.startDate);
-          if (!key) continue;
-          const slotId = String(slot.sessionId ?? slot.startDate ?? `slot-${index}`);
-          const openSpots = classService && typeof entry.openSpots === "number" && entry.openSpots >= 0 ? entry.openSpots : undefined;
-          const waitlist = openSpots === 0 && serviceRes.service?.bookingPolicy?.waitlistPolicy?.enabled === true &&
-            typeof entry.waitingList?.openSpots === "number" && entry.waitingList.openSpots > 0;
-          const selectable = (entry.bookable !== false && openSpots !== 0) || waitlist;
-          if (waitlist) waitlistIds.add(slotId);
-          else if (selectable) slotsById.set(slotId, slot);
-          const label = fmtRange(slot.startDate, slot.endDate);
-          rows.push({
-            id: slotId,
-            dayKey: key,
-            day: label.day,
-            dayChip: dayLabel(slot.startDate, { format: "compact" }),
-            title: label.title,
-            subtitle: label.subtitle,
-            badge: openSpots == null ? "" : openSpots > 0
-              ? copyPlural("time.spotsLeft", "{n, plural, one {# spot left} other {# spots left}}", openSpots)
-              : waitlist ? copyParam("time.waitlistBadge", "Waitlist") : copyParam("time.fullBadge", "Full"),
-            noBadge: openSpots == null,
-            badgeWarning: openSpots != null && openSpots > 0 && openSpots <= 3,
-            badgeNeutral: openSpots == null || openSpots === 0 || openSpots > 3,
-            selectable,
-            notSelectable: !selectable,
-            selected: false,
-            notSelected: true,
-          });
+        let built = slotRows([...(first.availabilityEntries ?? []), ...(target?.availabilityEntries ?? [])], serviceRes.service);
+        let windowStart = dayKey(now);
+        // Nothing to book in the first two weeks (a class's full sessions do not count), and nothing
+        // at a host's deep-linked start either: look further, two weeks at a time, up to 90 days. The
+        // strip then starts at the first two weeks with a time. Nothing in 90 days → "no upcoming
+        // sessions".
+        if (!built.rows.some((row) => row.selectable)) {
+          const later = await nextWindowWithTimes(s.id, new Date(now.getTime() + WINDOW_DAYS * DAY_MS), now, includeFull, serviceRes.service, "");
+          if (later) { built = later.built; windowStart = later.windowStart; }
         }
+        slotsById = built.slots;
+        waitlistIds = built.waitlist;
+        const rows = built.rows;
         allRows = rows;
-        const days = daysOf(rows);
+        greyByDay = new Map();
+        const days = daysOf(rows, new Date(`${windowStart}T12:00:00`));
         const header = serviceHeaderFields(serviceRes.service);
         regularServicePrice = header.price;
         regularCheckoutAllowed = await mayUseRegularBookingCheckout(serviceRes.service);
@@ -810,9 +1230,18 @@ const svc = defineService<S, {
         // otherwise open on the first day that has any.
         const keep = days.find((d) => d.id === chosen.selectedDay && d.hasSlots);
         const initialDay = startRow?.dayKey ?? startDay?.id ?? picked?.dayKey ?? keep?.id ?? days.find((d) => d.hasSlots)?.id ?? days[0]?.id ?? "";
+        if (!includeFull && initialDay) await loadGreyDay(s.id, initialDay);
+        // A location with no times left in the window goes back to "All locations".
+        // A location with no times left (greyed ones included) goes back to "All locations", and so
+        // does a filter that would hide the time this load restores (a host's start, a guest's pick).
+        const restored = startRow ?? picked;
+        const locationId = windowLocations().some((l) => l.key === chosen.locationId) && (!restored || locationMatches(restored, chosen.locationId))
+          ? chosen.locationId : "";
         return derive(withDay({
           ...next,
           days,
+          windowStart,
+          locationId,
           selectedSlotId: startRow ? startRow.id : selectionAlive ? chosen.selectedSlotId : picked?.id ?? "",
           selectedLine: startRow ? [startRow.day, startRow.title, startRow.subtitle].filter(Boolean).join(" · ")
             : selectionAlive ? chosen.selectedLine
@@ -820,14 +1249,17 @@ const svc = defineService<S, {
           status: "ready",
           errored: false,
           serviceName: serviceRes.service?.name || copyParam("time.serviceNameFallback", "Choose a time"),
-          serviceLine: [header.duration, regularCheckoutAllowed ? header.price : "", copyParam("time.availabilityWindow", "Available in the next 14 days")].filter(Boolean).join(" · "),
+          serviceLine: [header.duration, regularCheckoutAllowed ? header.price : ""].filter(Boolean).join(" · "),
           serviceImage: header.image,
           hasServiceImage: !!header.image,
           noServiceImage: !header.image,
           servicePrice: regularCheckoutAllowed ? header.price : "",
           serviceDuration: header.duration,
           serviceIsPaid: header.paid,
-          message: regularCheckoutAllowed || !applePurchase.fields(true, false).iapBuyHidden ? "" : copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable."),
+          // A guest's pick restored after sign-in stays picked: the member taps it to book. The
+          // screen never books from a load (two loads can run at once right after a sign-in).
+          // Where nothing can be bought here, a tap says so (pickSlot), not the screen's opening.
+          message: picked ? copyParam("time.signedInTapAgain", "Signed in. Tap the time again to book it.") : "",
         }, initialDay));
       } catch {
         slotsById = new Map();
@@ -840,35 +1272,74 @@ const svc = defineService<S, {
     // selection; the strip is single-select with no "none", so the day stays.
     // A time picked on another day stays selected (the selected line and the
     // Book button keep naming it): switching days to compare is not a reset.
-    selectDay: (s, arg) => {
+    selectDay: async (s, arg): Promise<S> => {
       const day = chosenDay(arg);
       if (!day || !s.days.some((d) => d.id === day)) return derive(s);
       pendingStart = "";
       pendingSession = "";
-      return derive(withDay(s, day));
+      const revision = ++dayRevision;
+      if (lastService?.type !== "CLASS") await loadGreyDay(s.id, day);
+      const current = svc.getState?.() ?? s;
+      return derive(revision === dayRevision ? withDay(current, day) : current);
     },
     refreshMember: (s, arg) => { stashCopy(arg); return probeMember(s); },
-    selectSlot: (s, arg) => {
-      const slotId = typeof arg === "string"
-        ? arg
-        : ((arg as { id?: string; slotId?: string })?.slotId ?? (arg as { id?: string })?.id ?? "");
-      const selected = allRows.find((slot) => slot.id === slotId && slot.selectable);
-      if (selected) {
-        selectionRevision++;
-        pendingStart = "";
-        pendingSession = "";
-        if (s.isMember) clearPick();
-        else rememberPick(s.id, slotId);
+    selectSlot: (s, arg) => selectSlotIn(s, tapped(arg).slotId),
+    // One tap books: the tap does what "Book selected time" did (select, then book). A guest keeps
+    // the pick and signs in first; after the sign-in the time comes back picked, and the member
+    // taps it again. Where the regular checkout is not allowed, the tap selects the time for the
+    // in-app purchase button.
+    pickSlot: async (s, arg): Promise<S | undefined> => {
+      const { slotId, signInScreenId } = tapped(arg);
+      if (bookingLock || s.bookingInFlight || !allRows.some((row) => row.id === slotId && row.selectable)) return derive(s);
+      const selected = selectSlotIn(s, slotId);
+      if (!s.isMember) {
+        // Branded Lite opens its sign-in screen; other apps show the sign-in card on this screen.
+        return signInScreenId ? navigate(selected, { screenId: signInScreenId, args: { mode: "signin", intent: "book" } }) : selected;
+      }
+      const regular = regularCheckoutAllowed || applePurchase.usesRegularPlatform();
+      if (!regular && !waitlistIds.has(slotId)) {
+        // The in-app purchase button takes over for the picked time; with none, say why not.
+        return applePurchase.fields(true, false).iapBuyHidden
+          ? derive({ ...selected, message: copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable.") })
+          : selected;
+      }
+      bookingLock = true;
+      try {
+        return afterBooking(await bookSelectedIn(selected), slotId);
+      } finally {
+        bookingLock = false;
       }
-      return derive({
-        ...s,
-        selectedSlotId: selected ? slotId : s.selectedSlotId,
-        selectedLine: selected ? [selected.day, selected.title, selected.subtitle].filter(Boolean).join(" · ") : s.selectedLine,
-        message: "",
-        successMessage: "",
-        slots: s.slots.map((slot) => ({ ...slot, selected: slot.id === slotId, notSelected: slot.id !== slotId })),
-      });
     },
+    openLocations: (s) => derive({ ...s, locationSheetOpen: true }),
+    closeLocations: (s) => derive({ ...s, locationSheetOpen: false }),
+    selectLocation: async (s, arg): Promise<S> => {
+      const raw = (arg ?? {}) as { locationId?: unknown; id?: unknown };
+      const wanted = typeof arg === "string" ? arg : typeof raw.locationId === "string" ? raw.locationId : typeof raw.id === "string" ? raw.id : "";
+      const locationId = windowLocations().some((l) => l.key === wanted) ? wanted : "";
+      const next = visibleSelection({ ...s, locationId, locationSheetOpen: false });
+      // Stay on the day when it has a time at this location; else go to the first day that has one.
+      const keep = allRows.some((row) => row.dayKey === s.selectedDay && row.selectable && locationMatches(row, locationId));
+      const first = allRows.filter((row) => row.selectable && locationMatches(row, locationId)).sort(byDay)[0];
+      const revision = ++dayRevision;
+      if (keep || !first) return derive(next);
+      if (lastService?.type !== "CLASS") await loadGreyDay(s.id, first.dayKey);
+      // A newer day or location choice made during the read wins.
+      if (revision !== dayRevision) return derive(svc.getState?.() ?? next);
+      const current = svc.getState?.() ?? next;
+      return derive(withDay(visibleSelection({ ...current, locationId, locationSheetOpen: false }), first.dayKey));
+    },
+    // The next day after the selected one with a time (at the chosen location): in the loaded
+    // window first, then forward up to 90 days, moving the strip.
+    checkNext: async (s): Promise<S> => {
+      if (checkingNextLock) return derive(s);
+      checkingNextLock = true;
+      try {
+        return await checkNextIn(s);
+      } finally {
+        checkingNextLock = false;
+      }
+    },
+    closeResult: (s) => derive({ ...s, message: "", successMessage: "" }),
     setEmail: (s, arg) => derive({ ...s, email: strOf(arg), message: "" }),
     setPassword: (s, arg) => derive({ ...s, password: strOf(arg), message: "" }),
     setFirstName: (s, arg) => derive({ ...s, firstName: strOf(arg), message: "" }),
@@ -889,7 +1360,7 @@ const svc = defineService<S, {
           isRegistering: false,
           message: s.isCourse
             ? copyParam("time.courseSignedInReady", "Signed in. You can book this course now.")
-            : copyParam("time.signedInReady", "Signed in. You can book this time now."),
+            : copyParam("time.signedInTapAgain", "Signed in. Tap the time again to book it."),
         });
       } catch {
         return derive({ ...s, password: "", message: copyParam("time.signInFailed", "Sign in failed. Try again.") });
@@ -914,225 +1385,273 @@ const svc = defineService<S, {
           isRegistering: false,
           message: s.isCourse
             ? copyParam("time.courseRegisterReady", "Account created. You can book this course now.")
-            : copyParam("time.registerReady", "Account created. You can book this time now."),
+            : copyParam("time.signedInTapAgain", "Signed in. Tap the time again to book it."),
         });
       } catch {
         return derive({ ...s, password: "", message: copyParam("time.registerFailed", "Account creation failed. Try another email.") });
       }
     },
+    // Kept for the course button and the offline replay (WriteQueue replays this action).
     bookSelected: async (s) => {
-      if (!s.isMember) return derive({ ...s, message: copyParam("time.bookNeedsSignIn", "Sign in before booking.") });
-      if (s.isCourse && !s.scheduleId) return derive({ ...s, message: copyParam("time.courseUnavailable", "Course booking is unavailable right now.") });
-      if (!s.isCourse && !s.selectedSlotId) return derive({ ...s, message: copyParam("time.bookNeedsSlot", "Choose one time first.") });
-      const joiningWaitlist = !s.isCourse && waitlistIds.has(s.selectedSlotId);
-      const slot = s.isCourse ? undefined : slotsById.get(s.selectedSlotId);
-      if (!s.isCourse && !slot && !joiningWaitlist) return derive({ ...s, message: copyParam("time.bookSlotGone", "That time is no longer available. Try again.") });
-      // A booking is paid through the regular checkout only where that is allowed; joining a
-      // waitlist buys nothing, so it skips this check.
-      if (!joiningWaitlist) {
-        try {
-          const current = await getService(s.id);
-          // A course is booked whole, never one of its sessions as a time: a screen opened with no
-          // `course` input whose first service read failed lists the sessions as times.
-          if (!s.isCourse && current.service?.type === "COURSE") return derive({ ...s, message: copyParam("time.courseUnavailable", "Course booking is unavailable right now.") });
-          regularCheckoutAllowed = await mayUseRegularBookingCheckout(current.service);
-          if (serviceHeaderFields(current.service).paid !== s.serviceIsPaid) return derive({ ...s, message: copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable.") });
-        } catch {
-          if (s.serviceIsPaid) return derive({ ...s, message: copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable.") });
-        }
-        if (!regularCheckoutAllowed) return derive({ ...s, message: copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable.") });
+      if (bookingLock) return derive(s);
+      bookingLock = true;
+      try {
+        return afterBooking(await bookSelectedIn(s), s.selectedSlotId);
+      } finally {
+        bookingLock = false;
       }
-      // A confirmed booking is reported to the app hosting this screen (an embed's `onAction`), so a
-      // host chat can say so and refresh what it shows. Dropped where nothing hosts the screen.
-      // The booking's own instants carry an offset; a slot's may be LOCAL to its timezone, which
-      // `emitHostEvent` leaves out rather than let the host read it in its own zone.
-      const reportBooked = (booking: { id?: string; startDate?: string; endDate?: string } | undefined) => emitHostEvent("booking.created", {
-        bookingId: booking?.id,
-        serviceId: s.id,
-        serviceName: s.serviceName,
-        start: hostEventInstant(booking?.startDate) || slot?.startDate || s.courseStart,
-        end: hostEventInstant(booking?.endDate) || slot?.endDate || s.courseEnd,
-      });
-      // The member acts on the pick now; a later visit must not restore it.
-      clearPick();
-      if (joiningWaitlist) {
-        const pending = derive({ ...s, bookingInFlight: true, message: "", successMessage: "" });
-        const my = await getMyData().catch(() => ({ email: s.email } as WixMyData));
-        const email = (await signedInEmail()) || my.email || my.contactEmail || s.email;
-        const name = contactName(displayName(my) || email);
-        try {
-          await registerToWaitlist(s.selectedSlotId, { email, firstName: name.first, lastName: name.last });
-          return derive({ ...pending, bookingInFlight: false,
-            successMessage: copyParam("time.waitlistJoined", "You're on the waitlist. Check My Bookings for updates."), message: "" });
-        } catch {
-          return derive({ ...s, bookingInFlight: false,
-            message: copyParam("time.waitlistFailed", "Couldn't join the waitlist. Try again.") });
+    },
+  },
+});
+
+/** "Check Next Availability": the next day after the selected one with a time (at the chosen
+ *  location), in the loaded window first, then forward up to 90 days, moving the strip. */
+async function checkNextIn(s: S): Promise<S> {
+  const next = allRows.filter((row) => row.selectable && row.dayKey > s.selectedDay && locationMatches(row, s.locationId))
+    .sort(byDay)[0];
+  if (next) {
+    const revision = ++dayRevision;
+    if (lastService?.type !== "CLASS") await loadGreyDay(s.id, next.dayKey);
+    const current = svc.getState?.() ?? s;
+    return derive(revision === dayRevision ? withDay(current, next.dayKey) : current);
+  }
+  const revision = ++dayRevision;
+  const after = new Date(`${s.selectedDay || s.windowStart}T12:00:00`);
+  const from = new Date(after.getFullYear(), after.getMonth(), after.getDate() + 1);
+  const includeFull = lastService?.type === "CLASS";
+  let later: Awaited<ReturnType<typeof nextWindowWithTimes>>;
+  try {
+    later = Number.isNaN(from.getTime()) ? undefined : await nextWindowWithTimes(s.id, from, new Date(), includeFull, lastService, s.locationId);
+  } catch {
+    return derive({ ...(svc.getState?.() ?? s), message: copyParam("time.errorText", "Times could not be loaded.") });
+  }
+  const current = svc.getState?.() ?? s;
+  // A day or location chosen while the search ran wins: its result is dropped.
+  if (revision !== dayRevision) return derive(current);
+  if (!later) return derive({ ...current, message: copyParam("time.noLaterTimes", "There are no later times in the next 90 days.") });
+  allRows = later.built.rows;
+  slotsById = later.built.slots;
+  waitlistIds = later.built.waitlist;
+  greyByDay = new Map();
+  const day = later.built.rows.filter((row) => row.selectable && locationMatches(row, s.locationId))
+    .sort(byDay)[0]!.dayKey;
+  if (!includeFull) await loadGreyDay(s.id, day);
+  return derive(withDay(visibleSelection({ ...current, windowStart: later.windowStart }), day));
+}
+
+/** The booking itself: a waitlist, a paid or course checkout, or a free booking. */
+async function bookSelectedIn(s: S): Promise<S> {
+  if (!s.isMember) return derive({ ...s, message: copyParam("time.bookNeedsSignIn", "Sign in before booking.") });
+  if (s.isCourse && !s.scheduleId) return derive({ ...s, message: copyParam("time.courseUnavailable", "Course booking is unavailable right now.") });
+  if (!s.isCourse && !s.selectedSlotId) return derive({ ...s, message: copyParam("time.bookNeedsSlot", "Choose one time first.") });
+  const joiningWaitlist = !s.isCourse && waitlistIds.has(s.selectedSlotId);
+  const slot = s.isCourse ? undefined : slotsById.get(s.selectedSlotId);
+  if (!s.isCourse && !slot && !joiningWaitlist) return derive({ ...s, message: copyParam("time.bookSlotGone", "That time is no longer available. Try again.") });
+  // A booking is paid through the regular checkout only where that is allowed; joining a
+  // waitlist buys nothing, so it skips this check.
+  if (!joiningWaitlist) {
+    try {
+      const current = await getService(s.id);
+      // A course is booked whole, never one of its sessions as a time: a screen opened with no
+      // `course` input whose first service read failed lists the sessions as times.
+      if (!s.isCourse && current.service?.type === "COURSE") return derive({ ...s, message: copyParam("time.courseUnavailable", "Course booking is unavailable right now.") });
+      regularCheckoutAllowed = await mayUseRegularBookingCheckout(current.service);
+      if (serviceHeaderFields(current.service).paid !== s.serviceIsPaid) return derive({ ...s, message: copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable.") });
+    } catch {
+      if (s.serviceIsPaid) return derive({ ...s, message: copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable.") });
+    }
+    if (!regularCheckoutAllowed) return derive({ ...s, message: copyParam("time.purchaseUnavailable", "Purchasing is temporarily unavailable.") });
+  }
+  // A confirmed booking is reported to the app hosting this screen (an embed's `onAction`), so a
+  // host chat can say so and refresh what it shows. Dropped where nothing hosts the screen.
+  // The booking's own instants carry an offset; a slot's may be LOCAL to its timezone, which
+  // `emitHostEvent` leaves out rather than let the host read it in its own zone.
+  const reportBooked = (booking: { id?: string; startDate?: string; endDate?: string } | undefined) => emitHostEvent("booking.created", {
+    bookingId: booking?.id,
+    serviceId: s.id,
+    serviceName: s.serviceName,
+    start: hostEventInstant(booking?.startDate) || slot?.startDate || s.courseStart,
+    end: hostEventInstant(booking?.endDate) || slot?.endDate || s.courseEnd,
+  });
+  // The member acts on the pick now; a later visit must not restore it.
+  clearPick();
+  if (joiningWaitlist) {
+    const pending = derive({ ...s, bookingInFlight: true, message: "", successMessage: "" });
+    const my = await getMyData().catch(() => ({ email: s.email } as WixMyData));
+    const email = (await signedInEmail()) || my.email || my.contactEmail || s.email;
+    const name = contactName(displayName(my) || email);
+    try {
+      await registerToWaitlist(s.selectedSlotId, { email, firstName: name.first, lastName: name.last });
+      return derive({ ...pending, bookingInFlight: false,
+        successMessage: copyParam("time.waitlistJoined", "You're on the waitlist. Check My Bookings for updates."), message: "" });
+    } catch {
+      return derive({ ...s, bookingInFlight: false,
+        message: copyParam("time.waitlistFailed", "Couldn't join the waitlist. Try again.") });
+    }
+  }
+  // Paid service or any course — create a Wix eCommerce order so a free
+  // course does not remain in CREATED status with no reserved capacity.
+  // FULLY NATIVE in-app payment (mirrors Wix's RN apps): NO
+  // hosted-checkout WebView / browser redirect. The chain is
+  //   createBooking → ecom.createCheckout(booking line item) → ecom.createOrder
+  //   → @himalaya/wix-cashier.proceedToPayment(snapshotId)
+  // where `paymentGatewayOrderId` from createOrder is the cashier order id
+  // (snapshotId) settled on-device via Apple/Google Pay. We do NOT optimistically
+  // write a local booking row (My Bookings revalidates from Wix on success). Any
+  // failure degrades to an inline retry message, never a dead button.
+  if (s.serviceIsPaid || s.isCourse) {
+    const pending = derive({ ...s, bookingInFlight: true, message: "", successMessage: "" });
+    // Booker identity — same resolution as the free path (never throws).
+    const payerData = await getMyData().catch(() => ({ email: s.email } as WixMyData));
+    const payerEmail = (await signedInEmail()) || payerData.email || payerData.contactEmail || s.email;
+    const payerName = contactName(displayName(payerData) || payerEmail);
+    // Only the same customer's own unfinished booking for this course is reused.
+    const retried = s.isCourse && pendingCourseBooking?.scheduleId === s.scheduleId && pendingCourseBooking.email === payerEmail
+      ? pendingCourseBooking : undefined;
+    if (s.isCourse) {
+      try {
+        const latest = (await getService(s.id)).service;
+        const open = latest != null && await courseOpenTo(latest, new Date(), retried?.ordered === true);
+        if (!open) {
+          return derive({ ...pending, bookingInFlight: false, courseAvailable: false,
+            message: copyParam("time.courseUnavailable", "Course booking is unavailable right now.") });
         }
+      } catch {
+        return derive({ ...pending, bookingInFlight: false,
+          message: copyParam("time.courseUnavailable", "Course booking is unavailable right now.") });
       }
-      // Paid service or any course — create a Wix eCommerce order so a free
-      // course does not remain in CREATED status with no reserved capacity.
-      // FULLY NATIVE in-app payment (mirrors Wix's RN apps): NO
-      // hosted-checkout WebView / browser redirect. The chain is
-      //   createBooking → ecom.createCheckout(booking line item) → ecom.createOrder
-      //   → @himalaya/wix-cashier.proceedToPayment(snapshotId)
-      // where `paymentGatewayOrderId` from createOrder is the cashier order id
-      // (snapshotId) settled on-device via Apple/Google Pay. We do NOT optimistically
-      // write a local booking row (My Bookings revalidates from Wix on success). Any
-      // failure degrades to an inline retry message, never a dead button.
-      if (s.serviceIsPaid || s.isCourse) {
-        const pending = derive({ ...s, bookingInFlight: true, message: "", successMessage: "" });
-        // Booker identity — same resolution as the free path (never throws).
-        const payerData = await getMyData().catch(() => ({ email: s.email } as WixMyData));
-        const payerEmail = (await signedInEmail()) || payerData.email || payerData.contactEmail || s.email;
-        const payerName = contactName(displayName(payerData) || payerEmail);
-        // Only the same customer's own unfinished booking for this course is reused.
-        const retried = s.isCourse && pendingCourseBooking?.scheduleId === s.scheduleId && pendingCourseBooking.email === payerEmail
-          ? pendingCourseBooking : undefined;
-        if (s.isCourse) {
-          try {
-            const latest = (await getService(s.id)).service;
-            const open = latest != null && await courseOpenTo(latest, new Date(), retried?.ordered === true);
-            if (!open) {
-              return derive({ ...pending, bookingInFlight: false, courseAvailable: false,
-                message: copyParam("time.courseUnavailable", "Course booking is unavailable right now.") });
-            }
-          } catch {
-            return derive({ ...pending, bookingInFlight: false,
-              message: copyParam("time.courseUnavailable", "Course booking is unavailable right now.") });
-          }
-        }
-        try {
-          // 1. Create the booking (CREATED status — payment pending).
-          //    A course retried after a failed checkout reuses the booking it already made.
-          const created = retried ? { booking: retried.booking }
-            : s.isCourse
-              ? await bookSchedule(s.scheduleId, payerName.first, payerName.last, payerEmail,
-                s.coursePaymentOption ? { selectedPaymentOption: s.coursePaymentOption } : undefined)
-              : await bookSlot(slot!, payerName.first, payerName.last, payerEmail);
-          const bookingId = created.booking?.id;
-          if (!bookingId) throw new Error("booking not created");
-          if (s.isCourse && !retried) pendingCourseBooking = { scheduleId: s.scheduleId, email: payerEmail, booking: created.booking! };
-          // 2. Wrap the booking as a checkout line item; create the checkout.
-          const checkoutRes = await createCheckout([
-            { quantity: 1, catalogReference: { appId: WIX_BOOKINGS_APP_ID, catalogItemId: bookingId } },
-          ]);
-          const checkoutId = checkoutRes.checkout?.id;
-          if (!checkoutId) throw new Error("checkout not created");
-          // 3. Create the Wix-managed order — mints the cashier snapshot when a
-          //    balance is due. No paymentGatewayOrderId ⇒ nothing to charge
-          //    (covered / zero total) ⇒ the booking is already confirmed.
-          // Hosted (Spaces): the site's own checkout page creates the order (as
-          // RN does) — creating it here first fails on a site with no payment method set up.
-          const hosted = isHostedWorker();
-          const orderRes = hosted ? { paymentGatewayOrderId: "" } : await createOrder(checkoutId);
-          if (s.isCourse && !hosted && pendingCourseBooking) pendingCourseBooking.ordered = true;
-          const snapshotId = orderRes.paymentGatewayOrderId ?? "";
-          if ((!snapshotId || (s.isCourse && s.coursePaymentOption === "OFFLINE")) && !hosted) {
-            pendingCourseBooking = null;
-            await reportBooked(created.booking);
-            return derive({ ...pending, bookingInFlight: false, successMessage: s.isCourse
-              ? copyParam("time.courseSubmitted", "Course booking submitted. Check My Bookings for confirmation.")
-              : copyParam("time.successMessage", "Booked. Your confirmation is ready in My Bookings."), message: "" });
-          }
-          // 4. Collect payment IN-APP — wallet when this app has one wired, otherwise
-          //    the in-app Wix cashier. Routed through the shared helper so a
-          //    wallet-less app can still actually pay: calling proceedToPayment
-          //    unconditionally created the booking + order and THEN failed, leaving an
-          //    unpaid booking behind (see @wix/himalaya/checkout).
-          const pay = await payCashierOrder({
-            appId: WIX_BOOKINGS_APP_ID,
-            snapshotId,
-            msid: await resolveMsid(),
-            // Hosted (Spaces): the host opens this booking's checkout as the lent member.
-            ...(hosted ? { openCashier: hostedCheckoutOpener(checkoutId) } : {}),
-            cashierUrl: async () => {
-              const redirect = await createRedirectSession(s.isCourse
-                ? { ecomCheckout: { checkoutId } }
-                : { bookingsCheckout: { slotAvailability: { slot: slot as WixSlot } } });
-              return redirect.redirectSession?.fullUrl;
-            },
-          });
-          if (pay.kind === "paid") {
-            pendingCourseBooking = null;
-            await reportBooked(created.booking);
-            return derive({ ...pending, bookingInFlight: false, successMessage: copyParam("time.successMessage", "Booked. Your confirmation is ready in My Bookings."), message: "" });
-          }
-          if (pay.kind === "handoff") {
-            // The cashier is open in-app; the booking confirms once payment lands, so
-            // promise nothing here — My Bookings revalidates from Wix.
-            return derive({ ...pending, bookingInFlight: false, message: copyParam("time.checkoutOpened", "Complete your payment in the checkout to confirm this booking.") });
-          }
-          if (pay.kind === "cancelled") {
-            return derive({ ...s, bookingInFlight: false, message: s.isCourse
-              ? copyParam("time.coursePaymentCancelled", "Payment cancelled — your course booking wasn't confirmed. Try again.")
-              : copyParam("time.paymentCancelled", "Payment cancelled — your booking wasn't confirmed. Pick a time to try again.") });
-          }
-          return derive({ ...s, bookingInFlight: false, message: s.isCourse
-            ? copyParam("time.coursePaymentFailed", "Payment couldn't be completed. Try again.")
-            : copyParam("time.paymentFailed", "Payment couldn't be completed. Pick another time or try again.") });
-        } catch {
-          return derive({ ...s, bookingInFlight: false, message: s.isCourse
-            ? copyParam("time.courseCheckoutFailed", "Checkout could not start. Try again.")
-            : copyParam("time.checkoutFailed", "Checkout could not start. Pick another time or try again.") });
-        }
+    }
+    try {
+      // 1. Create the booking (CREATED status — payment pending).
+      //    A course retried after a failed checkout reuses the booking it already made.
+      const created = retried ? { booking: retried.booking }
+        : s.isCourse
+          ? await bookSchedule(s.scheduleId, payerName.first, payerName.last, payerEmail,
+            s.coursePaymentOption ? { selectedPaymentOption: s.coursePaymentOption } : undefined)
+          : await bookSlot(slot!, payerName.first, payerName.last, payerEmail);
+      const bookingId = created.booking?.id;
+      if (!bookingId) throw new Error("booking not created");
+      if (s.isCourse && !retried) pendingCourseBooking = { scheduleId: s.scheduleId, email: payerEmail, booking: created.booking! };
+      // 2. Wrap the booking as a checkout line item; create the checkout.
+      const checkoutRes = await createCheckout([
+        { quantity: 1, catalogReference: { appId: WIX_BOOKINGS_APP_ID, catalogItemId: bookingId } },
+      ]);
+      const checkoutId = checkoutRes.checkout?.id;
+      if (!checkoutId) throw new Error("checkout not created");
+      // 3. Create the Wix-managed order — mints the cashier snapshot when a
+      //    balance is due. No paymentGatewayOrderId ⇒ nothing to charge
+      //    (covered / zero total) ⇒ the booking is already confirmed.
+      // Hosted (Spaces): the site's own checkout page creates the order (as
+      // RN does) — creating it here first fails on a site with no payment method set up.
+      const hosted = isHostedWorker();
+      const orderRes = hosted ? { paymentGatewayOrderId: "" } : await createOrder(checkoutId);
+      if (s.isCourse && !hosted && pendingCourseBooking) pendingCourseBooking.ordered = true;
+      const snapshotId = orderRes.paymentGatewayOrderId ?? "";
+      if ((!snapshotId || (s.isCourse && s.coursePaymentOption === "OFFLINE")) && !hosted) {
+        pendingCourseBooking = null;
+        await reportBooked(created.booking);
+        return derive({ ...pending, bookingInFlight: false, successMessage: s.isCourse
+          ? copyParam("time.courseSubmitted", "Course booking submitted. Check My Bookings for confirmation.")
+          : copyParam("time.successMessage", "Booked. Your confirmation is ready in My Bookings."), message: "" });
       }
-      // FREE appointment/class — the original member bookSlot rung (offline-safe below).
-      // getMyData/signedInEmail carry their own fallbacks (never throw), so the
-      // booker identity is resolved up front — needed for both the optimistic
-      // cache row and the offline replay params.
-      const my = await getMyData().catch(() => ({ email: s.email } as WixMyData));
-      const email = (await signedInEmail()) || my.email || my.contactEmail || s.email;
-      const name = contactName(displayName(my) || email);
-      // Optimistic local write — My Bookings repaints from cache immediately (offline or not).
-      const selectedSlot = allRows.find((r) => r.id === s.selectedSlotId);
-      const localId = `local-${Date.now()}`;
-      const localRow = (id: string): DbEntity => ({
-        id,
-        title: s.serviceName || "Booking",
-        subtitle: s.isCourse ? (s.selectedLine || "Full course") : (selectedSlot?.title || "Booked time"),
-        status: "Booked",
+      // 4. Collect payment IN-APP — wallet when this app has one wired, otherwise
+      //    the in-app Wix cashier. Routed through the shared helper so a
+      //    wallet-less app can still actually pay: calling proceedToPayment
+      //    unconditionally created the booking + order and THEN failed, leaving an
+      //    unpaid booking behind (see @wix/himalaya/checkout).
+      const pay = await payCashierOrder({
+        appId: WIX_BOOKINGS_APP_ID,
+        snapshotId,
+        msid: await resolveMsid(),
+        // Hosted (Spaces): the host opens this booking's checkout as the lent member.
+        ...(hosted ? { openCashier: hostedCheckoutOpener(checkoutId) } : {}),
+        cashierUrl: async () => {
+          const redirect = await createRedirectSession(s.isCourse
+            ? { ecomCheckout: { checkoutId } }
+            : { bookingsCheckout: { slotAvailability: { slot: slot as WixSlot } } });
+          return redirect.redirectSession?.fullUrl;
+        },
       });
-      await cachePut(localRow(localId));
-      const pending = derive({ ...s, bookingInFlight: true, message: "", successMessage: "" });
-      try {
-        const created = await bookSlot(slot!, name.first, name.last, email);
-        // Reconcile the optimistic local id with the server-assigned booking id.
-        const realId = created.booking?.id;
-        if (realId && realId !== localId) { await cacheDrop(localId); await cachePut(localRow(realId)); }
+      if (pay.kind === "paid") {
+        pendingCourseBooking = null;
         await reportBooked(created.booking);
-        return derive({
-          ...pending,
-          bookingInFlight: false,
-          successMessage: copyParam("time.successMessage", "Booked. Your confirmation is ready in My Bookings."),
-          message: "",
-        });
-      } catch (e) {
-        if (isBridgeUnavailable(e)) {
-          // Offline / no bridge: the optimistic cache row already shows in My
-          // Bookings; queue the booking to replay (WriteQueue, idempotent) when
-          // connectivity returns.
-          await queueWrite("tier5.himiBookingTime.bookSelected", {
-            serviceId: s.id,
-            ...(s.isCourse ? { scheduleId: s.scheduleId } : { slotId: s.selectedSlotId }),
-            email,
-            firstName: name.first,
-            lastName: name.last,
-            ...(slot ? { slot: JSON.stringify(slot) } : {}),
-          });
-          return derive({
-            ...pending,
-            bookingInFlight: false,
-            successMessage: "Booked offline — will sync when you reconnect.",
-            message: "",
-          });
-        }
+        return derive({ ...pending, bookingInFlight: false, successMessage: copyParam("time.successMessage", "Booked. Your confirmation is ready in My Bookings."), message: "" });
+      }
+      if (pay.kind === "handoff") {
+        // The cashier is open in-app; the booking confirms once payment lands, so
+        // promise nothing here — My Bookings revalidates from Wix.
+        return derive({ ...pending, bookingInFlight: false, message: copyParam("time.checkoutOpened", "Complete your payment in the checkout to confirm this booking.") });
+      }
+      if (pay.kind === "cancelled") {
         return derive({ ...s, bookingInFlight: false, message: s.isCourse
-          ? copyParam("time.courseBookFailed", "Course booking failed. Try again.")
-          : copyParam("time.bookFailed", "Booking failed. Pick another time or try again.") });
+          ? copyParam("time.coursePaymentCancelled", "Payment cancelled — your course booking wasn't confirmed. Try again.")
+          : copyParam("time.paymentCancelled", "Payment cancelled — your booking wasn't confirmed. Pick a time to try again.") });
       }
-    },
-  },
-});
+      return derive({ ...s, bookingInFlight: false, message: s.isCourse
+        ? copyParam("time.coursePaymentFailed", "Payment couldn't be completed. Try again.")
+        : copyParam("time.paymentFailed", "Payment couldn't be completed. Pick another time or try again.") });
+    } catch {
+      return derive({ ...s, bookingInFlight: false, message: s.isCourse
+        ? copyParam("time.courseCheckoutFailed", "Checkout could not start. Try again.")
+        : copyParam("time.checkoutFailed", "Checkout could not start. Pick another time or try again.") });
+    }
+  }
+  // FREE appointment/class — the original member bookSlot rung (offline-safe below).
+  // getMyData/signedInEmail carry their own fallbacks (never throw), so the
+  // booker identity is resolved up front — needed for both the optimistic
+  // cache row and the offline replay params.
+  const my = await getMyData().catch(() => ({ email: s.email } as WixMyData));
+  const email = (await signedInEmail()) || my.email || my.contactEmail || s.email;
+  const name = contactName(displayName(my) || email);
+  // Optimistic local write — My Bookings repaints from cache immediately (offline or not).
+  const selectedSlot = allRows.find((r) => r.id === s.selectedSlotId);
+  const localId = `local-${Date.now()}`;
+  const localRow = (id: string): DbEntity => ({
+    id,
+    title: s.serviceName || "Booking",
+    subtitle: s.isCourse ? (s.selectedLine || "Full course") : (selectedSlot?.title || "Booked time"),
+    status: "Booked",
+  });
+  if (!offlineWritesEnabled) await cachePut(localRow(localId));
+  const pending = derive({ ...s, bookingInFlight: true, message: "", successMessage: "" });
+  try {
+    const created = await bookSlot(slot!, name.first, name.last, email);
+    // Reconcile the optimistic local id with the server-assigned booking id.
+    const realId = created.booking?.id;
+    if (offlineWritesEnabled) await cachePut(localRow(realId || localId));
+    else if (realId && realId !== localId) { await cacheDrop(localId); await cachePut(localRow(realId)); }
+    await reportBooked(created.booking);
+    return derive({
+      ...pending,
+      bookingInFlight: false,
+      successMessage: copyParam("time.successMessage", "Booked. Your confirmation is ready in My Bookings."),
+      message: "",
+    });
+  } catch (e) {
+    if (!offlineWritesEnabled && isBridgeUnavailable(e)) {
+      // Offline / no bridge: the optimistic cache row already shows in My
+      // Bookings; queue the booking to replay (WriteQueue, idempotent) when
+      // connectivity returns.
+      await queueWrite("tier5.himiBookingTime.bookSelected", {
+        serviceId: s.id,
+        ...(s.isCourse ? { scheduleId: s.scheduleId } : { slotId: s.selectedSlotId }),
+        email,
+        firstName: name.first,
+        lastName: name.last,
+        ...(slot ? { slot: JSON.stringify(slot) } : {}),
+      });
+      return derive({
+        ...pending,
+        bookingInFlight: false,
+        successMessage: "Booked offline — will sync when you reconnect.",
+        message: "",
+      });
+    }
+    return derive({ ...s, bookingInFlight: false, message: s.isCourse
+      ? copyParam("time.courseBookFailed", "Course booking failed. Try again.")
+      : copyParam("time.bookFailed", "Booking failed. Pick another time or try again.") });
+  }
+}
 resetUnhydratedKeysOnOlderRuntime(svc, { ...svc.getState(), ...ATTENDANCE_INITIAL, email: "", password: "", firstName: "", lastName: "", isMember: false, canBook: false, cannotBook: true }, [...ATTENDANCE_NOT_HYDRATED, "email", "password", "firstName", "lastName", "isMember", "canBook", "cannotBook"]);
 svc.load();
 export { svc };