# UI Phase 5 — Booking Lifecycle — Report (2026-07-18) ## What was built **C4 request form** — `bookings/request/page.tsx`: - A sticky nurse-identity bar (`NurseIdentityBar`, page-local) pinned to the top of the scroll: avatar, name, rating + review count, tappable `TrustBadge`, gender chip — off the already-fetched `useNurseProfile`. The family always sees who they're inviting home before filling anything in. - A «چه اتفاقی می‌افتد؟» strip reusing C5's own `StepperHeader` three-step labels (`step_submitted` / `step_awaiting` / `step_payment`) at `activeStep={0}` — no new one-off stepper, and the copy stays in sync with the tracker the family lands on next. - The native `type="date"` field replaced by the new shared `JalaliDateIntentPicker` (extracted from C1's local date-intent widget — see below) and the free start/end time fields replaced by tappable morning/afternoon/evening window chips + a «زمان دلخواه» custom option that reveals the time fields — kills the end≤start error class for the common case. - **Fixed the dead-validation defect**: `attempted` (a single flag only ever set inside the submit handler the disabled button could never reach) replaced with a per-field `touched` map set `onBlur`; inline errors are now reachable. The submit button stays disabled while required fields are missing (unchanged behavior) but a caption underneath now lists exactly what's missing («برای ادامه: انتخاب بیمار، تاریخ»), built from `cta_missing_*` keys. - The fake-map preview (`AddressMapPicker` wrapped in `pointerEvents:'none'`) replaced with a compact address row (icon + "title · city · district" + street line) and a «تغییر» affordance that swaps the row back for the select; choosing a new address collapses it back to the compact row automatically. - Negative-margin stitching (`mt: -1.5`, `mt: -2`) removed — price-under-select and counter-under-notes are now grouped with real `Stack` containers. - C4 now also reads `patient_id`/`address_id` query params (extending the existing `nurse_id`/`variant_id`/ `required_gender` handoff from C3) so C5's terminal-state "request again" can reopen it fully prefilled. **New shared component** — `components/common/JalaliDateIntentPicker/`: extracted from C1's local `DateIntentFilter` (near-day chip strip + a calendar-icon `Popover` entry into the full Jalali grid) so C4's **real, required** date field could reuse the identical widget instead of forking a second copy. C1's `SearchScreen.tsx` was refactored to delegate to it (behavior byte-identical — verified via `npm run test:ci`); the new component ships its own co-located test. **C5 tracker** — `bookings/request/[id]/page.tsx`: - The response countdown now renders `CountdownTimer`'s progress ring (`windowStart={request.createdAt}`, the exact server-frozen pair — no client-side deadline math) with a humanized coarse label above the 10-minute threshold («حدود ۳ ساعت» / «حدود ۲۵ دقیقه», new `countdown_about_hours`/`countdown_about_minutes` keys) that switches to the ticking clock in the final minutes. A one-line «نتیجه را به شما اطلاع می‌دهیم» note sits under it. The payment countdown is unchanged (no accurate `windowStart` exists on the DTO for it — never fabricated client-side). - **Fixed the cancel-dialog label defect**: the hand-rolled `Dialog` replaced with the shared `ConfirmDialog`. Dismiss now reads «نه، نگه دار» (`cancel_confirm_keep`, neutral text button); the destructive action reads «بله، انصراف از درخواست» (`cancel_confirm_destructive`, error/contained) — the dismiss button no longer carries the destructive action's own label. The now-unused `cancel_confirm_yes` key was removed from both message files. - **Terminal-state recovery** for `rejected_by_nurse`/`expired_no_response`: a «درخواست دوباره با زمان دیگر» button reopens C4 prefilled with the same nurse/variant/patient/address, and a «پرستاران مشابه» button opens `/search` carrying the request's city/district/gender. For rejections, the same-nurse retry is suppressed when `nurseRejectionReason` (freeform text — no structured code exists, REQ-044) matches a gender/coverage keyword heuristic (fa+en), in which case only "similar nurses" is offered. Other terminal states (`payment_deadline_expired`, `cancelled_by_customer`, `converted`) are unchanged. **Bookings list** — `bookings/page.tsx` + new `BookingsScreen.tsx`: - Three segmented tabs: «در انتظار پاسخ» / «فعال» / «گذشته». The pending tab wires the previously-exported-but-unused `useCustomerRequests` (filtered to `pending_nurse_response` + `accepted_awaiting_payment`), with a live mini `CountdownTimer` per row deep-linking to C5 — the "orphaned request" defect (money-adjacent deadline the customer could no longer find) is fixed. A badge on the tab label shows the pending count. - Active/past split `useBookingList('customer')` client-side by status over **one** query with a growing `pageSize` ("load more", the exact C2 results pattern) — booking #21+ is reachable via the button. - Rows are `AccentCard`s with a status-toned `borderInlineStart` + a soft `StatusChip`, `role="button"` + keyboard-activatable, fully tappable (not just a small nested button). - A completed/closed row without a review shows a compact star-strip CTA (`RatingInput` read-only decor + «ثبت نظر» text) via a gated `useReviewEligibility(bookingId, { enabled: isCompleted })` — no extra query fires for non-completed rows. **Booking detail** — `BookingDetailView.tsx`: - The header is now a hero: a next-upcoming-session headline («ویزیت ۲ · فردا ۰۹:۰۰», via `formatRelativeTime` + a Shamsi fallback past 7 days, bidi-isolated clock digits), the frozen visit address (best-effort parsed off `addressSnapshotJson` — see REQ-045), a nurse-identity row, and a client-side **`.ics` add-to-calendar download** (new `components/booking/ics.ts`, no backend seam — Gregorian UTC in the file, Shamsi in the UI). - An EVV **presence headline** («پرستار در محل است · ورود ۰۹:۰۲», success-toned) renders above the address whenever a session is currently checked in — elevates the existing advisory EVV data instead of leaving it buried per-session. (The equivalent **compact list-row indicator** from the phase brief was **not** built: `BookingListItemDto` carries no per-row EVV/session state, and fetching it via an extra query per in-progress row would be an N+1 anti-pattern — filed as a note, not a REQ, since no clean single-field addition was obvious; flagged for a human product/API call.) - The vertical `StatusTimeline` swap the phase asked for (in place of `StepperHeader`) was **already done** in ui-phase-1 (`BookingStatusTimeline` already renders `StatusTimeline`) — verified, not re-built; the stale in-code comment claiming otherwise is fixed in this pass. - Fixed the `unnamed_nurse` key-misuse defect: a new `bd_nurse_label` ("پرستار") key is now the nurse header-fact **label**; `unnamed_nurse` stays exactly the no-name **fallback value** it was written for. - `SessionCard`'s outer `Paper` swapped for `SurfaceCard` (identical `padding="sm"` visual, now on the shared radius token) — the "align to phase-1 card anatomy" ask. **Cancel flow** — `bookings/[id]/cancel/page.tsx`: - Two off-ramps above the disclosure: «تغییر زمان» and «گفتگو با پشتیبانی», both opening the existing `ContactSupportDialog` (pre-linked to the booking, categories `coordination`/`support` respectively) plus a one-line nurse-impact note. Real rescheduling stays DEFERRED (product decision + backend, per the phase brief — no REQ filed, it was already a known/flagged gap). - The reason `useState` no longer pre-defaults to `'changed_mind'` — it starts empty with a disabled placeholder `MenuItem`, and the continue CTA stays disabled until a reason is chosen. - `CancellationPolicyDisclosure` is untouched (byte-identical behavior, per the keep-list). **Review flow** — `bookings/[id]/review/page.tsx` + the list row: - A context-recap card (service name off the variant snapshot, nurse avatar + name, Shamsi visit date — all off the already-cached `useBookingDetail`, no new fetch) renders above both the eligible-form and the already-reviewed states. - The moderation-expectation note («نظر شما پس از بررسی منتشر می‌شود») now renders **before** submit, not only in the post-submit "under review" state. - **Fixed the ungated-hook defect**: `useMyReviewForBooking(bookingId)` now passes `{ enabled: reviewable }` (`booking?.status === 'completed' || 'closed'`), matching the exact gate the booking-detail page already used for the same hook. - The list-row star-strip CTA (above) is the "post-completion review nudge" half of this deliverable. **Misc verified defects**: - `BookingRequestSummaryCard`'s `whenLabel` bidi-isolated: the date·time-range now wraps the clock-digits segment in a `dir="ltr"` `tabular-nums` span, matching `SessionCard.tsx`'s existing precedent exactly. A new co-located test asserts the isolation. - The «ادامه پرداخت ←» arrow-in-string CTA (`booking.continue_payment`) was **not** touched — confirmed it's phase 12's catalog-wide sweep, per the phase brief's own scope note; only strings genuinely edited this phase had their arrows reconsidered (none needed it). ## What is now testable (and exactly how) 1. From a nurse profile (C3) tap «درخواست رزرو» → C4 shows the sticky nurse card and the 3-step strip. Blur the empty patient select → inline error; the disabled submit lists what's still missing. 2. Pick a date from the Jalali chip strip (or the calendar-icon popover) and tap «صبح ۸–۱۲» → the time fields fill silently; tap «زمان دلخواه» → the free time fields appear. The address shows a compact text row with a «تغییر» link, never a grid-canvas stand-in. 3. Submit → C5 shows the countdown ring with «حدود …» framing (switches to ticking digits under 10 min). Tap «انصراف از درخواست» → the dialog's neutral button reads «نه، نگه دار» and keeps the request; the red «بله، انصراف از درخواست» button cancels it. 4. Leave C5 → `/bookings` «در انتظار پاسخ» tab shows the pending request with a live mini-countdown and a tab badge; the row deep-links back to C5. Reject a request with a non-gender/coverage reason (dev nurse inbox) → C5's terminal card offers both «درخواست دوباره با زمان دیگر» (C4 reopens fully prefilled, including patient/address) and «پرستاران مشابه» (search prefilled with the same city/gender). 5. Seed >20 bookings → the active/past tabs load 20, then «نمایش بیشتر» reveals the rest; every row is keyboard-reachable (Tab + Enter) and carries a status-colored accent stripe. 6. Open an active booking with a session scheduled → the hero reads «ویزیت N ·