import { useEffect, useState } from 'react'; import { NavIcon } from '../NavIcon'; import { ButtonPrimary } from '../shared/buttons'; import { QuillField } from '../shared/QuillField'; import { getSikshyaApi, SIKSHYA_ENDPOINTS } from '../../api'; import type { EmailTemplateApi } from '../../types/emailTemplate'; import { TriggerEventSelect } from './TriggerEventSelect'; import { __ } from '../../lib/i18n'; export function ToggleSwitch(props: { checked: boolean; disabled?: boolean; onChange: (next: boolean) => void; label: string; }) { const { checked, disabled, onChange, label } = props; return ( ); } async function copyToClipboard(text: string): Promise { try { await navigator.clipboard.writeText(text); } catch { const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } } const FT_INPUT = 'mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white'; const LB = 'block text-sm font-medium text-slate-800 dark:text-slate-200'; const HELP = 'mt-1 text-xs text-slate-500 dark:text-slate-400'; type EditorProps = { editing: EmailTemplateApi; actionBusy: string | null; onBack: () => void; /** Called after successful save (e.g. navigate to list). Defaults to onBack. */ afterSave?: () => void; patchTemplate: (id: string, body: Record) => Promise; onPreview: (row: EmailTemplateApi, draft?: { subject?: string; body_html?: string }) => Promise; }; export function EmailTemplateEditorPanel(props: EditorProps) { const { editing, actionBusy, onBack, afterSave, patchTemplate, onPreview } = props; const locked = !!editing.locked; const [name, setName] = useState(editing.name); const [description, setDescription] = useState(editing.description); const [subject, setSubject] = useState(editing.subject); const [bodyHtml, setBodyHtml] = useState(editing.body_html); const [enabled, setEnabled] = useState(editing.enabled); const [eventKey, setEventKey] = useState(editing.event); const [recipientTo, setRecipientTo] = useState(editing.recipient_to || '{{student_email}}'); const [saveErr, setSaveErr] = useState(null); useEffect(() => { setName(editing.name); setDescription(editing.description); setSubject(editing.subject); setBodyHtml(editing.body_html); setEnabled(editing.enabled); setEventKey((editing.event || 'custom.manual').trim() || 'custom.manual'); setRecipientTo(editing.recipient_to?.trim() || '{{student_email}}'); }, [editing]); const save = async () => { if (locked) return; setSaveErr(null); try { await patchTemplate(editing.id, { name, description, subject, body_html: bodyHtml, enabled, recipient_to: recipientTo, ...(editing.template_type === 'custom' ? { event: eventKey } : {}), }); const done = afterSave ?? onBack; done(); } catch (e) { setSaveErr(e instanceof Error ? e.message : __('Save failed', 'sikshya')); } }; const busy = actionBusy === editing.id; const fieldLock = locked || busy; return (
{locked ? (
{__('Add-on required.', 'sikshya')}{' '} {editing.locked_reason?.trim() || __( 'Enable the add-on and plan for this template under Addons and licensing, then return here to edit.', 'sikshya' )}
) : null}

{__('Edit email template', 'sikshya')}

{__('Sender identity and SMTP are configured under Email (delivery).', 'sikshya')}

{__('Status', 'sikshya')} {enabled ? __('Active', 'sikshya') : __('Inactive', 'sikshya')}
void save()}> {__('Save template', 'sikshya')}
{saveErr ?

{saveErr}

: null}
{__('Trigger Event', 'sikshya')} {editing.template_type === 'system' ? ( <>
{editing.event}

{__('System templates cannot change events.', 'sikshya')}

) : ( <>

{__( 'Sikshya fires these WordPress actions; your template runs when the matching event occurs.', 'sikshya' )}

)}