packages/components/containers/calendar/settings/CalendarInvitationsSection.tsx

   1 import { c } from 'ttag';
   2
   3 import Info from '@proton/components/components/link/Info';
   4 import Toggle from '@proton/components/components/toggle/Toggle';
   5 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
   6 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
   7 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
   8 import SettingsSection from '@proton/components/containers/account/SettingsSection';
   9 import { useLoading } from '@proton/hooks';
  10 import { updateCalendarUserSettings } from '@proton/shared/lib/api/calendars';
  11 import { getClosestLocaleCode } from '@proton/shared/lib/i18n/helper';
  12 import type { TtagLocaleMap } from '@proton/shared/lib/interfaces/Locale';
  13 import type { CalendarUserSettings } from '@proton/shared/lib/interfaces/calendar';
  14
  15 import { useApi, useEventManager, useNotifications } from '../../../hooks';
  16 import InviteLocaleSelector from './InviteLocaleSelector';
  17
  18 interface Props {
  19     calendarUserSettings: CalendarUserSettings;
  20     locales: TtagLocaleMap;
  21 }
  22
  23 const CalendarInvitationsSection = ({ calendarUserSettings: { InviteLocale, AutoImportInvite }, locales }: Props) => {
  24     const api = useApi();
  25     const { call } = useEventManager();
  26     const { createNotification } = useNotifications();
  27
  28     const [loadingInviteLocale, withLoadingInviteLocale] = useLoading();
  29     const [loadingAutoImportInvite, withLoadingAutoImportInvite] = useLoading();
  30
  31     const handleChange = async (data: Partial<CalendarUserSettings>) => {
  32         await api(updateCalendarUserSettings(data));
  33         await call();
  34         createNotification({ text: c('Success').t`Preference saved` });
  35     };
  36
  37     const displayedLocale = InviteLocale === null ? null : getClosestLocaleCode(InviteLocale, locales);
  38
  39     return (
  40         <SettingsSection>
  41             <SettingsLayout>
  42                 <SettingsLayoutLeft>
  43                     <label className="text-semibold" htmlFor="invite-locale" id="label-invite-local">
  44                         {
  45                             // translator: the full sentence will be "Send invites in [LANGUAGE]", where [LANGUAGE] is a dropdown with language options. E.g. "Send invites in [ENGLISH]"
  46                             c('Label').t`Send in`
  47                         }{' '}
  48                         <Info
  49                             buttonClass="ml-2 inline-flex"
  50                             title={c('Info').t`Event invitations and RSVPs will be sent in this language.`}
  51                         />
  52                     </label>
  53                 </SettingsLayoutLeft>
  54                 <SettingsLayoutRight>
  55                     <InviteLocaleSelector
  56                         id="invite-locale"
  57                         aria-describedby="label-invite-local"
  58                         locale={displayedLocale}
  59                         locales={locales}
  60                         loading={loadingInviteLocale}
  61                         onChange={(InviteLocale) => withLoadingInviteLocale(handleChange({ InviteLocale }))}
  62                     />
  63                 </SettingsLayoutRight>
  64             </SettingsLayout>
  65             <SettingsLayout>
  66                 <SettingsLayoutLeft>
  67                     <label className="text-semibold inline-block" htmlFor="auto-import-invitations">
  68                         <span>{c('Auto import invitations setting').jt`Add to calendar and mark as pending`}</span>
  69                         <Info
  70                             buttonClass="ml-2 inline-flex"
  71                             title={c('Info')
  72                                 .t`You still need to reply to invitations for the host to see your response.`}
  73                         />
  74                     </label>
  75                 </SettingsLayoutLeft>
  76                 <SettingsLayoutRight isToggleContainer>
  77                     <Toggle
  78                         id="auto-import-invitations"
  79                         aria-describedby="auto-import-invitations"
  80                         loading={loadingAutoImportInvite}
  81                         checked={!!AutoImportInvite}
  82                         onChange={({ target }) =>
  83                             withLoadingAutoImportInvite(
  84                                 handleChange({
  85                                     AutoImportInvite: +target.checked,
  86                                 })
  87                             )
  88                         }
  89                     />
  90                 </SettingsLayoutRight>
  91             </SettingsLayout>
  92         </SettingsSection>
  93     );
  94 };
  95
  96 export default CalendarInvitationsSection;