packages/components/containers/recovery/phone/ConfirmRemovePhoneModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Alert from '@proton/components/components/alert/Alert';
   5 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   6 import Modal from '@proton/components/components/modalTwo/Modal';
   7 import ModalContent from '@proton/components/components/modalTwo/ModalContent';
   8 import ModalFooter from '@proton/components/components/modalTwo/ModalFooter';
   9 import ModalHeader from '@proton/components/components/modalTwo/ModalHeader';
  10
  11 interface Props extends ModalProps {
  12     onConfirm: () => void;
  13 }
  14
  15 const ConfirmRemovePhoneModal = ({ onConfirm, onClose, ...rest }: Props) => {
  16     return (
  17         <Modal onClose={onClose} {...rest}>
  18             <ModalHeader title={c('Title').t`Confirm phone number`} />
  19             <ModalContent>
  20                 <Alert type="warning">
  21                     {c('Warning').t`By deleting this phone number, you will no longer be able to recover your account.`}
  22                     <br />
  23                     <br />
  24                     {c('Warning').t`Are you sure you want to delete the phone number?`}
  25                 </Alert>
  26             </ModalContent>
  27             <ModalFooter>
  28                 <Button onClick={onClose}>{c('Action').t`Cancel`}</Button>
  29                 <Button
  30                     color="norm"
  31                     onClick={() => {
  32                         onConfirm();
  33                         onClose?.();
  34                     }}
  35                 >
  36                     {c('Action').t`Confirm`}
  37                 </Button>
  38             </ModalFooter>
  39         </Modal>
  40     );
  41 };
  42
  43 export default ConfirmRemovePhoneModal;