@wix/himalaya-cli 0.1613.0 → 0.1615.0

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

@@ -0,0 +1,544 @@
+// Tier-5 bundle: himi-salon-home — the salon-spa template's Home, Treatments and About screens.
+//
+// One read of the site's Wix Bookings services feeds all three: the Home "Signature treatments"
+// rail, the treatment-category tiles (Home and Categories) and the Categories search. Categories
+// are DERIVED from the live services (name, count, the photo of its first pictured service), so
+// a customer's own catalog shapes the screen with no configuration; a tile opens the shared
+// Treatments list at its category (the list's `category` nav param). Prices and durations use
+// the booking flow's own wording (_shared/himi-bookings.ts), so a treatment reads the same on
+// every screen. The member's first name, for the greeting, comes from the same profile read the
+// account screen uses.
+//
+// A failed read is an error with Retry and an empty catalog is an empty state — never sample
+// rows. The greeting is read at load time only: the release build hashes the boot state, so a
+// clock read at boot would make every build differ.
+import { defineService, navigate } from "@himalaya/state";
+import { queryServices, type WixService } from "@himalaya/wix-bookings";
+import { wixMediaUrl } from "@himalaya/wix-media";
+import { open as openUrl } from "@himalaya/open-url";
+import { categoryName, serviceDurationText, servicePriceLine, type BookingLabel } from "../_shared/himi-bookings.js";
+import { loadMemberProfile, signedInEmail } from "../_shared/himi-account.js";
+import { stashCopy, copyParam, copyTemplate } from "../_shared/himi-copy.js";
+
+export interface TreatmentRow {
+  id: string;
+  name: string;
+  tagLine: string;
+  category: string;
+  /** "$250", "From $120", "Free" — as the Treatments list shows it; "" when there is none. */
+  price: string;
+  duration: string;
+  image: string;
+  hasImage: boolean;
+  noImage: boolean;
+}
+export interface CategoryRow {
+  id: string;
+  name: string;
+  count: number;
+  countLabel: string;
+  image: string;
+  hasImage: boolean;
+  noImage: boolean;
+  /** The category's identity for the Treatments list's `category` nav param: its Wix id, else
+   *  `name:<name>` (the key the list builds its category titles from). */
+  key: string;
+}
+export interface TeamRow {
+  id: string;
+  name: string;
+  role: string;
+  image: string;
+  hasImage: boolean;
+  noImage: boolean;
+  initials: string;
+}
+interface S {
+  status: "loading" | "ready" | "error";
+  greeting: string;
+  firstName: string;
+  hasName: boolean;
+  noName: boolean;
+  isMember: boolean;
+  notMember: boolean;
+  memberInitials: string;
+  memberImage: string;
+  hasMemberImage: boolean;
+  noMemberImage: boolean;
+  popular: TreatmentRow[];
+  categories: CategoryRow[];
+  team: TeamRow[];
+  /** The staff read failed — the strip stays hidden (it is decoration), the catalog is unaffected. */
+  teamFailed: boolean;
+  noTeam: boolean;
+  query: string;
+  matches: TreatmentRow[];
+  /** The query `matches` answers. */
+  matchesFor: string;
+  noMatches: boolean;
+  notSearching: boolean;
+  searching: boolean;
+  matchesLabel: string;
+  noPopular: boolean;
+  noCategories: boolean;
+  total: number;
+  totalLabel: string;
+  emptyText: string;
+  errorText: string;
+  /** The outcome line of the last link action ("" when it opened). */
+  linkMessage: string;
+  isLoading: boolean;
+  notLoading: boolean;
+  errored: boolean;
+  notErrored: boolean;
+  noEmpty: boolean;
+}
+
+const POPULAR_MAX = 8;
+const TEAM_MAX = 8;
+
+type WixApi = { call: (method: string, path: string, body?: unknown) => Promise<unknown> };
+function wixApi(): WixApi | null {
+  return (globalThis as { himalaya?: { wixApi?: WixApi } }).himalaya?.wixApi ?? null;
+}
+
+function mediaUrl(value: unknown): string {
+  if (typeof value === "string") return wixMediaUrl(value);
+  if (!value || typeof value !== "object") return "";
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      const url = mediaUrl(item);
+      if (url) return url;
+    }
+    return "";
+  }
+  const node = value as Record<string, unknown>;
+  for (const direct of [node.url, node.src, node.imageUrl]) {
+    const url = wixMediaUrl(direct);
+    if (url) return url;
+  }
+  for (const nested of [node.image, node.mainMedia, node.media, node.items, node.coverMedia]) {
+    const url = mediaUrl(nested);
+    if (url) return url;
+  }
+  return "";
+}
+
+const clean = (value: unknown): string => (typeof value === "string" ? value.replace(/\s+/g, " ").trim() : "");
+
+/** The booking flow's price and duration words, read from this screen's `treatment.` copy. */
+const label: BookingLabel = (key, fallback, values) =>
+  values ? copyTemplate(`treatment.${key}`, fallback, values) : copyParam(`treatment.${key}`, fallback);
+
+export function treatmentRow(service: WixService): TreatmentRow {
+  const name = clean(service.name) || copyParam("treatment.fallbackName", "Treatment");
+  const price = servicePriceLine(service, label);
+  const image = mediaUrl((service as { media?: unknown }).media);
+  return {
+    id: String(service.id ?? ""),
+    name,
+    tagLine: clean((service as { tagLine?: unknown }).tagLine),
+    category: categoryName(service.category),
+    // A custom price is a sentence ("Priced on consultation"): the detail says it, a tile does not.
+    price: price.isText ? "" : price.text,
+    duration: serviceDurationText(service, label),
+    image,
+    hasImage: !!image,
+    noImage: !image,
+  };
+}
+
+function countLabel(n: number): string {
+  return n === 1 ? copyParam("treatments.countOne", "1 treatment") : copyTemplate("treatments.countMany", "{count} treatments", { count: n });
+}
+
+/** One tile per category, in the catalog's own category order (sortOrder, then first seen). */
+export function categoriesOf(services: WixService[]): CategoryRow[] {
+  const byName = new Map<string, { name: string; key: string; order: number; seen: number; rows: TreatmentRow[] }>();
+  services.forEach((service, index) => {
+    const name = categoryName(service.category);
+    if (!name) return;
+    const category = service.category as { id?: unknown; sortOrder?: unknown } | undefined;
+    const sortOrder = Number(category?.sortOrder);
+    const key = typeof category?.id === "string" && category.id ? category.id : `name:${name}`;
+    const entry = byName.get(name) ?? { name, key, order: Number.isFinite(sortOrder) ? sortOrder : Number.MAX_SAFE_INTEGER, seen: index, rows: [] };
+    entry.rows.push(treatmentRow(service));
+    byName.set(name, entry);
+  });
+  // A stable, id-safe key: component ids and web list keys are built from it, and a name may
+  // hold spaces. Two names can slug alike ("A/B", "A B"): a later one gets "-2", "-3", in
+  // catalog order, so no two tiles share an identity.
+  const used = new Set<string>();
+  const uniqueId = (name: string, seen: number): string => {
+    const base = `category-${name.toLocaleLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-|-$/g, "") || seen}`;
+    let id = base;
+    for (let n = 2; used.has(id); n++) id = `${base}-${n}`;
+    used.add(id);
+    return id;
+  };
+  return [...byName.values()]
+    .sort((a, b) => a.order - b.order || a.seen - b.seen)
+    .map((entry) => {
+      const pictured = entry.rows.find((row) => row.hasImage);
+      return {
+        id: uniqueId(entry.name, entry.seen),
+        name: entry.name,
+        count: entry.rows.length,
+        countLabel: countLabel(entry.rows.length),
+        image: pictured?.image ?? "",
+        hasImage: !!pictured,
+        noImage: !pictured,
+        key: entry.key,
+      };
+    });
+}
+
+/** Pictured treatments first (a rail of monograms reads as unfinished), catalog order within. */
+export function popularOf(services: WixService[]): TreatmentRow[] {
+  const rows = services.map(treatmentRow).filter((row) => row.id);
+  return [...rows.filter((row) => row.hasImage), ...rows.filter((row) => !row.hasImage)].slice(0, POPULAR_MAX);
+}
+
+function matchesOf(all: TreatmentRow[], query: string): TreatmentRow[] {
+  const q = query.trim().toLocaleLowerCase();
+  if (!q) return [];
+  return all.filter((row) => [row.name, row.category, row.tagLine].some((field) => field.toLocaleLowerCase().includes(q)));
+}
+
+function greetingNow(): string {
+  const hour = new Date().getHours();
+  if (hour < 12) return copyParam("home.greetingMorning", "Good morning");
+  if (hour < 18) return copyParam("home.greetingAfternoon", "Good afternoon");
+  return copyParam("home.greetingEvening", "Good evening");
+}
+
+/** The name to greet: the first word of a real name, never an email address. */
+export function firstNameOf(memberName: string): string {
+  const name = memberName.trim();
+  if (!name || name.includes("@")) return "";
+  return name.split(/\s+/)[0] ?? "";
+}
+
+interface RawStaff { id?: unknown; name?: unknown; description?: unknown; mainMedia?: unknown }
+
+/** "Lead aesthetician" from "Lead aesthetician. Ten years of…": the description's first sentence. */
+function roleOf(description: unknown): string {
+  const text = clean(description);
+  if (!text) return "";
+  const first = text.split(/(?<=[.!?])\s/)[0] ?? text;
+  return first.replace(/[.!?]$/, "").slice(0, 60);
+}
+
+export function teamRow(raw: RawStaff): TeamRow {
+  const name = clean(raw.name);
+  const image = mediaUrl(raw.mainMedia);
+  const words = name.split(/\s+/).filter(Boolean);
+  return {
+    id: String(raw.id ?? ""),
+    name,
+    role: roleOf(raw.description),
+    image,
+    hasImage: !!image,
+    noImage: !image,
+    initials: ((words[0]?.[0] ?? "") + (words.length > 1 ? words[words.length - 1]?.[0] ?? "" : "")).toUpperCase(),
+  };
+}
+
+/** The Bookings staff with a real name ("Staff Member #1" is Wix's unnamed default), pictured first.
+ *  The team strip is decoration on Home: a failed read is reported (`failed`) and hides the strip,
+ *  and it never fails the catalog. */
+interface TeamRead { rows: TeamRow[]; failed: boolean }
+async function loadTeam(): Promise<TeamRead> {
+  const api = wixApi();
+  if (!api) return { rows: [], failed: true };
+  try {
+    const res = await api.call("POST", "/bookings/v1/staff-members/query", { query: { cursorPaging: { limit: 50 } } }) as { staffMembers?: RawStaff[] } | null;
+    const rows = (res?.staffMembers ?? []).map(teamRow).filter((row) => row.id && row.name && !/^staff member\b/i.test(row.name));
+    return { rows: [...rows.filter((row) => row.hasImage), ...rows.filter((row) => !row.hasImage)].slice(0, TEAM_MAX), failed: false };
+  } catch {
+    return { rows: [], failed: true };
+  }
+}
+
+let allRows: TreatmentRow[] = [];
+// The catalog read in this run. A restored (hydrated) screen paints before it lands: until then
+// the search has nothing to match against, so a restored query keeps its restored results, a new
+// one waits for the read, and neither shows "no matches".
+let catalogRead = false;
+
+function derive(s: S): S {
+  const loading = s.status === "loading";
+  const errored = s.status === "error";
+  const searching = !!s.query.trim();
+  const restored = !catalogRead && s.query === s.matchesFor;
+  const matches = catalogRead ? matchesOf(allRows, s.query) : restored ? s.matches : [];
+  return {
+    ...s,
+    hasName: !!s.firstName,
+    noName: !s.firstName,
+    notMember: !s.isMember,
+    hasMemberImage: !!s.memberImage,
+    noMemberImage: !s.memberImage,
+    matches,
+    matchesFor: catalogRead || restored ? s.query : "",
+    searching,
+    notSearching: !searching,
+    noMatches: !searching || matches.length > 0 || !catalogRead,
+    matchesLabel: searching && (catalogRead || matches.length > 0) ? countLabel(matches.length) : "",
+    noPopular: s.popular.length === 0,
+    noTeam: s.team.length === 0,
+    noCategories: s.categories.length === 0,
+    totalLabel: s.total ? countLabel(s.total) : "",
+    isLoading: loading,
+    notLoading: !loading,
+    errored,
+    notErrored: !errored,
+    noEmpty: loading || errored || s.total > 0,
+    emptyText: copyParam("home.emptyText", "Treatments will appear here once the salon adds them."),
+    errorText: copyParam("home.errorText", "Treatments could not be loaded."),
+  };
+}
+
+const BOOT: S = derive({
+  status: "loading",
+  greeting: copyParam("home.greetingNeutral", "Welcome"),
+  firstName: "",
+  hasName: false,
+  noName: true,
+  isMember: false,
+  notMember: true,
+  memberInitials: "",
+  memberImage: "",
+  hasMemberImage: false,
+  noMemberImage: true,
+  popular: [],
+  categories: [],
+  team: [],
+  teamFailed: false,
+  noTeam: true,
+  query: "",
+  matches: [],
+  matchesFor: "",
+  noMatches: true,
+  notSearching: true,
+  searching: false,
+  matchesLabel: "",
+  noPopular: true,
+  noCategories: true,
+  total: 0,
+  totalLabel: "",
+  emptyText: "",
+  errorText: "",
+  linkMessage: "",
+  isLoading: true,
+  notLoading: false,
+  errored: false,
+  notErrored: true,
+  noEmpty: true,
+});
+
+const GUEST_PART: Pick<S, "isMember" | "firstName" | "memberInitials" | "memberImage"> = { isMember: false, firstName: "", memberInitials: "", memberImage: "" };
+const MEMBER_BUDGET_MS = 6000;
+
+async function memberPart(): Promise<Pick<S, "isMember" | "firstName" | "memberInitials" | "memberImage">> {
+  try {
+    const profile = await loadMemberProfile("");
+    return {
+      isMember: profile.isMember,
+      firstName: profile.isMember ? firstNameOf(profile.memberName) : "",
+      memberInitials: profile.isMember ? profile.memberInitials : "",
+      memberImage: profile.isMember ? profile.memberImage : "",
+    };
+  } catch {
+    // An unreadable profile greets a visitor; it never blocks the catalog.
+    return GUEST_PART;
+  }
+}
+
+// The query as typed NOW. `load` resolves seconds after it started (three reads in parallel), and
+// the search field is live while it runs: the snapshot `s` it was handed holds the query from
+// before, so the answer must take this one, or "fac" typed meanwhile is wiped by the load.
+// `null` until something is typed in this run: then the query on screen stands, which may be one
+// a host restored (hydrated) with the screen.
+let liveQuery: string | null = null;
+
+// The whole menu, page by page (Bookings answers at most 100 per page): categories, counts and
+// the Treatments search are derived from it, so a site with 101 services must not lose one.
+// Capped so a runaway catalog cannot stall Home; 500 is far past any salon's menu.
+const CATALOG_PAGE = 100, CATALOG_MAX = 500;
+async function readCatalog(): Promise<{ ok: true; services: WixService[] } | { ok: false; services: WixService[] }> {
+  const services: WixService[] = [];
+  try {
+    for (let offset = 0; offset < CATALOG_MAX; offset += CATALOG_PAGE) {
+      const res = await queryServices({ query: { filter: { hidden: { $ne: true } }, paging: { limit: CATALOG_PAGE, offset } } });
+      const page = res.services ?? [];
+      services.push(...page.filter((service) => !!service.id));
+      if (page.length < CATALOG_PAGE) break;
+    }
+    return { ok: true, services };
+  } catch {
+    // A failed read is the error state (status "error" below), never a partial menu.
+    return { ok: false, services: [] };
+  }
+}
+
+// Each load's number: a pooled screen re-entered while its first load still runs starts a second
+// one, and only the newest may commit. An older one that lands later answers with the state as it
+// is now (`now()`).
+let loadSeq = 0;
+// Each link tap's number, taken when the tap starts, and the tap whose answer set `linkMessage`.
+// A failed link's message belongs to the visit it was tapped on: the next load clears it, unless
+// the tap was made while that load's reads ran (an earlier visit's tap may answer during them).
+let linkTaps = 0;
+let messageTap = 0;
+// Taps up to this number belong to a visit a finished load has replaced: their late answers are dropped.
+let obsoleteTaps = 0;
+// Each member-screen tap (openForMember): only the newest one navigates after its session read.
+let memberTaps = 0;
+
+async function load(s: S): Promise<S> {
+  const mine = ++loadSeq;
+  const tapsAtStart = linkTaps;
+  const [member, team, catalog] = await Promise.all([
+    // Bounded: a session read that never answers greets a visitor, never holds the catalog. The
+    // budget covers the profile reads after the session's, so a slow member is still named.
+    within(memberPart(), MEMBER_BUDGET_MS, GUEST_PART),
+    loadTeam(),
+    readCatalog(),
+  ]);
+  if (mine !== loadSeq) return now();
+  obsoleteTaps = Math.max(obsoleteTaps, tapsAtStart);
+  // A link tapped during the reads keeps its message (About's links stay live meanwhile); one
+  // tapped before this load started is cleared, even if it answered during the reads.
+  const linkMessage = messageTap > tapsAtStart ? now().linkMessage : "";
+  const query = liveQuery ?? now().query;
+  if (!catalog.ok) return derive({ ...s, ...member, team: team.rows, teamFailed: team.failed, query, linkMessage, greeting: greetingNow(), status: "error" });
+  allRows = catalog.services.map(treatmentRow);
+  catalogRead = true;
+  return derive({
+    ...s,
+    ...member,
+    query,
+    linkMessage,
+    greeting: greetingNow(),
+    status: "ready",
+    popular: popularOf(catalog.services),
+    categories: categoriesOf(catalog.services),
+    team: team.rows,
+    teamFailed: team.failed,
+    total: allRows.length,
+  });
+}
+
+/** Directions, a call or an email: only these schemes leave the app, and a map link only to a
+ *  maps host. A link the descriptor did not mean to send is refused, never opened. */
+export function allowedLink(raw: string): string {
+  const url = raw.trim();
+  if (/^(tel|mailto):[^\s]+$/i.test(url)) return url;
+  // No `URL`: a bare iOS JSContext (the worker engine floor) has none, and `new URL` would throw
+  // there on every link. The host is read by hand — https only, no `user@` part (in
+  // "https://google.com@evil.example" the host is evil.example), then an optional port and a path.
+  // No backslash in the host either: a URL parser reads "\" as "/", so in
+  // "https://evil.example\.google.com" the host is evil.example.
+  const match = /^https:\/\/([^/?#:@\s\\]+)(?::\d+)?(?:[/?#]\S*)?$/i.exec(url);
+  if (match && /(^|\.)(google\.com|apple\.com|wix\.com|wixsite\.com|wixstudio\.com)$/i.test(match[1])) return url;
+  return "";
+}
+
+// The newest state an action returned — what a slow action answers from after its await.
+let latest: S = BOOT;
+const commit = (next: S): S => (latest = next);
+/** The state as it is now: the runtime's, which also holds a state a host restored (hydrated)
+ *  without any action here, where `latest` would still be BOOT. */
+const now = (): S => (svc.getState?.() as S | undefined) ?? latest;
+
+/** Each category-tile tap is a new visit to the Treatments list, even to the category it showed
+ *  last: the web host keeps one list worker and hands it the same `category` again. A fresh nonce
+ *  (`categoryActivation`) lets it tell a new tap from a return (Branded Lite's shop does the same). */
+let categoryTaps = 0;
+
+const valueOf = (arg: unknown): string => (typeof arg === "string" ? arg : String((arg as { value?: unknown } | undefined)?.value ?? ""));
+
+/** `read`, or `fallback` once `ms` pass, where the engine has a timer (the web and WebView hosts,
+ *  where a `himi.wix.memberIdentity` that never answers has been seen). A bare JSContext has no
+ *  timer; there it waits, as every read does. `read` must not reject. */
+function within<T>(read: Promise<T>, ms: number, fallback: T): Promise<T> {
+  const host = globalThis as { setTimeout?: (fn: () => void, ms: number) => unknown; clearTimeout?: (timer: unknown) => void };
+  if (typeof host.setTimeout !== "function") return read;
+  return new Promise<T>((resolve) => {
+    const timer = host.setTimeout!(() => resolve(fallback), ms);
+    void read.then((value) => { host.clearTimeout?.(timer); resolve(value); });
+  });
+}
+
+/** A tap's session read: one that never answers counts as a guest, so the tap opens the sign-in
+ *  rather than nothing. */
+const sessionEmail = (ms = 1500): Promise<string> => within(signedInEmail(), ms, "");
+
+const svc = defineService<S, {
+  load: (s: S, arg?: unknown) => Promise<S>;
+  refresh: (s: S, arg?: unknown) => Promise<S>;
+  search: (s: S, arg?: unknown) => S;
+  clearSearch: (s: S) => S;
+  openLink: (s: S, arg?: unknown) => Promise<S | undefined>;
+  openCategory: (s: S, arg?: unknown) => S;
+  openForMember: (s: S, arg?: unknown) => Promise<S>;
+}>("himiSalonHome", {
+  // A failed link's message belongs to that visit: a restored screen must not show it again.
+  notHydrated: ["linkMessage"],
+  state: BOOT,
+  actions: {
+    load: (s, arg) => { stashCopy(arg); return load(s).then(commit); },
+    refresh: (s, arg) => { stashCopy(arg); return load(s.status === "error" ? { ...s, status: "loading" } : s).then(commit); },
+    search: (s, arg) => { liveQuery = valueOf(arg).slice(0, 120); return commit(derive({ ...s, query: liveQuery })); },
+    clearSearch: (s) => { liveQuery = ""; return commit(derive({ ...s, query: "" })); },
+    openCategory: (s, arg) => {
+      const key = String((arg as { key?: unknown } | undefined)?.key ?? "").trim();
+      if (!key) return s;
+      return navigate(s, { screenId: "himi_services", args: { category: key, categoryActivation: `${Date.now().toString(36)}-${++categoryTaps}` } });
+    },
+    // A member screen (the chat): a member goes there; a guest gets the sign-in first, never the
+    // screen's own guest prompt. The session is asked at the tap, not read from the last load.
+    // With a presentation the sign-in is a modal that, once signed in, closes and opens the screen
+    // on `returnTab`; pushed, the sign-in pushes the screen itself (himi-store-account).
+    openForMember: async (_s, arg) => {
+      const field = (key: string): string => {
+        const value = (arg as Record<string, unknown> | undefined)?.[key];
+        return typeof value === "string" ? value : "";
+      };
+      const screenId = field("screenId"), signInScreenId = field("signInScreenId");
+      const presentation = field("signInPresentation") === "full_screen" ? "full_screen" : field("signInPresentation") === "sheet" ? "sheet" : "";
+      if (!screenId) return now();
+      const mine = ++memberTaps;
+      const email = signInScreenId ? await sessionEmail() : "";
+      // A newer tap is on its way: only it navigates (no second sheet, no sheet over the chat).
+      if (mine !== memberTaps) return now();
+      if (!signInScreenId || email) return navigate(now(), { screenId });
+      const args: Record<string, string> = { mode: "signin", returnScreenId: screenId };
+      if (!presentation) return navigate(now(), { screenId: signInScreenId, args });
+      if (field("returnTab")) args.returnTab = field("returnTab");
+      return navigate(now(), { screenId: signInScreenId, presentation, args: { ...args, modal: "1" } });
+    },
+    // After the await, `s` is the state from BEFORE the hand-off — a load may have finished
+    // meanwhile. Answer from the state as it is now (`now()`), or change nothing.
+    openLink: async (s, arg) => {
+      stashCopy(arg);
+      const url = allowedLink(String((arg as { url?: unknown } | undefined)?.url ?? ""));
+      const failed = copyParam("about.linkFailed", "This link could not be opened.");
+      const tap = ++linkTaps;
+      if (!url) { messageTap = tap; return commit(derive({ ...s, linkMessage: failed })); }
+      let opened = false;
+      try { opened = (await openUrl(url)).opened === true; } catch { opened = false; }
+      // A newer tap has answered, or a load has started a new visit since this tap: its answer
+      // would overwrite a newer result or show an old failure.
+      if (tap < messageTap || tap <= obsoleteTaps) return undefined;
+      messageTap = tap;
+      const current = now();
+      if (opened && !current.linkMessage) return undefined;
+      return commit(derive({ ...current, linkMessage: opened ? "" : failed }));
+    },
+  },
+});
+// No load at boot: Home, Treatments and About each load on appear, with their copy. A boot load
+// ran the member, team and catalog reads a second time on every first open.
+export { svc };