import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar'; import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog'; 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 AppLayout from '@admin/layouts/app-layout'; import SettingsLayout from '@admin/layouts/settings/layout'; import { Head, router, useForm } from '@inertiajs/react'; import { Activity, 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 EmailLayoutsIndex({ brandingSettings }: Props) { const activityLogCtl = useModelActivityLog(); const { data, setData, post, processing, reset } = useForm({ header: brandingSettings.header || '', system_signature: brandingSettings.system_signature || '', user_signature: brandingSettings.user_signature || '', footer: brandingSettings.footer || '', }); // Keep Inertia form state (data) in sync with latest props so Form defaultValues update. 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) => { // Post the react-hook-form collected values directly (do not rely on inertia useForm internal data) router.post(route('settings.email.branding.update'), values, { preserveScroll: true }); }; // Sync incoming props to form (ensures editors pick up initial content) 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.

); } EmailLayoutsIndex.layout = (page: ReactNode) => ( {page} ); export default EmailLayoutsIndex; const LayoutEditors = () => { const { watch, setValue } = useFormContext(); const header = watch('header') || ''; const footer = watch('footer') || ''; return (
{/* Header Panel */}

Header

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

{/* Actions/stats removed */}
{/* Footer Panel */}

Footer

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

{/* Actions/stats removed */}
); }; // Signature editor component with tighter spacing & stats inline const SignatureEditor = () => { const { watch, setValue } = useFormContext(); const systemSig = watch('system_signature') || ''; const userSig = watch('user_signature') || ''; const strip = (html: string) => (html || '').replace(/<[^>]+>/g, '').trim(); // const systemPlain = strip(systemSig); // const userPlain = strip(userSig); return (

System Signature

Global footer signature (company legal/contact info).

{/* Actions/stats removed */}

User Signature

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

{/* Actions/stats removed */}
); };