// Shared ContactForm — used on every form across the site. // // Renders a different field set per form type. Falls back to a mailto: // link so submissions actually do something in this static design build. // When the user wires a real backend (Formspree / own API / etc.), swap // the handleSubmit() body — the rest of the UI doesn't change. // The only email address the site shows/sends to, per direct // instruction. Fallback used only if window.SOLO_BACKEND fails to // load; the real routing is SOLO_BACKEND.inbox in solo-backend.js // (kept in sync above). const FORM_INBOX = "contactus@solosecure.group"; // Per-form field config. Order matters — fields render in this order. // `type`: 'text' | 'email' | 'select' | 'textarea' | 'date' | 'file' | 'yesno' // `req`: true if required. const FORM_CONFIGS = { sales: { title: "Get in touch with sales", subtitle: "Demo requests, quotes, and general enquiries.", defaultSubject: "General enquiry", fields: [ { key: "subject", label: "Subject", type: "text", req: true, placeholder: "What's this about?" }, { key: "name", label: "Full name", type: "text", req: true, placeholder: "Jane Operator" }, { key: "email", label: "Work email", type: "email", req: true, placeholder: "jane@example.com" }, { key: "company", label: "Company", type: "text", req: true, placeholder: "Acme Security Ltd" }, { key: "position", label: "Position / job title", type: "text", req: false, placeholder: "Operations Director" }, { key: "companySize", label: "Company size", type: "select", req: false, options: ["1–10", "11–50", "51–200", "201–500", "500+"] }, { key: "country", label: "Country", type: "text", req: false, placeholder: "United Kingdom" }, { key: "usesTowers", label: "Do you currently use CCTV towers?", type: "yesno", req: false }, { key: "callbackDate", label: "Preferred call-back date (optional)", type: "date", req: false }, { key: "message", label: "Brief — tell us about your requirement", type: "textarea", req: true, placeholder: "Site type, scale, timing, any specific requirements." }, { key: "attachment", label: "Attach a file (RFP, drawings, site plan)", type: "file", req: false }, ], }, reseller: { title: "Reseller intake", subtitle: "Apply to the Solo partner programme, or request portal access.", defaultSubject: "Partner programme enquiry", fields: [ { key: "subject", label: "Subject", type: "text", req: true }, { key: "name", label: "Full name", type: "text", req: true }, { key: "email", label: "Work email", type: "email", req: true }, { key: "company", label: "Organisation", type: "text", req: true }, { key: "position", label: "Position / job title", type: "text", req: false }, { key: "territory", label: "Territory", type: "select", req: true, options: ["United Kingdom", "European Union", "North America", "Other"] }, { key: "companySize", label: "Company size", type: "select", req: false, options: ["1–10", "11–50", "51–200", "201–500", "500+"] }, { key: "existingPartner", label: "Existing Solo partner?", type: "yesno", req: false }, { key: "estUnits", label: "Est. units per year", type: "text", req: false, placeholder: "50 — 500" }, { key: "message", label: "Brief — about your business + portfolio", type: "textarea", req: true }, ], }, careers: { title: "Apply to Solo", subtitle: "Open roles, speculative applications, internships.", defaultSubject: "General careers enquiry", fields: [ { key: "subject", label: "Role / subject", type: "text", req: true, placeholder: "e.g. Senior firmware engineer" }, { key: "name", label: "Full name", type: "text", req: true }, { key: "email", label: "Email", type: "email", req: true }, { key: "position", label: "Current position", type: "text", req: false }, { key: "linkedin", label: "LinkedIn URL (optional)", type: "text", req: false, placeholder: "linkedin.com/in/..." }, { key: "country", label: "Where you're based", type: "text", req: false }, { key: "message", label: "Tell us about yourself", type: "textarea", req: true }, { key: "attachment", label: "Attach your CV (PDF preferred)", type: "file", req: false }, ], }, press: { title: "Press & media enquiries", subtitle: "Interviews, comment, story angles, brand assets.", defaultSubject: "Press enquiry", fields: [ { key: "subject", label: "Subject", type: "text", req: true }, { key: "name", label: "Full name", type: "text", req: true }, { key: "email", label: "Email", type: "email", req: true }, { key: "outlet", label: "Publication / outlet", type: "text", req: true, placeholder: "Construction News / The Register / etc." }, { key: "topic", label: "Topic", type: "select", req: false, options: ["Interview", "Comment / quote", "Story / feature", "Brand assets request", "Other"] }, { key: "deadline", label: "Deadline (if any)", type: "date", req: false }, { key: "message", label: "Brief", type: "textarea", req: true }, ], }, investors: { title: "Investor relations", subtitle: "Confidential enquiries from current and prospective Solo investors.", defaultSubject: "Investor enquiry", fields: [ { key: "subject", label: "Subject", type: "text", req: true }, { key: "name", label: "Full name", type: "text", req: true }, { key: "email", label: "Email", type: "email", req: true }, { key: "investorType", label: "Investor type", type: "select", req: false, options: ["Individual", "VC / institutional", "Family office", "Strategic / corporate", "Other"] }, { key: "capitalRange", label: "Capital range of interest", type: "select", req: false, options: ["Under £100k", "£100k – £500k", "£500k – £2m", "£2m – £10m", "£10m+"] }, { key: "message", label: "Brief", type: "textarea", req: true }, ], }, }; // Build a mailto: link from the form state. URL-encodes properly, // preserves line breaks in the body. function buildMailto(formType, state) { const subject = state.subject || FORM_CONFIGS[formType].defaultSubject; const lines = []; const config = FORM_CONFIGS[formType]; for (const field of config.fields) { if (field.key === "subject" || field.key === "attachment") continue; const v = state[field.key]; if (v == null || v === "") continue; lines.push(`${field.label}: ${v}`); } if (state.marketingOptIn) lines.push("[Marketing opt-in: yes]"); lines.push(""); lines.push("---"); lines.push(`Submitted from solosecure.tech · form: ${formType}`); if (state.attachment) { lines.push(""); lines.push(`(Attachment selected: ${state.attachment} — attach it to this email before sending.)`); } const body = lines.join("\n"); return `mailto:${FORM_INBOX}?subject=${encodeURIComponent("[" + formType.toUpperCase() + "] " + subject)}&body=${encodeURIComponent(body)}`; } /* ──────────── ContactForm ──────────── * Props: * formType — 'sales' | 'reseller' | 'careers' | 'press' | 'investors' * subject — optional pre-fill for the subject field * compact — render without the title/subtitle header */ function ContactForm({ formType = "sales", subject, compact }) { const config = FORM_CONFIGS[formType] || FORM_CONFIGS.sales; const [submitted, setSubmitted] = useState(false); // Real outcome of the last submitForm() call — used instead of blindly // showing "success" every time. null = mailto/fallback path (can't // fail client-side); otherwise the { ok, emailed, message } result. const [submitResult, setSubmitResult] = useState(null); const [submitting, setSubmitting] = useState(false); const [state, setState] = useState(() => ({ subject: subject || config.defaultSubject, })); // If the parent updates the subject prop (e.g. user navigated with new context), sync it. useEffect(() => { if (subject) setState((s) => ({ ...s, subject })); }, [subject]); const setField = (key, value) => setState((s) => ({ ...s, [key]: value })); const handleSubmit = async (e) => { e.preventDefault(); // Delegate to the central SOLO_BACKEND_HELPERS.submitForm — this lets // us swap mailto for Formspree / webhook / JotForm by flipping a // single config flag in solo-backend.js, without touching this file. const helpers = window.SOLO_BACKEND_HELPERS; if (helpers && helpers.submitForm) { const { subject, attachment, marketingOptIn, ...fields } = state; // attachment in mailto mode is just a filename string (real upload // disabled in current config). Surface it in the field list so the // user knows to attach manually. const payload = { formType, subject: subject || FORM_CONFIGS[formType].defaultSubject, fields: { ...fields, marketingOptIn: marketingOptIn ? "Yes" : undefined, attachmentNote: attachment || undefined }, }; setSubmitting(true); const result = await helpers.submitForm(payload); setSubmitting(false); // Reflect the REAL outcome instead of always claiming success — // this is the fix for the bug where every submission used to show // "Message received" even when nothing was actually delivered. setSubmitResult(result); if (result && result.ok) setSubmitted(true); // If result.ok is false, we deliberately do NOT setSubmitted(true) // — the form stays visible with an error notice below (see render) // so the user can retry or fall back to a direct email. } else { // Defensive fallback if solo-backend.js failed to load. const url = buildMailto(formType, state); window.location.href = url; setSubmitResult(null); setSubmitted(true); } }; // Pick the right thank-you message for this form type, sourced from // the central backend config so it's a single place to retune copy. const thankYouMessage = (() => { const cfg = window.SOLO_BACKEND; const msg = cfg?.autoReply?.messages?.[formType]; return msg || "Thanks. We'll be in touch within one working day."; })(); if (submitted) { // Tailor copy to the current backend mode AND the real outcome of // the submission. In mailto mode the user genuinely needs to send // the email draft we just composed. In "worker" mode the submission // was captured server-side (see routes/contact.ts) — `submitResult` // tells us whether the email itself actually went out too, so the // copy doesn't unconditionally claim success like it used to. const mode = window.SOLO_BACKEND?.forms?.mode || "mailto"; const isMailto = mode === "mailto"; const inbox = window.SOLO_BACKEND?.inbox?.[formType] || FORM_INBOX; // In worker mode, "captured but not emailed yet" (e.g. RESEND_API_KEY // not configured) is still a genuine success from the visitor's POV // — their message is safely on file — so we don't show an error, but // we also don't falsely imply an email confirmation went out. const emailPending = !isMailto && submitResult && submitResult.ok && submitResult.emailed === false; const heading = isMailto ? "Your email client should now open." : "Message received."; return (
{isMailto ? "Message ready" : "Thanks"}

{heading}

{isMailto ? <>Hit send on the draft addressed to {inbox} and {thankYouMessage.toLowerCase()} : thankYouMessage}

{isMailto && (

Didn't see anything happen? Email us directly at {inbox}.

)} {emailPending && (

{submitResult.message || `Your details are saved. If you need an immediate reply, email us directly at ${inbox}.`}

)}
); } return (
{!compact && ( <> {config.subtitle}

{config.title}

)} {/* Real error notice — only shown when submitForm() actually reported failure (e.g. the Worker route returned an error). Previously this state was unreachable because the form always jumped straight to the success screen regardless of outcome. */} {submitResult && submitResult.ok === false && (
Something went wrong sending your message ({submitResult.message || "unknown error"}). Please try again, or email us directly at{" "} {window.SOLO_BACKEND?.inbox?.[formType] || FORM_INBOX} .
)} {config.fields.map((f) => ( setField(f.key, v)} /> ))} setField("marketingOptIn", v)} /> {/* GDPR notice */}

Solo Secure Technologies will process your information in line with our privacy policy. We respond within one working day and we will not share your details with third parties.

{/* reCAPTCHA v3 — invisible / score-based. v3 doesn't render a checkbox. Google requires either the small badge (loaded automatically by the enterprise script) OR an inline attribution line. We hide the floating badge site-wide via CSS in index.html and use this inline attribution so the Google terms are still satisfied. */} {window.SOLO_BACKEND?.recaptcha?.enabled ? (

This form is protected by reCAPTCHA and the Google{" "} Privacy Policy{" "}and{" "} Terms of Service apply.

) : null} ); } /* ──────────── FormFooterNote ──────────── * Honest copy that matches the current backend mode. mailto mode says * "opens your email client"; real-backend modes say "sent securely". */ function FormFooterNote({ formType }) { const cfg = window.SOLO_BACKEND; const mode = cfg?.forms?.mode || "mailto"; const inbox = cfg?.inbox?.[formType] || FORM_INBOX; const note = (() => { if (mode === "mailto") return `// Opens your email client addressed to ${inbox}`; if (mode === "formspree") return "// Sent securely via Formspree"; if (mode === "webhook") return "// Sent securely to Solo"; if (mode === "jotform") return "// Powered by JotForm"; return ""; })(); return (

{note}

); } /* ──────────── Field renderer ──────────── */ function Field({ field, value, onChange }) { const baseStyle = { width: "100%", boxSizing: "border-box", background: "var(--bg)", border: "1px solid var(--line)", color: "var(--fg)", fontFamily: "var(--font-body)", fontSize: 15, padding: "12px 14px", outline: "none", }; return (