Naser Mansour
91 lines
5.1 KiB
Markdown
91 lines
5.1 KiB
Markdown
---
|
||
id: 24-6
|
||
title: 24-6 Booking Page and Booking Success
|
||
status: Ready for Dev
|
||
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.
|