applications/calendar/src/app/containers/settings/AskUpdateTimezoneModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { useCalendarUserSettings } from '@proton/calendar/calendarUserSettings/hooks';
   7 import { Checkbox, Prompt, useApi, useEventManager, useNotifications } from '@proton/components';
   8 import { useLoading } from '@proton/hooks';
   9 import { updateCalendarUserSettings } from '@proton/shared/lib/api/calendars';
  10
  11 interface Props {
  12     localTzid: string;
  13     onClose?: () => void;
  14     isOpen: boolean;
  15 }
  16
  17 const AskUpdateTimezoneModal = ({ localTzid, onClose, isOpen }: Props) => {
  18     const api = useApi();
  19     const { call } = useEventManager();
  20     const { createNotification } = useNotifications();
  21     const [calendarUserSettings] = useCalendarUserSettings();
  22
  23     const [updating, withUpdating] = useLoading();
  24     const [cancelling, withCancelling] = useLoading();
  25
  26     const [autoDetectPrimaryTimezone, setAutoDetectPrimaryTimezone] = useState<boolean>(
  27         !!calendarUserSettings?.AutoDetectPrimaryTimezone
  28     );
  29
  30     const handleUpdateTimezone = async () => {
  31         await api(
  32             updateCalendarUserSettings({
  33                 PrimaryTimezone: localTzid,
  34                 AutoDetectPrimaryTimezone: +autoDetectPrimaryTimezone,
  35             })
  36         );
  37         await call();
  38         onClose?.();
  39         createNotification({ text: c('Success').t`Preference saved` });
  40     };
  41
  42     const handleCancel = async () => {
  43         if (autoDetectPrimaryTimezone !== !!calendarUserSettings?.AutoDetectPrimaryTimezone) {
  44             await api(
  45                 updateCalendarUserSettings({
  46                     AutoDetectPrimaryTimezone: +autoDetectPrimaryTimezone,
  47                 })
  48             );
  49             await call();
  50             createNotification({ text: c('Success').t`Preference saved` });
  51         }
  52
  53         onClose?.();
  54     };
  55
  56     const timezone = <b key={0}>{localTzid}</b>;
  57
  58     return (
  59         <Prompt
  60             open={isOpen}
  61             onClose={onClose}
  62             title={c('Modal title').t`Time zone changed`}
  63             buttons={[
  64                 <Button
  65                     loading={updating}
  66                     onClick={() => {
  67                         void withUpdating(handleUpdateTimezone());
  68                     }}
  69                     color="norm"
  70                 >
  71                     {c('Action').t`Update`}
  72                 </Button>,
  73                 <Button
  74                     loading={cancelling}
  75                     onClick={() => {
  76                         void withCancelling(handleCancel());
  77                     }}
  78                 >
  79                     {c('Action').t`Keep current time zone`}
  80                 </Button>,
  81             ]}
  82             actions={
  83                 <Checkbox
  84                     id="autodetect-primary-timezone"
  85                     autoFocus
  86                     checked={!autoDetectPrimaryTimezone}
  87                     disabled={updating}
  88                     onChange={() => setAutoDetectPrimaryTimezone(!autoDetectPrimaryTimezone)}
  89                 >
  90                     {c("Don't ask to update timezone checkbox label").t`Don't ask again`}
  91                 </Checkbox>
  92             }
  93         >
  94             <p>
  95                 {c('Info')
  96                     .jt`Your system time zone seems to have changed to ${timezone}. Do you want to update your time zone preference?`}
  97             </p>
  98         </Prompt>
  99     );
 100 };
 101
 102 export default AskUpdateTimezoneModal;