import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar'; import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog'; import { Form, FormField } from '@admin/components/form'; import HeadingSmall from '@admin/components/heading-small'; import TextEditor, { TextEditorRef } from '@admin/components/rich-text-editor'; import { Button } from '@admin/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@admin/components/ui/card'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@admin/components/ui/dialog'; import { Tooltip, TooltipContent, TooltipTrigger } from '@admin/components/ui/tooltip'; import AppLayout from '@admin/layouts/app-layout'; import SettingsLayout from '@admin/layouts/settings/layout'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { Activity, ArrowLeft } from 'lucide-react'; import { useRef, useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { toast } from 'sonner'; export default function Edit({ emailTemplate, availableVariable }: { emailTemplate: any; availableVariable: any }) { const { setValue, watch } = useFormContext() || ({} as any); const textEditorRef = useRef(null); const activityLogCtl = useModelActivityLog(); const page = usePage(); const companyName = (page?.props as any)?.settings?.company_name; const defaultValues = { name: emailTemplate.name || '', content: { body: emailTemplate.content?.body || '', subject: emailTemplate.content?.subject || '', }, from_name: companyName || emailTemplate.from_name || '', }; const [testOpen, setTestOpen] = useState(false); const [testEmail, setTestEmail] = useState(''); const [testing, setTesting] = useState(false); // Removed flash-driven auto close; handled directly in onSuccess for reliability const handleSubmit = async (values: any) => { router.put(`/settings/email-templates/${emailTemplate.uid}`, values, { preserveScroll: true, onSuccess: () => { toast.success('Template updated!'); }, onError: () => toast.error('Update failed!'), }); }; const submitTestEmail = () => { if (!testEmail) { toast.error('Please enter a test email'); return; } setTesting(true); router.post( route('settings.email-templates.test', { uid: emailTemplate.uid }), { email: testEmail }, { preserveScroll: true, preserveState: true, onSuccess: (page) => { const flash = (page.props as any)?.flash; toast.success(flash?.success || 'Test email sent'); setTestOpen(false); setTestEmail(''); }, onError: (errors: any) => { if (errors?.email) toast.error(errors.email); if (errors?.test_email) toast.error(errors.test_email); }, onFinish: () => setTesting(false), }, ); }; const handleVariableClick = (variable: string) => { if (textEditorRef.current) { // Insert the variable at the current cursor position textEditorRef.current.insertTextAtCursor(` ${variable} `); } else { // Fallback to the old method if ref is not available const currentContent = watch('content.body') || ''; const newContent = currentContent + ' ' + variable; setValue('content.body', newContent); } }; return ( <>
{/* Main Form - Left Column */}
{/* Hidden retained name field (backend requires name) */}
{/* Variables Panel - Right Column */}
{availableVariable?.map((list: any, index: number) => ( {list?.key}
{list?.value?.map((variable: any, varIndex: number) => (
handleVariableClick(variable?.variable)} >

{variable?.variable}

{variable?.variable_name}

{variable?.variable_description}

))}
))}
); } // Test Email Dialog // Positioned outside main component return to keep code organized function TestEmailDialog({ open, onOpenChange, value, onChange, onSubmit, loading, }: { open: boolean; onOpenChange: (o: boolean) => void; value: string; onChange: (v: string) => void; onSubmit: () => void; loading: boolean; }) { return ( Send Test Email Enter a recipient email address to receive a test rendering of this template.
onChange(e.target.value)} />
); } Edit.layout = (page: React.ReactNode) => ( {page} );