From 76aba64cf8c4297be42867c54d08ff225d2778c9 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 23:00:40 -0500
Subject: [PATCH] refactor: improve onboarding modal functionality with
 enhanced slide preparation and dynamic action labels for better user
 interaction

---
 .../resources/views/modal.blade.php           | 164 ++++++++++++------
 1 file changed, 113 insertions(+), 51 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 295298a91..09a57e9f6 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -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