@wix/himalaya-cli 0.1493.0 → 0.1494.0

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

@@ -1,12 +1,13 @@
 // Tier-5 bundle: himi-booking — single service detail.
-import { defineService } from "@himalaya/state";
+import { defineService, navigate } from "@himalaya/state";
 import { share as shareSheet } from "@himalaya/share";
-import { getService, type WixService } from "@himalaya/wix-bookings";
+import { open, defaultMode } from "@himalaya/open-url";
+import { getService, type WixService, type WixServiceAddress, type WixServiceBookingPolicy } from "@himalaya/wix-bookings";
 import { categoryName } from "../_shared/himi-bookings.js";
-import { formatServicePrice } from "../_shared/wix-service-price.js";
-import { stashCopy, copyParam } from "../_shared/himi-copy.js";
+import { formatServicePrice, formatServiceMoney, serviceCurrency } from "../_shared/wix-service-price.js";
+import { stashCopy, copyParam, copyTemplate } from "../_shared/himi-copy.js";
 import { get, type DbEntity } from "@himalaya/local-db";
-import { wixMediaUrl, WIX_DETAIL_IMAGE } from "@himalaya/wix-media";
+import { wixMediaUrl, WIX_DETAIL_IMAGE, WIX_LIST_IMAGE } from "@himalaya/wix-media";
 
 // Offline-first (data-offline): the service detail is a public read-through. On a
 // fetch failure we fall back to the last-synced row for this service written by
@@ -18,26 +19,87 @@ async function readCached(id: string): Promise<DbEntity | null> {
   try { return await get(ENTITY, id); } catch { /* capability not granted → online-only */ return null; }
 }
 
+/** Staff names come back only on request (Wix "Get Service" `conditionalFields`). */
+const SERVICE_FIELDS = { conditionalFields: ["STAFF_MEMBER_DETAILS"] };
+/** At most this many location rows, in record order. */
+const MAX_LOCATIONS = 3;
+
+interface ServiceImage { url: string; alt: string }
+interface LocationRow {
+  index: number;
+  title: string;
+  /** A maps search for the address; "" for the client's place. */
+  directionsUrl: string;
+  tappable: boolean;
+  notTappable: boolean;
+  a11y: string;
+}
+interface PolicyLine { text: string; owner: boolean; notOwner: boolean }
+
 interface S {
   status: "loading" | "ready";
   id: string;
   name: string;
-  subtitle: string;
-  description: string;
-  /** Labeled facts (price / duration / category) — previously collapsed into
-   *  the one footnote `subtitle`; each collapses when the catalog carries none. */
-  price: string;
-  duration: string;
+  /** The category name, shown as the small label above the name. */
   category: string;
-  hasFacts: boolean;
-  noFacts: boolean;
-  noPrice: boolean;
-  noDuration: boolean;
   noCategory: boolean;
-  initial: string;
+  tagline: string;
+  noTagline: boolean;
+  /** The price line: "₪90" + "per session", "From ₪60", "Free", or a CUSTOM description. */
+  priceText: string;
+  priceUnit: string;
+  /** A CUSTOM rate: the owner's own words stand in for the price, with no unit. */
+  priceIsText: boolean;
+  noPrice: boolean;
+  noPriceUnit: boolean;
+  /** Hide the amount row (no price, or a CUSTOM text price). */
+  noPriceAmount: boolean;
+  /** Hide the CUSTOM text price (any other rate). */
+  noPriceDescription: boolean;
+  priceA11y: string;
+  images: ServiceImage[];
+  /** The first image, for the one-image case. */
   image: string;
+  hasGallery: boolean;
+  noGallery: boolean;
+  hasOneImage: boolean;
+  noOneImage: boolean;
   hasImage: boolean;
   noImage: boolean;
+  durationText: string;
+  noDuration: boolean;
+  locations: LocationRow[];
+  noLocations: boolean;
+  online: boolean;
+  noOnline: boolean;
+  staffText: string;
+  staffImage: string;
+  staffInitials: string;
+  hasStaffImage: boolean;
+  noStaffImage: boolean;
+  noStaff: boolean;
+  payText: string;
+  paySub: string;
+  noPay: boolean;
+  noPaySub: boolean;
+  /** The business confirms each booking: the button says "Request to Book". */
+  requestToBook: boolean;
+  notRequestToBook: boolean;
+  bookableOnline: boolean;
+  notBookableOnline: boolean;
+  about: string;
+  noAbout: boolean;
+  policyLines: PolicyLine[];
+  noPolicy: boolean;
+  policyExpanded: boolean;
+  policyCollapsed: boolean;
+  /** No fact row has data: the facts section and its divider hide. */
+  noFacts: boolean;
+  /** No price, duration or category: Branded Web's summary grid hides. */
+  noKeyFacts: boolean;
+  /** Loading, error or empty: the service content hides. */
+  hideContent: boolean;
+  hideFooter: boolean;
   /** Share payload — the service page URL when the payload carries one. */
   shareUrl: string;
   timeScreenId: string;
@@ -62,69 +124,315 @@ function inputId(): string {
 }
 
 function stringOf(value: unknown): string {
-  return typeof value === "string" ? value : "";
+  return typeof value === "string" ? value.trim() : "";
 }
 
 function numberOf(value: unknown): number | undefined {
-  if (typeof value === "number") return value;
-  if (typeof value === "string" && value.trim()) return Number(value);
+  if (typeof value === "number") return Number.isFinite(value) ? value : undefined;
+  if (typeof value === "string" && value.trim()) {
+    const n = Number(value);
+    return Number.isNaN(n) ? undefined : n;
+  }
   return undefined;
 }
 
-function money(service: WixService): string {
-  // Delegates to the shared formatter so the Bookings v2 `payment.fixed.price`
-  // shape + the record's real currency (₪, not a hardcoded $) are honored (#816).
-  return formatServicePrice(service);
+// ---- Price -----------------------------------------------------------------------
+
+interface PriceLine { text: string; unit: string; isText: boolean }
+
+/** The price line by rate type. FIXED → the price; VARIED → "From {price}"; CUSTOM → the
+ *  owner's description, no unit; NO_FEE → "Free", no unit. */
+function priceLine(service: WixService): PriceLine {
+  const payment = service.payment ?? {};
+  const rate = stringOf(payment.rateType).toUpperCase();
+  const currency = serviceCurrency(service);
+  const unit = copyParam("service.unitSession", "per session");
+  if (rate === "NO_FEE") return { text: copyParam("service.priceFree", "Free"), unit: "", isText: false };
+  if (rate === "CUSTOM") return { text: stringOf(payment.custom?.description), unit: "", isText: true };
+  if (rate === "VARIED") {
+    const from = formatServiceMoney(payment.varied?.minPrice, currency) || formatServiceMoney(payment.varied?.defaultPrice, currency);
+    return { text: from ? copyTemplate("service.priceFrom", "From {price}", { price: from }) : "", unit: from ? unit : "", isText: false };
+  }
+  // FIXED, or a legacy payload with no rate type.
+  const text = formatServiceMoney(payment.fixed?.price, currency) || formatServicePrice(service);
+  return { text, unit: text ? unit : "", isText: false };
 }
 
-function durationText(service: WixService): string {
-  const minutes = numberOf((service as { duration?: unknown }).duration) ?? 0;
-  if (!minutes) return "";
-  if (minutes < 60) return `${minutes} min`;
-  const hours = Math.floor(minutes / 60);
-  const rest = minutes % 60;
-  return rest ? `${hours} hr ${rest} min` : `${hours} hr`;
+// ---- Media -----------------------------------------------------------------------
+
+/** Every distinct image of the service: `media.items`, then `mainMedia`, then `coverMedia`. */
+function serviceImages(service: WixService, name: string): ServiceImage[] {
+  const media = service.media ?? {};
+  const out: ServiceImage[] = [];
+  for (const item of [...(media.items ?? []), media.mainMedia, media.coverMedia]) {
+    const url = wixMediaUrl(item?.image?.url, WIX_DETAIL_IMAGE);
+    if (url && !out.some((image) => image.url === url)) out.push({ url, alt: stringOf(item?.image?.altText) || name });
+  }
+  if (!out.length) {
+    // Older payloads carry one image in another shape.
+    const legacy = legacyImageUrl(service);
+    if (legacy) out.push({ url: legacy, alt: name });
+  }
+  return out;
 }
 
-function mediaUrl(value: unknown): string {
+function legacyImageUrl(value: unknown): string {
   if (typeof value === "string") return wixMediaUrl(value, WIX_DETAIL_IMAGE);
   if (!value || typeof value !== "object") return "";
   if (Array.isArray(value)) {
     for (const item of value) {
-      const url = mediaUrl(item);
+      const url = legacyImageUrl(item);
       if (url) return url;
     }
     return "";
   }
-  const node = value as {
-    url?: unknown;
-    src?: unknown;
-    imageUrl?: unknown;
-    imageSrc?: unknown;
-    image?: unknown;
-    thumbnail?: unknown;
-    mediaItem?: unknown;
-    mainMedia?: unknown;
-    main?: unknown;
-    media?: unknown;
-    items?: unknown;
-    photos?: unknown;
-    gallery?: unknown;
-    coverImage?: unknown;
-  };
+  const node = value as Record<string, unknown>;
   for (const direct of [node.url, node.src, node.imageUrl, node.imageSrc]) {
     const url = wixMediaUrl(direct, WIX_DETAIL_IMAGE);
     if (url) return url;
   }
-  for (const nested of [node.image, node.thumbnail, node.mediaItem, node.mainMedia, node.main, node.media, node.items, node.photos, node.gallery, node.coverImage]) {
-    const url = mediaUrl(nested);
+  for (const key of ["image", "thumbnail", "mediaItem", "mainMedia", "main", "media", "items", "photos", "gallery", "coverImage"]) {
+    const url = legacyImageUrl(node[key]);
     if (url) return url;
   }
   return "";
 }
 
-function imageUrl(service: WixService): string {
-  return mediaUrl(service);
+// ---- Duration --------------------------------------------------------------------
+
+function minutesText(minutes: number): string {
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest ? `${hours} hr ${rest} min` : `${hours} hr`;
+}
+
+/** "45 min", "1 hr 30 min"; a service with several lengths, or a flexible range the
+ *  customer picks from: "30 min - 1 hr", "1 day - 3 days". */
+function durationText(service: WixService): string {
+  const constraints = service.schedule?.availabilityConstraints;
+  const positive = (values: unknown[]) => values.map(numberOf).filter((n): n is number => n != null && n > 0);
+  const listed = positive([
+    ...(constraints?.sessionDurations ?? []),
+    ...(constraints?.durations ?? []).map((d) => d?.minutes),
+  ]);
+  const hours = constraints?.durationRange?.hourOptions;
+  const range = positive([hours?.minDurationInMinutes, hours?.maxDurationInMinutes]);
+  const days = constraints?.durationRange?.dayOptions;
+  const dayRange = positive([days?.minDurationInDays, days?.maxDurationInDays]);
+  if (!listed.length && !range.length && dayRange.length) {
+    const dayText = (n: number) => (n === 1 ? copyParam("service.day", "1 day") : copyTemplate("service.days", "{n} days", { n }));
+    const first = Math.min(...dayRange);
+    const last = Math.max(...dayRange);
+    return first === last ? dayText(first) : `${dayText(first)} - ${dayText(last)}`;
+  }
+  const minutes = listed.length ? listed : range.length ? range : positive([service.duration]);
+  if (!minutes.length) return "";
+  const min = Math.min(...minutes);
+  const max = Math.max(...minutes);
+  return min === max ? minutesText(min) : `${minutesText(min)} - ${minutesText(max)}`;
+}
+
+// ---- Locations -------------------------------------------------------------------
+
+/** The address as one line, or "" when it names no place. A country alone (the Wix default
+ *  "Location 1") is not an address. */
+function addressText(address: WixServiceAddress | undefined): string {
+  if (!address) return "";
+  const formatted = stringOf(address.formattedAddress);
+  if (formatted) return formatted;
+  const street = [stringOf(address.streetAddress?.number), stringOf(address.streetAddress?.name)].filter(Boolean).join(" ");
+  const line = [street, stringOf(address.streetAddress?.apt)].filter(Boolean).join(" ") || stringOf(address.addressLine);
+  const city = stringOf(address.city);
+  if (!line && !city) return "";
+  return [line, city, stringOf(address.subdivision), stringOf(address.postalCode), stringOf(address.country)].filter(Boolean).join(", ");
+}
+
+function directionsUrl(address: string): string {
+  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
+}
+
+/** One row per location the customer can act on: a BUSINESS or CUSTOM location with an
+ *  address (tap → maps), or the client's place. At most {@link MAX_LOCATIONS}. */
+function locationRows(service: WixService): LocationRow[] {
+  const rows: LocationRow[] = [];
+  for (const location of service.locations ?? []) {
+    if (rows.length >= MAX_LOCATIONS) break;
+    const type = stringOf(location?.type).toUpperCase();
+    if (type === "CUSTOMER") {
+      const title = copyParam("service.clientPlace", "Client's place");
+      rows.push({ index: rows.length, title, directionsUrl: "", tappable: false, notTappable: true, a11y: title });
+      continue;
+    }
+    const place = type === "BUSINESS" ? location.business : type === "CUSTOM" ? location.custom : undefined;
+    if (!place) continue;
+    const address = addressText(place.address) || addressText(location.calculatedAddress);
+    if (!address) continue;
+    const title = (type === "BUSINESS" ? stringOf(location.business?.name) : "") || address;
+    rows.push({
+      index: rows.length,
+      title,
+      directionsUrl: directionsUrl(address),
+      tappable: true,
+      notTappable: false,
+      a11y: copyTemplate("service.directionsLabel", "Get directions to {place}", { place: title }),
+    });
+  }
+  return rows;
+}
+
+// ---- Staff -----------------------------------------------------------------------
+
+function initials(name: string): string {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]!.toUpperCase()).join("");
+}
+
+function firstName(name: string): string {
+  return name.split(/\s+/)[0] ?? name;
+}
+
+/** "With Noa Levi", "With Noa or Dana", "With Noa, Dana and 2 more". Empty when the
+ *  record carries no staff details (a visitor may not be allowed to read them). */
+function staffLine(service: WixService): { text: string; image: string; initials: string } {
+  const staff = (service.staffMemberDetails?.staffMembers ?? []).filter((member) => stringOf(member?.name));
+  if (!staff.length) return { text: "", image: "", initials: "" };
+  const names = staff.map((member) => stringOf(member.name));
+  const text = names.length === 1
+    ? copyTemplate("service.staffOne", "With {name}", { name: names[0]! })
+    : names.length === 2
+      ? copyTemplate("service.staffTwo", "With {a} or {b}", { a: firstName(names[0]!), b: firstName(names[1]!) })
+      : copyTemplate("service.staffMany", "With {a}, {b} and {count} more", { a: firstName(names[0]!), b: firstName(names[1]!), count: names.length - 2 });
+  return { text, image: wixMediaUrl(staff[0]!.mainMedia?.image?.url, WIX_LIST_IMAGE), initials: initials(names[0]!) };
+}
+
+// ---- How to pay ------------------------------------------------------------------
+
+/** The payment row, by the first rule that matches. Never mentions pricing plans. */
+function payLine(service: WixService): { text: string; sub: string } {
+  const payment = service.payment ?? {};
+  const rate = stringOf(payment.rateType).toUpperCase();
+  if (rate === "NO_FEE") return { text: "", sub: "" };
+  const options = payment.options ?? {};
+  const currency = serviceCurrency(service);
+  const depositMoney = payment.fixed?.deposit ?? payment.varied?.deposit;
+  const deposit = numberOf(depositMoney?.value);
+  if (options.deposit && deposit != null && deposit > 0) {
+    const price = rate === "VARIED" ? undefined : numberOf(payment.fixed?.price?.value);
+    const remaining = price != null && price > deposit ? price - deposit : undefined;
+    const depositCurrency = stringOf(depositMoney?.currency) || currency;
+    return {
+      text: copyTemplate("service.payDeposit", "{amount} deposit", { amount: formatServiceMoney(depositMoney, currency) }),
+      sub: remaining != null
+        ? copyTemplate("service.payDueLater", "{amount} due later", { amount: formatServiceMoney({ value: String(remaining), currency: depositCurrency }, currency) })
+        : "",
+    };
+  }
+  if (options.online && options.inPerson) return { text: copyParam("service.payBoth", "Pay now or in person"), sub: "" };
+  if (options.online) return { text: copyParam("service.payOnline", "Pay now"), sub: "" };
+  if (options.inPerson) return { text: copyParam("service.payInPerson", "Pay in person"), sub: "" };
+  return { text: "", sub: "" };
+}
+
+// ---- Our policy ------------------------------------------------------------------
+
+/** Minutes as words: under 60 → minutes; under 2 days, or not whole days → hours; else days. */
+function windowText(minutes: number): string {
+  if (minutes < 60) {
+    return minutes === 1 ? copyParam("service.minute", "1 minute") : copyTemplate("service.minutes", "{n} minutes", { n: minutes });
+  }
+  if (minutes < 2880 || minutes % 1440 !== 0) {
+    const hours = Math.round((minutes / 60) * 10) / 10;
+    return hours === 1 ? copyParam("service.hour", "1 hour") : copyTemplate("service.hours", "{n} hours", { n: hours });
+  }
+  const days = minutes / 1440;
+  return days === 1 ? copyParam("service.day", "1 day") : copyTemplate("service.days", "{n} days", { n: days });
+}
+
+type Change = { kind: "none" } | { kind: "anytime" } | { kind: "until"; minutes: number } | { kind: "off" };
+
+function changeRule(enabled: boolean | undefined, limited: boolean | undefined, minutes: number | undefined): Change {
+  if (enabled === undefined) return { kind: "none" };
+  if (!enabled) return { kind: "off" };
+  return limited && minutes != null && minutes > 0 ? { kind: "until", minutes } : { kind: "anytime" };
+}
+
+/** Strip HTML from the owner's policy text but keep its line breaks. */
+function policyText(text: string): string {
+  return text.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<[^>]*>/g, "").replace(/[ \t]+/g, " ").replace(/\n{3,}/g, "\n\n").trim();
+}
+
+/** The lines of "Our policy", from the business's own booking policy. The app never
+ *  invents policy text: each line exists only when the policy states it. */
+function policyLines(policy: WixServiceBookingPolicy | undefined): PolicyLine[] {
+  if (!policy) return [];
+  const lines: PolicyLine[] = [];
+  const add = (text: string, owner = false) => { if (text) lines.push({ text, owner, notOwner: !owner }); };
+
+  const custom = policy.customPolicyDescription;
+  if (custom?.enabled) add(policyText(stringOf(custom.description)), true);
+
+  const cancel = changeRule(policy.cancellationPolicy?.enabled, policy.cancellationPolicy?.limitLatestCancellation, numberOf(policy.cancellationPolicy?.latestCancellationInMinutes));
+  const reschedule = changeRule(policy.reschedulePolicy?.enabled, policy.reschedulePolicy?.limitLatestReschedule, numberOf(policy.reschedulePolicy?.latestRescheduleInMinutes));
+  if (cancel.kind === "until" && reschedule.kind === "until" && cancel.minutes === reschedule.minutes) {
+    add(copyTemplate("service.changeUntil", "Cancel or reschedule online up to {window} before the session starts.", { window: windowText(cancel.minutes) }));
+  } else if (cancel.kind === "anytime" && reschedule.kind === "anytime") {
+    add(copyParam("service.changeAnytime", "You can cancel or reschedule online at any time."));
+  } else {
+    if (cancel.kind === "until") add(copyTemplate("service.cancelUntil", "Cancel online up to {window} before the session starts.", { window: windowText(cancel.minutes) }));
+    if (cancel.kind === "anytime") add(copyParam("service.cancelAnytime", "You can cancel online at any time."));
+    if (cancel.kind === "off") add(copyParam("service.cancelNotOnline", "You can't cancel online. Contact us to cancel."));
+    if (reschedule.kind === "until") add(copyTemplate("service.rescheduleUntil", "Reschedule online up to {window} before the session starts.", { window: windowText(reschedule.minutes) }));
+    if (reschedule.kind === "anytime") add(copyParam("service.rescheduleAnytime", "You can reschedule online at any time."));
+    if (reschedule.kind === "off") add(copyParam("service.rescheduleNotOnline", "You can't reschedule online."));
+  }
+
+  const fees = policy.cancellationFeePolicy;
+  if (fees?.enabled) {
+    for (const window of fees.cancellationWindows ?? []) {
+      const percentage = stringOf(window?.percentage);
+      const fee = formatServiceMoney(window?.amount) || (percentage ? `${percentage}%` : "");
+      if (!fee) continue;
+      const start = numberOf(window?.startInMinutes);
+      if (start == null || start <= 0) add(copyTemplate("service.feeLate", "Late cancellations have a {fee} fee.", { fee }));
+      else if (cancel.kind === "until" && cancel.minutes === start) add(copyTemplate("service.feeAfterThat", "Cancellations after that have a {fee} fee.", { fee }));
+      else add(copyTemplate("service.feeWindow", "Cancellations less than {window} before the session starts have a {fee} fee.", { window: windowText(start), fee }));
+    }
+  }
+
+  const early = policy.limitEarlyBookingPolicy;
+  const earliest = numberOf(early?.earliestBookingInMinutes);
+  if (early?.enabled && earliest != null && earliest > 0) add(copyTemplate("service.bookingsOpen", "Bookings open {window} before the session starts.", { window: windowText(earliest) }));
+  const late = policy.limitLateBookingPolicy;
+  const latest = numberOf(late?.latestBookingInMinutes);
+  if (late?.enabled && latest != null && latest > 0) add(copyTemplate("service.bookingsClose", "Bookings close {window} before the session starts.", { window: windowText(latest) }));
+
+  // Live payloads also carry `participantsPolicy.enabled` (not in the V2 types); a disabled
+  // policy keeps its configured maximum, which is not a rule the customer is held to.
+  const participants = policy.participantsPolicy as { enabled?: boolean; maxParticipantsPerBooking?: number } | undefined;
+  const max = numberOf(participants?.maxParticipantsPerBooking);
+  if (participants?.enabled !== false && max != null && max > 1) add(copyTemplate("service.maxParticipants", "Book for up to {n} participants.", { n: max }));
+  return lines;
+}
+
+// ---- Share -----------------------------------------------------------------------
+
+/** The service's public page URL when the payload carries one ("" otherwise). Bookings
+ *  V2 puts it at `urls.servicePage.url`; the other shapes are older payloads. */
+function serviceShareUrl(service: WixService): string {
+  const page = stringOf(service.urls?.servicePage?.url);
+  if (/^https?:\/\//i.test(page)) return page;
+  const raw = service as unknown as {
+    url?: unknown;
+    servicePageUrl?: { base?: string; path?: string; relativePath?: string } | string;
+  };
+  if (typeof raw.url === "string" && /^https?:\/\//i.test(raw.url)) return raw.url;
+  const legacy = raw.servicePageUrl;
+  if (typeof legacy === "string" && /^https?:\/\//i.test(legacy)) return legacy;
+  if (legacy && typeof legacy === "object" && typeof legacy.base === "string" && legacy.base) {
+    const path = typeof legacy.path === "string" ? legacy.path : typeof legacy.relativePath === "string" ? legacy.relativePath : "";
+    return `${legacy.base.replace(/\/$/, "")}${path && !path.startsWith("/") ? "/" : ""}${path}`;
+  }
+  return "";
 }
 
 function plain(text: string | undefined): string {
@@ -134,68 +442,90 @@ function plain(text: string | undefined): string {
     .trim();
 }
 
+// ---- State -----------------------------------------------------------------------
+
 function derive(s: S): S {
-  const hasFacts = !!(s.price || s.duration || s.category);
+  const isLoading = s.status === "loading";
+  const hasService = !!s.name;
+  const hasImage = s.images.length > 0;
   return {
     ...s,
-    isLoading: s.status === "loading",
-    notLoading: s.status !== "loading",
+    isLoading,
+    notLoading: !isLoading,
     notErrored: !s.errored,
-    hasService: !!s.name,
-    hasFacts,
-    noFacts: !hasFacts,
-    noPrice: !s.price,
-    noDuration: !s.duration,
+    hasService,
+    noEmpty: isLoading || s.errored || hasService,
     noCategory: !s.category,
-    noEmpty: s.status === "loading" || s.errored || !!s.name,
+    noTagline: !s.tagline,
+    noPrice: !s.priceText,
+    noPriceUnit: !s.priceUnit,
+    noPriceAmount: !s.priceText || s.priceIsText,
+    noPriceDescription: !s.priceText || !s.priceIsText,
+    priceA11y: s.priceText && !s.priceIsText
+      ? copyTemplate("service.priceLabel", "Price, {price}", { price: [s.priceText, s.priceUnit].filter(Boolean).join(" ") })
+      : "",
+    image: s.images[0]?.url ?? "",
+    hasGallery: s.images.length > 1,
+    noGallery: s.images.length < 2,
+    hasOneImage: s.images.length === 1,
+    noOneImage: s.images.length !== 1,
+    hasImage,
+    noImage: !hasImage,
+    noDuration: !s.durationText,
+    noLocations: s.locations.length === 0,
+    noOnline: !s.online,
+    noStaff: !s.staffText,
+    hasStaffImage: !!s.staffImage,
+    noStaffImage: !s.staffImage,
+    noPay: !s.payText,
+    noPaySub: !s.paySub,
+    notRequestToBook: !s.requestToBook,
+    notBookableOnline: !s.bookableOnline,
+    noAbout: !s.about,
+    noPolicy: s.policyLines.length === 0,
+    policyCollapsed: !s.policyExpanded,
+    noFacts: !s.durationText && s.locations.length === 0 && !s.online && !s.staffText && !s.payText,
+    noKeyFacts: !s.priceText && !s.durationText && !s.category,
+    hideContent: isLoading || s.errored || !hasService,
+    hideFooter: isLoading || s.errored || !hasService || !s.bookableOnline,
     emptyText: s.errored
       ? copyParam("service.errorText", "Service details could not be loaded.")
       : copyParam("service.emptyText", "This service is not available."),
   };
 }
 
-/** The service's public page URL when the payload carries one ("" otherwise). */
-function serviceShareUrl(service: WixService): string {
-  const raw = service as unknown as {
-    url?: unknown;
-    servicePageUrl?: { base?: string; path?: string; relativePath?: string } | string;
-  };
-  if (typeof raw.url === "string" && /^https?:\/\//i.test(raw.url)) return raw.url;
-  const page = raw.servicePageUrl;
-  if (typeof page === "string" && /^https?:\/\//i.test(page)) return page;
-  if (page && typeof page === "object" && typeof page.base === "string" && page.base) {
-    const path = typeof page.path === "string" ? page.path : typeof page.relativePath === "string" ? page.relativePath : "";
-    return `${page.base.replace(/\/$/, "")}${path && !path.startsWith("/") ? "/" : ""}${path}`;
-  }
-  return "";
-}
-
 function withService(s: S, service: WixService): S {
   const serviceId = stringOf(service.id) || s.id;
   const name = stringOf(service.name) || "Service";
-  const price = money(service);
-  const duration = durationText(service);
-  // Live payloads carry `category` as a structured object — extract the name
-  // (the list worker joins the same field; see _shared/himi-bookings.ts).
-  const category = categoryName(service.category);
-  const bits = [category, duration, price].filter(Boolean);
-  const image = imageUrl(service);
+  const price = priceLine(service);
+  const staff = staffLine(service);
+  const pay = payLine(service);
   return derive({
     ...s,
     status: "ready",
     errored: false,
-    notErrored: true,
     id: serviceId,
     name,
-    subtitle: bits.join(" · "),
-    description: plain(service.description) || copyParam("service.descriptionFallback", "Choose a time that works for you."),
-    price,
-    duration,
-    category,
-    initial: (name.trim()[0] || "S").toUpperCase(),
-    image,
-    hasImage: !!image,
-    noImage: !image,
+    // Live payloads carry `category` as a structured object — extract the name
+    // (the list worker joins the same field; see _shared/himi-bookings.ts).
+    category: categoryName(service.category),
+    tagline: stringOf(service.tagLine),
+    priceText: price.text,
+    priceUnit: price.unit,
+    priceIsText: price.isText,
+    images: serviceImages(service, name),
+    durationText: durationText(service),
+    locations: locationRows(service),
+    online: service.conferencing?.enabled === true,
+    staffText: staff.text,
+    staffImage: staff.image,
+    staffInitials: staff.initials,
+    payText: pay.text,
+    paySub: pay.sub,
+    requestToBook: service.onlineBooking?.requireManualApproval === true,
+    bookableOnline: service.onlineBooking?.enabled !== false,
+    about: plain(service.description),
+    policyLines: policyLines(service.bookingPolicy),
     shareUrl: serviceShareUrl(service),
     // WS-C — canonical param-less target; the descriptor's choose-time CTA
     // binds the separate `id` state field as a first-class nav param.
@@ -203,29 +533,84 @@ function withService(s: S, service: WixService): S {
   });
 }
 
+/** The service record: with staff details when this token may read them, else without. */
+async function fetchService(id: string): Promise<WixService | undefined> {
+  try {
+    return (await getService(id, SERVICE_FIELDS)).service;
+  } catch {
+    // A visitor token that may not read STAFF_MEMBER_DETAILS must not lose the whole screen.
+    return (await getService(id)).service;
+  }
+}
+
+/** `{ index }` from a row tap, as a number (`$item.index` may arrive as a string). */
+function tappedIndex(arg: unknown): number {
+  const a = arg as { index?: unknown; args?: { index?: unknown } } | null | undefined;
+  return numberOf(a?.index ?? a?.args?.index) ?? -1;
+}
+
 const id = inputId();
 const svc = defineService<S, {
   load: (s: S, arg?: unknown) => Promise<S>;
   share: (s: S) => Promise<S>;
+  togglePolicy: (s: S) => S;
+  openDirections: (s: S, arg?: unknown) => Promise<S>;
+  chooseTime: (s: S) => S;
 }>("himiBookingService", {
   state: derive({
     status: "loading",
     id,
     name: "",
-    subtitle: "",
-    description: "",
-    price: "",
-    duration: "",
     category: "",
-    hasFacts: false,
-    noFacts: true,
-    noPrice: true,
-    noDuration: true,
     noCategory: true,
-    initial: "S",
+    tagline: "",
+    noTagline: true,
+    priceText: "",
+    priceUnit: "",
+    priceIsText: false,
+    noPrice: true,
+    noPriceUnit: true,
+    noPriceAmount: true,
+    noPriceDescription: true,
+    priceA11y: "",
+    images: [],
     image: "",
+    hasGallery: false,
+    noGallery: true,
+    hasOneImage: false,
+    noOneImage: true,
     hasImage: false,
     noImage: true,
+    durationText: "",
+    noDuration: true,
+    locations: [],
+    noLocations: true,
+    online: false,
+    noOnline: true,
+    staffText: "",
+    staffImage: "",
+    staffInitials: "",
+    hasStaffImage: false,
+    noStaffImage: true,
+    noStaff: true,
+    payText: "",
+    paySub: "",
+    noPay: true,
+    noPaySub: true,
+    requestToBook: false,
+    notRequestToBook: true,
+    bookableOnline: true,
+    notBookableOnline: false,
+    about: "",
+    noAbout: true,
+    policyLines: [],
+    noPolicy: true,
+    policyExpanded: false,
+    policyCollapsed: true,
+    noFacts: true,
+    noKeyFacts: true,
+    hideContent: true,
+    hideFooter: true,
     shareUrl: "",
     timeScreenId: id ? "himi_time" : "himi_services", // WS-C canonical + `id` nav param
     emptyText: "",
@@ -239,39 +624,36 @@ const svc = defineService<S, {
   actions: {
     load: async (s, arg) => {
       stashCopy(arg);
-      if (!s.id) return derive({ ...s, status: "ready", errored: true, notErrored: false });
+      if (!s.id) return derive({ ...s, status: "ready", errored: true });
+      const start = { ...s, policyExpanded: false };
       try {
-        const res = await getService(s.id);
-        return res.service ? withService(s, res.service) : derive({ ...s, status: "ready" });
+        const service = await fetchService(s.id);
+        return service ? withService(start, service) : derive({ ...start, status: "ready" });
       } catch {
         // Offline: paint from the last-synced services cache (written by the list
-        // worker) before falling back to the error state.
+        // worker) before falling back to the error state. The cache holds the name,
+        // the category and one image; every other row stays hidden.
         const cached = await readCached(s.id);
         if (cached) {
           const name = String(cached.name ?? "") || "Service";
           const image = String(cached.image ?? "");
           return derive({
-            ...s,
+            ...start,
             status: "ready",
             errored: false,
-            notErrored: true,
             id: s.id,
             name,
-            subtitle: String(cached.subtitle ?? ""),
-            description: "Choose a time that works for you.",
-            initial: String(cached.initial ?? "") || (name.trim()[0] || "S").toUpperCase(),
-            image,
-            hasImage: !!image,
-            noImage: !image,
+            category: String(cached.category ?? ""),
+            images: image ? [{ url: image, alt: name }] : [],
             timeScreenId: `himi_time_${s.id}`,
           });
         }
-        return derive({ ...s, status: "ready", errored: true, notErrored: false, name: "" });
+        return derive({ ...start, status: "ready", errored: true, name: "" });
       }
     },
     share: async (s) => {
       if (!s.name) return s;
-      const text = [s.name, s.subtitle].filter(Boolean).join(" — ");
+      const text = [s.name, s.tagline].filter(Boolean).join(" — ");
       try {
         await shareSheet({ subject: s.name, text, ...(s.shareUrl ? { url: s.shareUrl } : {}) });
         return s;
@@ -279,6 +661,21 @@ const svc = defineService<S, {
         return s;
       }
     },
+    togglePolicy: (s) => derive({ ...s, policyExpanded: !s.policyExpanded }),
+    // The footer button opens the time screen for the loaded service. A worker directive,
+    // not a `himi.open` with a `$service:` id param: the iOS and Android sticky footers
+    // dispatch their taps without resolving `$service:` params, so the id never arrived.
+    chooseTime: (s) => (s.id && s.hasService ? navigate(s, { screenId: "himi_time", args: { id: s.id } }) : s),
+    openDirections: async (s, arg) => {
+      const url = s.locations[tappedIndex(arg)]?.directionsUrl ?? "";
+      if (!url) return s;
+      try {
+        await open(url, defaultMode(url));
+      } catch {
+        // Nothing took the link; the screen stays as it was.
+      }
+      return s;
+    },
   },
 });
 svc.load();