145 lines
6.6 KiB
TypeScript
145 lines
6.6 KiB
TypeScript
import { Head, useForm } from '@inertiajs/react';
|
|
import { Mails, Save } from 'lucide-react';
|
|
import type { FormEvent } from 'react';
|
|
import InputError from '@/components/input-error';
|
|
import { PageHeading } from '@/components/page-heading';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
|
|
type Template = { subject: string; message: string };
|
|
type Definition = Template & { label: string };
|
|
|
|
export default function NotificationTemplates({
|
|
definitions,
|
|
templates,
|
|
variables,
|
|
}: {
|
|
definitions: Record<string, Definition>;
|
|
templates: Record<string, Template>;
|
|
variables: string[];
|
|
}) {
|
|
const form = useForm({ templates });
|
|
|
|
function submit(event: FormEvent) {
|
|
event.preventDefault();
|
|
form.put('/administracao/notificacoes/modelos', {
|
|
preserveScroll: true,
|
|
});
|
|
}
|
|
|
|
function update(eventName: string, field: keyof Template, value: string) {
|
|
form.setData('templates', {
|
|
...form.data.templates,
|
|
[eventName]: { ...form.data.templates[eventName], [field]: value },
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head title="Modelos de email" />
|
|
<main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-7 p-5 sm:p-8">
|
|
<PageHeading
|
|
eyebrow="Administração"
|
|
title="Modelos de notificação"
|
|
description="Personalize o assunto e a mensagem usados no email e na caixa interna, mantendo as variáveis funcionais."
|
|
/>
|
|
<p className="rounded-xl border bg-muted/40 p-4 text-sm text-muted-foreground">
|
|
Variáveis disponíveis:{' '}
|
|
{variables.map((variable) => (
|
|
<code
|
|
key={variable}
|
|
className="mx-1 rounded bg-background px-1.5 py-0.5"
|
|
>
|
|
{variable}
|
|
</code>
|
|
))}
|
|
</p>
|
|
<form onSubmit={submit} className="space-y-4">
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
{Object.entries(definitions).map(
|
|
([eventName, definition]) => (
|
|
<Card
|
|
key={eventName}
|
|
className="gap-4 shadow-none"
|
|
>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Mails className="size-4 text-primary" />
|
|
{definition.label}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<label className="space-y-1 text-sm font-medium">
|
|
Assunto
|
|
<Input
|
|
value={
|
|
form.data.templates[
|
|
eventName
|
|
].subject
|
|
}
|
|
onChange={(event) =>
|
|
update(
|
|
eventName,
|
|
'subject',
|
|
event.target.value,
|
|
)
|
|
}
|
|
/>
|
|
</label>
|
|
<InputError
|
|
message={
|
|
form.errors[
|
|
`templates.${eventName}.subject`
|
|
]
|
|
}
|
|
/>
|
|
<label className="block space-y-1 text-sm font-medium">
|
|
Mensagem
|
|
<textarea
|
|
className="min-h-24 w-full rounded-md border bg-transparent px-3 py-2 text-sm"
|
|
value={
|
|
form.data.templates[
|
|
eventName
|
|
].message
|
|
}
|
|
onChange={(event) =>
|
|
update(
|
|
eventName,
|
|
'message',
|
|
event.target.value,
|
|
)
|
|
}
|
|
/>
|
|
</label>
|
|
<InputError
|
|
message={
|
|
form.errors[
|
|
`templates.${eventName}.message`
|
|
]
|
|
}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
),
|
|
)}
|
|
</div>
|
|
<Button type="submit" disabled={form.processing}>
|
|
<Save /> Guardar modelos
|
|
</Button>
|
|
</form>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
NotificationTemplates.layout = {
|
|
breadcrumbs: [
|
|
{ title: 'Administração', href: '/administracao/notificacoes/modelos' },
|
|
{
|
|
title: 'Modelos de email',
|
|
href: '/administracao/notificacoes/modelos',
|
|
},
|
|
],
|
|
};
|