import { Form } from '@admin/components/form'; import HeadingSmall from '@admin/components/heading-small'; import TextEditor from '@admin/components/rich-text-editor'; import { Button } from '@admin/components/ui/button'; import { Card, CardContent } from '@admin/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import AdminSettingsLayout from '@admin/layouts/admin/admin-settings-layout'; import { Head, router, useForm } from '@inertiajs/react'; import { Save } from 'lucide-react'; import { ReactNode, useEffect } from 'react'; import { useFormContext } from 'react-hook-form'; interface Props { brandingSettings: { header: string; system_signature: string; user_signature: string; footer: string }; } function EmailLayouts({ brandingSettings }: Props) { const { data, setData, processing, reset } = useForm({ header: brandingSettings.header || '', system_signature: brandingSettings.system_signature || '', user_signature: brandingSettings.user_signature || '', footer: brandingSettings.footer || '', }); useEffect(() => { setData('header', brandingSettings.header || ''); setData('footer', brandingSettings.footer || ''); setData('system_signature', brandingSettings.system_signature || ''); setData('user_signature', brandingSettings.user_signature || ''); }, [brandingSettings.header, brandingSettings.footer, brandingSettings.system_signature, brandingSettings.user_signature]); const submit = (values: any) => { router.post('/admin/settings/email-layouts', values, { preserveScroll: true }); }; useEffect(() => { (reset as any)({ header: brandingSettings.header || '', system_signature: brandingSettings.system_signature || '', user_signature: brandingSettings.user_signature || '', footer: brandingSettings.footer || '', }); }, [brandingSettings.header, brandingSettings.system_signature, brandingSettings.user_signature, brandingSettings.footer, reset]); return ( <>
Layout Signature

How layout blocks render:

  • Header appears at the very top of every branded email before the template body. Ideal for logo, brand bar, or greeting banner.
  • Footer sits below the template body and before unsubscribe or compliance links. Use for legal text, CTA strips, or brand links.
  • Signatures (managed under the Signature tab) are appended after the footer: system first, then (if available) the user-specific signature.

Avoid embedding full page styling here—keep it structural so templates remain flexible.

Signature layering logic:

  1. System Signature: Organization-wide block (branding, corporate identity, mandatory legal or contact information).
  2. User Signature: Personal block (name, role, direct contact methods) appended under the system signature when present.

If a user signature is empty, only the system signature is used. Keep images lightweight (hosted & sized) to avoid deliverability penalties.

); } EmailLayouts.layout = (page: ReactNode) => ( {page} ); export default EmailLayouts; const LayoutEditors = () => { const { watch } = useFormContext(); watch('header'); watch('footer'); return (

Header

Appears above the email body (logo / banner / greeting).

Footer

Comes after the email body (legal, links, brand).

); }; const SignatureEditor = () => { const { watch } = useFormContext(); watch('system_signature'); watch('user_signature'); return (

System Signature

Global footer signature (company legal/contact info).

User Signature

Optional per-user signature (name, role, direct contacts).

); };