// Live summary panel + final spec card for the Solo spec builder.
//
// The live panel sits in the right rail of the builder page, always visible,
// updating as the user clicks through the wizard. The final spec card is
// what the user lands on at the end — a printable view they can save as PDF.
// The only email address the site shows/sends to, per direct
// instruction. Fallback only; real routing is
// SOLO_BACKEND.inbox.sales / .reseller etc. via submitForm() — the
// Builder's formType "builder" falls back to inbox.sales.
const BUILDER_INBOX = "contactus@solosecure.group";
/* ──────────── Pretty-print helpers ──────────── */
// Map raw config values → human-readable strings for the summary panel.
const labelMaps = {
platform: { pro: "Pro Tower", ultra: "Ultra Tower" },
region: { UK: "United Kingdom", EU: "European Union", US: "North America", GCC: "Middle East / GCC" },
preset: { construction: "Construction", highways: "Highways", "oil-gas": "Oil & Gas", utilities: "Utilities", custom: "Custom" },
brand: { ajax: "Ajax", dahua: "Dahua", other: "Other" },
procurement: {
purchase: "Outright purchase",
"lease-24": "Lease — 24 months",
"lease-36": "Lease — 36 months",
"lease-48": "Lease — 48 months",
managed: "Managed service",
custom: "Custom",
},
led: { red: "Red", blue: "Blue", custom: "Custom", none: "None" },
voltage: { "110v": "110 V", "230v": "230 V" },
};
const fmt = (group, val) => (val != null && labelMaps[group] && labelMaps[group][val]) || val || "—";
const yes = (v) => (v === true ? "Yes" : v === false ? "No" : "—");
/* ──────────── Live summary panel ────────────
* Compact card that lives in the right rail of the wizard. Updates as the
* user clicks through. Shows the current config in a key/value list.
* Empty slots show "—" rather than vanishing so the height is stable.
*/
function BuilderLiveSummary({ config, quoteRef, locked, stepIdx }) {
const c = config || {};
// Trimmed summary — one row per logical area, values condensed.
// Matches the consolidated 5-step flow: one row per step's net result,
// so the right rail reads like a clean recap, not a checklist.
const cameraSummary = c.cameras?.count
? `${c.cameras.count} × ${fmt("brand", c.cameras?.brand)}`
: "—";
const powerSummary = c.power?.batteries != null
? `${c.power.batteries}B / ${c.power?.antennas ?? "—"}A / ${fmt("voltage", c.power?.voltage)}`
: "—";
const commsSummary = c.comms?.router != null || c.comms?.switch != null
? [c.comms?.router && "Router", c.comms?.switch && "Switch"].filter(Boolean).join(" + ") || "None"
: "—";
// LEDs are pre-filled by the application preset on Step 01, but the
// user doesn't actually choose them until Step 03 (Style & kit) — so
// the live panel shouldn't reveal a value until they've reached that
// step, even though config.leds is already populated underneath.
// stepIdx is undefined on the final summary card (BuilderFinalSummary
// is a separate component that always shows the real value there).
const ledsReached = stepIdx == null || stepIdx >= 2;
const ledSummary = ledsReached && (c.leds?.body || c.leds?.topHat)
? `Body ${fmt("led", c.leds?.body)} · Top ${fmt("led", c.leds?.topHat)}`
: "—";
const kitItems = Object.entries(c.kit || {})
.filter(([k, v]) => v && k !== "batteryLooms")
.length;
const kitSummary = kitItems > 0 ? `${kitItems} item${kitItems === 1 ? "" : "s"}` : "—";
const rows = [
["Tower", c.platform ? fmt("platform", c.platform) : "—"],
["Region", fmt("region", c.region)],
["Application", fmt("preset", c.preset)],
["Cameras", cameraSummary],
["Comms", commsSummary],
["Power", powerSummary],
["LEDs", ledSummary],
["Kit", kitSummary],
["Procurement", fmt("procurement", c.procurement)],
];
return (
);
}
/* ──────────── Final summary card ────────────
* Full spec rendered as a printable card. The user lands here on Step 10
* after providing their details on Step 09. Three actions: email to sales,
* print/save as PDF, request callback (set in the contact step).
*/
function BuilderFinalSummary({ config, quoteRef, onSubmit, onPrint, submitted, submitting, submitResult }) {
const c = config || {};
const includedKit = Object.entries(c.kit || {})
.filter(([_, v]) => !!v && !["batteryLooms"].includes(_))
.map(([k]) => ({
wheelsToFeet: "Base wheels to feet",
drillSocket: "19 mm drill socket",
impactGun: "Impact gun",
drillBits: "Drill bit set",
sounder: "Sounder / horn",
}[k]))
.filter(Boolean);
return (
{/* Real outcome, not an unconditional success message.
submitResult.emailed === false means the submission was
captured (see routes/contact.ts) but the confirmation
email itself didn't go out yet — still true progress,
worded honestly. */}
{submitResult && submitResult.ok && submitResult.emailed === false
? `✓ Spec ${quoteRef} saved. ${submitResult.message || "Our team will still see it and be in touch."}`
: `✓ Spec sent to Solo sales. We'll respond within one working day.`}
) : submitResult && submitResult.ok === false ? (
Something went wrong submitting your spec ({submitResult.message || "unknown error"}). Please try again, or email it directly to {BUILDER_INBOX}.
) : (
)}
// Submission is sent securely to {BUILDER_INBOX}
);
}
/* ──────────── Mini bits ──────────── */
function SpecGroup({ title, children }) {
return (
{title}
{children}
);
}
function SpecRow({ l, v }) {
return (
<>
{l}{v}
);
}
// Generate a friendly quote reference like Q-2026-742891.
// Stable for this session — saved to localStorage and reused on refresh.
function generateQuoteRef() {
const existing = localStorage.getItem("solo-builder-quote-ref");
if (existing) return existing;
const year = new Date().getFullYear();
const n = Math.floor(100000 + Math.random() * 900000);
const ref = `Q-${year}-${n}`;
localStorage.setItem("solo-builder-quote-ref", ref);
return ref;
}
function clearQuoteRef() {
localStorage.removeItem("solo-builder-quote-ref");
}
// Build the email-body string for the mailto submission.
function buildSpecEmailBody(config, quoteRef) {
const c = config || {};
const out = [];
out.push(`Solo spec — quote reference: ${quoteRef}`);
out.push("");
out.push("─── Platform & region ───");
out.push(`Platform: ${fmt("platform", c.platform)}`);
out.push(`Region: ${fmt("region", c.region)}`);
out.push(`Preset: ${fmt("preset", c.preset)}`);
out.push(`Procurement: ${fmt("procurement", c.procurement)}`);
out.push("");
out.push("─── Cameras & comms ───");
out.push(`Cameras: ${c.cameras?.count || 0} × ${fmt("brand", c.cameras?.brand)}`);
out.push(`Router: ${yes(c.comms?.router)}`);
out.push(`Switch: ${yes(c.comms?.switch)}`);
out.push("");
out.push("─── Power ───");
out.push(`Batteries: ${c.power?.batteries ?? "—"}`);
out.push(`Antennas: ${c.power?.antennas ?? "—"}`);
out.push(`Voltage: ${fmt("voltage", c.power?.voltage)}`);
out.push("");
out.push("─── Visual identity ───");
out.push(`Body LEDs: ${fmt("led", c.leds?.body)}`);
out.push(`Top hat LEDs: ${fmt("led", c.leds?.topHat)}`);
out.push("");
out.push("─── Deployment kit ───");
out.push(`Wheels to feet: ${yes(c.kit?.wheelsToFeet)}`);
out.push(`Drill socket: ${yes(c.kit?.drillSocket)}`);
out.push(`Impact gun: ${yes(c.kit?.impactGun)}`);
out.push(`Drill bits: ${yes(c.kit?.drillBits)}`);
out.push(`Sounder / horn: ${yes(c.kit?.sounder)}`);
out.push(`Battery looms: ${c.kit?.batteryLooms ?? 0}`);
out.push("");
out.push("─── Requester ───");
out.push(`Name: ${c.contact?.name || "—"}`);
out.push(`Email: ${c.contact?.email || "—"}`);
out.push(`Company: ${c.contact?.company || "—"}`);
out.push(`Website: ${c.contact?.website || "—"}`);
out.push(`Phone: ${c.contact?.phone || "—"}`);
out.push(`Callback: ${yes(c.contact?.requestCallback)}`);
if (c.contact?.brief) {
out.push("");
out.push("─── Brief from requester ───");
out.push(c.contact.brief);
}
out.push("");
out.push("---");
out.push(`Submitted from solosecure.tech · spec builder · ${quoteRef}`);
return out.join("\n");
}
Object.assign(window, {
BuilderLiveSummary, BuilderFinalSummary,
generateQuoteRef, clearQuoteRef, buildSpecEmailBody, BUILDER_INBOX,
});