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

   1 import { c } from 'ttag';
   2
   3 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
   4
   5 import DateField from './fields/DateField';
   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 AutoReplyFormFixed = ({ model: { start, end, timezone }, updateModel }: Props) => {
  16     // Min date is used to calculate options.
  17     // In order to have rounded options such as 9:00AM or 9:30AM, we need to round the min date we give to the TimeInput
  18     const getMinTimeField = (date: Date) => {
  19         const dateMin = new Date(date);
  20         const minutes = dateMin.getMinutes();
  21
  22         if (minutes < 30) {
  23             dateMin.setMinutes(30);
  24         } else {
  25             dateMin.setMinutes(0);
  26             dateMin.setHours(dateMin.getHours() + 1);
  27         }
  28         return dateMin;
  29     };
  30
  31     return (
  32         <>
  33             <SettingsParagraph>
  34                 {c('Info').t`Auto-reply is active from the start time to the end time.`}
  35             </SettingsParagraph>
  36             <DateField
  37                 id="startDate"
  38                 label={c('Label').t`Start date`}
  39                 value={start.date}
  40                 onChange={updateModel('start.date')}
  41             />
  42             <TimeField
  43                 value={start.time}
  44                 onChange={updateModel('start.time')}
  45                 label={c('Label').t`Start time`}
  46                 id="startTime"
  47             />
  48             <DateField
  49                 id="endDate"
  50                 label={c('Label').t`End date`}
  51                 value={end.date}
  52                 min={start.date}
  53                 onChange={updateModel('end.date')}
  54             />
  55             <TimeField
  56                 value={end.time}
  57                 onChange={updateModel('end.time')}
  58                 label={c('Label').t`End time`}
  59                 id="endTime"
  60                 min={
  61                     start.time && start.date?.getTime() === end.date?.getTime()
  62                         ? getMinTimeField(start.time)
  63                         : undefined
  64                 }
  65                 preventNextDayOverflow
  66             />
  67             <TimeZoneField value={timezone} onChange={updateModel('timezone')} />
  68         </>
  69     );
  70 };
  71
  72 export default AutoReplyFormFixed;