618fafe1d5
Conversion fix for the checkout drop-off (54 sessions reached an /order/ page over 3 days, 0 advanced to payment). Root cause was friction, not a bug: every order page dropped a cold email-click straight into a 28-field intake Wizard before showing any payment option. - New ExpressCheckout.astro: payment-first entry. Shows price + the minimal fields the API needs (prefilled from public records: ?dot= FMCSA census for trucking, ?npi= NPPES lookup for healthcare) + Continue to payment. Creates a single-service batch-of-one (POST /compliance-orders/batch, which does NOT gate Stripe on intake_data_validated) then create-session -> Stripe. Full intake is collected AFTER payment via the per-service 'Complete Your Intake Form' email the webhook already sends (links to /order/<slug>?order=CO-xxx, which re-enters the Wizard in paid-intake mode). - New OrderFlow.astro: single source of truth replacing ~50 near-identical thin Wizard wrappers. Trucking + healthcare default to payment-first (express on top, marketing hero moved BELOW the CTA). Telecom + corporate keep Wizard-first (rich pre-payment FCC/499 intake, no public-records prefill). Paid-intake re-entry (?order=/?token=) always renders the full Wizard. - Rewrote all 50 /order/*.astro pages to use OrderFlow (foreign-qualification keeps its multi-state toggle via slotted content). - Fixed the dead Tawk.to live-chat widget site-wide: the snippet set an invalid crossorigin='*' attribute, forcing the browser into anonymous CORS mode and blocking the script (0 chat requests fired anywhere). Removed it to match Tawk's official snippet (footer partial + 73 static public/*.html files). Verified: build clean; express on top with hero below; ?dot=/?npi= prefill; paid-intake re-entry swaps to Wizard; telecom stays wizard-first; batch-of-one -> live Stripe URL; both POST endpoints allow the prod origin via CORS.
267 lines
31 KiB
HTML
267 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FCC Form 499-Q Quarterly Filing — Performance West Inc.</title>
|
|
<script>
|
|
window.__PW_API = (function() {
|
|
var h = window.location.hostname;
|
|
if (h === "localhost" || h === "127.0.0.1") return "http://" + h + ":3001";
|
|
if (h === "dev.performancewest.net") return "https://api.dev.performancewest.net";
|
|
return "https://api.performancewest.net";
|
|
})();
|
|
</script>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:'Inter',system-ui,sans-serif;color:#1f2937;background:#f9fafb;line-height:1.6}
|
|
.wrap{max-width:640px;margin:0 auto;padding:2rem 1.25rem 4rem}
|
|
h1{font-size:1.5rem;font-weight:700;color:#111827;margin-bottom:.25rem}
|
|
.subtitle{font-size:.88rem;color:#6b7280;margin-bottom:1.5rem}
|
|
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1.25rem;margin-bottom:1rem}
|
|
.card h2{font-size:1rem;font-weight:700;color:#1e3a5f;margin-bottom:.75rem}
|
|
.label{display:block;font-size:.82rem;font-weight:600;color:#374151;margin-bottom:.3rem;margin-top:.75rem}
|
|
input[type=text],input[type=number]{width:100%;padding:.5rem .7rem;border:1px solid #d1d5db;border-radius:8px;font-size:.88rem}
|
|
input:focus{outline:none;border-color:#1e3a5f;box-shadow:0 0 0 2px rgba(30,58,95,.15)}
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.5rem;border-radius:8px;font-weight:600;font-size:.92rem;cursor:pointer;border:none;transition:all .15s;font-family:inherit}
|
|
.btn-primary{background:#1e3a5f;color:#fff}.btn-primary:hover{background:#162e4d}
|
|
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
|
|
.info{padding:.6rem .85rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:.82rem;color:#1e40af;margin-bottom:1rem}
|
|
.revenue-row{display:flex;gap:.5rem;align-items:center;margin-bottom:.4rem}
|
|
.revenue-row label{flex:1;font-size:.84rem;color:#374151}
|
|
.revenue-row input{flex:0 0 140px}
|
|
.err{color:#dc2626;font-size:.82rem;margin-top:.5rem;display:none}
|
|
.success{background:#f0fdf4;border:2px solid #22c55e;border-radius:12px;padding:1.5rem;text-align:center}
|
|
.success h2{color:#166534}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<h1>FCC Form 499-Q — Quarterly Filing</h1>
|
|
<p class="subtitle">Report your projected quarterly USF contributions based on actual telecom revenue for the prior quarter.</p>
|
|
|
|
<div id="loading" class="info">Loading order details...</div>
|
|
|
|
<div id="form-section" class="hidden">
|
|
<div class="card">
|
|
<h2 id="quarter-title">Quarterly Revenue</h2>
|
|
<p class="info" id="period-info"></p>
|
|
|
|
<p style="font-size:.84rem;color:#6b7280;margin-bottom:.75rem">Enter your actual telecom revenue for the reporting period. All amounts in US dollars. Enter 0 for lines that don't apply.</p>
|
|
|
|
<div id="revenue-fields">
|
|
<label class="label">Carrier's Carrier / Wholesale Revenue</label>
|
|
<div class="revenue-row">
|
|
<label>Interstate & International</label>
|
|
<input type="number" id="rev-cc-inter" value="0" min="0" step="0.01">
|
|
</div>
|
|
<div class="revenue-row">
|
|
<label>Intrastate</label>
|
|
<input type="number" id="rev-cc-intra" value="0" min="0" step="0.01">
|
|
</div>
|
|
|
|
<label class="label" style="margin-top:1rem">End-User Revenue</label>
|
|
<div class="revenue-row">
|
|
<label>Interstate & International</label>
|
|
<input type="number" id="rev-eu-inter" value="0" min="0" step="0.01">
|
|
</div>
|
|
<div class="revenue-row">
|
|
<label>Intrastate</label>
|
|
<input type="number" id="rev-eu-intra" value="0" min="0" step="0.01">
|
|
</div>
|
|
|
|
<label class="label" style="margin-top:1rem">Total Revenue (auto-calculated)</label>
|
|
<div style="font-size:1.1rem;font-weight:700;color:#1e3a5f;padding:.5rem 0" id="total-rev">$0.00</div>
|
|
</div>
|
|
|
|
<label style="display:flex;align-items:flex-start;gap:.5rem;padding:.5rem;margin-top:.75rem;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:.78rem;color:#6b7280;line-height:1.5">
|
|
<input type="checkbox" id="zero-confirm" style="margin-top:2px;accent-color:#1e3a5f">
|
|
<span id="zero-label" class="hidden">I confirm that this entity had <strong>$0 telecom revenue</strong> during this quarter.</span>
|
|
<span id="nonzero-label">I certify that the revenue figures above are accurate to the best of my knowledge.</span>
|
|
</label>
|
|
|
|
<div style="margin-top:1rem;text-align:right">
|
|
<button class="btn btn-primary" id="btn-submit" disabled>Submit 499-Q Filing</button>
|
|
</div>
|
|
<p class="err" id="submit-err"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="success-section" class="hidden">
|
|
<div class="success">
|
|
<h2>499-Q Filing Submitted</h2>
|
|
<p style="color:#166534;margin-top:.5rem" id="success-msg"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error-section" class="hidden">
|
|
<div class="card" style="border-color:#fca5a5;background:#fef2f2">
|
|
<h2 style="color:#991b1b">Error</h2>
|
|
<p style="color:#7f1d1d" id="error-msg"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var API = window.__PW_API;
|
|
var params = new URLSearchParams(window.location.search);
|
|
var orderNumber = params.get("order");
|
|
|
|
if (!orderNumber) {
|
|
document.getElementById("loading").classList.add("hidden");
|
|
document.getElementById("error-section").classList.remove("hidden");
|
|
document.getElementById("error-msg").textContent = "No order number provided. Please use the link from your reminder email.";
|
|
return;
|
|
}
|
|
|
|
// Load order details
|
|
fetch(API + "/api/v1/compliance-orders/" + orderNumber)
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
document.getElementById("loading").classList.add("hidden");
|
|
|
|
if (data.error) {
|
|
document.getElementById("error-section").classList.remove("hidden");
|
|
document.getElementById("error-msg").textContent = data.error;
|
|
return;
|
|
}
|
|
|
|
var intake = data.intake_data || {};
|
|
if (intake.intake_completed) {
|
|
document.getElementById("success-section").classList.remove("hidden");
|
|
document.getElementById("success-msg").textContent =
|
|
"This quarterly filing has already been submitted. You'll receive a confirmation email when it's processed.";
|
|
return;
|
|
}
|
|
|
|
var quarter = intake.quarter || "Q?";
|
|
var dueDate = intake.due_date || "TBD";
|
|
var periodEnd = intake.period_end_date || "";
|
|
var entityName = intake.entity_name || data.customer_name || "";
|
|
|
|
document.getElementById("quarter-title").textContent =
|
|
quarter + " Quarterly Revenue — " + entityName;
|
|
document.getElementById("period-info").innerHTML =
|
|
"<strong>Filing:</strong> " + quarter + " (due " + dueDate + ")" +
|
|
(periodEnd ? " · <strong>Period ending:</strong> " + periodEnd : "") +
|
|
(intake.filer_id_499 ? " · <strong>Filer ID:</strong> " + intake.filer_id_499 : "");
|
|
|
|
document.getElementById("form-section").classList.remove("hidden");
|
|
})
|
|
.catch(function() {
|
|
document.getElementById("loading").classList.add("hidden");
|
|
document.getElementById("error-section").classList.remove("hidden");
|
|
document.getElementById("error-msg").textContent = "Could not load order details. Please try again.";
|
|
});
|
|
|
|
// Revenue calculation
|
|
var fields = ["rev-cc-inter", "rev-cc-intra", "rev-eu-inter", "rev-eu-intra"];
|
|
fields.forEach(function(id) {
|
|
document.getElementById(id).addEventListener("input", updateTotal);
|
|
});
|
|
|
|
function getTotal() {
|
|
var total = 0;
|
|
fields.forEach(function(id) { total += parseFloat(document.getElementById(id).value) || 0; });
|
|
return total;
|
|
}
|
|
|
|
function updateTotal() {
|
|
var total = getTotal();
|
|
document.getElementById("total-rev").textContent = "$" + total.toFixed(2);
|
|
// Show zero confirmation if all fields are 0
|
|
var isZero = total === 0;
|
|
document.getElementById("zero-label").classList.toggle("hidden", !isZero);
|
|
document.getElementById("nonzero-label").classList.toggle("hidden", isZero);
|
|
}
|
|
|
|
document.getElementById("zero-confirm").addEventListener("change", function() {
|
|
document.getElementById("btn-submit").disabled = !this.checked;
|
|
});
|
|
|
|
// Submit
|
|
document.getElementById("btn-submit").addEventListener("click", async function() {
|
|
var btn = this;
|
|
var errEl = document.getElementById("submit-err");
|
|
errEl.style.display = "none";
|
|
|
|
if (!document.getElementById("zero-confirm").checked) {
|
|
errEl.textContent = "Please confirm the revenue figures.";
|
|
errEl.style.display = "block";
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = "Submitting...";
|
|
|
|
try {
|
|
var resp = await fetch(API + "/api/v1/compliance-orders/" + orderNumber + "/intake", {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
intake_data: {
|
|
intake_completed: true,
|
|
completed_at: new Date().toISOString(),
|
|
revenue: {
|
|
carriers_carrier_interstate: parseFloat(document.getElementById("rev-cc-inter").value) || 0,
|
|
carriers_carrier_intrastate: parseFloat(document.getElementById("rev-cc-intra").value) || 0,
|
|
end_user_interstate: parseFloat(document.getElementById("rev-eu-inter").value) || 0,
|
|
end_user_intrastate: parseFloat(document.getElementById("rev-eu-intra").value) || 0,
|
|
total: getTotal(),
|
|
},
|
|
},
|
|
}),
|
|
});
|
|
var result = await resp.json();
|
|
if (!resp.ok) throw new Error(result.error || "Submission failed");
|
|
|
|
document.getElementById("form-section").classList.add("hidden");
|
|
document.getElementById("success-section").classList.remove("hidden");
|
|
document.getElementById("success-msg").textContent =
|
|
"Your quarterly revenue data has been submitted. We'll file the 499-Q with USAC and send you a confirmation email.";
|
|
} catch (err) {
|
|
errEl.textContent = err.message || "Something went wrong.";
|
|
errEl.style.display = "block";
|
|
btn.disabled = false;
|
|
btn.textContent = "Submit 499-Q Filing";
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
<!-- Tawk.to Live Chat --><script>var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();(function(){var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];s1.async=true;s1.src="https://embed.tawk.to/69d5a9ca0d1c3f1c37998081/1jll9ufph";s1.charset="UTF-8";s0.parentNode.insertBefore(s1,s0);})();</script>
|
|
<script defer src="/js/pw-cookie-consent.js"></script><!-- Floating help button --><button type="button" id="support-fab" aria-label="Open support" class="fixed bottom-6 left-6 z-[9999] w-14 h-14 rounded-full bg-pw-700 text-white shadow-lg hover:bg-pw-800 transition-all hover:scale-105 flex items-center justify-center"> <svg id="support-fab-icon-open" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <svg id="support-fab-icon-close" class="w-6 h-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Slide-out panel --> <div id="support-panel" class="fixed bottom-24 left-6 z-[9998] w-[380px] max-w-[calc(100vw-2rem)] bg-white rounded-xl shadow-2xl border border-gray-200 transform translate-y-4 opacity-0 pointer-events-none transition-all duration-200 ease-out"> <div class="px-5 py-4 border-b border-gray-100 bg-gray-50 rounded-t-xl"> <h3 class="text-base font-semibold text-gray-900">How can we help?</h3> <p class="text-xs text-gray-500 mt-0.5">Choose a category and tell us what you need.</p> </div> <!-- Category selector (step 1) --> <div id="support-step-categories" class="p-4 space-y-2"> <button type="button" data-category="question" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Ask a Question</span> <span class="block text-xs text-gray-500">About our compliance services or process</span> </div> </div> </button> <button type="button" data-category="support" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center"> <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="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Get Support</span> <span class="block text-xs text-gray-500">Help with an ongoing engagement</span> </div> </div> </button> <button type="button" data-category="issue" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center"> <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Report an Issue</span> <span class="block text-xs text-gray-500">Something isn't right with a deliverable</span> </div> </div> </button> <button type="button" data-category="service_request" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center"> <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Request a Service</span> <span class="block text-xs text-gray-500">Start a new compliance engagement</span> </div> </div> </button> <button type="button" data-category="quote" class="support-cat-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-pw-300 hover:bg-pw-50 transition-colors group"> <div class="flex items-center gap-3"> <span class="flex-shrink-0 w-8 h-8 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center"> <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </span> <div> <span class="text-sm font-medium text-gray-900 group-hover:text-pw-700">Request a Quote</span> <span class="block text-xs text-gray-500">Get pricing for a complex engagement</span> </div> </div> </button> <!-- Sign-in link (hidden when logged in) --> <div id="support-signin-link" class="pt-2 border-t border-gray-100 mt-2"> <button type="button" id="support-signin-btn" class="w-full flex items-center justify-center gap-2 px-4 py-2 text-xs text-gray-500 hover:text-pw-700 transition-colors"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
|
Already a client? <span class="font-medium text-pw-600">Sign in</span> </button> </div> </div> <!-- Ticket form — Report an Issue + guest fallback (step 2a) --> <form id="support-step-form" class="hidden p-4"> <button type="button" id="support-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-3"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
|
|
Back
|
|
</button> <div id="support-category-badge" class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-pw-100 text-pw-700 mb-3"></div> <div class="space-y-3"> <div> <label for="support-name" class="block text-xs font-medium text-gray-700 mb-1">Name <span class="text-gray-400">(optional)</span></label> <input type="text" id="support-name" name="name" placeholder="Your name" maxlength="100" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-email" class="block text-xs font-medium text-gray-700 mb-1">Email <span class="text-gray-400">(for follow-up)</span></label> <input type="email" id="support-email" name="email" placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-subject" class="block text-xs font-medium text-gray-700 mb-1">Subject <span class="text-red-400">*</span></label> <input type="text" id="support-subject" name="subject" required minlength="3" maxlength="200" placeholder="Brief summary" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="support-message" class="block text-xs font-medium text-gray-700 mb-1">Message <span class="text-red-400">*</span></label> <textarea id="support-message" name="message" required minlength="10" maxlength="5000" rows="4" placeholder="Describe your question, issue, or request..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow resize-y"></textarea> <p class="text-[10px] text-gray-400 mt-0.5 text-right"><span id="support-char-count">0</span> / 5000</p> </div> <button type="submit" id="support-submit-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
|
Submit
|
|
</button> </div> </form> <!-- Opportunity form — Request a Service / Request a Quote (step 2b) --> <form id="support-step-opportunity" class="hidden p-4"> <button type="button" id="opportunity-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-3"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
|
|
Back
|
|
</button> <div id="opportunity-category-badge" class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-pw-100 text-pw-700 mb-3"></div> <div class="space-y-3"> <div> <label for="opp-name" class="block text-xs font-medium text-gray-700 mb-1">Name <span class="text-red-400">*</span></label> <input type="text" id="opp-name" name="name" required minlength="2" maxlength="100" placeholder="Your name" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-email" class="block text-xs font-medium text-gray-700 mb-1">Email <span class="text-red-400">*</span></label> <input type="email" id="opp-email" name="email" required placeholder="you@company.com" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-company" class="block text-xs font-medium text-gray-700 mb-1">Company <span class="text-gray-400">(optional)</span></label> <input type="text" id="opp-company" name="company" placeholder="Company name" maxlength="200" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-phone" class="block text-xs font-medium text-gray-700 mb-1">Phone <span class="text-gray-400">(optional)</span></label> <input type="tel" id="opp-phone" name="phone" placeholder="(555) 555-1234" maxlength="30" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow"> </div> <div> <label for="opp-service" class="block text-xs font-medium text-gray-700 mb-1">Service interest <span class="text-red-400">*</span></label> <select id="opp-service" name="service_slug" required class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow bg-white"> <option value="" disabled selected>Select a service...</option> <option value="canada-crtc">Canada CRTC Carrier Package</option> <option value="llc-formation">LLC Formation</option> <option value="corporation-formation">Corporation Formation</option> <option value="registered-agent">Registered Agent</option> <option value="compliance-audit">Compliance Audit</option> <option value="other">Other / Not sure</option> </select> </div> <div> <label for="opp-details" class="block text-xs font-medium text-gray-700 mb-1">Details <span class="text-gray-400">(optional)</span></label> <textarea id="opp-details" name="details" maxlength="5000" rows="3" placeholder="Tell us about your project or what you need..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-pw-500 focus:border-pw-500 outline-none transition-shadow resize-y"></textarea> </div> <button type="submit" id="opp-submit-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
|
Submit Request
|
|
</button> </div> </form> <!-- Sign-in prompt — Ask a Question / Get Support when not logged in (step 2c) --> <div id="support-step-signin" class="hidden p-6"> <button type="button" id="signin-back-btn" class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-4"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg>
|
|
Back
|
|
</button> <div class="text-center"> <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-blue-100 flex items-center justify-center"> <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg> </div> <h4 class="text-sm font-semibold text-gray-900 mb-1">Sign in for support</h4> <p class="text-xs text-gray-500 mb-5">Sign in to access your client portal where you can view your orders, submit support requests, and manage your services.</p> <button type="button" id="signin-auth-btn" class="w-full py-2.5 px-4 bg-pw-700 text-white text-sm font-medium rounded-lg hover:bg-pw-800 transition-colors mb-3">
|
|
Sign In
|
|
</button> <button type="button" id="signin-guest-btn" class="text-xs text-gray-500 hover:text-gray-700 transition-colors">
|
|
Continue as guest →
|
|
</button> </div> </div> <!-- Success state (step 3) --> <div id="support-step-success" class="hidden p-6 text-center"> <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-green-100 flex items-center justify-center"> <svg class="w-6 h-6 text-green-600" 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> </div> <h4 class="text-sm font-semibold text-gray-900 mb-1">Request received</h4> <p id="support-success-message" class="text-xs text-gray-500 mb-4">We'll get back to you within one business day.</p> <p id="support-ticket-id" class="text-xs text-gray-400 mb-4 hidden">Ref: <span></span></p> <button type="button" id="support-new-ticket-btn" class="text-xs text-pw-600 hover:text-pw-700 font-medium">Submit another request</button> </div> </div> <!-- Modal backdrop --><div id="auth-modal-backdrop" class="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm hidden items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="auth-modal-title"> <div id="auth-modal" class="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden"> <!-- Close --> <button id="auth-modal-close" type="button" aria-label="Close" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors z-10"> <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Tab bar --> <div id="auth-tabs" class="flex border-b border-gray-100"> <button type="button" id="auth-tab-login" class="auth-tab flex-1 py-4 text-sm font-semibold text-pw-700 border-b-2 border-pw-600 transition-colors">
|
|
Sign In
|
|
</button> <button type="button" id="auth-tab-register" class="auth-tab flex-1 py-4 text-sm font-semibold text-gray-400 border-b-2 border-transparent hover:text-gray-600 transition-colors">
|
|
Create Account
|
|
</button> </div> <div class="px-6 py-6"> <!-- ── Login form ──────────────────────────────────────────────────── --> <form id="auth-login-form" class="space-y-4" novalidate> <div> <label for="auth-login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-login-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <div> <div class="flex items-center justify-between mb-1"> <label for="auth-login-password" class="text-sm font-medium text-gray-700">Password</label> <button type="button" id="auth-forgot-link" class="text-xs text-pw-600 hover:text-pw-800 underline underline-offset-2">
|
|
Forgot password?
|
|
</button> </div> <input type="password" id="auth-login-password" autocomplete="current-password" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="••••••••"> </div> <p id="auth-login-err" class="hidden text-xs text-red-600 font-medium"></p> <button type="submit" id="auth-login-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
|
|
Sign In
|
|
</button> </form> <!-- ── Register form ──────────────────────────────────────────────── --> <form id="auth-register-form" class="space-y-4 hidden" novalidate> <div> <label for="auth-reg-name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> <input type="text" id="auth-reg-name" autocomplete="name" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Full name"> </div> <div> <label for="auth-reg-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-reg-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <div> <label for="auth-reg-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> <input type="password" id="auth-reg-password" autocomplete="new-password" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="At least 8 characters"> </div> <p id="auth-reg-err" class="hidden text-xs text-red-600 font-medium"></p> <button type="submit" id="auth-reg-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
|
|
Create Account
|
|
</button> </form> <!-- ── Forgot password form ────────────────────────────────────────── --> <div id="auth-forgot-form" class="hidden"> <button type="button" id="auth-back-to-login" class="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 mb-4"> <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path></svg>
|
|
Back to sign in
|
|
</button> <h3 class="text-base font-semibold text-gray-900 mb-1">Reset your password</h3> <p class="text-sm text-gray-500 mb-4">Enter your email and we'll send you a reset link.</p> <form id="auth-forgot-email-form" class="space-y-4" novalidate> <div> <label for="auth-forgot-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" id="auth-forgot-email" autocomplete="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="you@company.com"> </div> <p id="auth-forgot-err" class="hidden text-xs text-red-600 font-medium"></p> <p id="auth-forgot-ok" class="hidden text-xs text-green-700 font-medium"></p> <button type="submit" id="auth-forgot-btn" class="w-full py-2.5 rounded-lg bg-pw-700 text-white text-sm font-semibold hover:bg-pw-800 transition-colors disabled:opacity-50">
|
|
Send reset link
|
|
</button> </form> </div> </div> </div> </div>
|
|
<script type="module" src="/_astro/hoisted.yFz1BYXO.js"></script>
|
|
</body>
|
|
</html>
|