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>
This commit is contained in:
Naser Mansour
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user