import { useForm, usePage, Head, router } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import { useState, useEffect } from 'react'; import AuthenticatedLayout from '@/layouts/authenticated-layout'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Save } from 'lucide-react'; import { Textarea } from '@/components/ui/textarea'; import { RichTextEditor } from '@/components/ui/rich-text-editor'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import languagesData from '@/../lang/language.json'; interface Language { code: string; name: string; countryCode: string; enabled?: boolean; flag?: string; } interface EmailTemplate { id: number; name: string; from: string; module_name: string; } interface EmailTemplateLang { id: number; parent_id: number; lang: string; subject: string; content: string; } interface Props { [key: string]: any; emailTemplate: EmailTemplate; templateLangs: EmailTemplateLang[]; currEmailTempLang: EmailTemplateLang; variables: Record; } const getCountryFlag = (countryCode: string): string => { const codePoints = countryCode .toUpperCase() .split('') .map(char => 127397 + char.charCodeAt(0)); return String.fromCodePoint(...codePoints); }; export default function Edit() { const { emailTemplate, templateLangs, currEmailTempLang, variables, defaultLanguages } = usePage().props; const availableLanguages: Language[] = (defaultLanguages || languagesData) .filter((lang: any) => lang.enabled !== false) .map((lang: any) => ({ ...lang, flag: getCountryFlag(lang.countryCode) })); const { t } = useTranslation(); const urlParams = new URLSearchParams(window.location.search); const [activeLanguage, setActiveLanguage] = useState(urlParams.get('lang') || currEmailTempLang?.lang || 'en'); const [editorKey, setEditorKey] = useState(0); const templateForm = useForm({ from: emailTemplate.from || 'ERPGo SaaS', }); const contentForm = useForm({ subject: currEmailTempLang.subject || '', content: currEmailTempLang.content || '', lang: activeLanguage, }); const handleLanguageChange = async (lang: string) => { router.get(route('email-templates.edit', emailTemplate.id), { lang }); }; const handleTemplateSubmit = (e: React.FormEvent) => { e.preventDefault(); templateForm.put(route('email-templates.update-meta', emailTemplate.id)); }; const handleContentSubmit = (e: React.FormEvent) => { e.preventDefault(); contentForm.put(route('email-templates.update', emailTemplate.id), { onSuccess: () => { router.get(route('email-templates.edit', emailTemplate.id), { lang: activeLanguage }); } }); }; return (
{t('Variables')}
{Object.entries(variables || {}).map(([key, value]) => (

{key}: {`{${value}}`}

))}
{t('Template Details')}
templateForm.setData('from', e.target.value)} required />
{templateForm.errors.from && (

{templateForm.errors.from}

)}
{availableLanguages.find((l: Language) => l.code === activeLanguage)?.flag} {t('Content for')} {availableLanguages.find((l: Language) => l.code === activeLanguage)?.name}
contentForm.setData('subject', e.target.value)} placeholder={t('Enter email subject')} required />
contentForm.setData('content', content)} placeholder={t('Enter email content with HTML and variables')} />
); }