import { useForm, usePage, Head, router } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import { useState } 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 { 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 NotificationTemplate { id: number; module: string; action: string; type: string; status: string; permissions: string; } interface NotificationTemplateLang { id: number; parent_id: number; lang: string; subject: string; content: string; } interface Props { [key: string]: any; notificationTemplate: NotificationTemplate; templateLangs: NotificationTemplateLang[]; currNotificationTempLang: NotificationTemplateLang; 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 { notificationTemplate, templateLangs, currNotificationTempLang, 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') || currNotificationTempLang?.lang || 'en'); const templateForm = useForm({ status: notificationTemplate.status || 'active', }); const contentForm = useForm({ subject: notificationTemplate.action, content: currNotificationTempLang?.content || '', lang: activeLanguage, }); const handleLanguageChange = async (lang: string) => { router.get(route('notification-templates.edit', notificationTemplate.id), { lang }); }; const handleContentSubmit = (e: React.FormEvent) => { e.preventDefault(); contentForm.put(route('notification-templates.update', notificationTemplate.id), { onSuccess: () => { router.get(route('notification-templates.edit', notificationTemplate.id), { lang: activeLanguage }); } }); }; return (
{t('Variables')}
{Object.entries(variables || {}).map(([key, value]) => (

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

))}
{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 notification subject')} required readOnly />