From 340a364d8ca59c964369be4d45592f32629e41ad Mon Sep 17 00:00:00 2001
From: justin <justin@liquidator.optimal-reality.com>
Date: Sat, 30 May 2026 20:57:30 -0500
Subject: [PATCH] add insurance + state compliance upsells to success page for
 trucking orders

- Insurance lead capture: pre-filled name/email from order, submits to /api/v1/insurance-leads
- State compliance CTA: shown for new carrier orders, links to DOT compliance page
- Only shown for trucking/DOT order slugs
---
 site/public/order/success/index.html | 99 +++++++++++++++++++++++++++-
 1 file changed, 98 insertions(+), 1 deletion(-)

diff --git a/site/public/order/success/index.html b/site/public/order/success/index.html
index cca7521..c256b63 100644
--- a/site/public/order/success/index.html
+++ b/site/public/order/success/index.html
@@ -60,7 +60,34 @@ Please wait while we confirm your payment.
 </p> </div> </section>  <section class="bg-gray-50 min-h-[60vh] py-16"> <div class="max-w-2xl mx-auto px-4"> <!-- Loading state --> <div id="state-loading" class="text-center"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-pw-100 mb-6"> <svg class="animate-spin w-8 h-8 text-pw-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path> </svg> </div> <p class="text-lg font-medium text-gray-700">Confirming your payment&hellip;</p> <p class="text-sm text-gray-500 mt-2">This usually takes just a moment.</p> </div> <!-- Success state --> <div id="state-success" class="hidden"> <!-- Confirmed --> <div class="bg-white border border-green-200 rounded-2xl shadow-sm p-8 text-center mb-6"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-5"> <svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path> </svg> </div> <h2 class="text-2xl font-bold text-gray-900 mb-2">Payment Confirmed</h2> <p class="text-gray-600 mb-4">Thank you — your order has been received and is now being processed.</p> <div id="order-id-display" class="inline-block bg-gray-100 rounded-lg px-4 py-2 text-sm font-mono text-gray-700 mb-2"></div> </div> <!-- Email updates notice --> <div class="bg-blue-50 border border-blue-200 rounded-2xl shadow-sm p-6 mb-6 flex gap-4 items-start"> <svg class="w-6 h-6 text-blue-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path> </svg> <div> <p class="text-sm font-semibold text-blue-900 mb-1">You will receive email updates throughout your order</p> <p class="text-sm text-blue-800" id="email-updates-text">A confirmation has been sent to <strong id="success-email" class="font-semibold"></strong>. We will email you as each step is completed.</p> </div> </div> <!-- Portal password setup --> <div class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 mb-6"> <div class="flex items-start gap-3 mb-4"> <svg class="w-6 h-6 text-pw-700 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"></path> </svg> <div> <p class="text-sm font-semibold text-gray-900 mb-0.5">Set up your client portal access</p> <p class="text-sm text-gray-600">Track your order, download documents, and manage your services at any time. Set a password to activate your portal account.</p> </div> </div> <!-- Already set state --> <div id="portal-already-set" class="hidden"> <div class="rounded-lg bg-green-50 border border-green-200 p-3 flex items-center gap-2 text-sm text-green-800"> <svg class="w-4 h-4 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
 Portal account activated. <a id="portal-login-link" href="https://portal.performancewest.net" class="underline font-medium hover:text-green-900 ml-1">Log in to your portal →</a> </div> </div> <!-- Password form --> <div id="portal-password-form"> <div class="space-y-3"> <div> <label for="portal-password" class="block text-xs font-medium text-gray-700 mb-1">Password <span class="text-red-500">*</span></label> <input type="password" id="portal-password" autocomplete="new-password" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="At least 8 characters" minlength="8"> </div> <div> <label for="portal-password-confirm" class="block text-xs font-medium text-gray-700 mb-1">Confirm password <span class="text-red-500">*</span></label> <input type="password" id="portal-password-confirm" autocomplete="new-password" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Repeat password" minlength="8"> </div> <div id="portal-password-error" class="hidden text-xs text-red-600 font-medium"></div> <button type="button" id="btn-set-portal-password" class="w-full inline-flex items-center justify-center gap-2 bg-pw-700 hover:bg-pw-800 text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"></path></svg>
 Activate Portal Account
-</button> <p class="text-xs text-gray-400 text-center">You can also set a password later from your email confirmation link.</p> </div> </div> </div> <!-- Next steps: canada_crtc --> <div id="next-steps-canada_crtc" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-5">What happens next</h3> <p class="text-sm text-gray-500 uppercase tracking-wide font-semibold mb-4">Estimated timeline: 10–15 business days</p> <ol class="space-y-4"> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">1</span> <div> <p class="font-medium text-gray-900">BC Incorporation Filing</p> <p class="text-sm text-gray-600">We register your British Columbia corporation with BC Registries, including name search and registered office setup.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">2</span> <div> <p class="font-medium text-gray-900">CRTC &amp; BITS Registration</p> <p class="text-sm text-gray-600">We generate your CRTC registration letter for you to eSign. For BITS international authorization, we arrange a brief online notarization session (~5 min video call with a notary) and submit the notarized Form 503 to the CRTC on your behalf.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">3</span> <div> <p class="font-medium text-gray-900">CCTS, Domain &amp; DID Provisioning</p> <p class="text-sm text-gray-600">We register your complaint-handling program with CCTS, provision your Canadian phone number (DID), and set up your .ca domain.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">4</span> <div> <p class="font-medium text-gray-900">Corporate Binder Delivery</p> <p class="text-sm text-gray-600">You receive your complete digital and physical corporate binder with all certificates, resolutions, and registration documents.</p> </div> </li> </ol> </div> <!-- Next steps: formation --> <div id="next-steps-formation" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-5">What happens next</h3> <p class="text-sm text-gray-500 uppercase tracking-wide font-semibold mb-4">Estimated timeline: 3–10 business days</p> <ol class="space-y-4"> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">1</span> <div> <p class="font-medium text-gray-900">Name Availability Check</p> <p class="text-sm text-gray-600">We verify your chosen business name is available with the state and flag any conflicts before filing.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">2</span> <div> <p class="font-medium text-gray-900">State Filing</p> <p class="text-sm text-gray-600">Your formation documents are prepared and submitted to the appropriate state authority on your behalf.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">3</span> <div> <p class="font-medium text-gray-900">Document Delivery</p> <p class="text-sm text-gray-600">Approved formation documents, EIN (if ordered), and operating agreement are delivered to your email.</p> </div> </li> </ol> </div> <!-- Next steps: bundle / compliance / generic --> <div id="next-steps-generic" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-4">What happens next</h3> <p class="text-gray-600">Our team will review your order and begin processing. You will receive a status update by email within one business day.</p> </div> <!-- Footer actions --> <div class="flex flex-col sm:flex-row gap-3"> <a href="https://portal.performancewest.net" class="flex-1 inline-flex items-center justify-center gap-2 border border-pw-300 text-pw-700 hover:bg-pw-50 font-semibold px-6 py-3 rounded-lg transition-colors text-sm"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+</button> <p class="text-xs text-gray-400 text-center">You can also set a password later from your email confirmation link.</p> </div> </div> </div> <!-- Next steps: canada_crtc --> <div id="next-steps-canada_crtc" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-5">What happens next</h3> <p class="text-sm text-gray-500 uppercase tracking-wide font-semibold mb-4">Estimated timeline: 10–15 business days</p> <ol class="space-y-4"> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">1</span> <div> <p class="font-medium text-gray-900">BC Incorporation Filing</p> <p class="text-sm text-gray-600">We register your British Columbia corporation with BC Registries, including name search and registered office setup.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">2</span> <div> <p class="font-medium text-gray-900">CRTC &amp; BITS Registration</p> <p class="text-sm text-gray-600">We generate your CRTC registration letter for you to eSign. For BITS international authorization, we arrange a brief online notarization session (~5 min video call with a notary) and submit the notarized Form 503 to the CRTC on your behalf.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">3</span> <div> <p class="font-medium text-gray-900">CCTS, Domain &amp; DID Provisioning</p> <p class="text-sm text-gray-600">We register your complaint-handling program with CCTS, provision your Canadian phone number (DID), and set up your .ca domain.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">4</span> <div> <p class="font-medium text-gray-900">Corporate Binder Delivery</p> <p class="text-sm text-gray-600">You receive your complete digital and physical corporate binder with all certificates, resolutions, and registration documents.</p> </div> </li> </ol> </div> <!-- Next steps: formation --> <div id="next-steps-formation" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-5">What happens next</h3> <p class="text-sm text-gray-500 uppercase tracking-wide font-semibold mb-4">Estimated timeline: 3–10 business days</p> <ol class="space-y-4"> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">1</span> <div> <p class="font-medium text-gray-900">Name Availability Check</p> <p class="text-sm text-gray-600">We verify your chosen business name is available with the state and flag any conflicts before filing.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">2</span> <div> <p class="font-medium text-gray-900">State Filing</p> <p class="text-sm text-gray-600">Your formation documents are prepared and submitted to the appropriate state authority on your behalf.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">3</span> <div> <p class="font-medium text-gray-900">Document Delivery</p> <p class="text-sm text-gray-600">Approved formation documents, EIN (if ordered), and operating agreement are delivered to your email.</p> </div> </li> </ol> </div> <!-- Next steps: bundle / compliance / generic --> <div id="next-steps-generic" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-4">What happens next</h3> <p class="text-gray-600">Our team will review your order and begin processing. You will receive a status update by email within one business day.</p> </div> <!-- Trucking insurance upsell (shown for DOT/trucking orders) -->
+<div id="upsell-insurance" class="hidden" style="background:linear-gradient(135deg,#eff6ff,#dbeafe);border:2px solid #3b82f6;border-radius:16px;padding:24px;margin-bottom:24px">
+  <div style="display:flex;align-items:flex-start;gap:16px">
+    <div style="background:#2563eb;border-radius:12px;padding:12px;flex-shrink:0">
+      <svg style="width:28px;height:28px;color:#fff" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
+    </div>
+    <div>
+      <h3 style="font-size:18px;font-weight:700;color:#1e3a5f;margin:0 0 4px">You'll need trucking insurance before you can operate</h3>
+      <p style="font-size:14px;color:#1d4ed8;margin:0 0 12px">FMCSA requires proof of insurance before your operating authority goes active. We can connect you with a licensed trucking insurance agent — no obligation, fast quotes.</p>
+      <div id="ins-upsell-form" style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px">
+        <input type="text" id="ins-upsell-name" placeholder="Your name" style="padding:10px 12px;font-size:14px;border:1px solid #93c5fd;border-radius:8px;outline:none">
+        <input type="tel" id="ins-upsell-phone" placeholder="Phone number" style="padding:10px 12px;font-size:14px;border:1px solid #93c5fd;border-radius:8px;outline:none">
+        <input type="email" id="ins-upsell-email" placeholder="Email address" style="padding:10px 12px;font-size:14px;border:1px solid #93c5fd;border-radius:8px;outline:none;grid-column:span 2">
+      </div>
+      <button type="button" id="ins-upsell-btn" style="padding:10px 24px;background:#2563eb;color:#fff;font-weight:600;border-radius:8px;font-size:14px;border:none;cursor:pointer">Get a Free Insurance Quote</button>
+      <p id="ins-upsell-status" style="font-size:12px;margin:6px 0 0;color:#1d4ed8" hidden></p>
+    </div>
+  </div>
+</div>
+
+<!-- State compliance upsell (shown for new carrier orders) -->
+<div id="upsell-state" class="hidden" style="background:#fff7ed;border:2px solid #f97316;border-radius:16px;padding:20px;margin-bottom:24px;text-align:center">
+  <h3 style="font-size:16px;font-weight:700;color:#9a3412;margin:0 0 6px">Don't forget state compliance</h3>
+  <p style="font-size:14px;color:#c2410c;margin:0 0 12px">Most states require IRP registration, IFTA fuel tax filing, and other permits before you can operate interstate.</p>
+  <a id="upsell-state-link" href="/order/dot-compliance" style="display:inline-block;padding:10px 24px;background:#ea580c;color:#fff;font-weight:600;border-radius:8px;text-decoration:none;font-size:14px">Check State Requirements →</a>
+</div>
+
+<!-- Footer actions --> <div class="flex flex-col sm:flex-row gap-3"> <a href="https://portal.performancewest.net" class="flex-1 inline-flex items-center justify-center gap-2 border border-pw-300 text-pw-700 hover:bg-pw-50 font-semibold px-6 py-3 rounded-lg transition-colors text-sm"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
 Go to Client Portal
 </a> <a href="/" class="flex-1 inline-flex items-center justify-center gap-2 bg-pw-700 hover:bg-pw-800 text-white font-semibold px-6 py-3 rounded-lg transition-colors text-sm">
 Return Home
@@ -181,4 +208,74 @@ Send reset link
   el.innerHTML = template;
 })();
 </script>
+<script>
+// Trucking order upsells — show insurance + state compliance for DOT orders
+(function() {
+  var params = new URLSearchParams(window.location.search);
+  var orderId = params.get("order_id") || params.get("session_id") || "";
+  var API = window.__PW_API || "https://api.performancewest.net";
+  var DOT_SLUGS = ["mcs150-update","ucr-registration","boc3-filing","dot-registration","mc-authority","dot-drug-alcohol","dot-audit-prep","dot-full-compliance","irp-registration","ifta-application","usdot-reactivation","emergency-temporary-authority","new-carrier-bundle"];
+  var NEW_CARRIER_SLUGS = ["new-carrier-bundle","dot-registration","mc-authority"];
+
+  // Wait for order data to be available
+  setTimeout(function() {
+    if (!orderId) return;
+    fetch(API + "/api/v1/compliance-orders/" + encodeURIComponent(orderId))
+      .then(function(r) { return r.json(); })
+      .then(function(d) {
+        var orders = d.orders || [d];
+        var slugs = orders.map(function(o) { return o.service_slug; });
+        var isTrucking = slugs.some(function(s) { return DOT_SLUGS.indexOf(s) >= 0; });
+        var isNewCarrier = slugs.some(function(s) { return NEW_CARRIER_SLUGS.indexOf(s) >= 0; });
+
+        if (isTrucking || isNewCarrier) {
+          // Show insurance upsell
+          var insEl = document.getElementById("upsell-insurance");
+          if (insEl) {
+            insEl.classList.remove("hidden");
+            // Pre-fill from order data
+            var email = orders[0].customer_email || "";
+            var name = orders[0].customer_name || "";
+            var nameEl = document.getElementById("ins-upsell-name");
+            var emailEl = document.getElementById("ins-upsell-email");
+            if (nameEl && name) nameEl.value = name;
+            if (emailEl && email) emailEl.value = email;
+          }
+
+          // Show state compliance upsell for new carriers
+          if (isNewCarrier) {
+            var stateEl = document.getElementById("upsell-state");
+            if (stateEl) stateEl.classList.remove("hidden");
+          }
+        }
+      }).catch(function() {});
+  }, 1500);
+
+  // Insurance upsell submit
+  document.addEventListener("click", function(e) {
+    if (e.target && e.target.id === "ins-upsell-btn") {
+      var name = (document.getElementById("ins-upsell-name") || {}).value || "";
+      var phone = (document.getElementById("ins-upsell-phone") || {}).value || "";
+      var email = (document.getElementById("ins-upsell-email") || {}).value || "";
+      if (!email && !phone) { alert("Please enter your email or phone number."); return; }
+      var statusEl = document.getElementById("ins-upsell-status");
+
+      fetch(API + "/api/v1/insurance-leads", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name, email: email, phone: phone,
+          source: "post_order_upsell", order_id: orderId,
+          notes: "Post-order insurance upsell from success page"
+        })
+      }).then(function(r) {
+        if (statusEl) { statusEl.hidden = false; statusEl.textContent = "Thank you! An insurance agent will contact you shortly."; statusEl.style.color = "#059669"; }
+        e.target.disabled = true; e.target.textContent = "Quote Requested";
+      }).catch(function() {
+        if (statusEl) { statusEl.hidden = false; statusEl.textContent = "Please call (888) 411-0383 for a quote."; }
+      });
+    }
+  });
+})();
+</script>
 </body> </html>
\ No newline at end of file