f8cd37ac8c
Includes: API (Express/TypeScript), Astro site, Python workers, document generators, FCC compliance tools, Canada CRTC formation, Ansible infrastructure, and deployment scripts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
489 lines
23 KiB
HTML
489 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="State PUC/PSC registration for VoIP, broadband, and CLEC providers. $399/state plus state filing fees. Bond procurement coordinated.">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<title>State PUC/PSC Registration — 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="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<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}
|
|
a{color:#1e3a5f;text-decoration:none}
|
|
.wrap{max-width:780px;margin:0 auto;padding:2rem 1.25rem 4rem}
|
|
h1{font-size:1.65rem;font-weight:700;color:#111827;margin-bottom:.25rem}
|
|
.subtitle{font-size:.9rem;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:1.1rem;font-weight:700;color:#1e3a5f;margin-bottom:.75rem}
|
|
.label{display:block;font-size:.82rem;font-weight:600;color:#374151;margin-bottom:.3rem}
|
|
select,input[type=text]{width:100%;padding:.5rem .7rem;border:1px solid #d1d5db;border-radius:8px;font-size:.88rem;background:#fff}
|
|
select:focus,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;gap:.4rem;padding:.65rem 1.5rem;border-radius:8px;font-weight:600;font-size:.92rem;cursor:pointer;border:none;transition:all .15s}
|
|
.btn-primary{background:#1e3a5f;color:#fff}.btn-primary:hover{background:#162e4d}
|
|
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
|
|
.state-grid{display:grid;grid-template-columns:1fr;gap:.5rem;max-height:500px;overflow-y:auto;padding:.5rem 0}
|
|
@media(min-width:640px){.state-grid{grid-template-columns:1fr 1fr}}
|
|
.state-row{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .15s}
|
|
.state-row:hover{border-color:#1e3a5f;background:#f0f4f8}
|
|
.state-row.selected{border-color:#1e3a5f;background:#eff6ff}
|
|
.state-row.exempt{opacity:.55;cursor:default;background:#f9fafb}
|
|
.state-row input[type=checkbox]{accent-color:#1e3a5f;width:16px;height:16px;cursor:pointer}
|
|
.state-name{font-weight:600;font-size:.88rem;flex:1}
|
|
.state-meta{font-size:.75rem;color:#6b7280;text-align:right}
|
|
.state-meta .fee{color:#059669;font-weight:600}
|
|
.state-meta .bond{color:#d97706;font-size:.7rem}
|
|
.state-meta .exempt-tag{color:#9ca3af;font-style:italic}
|
|
.summary-box{position:sticky;bottom:0;background:#fff;border-top:2px solid #1e3a5f;padding:1rem 1.25rem;margin:-1.25rem;margin-top:1rem;border-radius:0 0 12px 12px}
|
|
.summary-row{display:flex;justify-content:space-between;font-size:.88rem;padding:.15rem 0}
|
|
.summary-row.total{font-weight:700;font-size:1.05rem;border-top:1px solid #e5e7eb;padding-top:.5rem;margin-top:.35rem}
|
|
.filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
|
|
.filter-btn{padding:.3rem .7rem;border:1px solid #d1d5db;border-radius:6px;font-size:.78rem;background:#fff;cursor:pointer;font-weight:500}
|
|
.filter-btn.active{background:#1e3a5f;color:#fff;border-color:#1e3a5f}
|
|
.hidden{display:none}
|
|
.info-banner{padding:.6rem .9rem;background:#ecfdf5;border-left:3px solid #059669;border-radius:0 6px 6px 0;font-size:.85rem;color:#065f46;margin-bottom:1.25rem}
|
|
.bond-banner{padding:.5rem .8rem;background:#fffbeb;border-left:3px solid #d97706;border-radius:0 6px 6px 0;font-size:.82rem;color:#92400e;margin-top:.75rem}
|
|
.step-dots{display:flex;gap:.75rem;margin-bottom:1.5rem}
|
|
.step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;background:#e5e7eb;color:#6b7280}
|
|
.step-dot.active{background:#1e3a5f;color:#fff}
|
|
.step-dot.done{background:#22c55e;color:#fff}
|
|
.entity-form input{margin-bottom:.75rem}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<h1>State PUC/PSC Registration</h1>
|
|
<p class="subtitle">Register your VoIP, broadband, or CLEC service with state Public Utility Commissions. $399/state plus state filing fees.</p>
|
|
|
|
<div class="info-banner">
|
|
<strong>Tax deductible</strong> — State PUC registration fees are deductible as ordinary business expenses under IRC § 162.
|
|
</div>
|
|
|
|
<div class="step-dots">
|
|
<div class="step-dot active" id="dot-1">1</div>
|
|
<div class="step-dot" id="dot-2">2</div>
|
|
<div class="step-dot" id="dot-3">3</div>
|
|
</div>
|
|
|
|
<!-- Step 1: Provider Info -->
|
|
<div id="step-1" class="card">
|
|
<h2>Provider Information</h2>
|
|
<div class="entity-form">
|
|
<label class="label">Legal Entity Name</label>
|
|
<input type="text" id="entity-name" placeholder="Acme Telecom LLC">
|
|
|
|
<label class="label">FRN (FCC Registration Number)</label>
|
|
<input type="text" id="frn" placeholder="0012345678">
|
|
|
|
<label class="label">Registration Type</label>
|
|
<select id="reg-type">
|
|
<option value="voip">VoIP / IPES Provider</option>
|
|
<option value="broadband">Broadband / ISP Provider</option>
|
|
<option value="clec">CLEC (Competitive Local Exchange Carrier)</option>
|
|
<option value="bundle">Bundle (VoIP + CLEC)</option>
|
|
</select>
|
|
|
|
<label class="label" style="margin-top:.5rem">Provider Classification</label>
|
|
<select id="provider-type">
|
|
<option value="">-- Select --</option>
|
|
<option value="facilities_based">Facilities-Based (own network infrastructure)</option>
|
|
<option value="reseller">Reseller (resell another carrier's service)</option>
|
|
<option value="over_the_top">Over-the-Top VoIP (internet-based, no PSTN interconnection)</option>
|
|
<option value="hybrid">Hybrid (own some infrastructure, resell some)</option>
|
|
</select>
|
|
<p style="font-size:.75rem;color:#6b7280;margin-top:.25rem">
|
|
Provider type affects bond requirements and registration category in many states. Resellers and OTT VoIP providers often have lower or no bond requirements.
|
|
</p>
|
|
</div>
|
|
<div style="margin-top:1rem;text-align:right">
|
|
<button class="btn btn-primary" id="btn-next-1">Select States →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: State Selection -->
|
|
<div id="step-2" class="card hidden">
|
|
<h2>Select States</h2>
|
|
<p style="font-size:.85rem;color:#6b7280;margin-bottom:.75rem">
|
|
Check the states where you need PUC registration. Exempt states (no registration required) are grayed out.
|
|
</p>
|
|
|
|
<div class="filter-bar">
|
|
<button class="filter-btn active" data-filter="all">All States</button>
|
|
<button class="filter-btn" data-filter="required">Registration Required</button>
|
|
<button class="filter-btn" data-filter="bond">Bond Required</button>
|
|
<button class="filter-btn" data-filter="exempt">Exempt / No Reg</button>
|
|
</div>
|
|
|
|
<div style="margin-bottom:.5rem">
|
|
<label style="font-size:.82rem;cursor:pointer">
|
|
<input type="checkbox" id="select-all-required" style="accent-color:#1e3a5f"> Select all states requiring registration
|
|
</label>
|
|
</div>
|
|
|
|
<div class="state-grid" id="state-grid">
|
|
<div style="text-align:center;padding:2rem;color:#9ca3af;grid-column:1/-1">Loading state data...</div>
|
|
</div>
|
|
|
|
<div id="bond-banner" class="bond-banner hidden">
|
|
<strong>Bond required</strong> in <span id="bond-count">0</span> selected state(s). We coordinate surety bond procurement with our bonding partners. Bond amounts shown are typical ranges — exact amounts depend on your provider size and type.
|
|
</div>
|
|
|
|
<div class="summary-box" id="summary-box" style="display:none">
|
|
<div class="summary-row"><span>Selected states</span><span id="sum-states">0</span></div>
|
|
<div class="summary-row"><span>Service fees ($399/state)</span><span id="sum-service">$0</span></div>
|
|
<div class="summary-row"><span>State filing fees</span><span id="sum-state-fees">$0</span></div>
|
|
<div class="summary-row total"><span>Total</span><span id="sum-total">$0</span></div>
|
|
<div style="font-size:.72rem;color:#9ca3af;margin-top:.35rem">
|
|
Bond amounts not included in total — coordinated separately.
|
|
</div>
|
|
<div style="margin-top:.75rem;display:flex;gap:.5rem;justify-content:flex-end">
|
|
<button class="btn" style="background:#e5e7eb;color:#374151" id="btn-back-2">← Back</button>
|
|
<button class="btn btn-primary" id="btn-next-2" disabled>Review & Pay →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Review & Pay -->
|
|
<div id="step-3" class="card hidden">
|
|
<h2>Review & Checkout</h2>
|
|
<div id="review-content"></div>
|
|
|
|
<div style="margin-top:1.25rem;border-top:1px solid #e5e7eb;padding-top:1rem">
|
|
<h3 style="font-size:.95rem;font-weight:600;margin-bottom:.75rem">Contact Information</h3>
|
|
<label class="label">Full Name</label>
|
|
<input type="text" id="customer-name" placeholder="John Smith" style="margin-bottom:.5rem">
|
|
<label class="label">Email Address</label>
|
|
<input type="text" id="customer-email" placeholder="john@example.com" style="margin-bottom:.5rem">
|
|
<label class="label">Phone (optional)</label>
|
|
<input type="text" id="customer-phone" placeholder="(555) 123-4567" style="margin-bottom:.5rem">
|
|
<label class="label">Discount Code (optional)</label>
|
|
<input type="text" id="promo-code" placeholder="SAVE20" style="margin-bottom:.75rem">
|
|
</div>
|
|
|
|
<div style="margin-top:1rem;display:flex;gap:.5rem;justify-content:flex-end">
|
|
<button class="btn" style="background:#e5e7eb;color:#374151" id="btn-back-3">← Back</button>
|
|
<button class="btn btn-primary" id="btn-pay" disabled>Continue to Payment</button>
|
|
</div>
|
|
<p id="checkout-error" style="color:#dc2626;font-size:.82rem;margin-top:.5rem;display:none"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const API = window.__PW_API;
|
|
let allStates = [];
|
|
let selected = new Set();
|
|
|
|
// Load state data
|
|
fetch(API + '/api/v1/puc/requirements/all')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
allStates = data.states || [];
|
|
renderGrid(allStates);
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('state-grid').innerHTML =
|
|
'<div style="color:#dc2626;padding:1rem;grid-column:1/-1">Failed to load state data. Please refresh.</div>';
|
|
});
|
|
|
|
// Get the relevant fee for a state based on registration type
|
|
function getStateFee(s, regType) {
|
|
if (regType === 'broadband') return s.broadband_fee_cents || 0;
|
|
if (regType === 'clec') return s.clec_fee_cents || 0;
|
|
if (regType === 'bundle') return (s.voip_fee_cents || 0) + (s.clec_fee_cents || 0);
|
|
return s.voip_fee_cents || 0;
|
|
}
|
|
|
|
function getStateBond(s, regType) {
|
|
if (regType === 'clec' || regType === 'bundle') {
|
|
return { required: s.clec_bond_required || s.voip_bond_required, cents: Math.max(s.clec_bond_cents || 0, s.voip_bond_cents || 0) };
|
|
}
|
|
if (regType === 'broadband') return { required: false, cents: 0 };
|
|
return { required: s.voip_bond_required, cents: s.voip_bond_cents || 0 };
|
|
}
|
|
|
|
function renderGrid(states, filter) {
|
|
const grid = document.getElementById('state-grid');
|
|
grid.innerHTML = '';
|
|
|
|
const regType = document.getElementById('reg-type').value;
|
|
|
|
let filtered = states;
|
|
if (filter === 'required') filtered = states.filter(s => isRequired(s, regType));
|
|
else if (filter === 'bond') filtered = states.filter(s => getStateBond(s, regType).required && isRequired(s, regType));
|
|
else if (filter === 'exempt') filtered = states.filter(s => !isRequired(s, regType));
|
|
|
|
filtered.forEach(s => {
|
|
const req = isRequired(s, regType);
|
|
const fee = getStateFee(s, regType);
|
|
const bond = getStateBond(s, regType);
|
|
const row = document.createElement('label');
|
|
row.className = 'state-row' + (req ? '' : ' exempt') + (selected.has(s.state_code) ? ' selected' : '');
|
|
row.innerHTML = `
|
|
<input type="checkbox" value="${s.state_code}" ${req ? '' : 'disabled'} ${selected.has(s.state_code) ? 'checked' : ''}>
|
|
<span class="state-name">${s.state_name} (${s.state_code})</span>
|
|
<span class="state-meta">
|
|
${req ? `<span class="fee">$${(fee / 100).toLocaleString()}</span> fee` : '<span class="exempt-tag">No registration required</span>'}
|
|
${req && bond.required ? '<br><span class="bond">Bond: $' + (bond.cents / 100).toLocaleString() + '</span>' : ''}
|
|
</span>
|
|
`;
|
|
const cb = row.querySelector('input');
|
|
cb.addEventListener('change', () => {
|
|
if (cb.checked) { selected.add(s.state_code); row.classList.add('selected'); }
|
|
else { selected.delete(s.state_code); row.classList.remove('selected'); }
|
|
updateSummary();
|
|
});
|
|
grid.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function isRequired(s, regType) {
|
|
if (regType === 'voip' || regType === 'bundle') return s.voip_required;
|
|
if (regType === 'broadband') return s.broadband_required;
|
|
if (regType === 'clec') return s.clec_required;
|
|
return s.voip_required;
|
|
}
|
|
|
|
function updateSummary() {
|
|
const box = document.getElementById('summary-box');
|
|
const regType = document.getElementById('reg-type').value;
|
|
|
|
if (selected.size === 0) {
|
|
box.style.display = 'none';
|
|
document.getElementById('btn-next-2').disabled = true;
|
|
document.getElementById('bond-banner').classList.add('hidden');
|
|
return;
|
|
}
|
|
box.style.display = 'block';
|
|
document.getElementById('btn-next-2').disabled = false;
|
|
|
|
let serviceFees = 0, stateFees = 0, bondTotal = 0, bondCount = 0;
|
|
selected.forEach(code => {
|
|
const s = allStates.find(st => st.state_code === code);
|
|
if (!s) return;
|
|
serviceFees += 39900;
|
|
stateFees += getStateFee(s, regType);
|
|
const bond = getStateBond(s, regType);
|
|
if (bond.required) { bondTotal += bond.cents; bondCount++; }
|
|
});
|
|
|
|
document.getElementById('sum-states').textContent = selected.size;
|
|
document.getElementById('sum-service').textContent = '$' + (serviceFees / 100).toLocaleString();
|
|
document.getElementById('sum-state-fees').textContent = '$' + (stateFees / 100).toLocaleString();
|
|
document.getElementById('sum-total').textContent = '$' + ((serviceFees + stateFees) / 100).toLocaleString();
|
|
|
|
if (bondCount > 0) {
|
|
document.getElementById('bond-banner').classList.remove('hidden');
|
|
document.getElementById('bond-count').textContent = bondCount;
|
|
} else {
|
|
document.getElementById('bond-banner').classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Filter buttons
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
renderGrid(allStates, btn.dataset.filter);
|
|
});
|
|
});
|
|
|
|
// Select all required
|
|
document.getElementById('select-all-required').addEventListener('change', function() {
|
|
const regType = document.getElementById('reg-type').value;
|
|
if (this.checked) {
|
|
allStates.filter(s => isRequired(s, regType)).forEach(s => selected.add(s.state_code));
|
|
} else {
|
|
selected.clear();
|
|
}
|
|
renderGrid(allStates, document.querySelector('.filter-btn.active')?.dataset?.filter);
|
|
updateSummary();
|
|
});
|
|
|
|
// Re-render when reg type changes
|
|
document.getElementById('reg-type').addEventListener('change', () => {
|
|
selected.clear();
|
|
document.getElementById('select-all-required').checked = false;
|
|
renderGrid(allStates, document.querySelector('.filter-btn.active')?.dataset?.filter);
|
|
updateSummary();
|
|
});
|
|
|
|
// Step navigation
|
|
function showStep(n) {
|
|
[1,2,3].forEach(i => {
|
|
document.getElementById('step-' + i).classList.toggle('hidden', i !== n);
|
|
const dot = document.getElementById('dot-' + i);
|
|
dot.classList.remove('active','done');
|
|
if (i < n) dot.classList.add('done');
|
|
if (i === n) dot.classList.add('active');
|
|
});
|
|
}
|
|
|
|
document.getElementById('btn-next-1').addEventListener('click', () => {
|
|
const name = document.getElementById('entity-name').value.trim();
|
|
if (!name) { alert('Please enter your legal entity name.'); return; }
|
|
showStep(2);
|
|
// Re-render grid in case reg type changed
|
|
renderGrid(allStates);
|
|
updateSummary();
|
|
});
|
|
|
|
document.getElementById('btn-back-2').addEventListener('click', () => showStep(1));
|
|
|
|
document.getElementById('btn-next-2').addEventListener('click', () => {
|
|
showStep(3);
|
|
buildReview();
|
|
});
|
|
|
|
document.getElementById('btn-back-3').addEventListener('click', () => showStep(2));
|
|
|
|
function buildReview() {
|
|
const name = document.getElementById('entity-name').value.trim();
|
|
const frn = document.getElementById('frn').value.trim();
|
|
const regType = document.getElementById('reg-type').value;
|
|
const provType = document.getElementById('provider-type').value;
|
|
|
|
let html = `
|
|
<div style="margin-bottom:1rem">
|
|
<div style="font-size:.85rem;color:#6b7280">Entity</div>
|
|
<div style="font-weight:600">${esc(name)}</div>
|
|
${frn ? '<div style="font-size:.85rem;color:#6b7280">FRN: ' + esc(frn) + '</div>' : ''}
|
|
<div style="font-size:.85rem;color:#6b7280">Type: ${regType.toUpperCase()}${provType ? ' (' + provType.replace(/_/g,' ') + ')' : ''}</div>
|
|
</div>
|
|
<table style="width:100%;border-collapse:collapse;font-size:.85rem">
|
|
<thead><tr style="border-bottom:2px solid #e5e7eb">
|
|
<th style="text-align:left;padding:.4rem .5rem;font-weight:600">State</th>
|
|
<th style="text-align:right;padding:.4rem .5rem;font-weight:600">Filing Fee</th>
|
|
<th style="text-align:right;padding:.4rem .5rem;font-weight:600">Service Fee</th>
|
|
<th style="text-align:right;padding:.4rem .5rem;font-weight:600">Bond</th>
|
|
</tr></thead><tbody>
|
|
`;
|
|
let serviceTot = 0, stateTot = 0, bondTot = 0, bondStates = 0;
|
|
Array.from(selected).sort().forEach(code => {
|
|
const s = allStates.find(st => st.state_code === code);
|
|
if (!s) return;
|
|
const sf = getStateFee(s, regType);
|
|
const bond = getStateBond(s, regType);
|
|
const bondAmt = bond.required ? bond.cents : 0;
|
|
serviceTot += 39900;
|
|
stateTot += sf;
|
|
bondTot += bondAmt;
|
|
if (bond.required) bondStates++;
|
|
html += `<tr style="border-bottom:1px solid #f3f4f6">
|
|
<td style="padding:.35rem .5rem">${s.state_name} (${code})</td>
|
|
<td style="text-align:right;padding:.35rem .5rem">$${(sf/100).toLocaleString()}</td>
|
|
<td style="text-align:right;padding:.35rem .5rem">$399</td>
|
|
<td style="text-align:right;padding:.35rem .5rem;color:${bondAmt?'#d97706':'#9ca3af'}">${bondAmt ? '$'+(bondAmt/100).toLocaleString() : '---'}</td>
|
|
</tr>`;
|
|
});
|
|
html += `</tbody><tfoot>
|
|
<tr style="border-top:2px solid #e5e7eb;font-weight:700">
|
|
<td style="padding:.5rem">Total (${selected.size} states)</td>
|
|
<td style="text-align:right;padding:.5rem">$${(stateTot/100).toLocaleString()}</td>
|
|
<td style="text-align:right;padding:.5rem">$${(serviceTot/100).toLocaleString()}</td>
|
|
<td style="text-align:right;padding:.5rem;color:#d97706">${bondTot ? '$'+(bondTot/100).toLocaleString() : '---'}</td>
|
|
</tr>
|
|
</tfoot></table>
|
|
<div style="margin-top:.75rem;font-size:.92rem;font-weight:700;text-align:right">
|
|
Grand total: $${((serviceTot+stateTot)/100).toLocaleString()}
|
|
</div>
|
|
${bondTot > 0 ? '<div class="bond-banner" style="margin-top:.75rem"><strong>Bond total: $'+(bondTot/100).toLocaleString()+'</strong> across '+bondStates+' state(s). Bond procurement is coordinated separately after checkout.</div>' : ''}
|
|
`;
|
|
document.getElementById('review-content').innerHTML = html;
|
|
document.getElementById('btn-pay').disabled = false;
|
|
}
|
|
|
|
// Checkout — 2-step: create compliance order, then create Stripe session
|
|
document.getElementById('btn-pay').addEventListener('click', async () => {
|
|
const btn = document.getElementById('btn-pay');
|
|
const errEl = document.getElementById('checkout-error');
|
|
errEl.style.display = 'none';
|
|
|
|
const customerName = document.getElementById('customer-name').value.trim();
|
|
const customerEmail = document.getElementById('customer-email').value.trim();
|
|
if (!customerName || !customerEmail) {
|
|
errEl.textContent = 'Please enter your name and email address.';
|
|
errEl.style.display = 'block';
|
|
return;
|
|
}
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(customerEmail)) {
|
|
errEl.textContent = 'Please enter a valid email address.';
|
|
errEl.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = 'Creating order...';
|
|
|
|
// Normalize provider_type: empty string -> null (DB CHECK constraint rejects "")
|
|
const provType = document.getElementById('provider-type').value || null;
|
|
|
|
const orderBody = {
|
|
service_slug: 'state-puc',
|
|
customer_name: customerName,
|
|
customer_email: customerEmail,
|
|
customer_phone: document.getElementById('customer-phone').value.trim() || undefined,
|
|
discount_code: document.getElementById('promo-code').value.trim() || undefined,
|
|
intake_data: {
|
|
entity_legal_name: document.getElementById('entity-name').value.trim(),
|
|
frn: document.getElementById('frn').value.trim(),
|
|
registration_type: document.getElementById('reg-type').value,
|
|
provider_type: provType,
|
|
target_states: Array.from(selected),
|
|
},
|
|
};
|
|
|
|
try {
|
|
// Step 1: Create compliance order
|
|
const orderResp = await fetch(API + '/api/v1/compliance-orders', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(orderBody),
|
|
});
|
|
const orderData = await orderResp.json();
|
|
if (!orderResp.ok) throw new Error(orderData.error || 'Order creation failed');
|
|
|
|
btn.textContent = 'Redirecting to payment...';
|
|
|
|
// Step 2: Create Stripe checkout session
|
|
const sessionResp = await fetch(API + '/api/v1/checkout/create-session', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
order_id: orderData.id,
|
|
order_type: 'compliance',
|
|
payment_method: 'card',
|
|
}),
|
|
});
|
|
const sessionData = await sessionResp.json();
|
|
if (!sessionResp.ok) throw new Error(sessionData.error || 'Checkout failed');
|
|
|
|
if (sessionData.checkout_url) {
|
|
window.location.href = sessionData.checkout_url;
|
|
} else {
|
|
throw new Error('No checkout URL returned');
|
|
}
|
|
} catch (err) {
|
|
errEl.textContent = err.message || 'Something went wrong. Please try again.';
|
|
errEl.style.display = 'block';
|
|
btn.disabled = false;
|
|
btn.textContent = 'Continue to Payment';
|
|
}
|
|
});
|
|
|
|
function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|