/** * Shois Chat Button — Agents Page * * List of agents with add/edit drawer, avatar, platforms, schedule. * * @package ShoisChatButton */ import { useState, useEffect, useCallback } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import ScheduleEditor from '../components/ScheduleEditor'; import CustomSelect from '../components/CustomSelect'; /** * Generate a unique ID. * * @return {string} Unique ID. */ function uid() { return 'agent_' + Date.now() + '_' + Math.random().toString(36).substring(2, 8); } /** * Default agent template. * * @return {Object} New agent config. */ function newAgent() { return { id: uid(), enabled: true, name: '', title: '', avatar_type: 'initials', avatar_url: '', avatar_initials: '', avatar_bg_color: '#5170ff', status_message: '', platforms: [], schedule: { enabled: false, hours: {} }, }; } /** * Render a status badge with a dot. */ function StatusBadge({ status, message }) { const isOnline = status === 'online'; const label = isOnline ? __('Online', 'shois-chat-button') : __('Offline', 'shois-chat-button'); return (
{message || label}
); } /** * Platform icon helper. */ function PlatformIcon({ platformId, platformDefs }) { const def = platformDefs[platformId] || {}; const icons = { whatsapp: , messenger: , telegram: , instagram: , }; return (
{icons[platformId] || {(def.name || platformId).charAt(0)}}
); } /** * Agent row in the table. */ function AgentRow({ agent, onEdit, onToggle, onDelete, platformDefs }) { const initials = agent.avatar_initials || (agent.name ? agent.name.charAt(0).toUpperCase() : '?'); const enabledPlatforms = (agent.platforms || []).filter(p => p.enabled); return ( {/* AVATAR */}
{agent.avatar_type === 'image' && agent.avatar_url ? ( {agent.name} ) : (
{initials}
)}
{/* NAME */} {agent.name || __('Unnamed Agent', 'shois-chat-button')} {/* TITLE */} {agent.title || ''} {/* STATUS */} {/* PLATFORMS */}
{enabledPlatforms.map((p, idx) => ( ))} {enabledPlatforms.length === 0 && —}
{/* ACTIVE */} {/* ACTIONS */}
); } /** * Agent edit drawer. */ function AgentDrawer({ agent, onSave, onClose, platformDefs }) { const [data, setData] = useState({ ...agent }); const update = useCallback((updates) => { setData((prev) => ({ ...prev, ...updates })); }, []); const updatePlatform = (index, updates) => { const platforms = [...(data.platforms || [])]; platforms[index] = { ...platforms[index], ...updates }; update({ platforms }); }; const isPro = window.shcbAdmin?.isPro || false; const addPlatform = () => { const platforms = [...(data.platforms || [])]; if (!isPro && platforms.length >= 1) { return; // blocked — UI shows upsell instead } platforms.push({ platform_id: 'whatsapp', value: '', label: '', pre_message: '', enabled: true, is_primary: false }); update({ platforms }); }; const removePlatform = (index) => { const platforms = [...(data.platforms || [])]; platforms.splice(index, 1); update({ platforms }); }; const handleScheduleChange = (schedule) => { update({ schedule }); }; return (
e.stopPropagation()}>

{agent.id ? __('Edit Agent', 'shois-chat-button') : __('Add Agent', 'shois-chat-button')}

{ /* Basic Info */}

{__('Basic Info', 'shois-chat-button')}

update({ name: e.target.value })} placeholder="John" />
update({ title: e.target.value })} placeholder="Sales Manager" />
update({ status_message: e.target.value })} placeholder="Available • Replies in 5 min" />
{ /* Avatar */}

{__('Avatar', 'shois-chat-button')}

update({ avatar_type: val })} options={[ { value: 'initials', label: __('Initials', 'shois-chat-button') }, { value: 'image', label: __('Image URL', 'shois-chat-button') } ]} />
{data.avatar_type === 'initials' && ( <>
update({ avatar_initials: e.target.value.substring(0, 2).toUpperCase() })} maxLength={2} placeholder="JD" />
update({ avatar_bg_color: e.target.value })} /> update({ avatar_bg_color: e.target.value })} maxLength={7} />
)} {data.avatar_type === 'image' && (
update({ avatar_url: e.target.value })} placeholder="https://..." />
)} { /* Platforms */}

{__('Platforms', 'shois-chat-button')}

{(data.platforms || []).map((plat, idx) => { const platDef = platformDefs[plat.platform_id] || {}; const isPhone = platDef.input_type === 'phone'; const showPreMsg = platDef.supports_pre_message; const placeholder = platDef.input_placeholder || __('Number / Username', 'shois-chat-button'); const inputLabel = platDef.input_label || __('Value', 'shois-chat-button'); return (
updatePlatform(idx, { platform_id: val, value: '', pre_message: '' })} options={Object.keys(platformDefs || {}).map((pkey) => ({ value: pkey, label: platformDefs[pkey]?.name || pkey }))} style={{ flex: '1' }} />
updatePlatform(idx, { value: e.target.value })} placeholder={placeholder} type={isPhone ? 'tel' : 'text'} /> {isPhone && (

{__('Include country code (e.g., +880, +1, +44). Without it, the link will not work.', 'shois-chat-button')}

)}
{showPreMsg && (
updatePlatform(idx, { pre_message: e.target.value })} placeholder={__('Hi! I have a question about...', 'shois-chat-button')} />
)}
); })} {(!isPro && (data.platforms || []).length >= 1) ? (
window.dispatchEvent(new CustomEvent('shcb-pro-alert'))} style={{cursor: 'pointer'}}> 🔒 {__('Multiple platforms per agent requires', 'shois-chat-button')} PRO
) : ( )} { /* Schedule */}

{__('Schedule', 'shois-chat-button')}

); } /** * AgentsPage — list + drawer CRUD for agents. * * @return {JSX.Element} Agents page. */ export default function AgentsPage() { const [agents, setAgents] = useState([]); const [editing, setEditing] = useState(null); const [saving, setSaving] = useState(false); const [platformDefs, setPlatformDefs] = useState({}); useEffect(() => { apiFetch({ path: '/shois-chat/v1/agents' }) .then((data) => setAgents(Array.isArray(data) ? data : [])) .catch(() => { }); apiFetch({ path: '/shois-chat/v1/platforms' }) .then((data) => setPlatformDefs(data || {})) .catch(() => { }); }, []); const saveAgents = (updated) => { setSaving(true); apiFetch({ path: '/shois-chat/v1/agents', method: 'POST', data: { agents: updated }, }) .then(() => setAgents(updated)) .catch(() => { }) .finally(() => setSaving(false)); }; const handleToggle = (id) => { const updated = agents.map((a) => a.id === id ? { ...a, enabled: !a.enabled } : a); saveAgents(updated); }; const handleDelete = (id) => { const updated = agents.filter((a) => a.id !== id); saveAgents(updated); }; const handleSave = (agentData) => { let updated; const existing = agents.find((a) => a.id === agentData.id); if (existing) { updated = agents.map((a) => a.id === agentData.id ? agentData : a); } else { updated = [...agents, agentData]; } saveAgents(updated); setEditing(null); }; const isProUser = window.shcbAdmin?.isPro || false; const handleAddAgent = () => { if (!isProUser && agents.length >= 1) { return; // blocked — UI shows upsell } setEditing(newAgent()); }; return (
👤

{__('Agents', 'shois-chat-button')}

{(!isProUser && agents.length >= 1) ? (
window.dispatchEvent(new CustomEvent('shcb-pro-alert'))} style={{cursor: 'pointer'}}> 🔒 {__('Multiple agents requires', 'shois-chat-button')} PRO
) : ( )}

{__('Add team members who are available to chat. Each agent can have their own platforms and schedule.', 'shois-chat-button')}

{agents.length > 0 && ( {agents.map((agent) => ( setEditing({ ...a })} onToggle={handleToggle} onDelete={handleDelete} platformDefs={platformDefs} /> ))}
{__('AVATAR', 'shois-chat-button')} {__('NAME', 'shois-chat-button')} {__('TITLE', 'shois-chat-button')} {__('STATUS', 'shois-chat-button')} {__('PLATFORMS', 'shois-chat-button')} {__('ACTIVE', 'shois-chat-button')} {__('ACTIONS', 'shois-chat-button')}
)}
{editing && ( setEditing(null)} platformDefs={platformDefs} /> )} {saving &&
{__('Saving...', 'shois-chat-button')}
}
); }