packages/components/containers/security/PromptPinToggle.tsx

   1 import type { ChangeEvent } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import Toggle from '@proton/components/components/toggle/Toggle';
   6 import useApi from '@proton/components/hooks/useApi';
   7 import useEventManager from '@proton/components/hooks/useEventManager';
   8 import useNotifications from '@proton/components/hooks/useNotifications';
   9 import useLoading from '@proton/hooks/useLoading';
  10 import { useMailSettings } from '@proton/mail/mailSettings/hooks';
  11 import { updatePromptPin } from '@proton/shared/lib/api/mailSettings';
  12 import { DEFAULT_MAILSETTINGS } from '@proton/shared/lib/mail/mailSettings';
  13
  14 interface Props {
  15     id?: string;
  16 }
  17
  18 const PromptPinToggle = ({ id }: Props) => {
  19     const { createNotification } = useNotifications();
  20     const { call } = useEventManager();
  21     const api = useApi();
  22     const [loading, withLoading] = useLoading();
  23     const [{ PromptPin } = DEFAULT_MAILSETTINGS] = useMailSettings();
  24
  25     const handleChange = async ({ target }: ChangeEvent<HTMLInputElement>) => {
  26         await api(updatePromptPin(+target.checked));
  27         await call();
  28         createNotification({ text: c('Success').t`Preference saved` });
  29     };
  30
  31     return <Toggle id={id} loading={loading} checked={!!PromptPin} onChange={(e) => withLoading(handleChange(e))} />;
  32 };
  33
  34 export default PromptPinToggle;