/* Mereka v2 — Broadcast "Create message" wizard (Audience/Content/Preview/Schedule) — Figma rebuild */
const BC_WIZARD_STEPS = ['Audience', 'Content', 'Preview', 'Schedule'];
const BC_RECIPIENTS = [
'young.zheng@uxagents.com', 'nicholashon@uxagents.com', 'faiz@mereka.my', 'florencejones@gmail.com', 'natalie123a@gmail.com', 'james.smith@outlook.com',
'samantha.jones@yahoo.com', 'michael.brown@gmail.com', 'emily.davis@hotmail.com', 'chris.wilson@icloud.com', 'olivia.johnson@fakemail.com', 'daniel.miller@live.com',
];
const BC_APPROVED_TEMPLATES = [
{ id: 'a1', name: 'Onboarding message_1', channel: 'Whatsapp', updated: '52 minutes ago', category: 'Onboarding', language: 'English' },
{ id: 'a2', name: 'Marketing_1', channel: 'Whatsapp', updated: '52 minutes ago', category: 'Onboarding', language: 'English' },
{ id: 'a3', name: 'May 2026 Promo', channel: 'Whatsapp', updated: '52 minutes ago', category: 'Onboarding', language: 'English' },
];
/* ===== Multi-select dropdown (programmes / cohort) ===== */
function BcMultiSelect({ placeholder, options, onAdd }) {
const [open, setOpen] = useState(false);
const [sel, setSel] = useState([options[1], options[2], options[3]].filter(Boolean));
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('click', h);
return () => document.removeEventListener('click', h);
}, [open]);
const toggle = (o) => setSel(s => s.includes(o) ? s.filter(x => x !== o) : [...s, o]);
return (
{open && (
{options.map(o => {
const on = sel.includes(o);
return (
);
})}
)}
);
}
/* ===== Service category radio dropdown ===== */
function BcRadioSelect({ placeholder, options, value, onChange }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('click', h);
return () => document.removeEventListener('click', h);
}, [open]);
return (
{open && (
{options.map(o => (
))}
)}
);
}
function BcEmailChip({ email, onRemove }) {
return (
{email}
);
}
/* ===== Wizard shell ===== */
function CreateMessageWizardPage() {
const [step, setStep] = useState('Audience');
const idx = BC_WIZARD_STEPS.indexOf(step);
const next = () => { if (idx < 3) setStep(BC_WIZARD_STEPS[idx + 1]); };
return (
{/* Wizard nav */}
{/* Step content */}
{step === 'Audience' && }
{step === 'Content' && }
{step === 'Preview' && }
{step === 'Schedule' && }
{step === 'Schedule' ? (
) : (
)}
);
}
/* ===== Audience ===== */
function BcAudienceStep() {
const [serviceCat, setServiceCat] = useState('');
const [recipients, setRecipients] = useState(BC_RECIPIENTS.concat(BC_RECIPIENTS.slice(0, 8)));
const cohorts = [
{ name: 'AI ACCELERATOR (AI4U)', meta: 'Programme', cohort: 'Cohort APR 2026', tone: 'text-neutral-500' },
{ name: 'AI ACCELERATOR (AI4U)', meta: 'Programme', cohort: 'Cohort APR 2026', tone: 'text-neutral-500' },
{ name: 'GENERATIVE AI WOR...', meta: 'Experience', cohort: 'Cohort APR 2026', tone: 'text-amber-500' },
];
return (
<>
Audience
Choose which group of users will receive this broadcast.
Cohorts ({cohorts.length})
{cohorts.map((c, i) => (
{c.name}
{c.meta} • {c.cohort}
))}
Recipient list ({recipients.length})
{recipients.map((e, i) => setRecipients(recipients.filter((_, j) => j !== i))} />)}
);
}
/* ===== Content ===== */
function BcContentStep() {
const [channel, setChannel] = useState('Email');
const [tpl, setTpl] = useState('a1');
return (
<>
Content
Choose which group of users will receive this broadcast.
setChannel('Email')} />
setChannel('Whatsapp')} />
Messages sent via WhatsApp will only be delivered to recipients with an active WhatsApp account.
Select approved template
Choose which template to use for your message.
Templates
{['Whatsapp', 'Onboarding', 'Reminder'].map(c => (
{c}
))}
| Template Name |
Channel |
Last Updated |
Category |
Language |
Status |
|
{BC_APPROVED_TEMPLATES.map(t => (
setTpl(t.id)}>
| {t.name} |
{t.channel} |
{t.updated} |
{t.category} |
{t.language} |
Approved |
{tpl === t.id && }
|
))}
Message content
Use variables:
{'{{name}}'}
{'{{email}}'}
{'{{program_name}}'}
);
}
/* ===== Preview ===== */
function BcPreviewStep() {
return (
<>
Preview
);
}
/* ===== Schedule ===== */
function BcScheduleStep() {
const [when, setWhen] = useState('later');
return (
<>
Schedule
Schedule when to send out your message
setWhen('now')} />
setWhen('later')} />
{when === 'later' && (
<>
)}
Template: Onboarding message_1
Recipients : 45
Channel : Email
Timing : Send at 04/05/2026 20:00
);
}
Object.assign(window, { CreateMessageWizardPage });