From 04861ccfe0e90ec0fcd354ec009e3681bc2331cf Mon Sep 17 00:00:00 2001
From: justin <justin@liquidator.optimal-reality.com>
Date: Sat, 30 May 2026 17:20:04 -0500
Subject: [PATCH] Fix QR code: add inline script right at image element for
 immediate generation

Previous approach relied on the main is:inline script block which
could be blocked by FCC step crashes. New approach: tiny self-contained
script right next to the QR img element, runs immediately, fetches
upload token and generates QR. Falls back to page URL on failure.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../intake/steps/DOTIntakeStep.astro          | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/site/src/components/intake/steps/DOTIntakeStep.astro b/site/src/components/intake/steps/DOTIntakeStep.astro
index 114ca3f..b9d054e 100644
--- a/site/src/components/intake/steps/DOTIntakeStep.astro
+++ b/site/src/components/intake/steps/DOTIntakeStep.astro
@@ -251,10 +251,41 @@
               <span style="font-size:12px;color:#64748b;font-weight:500">or use your phone</span>
               <div style="flex:1;height:1px;background:#d1d5db"></div>
             </div>
-            <img id="dot-id-qr-img" style="width:160px;height:160px;margin:0 auto;display:block;border-radius:4px" alt="Scan to upload from phone" />
+            <img id="dot-id-qr-img" style="width:160px;height:160px;margin:0 auto;display:block;border-radius:4px" alt="Loading QR code..." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect fill='%23f1f5f9' width='160' height='160'/%3E%3Ctext x='80' y='85' text-anchor='middle' fill='%2394a3b8' font-size='12'%3ELoading...%3C/text%3E%3C/svg%3E" />
             <p style="font-size:12px;color:#475569;margin:8px 0 0;font-weight:500">Scan with your phone camera to take a photo of your ID</p>
             <p style="font-size:11px;color:#94a3b8;margin:4px 0 0">The form will stay open on your computer while you snap the picture on your phone</p>
           </div>
+          <script is:inline>
+          // Immediate QR code generation — runs right where the element is
+          (function() {
+            var q = document.getElementById("dot-id-qr-img");
+            if (!q) return;
+            var p = new URLSearchParams(window.location.search);
+            var order = p.get("order") || "";
+            var token = p.get("token") || "";
+            var api = window.__PW_API || "https://api.performancewest.net";
+            if (!order) return;
+            // Try to get upload token, fallback to page URL
+            fetch(api + "/api/v1/id-upload/token", {
+              method: "POST",
+              headers: {"Content-Type": "application/json"},
+              body: JSON.stringify({order_number: order}),
+            })
+            .then(function(r) { return r.json(); })
+            .then(function(d) {
+              if (d.upload_url) {
+                q.src = "https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=" + encodeURIComponent(d.upload_url);
+              } else {
+                var fallback = window.location.origin + "/portal/upload-id/?order=" + order + (token ? "&token=" + token : "");
+                q.src = "https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=" + encodeURIComponent(fallback);
+              }
+            })
+            .catch(function() {
+              var fallback = window.location.origin + "/portal/upload-id/?order=" + order + (token ? "&token=" + token : "");
+              q.src = "https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=" + encodeURIComponent(fallback);
+            });
+          })();
+          </script>
         </div>
       </div>
       <div class="pw-security-notice" style="margin-top:8px">