@wix/himalaya-cli 0.1528.0 → 0.1530.0

package/templates/yoga-studio/tier5-src/himi-booking-bookings/index.ts

@@ -1,37 +1,64 @@
 import { defineBackendCollection } from "../_shared/collection-service.js";
-import { cancelBookingAsMember, isBookingPolicyViolation } from "@himalaya/wix-bookings";
+import { cancelBookingAsMember, isBookingPolicyViolation, queryServices, type WixService } from "@himalaya/wix-bookings";
+import { createEvent, getPermissionStatus, requestPermission } from "@himalaya/calendar";
+import { open } from "@himalaya/open-url";
+import { wixMediaUrl, WIX_LIST_IMAGE } from "@himalaya/wix-media";
 import { navigate } from "@himalaya/state";
-import { copyParam } from "../_shared/himi-copy.js";
+import { copyParam, copyTemplate } from "../_shared/himi-copy.js";
 import { memberAccess, assertMemberAccess, memberAccessChanged, memberAccessDenied, type MemberAccess } from "../_shared/member-access.js";
-import { fetchMemberBookings, type MemberBookingRow } from "../_shared/member-bookings.js";
+import { fetchMemberBookings, CANCELLED_STATUSES, type MemberBookingRow } from "../_shared/member-bookings.js";
 import { emitHostEvent } from "../_shared/host-events.js";
-import { dayKey, dayLabel } from "@himalaya/time";
-import { localPreferences } from "../_shared/local-preferences.js";
+import { formatClock, formatDateMedium, formatMonthDay, formatWeekdayMonthDay, formatWeekdayMonthDayLong } from "../_shared/engine-intl.js";
 import { parseWeeklyGoal, weeklyGoalProgress, weeklySessionsFromPages } from "../_shared/weekly-goal.js";
 
-const input = (globalThis as { himalaya?: { input?: Record<string, unknown> } }).himalaya?.input;
-const validDate = (value: unknown): value is string => typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value) && dayKey(new Date(`${value}T12:00:00`)) === value;
-const views = localPreferences("booking.schedule", value => ["agenda", "day", "month"].includes(String(value)) ? String(value) : "agenda");
-let mode = validDate(input?.date) ? "day" : views.read();
-// "" until the schedule is first shown, NOT today's date: the release build hashes this worker's
-// initial state, so a date read off the build machine's clock made every build of unchanged
-// source a different release (#3268, the `nondeterministic-initial-state` lint). `derive()` fills
-// in today the first time the schedule is visible, which is never at build time (no member).
-let selectedDate = validDate(input?.date) ? input.date : "";
-const today = () => dayKey(new Date());
+// My Bookings: Upcoming / Past / Canceled tabs over the member's own bookings, a booking sheet with
+// the details and the actions (add to calendar, directions, Book Again, Cancel Booking with a
+// confirm step), and a non-modal result sheet. The list is the shared backend collection (paging,
+// the backend filter and sort); the tab sets the filter and the sort together.
+
+type Tab = "upcoming" | "past" | "cancelled";
+// `query: ""` — the screen has no search field: a booking-ID search the old toolbar persisted must
+// not narrow every tab with nothing on screen to clear it.
+const TABS: Record<Tab, { filter: string; sort: string; query: string }> = {
+  upcoming: { filter: "value:Upcoming", sort: "default", query: "" },
+  past: { filter: "value:Past", sort: "za", query: "" },
+  cancelled: { filter: "value:Cancelled", sort: "za", query: "" },
+};
+const runtime = () => (globalThis as { himalaya?: { input?: Record<string, unknown> } }).himalaya;
+
+let tab: Tab = "upcoming";
 let pageMember: MemberAccess | undefined;
-let queryNow = ""; // set by the first-page fetch, never at boot (see selectedDate)
-let cancelTarget: { row: MemberBookingRow; member: MemberAccess } | undefined;
+let queryNow = ""; // set by the first-page fetch, never at boot (the `nondeterministic-initial-state` lint)
+/** A member's page is on screen (the tabs show). Kept while a tab switch loads. */
+let memberShown = false;
+/** The last failure was an access refusal: the sign-in state shows, not the error state. */
+let lastErrorDenied = false;
+/** The booking whose sheet is open, and whether the sheet is on its confirm-cancel step. */
+let openId = "";
+let confirming = false;
+let sheetMessage = "";
 let cancelling = false;
+let cancelMember: MemberAccess | undefined;
+/** The result sheet (non-modal): a done action (check icon) or a failure / info (info icon). */
+let result: { text: string; done: boolean } | null = null;
+/** A deep link's `bookingId`, applied once to the first page that loads after it arrives. */
+let pendingBookingId = "";
+let consumedBookingId = "";
 // The weekly session goal (`provisioning.goals.weeklySessions`), from the onAppear `weeklyGoal`
 // param — 0 when the app provisions none, which keeps the "This week" card hidden for good. The
 // count comes from a dedicated read of this week's PAST bookings on each first-page fetch, NOT
-// from `rows` (those follow the list's filter — Upcoming by default — and would read 0).
+// from `rows` (those follow the list's tab — Upcoming by default — and would read 0).
 let weeklyGoal = 0;
 /** The count of the page that APPLIED — set in `apply`, never by a fetch, so a superseded fetch
  *  (another member, a refresh) cannot overwrite it: it travels in that page's metadata and is
  *  dropped with it. */
 let weeklyDone: number | null = null;
+
+/** Service photos by service id ("" = the service has none). The booking record has no photo, so
+ *  one `queryServices` call per page fetches the ones not yet known. Kept for the worker's life. */
+const photos = new Map<string, string>();
+const photosInFlight = new Set<string>();
+
 /** This week's sessions from the PAST bookings, newest first (paged only while still inside this
  *  week). null when a read fails, so the card hides rather than claiming "0 of N". */
 async function fetchWeeklySessionsDone(member: MemberAccess, now: number): Promise<number | null> {
@@ -43,48 +70,248 @@ async function fetchWeeklySessionsDone(member: MemberAccess, now: number): Promi
     return null;
   }
 }
+
+function serviceImage(service: WixService): string {
+  const media = service.media ?? {};
+  for (const item of [media.mainMedia, ...(media.items ?? []), media.coverMedia]) {
+    const url = wixMediaUrl(item?.image?.url, WIX_LIST_IMAGE);
+    if (url) return url;
+  }
+  // Older records carry the photo in other shapes; the service screen reads them the same way.
+  return legacyImageUrl(service);
+}
+
+function legacyImageUrl(value: unknown, depth = 0): string {
+  if (depth > 4) return "";
+  if (typeof value === "string") return wixMediaUrl(value, WIX_LIST_IMAGE);
+  if (!value || typeof value !== "object") return "";
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      const url = legacyImageUrl(item, depth + 1);
+      if (url) return url;
+    }
+    return "";
+  }
+  const node = value as Record<string, unknown>;
+  for (const direct of [node.url, node.src, node.imageUrl, node.imageSrc]) {
+    const url = wixMediaUrl(direct, WIX_LIST_IMAGE);
+    if (url) return url;
+  }
+  for (const key of ["image", "thumbnail", "mediaItem", "mainMedia", "main", "media", "items", "photos", "gallery", "coverImage"]) {
+    const url = legacyImageUrl(node[key], depth + 1);
+    if (url) return url;
+  }
+  return "";
+}
+
+/** Fetch the photos of the services on this page that are not known yet: one call, at most 50 ids.
+ *  A failure keeps the placeholders and never fails the list. */
+function loadPhotos(rows: MemberBookingRow[]): void {
+  const ids = [...new Set(rows.map(row => row.serviceId).filter(id => id && !photos.has(id) && !photosInFlight.has(id)))].slice(0, 50);
+  if (!ids.length) return;
+  ids.forEach(id => photosInFlight.add(id));
+  queryServices({ query: { filter: { id: { $in: ids } }, paging: { limit: 50 } } } as Parameters<typeof queryServices>[0])
+    .then(response => {
+      const found = new Map((response.services ?? []).map(service => [service.id, serviceImage(service)] as const));
+      ids.forEach(id => photos.set(id, found.get(id) ?? ""));
+      ids.forEach(id => photosInFlight.delete(id));
+      if (found.size) svc.collectionDataChanged();
+    })
+    .catch(() => { ids.forEach(id => photosInFlight.delete(id)); });
+}
+
+// ---- Projection -------------------------------------------------------------------
+
+const cancelledStatus = (row: MemberBookingRow) => CANCELLED_STATUSES.includes(row.statusKey);
+const date = (iso: string) => new Date(iso);
+
+function tagOf(row: MemberBookingRow): string {
+  switch (row.statusKey) {
+    // Wix answers PENDING_APPROVAL; PENDING is kept for older records.
+    case "PENDING": case "PENDING_APPROVAL": return copyParam("bookings.statusPending", "Pending approval");
+    case "WAITING_LIST": return copyParam("bookings.statusWaitlist", "Waitlist");
+    case "CANCELED": case "CANCELLED": return copyParam("bookings.statusCancelled", "Canceled");
+    case "DECLINED": return copyParam("bookings.statusDeclined", "Declined");
+  }
+  return row.isCourse ? copyParam("bookings.coursePrefix", "Course") : "";
+}
+
+function placeOf(row: MemberBookingRow): string {
+  return row.placeType === "CUSTOMER" ? copyParam("bookingCommon.clientPlace", "Client's place") : row.placeName;
+}
+
+function courseRange(row: MemberBookingRow, last: (d: Date) => string): string {
+  if (!row.courseStart) return "";
+  return row.courseEnd ? `${formatMonthDay(date(row.courseStart))} – ${last(date(row.courseEnd))}` : formatMonthDay(date(row.courseStart));
+}
+
+/** "Tue, Nov 4 · 10:00 AM", or "Course · Nov 10 – Dec 15" for a course. */
+function whenOf(row: MemberBookingRow): string {
+  if (row.isCourse && row.courseStart) return `${copyParam("bookings.coursePrefix", "Course")} · ${courseRange(row, formatMonthDay)}`;
+  return row.start ? `${formatWeekdayMonthDay(date(row.start))} · ${formatClock(date(row.start))}` : row.subtitle;
+}
+
+function staffLine(row: MemberBookingRow): string {
+  return row.staff ? copyTemplate("bookings.withStaff", "with {staff}", { staff: row.staff }) : "";
+}
+
+/** "10:00 – 11:15 AM" (one meridiem when both share it), "11:30 AM – 12:45 PM" otherwise. */
+function timeRange(start: Date, end: Date): string {
+  const a = formatClock(start), b = formatClock(end);
+  const ma = /\s(\S+)$/.exec(a)?.[1], mb = /\s(\S+)$/.exec(b)?.[1];
+  return ma && ma === mb ? `${a.slice(0, -ma.length).trim()} – ${b}` : `${a} – ${b}`;
+}
+
+function durationText(minutes: number): string {
+  const h = Math.floor(minutes / 60), m = minutes % 60;
+  const hours = h ? copyTemplate("bookings.durationHours", "{n} hr", { n: h }) : "";
+  const mins = m ? copyTemplate("bookings.durationMinutes", "{n} min", { n: m }) : "";
+  return [hours, mins].filter(Boolean).join(" ");
+}
+
+/** The sheet's second date line: "10:00 – 11:15 AM · 1 hr 15 min". */
+function timeLine(row: MemberBookingRow): string {
+  if (row.isCourse || !row.start) return "";
+  const start = date(row.start), end = row.end ? date(row.end) : null;
+  if (!end || !Number.isFinite(end.getTime()) || end <= start) return formatClock(start);
+  const minutes = Math.round((end.getTime() - start.getTime()) / 60000);
+  return `${timeRange(start, end)} · ${durationText(minutes)}`;
+}
+
+function dateLine(row: MemberBookingRow): string {
+  if (row.isCourse) return courseRange(row, formatDateMedium);
+  return row.start ? formatWeekdayMonthDayLong(date(row.start)) : row.subtitle;
+}
+
+function paymentOf(row: MemberBookingRow): string {
+  switch (row.paymentStatus) {
+    case "PAID": return copyParam("bookings.payPaid", "Paid");
+    case "NOT_PAID": return copyParam("bookings.payNotPaid", "Not paid yet");
+    case "PARTIALLY_PAID": return copyParam("bookings.payPartly", "Partly paid");
+    case "REFUNDED": return copyParam("bookings.payRefunded", "Refunded");
+  }
+  return "";
+}
+
+function noticeOf(row: MemberBookingRow): string {
+  if (row.statusKey === "PENDING" || row.statusKey === "PENDING_APPROVAL") return copyParam("bookings.pendingNotice", "The business must approve this booking. You get an email when they reply.");
+  if (row.statusKey === "WAITING_LIST") return copyParam("bookings.waitlistNotice", "You are on the waitlist. You get an email if a spot opens.");
+  return "";
+}
+
+export interface BookingListRow extends MemberBookingRow {
+  image: string; hasImage: boolean; noImage: boolean; when: string; detail: string; tag: string; noTag: boolean; a11y: string;
+}
+
+function listRow(row: MemberBookingRow): BookingListRow {
+  const image = photos.get(row.serviceId) ?? "";
+  const tag = tagOf(row), place = placeOf(row), staff = staffLine(row);
+  const fullWhen = row.isCourse ? dateLine(row) : row.start ? `${formatWeekdayMonthDayLong(date(row.start))}, ${formatClock(date(row.start))}` : row.subtitle;
+  return { ...row, image, hasImage: !!image, noImage: !image, when: whenOf(row), detail: [staff, place].filter(Boolean).join(" · "),
+    tag, noTag: !tag, a11y: [row.title, fullWhen, staff, place, tag].filter(Boolean).join(", ") };
+}
+
 interface S {
-  status: "loading" | "ready" | "error"; rows: MemberBookingRow[]; isMember: boolean; identityLine: string;
-  emptyText: string; isLoading: boolean; notLoading: boolean; errored: boolean; notErrored: boolean; noEmpty: boolean;
-  actionMessage: string; cancelPresented: boolean; cancelTitle: string;
-  scheduleMode: string; selectedDate: string; dayRows: MemberBookingRow[]; dayHeading: string;
-  hideAgenda: boolean; hideCalendar: boolean; hideMonth: boolean; hideSchedule: boolean;
-  dayEmptyText: string; decorations: Array<{ date: string; dotCount: number; dotColorToken: string }>;
+  status: "loading" | "ready" | "error"; rows: MemberBookingRow[]; bookingRows: BookingListRow[];
+  isMember: boolean; isLoading: boolean; notLoading: boolean; errored: boolean; notErrored: boolean; noEmpty: boolean;
+  tab: Tab; hideTabs: boolean; noRows: boolean; hideSignIn: boolean; hideHelp: boolean;
+  hideEmptyUpcoming: boolean; hideEmptyPast: boolean; hideEmptyCancelled: boolean;
+  sheetOpen: boolean; sheetConfirming: boolean; sheetNotConfirming: boolean;
+  sheetTitle: string; sheetImage: string; sheetHasImage: boolean; sheetNoImage: boolean; sheetTag: string; sheetNoTag: boolean;
+  sheetDate: string; sheetTime: string; sheetCanAddToCalendar: boolean; sheetCannotAddToCalendar: boolean;
+  sheetStaff: string; sheetNoStaff: boolean; sheetPlace: string; sheetAddress: string; sheetNoPlace: boolean;
+  sheetHasDirections: boolean; sheetNoDirections: boolean; sheetHidePlainPlace: boolean; sheetDirectionsLabel: string;
+  sheetParticipants: string; sheetNoParticipants: boolean; sheetPayment: string; sheetNoPayment: boolean;
+  sheetNotice: string; sheetNoNotice: boolean; sheetCanRebook: boolean; sheetCannotRebook: boolean;
+  sheetCanCancel: boolean; sheetCannotCancel: boolean; sheetLine: string; sheetMessage: string; cancelling: boolean;
+  resultOpen: boolean; resultText: string; resultDone: boolean; resultNotDone: boolean;
   weeklyLabel: string; weeklyRemainingLabel: string; weeklyPct: number; weeklyMet: boolean; hideTracker: boolean;
   nextCursor?: string; complete?: boolean; loadingMore?: boolean; pageError?: boolean; total?: number;
 }
+
+const openRow = (s: Pick<S, "rows">): MemberBookingRow | undefined => openId ? s.rows.find(row => row.id === openId) : undefined;
+const canAddToCalendar = (row: MemberBookingRow) => !row.isCourse && !!row.start && Date.parse(row.start) > Date.now() && !cancelledStatus(row);
+const hasDirections = (row: MemberBookingRow) => !!row.placeAddress && row.placeType !== "CUSTOMER";
+
 function derive(s: S): S {
-  const hideSchedule = !s.isMember || s.isLoading;
-  if (!selectedDate && !hideSchedule) selectedDate = today();
-  const dayRows = selectedDate ? s.rows.filter(row => row.day === selectedDate) : [];
-  const counts = new Map<string, number>();
-  for (const row of s.rows) if (row.day) counts.set(row.day, (counts.get(row.day) ?? 0) + 1);
+  const loading = s.status === "loading", errored = s.status === "error";
+  const rowsShown = s.rows.length > 0;
+  // A row that left the list (a refresh, another tab) closes its sheet.
+  if (openId && !openRow(s) && !loading && !cancelling) { openId = ""; confirming = false; sheetMessage = ""; }
+  const row = openRow(s);
+  const listed = row ? listRow(row) : undefined;
+  const place = row ? placeOf(row) : "";
+  const showSignIn = !loading && ((s.status === "ready" && !s.isMember) || (errored && lastErrorDenied && !rowsShown));
+  const emptyFor = (t: Tab) => !(s.status === "ready" && s.isMember && !rowsShown && tab === t);
   // Member-only, and only once this week's count was actually read (a failed read hides the card
   // rather than claiming "0 of N").
-  const weekly = weeklyGoal > 0 && !hideSchedule && weeklyDone !== null ? weeklyGoalProgress(weeklyDone, weeklyGoal) : null;
-  return { ...s, scheduleMode: mode,
+  const weekly = weeklyGoal > 0 && memberShown && weeklyDone !== null ? weeklyGoalProgress(weeklyDone, weeklyGoal) : null;
+  const participants = row && row.participants > 1 ? copyTemplate("bookings.participants", "{count} participants", { count: row.participants }) : "";
+  const payment = row ? paymentOf(row) : "", notice = row ? noticeOf(row) : "";
+  const canCancel = !!row && row.canCancel && Date.parse(row.start) > Date.now();
+  return { ...s, tab, bookingRows: s.rows.map(listRow),
+    isLoading: loading, notLoading: !(loading && !rowsShown), errored, notErrored: !(errored && !lastErrorDenied && !rowsShown), noEmpty: true,
+    hideTabs: !memberShown, noRows: !rowsShown, hideSignIn: !showSignIn,
+    hideHelp: (loading && !rowsShown) || (errored && !lastErrorDenied && !rowsShown),
+    hideEmptyUpcoming: emptyFor("upcoming"), hideEmptyPast: emptyFor("past"), hideEmptyCancelled: emptyFor("cancelled"),
+    sheetOpen: !!row, sheetConfirming: !!row && confirming, sheetNotConfirming: !row || !confirming,
+    sheetTitle: row?.title ?? "", sheetImage: listed?.image ?? "", sheetHasImage: !!listed?.hasImage, sheetNoImage: !listed?.hasImage,
+    sheetTag: listed?.tag ?? "", sheetNoTag: !listed?.tag,
+    sheetDate: row ? dateLine(row) : "", sheetTime: row ? timeLine(row) : "",
+    sheetCanAddToCalendar: !!row && canAddToCalendar(row), sheetCannotAddToCalendar: !row || !canAddToCalendar(row),
+    sheetStaff: row ? staffLine(row) : "", sheetNoStaff: !row?.staff,
+    sheetPlace: place, sheetNoPlace: !place,
+    // The address under the name only when the row shows a name of its own (never the client's place).
+    sheetAddress: row && row.placeType !== "CUSTOMER" && row.placeName !== row.placeAddress ? row.placeAddress : "",
+    sheetHasDirections: !!row && hasDirections(row), sheetNoDirections: !row || !hasDirections(row),
+    sheetHidePlainPlace: !place || (!!row && hasDirections(row)),
+    sheetDirectionsLabel: place ? copyTemplate("bookings.directionsLabel", "Get directions to {place}", { place }) : "",
+    sheetParticipants: participants, sheetNoParticipants: !participants,
+    sheetPayment: payment, sheetNoPayment: !payment, sheetNotice: notice, sheetNoNotice: !notice,
+    sheetCanRebook: !!row?.serviceId, sheetCannotRebook: !row?.serviceId,
+    sheetCanCancel: canCancel, sheetCannotCancel: !canCancel,
+    sheetLine: row ? [row.title, whenOf(row)].join(" · ") : "", sheetMessage, cancelling,
+    resultOpen: !!result, resultText: result?.text ?? "", resultDone: !!result?.done, resultNotDone: !result?.done,
     weeklyLabel: weekly?.label ?? "", weeklyRemainingLabel: weekly?.remainingLabel ?? "", weeklyPct: weekly?.fraction ?? 0,
-    weeklyMet: weekly?.met ?? false, hideTracker: !weekly, selectedDate, dayRows, dayHeading: selectedDate ? dayLabel(selectedDate) : "", hideSchedule,
-    hideAgenda: hideSchedule || mode !== "agenda", hideCalendar: hideSchedule || mode === "agenda", hideMonth: mode !== "month",
-    decorations: [...counts].map(([date, n]) => ({ date, dotCount: Math.min(n, 3), dotColorToken: "accentPrimary" })),
-    dayEmptyText: dayRows.length ? "" : s.complete ? copyParam("bookings.emptyDay", "No bookings on this day.") : copyParam("bookings.emptyLoadedDay", "No bookings on this day in loaded results. Load more to check later pages."),
-    cancelPresented: !!cancelTarget, cancelTitle: cancelTarget ? `${cancelTarget.row.title} · ${cancelTarget.row.subtitle}` : "" };
+    weeklyMet: weekly?.met ?? false, hideTracker: !weekly };
 }
+
+const closeSheet = () => { openId = ""; confirming = false; sheetMessage = ""; };
+const showResult = (s: S, text: string, done: boolean): S => { closeSheet(); result = { text, done }; return derive(s); };
+
 const svc = defineBackendCollection<S, MemberBookingRow>("himiBookingBookings", {
   onlineWrites: true,
+  // Offline, Cancel Booking says so in the confirm step, next to the button (the sheet stays open).
+  onlineWriteMessageFields: ["sheetMessage"],
   restorePagesOnLoad: true,
-  state: derive({ status: "loading", rows: [], isMember: false, identityLine: "", emptyText: "", isLoading: true, notLoading: false,
-    errored: false, notErrored: true, noEmpty: true, actionMessage: "", cancelPresented: false, cancelTitle: "",
-    scheduleMode: mode, selectedDate, dayRows: [], dayHeading: "", hideAgenda: true, hideCalendar: true, hideMonth: true, hideSchedule: true, dayEmptyText: "", decorations: [],
-    weeklyLabel: "", weeklyRemainingLabel: "", weeklyPct: 0, weeklyMet: false, hideTracker: true }),
+  state: derive({ status: "loading", rows: [], bookingRows: [], isMember: false, isLoading: true, notLoading: false,
+    errored: false, notErrored: true, noEmpty: true, tab: "upcoming", hideTabs: true, noRows: true, hideSignIn: true, hideHelp: true,
+    hideEmptyUpcoming: true, hideEmptyPast: true, hideEmptyCancelled: true,
+    sheetOpen: false, sheetConfirming: false, sheetNotConfirming: true, sheetTitle: "", sheetImage: "", sheetHasImage: false, sheetNoImage: true,
+    sheetTag: "", sheetNoTag: true, sheetDate: "", sheetTime: "", sheetCanAddToCalendar: false, sheetCannotAddToCalendar: true,
+    sheetStaff: "", sheetNoStaff: true, sheetPlace: "", sheetAddress: "", sheetNoPlace: true, sheetHasDirections: false, sheetNoDirections: true, sheetHidePlainPlace: true,
+    sheetDirectionsLabel: "", sheetParticipants: "", sheetNoParticipants: true, sheetPayment: "", sheetNoPayment: true,
+    sheetNotice: "", sheetNoNotice: true, sheetCanRebook: false, sheetCannotRebook: true, sheetCanCancel: false, sheetCannotCancel: true,
+    sheetLine: "", sheetMessage: "", cancelling: false, resultOpen: false, resultText: "", resultDone: false, resultNotDone: true,
+    weeklyLabel: "", weeklyRemainingLabel: "", weeklyPct: 0, weeklyMet: false, hideTracker: true, nextCursor: "" }),
   onLoad(arg) {
     const goal = parseWeeklyGoal((arg as Record<string, unknown> | undefined)?.weeklyGoal);
     if (goal) weeklyGoal = goal;
+    // A deep link (the home "next booking", the place summary) names a booking: open its sheet once
+    // its row is on the first page. `date` alone does nothing now (there is no day view).
+    const linked = runtime()?.input?.bookingId;
+    if (typeof linked === "string" && linked && linked !== consumedBookingId) pendingBookingId = linked;
+    // The screen opens on Upcoming every time, not on the last persisted filter.
+    tab = "upcoming";
+    return TABS.upcoming;
   },
   source: {
     id: row => row.id,
     clearOnError: memberAccessDenied,
-    errorMessage: error => memberAccessDenied(error) ? copyParam("bookings.accessError", "Bookings are unavailable for this account. Sign in again.") : copyParam("bookings.errorText", "Bookings could not be loaded."),
+    errorMessage: error => {
+      lastErrorDenied = memberAccessDenied(error);
+      return lastErrorDenied ? copyParam("bookings.accessError", "Bookings are unavailable for this account. Sign in again.") : copyParam("bookings.errorText", "Bookings could not be loaded.");
+    },
     async fetch(criteria, cursor) {
       const member = await memberAccess();
       if (cursor && (!pageMember || pageMember.email !== member.email || pageMember.scope !== member.scope)) throw memberAccessChanged();
@@ -97,59 +324,143 @@ const svc = defineBackendCollection<S, MemberBookingRow>("himiBookingBookings",
   },
   apply(s, page) {
     const member = { email: String(page.metadata?.email ?? ""), scope: String(page.metadata?.scope ?? "") };
-    if (page.status === "loading" || !member.email) { pageMember = undefined; cancelTarget = undefined; weeklyDone = null; }
+    const ready = page.status === "ready", errored = page.status === "error", loading = page.status === "loading";
+    // A change of member (or sign-out) drops everything that belonged to the last one.
+    if (ready && !page.loadingMore && pageMember && pageMember.email !== member.email) { closeSheet(); result = null; }
+    if ((loading && !page.items.length) || (ready && !member.email)) { pageMember = undefined; weeklyDone = null; }
+    if (ready || page.loadingMore) lastErrorDenied = false;
     const weekly = page.metadata?.weeklyDone;
-    if (page.status === "ready" && !page.loadingMore && (typeof weekly === "number" || weekly === null)) weeklyDone = weekly;
-    if (page.status === "ready" && !page.loadingMore && !page.pageError) pageMember = member;
-    const loading = page.status === "loading", errored = page.status === "error";
-    return derive({ ...s, status: loading ? "loading" : errored ? "error" : "ready", rows: page.items, isMember: !!member.email,
-      identityLine: member.email, nextCursor: page.nextCursor, complete: page.complete, total: page.total, loadingMore: page.loadingMore, pageError: page.pageError,
-      isLoading: loading, notLoading: !loading, errored, notErrored: !errored, noEmpty: true,
-      actionMessage: member.email ? s.actionMessage : "", emptyText: errored ? page.error : "" });
+    if (ready && !page.loadingMore && (typeof weekly === "number" || weekly === null)) weeklyDone = weekly;
+    if (ready && !page.loadingMore && !page.pageError) pageMember = member;
+    if (ready && !page.loadingMore && !page.provisional) memberShown = !!member.email;
+    if (errored && lastErrorDenied) { memberShown = false; closeSheet(); }
+    if (ready && !page.loadingMore && !page.provisional) {
+      loadPhotos(page.items);
+      if (pendingBookingId) {
+        if (page.items.some(row => row.id === pendingBookingId)) { openId = pendingBookingId; confirming = false; sheetMessage = ""; }
+        consumedBookingId = pendingBookingId; pendingBookingId = "";
+      }
+    }
+    return derive({ ...s, status: loading ? "loading" : errored ? "error" : "ready", rows: page.items,
+      isMember: loading ? s.isMember : !!member.email,
+      nextCursor: page.nextCursor, complete: page.complete, total: page.total, loadingMore: page.loadingMore, pageError: page.pageError });
   },
   actions: {
-    scheduleView(s, arg) { const value = (arg as { selectedId?: string })?.selectedId; if (["agenda", "day", "month"].includes(value || "")) { mode = value!; views.write(mode); } return derive(s); },
-    selectDate(s, arg) { const date = (arg as { date?: unknown })?.date; if (validDate(date)) selectedDate = date; return derive(s); },
-    previousDay(s) { const date = new Date(`${selectedDate || today()}T12:00:00`); date.setDate(date.getDate() - 1); selectedDate = dayKey(date); return derive(s); },
-    nextDay(s) { const date = new Date(`${selectedDate || today()}T12:00:00`); date.setDate(date.getDate() + 1); selectedDate = dayKey(date); return derive(s); },
+    async selectTab(s, arg) {
+      const value = (arg as { selectedId?: string })?.selectedId;
+      if (value !== "upcoming" && value !== "past" && value !== "cancelled") return s;
+      if (value === tab) return derive(s);
+      tab = value; closeSheet();
+      // Filter and sort in one criteria change: one query, through the collection's own path.
+      await svc.collectionCriteria(TABS[value]);
+      return undefined;
+    },
+    openBooking(s, arg) {
+      const id = (arg as { id?: string })?.id;
+      if (!id || !s.rows.some(row => row.id === id)) return s;
+      openId = id; confirming = false; sheetMessage = "";
+      return derive(s);
+    },
+    closeBooking(s) { if (!cancelling) closeSheet(); return derive(s); },
+    closeResult(s) { result = null; return derive(s); },
     async rebook(s, arg) {
-      const member = pageMember, row = s.rows.find(row => row.id === (arg as { id?: string })?.id);
+      const member = pageMember, row = s.rows.find(row => row.id === ((arg as { id?: string })?.id || openId));
       if (!member || !row?.serviceId) return s;
       // A returned `_nav`, not `dispatch("himi.open")`: a worker's nav dispatch went to the flat
       // native ActionDispatcher, which has no `himi.open` handler, so Rebook silently refreshed on
       // every binary shipped before #3116. `_nav` routes through each host's nav router on all of them.
-      try { await assertMemberAccess(member); return navigate(s, { screenId: "himi_service", args: { id: row.serviceId } }); }
-      catch { await svc.refresh(); return undefined; }
+      try { await assertMemberAccess(member); closeSheet(); return navigate(derive(s), { screenId: "himi_service", args: { id: row.serviceId } }); }
+      catch { closeSheet(); await svc.refresh(); return undefined; }
     },
-    // The visible row and swipe/menu review paths prepare the SAME confirmation.
+    // Step 2 of the sheet: confirm the cancel. Nothing is written until confirmCancel. An `{ id }`
+    // param (older callers) opens that booking first.
     async cancel(s, arg) {
-      const member = pageMember, row = s.rows.find(row => row.id === (arg as { id?: string })?.id);
+      const id = (arg as { id?: string })?.id || openId;
+      const member = pageMember, row = s.rows.find(row => row.id === id);
       if (!member || !row?.canCancel || Date.parse(row.start) <= Date.now() || cancelling) return s;
-      try { await assertMemberAccess(member); cancelTarget = { row, member }; return derive(s); }
-      catch { await svc.refresh(); return undefined; }
+      try { await assertMemberAccess(member); openId = row.id; confirming = true; sheetMessage = ""; cancelMember = member; return derive(s); }
+      catch { closeSheet(); await svc.refresh(); return undefined; }
     },
-    dismissCancel(s) { if (!cancelling) cancelTarget = undefined; return derive(s); },
+    keepBooking(s) { if (!cancelling) { confirming = false; sheetMessage = ""; } return derive(s); },
     async confirmCancel(s): Promise<S | undefined> {
-      if (!cancelTarget || cancelling) return s;
-      const target = cancelTarget; cancelling = true;
+      const row = openRow(s), member = cancelMember;
+      if (!row || !member || !confirming || cancelling) return s;
+      cancelling = true;
       try {
-        await assertMemberAccess(target.member);
-        if (Date.parse(target.row.start) <= Date.now()) throw new Error("Booking already started");
-        await cancelBookingAsMember(target.row.id, target.row.revision);
-        await assertMemberAccess(target.member);
-        cancelTarget = undefined;
+        await assertMemberAccess(member);
+        if (Date.parse(row.start) <= Date.now()) throw new Error("Booking already started");
+        await cancelBookingAsMember(row.id, row.revision);
+        await assertMemberAccess(member);
+        cancelling = false; closeSheet();
         // Told to the app hosting this screen (an embed's `onAction`); dropped where nothing hosts it.
-        await emitHostEvent("booking.cancelled", { bookingId: target.row.id, serviceId: target.row.serviceId,
-          serviceName: target.row.title, start: target.row.start, end: target.row.end });
+        await emitHostEvent("booking.cancelled", { bookingId: row.id, serviceId: row.serviceId,
+          serviceName: row.title, start: row.start, end: row.end });
+        result = { text: copyParam("bookings.cancelDone", "Booking canceled."), done: true };
         await svc.refresh();
-        return derive({ ...(svc.getState() as unknown as S), actionMessage: copyParam("bookings.cancelDone", "Booking cancelled.") });
+        return derive(svc.getState() as unknown as S);
       } catch (error) {
-        try { await assertMemberAccess(target.member); } catch { cancelTarget = undefined; await svc.refresh(); return undefined; }
-        if (memberAccessDenied(error)) { cancelTarget = undefined; await svc.refresh(); return undefined; }
-        return derive({ ...s, actionMessage: isBookingPolicyViolation(error) ? copyParam("bookings.cancelPolicy", "It's too late to cancel online — contact the business.") : copyParam("bookings.cancelFailed", "The booking couldn't be cancelled. Try again.") });
+        cancelling = false;
+        try { await assertMemberAccess(member); } catch { closeSheet(); await svc.refresh(); return undefined; }
+        if (memberAccessDenied(error)) { closeSheet(); await svc.refresh(); return undefined; }
+        // The refusal stays next to the action, in step 2.
+        sheetMessage = isBookingPolicyViolation(error)
+          ? copyParam("bookings.cancelPolicy", "It's too late to cancel online. Contact the business to change this booking.")
+          : copyParam("bookings.cancelFailed", "Couldn't cancel the booking. Try again.");
+        return derive(s);
       } finally { cancelling = false; }
     },
+    async addToCalendar(s): Promise<S> {
+      const row = openRow(s);
+      if (!row || !canAddToCalendar(row)) return s;
+      const start = Date.parse(row.start);
+      const endAt = Date.parse(row.end);
+      const end = Number.isFinite(endAt) && endAt > start ? endAt : start + 60 * 60 * 1000;
+      const place = placeOf(row);
+      const location = [row.placeType === "CUSTOMER" ? "" : place, row.placeType === "CUSTOMER" || row.placeName === row.placeAddress ? "" : row.placeAddress].filter(Boolean).join(", ");
+      const notes = staffLine(row);
+      const opened = copyParam("bookings.calendarOpened", "Opened your calendar.");
+      const failed = copyParam("bookings.calendarFailed", "Couldn't add the booking to your calendar.");
+      const fallback = async () => (await open(calendarFallbackUrl(row.title, start, end, location, notes), "in_app_browser")).opened;
+      try {
+        let permission = await getPermissionStatus();
+        if (permission !== "granted" && permission !== "limited") permission = await requestPermission("writeOnly");
+        if (permission !== "granted" && permission !== "limited") return showResult(s, (await fallback()) ? opened : failed, false);
+        const created = await createEvent({ title: row.title, start, end, ...(location ? { location } : {}), ...(notes ? { notes } : {}) });
+        if (!created.id) return showResult(s, (await fallback()) ? opened : failed, false);
+        return showResult(s, copyParam("bookings.calendarAdded", "Added to your calendar."), true);
+      } catch {
+        return showResult(s, failed, false);
+      }
+    },
+    async openDirections(s): Promise<S> {
+      const row = openRow(s);
+      if (!row || !hasDirections(row)) return s;
+      try {
+        if ((await open(directionsUrl(row.placeAddress), "in_app_browser")).opened) return s;
+      } catch { /* the result sheet says so below */ }
+      return showResult(s, copyParam("bookings.mapsFailed", "Couldn't open maps."), false);
+    },
   },
 });
+
+function calendarStamp(ms: number): string {
+  return new Date(ms).toISOString().replace(/[-:]/g, "").replace(/\.\d{3}Z$/, "Z");
+}
+
+/** The Google Calendar "render" (TEMPLATE) fallback URL, built with encodeURIComponent — NOT
+ *  URLSearchParams, which the JavaScriptCore worker engine on iOS/macOS and the wrist's QuickJS-ng do
+ *  not provide (see `calendarFallbackUrl` in himi-events-detail, the pattern this copies). */
+function calendarFallbackUrl(title: string, start: number, end: number, location: string, details: string): string {
+  const parts = ["action=TEMPLATE", `text=${encodeURIComponent(title || "Booking")}`, `dates=${calendarStamp(start)}/${calendarStamp(end)}`];
+  if (location) parts.push(`location=${encodeURIComponent(location)}`);
+  if (details) parts.push(`details=${encodeURIComponent(details)}`);
+  return `https://calendar.google.com/calendar/render?${parts.join("&")}`;
+}
+
+/** A maps search for the address — the same URL the service screen opens. */
+function directionsUrl(address: string): string {
+  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
+}
+
 svc.load();
 export { svc };

package/templates/yoga-studio-owner/tier5-src/_shared/collection-service.ts

@@ -12,11 +12,15 @@ export interface CollectionSaving {
 type State = Record<string, unknown>;
 interface BackendCollection {
   restorePagesOnLoad?: boolean;
-  /** Sees the load action's argument (the screen's onAppear params) BEFORE the query runs. */
-  onLoad?(arg: unknown): void;
+  /** Sees the load action's argument (the screen's onAppear params) BEFORE the query runs. A returned
+   *  `{ filter, sort }` resets the criteria for that load (a screen that always opens on one view). */
+  onLoad?(arg: unknown): CollectionCriteriaReset | void;
   controller: ReturnType<typeof createCollectionQuery<CollectionRow>>;
   apply(state: State, page: CollectionQueryState<CollectionRow>): State;
 }
+/** A filter and a sort set together (`collectionCriteria`, `onLoad`). Values the collection's contract does
+ *  not list are ignored. */
+export interface CollectionCriteriaReset { filter?: string; sort?: string; query?: string }
 type Reducer = (s: State, ...args: unknown[]) => State | undefined | Promise<State | undefined>;
 const object = (x: unknown): State => x && typeof x === 'object' && !Array.isArray(x) ? x as State : {};
 const str = (arg: unknown, key: string): string => typeof arg === 'string' ? arg : String(object(arg)[key] ?? '');
@@ -262,6 +266,16 @@ export function decorateCollection(name: string, def: { state: State; actions?:
     if (backend && config.backendQuery && criteriaBefore !== criteriaKey()) return backend.controller.query(criteria()).then(() => undefined);
     return derive(s);
   };
+  /** Filter and sort in ONE criteria change, so a tab that sets both runs one query, not two. */
+  const setCriteria = (arg: unknown): void => {
+    const input = object(arg);
+    const sort = String(input.sort ?? '');
+    if (sort === 'default' || sort === 'az' || sort === 'za') prefs.sort = sort;
+    const filter = String(input.filter ?? '');
+    if (filter === 'all' || (filter.startsWith('value:') && (config.filterValues ?? []).includes(filter.slice(6)))) prefs.filter = filter;
+    // A screen with no search field clears a query an older screen persisted, or it narrows every view for good.
+    if (typeof input.query === 'string') prefs.query = input.query.slice(0, 256);
+  };
   const criteria = () => ({ query: prefs.query, sort: prefs.sort, filter: prefs.filter, savedIds: prefs.filter === 'saved' ? prefs.savedIds : [] });
   const criteriaKey = () => JSON.stringify(criteria());
   actions.collectionDismissFilters = change(() => { filtersPresented = false; });
@@ -273,6 +287,7 @@ export function decorateCollection(name: string, def: { state: State; actions?:
   actions.collectionSort = change(arg => { const value = str(arg, 'selectedId'); if (value === 'default' || value === 'az' || value === 'za') prefs.sort = value; });
   actions.collectionFilter = change(arg => { const values = object(arg).selectedIds; prefs.filter = Array.isArray(values) && typeof values[0] === 'string' ? values[0] : 'all'; });
   actions.collectionSearch = change(arg => { prefs.query = str(arg, 'value').slice(0, 256); });
+  actions.collectionCriteria = change(arg => setCriteria(arg));
   actions.collectionViewName = change(arg => { viewName = str(arg, 'value').slice(0, 40); viewMessage = ''; });
   actions.collectionRememberView = change(() => {
     const name = viewName.trim();
@@ -305,7 +320,8 @@ export function decorateCollection(name: string, def: { state: State; actions?:
     actions.collectionDataChanged = s => derive(backend.apply(s, backend.controller.getState()));
     actions.load = (_s, arg) => {
       stashCopy(arg); syncSaved(); applyNavigationCriteria(arg, _s);
-      backend.onLoad?.(arg);
+      const reset = backend.onLoad?.(arg);
+      if (reset) { setCriteria(reset); persisted.write(prefs); }
       // A load of what the screen already shows is the screen coming back: it revalidates behind its rows.
       return backend.controller.query(criteria(), backend.restorePagesOnLoad, true).then(() => undefined);
     };
@@ -334,11 +350,13 @@ export function defineBackendCollection<S extends object, Row extends object>(na
   register?: typeof register;
   /** Explicit mutation preflight; unrelated collection services keep their current reducers. */
   onlineWrites?: boolean;
+  /** Where the offline refusal is written (default `actionMessage`) — the field the screen shows next to the action. */
+  onlineWriteMessageFields?: readonly string[];
   /** Revalidate already opened pages on navigation return; explicit refresh resets. */
   restorePagesOnLoad?: boolean;
   /** The load action's argument (onAppear params beyond `copy`), before the query runs — for a
    *  domain setting that rides the descriptor, e.g. My Bookings' `weeklyGoal`. */
-  onLoad?(arg: unknown): void;
+  onLoad?(arg: unknown): CollectionCriteriaReset | void;
   state: S;
   source: CollectionQuerySource<Row>;
   apply(state: S, page: CollectionQueryState<Row>): S;
@@ -353,7 +371,7 @@ export function defineBackendCollection<S extends object, Row extends object>(na
     controller: controller as unknown as BackendCollection['controller'],
     apply: (state, page) => options.apply(state as S, page as unknown as CollectionQueryState<Row>) as State,
   });
-  const registerService = options.onlineWrites ? withOnlineWrites(options.register ?? register, ['confirmCancel', 'confirmOperation', 'retryOperation', 'commitWrite'], { messageFields: ['actionMessage'] }) : (options.register ?? register);
+  const registerService = options.onlineWrites ? withOnlineWrites(options.register ?? register, ['confirmCancel', 'confirmOperation', 'retryOperation', 'commitWrite'], { messageFields: options.onlineWriteMessageFields ?? ['actionMessage'] }) : (options.register ?? register);
   const handle = registerService(name, definition);
   // Registration restored the state a cold boot saved: the page it showed is this run's, before the first load. Only
   // when the service's own rows came back with it: a bundle that keeps them out of the restore (its `notHydrated`)