justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix QR code: add inline script right at image element for immediate generation

Browse source 
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>
This commit is contained in:
justin 2026-05-30 17:20:04 -05:00
parent 6b874ea72b
commit 04861ccfe0
1 changed files with 32 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

33
site/src/components/intake/steps/DOTIntakeStep.astro
View file

@ -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">