{children}

); } // ────────────────────────── field picker ────────────────────────── function TypeBadge({ type, small }) { return ( {TYPE_LABEL[type]} ); } function FieldPicker({ value, onChange }) { const [open, setOpen] = sUseState(false); const [q, setQ] = sUseState(""); const field = S_FIELD_BY_ID[value]; const filtered = sUseMemo(() => { if (!q) return S_FIELDS; const ql = q.toLowerCase(); return S_FIELDS.map(g => ({ ...g, items: g.items.filter(f => f.label.toLowerCase().includes(ql) || f.id.toLowerCase().includes(ql)), })).filter(g => g.items.length > 0); }, [q]); return (

setOpen(false)} width={340}>

setQ(e.target.value)} placeholder="Search fields…" autoFocus style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 12, color: S_INK, fontFamily: "'Inter', sans-serif", }} />

{filtered.map((grp, gi) => (

{grp.group.toUpperCase()}

{grp.items.map(f => ( ))}

))}

); } function pickerButton(open) { return { width: "100%", display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", background: "#fff", border: `1px solid ${open ? S_FUCHSIA + "AA" : S_RULE}`, borderRadius: 8, cursor: "pointer", textAlign: "left", boxShadow: open ? `0 0 0 3px ${S_FUCHSIA}1F` : "none", fontFamily: "'Inter', sans-serif", transition: "all 0.15s ease", minHeight: 38, }; } // ────────────────────────── operator picker ────────────────────────── function OperatorPicker({ field, value, onChange }) { const [open, setOpen] = sUseState(false); const ops = field ? S_OPERATORS[field.type] || [] : []; return (

setOpen(false)} width={220}>

{ops.map(op => ( ))}

); } // ────────────────────────── value input (type-aware) ────────────────────────── function ValueInput({ field, op, value, onChange }) { if (!field || !op) return

; // single-empty operators don't need a value if (op.includes("is empty") || op.includes("is not empty")) { return (

no value required

); } if (op === "is true" || op === "is false") { return (

{op === "is true" ? "TRUE" : "FALSE"}

); } switch (field.type) { case "number": case "currency": return ; case "date": return ; case "enum": return ; case "multi-enum": return ; case "semantic": return ; case "string": default: return ; } } function NumberValueInput({ field, op, value, onChange }) { if (op === "between") { const arr = Array.isArray(value) ? value : [0, 0]; return (

onChange([v, arr[1]])} prefix={field.type === "currency" ? "€" : null} /> and onChange([arr[0], v])} prefix={field.type === "currency" ? "€" : null} />

); } return (

); } function NumInput({ value, onChange, prefix }) { return (

{prefix && {prefix}} onChange(e.target.value === "" ? "" : Number(e.target.value))} style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 12.5, color: S_INK, fontWeight: 600, fontFamily: S_MONO, }} />

); } function DateValueInput({ field, op, value, onChange }) { if (op === "in the last X days" || op === "more than X days ago") { return (

days

); } if (op === "between") { const arr = Array.isArray(value) ? value : ["", ""]; return (

and

); } return (

); } function DatePill({ v }) { return (

{v}

); } function StringValueInput({ field, op, value, onChange }) { return (

onChange(e.target.value)} placeholder="text value…" style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 12.5, color: S_INK, fontWeight: 600, fontFamily: "'Inter', sans-serif", }} />

); } function EnumValueInput({ field, op, value, onChange, multi }) { const [open, setOpen] = sUseState(false); const selected = multi ? (Array.isArray(value) ? value : []) : (value ? [value] : []); const toggle = (opt) => { if (multi) { if (selected.includes(opt)) onChange(selected.filter(s => s !== opt)); else onChange([...selected, opt]); } else { onChange(opt); setOpen(false); } }; return (

setOpen(false)} width={240}>

{(field.options || []).map(opt => ( ))}

); } function SemanticValueInput({ field, op, value, onChange }) { return (

onChange(e.target.value)} placeholder="describe semantically…" style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 12.5, color: S_INK, fontWeight: 600, fontFamily: "'Inter', sans-serif", fontStyle: value ? "italic" : "normal", }} /> VECTOR · 0.86

); } // ────────────────────────── condition row + group ────────────────────────── function ConditionRow({ cond, onChange, onDelete, showAnd }) { const field = S_FIELD_BY_ID[cond.field]; // when field changes, reset op + value to sensible defaults const setField = (newId) => { const newField = S_FIELD_BY_ID[newId]; const ops = S_OPERATORS[newField.type] || []; onChange({ ...cond, field: newId, op: ops[0], value: defaultValueFor(newField, ops[0]) }); }; const setOp = (op) => { onChange({ ...cond, op, value: defaultValueFor(field, op) }); }; const setVal = (v) => onChange({ ...cond, value: v }); return (

{showAnd && (

AND

)}

); } function defaultValueFor(field, op) { if (!field || !op) return ""; if (op.includes("is empty") || op.includes("is not empty")) return null; if (op === "is true" || op === "is false") return null; if (op === "between") return field.type === "date" ? ["", ""] : [0, 0]; if (op === "in the last X days" || op === "more than X days ago") return 30; if (field.type === "multi-enum") return []; if (field.type === "enum") return field.options?.[0] || ""; if (field.type === "number" || field.type === "currency") return 0; if (field.type === "bool") return null; return ""; } function ConditionGroup({ group, idx, onChange, onDelete, deletable }) { const setMatch = (m) => onChange({ ...group, match: m }); const setCond = (cid, nc) => onChange({ ...group, conditions: group.conditions.map(c => c.id === cid ? nc : c) }); const delCond = (cid) => onChange({ ...group, conditions: group.conditions.filter(c => c.id !== cid) }); const addCond = () => { const newC = { id: "c" + Date.now(), field: "lifetime_revenue", op: "greater than", value: 1000 }; onChange({ ...group, conditions: [...group.conditions, newC] }); }; return (

Group {idx + 1}

MATCH

{["ALL", "ANY"].map(m => ( ))}

{deletable && ( )}

{group.conditions.map((c, ci) => ( 0} onChange={(nc) => setCond(c.id, nc)} onDelete={() => delCond(c.id)} /> ))}

); } // ────────────────────────── matching count tile (animated) ────────────────────────── function MatchingTile({ count, total, dynamic }) { const pct = total ? Math.min(100, (count / total) * 100) : 0; return (

MATCHING CONTACTS {dynamic && ( LIVE )}

{count.toLocaleString("en-US")}

/ {total.toLocaleString("en-US")} contacts

{pct.toFixed(2)}% of total · refreshing live

); } // ────────────────────────── condition summary chip used as natural language ────────────────────────── function summariseGroup(group) { const join = group.match === "ALL" ? " AND " : " OR "; return group.conditions.map(c => { const f = S_FIELD_BY_ID[c.field]; if (!f) return "N/A"; let v = c.value; if (Array.isArray(v)) v = v.join(", "); if (typeof v === "number" && f.type === "currency") v = "€" + v.toLocaleString(); return `${f.label} ${c.op}${v != null ? " " + v : ""}`; }).join(join); } // ────────────────────────── preview table ────────────────────────── function PreviewTable({ count }) { const rows = S_SAMPLE; return (

Preview matching contacts {count.toLocaleString("en-US")} showing 12 of {count.toLocaleString("en-US")} · streaming sample

NAMEPHONEEMAILLANG HOTELLIFETIME € BKTIER

{rows.map((r, i) => (

{r.fn} {r.ln} {r.phone} {r.email} {r.lang} {r.hotel} €{r.spend.toLocaleString()} {r.bookings} {r.tier.toUpperCase()}

))}

); } // ────────────────────────── main shell ────────────────────────── // A rough "selectivity score" so editing conditions visibly changes the count. function estimateCount(groups, total = 547329) { // Crude heuristic — each condition has an estimated selectivity 0.05..0.9. // Within a group, ALL = product, ANY = max. Groups combine as AND (product). const selFor = (c) => { const f = S_FIELD_BY_ID[c.field]; if (!f) return 1; const op = c.op || ""; let sel = 0.5; switch (f.type) { case "currency": if (op.includes("greater") || op === "≥") sel = c.value > 5000 ? 0.06 : c.value > 2000 ? 0.18 : 0.42; else if (op.includes("less") || op === "≤") sel = c.value > 5000 ? 0.94 : 0.6; else sel = 0.18; break; case "number": if (op.includes("greater") || op === "≥") sel = c.value > 5 ? 0.18 : c.value > 2 ? 0.35 : 0.55; else if (op.includes("less") || op === "≤") sel = 0.6; else sel = 0.3; break; case "date": if (op === "in the last X days") sel = c.value < 30 ? 0.18 : c.value < 90 ? 0.35 : 0.6; else if (op === "more than X days ago") sel = c.value > 365 ? 0.7 : 0.4; else sel = 0.4; break; case "bool": sel = op === "is true" ? 0.7 : 0.3; break; case "enum": sel = 1 / Math.max(2, (f.options || []).length); break; case "multi-enum": { const n = Array.isArray(c.value) ? c.value.length : 0; const total = (f.options || []).length || 5; sel = Math.min(0.9, (n / total) * (op.includes("all of") ? 0.5 : 1.4)); if (n === 0) sel = 1; break; } case "semantic": sel = c.value && c.value.length > 4 ? 0.22 : 1; break; case "string": sel = c.value ? 0.3 : 1; break; default: sel = 0.5; } if (op.includes("does not") || op.includes("excludes") || op.includes("not")) sel = Math.min(1, 1 - sel + 0.1); return Math.max(0.01, Math.min(1, sel)); }; let groupSel = 1; for (const g of groups) { if (!g.conditions.length) continue; const sels = g.conditions.map(selFor); let s; if (g.match === "ALL") s = sels.reduce((a, b) => a * b, 1); else { // ANY = 1 - product(1 - s) s = 1 - sels.reduce((a, b) => a * (1 - b), 1); } groupSel *= s; } return Math.max(0, Math.round(total * groupSel)); } function SegmentsSection() { const [name, setName] = sUseState("High-value cyclists & spa lovers · WhatsApp reachable"); const [dynamic, setDynamic] = sUseState(true); const [groups, setGroups] = sUseState(DEFAULT_CONDITIONS); const TOTAL = 547329; const matching = sUseMemo(() => estimateCount(groups, TOTAL), [groups]); const updateGroup = (id, ng) => setGroups(gs => gs.map(g => g.id === id ? ng : g)); const deleteGroup = (id) => setGroups(gs => gs.filter(g => g.id !== id)); const addGroup = () => { setGroups(gs => [...gs, { id: "g" + Date.now(), match: "ALL", conditions: [{ id: "c" + Date.now(), field: "total_extras", op: "greater than", value: 250 }], }]); }; return (

{/* section header */}

Built for campaigns, broadcasts and journeys

Cohorts as deep as your data.{" "} From lifetime spend to semantic memory.

Combine identity, calculated booking metrics, folio extras, semantic memory search, reachability and consent in nested AND / OR groups. Operators adapt to each field's data type. Counts refresh live and feed your WhatsApp broadcasts, email campaigns and journeys in one click.

{/* product frame */}

{/* breadcrumb */}

CRM SEGMENTS NEW

{/* title row */}

Create Segment

Define rules to group contacts into targetable cohorts.

{/* scrollable body */}

{/* Segment details */}

NAME * setName(e.target.value)} style={{ width: "100%", padding: "10px 12px", background: S_PAPER, border: `1px solid ${S_RULE}`, borderRadius: 8, fontSize: 13.5, color: S_INK, fontWeight: 600, fontFamily: "'Inter', sans-serif", outline: "none", }} /> Tip: name your segment in the same shape your campaigns will use, e.g. "WhatsApp · Returning VIPs · DE".

Dynamic Segment

Recomputes live as memories, stays and signals change.

{/* conditions header */}

Conditions Build groups for nested AND / OR logic. Operators adapt to each field's data type.

{/* groups */} {groups.map((g, gi) => (

{gi > 0 && (

AND

)} updateGroup(g.id, ng)} onDelete={() => deleteGroup(g.id)} deletable={groups.length > 1} />

))} {/* matching tile + summary */}

Natural-language summary

Contacts where {groups.map((g, i) => ( {i > 0 && AND } ( {summariseGroup(g)} ) ))}

{[ { lbl: "Use in WhatsApp", icon: "send" }, { lbl: "Use in Email Campaign", icon: "mail" }, { lbl: "Use in Journey", icon: "layers" }, ].map((b, i) => ( ))}

); } // shared button styles function btnGhost() { return { display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 12px", borderRadius: 7, background: "#fff", border: `1px solid ${S_RULE}`, fontSize: 12, color: S_INK, fontWeight: 600, cursor: "pointer", fontFamily: "'Inter', sans-serif", }; } function btnPrimary() { return { display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 14px", borderRadius: 7, background: S_INK, color: "#fff", border: "none", fontSize: 12, fontWeight: 700, cursor: "pointer", fontFamily: "'Inter', sans-serif", }; } function toggleBtn(on) { return { width: 38, height: 22, borderRadius: 999, background: on ? S_FUCHSIA : "#cfc4c4", border: "none", padding: 0, position: "relative", cursor: "pointer", transition: "background 0.2s", }; } function toggleHandle(on) { return { position: "absolute", top: 2, left: on ? 18 : 2, width: 18, height: 18, borderRadius: "50%", background: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,0.18)", transition: "left 0.2s", }; } window.SegmentsSection = SegmentsSection;