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 additional debug information and improved data handling for better visibility and troubleshooting

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-03 23:48:44 -05:00
parent dfb0892f64
commit a20ef6292e
1 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,14 +7,25 @@
})->values();
@endphp
@if($showModal && count($slides) > 0)
@if($showModal)
<!-- Debug: PHP Data Check -->
<script>
console.log('📦 PHP Data:', {
showModal: @json($showModal),
slidesCount: @json(count($slides)),
currentSlide: @json($currentSlide),
slides: @json($preparedSlides),
showBackdrop: @json($this->showBackdrop ?? false)
});
</script>
<div class="onboarding-modal"
x-data="paymenterOnboarding({
open: @entangle('showModal').live,
currentSlide: @entangle('currentSlide').live,
open: @js($showModal),
currentSlide: @js($currentSlide),
slides: @js($preparedSlides),
componentId: '{{ $this->getId() }}',
showBackdrop: @json($this->showBackdrop)
componentId: @js($this->getId()),
showBackdrop: @js($this->showBackdrop ?? false)
})"
x-init="init()">
<div x-show="open"
@@ -79,12 +90,21 @@
<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">Current Slide: <span class="text-yellow-400" x-text="currentSlide">?</span> (Type: <span x-text="typeof currentSlide">?</span>)</p>
<p class="text-gray-300">Total Slides: <span class="text-yellow-400" x-text="slides?.length">?</span></p>
<p class="text-gray-300">Slides Array: <span class="text-yellow-400" x-text="JSON.stringify(slides)">?</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>
<hr class="border-gray-700 my-2">
<p class="text-gray-400 font-semibold">PHP Data (Server):</p>
<p class="text-gray-300">PHP Slides Count: <span class="text-blue-400">{{ count($slides) }}</span></p>
<p class="text-gray-300">PHP Current Slide: <span class="text-blue-400">{{ $currentSlide }}</span></p>
<p class="text-gray-300">PHP Show Modal: <span class="text-blue-400">{{ $showModal ? 'true' : 'false' }}</span></p>
</div>
<button @click="console.log('Full Alpine Data:', $data)" class="mt-2 px-2 py-1 bg-blue-600 text-white rounded text-xs">
Log Full Data to Console
</button>
</div>
</div>
@@ -131,20 +151,26 @@
@once
<script>
function paymenterOnboarding(config) {
console.log('🎯 Onboarding Modal Initialized', config);
return {
open: config.open,
currentSlide: config.currentSlide,
slides: config.slides ?? [],
showBackdrop: config.showBackdrop ?? false,
componentId: config.componentId,
console.log('🎯 Onboarding Modal Initialized with config:', config);
const data = {
open: config?.open ?? true,
currentSlide: config?.currentSlide ?? 0,
slides: config?.slides ?? [],
showBackdrop: config?.showBackdrop ?? false,
componentId: config?.componentId ?? '',
init() {
console.log('🚀 Alpine.js Init Called');
console.log('📊 Slides:', this.slides);
console.log('📍 Current Slide:', this.currentSlide);
console.log('🔓 Open:', this.open);
console.log('📊 Data after init:', {
slides: this.slides,
currentSlide: this.currentSlide,
open: this.open,
slidesLength: this.slides?.length,
slideData: this.slides[this.currentSlide]
});
this.$watch('open', value => {
console.log('👁️ Open changed to:', value);
document.documentElement.style.overflow = value ? 'hidden' : '';
});