@wix/himalaya-cli 0.1037.0 → 0.1039.0

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

@@ -3,7 +3,7 @@ import { defineService } from "@himalaya/state";
 // Local-day keying + shared day/time labelling. `addDays` below stays local and
 // UTC-based on purpose: it bounds the availability QUERY window, which is an
 // instant range, not a calendar day.
-import { dayKey, dayLabel, timeLabel, toDate } from "@himalaya/time";
+import { addDays as addLocalDays, dayKey, dayLabel, timeLabel, toDate } from "@himalaya/time";
 import { dispatch } from "@himalaya/dispatch";
 import { bookSlot, getService, queryServiceAvailability, type WixBookingSlotFull } from "@himalaya/wix-bookings";
 import { createCheckout, createOrder } from "@himalaya/wix-ecom";
@@ -29,25 +29,21 @@ async function cachePut(row: DbEntity): Promise<void> { try { await dbUpsert(ENT
 async function cacheDrop(id: string): Promise<void> { try { await dbRemove(ENTITY, id); } catch { /* capability not granted */ } }
 async function queueWrite(actionId: string, params: Record<string, string>): Promise<void> { try { await dbEnqueue(actionId, params); } catch { /* capability not granted */ } }
 
-/** One bookable slot, in the `agendaList` row shape.
+/** One bookable slot row. Every row is a real slot.
  *
- *  Every row is a real slot. The day heading rides on the FIRST row of each day
- *  (`dayHeader`) and collapses elsewhere via the single `noHeader` inverse
- *  boolean — so one template renders one row kind.
- *
- *  This replaces the previous mixed-row encoding, where a row was EITHER a
- *  synthetic day-header or a slot, and the template carried two alternative
- *  subtrees gated by four mirror booleans (isHeader/notHeader/isSlot/notSlot).
- *  Under that shape `slots.length` counted headers too, so every consumer had
- *  to remember to filter on `isSlot` first. */
+ *  #3276 — the screen used to render the WHOLE 14-day window as one flat agenda
+ *  (the day heading riding on each day's first row), capped at 24 rows, with the
+ *  sign-in card under all of it. It now shows ONE day at a time: `days` feeds a
+ *  day strip, `slots` holds only the selected day's rows, and the strip is the
+ *  heading — so rows no longer carry a per-row one. */
 interface SlotRow {
   id: string;
-  /** Day heading on the first row of each day; "" on the rest. */
-  dayHeader: string;
-  /** Inverse of `dayHeader` — collapses the heading on non-first rows. */
-  noHeader: boolean;
+  /** Local calendar-day key (`YYYY-MM-DD`) the slot starts on. */
+  dayKey: string;
   /** Day label carried for the selected-line copy, on every row. */
   day: string;
+  /** Compact day label for the strip chip ("Sun 27"). */
+  dayChip: string;
   title: string;
   subtitle: string;
   selected: boolean;
@@ -70,7 +66,22 @@ interface S {
    *  booking through the hosted Wix bookings checkout (GPV) instead of the free
    *  bookSlot rung. Set from the service payload during load. */
   serviceIsPaid: boolean;
+  /** Day-strip chips: every day of the window (a day with no times shows a zero
+   *  count rather than being silently skipped), in the FilterChips option shape. */
+  days: DayOption[];
+  /** The day whose slots are shown — defaults to the first day that has any. */
+  selectedDay: string;
+  /** Full heading for the selected day ("Today", "Mon, Sep 28"). */
+  selectedDayLabel: string;
+  /** Only the selected day's slots. */
   slots: SlotRow[];
+  /** Copy for a selected day with no times; "" when the day has slots. */
+  dayEmptyText: string;
+  hasDaySlots: boolean;
+  noDaySlots: boolean;
+  /** No times anywhere in the window — the day strip and heading step aside
+   *  for the screen-level empty state. */
+  noWindowSlots: boolean;
   selectedSlotId: string;
   selectedLine: string;
   emptyText: string;
@@ -86,6 +97,9 @@ interface S {
   noEmpty: boolean;
   hasSelected: boolean;
   noSelected: boolean;
+  /** #3276 — the sign-in/register card belongs to the moment of booking: hidden
+   *  for a member, and for a visitor until they have picked a time. */
+  hideSignIn: boolean;
   canBook: boolean;
   cannotBook: boolean;
   showChoosePrompt: boolean;
@@ -106,7 +120,25 @@ interface S {
   bookingsScreenId: string;
 }
 
+/** One day-strip chip — the `FilterChips` option shape `dateStrip` binds. */
+interface DayOption {
+  id: string;
+  label: string;
+  count: number;
+  hasSlots: boolean;
+}
+
 let slotsById = new Map<string, WixBookingSlotFull>();
+/** Every slot row in the window, across all days. Kept out of worker state so
+ *  the state the host receives holds one day's rows, not the whole window. */
+let allRows: SlotRow[] = [];
+
+/** Days the strip offers, from today. */
+// No row cap. The old flat list capped the WHOLE window at 24 rows, which
+// silently dropped every day after the first one or two — times a customer
+// could neither see nor book. Worker state now carries one day's rows, so the
+// bound that list needed is gone, and the availability query has no paging.
+const WINDOW_DAYS = 14;
 
 function inputId(): string {
   // WS-C — `himalaya.input.id` is the PRIMARY contract: hosts thread the row's
@@ -227,8 +259,57 @@ function serviceImageUrl(value: unknown): string {
   return "";
 }
 
+/** The day id out of a chip-selection payload: FilterChips' onChange contract is
+ *  `{ selectedIds }` on every renderer; the string / `{ dayId }` / `{ id }` arms
+ *  keep direct dispatches working. A re-tap of the active chip emits `[]`. */
+function chosenDay(arg: unknown): string {
+  if (typeof arg === "string") return arg;
+  const a = arg as { selectedIds?: unknown; dayId?: unknown; id?: unknown } | undefined;
+  const ids = a?.selectedIds;
+  if (Array.isArray(ids)) return typeof ids[0] === "string" ? ids[0] : "";
+  if (typeof ids === "string") return ids;
+  if (typeof a?.dayId === "string") return a.dayId;
+  return typeof a?.id === "string" ? a.id : "";
+}
+
+/** Every day of the window from today (local), plus any day a slot lands on
+ *  outside it, sorted — each with its slot count. */
+function daysOf(rows: SlotRow[], now: Date = new Date()): DayOption[] {
+  const counts = new Map<string, number>();
+  const labels = new Map<string, string>();
+  for (const row of rows) {
+    counts.set(row.dayKey, (counts.get(row.dayKey) ?? 0) + 1);
+    if (!labels.has(row.dayKey)) labels.set(row.dayKey, row.dayChip);
+  }
+  for (let offset = 0; offset < WINDOW_DAYS; offset++) {
+    const at = addLocalDays(now, offset);
+    const key = at ? dayKey(at) : "";
+    // Compact ("Sun 27"), not the full heading: these are pills in a strip.
+    if (key && !labels.has(key)) labels.set(key, dayLabel(at, { format: "compact" }));
+  }
+  return [...labels.keys()].sort().map((key) => {
+    const count = counts.get(key) ?? 0;
+    return { id: key, label: labels.get(key) ?? key, count, hasSlots: count > 0 };
+  });
+}
+
+/** Show `day`: its rows (selection flags from the current selection) + heading. */
+function withDay(s: S, day: string): S {
+  const rows = allRows.filter((row) => row.dayKey === day);
+  const noon = day ? new Date(`${day}T12:00:00`) : null;
+  return {
+    ...s,
+    selectedDay: day,
+    selectedDayLabel: rows[0]?.day ?? (noon && !Number.isNaN(noon.getTime()) ? dayLabel(noon) : ""),
+    slots: rows.map((row) => ({ ...row, selected: row.id === s.selectedSlotId, notSelected: row.id !== s.selectedSlotId })),
+  };
+}
+
 function derive(s: S): S {
-  const hasSlots = s.slots.length > 0;
+  // `hasSlots` is the WHOLE window (it drives the screen-level empty state); the
+  // selected day having none is a per-day line, not an empty screen.
+  const hasSlots = s.days.some((d) => d.hasSlots) || s.slots.length > 0;
+  const hasDaySlots = s.slots.length > 0;
   const hasSelected = !!s.selectedSlotId;
   const hasSuccess = !!s.successMessage;
   const canBook = s.isMember && hasSelected && !s.bookingInFlight && !hasSuccess;
@@ -239,6 +320,15 @@ function derive(s: S): S {
     hasSlots,
     hasSelected,
     noSelected: !hasSelected,
+    hideSignIn: s.isMember || !hasSelected,
+    hasDaySlots,
+    noDaySlots: !hasDaySlots,
+    noWindowSlots: !hasSlots,
+    // Only a quiet DAY in a window that has times gets the per-day line; a
+    // window with no times at all is the screen-level empty state's job.
+    dayEmptyText: hasDaySlots || !s.selectedDay || !hasSlots
+      ? ""
+      : copyParam("time.dayEmptyText", "No times on this day. Try another day."),
     hasSuccess,
     noSuccess: !hasSuccess,
     canBook,
@@ -336,6 +426,7 @@ const id = inputId();
 const svc = defineService<S, {
   load: (s: S, arg?: unknown) => Promise<S>;
   refreshMember: (s: S, arg?: unknown) => Promise<S>;
+  selectDay: (s: S, arg?: unknown) => S;
   selectSlot: (s: S, arg?: unknown) => S;
   setEmail: (s: S, arg?: unknown) => S;
   setPassword: (s: S, arg?: unknown) => S;
@@ -358,7 +449,14 @@ const svc = defineService<S, {
     servicePrice: "",
     serviceDuration: "",
     serviceIsPaid: false,
+    days: [],
+    selectedDay: "",
+    selectedDayLabel: "",
     slots: [],
+    dayEmptyText: "",
+    hasDaySlots: false,
+    noDaySlots: true,
+    noWindowSlots: true,
     selectedSlotId: "",
     selectedLine: "",
     emptyText: "",
@@ -374,6 +472,7 @@ const svc = defineService<S, {
     noEmpty: true,
     hasSelected: false,
     noSelected: true,
+    hideSignIn: true,
     canBook: false,
     cannotBook: true,
     showChoosePrompt: false,
@@ -409,32 +508,39 @@ const svc = defineService<S, {
         // Group by LOCAL calendar day, not by the formatted heading: two
         // distinct days can render the same text, and a UTC-derived key can
         // name a different day than the heading beside it.
-        let lastKey = "";
         for (const [index, entry] of (availability.availabilityEntries ?? [])
           .filter((candidate) => candidate.bookable !== false && candidate.slot?.startDate)
-          .slice(0, 24)
           .entries()) {
           const slot = entry.slot as WixBookingSlotFull;
+          const key = dayKey(slot.startDate);
+          if (!key) continue;
           const slotId = String(slot.sessionId ?? slot.startDate ?? `slot-${index}`);
           slotsById.set(slotId, slot);
           const label = fmtRange(slot.startDate, slot.endDate);
-          const key = dayKey(slot.startDate);
-          const firstOfDay = !!key && key !== lastKey;
-          if (firstOfDay) lastKey = key;
           rows.push({
             id: slotId,
-            dayHeader: firstOfDay ? label.day : "",
-            noHeader: !firstOfDay,
+            dayKey: key,
             day: label.day,
+            dayChip: dayLabel(slot.startDate, { format: "compact" }),
             title: label.title,
             subtitle: label.subtitle,
             selected: false,
             notSelected: true,
           });
         }
+        allRows = rows;
+        const days = daysOf(rows);
+        // Keep the customer's day across a reload when it still has times;
+        // otherwise open on the first day that has any.
+        const keep = days.find((d) => d.id === next.selectedDay && d.hasSlots);
+        const initialDay = keep?.id ?? days.find((d) => d.hasSlots)?.id ?? days[0]?.id ?? "";
+        const selectionAlive = slotsById.has(next.selectedSlotId);
         const header = serviceHeaderFields(serviceRes.service);
-        return derive({
+        return derive(withDay({
           ...next,
+          days,
+          selectedSlotId: selectionAlive ? next.selectedSlotId : "",
+          selectedLine: selectionAlive ? next.selectedLine : "",
           status: "ready",
           errored: false,
           serviceName: serviceRes.service?.name || copyParam("time.serviceNameFallback", "Choose a time"),
@@ -445,19 +551,28 @@ const svc = defineService<S, {
           servicePrice: header.price,
           serviceDuration: header.duration,
           serviceIsPaid: header.paid,
-          slots: rows,
-        });
+        }, initialDay));
       } catch {
         slotsById = new Map();
-        return derive({ ...next, status: "ready", errored: true, slots: [] });
+        allRows = [];
+        return derive({ ...next, status: "ready", errored: true, days: [], selectedDay: "", selectedDayLabel: "", slots: [] });
       }
     },
+    // #3276 — show one day's times. Re-tapping the active chip emits an empty
+    // selection; the strip is single-select with no "none", so the day stays.
+    // A time picked on another day stays selected (the selected line and the
+    // Book button keep naming it): switching days to compare is not a reset.
+    selectDay: (s, arg) => {
+      const day = chosenDay(arg);
+      if (!day || !s.days.some((d) => d.id === day)) return derive(s);
+      return derive(withDay(s, day));
+    },
     refreshMember: (s, arg) => { stashCopy(arg); return probeMember(s); },
     selectSlot: (s, arg) => {
       const slotId = typeof arg === "string"
         ? arg
         : ((arg as { id?: string; slotId?: string })?.slotId ?? (arg as { id?: string })?.id ?? "");
-      const selected = s.slots.find((slot) => slot.id === slotId);
+      const selected = allRows.find((slot) => slot.id === slotId);
       return derive({
         ...s,
         selectedSlotId: selected ? slotId : s.selectedSlotId,
@@ -592,7 +707,7 @@ const svc = defineService<S, {
       const email = (await signedInEmail()) || my.email || my.contactEmail || s.email;
       const name = contactName(displayName(my) || email);
       // Optimistic local write — My Bookings repaints from cache immediately (offline or not).
-      const selectedSlot = s.slots.find((r) => r.id === s.selectedSlotId);
+      const selectedSlot = allRows.find((r) => r.id === s.selectedSlotId);
       const localId = `local-${Date.now()}`;
       const localRow = (id: string): DbEntity => ({
         id,