From 2e45a5913302a6164ada4148ccaea6a3eede7340 Mon Sep 17 00:00:00 2001
From: justin <justin@liquidator.optimal-reality.com>
Date: Fri, 29 May 2026 00:09:52 -0500
Subject: [PATCH] Fix search buttons visibility + auto-select services on order
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Check Compliance and Search buttons: inline styles (bg-orange-500
  not in Astro CSS)
- CTA "Fix My DOT Filings" now maps red checks to service slugs:
  mcs150 → mcs150-update, insurance → dot-full-compliance,
  bond → boc3-filing, authority → mc-authority
- Order page pre-checks the recommended services via ?services= param

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../tools/dot-compliance-check/index.html     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/site/public/tools/dot-compliance-check/index.html b/site/public/tools/dot-compliance-check/index.html
index c89c149..2bd06c8 100644
--- a/site/public/tools/dot-compliance-check/index.html
+++ b/site/public/tools/dot-compliance-check/index.html
@@ -15,9 +15,9 @@ Sign out
 <a href="/tools" class="hover:text-gray-700">Free Tools</a> /
 <span class="text-gray-900">DOT Compliance Check</span> </nav> <!-- Header --> <h1 class="text-3xl font-bold text-gray-900 mb-3">DOT / FMCSA Compliance Check</h1> <p class="text-lg text-gray-600 mb-4">Look up any motor carrier by USDOT number or name to instantly check MCS-150 status, insurance, operating authority, and safety rating.</p> <!-- Disclaimer --> <div class="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-8"> <p class="text-xs text-gray-500"><strong>Disclaimer:</strong> This tool queries publicly available FMCSA data and is for informational purposes only. Always confirm directly with FMCSA. This is not legal or compliance advice.</p> </div> <!-- Search Box --> <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm mb-8"> <!-- Tabs --> <div class="flex gap-0 mb-5 border-b-2 border-gray-200"> <button type="button" class="dot-tab px-4 py-2 text-sm font-semibold text-orange-600 border-b-2 border-orange-500 -mb-[2px] cursor-pointer" data-tab="dot">Search by DOT #</button> <button type="button" class="dot-tab px-4 py-2 text-sm font-semibold text-gray-500 border-b-2 border-transparent -mb-[2px] cursor-pointer hover:text-gray-700" data-tab="name">Search by Name</button> </div>
 
-<!-- DOT number search --> <div id="tab-dot"> <label for="dot-input" class="block text-sm font-semibold text-gray-900 mb-2">USDOT Number</label> <div class="flex gap-3"> <input type="text" id="dot-input" placeholder="Enter USDOT number (e.g. 1234567)" maxlength="10" class="flex-1 border border-gray-300 rounded-lg px-4 py-3 text-lg font-mono text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400"> <button type="button" id="dot-btn" class="px-6 py-3 bg-orange-500 text-white font-semibold rounded-lg hover:bg-orange-600 transition-colors whitespace-nowrap disabled:bg-gray-400 disabled:cursor-not-allowed">Check Compliance</button> </div> <p class="text-xs text-gray-500 mt-2">Your USDOT number is assigned by the Federal Motor Carrier Safety Administration. Don't know it? Use the name search tab.</p> </div>
+<!-- DOT number search --> <div id="tab-dot"> <label for="dot-input" class="block text-sm font-semibold text-gray-900 mb-2">USDOT Number</label> <div class="flex gap-3"> <input type="text" id="dot-input" placeholder="Enter USDOT number (e.g. 1234567)" maxlength="10" class="flex-1 border border-gray-300 rounded-lg px-4 py-3 text-lg font-mono text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400"> <button type="button" id="dot-btn" style="padding:12px 24px;background:#f97316;color:#fff;font-weight:600;border-radius:8px;border:none;cursor:pointer;white-space:nowrap;font-size:15px">Check Compliance</button> </div> <p class="text-xs text-gray-500 mt-2">Your USDOT number is assigned by the Federal Motor Carrier Safety Administration. Don't know it? Use the name search tab.</p> </div>
 
-<!-- Name search --> <div id="tab-name" class="hidden"> <label for="name-input" class="block text-sm font-semibold text-gray-900 mb-2">Carrier Name</label> <div class="flex gap-3"> <input type="text" id="name-input" placeholder="Enter carrier name (e.g. Werner Enterprises)" class="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400"> <button type="button" id="name-btn" class="px-5 py-2.5 bg-gray-100 text-gray-700 font-semibold rounded-lg hover:bg-gray-200 border border-gray-300 transition-colors whitespace-nowrap text-sm">Search</button> </div> <div id="name-results" class="hidden mt-4 max-h-60 overflow-y-auto space-y-2"></div> </div> </div>
+<!-- Name search --> <div id="tab-name" class="hidden"> <label for="name-input" class="block text-sm font-semibold text-gray-900 mb-2">Carrier Name</label> <div class="flex gap-3"> <input type="text" id="name-input" placeholder="Enter carrier name (e.g. Werner Enterprises)" class="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-orange-400"> <button type="button" id="name-btn" style="padding:10px 20px;background:#f3f4f6;color:#374151;font-weight:600;border-radius:8px;border:1px solid #d1d5db;cursor:pointer;white-space:nowrap;font-size:14px">Search</button> </div> <div id="name-results" class="hidden mt-4 max-h-60 overflow-y-auto space-y-2"></div> </div> </div>
 
 <!-- Loading state --> <div id="pw-results-anchor"></div><div id="loading" class="hidden text-center py-12"> <div class="inline-flex items-center gap-3 text-gray-600"> <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
 Checking DOT compliance status...
@@ -255,10 +255,25 @@ Send reset link
     // CTA
     var redCount = (s.red || 0);
     if (redCount > 0) {
+      // Map red checks to recommended service slugs
+      var recommendedServices = [];
+      (data.checks || []).forEach(function(c) {
+        if (c.status !== "red") return;
+        if (c.id === "mcs150") recommendedServices.push("mcs150-update");
+        if (c.id === "insurance_bipd" || c.id === "insurance_cargo") recommendedServices.push("dot-full-compliance");
+        if (c.id === "insurance_bond") recommendedServices.push("boc3-filing");
+        if (c.id === "authority") recommendedServices.push("mc-authority");
+      });
+      // Always suggest MCS-150 if overdue
+      if ((data.checks || []).some(function(c) { return c.id === "mcs150" && c.status === "red"; }) && recommendedServices.indexOf("mcs150-update") < 0) {
+        recommendedServices.push("mcs150-update");
+      }
+      var svcParam = recommendedServices.length > 0 ? "&services=" + recommendedServices.join(",") : "";
+
       html += '<div style="background:linear-gradient(135deg,#fff7ed,#ffedd5);border:2px solid #f97316;border-radius:12px;padding:24px;text-align:center;margin-top:8px">';
       html += '<h3 style="font-size:18px;font-weight:700;color:#111827;margin-bottom:8px">' + redCount + ' compliance issue' + (redCount > 1 ? 's' : '') + ' found</h3>';
       html += '<p style="font-size:14px;color:#4b5563;margin-bottom:16px">Performance West can help you resolve these issues. We handle the paperwork so you can focus on driving.</p>';
-      html += '<a href="/order/dot-compliance?dot=' + data.dot_number + '" style="display:inline-block;padding:12px 32px;background:#f97316;color:#fff;font-weight:700;border-radius:8px;text-decoration:none;font-size:15px;box-shadow:0 4px 12px rgba(249,115,22,0.3)">Fix My DOT Filings &rarr;</a>';
+      html += '<a href="/order/dot-compliance?dot=' + data.dot_number + svcParam + '" style="display:inline-block;padding:12px 32px;background:#f97316;color:#fff;font-weight:700;border-radius:8px;text-decoration:none;font-size:15px;box-shadow:0 4px 12px rgba(249,115,22,0.3)">Fix My DOT Filings &rarr;</a>';
       html += '<p class="text-xs text-gray-400 mt-3">Or call (888) 411-0383</p>';
       html += '</div>';
     } else {