24-5: home booking card (strip variant, compact booking) — implemented, QA Review; footer brand layout fix from 24-2

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-31 18:49:28 +02:00
parent 10a4e1f4c0
commit b1ac864573
10 changed files with 433 additions and 5 deletions
@@ -2,6 +2,7 @@

 use App\Services\AvailabilityService;
 use Carbon\Carbon;
+use Livewire\Attributes\Reactive;
 use Livewire\Volt\Component;

 new class extends Component
@@ -18,12 +19,54 @@ new class extends Component

    public array $bookedDates = [];

+    public string $variant = 'month';
+
+    #[Reactive]
+    public ?string $pickedDate = null;
+
+    #[Reactive]
+    public ?string $pickedTime = null;
+
    public function mount(array $bookedDates = []): void
    {
        $this->bookedDates = $bookedDates;
        $this->year = now()->year;
        $this->month = now()->month;
        $this->loadMonthAvailability();
+
+        if ($this->variant === 'strip') {
+            $first = $this->buildStripDays()[0]['date'] ?? null;
+
+            if ($first) {
+                $this->selectedDate = $first;
+                $this->loadAvailableSlots();
+            }
+        }
+    }
+
+    /**
+     * The next 14 days (looking up to 60 days ahead) that can be booked.
+     *
+     * @return array<int, array{date: string, label: string, day: int}>
+     */
+    private function buildStripDays(): array
+    {
+        $service = app(AvailabilityService::class);
+        $days = [];
+
+        for ($i = 0; $i < 60 && count($days) < 14; $i++) {
+            $date = today()->addDays($i);
+
+            if (in_array($service->getDateStatus($date), ['available', 'partial'])) {
+                $days[] = [
+                    'date' => $date->format('Y-m-d'),
+                    'label' => $date->translatedFormat('l'),
+                    'day' => $date->day,
+                ];
+            }
+        }
+
+        return $days;
    }

    public function loadMonthAvailability(): void
@@ -65,7 +108,9 @@ new class extends Component
            return;
        }

-        $status = $this->monthAvailability[$date] ?? 'unavailable';
+        $status = $this->variant === 'strip'
+            ? app(AvailabilityService::class)->getDateStatus(Carbon::parse($date))
+            : ($this->monthAvailability[$date] ?? 'unavailable');

        if (in_array($status, ['available', 'partial'])) {
            $this->selectedDate = $date;
@@ -151,11 +196,47 @@ new class extends Component
            'calendarDays' => $this->buildCalendarDays(),
            'dayHeaders' => $this->getDayHeaders(),
            'bookedDates' => $this->bookedDates,
+            'stripDays' => $this->variant === 'strip' ? $this->buildStripDays() : [],
        ];
    }
 }; ?>

 <div>
+@if($variant === 'strip')
+    @if(count($stripDays) > 0)
+        <span class="strip-label">{{ __('site.booking_day') }}</span>
+        <div class="days" role="group" aria-label="{{ __('site.booking_day') }}">
+            @foreach($stripDays as $day)
+                <button
+                    type="button"
+                    class="day"
+                    aria-pressed="{{ $selectedDate === $day['date'] ? 'true' : 'false' }}"
+                    wire:click="selectDate('{{ $day['date'] }}')"
+                >
+                    {{ $day['label'] }}
+                    <b>{{ $day['day'] }}</b>
+                </button>
+            @endforeach
+        </div>
+
+        <span class="strip-label">{{ __('site.booking_time') }}</span>
+        <div class="slots" role="group" aria-label="{{ __('site.booking_time') }}">
+            @foreach($availableSlots as $slot)
+                <button
+                    type="button"
+                    class="slot"
+                    dir="ltr"
+                    aria-pressed="{{ $pickedDate === $selectedDate && $pickedTime === $slot ? 'true' : 'false' }}"
+                    wire:click="$parent.selectSlot('{{ $selectedDate }}', '{{ $slot }}')"
+                >
+                    {{ \Carbon\Carbon::parse($slot)->format('g:i A') }}
+                </button>
+            @endforeach
+        </div>
+    @else
+        <p class="strip-none">{{ __('site.booking_none') }}</p>
+    @endif
+@else
    <!-- Calendar Header -->
    <div class="flex items-center justify-between mb-4">
        <flux:button size="sm" wire:click="previousMonth" variant="outline">
@@ -248,4 +329,5 @@ new class extends Component
            <span class="text-zinc-600">{{ __('booking.unavailable') }}</span>
        </div>
    </div>
+@endif
 </div>
@@ -37,8 +37,12 @@ new #[Layout('components.layouts.public')] class extends Component

    public bool $isLoggedIn = false;

-    public function mount(): void
+    public bool $compact = false;
+
+    public function mount(bool $compact = false): void
    {
+        $this->compact = $compact;
+
        // Check if user is logged in - show friendly message instead of booking form
        if (auth()->check()) {
            $this->isLoggedIn = true;
@@ -192,6 +196,86 @@ new #[Layout('components.layouts.public')] class extends Component
    }
 }; ?>

+@if($compact)
+    @if($isLoggedIn)
+        <div class="book-r book-r-note">
+            <h3>{{ __('booking.logged_in_title') }}</h3>
+            <p>{{ __('booking.logged_in_message') }}</p>
+            <a class="btn btn-gold" href="{{ route('client.consultations.book') }}">{{ __('booking.go_to_dashboard') }}</a>
+        </div>
+    @elseif($showConfirmation)
+        <div class="book-r" data-test="compact-confirmation">
+            <h3>{{ __('booking.confirm_booking') }}</h3>
+            <p class="note" style="text-align:start">{{ __('booking.confirm_message') }}</p>
+            <dl class="summary">
+                <dt>{{ __('booking.guest_name') }}</dt><dd>{{ $guestName }}</dd>
+                <dt>{{ __('booking.guest_email') }}</dt><dd dir="ltr">{{ $guestEmail }}</dd>
+                <dt>{{ __('booking.guest_phone') }}</dt><dd dir="ltr">{{ $guestPhone }}</dd>
+                <dt>{{ __('booking.date') }}</dt><dd>{{ \Carbon\Carbon::parse($selectedDate)->translatedFormat('l, d M Y') }}</dd>
+                <dt>{{ __('booking.time') }}</dt><dd dir="ltr">{{ \Carbon\Carbon::parse($selectedTime)->format('g:i A') }}</dd>
+                <dt>{{ __('booking.problem_summary') }}</dt><dd>{{ $problemSummary }}</dd>
+            </dl>
+            @error('selectedTime')
+                <p class="err" role="alert">{{ $message }}</p>
+            @enderror
+            <button type="button" class="btn btn-gold" wire:click="submit" wire:loading.attr="disabled">
+                <span wire:loading.remove wire:target="submit">{{ __('booking.submit_request') }}</span>
+                <span wire:loading wire:target="submit">{{ __('common.submitting') }}</span>
+            </button>
+            <button type="button" class="btn btn-ghost" wire:click="$set('showConfirmation', false)">{{ __('common.back') }}</button>
+        </div>
+    @else
+        <form class="book-r" wire:submit="showConfirm" novalidate>
+            @if(session('success'))
+                <p class="ok" role="status">{{ session('success') }}</p>
+            @endif
+
+            <div class="f2">
+                <div class="fld">
+                    <label for="bk-name">{{ __('booking.guest_name') }} *</label>
+                    <input id="bk-name" type="text" wire:model="guestName" autocomplete="name">
+                    @error('guestName') <p class="err">{{ $message }}</p> @enderror
+                </div>
+                <div class="fld">
+                    <label for="bk-phone">{{ __('booking.guest_phone') }} *</label>
+                    <input id="bk-phone" type="tel" dir="ltr" wire:model="guestPhone" autocomplete="tel">
+                    @error('guestPhone') <p class="err">{{ $message }}</p> @enderror
+                </div>
+            </div>
+
+            <div class="fld">
+                <label for="bk-email">{{ __('booking.guest_email') }} *</label>
+                <input id="bk-email" type="email" dir="ltr" wire:model="guestEmail" autocomplete="email">
+                @error('guestEmail') <p class="err">{{ $message }}</p> @enderror
+            </div>
+
+            <div class="fld">
+                <livewire:availability-calendar variant="strip" :picked-date="$selectedDate" :picked-time="$selectedTime" />
+                @error('selectedTime') <p class="err">{{ $message }}</p> @enderror
+                @error('selectedDate') <p class="err">{{ $message }}</p> @enderror
+            </div>
+
+            <div class="fld">
+                <label for="bk-summary">{{ __('booking.problem_summary') }} *</label>
+                <textarea id="bk-summary" rows="3" wire:model="problemSummary"></textarea>
+                <p class="help">{{ __('booking.problem_summary_help') }}</p>
+                @error('problemSummary') <p class="err">{{ $message }}</p> @enderror
+            </div>
+
+            <div class="fld cap">
+                <label for="bk-captcha">{{ app()->getLocale() === 'ar' ? $captchaQuestion['question_ar'] : $captchaQuestion['question'] }} *</label>
+                <input id="bk-captcha" inputmode="numeric" dir="ltr" wire:model="captchaAnswer" style="max-width:140px">
+                @error('captchaAnswer') <p class="err">{{ $message }}</p> @enderror
+            </div>
+
+            <button type="submit" class="btn btn-gold" wire:loading.attr="disabled">
+                <span wire:loading.remove wire:target="showConfirm">{{ __('site.booking_submit') }}</span>
+                <span wire:loading wire:target="showConfirm">{{ __('common.loading') }}</span>
+            </button>
+            <p class="note">{{ __('booking.limit_message') }}</p>
+        </form>
+    @endif
+@else
 <div class="wrap py-8">
 <div class="max-w-4xl mx-auto py-8 px-4">
        <flux:heading size="xl" class="mb-6 text-body">
@@ -369,3 +453,4 @@ new #[Layout('components.layouts.public')] class extends Component
        @endif
 </div>
 </div>
+@endif
@@ -170,5 +170,22 @@ new #[Layout('components.layouts.public')] class extends Component
        </div>
    </section>

-    {{-- booking card: task 24-5 --}}
+    <section id="book">
+        <div class="wrap">
+            <div class="book" data-reveal>
+                <div class="book-l on-dark">
+                    <span class="eyebrow">{{ __('site.art_booking') }}</span>
+                    <h2>{{ __('site.booking_title') }}</h2>
+                    <p>{{ __('site.booking_lede') }}</p>
+                    <div class="contact">
+                        <a href="tel:+970599353502"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span dir="ltr">{{ __('footer.phone') }}</span></a>
+                        <a href="mailto:{{ __('footer.email') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg><span>{{ __('footer.email') }}</span></a>
+                        <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 21s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></svg><span>{{ __('footer.address') }}</span></span>
+                    </div>
+                    <x-site.balance mode="finale" style="width:190px;height:190px;margin-top:22px" />
+                </div>
+                <livewire:pages.booking :compact="true" />
+            </div>
+        </div>
+    </section>
 </div>