justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix BDC toggle in Astro page: ask voice first, then broadband

Browse source 
The BDC toggle was in the static HTML file (site/public/tools/)
which is overridden by the Astro page. Fixed the ACTUAL page at
site/src/pages/tools/fcc-compliance-check.astro.

Two-step flow: asks about retail voice first, then broadband.
Results: voice+broadband=red (both filings), voice-only=yellow
(BDC Voice), broadband-only=yellow (BDC Broadband), neither=green.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin 2026-05-02 09:20:27 -05:00
parent d03135e9d0
commit 95749b138c
1 changed files with 48 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

78
site/src/pages/tools/fcc-compliance-check.astro
View file

@ -572,13 +572,13 @@ import Base from "../../layouts/Base.astro";
</div>`;
}
// BDC special
// BDC special — two-step: voice? then broadband?
if (check.id === "bdc_filing" && status === "unknown") {
inner += `<div class="mt-3">
<p class="text-sm font-medium ${c.textColor} mb-2">Does ${eName} provide broadband internet access?</p>
inner += `<div class="mt-3 bdc-questions">
<p class="text-sm font-medium ${c.textColor} mb-2">Does ${eName} offer <u>retail</u> voice service (VoIP, CLEC, or wireline) to end users?</p>
<div class="flex gap-2">
<button class="bdc-yes bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold px-4 py-1.5 rounded-lg transition">Yes</button>
<button class="bdc-no bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-4 py-1.5 rounded-lg transition">No</button>
<button class="bdc-voice-yes bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold px-4 py-1.5 rounded-lg transition">Yes</button>
<button class="bdc-voice-no bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-4 py-1.5 rounded-lg transition">No, or wholesale only</button>
</div>
</div>`;
}
@ -586,42 +586,60 @@ import Base from "../../layouts/Base.astro";
inner += `</div>`;
card.innerHTML = inner;
// BDC button handlers
// BDC button handlers — two-step: voice then broadband
if (check.id === "bdc_filing" && status === "unknown") {
function setBdcStatus(newStatus) {
check.status = newStatus;
const c = colorMap[newStatus];
card.className = `${c.bg} ${c.border} border rounded-xl p-4 flex items-start gap-3`;
if (newStatus === "yellow") {
card.innerHTML = `<div class="${c.iconColor} mt-0.5 flex-shrink-0">${icons.yellow}</div>
<div class="flex-1">
<p class="font-semibold ${c.textColor}">${check.label || check.id}</p>
<p class="text-sm ${c.textColor} mt-1">BDC filing required — you provide broadband service.</p>
<button class="bdc-undo text-xs underline ${c.textColor} mt-1 opacity-75">Change answer</button>
</div>`;
} else if (newStatus === "green") {
card.innerHTML = `<div class="${c.iconColor} mt-0.5 flex-shrink-0">${icons.green}</div>
<div class="flex-1">
<p class="font-semibold ${c.textColor}">${check.label || check.id}</p>
<p class="text-sm ${c.textColor} mt-1">Not applicable — no broadband service.</p>
<button class="bdc-undo text-xs underline ${c.textColor} mt-1 opacity-75">Change answer</button>
</div>`;
let bdcHasVoice = false;
function askBroadband() {
const qDiv = card.querySelector(".bdc-questions");
if (!qDiv) return;
const c2 = colorMap.unknown;
qDiv.innerHTML = `
${bdcHasVoice ? '<span class="text-xs text-green-700 font-medium mr-1 block mb-1">✓ Retail voice</span>' : ''}
<p class="text-sm font-medium ${c2.textColor} mb-2">Does ${eName} provide broadband internet access (resale or facilities-based)?</p>
<div class="flex gap-2">
<button class="bdc-bb-yes bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold px-4 py-1.5 rounded-lg transition">Yes</button>
<button class="bdc-bb-no bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-4 py-1.5 rounded-lg transition">No</button>
</div>`;
qDiv.querySelector(".bdc-bb-yes")?.addEventListener("click", () => finalizeBdc(true));
qDiv.querySelector(".bdc-bb-no")?.addEventListener("click", () => finalizeBdc(false));
}
function finalizeBdc(hasBroadband) {
let newStatus, detail;
if (hasBroadband && bdcHasVoice) {
newStatus = "red"; detail = "Broadband + retail voice: both BDC Broadband and BDC Voice filings required. Filed semi-annually June 1 and December 1.";
} else if (hasBroadband) {
newStatus = "yellow"; detail = "BDC Broadband Deployment filing required. Filed semi-annually June 1 and December 1.";
} else if (bdcHasVoice) {
newStatus = "yellow"; detail = "BDC Voice Subscription filing required (formerly Form 477 Voice). Filed semi-annually June 1 and December 1.";
} else {
newStatus = "green"; detail = "Not applicable — no retail voice or broadband service.";
}
// Undo button re-renders the original card with Yes/No
check.status = newStatus;
const c3 = colorMap[newStatus];
card.className = `${c3.bg} ${c3.border} border rounded-xl p-4 flex items-start gap-3`;
card.innerHTML = `<div class="${c3.iconColor} mt-0.5 flex-shrink-0">${icons[newStatus]}</div>
<div class="flex-1">
<p class="font-semibold ${c3.textColor}">${check.label || check.id}</p>
<p class="text-sm ${c3.textColor} mt-1">${detail}</p>
<button class="bdc-undo text-xs underline ${c3.textColor} mt-1 opacity-75">Change answer</button>
</div>`;
card.querySelector(".bdc-undo")?.addEventListener("click", () => {
check.status = "unknown";
bdcHasVoice = false;
const cu = colorMap.unknown;
card.className = `${cu.bg} ${cu.border} border rounded-xl p-4 flex items-start gap-3`;
card.innerHTML = inner;
// Re-attach Yes/No handlers
card.querySelector(".bdc-yes")?.addEventListener("click", () => setBdcStatus("yellow"));
card.querySelector(".bdc-no")?.addEventListener("click", () => setBdcStatus("green"));
card.querySelector(".bdc-voice-yes")?.addEventListener("click", () => { bdcHasVoice = true; askBroadband(); });
card.querySelector(".bdc-voice-no")?.addEventListener("click", () => { bdcHasVoice = false; askBroadband(); });
renderCta(lastData);
});
renderCta(lastData);
}
card.querySelector(".bdc-yes")?.addEventListener("click", () => setBdcStatus("yellow"));
card.querySelector(".bdc-no")?.addEventListener("click", () => setBdcStatus("green"));
card.querySelector(".bdc-voice-yes")?.addEventListener("click", () => { bdcHasVoice = true; askBroadband(); });
card.querySelector(".bdc-voice-no")?.addEventListener("click", () => { bdcHasVoice = false; askBroadband(); });
}
// RMD button handlers