applications/drive/src/app/components/modals/DeleteLockedVolumesConfirmModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c, msgid } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import type { ModalStateProps } from '@proton/components';
   7 import {
   8     Alert,
   9     Checkbox,
  10     ModalTwo,
  11     ModalTwoContent,
  12     ModalTwoFooter,
  13     ModalTwoHeader,
  14     useModalTwoStatic,
  15 } from '@proton/components';
  16 import { useLoading } from '@proton/hooks';
  17 import { DRIVE_APP_NAME } from '@proton/shared/lib/constants';
  18 import noop from '@proton/utils/noop';
  19
  20 interface Props {
  21     onClose?: () => void;
  22     onSubmit: () => Promise<unknown>;
  23     volumeCount: number;
  24 }
  25
  26 const DeleteLockedVolumesConfirmModal = ({
  27     onClose = noop,
  28     onSubmit,
  29     volumeCount,
  30     ...modalProps
  31 }: Props & ModalStateProps) => {
  32     const [isChecked, setIsChecked] = useState(false);
  33     const [isLoading, withLoading] = useLoading();
  34
  35     const modalTitle = c('Label').ngettext(msgid`Delete drive?`, `Delete drives?`, volumeCount);
  36
  37     const warningTitle = c('Label').t`This will permanently delete all files in your locked drive.`;
  38     const warningInfo = c('Info')
  39         .t`Note: data may still be available locally on devices where you have installed ${DRIVE_APP_NAME}.`;
  40     const confirmationText = c('Label').t`Yes, I want to permanently delete my old files`;
  41
  42     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  43         setIsChecked(e.target.checked);
  44     };
  45
  46     const handleSubmit = (e: React.FormEvent) => {
  47         e.preventDefault();
  48         return withLoading(onSubmit());
  49     };
  50     return (
  51         <ModalTwo
  52             onClose={onClose}
  53             size="small"
  54             as="form"
  55             disableCloseOnEscape={isLoading}
  56             onSubmit={handleSubmit}
  57             {...modalProps}
  58         >
  59             <ModalTwoHeader title={modalTitle} />
  60             <ModalTwoContent>
  61                 <Alert type="warning" className="mb-8">
  62                     <span>
  63                         <strong>{warningTitle}</strong>
  64                     </span>
  65                 </Alert>
  66                 <p>{warningInfo}</p>
  67                 <Checkbox onChange={handleChange}>{confirmationText}</Checkbox>
  68             </ModalTwoContent>
  69             <ModalTwoFooter>
  70                 <Button type="button" onClick={onClose}>
  71                     {c('Action').t`Back`}
  72                 </Button>
  73                 <Button color="danger" type="submit" disabled={!isChecked} loading={isLoading}>
  74                     {c('Action').t`Delete`}
  75                 </Button>
  76             </ModalTwoFooter>
  77         </ModalTwo>
  78     );
  79 };
  80
  81 export default DeleteLockedVolumesConfirmModal;
  82
  83 export const useDeleteLockedVolumesConfirmModal = () => {
  84     return useModalTwoStatic(DeleteLockedVolumesConfirmModal);
  85 };