From 9015039e482faa15620f660b2be95af99df65a6e Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Wed, 17 Jun 2026 23:39:47 +0000
Subject: [PATCH] Fix QR code previews not rendering on event and programme
 pages.

Remove a duplicate preview ref that targeted a hidden card, enable mobile preview for programmes, and harden customizer init timing.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 resources/views/qr-codes/create.blade.php     |  8 +++----
 .../partials/customization-fields.blade.php   |  2 --
 .../partials/qr-customizer-script.blade.php   | 22 ++++++++++++-------
 resources/views/qr-codes/show.blade.php       |  2 ++
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/resources/views/qr-codes/create.blade.php b/resources/views/qr-codes/create.blade.php
index 7214105..a1a277f 100644
--- a/resources/views/qr-codes/create.blade.php
+++ b/resources/views/qr-codes/create.blade.php
@@ -19,6 +19,8 @@
             wizard: @js(! $isProgramme),
          })">
 
+        @include('qr-codes.partials.qr-customizer-script')
+
         @if(session('error'))
             <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
         @endif
@@ -199,10 +201,6 @@
                             </div>
                         </div>
                     </div>
-
-                    <div class="lg:hidden">
-                        @include('qr-codes.partials.qr-preview-card', ['showDownloads' => false])
-                    </div>
                 </div>
 
                 {{-- Desktop navigation --}}
@@ -231,7 +229,7 @@
                         class="rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-semibold text-slate-600">
                     Back
                 </button>
-                <button type="button" x-show="wizard && (step === 2 || step === 3)" @click="showPreviewModal = true"
+                <button type="button" x-show="!wizard || step === 2 || step === 3" @click="showPreviewModal = true"
                         class="flex flex-1 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-slate-50 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100">
                     <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
diff --git a/resources/views/qr-codes/partials/customization-fields.blade.php b/resources/views/qr-codes/partials/customization-fields.blade.php
index 132cb97..4f48baa 100644
--- a/resources/views/qr-codes/partials/customization-fields.blade.php
+++ b/resources/views/qr-codes/partials/customization-fields.blade.php
@@ -7,8 +7,6 @@
     $qrBits = [1,0,1,0,1, 0,1,1,0,0, 1,1,0,1,1, 0,0,1,0,1, 1,0,1,1,0];
 @endphp
 
-@include('qr-codes.partials.qr-customizer-script')
-
 {{-- ── Quick style presets ──────────────────────────────────────────── --}}
 <div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
     <div class="border-b border-slate-100 bg-slate-50/70 px-5 py-3.5">
diff --git a/resources/views/qr-codes/partials/qr-customizer-script.blade.php b/resources/views/qr-codes/partials/qr-customizer-script.blade.php
index d471090..81e23fb 100644
--- a/resources/views/qr-codes/partials/qr-customizer-script.blade.php
+++ b/resources/views/qr-codes/partials/qr-customizer-script.blade.php
@@ -11,6 +11,7 @@
         removeLogo: false,
         previewLoading: false,
         previewTimer: null,
+        _qrLibTimer: null,
         showPreviewModal: false,
         openSection: config.openSection || 'body',
         balance: config.balance ?? null,
@@ -59,8 +60,6 @@
                 this.$watch(field, () => this._reprocessLogo());
             });
 
-            this.schedulePreview();
-
             if (config.existingLogoUrl) {
                 this._loadExistingLogo(config.existingLogoUrl);
             }
@@ -68,6 +67,12 @@
             this.$watch('showPreviewModal', (val) => {
                 if (val) this.schedulePreview();
             });
+
+            if (this.wizard) {
+                this.$watch('step', () => this.$nextTick(() => this.schedulePreview()));
+            }
+
+            this.$nextTick(() => this.schedulePreview());
         },
         toggleSection(id) {
             this.openSection = this.openSection === id ? null : id;
@@ -441,8 +446,13 @@
             } catch (_) { /* silent */ }
         },
         refreshPreview() {
-            if (typeof window.QRCodeStyling === 'undefined') return;
+            if (typeof window.QRCodeStyling === 'undefined') {
+                clearTimeout(this._qrLibTimer);
+                this._qrLibTimer = setTimeout(() => this.refreshPreview(), 100);
+                return;
+            }
 
+            clearTimeout(this._qrLibTimer);
             this.previewLoading = true;
 
             try {
@@ -659,11 +669,7 @@
         }));
     };
 
-    if (window.Alpine) {
-        registerQrCustomizer();
-    } else {
-        document.addEventListener('alpine:init', registerQrCustomizer);
-    }
+    document.addEventListener('alpine:init', registerQrCustomizer);
 })();
 </script>
 @endonce
diff --git a/resources/views/qr-codes/show.blade.php b/resources/views/qr-codes/show.blade.php
index 1b27a1f..b13bae2 100644
--- a/resources/views/qr-codes/show.blade.php
+++ b/resources/views/qr-codes/show.blade.php
@@ -19,6 +19,8 @@
                 style: @js(\App\Support\Qr\QrStyleDefaults::merge($qrStyle)),
              })">
 
+        @include('qr-codes.partials.qr-customizer-script')
+
         @foreach(['success', 'error'] as $flash)
             @if(session($flash))
                 <div class="rounded-xl border px-4 py-3 text-sm {{ $flash === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700' }}">