Livewire issue
unknown
php_laravel_blade
3 years ago
14 kB
5
Indexable
<div class="flex flex-col justify-between min-h-[45vh] overflow-hidden">
@if ($onboardingCompleted)
<div class="flex flex-col items-center justify-center">
<div class="flex flex-col items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.707-9.293a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<h2 class="mt-4 text-2xl font-semibold">{{ __('Congratulations') }}, {{ auth()->user()->first_name }}</h2>
<p class="mt-4 text-sm text-gray-600">{{ __('You have competed onboarding, you can now start using') }} {{ config('app.name') }}.</p>
<a href="{{ route('dashboard') }}" class="items-center inline-block px-3 py-2 mt-4 text-sm font-medium leading-4 text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{{ __('Go to dashboard') }}
</a>
</div>
</div>
@else
<div class="header">
<nav class="flex items-center justify-center mt-4" aria-label="Progress">
<p class="text-sm font-medium">Step {{ $currentStep }} of {{ $totalSteps }}</p>
<ol role="list" class="flex items-center ml-8 space-x-5">
@for ($i = 1; $i <= $totalSteps ; $i++)
@if ($currentStep > $i)
<li wire:key="step-{{ $i }}">
<button wire:click="goToStep({{ $i }})" class="block w-2.5 h-2.5 bg-indigo-600 rounded-full hover:bg-indigo-900">
<span class="sr-only">{{ __('Step') }} {{ $i }}</span>
</button>
</li>
@endif
@if ($currentStep === $i)
<li wire:key="step-{{ $i }}">
<button wire:click="goToStep({{ $i }})" class="relative flex items-center justify-center" aria-current="step">
<span class="absolute flex w-5 h-5 p-px" aria-hidden="true">
<span class="w-full h-full bg-indigo-200 rounded-full"></span>
</span>
<span class="relative block w-2.5 h-2.5 bg-indigo-600 rounded-full" aria-hidden="true"></span>
<span class="sr-only">{{ __('Step') }} {{ $i }}</span>
</button>
</li>
@endif
@if ($i > $currentStep)
<li wire:key="step-{{ $i }}">
<button wire:click="goToStep({{ $i }})" class="block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400">
<span class="sr-only">{{ __('Step') }} {{ $i }}</span>
</button>
</li>
@endif
@endfor
</ol>
</nav>
</div>
<div class="flex-grow mt-6 mb-6 content">
<div>
@if ($currentStep === 1)
<div class="grid grid-cols-6 gap-6 step">
<!-- First Name -->
<div class="col-span-6">
<x-jet-label for="first_name" value="{{ __('First Name') }}" />
<x-jet-input id="first_name" type="text" class="block w-full mt-1" wire:model.defer="state.first_name" autocomplete="first_name" />
<x-jet-input-error for="first_name" class="mt-2" />
</div>
<!-- Last Name -->
<div class="col-span-6">
<x-jet-label for="last_name" value="{{ __('Last Name') }}" />
<x-jet-input id="last_name" type="text" class="block w-full mt-1" wire:model.defer="state.last_name" autocomplete="last_name" />
<x-jet-input-error for="last_name" class="mt-2" />
</div>
<div class="col-span-6">
<x-jet-label for="date_of_birth" value="{{ __('Date of Birth') }}" />
<x-jet-input id="date_of_birth" type="date" class="block w-full mt-1" max="{{ now()->subYears(18)->format('Y-m-d') }}" placeholder="dd/mm/yyyy" wire:model.defer="state.date_of_birth" />
<x-jet-input-error for="date_of_birth" class="mt-2" />
</div>
<div class="col-span-6">
<x-jet-label for="mobile_number" value="{{ __('Mobile Number') }}" />
<x-jet-input id="mobile_number" type="text" class="block w-full mt-1" placeholder="07911123456" wire:model.defer="state.mobile_number" />
<x-jet-input-error for="mobile_number" class="mt-2" />
</div>
<!-- Email -->
<div class="col-span-6">
<x-jet-label for="email" value="{{ __('Email') }}" />
<x-jet-input id="email" type="email" class="block w-full mt-1" wire:model.defer="state.email" />
<x-jet-input-error for="email" class="mt-2" />
</div>
</div>
@endif
@if ($currentStep === 2)
<div class="grid grid-cols-6 gap-6 step">
<div class="col-span-6 sm:col-span-2">
<x-jet-label for="house_name_or_number" value="{{ __('House name or number') }}" />
<x-jet-input id="house_name_or_number" type="text" class="block w-full mt-1" wire:model.defer="state.house_name_or_number" />
<x-jet-input-error for="house_name_or_number" class="mt-2" />
</div>
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="line_1" value="{{ __('Address') }}" />
<x-jet-input id="line_1" type="text" class="block w-full mt-1" wire:model.defer="state.line_1" />
<x-jet-input-error for="line_1" class="mt-2" />
</div>
<div class="col-span-6 sm:col-span-6">
<x-jet-label for="line_2" value="{{ __('Line 2') }}" />
<x-jet-input id="line_2" type="text" class="block w-full mt-1" wire:model.defer="state.line_2" />
<x-jet-input-error for="line_2" class="mt-2" />
</div>
<div class="col-span-6 sm:col-span-2">
<x-jet-label for="town" value="{{ __('Town') }}" />
<x-jet-input id="town" type="text" class="block w-full mt-1" wire:model.defer="state.town" />
<x-jet-input-error for="town" class="mt-2" />
</div>
<div class="col-span-6 sm:col-span-2">
<x-jet-label for="alpha_two_code" value="{{ __('Country') }}" />
<select class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" wire:model.defer="state.alpha_two_code">
@foreach ($this->countries as $country)
<option value="{{ $country->code_2 }}" selected wire:key="country-{{ $country }}">{{ $country->name }}</option>
@endforeach
</select>
<x-jet-input-error for="alpha_two_code" class="mt-2" />
</div>
<div class="col-span-6 sm:col-span-2">
<x-jet-label for="postcode" value="{{ __('Postcode') }}" />
<x-jet-input id="postcode" type="text" class="block w-full mt-1" wire:model.defer="state.postcode" />
<x-jet-input-error for="postcode" class="mt-2" />
</div>
</div>
@endif
@if ($currentStep === 3)
<div class="flex flex-col mx-auto mt-8 step">
<h2 class="text-3xl font-semibold text-canny-blue">
{{ __('Verify your mobile number!') }}
</h2>
{{ $debug }}
@if ($mobileConfirmationCodeSent)
<div class="p-4 mt-4 rounded-md bg-blue-50">
<div class="mt-2 text-sm text-blue-800">
<p>
{{ __('We have sent you a confirmation code on') }}
<strong>{{ auth()->user()->mobile_number }}</strong>. {{ __('Please enter the 6-digit confirmation code we have sent you to confirm your mobile number.') }}
</p>
</div>
</div>
@endif
<div class="mt-4">
<div class="flex items-end w-full space-x-2">
<div class="w-full">
<x-jet-label for="confirmation_code" value="{{ __('Confirmation code') }}" />
<x-jet-input id="confirmation_code" type="number" min="6" max="6" class="block w-full mt-1" placeholder="XXXXXX" wire:model.defer="state.confirmation_code" />
</div>
</div>
<x-jet-input-error for="confirmation_code" class="mt-2" />
<div class="mt-2 text-sm text-gray-600">
<p>
{{ __("Didn't get any code?") }}
<a href="#" wire:click="goToStep(1)" class="text-indigo-700 hover:text-indigo-500">{{ __('Check if your mobile number is correct') }}</a>
<strong>{{ __('or') }}</strong>
<a href="#" wire:click="getConfirmationCode" class="text-indigo-700 hover:text-indigo-500">{{ __('send a new code') }}</a>
</p>
</div>
</div>
</div>
@endif
</div>
</div>
<div class="mt-auto footer">
<div class="flex justify-between">
@if ($currentStep == 1)
<div></div>
@endif
@if ($currentStep <= $totalSteps && $currentStep > 1)
<x-jet-secondary-button wire:click="previousStep">{{ __('Back') }}</x-jet-secondary-button>
@endif
@if ($currentStep < $totalSteps && $currentStep >= 1)
<x-jet-button wire:click="nextStep" wire:loading.attr="disabled" wire:target="nextStep">
<span wire:loading.remove wire:target="nextStep">
{{ _('Next') }}
</span>
<span wire:loading wire:target="nextStep">
<span class="flex">
<svg class="w-4 h-4 mr-3 -ml-1 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>{{ _('Loading...') }}</span>
</span>
</span>
</x-jet-button>
@endif
@if ($currentStep === $totalSteps)
<x-jet-button wire:click="submit" wire:loading.attr="disabled">
<span wire:loading.remove>
{{ _('Submit') }}
</span>
<span wire:loading>
<span class="flex">
<svg class="w-4 h-4 mr-3 -ml-1 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>{{ _('Submiting...') }}</span>
</span>
</span>
</x-jet-button>
@endif
</div>
</div>
@endif
</div>
Editor is loading...