packages/components/containers/b2bDashboard/VPN/TogglingMonitoringModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   5 import Prompt from '@proton/components/components/prompt/Prompt';
   6
   7 interface Props extends ModalProps {
   8     enabling: boolean;
   9     onChange?: () => void;
  10 }
  11
  12 const TogglingMonitoringModal = ({ enabling, onChange, ...rest }: Props) => {
  13     const { onClose } = rest;
  14
  15     const disableButtons: [JSX.Element, JSX.Element] = [
  16         <Button color={enabling ? 'norm' : 'danger'} onClick={onChange}>
  17             {enabling ? c('Action').t`Got it` : c('Action').t`Disable`}
  18         </Button>,
  19         <Button color="weak" onClick={onClose}>
  20             {c('Action').t`Cancel`}
  21         </Button>,
  22     ];
  23
  24     const enableButtons: [JSX.Element] = [
  25         <Button color={enabling ? 'norm' : 'danger'} onClick={onChange}>
  26             {enabling ? c('Action').t`Got it` : c('Action').t`Disable`}
  27         </Button>,
  28     ];
  29
  30     return (
  31         <Prompt
  32             title={enabling ? c('Title').t`Gateway monitor enabled` : c('Title').t`Gateway monitor disabled`}
  33             buttons={enabling ? enableButtons : disableButtons}
  34             {...rest}
  35         >
  36             {enabling === true ? (
  37                 <span>{c('Info').t`Connection data will be available in around 1 hour.`}</span>
  38             ) : (
  39                 <span>{c('Info').t`New VPN connection data will stop being collected and shown.`}</span>
  40             )}
  41         </Prompt>
  42     );
  43 };
  44
  45 export default TogglingMonitoringModal;