libra/docs/tasks/24-6.md

id, title, status, date, parent

id	title	status	date	parent
24-6	24-6 Booking Page and Booking Success	Done	2026-10-31	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.