diff --git a/site/src/components/intake/steps/MCS150Step.astro b/site/src/components/intake/steps/MCS150Step.astro index 8723543..5f5d28b 100644 --- a/site/src/components/intake/steps/MCS150Step.astro +++ b/site/src/components/intake/steps/MCS150Step.astro @@ -5,8 +5,12 @@

MCS-150 Update Information

- Provide your current company information. We will prepare and fax your MCS-150 biennial update to FMCSA on your behalf. + Provide your current company information. We will prepare and submit your MCS-150 biennial update to FMCSA on your behalf.

+
+ + All personal information (driver's license, SSN/EIN, etc.) is transmitted over 256-bit SSL encryption and stored encrypted at rest. We never share your data with third parties — it is used solely to prepare your FMCSA filing. +

Company Information

@@ -25,7 +29,7 @@
-
+
+

Principal Business Address

@@ -198,6 +206,26 @@
+

Government-Issued Photo ID

+

FMCSA requires a copy of the authorized signer's government-issued photo ID (driver's license, passport, or state ID) with MCS-150 submissions.

+
+ + + +
+
+ + Your ID is encrypted in transit and at rest. It is used only for FMCSA identity verification and automatically deleted after your filing is processed. +
+ + @@ -217,6 +245,13 @@ .pw-cargo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; color: #374151; } .pw-cargo-grid label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; background: #fee2e2; padding: 0.5rem 0.75rem; border-radius: 6px; } + .pw-security-notice { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-bottom: 1rem; font-size: 12px; color: #1e40af; line-height: 1.5; } + .pw-field-help { font-size: 0.8rem; color: #64748b; margin: 0 0 0.5rem; } + .pw-upload-area { border: 2px dashed #d1d5db; border-radius: 8px; padding: 1rem; text-align: center; } + .pw-id-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto; padding: 12px 24px; background: none; border: none; cursor: pointer; color: #374151; font-size: 13px; font-weight: 500; } + .pw-id-btn:hover { color: #f97316; } + .pw-id-preview { display: flex; align-items: center; gap: 12px; justify-content: center; } + .pw-id-remove { background: #fee2e2; color: #991b1b; border: none; padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; } @media (max-width: 640px) { .pw-row-2, .pw-row-3 { grid-template-columns: 1fr; } @@ -249,6 +284,7 @@ "mcs-miles": d.annual_miles || "", "mcs-signer-name": d.signer_name || "", "mcs-signer-title": d.signer_title || "", + "mcs-ein": d.ein || "", }; for (const [id, val] of Object.entries(fields)) { const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement; @@ -309,7 +345,41 @@ cargo_types: cargoTypes, signer_name: val("mcs-signer-name"), signer_title: val("mcs-signer-title"), + ein: val("mcs-ein"), + photo_id_uploaded: !!(window as any).__mcs150PhotoId, }; PW.set({ ...state, intake_data: intake }); }); + + // Photo ID upload handling + const idBtn = document.getElementById("mcs-id-btn")!; + const idInput = document.getElementById("mcs-photo-id") as HTMLInputElement; + const idPreview = document.getElementById("mcs-id-preview")!; + const idImg = document.getElementById("mcs-id-img") as HTMLImageElement; + const idRemove = document.getElementById("mcs-id-remove")!; + + idBtn.addEventListener("click", () => idInput.click()); + idInput.addEventListener("change", () => { + const file = idInput.files?.[0]; + if (!file) return; + // Store file reference for upload on submit + (window as any).__mcs150PhotoId = file; + // Show preview + if (file.type.startsWith("image/")) { + const reader = new FileReader(); + reader.onload = (e) => { idImg.src = e.target?.result as string; }; + reader.readAsDataURL(file); + } else { + idImg.src = ""; + idImg.alt = file.name; + } + idPreview.hidden = false; + idBtn.style.display = "none"; + }); + idRemove.addEventListener("click", () => { + (window as any).__mcs150PhotoId = null; + idInput.value = ""; + idPreview.hidden = true; + idBtn.style.display = "flex"; + });