Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: enhance onboarding modal with improved error handling, dynamic content display, and refined debug information for better user guidance

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-03 23:42:50 -05:00
parent 01625506b7
commit 3f85426560
1 changed files with 56 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
extensions/Others/Onboarding/resources/views/modal.blade.php
View File

@@ -45,23 +45,51 @@
<!-- Content Section --> <!-- Content Section -->
<div class="p-6 space-y-3"> <div class="p-6 space-y-3">
<h3 class="text-primary-100 text-xl font-semibold" <!-- Show content when slides exist -->
x-text="slides[currentSlide]?.title">Loading...</h3> <div x-show="slides.length > 0 && slides[currentSlide]">
<p class="text-base/80 text-sm leading-6" <h3 class="text-primary-100 text-xl font-semibold"
x-text="slides[currentSlide]?.description">Please wait...</p> x-text="slides[currentSlide]?.title">Loading...</h3>
<p class="text-base/80 text-sm leading-6"
x-text="slides[currentSlide]?.description">Please wait...</p>
</div>
<!-- Debug Info (remove after testing) --> <!-- Show error message when no slides -->
<div class="mt-4 p-2 bg-gray-800 rounded text-xs" style="display: block;"> <div x-show="slides.length === 0" class="text-center py-8">
<p class="text-gray-400">Debug Info:</p> <div class="flex flex-col items-center gap-4">
<p class="text-gray-300">Current Slide: <span x-text="currentSlide">?</span></p> <svg class="w-16 h-16 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<p class="text-gray-300">Total Slides: <span x-text="slides.length">?</span></p> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
<p class="text-gray-300">Has Data: <span x-text="slides[currentSlide] ? 'Yes' : 'No'">?</span></p> </svg>
<p class="text-gray-300">Title: <span x-text="slides[currentSlide]?.title || 'N/A'">?</span></p> <div>
<h3 class="text-xl font-semibold text-error mb-2">Setup Required</h3>
<p class="text-base/80 text-sm max-w-md">
The onboarding system needs to be configured. Please ensure:
</p>
<ul class="text-left text-sm text-base/70 mt-3 space-y-2 max-w-md mx-auto">
<li>1. Database migrations have been run</li>
<li>2. Onboarding slides have been created in the admin panel</li>
</ul>
<p class="text-xs text-base/60 mt-4">
Run: <code class="bg-gray-800 px-2 py-1 rounded">php artisan migrate</code>
</p>
</div>
</div>
</div>
<!-- Debug Info -->
<div class="mt-4 p-2 bg-gray-800 rounded text-xs border border-gray-700">
<p class="text-gray-400 font-semibold mb-2">🔍 Debug Info:</p>
<div class="space-y-1">
<p class="text-gray-300">Current Slide: <span class="text-yellow-400" x-text="currentSlide ?? 'undefined'">?</span></p>
<p class="text-gray-300">Total Slides: <span class="text-yellow-400" x-text="slides?.length ?? 0">?</span></p>
<p class="text-gray-300">Has Data: <span class="text-yellow-400" x-text="(slides?.length > 0 && slides[currentSlide]) ? 'Yes ✓' : 'No ✗'">?</span></p>
<p class="text-gray-300">Slide Title: <span class="text-yellow-400" x-text="slides[currentSlide]?.title || 'N/A'">?</span></p>
<p class="text-gray-300">Alpine Loaded: <span class="text-green-400">Yes ✓</span></p>
</div>
</div> </div>
</div> </div>
<!-- Progress Dots --> <!-- Progress Dots -->
<div class="flex justify-center gap-2 px-6 pb-4"> <div x-show="slides.length > 0" class="flex justify-center gap-2 px-6 pb-4">
<template x-for="(slide, index) in slides" :key="'dot-' + slide.id"> <template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
<div class="h-1.5 rounded-full transition-all duration-300" <div class="h-1.5 rounded-full transition-all duration-300"
:class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div> :class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
@@ -69,7 +97,7 @@
</div> </div>
<!-- Navigation Buttons --> <!-- Navigation Buttons -->
<div class="flex items-center justify-between px-6 pb-6"> <div x-show="slides.length > 0" class="flex items-center justify-between px-6 pb-6">
<button @click="previous()" <button @click="previous()"
:disabled="currentSlide === 0" :disabled="currentSlide === 0"
class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"> class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
@@ -81,13 +109,21 @@
<button @click="next()" <button @click="next()"
class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md"> class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
<span x-text="currentSlide === slides.length - 1 ? 'Finish' : 'Next'"></span> <span x-text="currentSlide === slides.length - 1 ? 'Finish' : 'Next'">Next</span>
<svg x-show="currentSlide !== slides.length - 1" <svg x-show="currentSlide !== slides.length - 1"
class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> class="w-4 h-4" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg> </svg>
</button> </button>
</div> </div>
<!-- Close button when no slides -->
<div x-show="slides.length === 0" class="flex justify-center px-6 pb-6">
<button @click="finish()"
class="inline-flex items-center gap-2 px-6 py-2 text-sm font-medium text-white bg-error hover:bg-error/90 rounded-md">
Close Setup Message
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -95,6 +131,7 @@
@once @once
<script> <script>
function paymenterOnboarding(config) { function paymenterOnboarding(config) {
console.log('🎯 Onboarding Modal Initialized', config);
return { return {
open: config.open, open: config.open,
currentSlide: config.currentSlide, currentSlide: config.currentSlide,
@@ -102,6 +139,11 @@
showBackdrop: config.showBackdrop ?? false, showBackdrop: config.showBackdrop ?? false,
componentId: config.componentId, componentId: config.componentId,
init() { init() {
console.log('🚀 Alpine.js Init Called');
console.log('📊 Slides:', this.slides);
console.log('📍 Current Slide:', this.currentSlide);
console.log('🔓 Open:', this.open);
this.$watch('open', value => { this.$watch('open', value => {
document.documentElement.style.overflow = value ? 'hidden' : ''; document.documentElement.style.overflow = value ? 'hidden' : '';
}); });