---
id: 24-6
title: 24-6 Booking Page and Booking Success
status: Done
date: 2026-10-31
parent: 24
---

## Description

Restyle `/booking` (the non-compact rendering of `resources/views/livewire/pages/booking.blade.php`)
and `/booking/success` (`resources/views/livewire/pages/booking-success.blade.php`) to the
redesign. Behaviour does not change: the month calendar, the guest fields, the captcha, the
confirm step, the one-per-day rule, the logged-in message, and the redirect to `/booking/success`.
Task 24-5 already added `$compact`, the strip variant and the `.book`, `.book-l`, `.book-r`,
input and label styles in `resources/css/public.css`; reuse them.

### `/booking` (non-compact branch of `booking.blade.php`)

Replace the page markup (keeping every `wire:` binding, error output, and the
`@if($isLoggedIn)` / step logic) with:

`<section class="sec" style="padding-top:56px"><div class="wrap">` →
`<x-site.section-head :label="__('site.art_booking')" :title="__('booking.request_consultation')" :lede="__('site.booking_lede')" />` →
`<div class="book">`:
- `.book-l.on-dark`: `.contact` list (phone `tel:+970599353502` with
  `<span dir="ltr">{{ __('footer.phone') }}</span>`, `mailto:` `footer.email`, address
  `footer.address`, same 20px gold icons as the home card) and
  `<x-site.balance mode="static" style="width:190px;height:190px;margin-top:22px" />`.
- `.book-r` (cream inset): for a logged-in visitor, the existing logged-in title, message and
  `booking.go_to_dashboard` link (`route('client.consultations.book')`) as `btn btn-gold`.
  For a guest: step 1 — `booking.select_date_time` then `<livewire:availability-calendar />`
  (month variant); step 2 — the selected date/time summary with the existing "change" action,
  the fields name, email, phone, case summary, captcha, the gold submit; step 3 — the existing
  confirmation summary with Confirm (`btn-gold`) and Back (`btn-ghost`). The existing
  `session('success')` callout stays at the top of `.book-r`.

Below the card, inside the same `.wrap`, keep `<x-booking-expectations class="mt-10" />`
unchanged.

### Month calendar restyle (CSS only, scoped to the public site)

In `resources/css/public.css`, under `body.site`, style the month grid rendered by
`resources/views/livewire/availability-calendar.blade.php` (month variant) without editing its
markup: day cells min 44×44px, radius 10px; available and partial days white with a 6px gold dot
below the number (`::after`, `background:var(--gold)`); the selected day `background:var(--forest)`
with cream text; unavailable, closed, blocked and past days `--muted` text at 50% opacity, no
hover; month navigation buttons as 44px pills with `1.5px solid var(--line)`. Read the template
to find the exact classes or `wire:click` attributes the selectors must target; if the template
has no class to hook onto, add a class attribute only (e.g. `site-cal-day`, plus
`is-available`, `is-selected`) without changing structure or behaviour, so the client dashboard
(which has no `body.site`) renders as before.

### `/booking/success` — `booking-success.blade.php`

`<section class="sec"><div class="wrap">` → a centred cream card (max-width 560px, margin-inline auto,
`background:var(--cream)`, `1px solid var(--line)` border, radius 20px, `--shadow-2`, padding
48px 40px, text-align center) containing
`<x-site.balance mode="static" style="width:120px;height:120px;margin:0 auto 18px" />`, `<h1>`
`booking.success_title` (display font, `clamp(2rem,3.4vw,2.6rem)`), `<p>`
`booking.success_message` (muted), and `<a class="btn btn-ghost" href="{{ route('home') }}" wire:navigate>`
`site.nav_home`. Remove the `flux:icon` check-circle, `flux:heading` and `flux:button`.

### Files

- Modify: `resources/views/livewire/pages/booking.blade.php`,
  `resources/views/livewire/pages/booking-success.blade.php`, `resources/css/public.css`, and
  (class attributes only, if needed) `resources/views/livewire/availability-calendar.blade.php`.

## Acceptance Criteria

- [ ] `/booking` as a guest shows the section head, the forest card with contact details and a
      level balance, and the month calendar inside the cream panel; selecting an available day and
      a slot reveals the fields; completing the form and confirming creates one guest consultation
      and redirects to `/booking/success`.
- [ ] Every validation rule behaves as before this task (required fields, 20-character summary,
      captcha, one booking per email per day), each error rendered under its field.
- [ ] `/booking` logged in as a client shows the logged-in message and the link to
      `/client/consultations/book`, and no form.
- [ ] In the month calendar on `/booking`, available days show a gold dot, the selected day is
      forest with cream text, and unavailable days are dimmed; day cells are at least 44×44px.
- [ ] `/client/consultations/book` (logged in as a client) renders the calendar as before
      (no `body.site` styles apply there).
- [ ] `/booking/success` shows the balance, title, message and a Home button, and contains no
      `flux:` markup output (`data-flux-` attributes) in its main content.
- [ ] `/booking` and `/booking/success` have no horizontal scroll at 1440, 768 and 390px.

## Sub-tasks

None.