packages/components/containers/autoReply/AutoReplyForm/AutoReplyFormMonthly.tsx

   1 import { c } from 'ttag';
   2
   3 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
   4
   5 import DayOfMonthField from './fields/DayOfMonthField';
   6 import TimeField from './fields/TimeField';
   7 import TimeZoneField from './fields/TimeZoneField';
   8 import type { AutoReplyFormModel } from './interfaces';
   9
  10 interface Props {
  11     model: AutoReplyFormModel;
  12     updateModel: (key: string) => (value: any) => void;
  13 }
  14
  15 const AutoReplyFormMonthly = ({ model: { start, end, timezone }, updateModel }: Props) => {
  16     return (
  17         <>
  18             <SettingsParagraph>
  19                 {c('Info').t`Auto-reply is active each month between the selected start and end time.`}
  20             </SettingsParagraph>
  21             <DayOfMonthField
  22                 id="startDayOfMonth"
  23                 label={c('Label').t`Start day of month`}
  24                 value={start.day}
  25                 onChange={updateModel('start.day')}
  26             />
  27             <TimeField
  28                 value={start.time}
  29                 onChange={updateModel('start.time')}
  30                 label={c('Label').t`Start time`}
  31                 id="startTime"
  32             />
  33             <DayOfMonthField
  34                 id="endDayOfMonth"
  35                 label={c('Label').t`End day of month`}
  36                 value={end.day}
  37                 onChange={updateModel('end.day')}
  38             />
  39             <TimeField
  40                 value={end.time}
  41                 onChange={updateModel('end.time')}
  42                 label={c('Label').t`End time`}
  43                 id="endTime"
  44             />
  45             <TimeZoneField value={timezone} onChange={updateModel('timezone')} />
  46         </>
  47     );
  48 };
  49
  50 export default AutoReplyFormMonthly;