@wix/himalaya-cli 0.1614.0 → 0.1616.0

package/templates/salon-spa/tier5-src/himi-booking-bookings/index.ts

@@ -0,0 +1,466 @@
+import { defineBackendCollection } from "../_shared/collection-service.js";
+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, copyTemplate } from "../_shared/himi-copy.js";
+import { memberAccess, assertMemberAccess, memberAccessChanged, memberAccessDenied, type MemberAccess } from "../_shared/member-access.js";
+import { fetchMemberBookings, CANCELLED_STATUSES, type MemberBookingRow } from "../_shared/member-bookings.js";
+import { emitHostEvent } from "../_shared/host-events.js";
+import { formatClock, formatDateMedium, formatMonthDay, formatWeekdayMonthDay, formatWeekdayMonthDayLong } from "../_shared/engine-intl.js";
+import { parseWeeklyGoal, weeklyGoalProgress, weeklySessionsFromPages } from "../_shared/weekly-goal.js";
+
+// 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 (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 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> {
+  try {
+    const nowIso = new Date(now).toISOString();
+    const read = (cursor: string) => fetchMemberBookings({ query: "", filter: "value:Past", sort: "za", savedIds: [] }, cursor, nowIso, member);
+    return await weeklySessionsFromPages(await read(""), read, now);
+  } catch {
+    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[]; 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 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 && 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 };
+}
+
+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: [], 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 => {
+      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();
+      if (!cursor || !queryNow) queryNow = new Date().toISOString();
+      const page = await fetchMemberBookings(criteria, cursor, queryNow, member);
+      if (cursor) return page;
+      const weekly = weeklyGoal > 0 && member.email ? await fetchWeeklySessionsDone(member, Date.now()) : null;
+      return { ...page, metadata: { ...page.metadata, weeklyDone: weekly } };
+    },
+  },
+  apply(s, page) {
+    const member = { email: String(page.metadata?.email ?? ""), scope: String(page.metadata?.scope ?? "") };
+    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 (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: {
+    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 || 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); closeSheet(); return navigate(derive(s), { screenId: "himi_service", args: { id: row.serviceId } }); }
+      catch { closeSheet(); await svc.refresh(); return undefined; }
+    },
+    // 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 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); openId = row.id; confirming = true; sheetMessage = ""; cancelMember = member; return derive(s); }
+      catch { closeSheet(); await svc.refresh(); return undefined; }
+    },
+    keepBooking(s) { if (!cancelling) { confirming = false; sheetMessage = ""; } return derive(s); },
+    async confirmCancel(s): Promise<S | undefined> {
+      const row = openRow(s), member = cancelMember;
+      if (!row || !member || !confirming || cancelling) return s;
+      cancelling = true;
+      try {
+        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: 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);
+      } catch (error) {
+        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/salon-spa/tier5-src/himi-booking-saved/index.ts

@@ -0,0 +1,103 @@
+// Tier-5 bundle: himi-booking — saved (favorite) services.
+//
+// Lists the services saved with the heart on the service detail (himi-booking-service's
+// toggleSaved). Saves live in the app's durable on-device storage (_shared/himi-booking-saved.ts),
+// so the list paints offline and survives relaunches; they do not sync between devices. A row
+// keeps the price and duration it was saved with — the detail screen shows the current ones.
+import { defineService } from "@himalaya/state";
+import { withEmptyFlags } from "../_shared/empty-flags.js";
+import { readSavedServices, removeSavedService, type SavedService } from "../_shared/himi-booking-saved.js";
+import { stashCopy, copyParam, copyTemplate } from "../_shared/himi-copy.js";
+
+interface Row extends Omit<SavedService, "course"> {
+  /** "true" for a course, else "": a nav param is a string. */
+  course: string;
+  hasImage: boolean;
+  noImage: boolean;
+  /** "Facials · 1 hr" — the facts that are present, joined. */
+  meta: string;
+  noPrice: boolean;
+  /** Spoken labels of the row's two buttons. */
+  bookA11y: string;
+  removeA11y: string;
+}
+interface S {
+  status: "loading" | "ready" | "error";
+  rows: Row[];
+  error: string;
+  /** "" unless the last Remove failed (the list stays). */
+  message: string;
+  noMessage: boolean;
+  countLabel: string;
+  isLoading: boolean;
+  notLoading: boolean;
+  notErrored: boolean;
+  noEmpty: boolean;
+}
+
+function countLabel(n: number): string {
+  if (!n) return "";
+  return n === 1
+    ? copyParam("savedServices.countOne", "1 saved service")
+    : copyTemplate("savedServices.countMany", "{count} saved services", { count: n });
+}
+
+function shape(s: Pick<S, "status" | "rows" | "error"> & { message?: string }): S {
+  const message = s.message ?? "";
+  return {
+    ...s,
+    message,
+    noMessage: !message,
+    isLoading: s.status === "loading",
+    notLoading: s.status !== "loading",
+    notErrored: s.status !== "error",
+    noEmpty: s.status !== "ready" || s.rows.length > 0,
+    countLabel: s.status === "ready" ? countLabel(s.rows.length) : "",
+  };
+}
+
+function loadRows(): Row[] {
+  return readSavedServices().map((row) => ({
+    ...row,
+    // The Book button's `course` nav param ("true" or empty) for the time screen's course guard.
+    course: row.course ? "true" : "",
+    hasImage: !!row.image,
+    noImage: !row.image,
+    meta: [row.category, row.duration].filter(Boolean).join(" · "),
+    noPrice: !row.price,
+    bookA11y: copyTemplate("savedServices.bookLabel", "Book {name}", { name: row.name }),
+    removeA11y: copyTemplate("savedServices.removeLabel", "Remove {name} from favorites", { name: row.name }),
+  }));
+}
+
+function failed(s: S): S {
+  return shape({ ...s, status: "error", error: copyParam("savedServices.error", "Could not read your favorites. Try again.") });
+}
+
+const svc = defineService<S, {
+  load: (s: S, arg?: unknown) => S;
+  remove: (s: S, arg?: unknown) => S;
+}>("himiBookingSaved", withEmptyFlags({
+  state: shape({ status: "loading", rows: [], error: "" }),
+  actions: {
+    // Every appearance: a heart tapped on the detail since the last visit must show here.
+    load: (s, arg) => {
+      stashCopy(arg);
+      try {
+        return shape({ status: "ready", rows: loadRows(), error: "" });
+      } catch { return failed(s); }
+    },
+    remove: (s, arg) => {
+      const a = arg as { id?: unknown; args?: { id?: unknown } } | string | undefined;
+      const id = typeof a === "string" ? a : String(a?.id ?? a?.args?.id ?? "");
+      if (!id) return s;
+      try {
+        removeSavedService(id);
+        return shape({ status: "ready", rows: loadRows(), error: "" });
+      } catch {
+        return shape({ ...s, message: copyParam("savedServices.removeError", "Could not remove it. Try again.") });
+      }
+    },
+  },
+}, { rows: "noRows" }));
+export { svc };