import { Head, router, useForm } from '@inertiajs/react'; import { AlertTriangle, Mail, MailCheck, RotateCcw, Send, Server, Zap, } from 'lucide-react'; import { FormField, NativeSelect } from '@/components/crm/native-select'; import { Callout, SectionCard } from '@/components/crm/page-header'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { cn } from '@/lib/utils'; import { destroy as destroyMail, test as testMail, update as updateMail, } from '@/routes/mail'; import type { MailProvider, MailSettingsProps } from '@/types'; /** * Settings -> Email delivery. * * The server this installation sends from. Three ways to set it up, because * they are the three things a solar company actually has: a Gmail address, a * Brevo account for transactional mail, or the SMTP details their host gave * them. Customers never see any of it; they just get their verification link * and their password reset. */ export default function EmailSettings({ mail, presets }: MailSettingsProps) { const form = useForm({ mailer: mail.mailer, host: mail.host ?? presets.gmail.host, port: String(mail.port), encryption: mail.encryption, username: mail.username ?? '', // Never prefilled: the stored password is not sent to the browser. A // blank field on save means "keep the one you already have". password: '', from_address: mail.from_address ?? '', from_name: mail.from_name, }); const test = useForm({ email: mail.from_address ?? mail.username ?? '', }); const isGmail = form.data.mailer === 'gmail'; const isBrevo = form.data.mailer === 'brevo'; /** * Each preset carries the server details it implies. Gmail's and Brevo's * are fixed by the backend, so the fields are not shown for them; the * manual form starts from blank and the usual submission port rather than * carrying the previous host over. */ const chooseMode = (mode: MailProvider) => { if (form.data.mailer === mode) { return; } form.setData('mailer', mode); form.setData('host', presets[mode].host); form.setData('port', String(presets[mode].port)); form.setData('encryption', presets[mode].encryption); }; const modes: MailProvider[] = ['gmail', 'brevo', 'manual']; /** * A Gmail address is also the sender a Gmail account is allowed to use, so * it is offered as the from address as soon as it is typed — unless one has * already been chosen. */ const useUsernameAsSender = () => { if (form.data.from_address.trim() === '' && isGmail) { form.setData('from_address', form.data.username.trim()); } }; const presetIcon = (mode: MailProvider) => { if (mode === 'gmail') { return Mail; } return mode === 'brevo' ? Zap : Server; }; const submit = () => { form.put(updateMail().url, { preserveScroll: true, onSuccess: () => form.setData('password', ''), }); }; const sendTest = () => { test.post(testMail().url, { preserveScroll: true }); }; const resetSettings = () => { if ( !window.confirm( 'Forget the saved email settings, including the password? Mail goes back to the way the server is configured.', ) ) { return; } router.delete(destroyMail().url, { preserveScroll: true }); }; return ( <> {mail.configured ? ( mail.current ) : ( <> Verification emails, password resets and job updates are handled by the server configuration ( {mail.transport}). Set an account below so customers actually receive them. )}
{modes.map((mode) => { const preset = presets[mode]; const active = form.data.mailer === mode; const ModeIcon = presetIcon(mode); return ( ); })}
{isGmail ? ( { form.setData( 'username', event.target.value, ); useUsernameAsSender(); }} onBlur={useUsernameAsSender} /> ) : isBrevo ? ( <> form.setData( 'username', event.target.value, ) } />

Server{' '} {presets.brevo.host} , port{' '} {presets.brevo.port} {' '} with STARTTLS. If your network blocks 587, Brevo also listens on 2525.

) : ( <> form.setData('host', event.target.value) } /> form.setData('port', event.target.value) } /> form.setData( 'encryption', event.target .value as typeof form.data.encryption, ) } > form.setData( 'username', event.target.value, ) } /> )} form.setData('password', event.target.value) } />
{isGmail ? (
Google does not let an application sign in with your normal password. Turn on 2-Step Verification, then create an app password at{' '} myaccount.google.com/apppasswords {' '} and paste it above. Spaces in it are fine.
) : null} {isBrevo ? (
Generate one at{' '} app.brevo.com/settings/keys/smtp {' '} and paste it above. It is a separate credential from the API keys, and Brevo shows it only once.
) : null}
form.setData('from_address', event.target.value) } /> form.setData('from_name', event.target.value) } />
test.setData('email', event.target.value) } />
{!mail.configured ? (

Save an email account above before sending a test.

) : null}

{form.recentlySuccessful ? 'Saved.' : 'Used for every email this installation sends.'}

); }