99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
|
/**
|
||
|
|
* Vacation responder — toggle + date range + auto-reply text.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, { useState, useCallback } from 'react';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import { Button } from '@/components/ui/Button';
|
||
|
|
import { Input } from '@/components/ui/Input';
|
||
|
|
import { Card } from '@/components/ui/Card';
|
||
|
|
import { useToast } from '@/components/ui/Toast';
|
||
|
|
import { configureVacation, type VacationPayload } from '@/api/mail';
|
||
|
|
|
||
|
|
export function VacationResponder({ accountId }: { accountId: string }) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const toast = useToast();
|
||
|
|
const [enabled, setEnabled] = useState(false);
|
||
|
|
const [startDate, setStartDate] = useState('');
|
||
|
|
const [endDate, setEndDate] = useState('');
|
||
|
|
const [subject, setSubject] = useState('');
|
||
|
|
const [body, setBody] = useState('');
|
||
|
|
const [saving, setSaving] = useState(false);
|
||
|
|
|
||
|
|
const handleSave = useCallback(async () => {
|
||
|
|
setSaving(true);
|
||
|
|
try {
|
||
|
|
const payload: VacationPayload = {
|
||
|
|
enabled,
|
||
|
|
start_date: startDate || null,
|
||
|
|
end_date: endDate || null,
|
||
|
|
subject,
|
||
|
|
body,
|
||
|
|
};
|
||
|
|
await configureVacation(payload);
|
||
|
|
toast.success(t('mail.vacationSaved'));
|
||
|
|
} catch (err) {
|
||
|
|
toast.error(err instanceof Error ? err.message : String(err));
|
||
|
|
} finally {
|
||
|
|
setSaving(false);
|
||
|
|
}
|
||
|
|
}, [enabled, startDate, endDate, subject, body, toast, t]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div data-testid="vacation-responder">
|
||
|
|
<Card title={t('mail.vacationResponder')}>
|
||
|
|
<div className="space-y-4">
|
||
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={enabled}
|
||
|
|
onChange={(e) => setEnabled(e.target.checked)}
|
||
|
|
className="w-5 h-5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
|
||
|
|
data-testid="vacation-toggle"
|
||
|
|
/>
|
||
|
|
<span className="text-sm font-medium text-secondary-700">{t('mail.enableVacation')}</span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
{enabled && (
|
||
|
|
<div className="space-y-3" data-testid="vacation-settings">
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
|
|
<Input
|
||
|
|
label={t('mail.vacationStart')}
|
||
|
|
type="date"
|
||
|
|
value={startDate}
|
||
|
|
onChange={(e) => setStartDate(e.target.value)}
|
||
|
|
/>
|
||
|
|
<Input
|
||
|
|
label={t('mail.vacationEnd')}
|
||
|
|
type="date"
|
||
|
|
value={endDate}
|
||
|
|
onChange={(e) => setEndDate(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Input
|
||
|
|
label={t('mail.vacationSubject')}
|
||
|
|
value={subject}
|
||
|
|
onChange={(e) => setSubject(e.target.value)}
|
||
|
|
placeholder={t('mail.vacationSubjectPlaceholder')}
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.vacationBody')}</label>
|
||
|
|
<textarea
|
||
|
|
value={body}
|
||
|
|
onChange={(e) => setBody(e.target.value)}
|
||
|
|
className="w-full min-h-32 border border-secondary-300 rounded-md p-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
||
|
|
placeholder={t('mail.vacationBodyPlaceholder')}
|
||
|
|
data-testid="vacation-body"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Button onClick={handleSave} isLoading={saving} size="sm" data-testid="vacation-save">
|
||
|
|
{t('common.save')}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|