refactor: improve onboarding modal functionality with enhanced slide preparation and dynamic action labels for better user interaction
This commit is contained in:
@@ -1,4 +1,12 @@
|
||||
@php use Illuminate\Support\Facades\Storage; @endphp
|
||||
@php
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
|
||||
$preparedSlides = collect($slides)->map(function ($slide) {
|
||||
$slide['image_url'] = $slide['image'] ? Storage::url($slide['image']) : null;
|
||||
return $slide;
|
||||
})->values();
|
||||
@endphp
|
||||
|
||||
@if($showModal && count($slides) > 0)
|
||||
<style>
|
||||
.onboarding-modal[x-cloak],
|
||||
@@ -8,17 +16,14 @@
|
||||
</style>
|
||||
|
||||
<div class="onboarding-modal"
|
||||
x-data="{
|
||||
x-data="paymenterOnboarding({
|
||||
open: @entangle('showModal').live,
|
||||
currentSlide: @entangle('currentSlide').live
|
||||
}"
|
||||
x-init="$watch('open', value => {
|
||||
if (value) {
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.documentElement.style.overflow = '';
|
||||
}
|
||||
currentSlide: @entangle('currentSlide').live,
|
||||
slides: @js($preparedSlides),
|
||||
componentId: '{{ $this->getId() }}',
|
||||
showBackdrop: @json($this->showBackdrop)
|
||||
})"
|
||||
x-init="init()"
|
||||
x-cloak>
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
@@ -29,14 +34,14 @@
|
||||
x-transition:leave-end="opacity-0"
|
||||
style="position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;">
|
||||
|
||||
@if($this->showBackdrop)
|
||||
<template x-if="showBackdrop">
|
||||
<div class="bg-black/50"
|
||||
style="position: absolute; inset: 0; pointer-events: auto;"
|
||||
wire:click="finish"></div>
|
||||
@endif
|
||||
@click="finish()"></div>
|
||||
</template>
|
||||
|
||||
<div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible"
|
||||
style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;"
|
||||
<div class="bg-background-secondary border border-neutral rounded-2xl shadow-2xl"
|
||||
style="position: relative; width: min(32rem, calc(100% - 2rem)); pointer-events: auto; z-index: 10;"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-90"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
@@ -44,70 +49,127 @@
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90">
|
||||
|
||||
@foreach($slides as $index => $slide)
|
||||
<div class="onboarding-slide"
|
||||
wire:key="slide-{{ $slide['id'] }}"
|
||||
x-show="currentSlide === {{ $index }}"
|
||||
x-cloak
|
||||
x-transition:enter="transition ease-out duration-150"
|
||||
<template x-for="(slide, index) in slides" :key="slide.id">
|
||||
<div x-show="currentSlide === index"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 translate-y-2"
|
||||
style="display: flex; flex-direction: column;">
|
||||
style="display: flex; flex-direction: column;"
|
||||
x-cloak>
|
||||
|
||||
@if($slide['image'])
|
||||
<div style="width: 100%; height: 14rem; overflow: hidden; border-radius: 0.75rem 0.75rem 0 0;">
|
||||
<img style="width: 100%; height: 100%; object-fit: cover;"
|
||||
src="{{ Storage::url($slide['image']) }}"
|
||||
alt="{{ $slide['title'] }}">
|
||||
<template x-if="slide.image">
|
||||
<div style="width: 100%; height: 14rem; overflow: hidden; border-radius: 1rem 1rem 0 0;">
|
||||
<img :src="slide.image_url ?? slide.image"
|
||||
:alt="slide.title"
|
||||
style="width: 100%; height: 100%; object-fit: cover;">
|
||||
</div>
|
||||
@endif
|
||||
</template>
|
||||
|
||||
<div style="padding: 1.5rem;">
|
||||
<h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;" class="text-primary-100">
|
||||
{{ $slide['title'] }}
|
||||
</h3>
|
||||
<p style="font-size: 0.875rem; line-height: 1.625;" class="text-base/80">
|
||||
{{ $slide['description'] }}
|
||||
</p>
|
||||
<h3 class="text-primary-100"
|
||||
style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;"
|
||||
x-text="slide.title"></h3>
|
||||
<p class="text-base/80"
|
||||
style="font-size: 0.9rem; line-height: 1.6;"
|
||||
x-text="slide.description"></p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
|
||||
@foreach($slides as $dotIndex => $dot)
|
||||
<div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s;"
|
||||
:style="currentSlide === {{ $dotIndex }} ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);'"></div>
|
||||
@endforeach
|
||||
<template x-for="dotIndex in slides.length" :key="'dot-' + dotIndex">
|
||||
<div style="height: 0.4rem; border-radius: 9999px; transition: all 0.3s;"
|
||||
:style="currentSlide === dotIndex - 1 ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.4rem; background-color: var(--color-neutral, #525252);'"></div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem;">
|
||||
<button wire:click="previousSlide"
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem 1.5rem 1.5rem;">
|
||||
<button @click="previous()"
|
||||
:disabled="currentSlide === 0"
|
||||
style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; border: none; background: transparent; cursor: pointer;"
|
||||
class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span style="display: flex; align-items: center; gap: 0.375rem;">
|
||||
class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style="padding: 0.4rem 1rem; font-size: 0.875rem; font-weight: 500; border: none; background: transparent; cursor: pointer;">
|
||||
<span style="display: flex; align-items: center; gap: 0.4rem;">
|
||||
<svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Back
|
||||
{{ __('Back') }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button @click="currentSlide === {{ count($slides) - 1 }} ? $wire.finish() : $wire.nextSlide()"
|
||||
style="padding: 0.375rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; border: none; cursor: pointer; color: white;"
|
||||
class="bg-primary hover:bg-primary/90">
|
||||
<span style="display: flex; align-items: center; gap: 0.375rem;">
|
||||
<span x-text="currentSlide === {{ count($slides) - 1 }} ? 'Finish' : (@js($slide['is_guided'] ?? false) ? 'Continue' : 'Next')"></span>
|
||||
<svg x-show="currentSlide !== {{ count($slides) - 1 }}" style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<button @click="next()"
|
||||
class="bg-primary hover:bg-primary/90"
|
||||
style="padding: 0.45rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; border: none; color: white; cursor: pointer;">
|
||||
<span style="display: flex; align-items: center; gap: 0.4rem;">
|
||||
<span x-text="primaryActionLabel(index)"></span>
|
||||
<svg x-show="index !== slides.length - 1"
|
||||
style="width: 1rem; height: 1rem;"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@once
|
||||
<script>
|
||||
function paymenterOnboarding(config) {
|
||||
return {
|
||||
open: config.open,
|
||||
currentSlide: config.currentSlide,
|
||||
slides: config.slides ?? [],
|
||||
showBackdrop: config.showBackdrop ?? false,
|
||||
componentId: config.componentId,
|
||||
init() {
|
||||
this.$watch('open', value => {
|
||||
document.documentElement.style.overflow = value ? 'hidden' : '';
|
||||
});
|
||||
|
||||
if (this.open) {
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
}
|
||||
},
|
||||
primaryActionLabel(index) {
|
||||
const isLast = index === this.slides.length - 1;
|
||||
if (isLast) {
|
||||
return 'Finish';
|
||||
}
|
||||
return (this.slides[index]?.is_guided ?? false) ? 'Continue' : 'Next';
|
||||
},
|
||||
previous() {
|
||||
if (this.currentSlide <= 0) {
|
||||
return;
|
||||
}
|
||||
this.currentSlide--;
|
||||
this.callLivewire('previousSlide');
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlide >= this.slides.length - 1) {
|
||||
this.finish();
|
||||
return;
|
||||
}
|
||||
this.currentSlide++;
|
||||
this.callLivewire('nextSlide');
|
||||
},
|
||||
finish() {
|
||||
this.callLivewire('finish');
|
||||
},
|
||||
callLivewire(method) {
|
||||
if (!method || !window.Livewire) {
|
||||
return;
|
||||
}
|
||||
const component = window.Livewire.find(this.componentId);
|
||||
if (component) {
|
||||
component.call(method);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endonce
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user