// csr-customer.jsx — customer search, active-customer card, add-customer modal const { useState: useStateCust, useRef: useRefCust, useEffect: useEffCust } = React; /* Big command-style search: by name OR reference number */ function CustomerSearch({ customers, onSelect, onAddNew, autoFocus }) { const [q, setQ] = useStateCust(""); const [open, setOpen] = useStateCust(false); const ref = useRefCust(null); useEffCust(() => { if (autoFocus && ref.current) ref.current.focus(); }, [autoFocus]); const ql = q.trim().toLowerCase(); const results = ql ? customers.filter(c => c.name.toLowerCase().includes(ql) || c.ref.toLowerCase().includes(ql) || c.account.toLowerCase().includes(ql) || (c.phone || "").includes(ql) ).slice(0, 6) : []; return (
{ setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 180)} style={{ width: "100%", padding: "16px 16px 16px 48px", fontSize: 16, fontWeight: 500, color: "var(--fg-strong)", background: "var(--surface)", border: "1.5px solid var(--border-strong)", borderRadius: "var(--r-lg)", outline: "none" }} /> ⏎ to select
{open && (ql ? (
{results.map(c => ( ))} {results.length === 0 && (
No customer matches “{q}”.
)}
) : null)}
); } function AccountStatusPill({ status }) { const m = { active: { t: "Active", tone: "success", dot: "#22b86e" }, "stop-trade": { t: "Stop-trade", tone: "danger", dot: "var(--danger)" }, inactive: { t: "Inactive", tone: "neutral", dot: "var(--fg-faint)" } }[status] || { t: status || "Active", tone: "neutral", dot: "var(--fg-faint)" }; return {m.t}; } /* Account validation gate: blocks stop-trade/inactive accounts, or requires the operator to verify the caller against the account access phrase before quoting (items 24–25). */ function AccountGate({ customer, onVerified }) { const blocked = customer.status === "stop-trade" || customer.status === "inactive"; const [checked, setChecked] = useStateCust(false); if (blocked) { return (
Booking blocked · {customer.status === "stop-trade" ? "Account on stop-trade" : "Account inactive"}
Quoting is disabled for this account.
{customer.stopReason || "This account cannot be quoted at the moment. Refer to your team lead."}
 ); } return (
Verify the caller
{customer.broker ? "Broker account" : "Phone booking"} — confirm the caller with the account access phrase before booking.
Account access phrase
{customer.accessPhrase || "—"}
Ask the caller to confirm this. Don't read it out to them.
Security note: this is an access phrase, not a password. Accounts without a phrase on file skip this step.
 ); } function CustomerCard({ customer, onClear, onAddAddress }) { const [addOpen, setAddOpen] = useStateCust(false); if (!customer) return null; const c = customer; const addresses = c.addresses || []; return (
{c.name.split(/\s+/).map(w => w[0]).slice(0,2).join("")}
{c.name} {c.priority && Priority}
{c.ref} · {c.account}
{/* CE account panel: type, status, broker, access phrase, third-party auth */}
{c.type || "Account"} {c.broker && Broker}
{c.broker && c.brokerName &&
Broker: {c.brokerName}
} {c.accessPhrase && (
Account access phrase
{c.accessPhrase}
Verify caller before booking
)} {c.thirdPartyAuth && c.thirdPartyAuth.length > 0 && (
Authorised to book on this account {c.thirdPartyAuth.map((tp, i) => (
{tp.name} · {tp.account}
))}
)}
{c.notes && (
{c.notes}
)}
Contacts ({c.contacts.length})
{c.contacts.map((p, i) => (
{p.name.split(/\s+/).map(w => w[0]).slice(0,2).join("")}
{p.name} · {p.role}
{p.phone}
))}
{/* Address book history */}
Address book ({addresses.length})
{addresses.map((a, i) => (
{a.label}
{a.unit ? a.unit + ", " : ""}{a.line}, {a.suburb}{a.postcode ? " " + a.postcode : ""}
))} {addresses.length === 0 &&
No saved addresses yet.
}
setAddOpen(false)} onSave={a => { onAddAddress && onAddAddress(c.id, a); setAddOpen(false); }} /> ); } function AddAddressModal({ open, onClose, onSave }) { const blank = { label: "", line: "", unit: "", suburb: "", postcode: "", contact: "", phone: "" }; const [f, setF] = useStateCust(blank); useEffCust(() => { if (open) setF(blank); }, [open]); const set = (k, v) => setF(prev => ({ ...prev, [k]: v })); const valid = f.label && f.line && f.suburb; return (
set("label", v)} placeholder="e.g. Warehouse 2" />
set("unit", v)} placeholder="Unit 4" /> set("line", v)} placeholder="123 George St" />
set("terms", v)} options={["Account · Net 30", "Account · Net 14", "Account · Net 7", "Prepaid · Card", "COD"]} /> set("type", v)} options={["Corporate account", "Government / Health", "Retail account", "Clinical / Research", "Small business"]} />