/* =================================================================== PERX TOOLS - shared React components + UI icons Exposed on window for the per-tool babel scripts. =================================================================== */ const { useState, useRef, useEffect } = React; const PX = window.PX; const ICON = window.ICON; // product icons (svg strings) const ctaArrow = window.ctaArrow; /* -- inline UI icons ---------------------------------------------- */ const I = { lock: , check: , x: , monitor: , phone: , share: , clock: , shield: , spark: , zero: , }; const CH = { wa: , li: , rd: , cp: , }; /* -- brand wordmark ----------------------------------------------- */ function Wordmark({ sub = 'by Covase' }) { return (
P
Perx{sub}
); } /* -- product icon (from icons.js svg string) ---------------------- */ function Prod({ kind, w, tone = 'light' }) { const map = { charger: 'charger', solar: 'solar', battery: 'battery', ev: 'car' }; const html = ICON[map[kind]] ? ICON[map[kind]]({ w: w || 54, tone }) : ''; return ; } /* -- tool header -------------------------------------------------- */ function ToolHead({ eyebrow, title, sub }) { return (
{eyebrow}

{title}

{sub &&

{sub}

}
); } /* -- segmented control -------------------------------------------- */ function Seg({ value, onChange, options, green }) { return (
{options.map(o => ( ))}
); } /* -- product multi-select chip ------------------------------------ */ const EV_META = { name: 'Electric car', cost: null, sub: 'Salary-sacrifice EV' }; function ProductChip({ kind, on, onToggle }) { const a = PX.ADDON[kind] || EV_META; return ( ); } /* -- trust strip -------------------------------------------------- */ function TrustStrip() { return (
BVRLA #2181
{I.shield}Built by Covase since 2003
Powered by Heva
); } /* -- email gate --------------------------------------------------- Submits the email + a snapshot of the result to the shared /api/submit endpoint (PX.submitLead) before unlocking. The unlock still fires on a network error so a flaky send never traps the user behind the blur — the lead attempt is logged server-side. */ function EmailGate({ children, unlocked, onUnlock, headline, blurb, lead }) { const [email, setEmail] = useState(''); const [busy, setBusy] = useState(false); const [err, setErr] = useState(''); const valid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email); const submit = (e) => { e.preventDefault(); if (!valid || busy) return; setBusy(true); setErr(''); const fields = Object.assign( { _subject: 'Perx Calculator — new lead', email: email }, typeof lead === 'function' ? lead() : (lead || {}) ); PX.submitLead(fields) .then((r) => { if (!r.ok) setErr(''); }) .catch(() => {}) .then(() => { setBusy(false); onUnlock(email); }); }; if (unlocked) return
{children}
; return (
{I.lock}

{headline || 'Unlock your full breakdown'}

{blurb || 'See every line of the figure — tax, NI and BIK relief, for illustration. No signup, just your email.'}

setEmail(e.target.value)} />
{err &&
{err}
}
We'll email your breakdown. No spam — unsubscribe anytime.
); } /* -- share modal -------------------------------------------------- */ function ShareModal({ open, onClose, big, bigEm, sub, refCode }) { const [copied, setCopied] = useState(false); if (!open) return null; const url = 'perx.covase.co.uk/r/' + (refCode || 'AB12CD'); const copy = () => { setCopied(true); setTimeout(() => setCopied(false), 1600); }; return (
e.stopPropagation()}>
My Perx benefit
{big} {bigEm}

{sub}

{url}
A unique link — anyone who opens it sees your figure and can run their own.
); } /* -- phone frame -------------------------------------------------- */ function PhoneFrame({ children }) { return (
9:41
{children}
); } /* -- compliance caveat -------------------------------------------- */ function Caveat({ light }) { return

{PX.CAVEAT}

; } /* expose */ Object.assign(window, { Wordmark, Prod, ToolHead, Seg, ProductChip, TrustStrip, EmailGate, ShareModal, PhoneFrame, Caveat, UIICON: I, CHICON: CH });