From 73a10d4a0f4579cbf4582c98d3c6ed840415069f Mon Sep 17 00:00:00 2001
From: justin <justin@liquidator.optimal-reality.com>
Date: Sat, 30 May 2026 16:11:49 -0500
Subject: [PATCH] Simplify photo ID upload: clear instructions for truckers

- Yellow instruction box explains 3 methods in plain English
  (phone photo, computer upload, scanner)
- One big orange "Add Photo of Your ID" button
- Webcam + QR code kept in code but simplified UI
- Accepted formats note

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

diff --git a/site/src/components/intake/steps/DOTIntakeStep.astro b/site/src/components/intake/steps/DOTIntakeStep.astro
index 9e3a87c..d4aba98 100644
--- a/site/src/components/intake/steps/DOTIntakeStep.astro
+++ b/site/src/components/intake/steps/DOTIntakeStep.astro
@@ -207,9 +207,15 @@
     <!-- ═══ SECTION: Photo ID (MCS-150, MC Auth) ═══ -->
     <div id="dot-sec-photo-id" hidden>
       <h3>Government-Issued Photo ID</h3>
-      <p class="pw-field-help">Required for FMCSA filings. Driver's license, passport, or state ID.</p>
+      <p class="pw-field-help">FMCSA requires a copy of your government-issued photo ID (driver's license, passport, or state ID) to verify the signer's identity.</p>
+      <div style="background:#fefce8;border:1px solid #fbbf24;border-radius:8px;padding:12px 14px;margin-bottom:12px;font-size:13px;color:#854d0e;line-height:1.6">
+        <strong>How to add your ID:</strong><br>
+        &#8226; <strong>On your phone?</strong> Tap the button below and take a picture of the front of your ID<br>
+        &#8226; <strong>On a computer?</strong> Take a photo of your ID with your phone, email or text it to yourself, save it, then click the button below to upload it<br>
+        &#8226; <strong>Have a scanner?</strong> Scan your ID, save the file, then click the button below to upload it
+      </div>
       <div class="pw-upload-area">
-        <input type="file" id="dot-photo-id" accept="image/*,.pdf" capture="environment" style="display:none" />
+        <input type="file" id="dot-photo-id" accept="image/*,.pdf" style="display:none" />
         <!-- Preview + quality check -->
         <div id="dot-id-preview" hidden>
           <div style="text-align:center;margin-bottom:12px">
@@ -233,45 +239,11 @@
           </div>
         </div>
         <div id="dot-id-upload-options">
-          <div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center">
-            <button type="button" id="dot-id-btn" style="display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;color:#374151;font-size:13px;font-weight:500">
-              <svg style="width:20px;height:20px;color:#64748b" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/></svg>
-              Upload File / Scan
-            </button>
-            <button type="button" id="dot-id-cam-btn" style="display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;color:#374151;font-size:13px;font-weight:500">
-              <svg style="width:20px;height:20px;color:#64748b" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg>
-              Use Webcam
-            </button>
-          </div>
-          <p style="font-size:11px;color:#94a3b8;text-align:center;margin:8px 0 0">Scanner users: scan your ID using your scanner software, then click "Upload File / Scan" to select the saved image.</p>
-          <!-- Webcam capture area (hidden until activated) -->
-          <div id="dot-id-webcam" hidden style="margin-top:12px">
-            <div style="position:relative;max-width:400px;margin:0 auto;border-radius:8px;overflow:hidden;border:2px solid #1a2744">
-              <video id="dot-id-video" autoplay playsinline style="width:100%;display:block;background:#000"></video>
-              <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;border:2px dashed rgba(249,115,22,0.6);border-radius:8px;width:85%;height:60%"></div>
-            </div>
-            <p style="font-size:11px;color:#64748b;text-align:center;margin:6px 0">Position your ID within the orange guide</p>
-            <div style="display:flex;gap:8px;justify-content:center;margin-top:8px">
-              <button type="button" id="dot-id-capture" style="padding:10px 32px;background:#f97316;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer">&#128247; Capture</button>
-              <button type="button" id="dot-id-cam-cancel" style="padding:10px 20px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:8px;font-size:13px;cursor:pointer">Cancel</button>
-            </div>
-          </div>
-          <canvas id="dot-id-canvas" style="display:none"></canvas>
-          <div style="text-align:center;margin:12px 0 0">
-            <div style="display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px">
-              <div style="flex:1;height:1px;background:#d1d5db"></div>
-              <span style="font-size:11px;color:#94a3b8;white-space:nowrap">or use your phone</span>
-              <div style="flex:1;height:1px;background:#d1d5db"></div>
-            </div>
-            <button type="button" id="dot-id-qr-btn" style="display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#f8fafc;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:12px;color:#374151">
-              <svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z"/></svg>
-              Scan QR code to upload from phone
-            </button>
-          </div>
-          <div id="dot-id-qr-container" hidden style="text-align:center;margin:16px 0 0;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px">
-            <canvas id="dot-id-qr-canvas" style="margin:0 auto;display:block"></canvas>
-            <p style="font-size:12px;color:#64748b;margin:10px 0 0">Scan this QR code with your phone's camera to open this form on your mobile device and take a photo of your ID.</p>
-          </div>
+          <button type="button" id="dot-id-btn" style="display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;box-shadow:0 2px 8px rgba(249,115,22,0.3)">
+            <svg style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg>
+            Add Photo of Your ID
+          </button>
+          <p style="font-size:11px;color:#94a3b8;text-align:center;margin:8px 0 0">Accepted formats: JPEG, PNG, PDF &middot; Max 15MB</p>
         </div>
       </div>
       <div class="pw-security-notice" style="margin-top:8px">