packages/components/containers/recovery/RecoverDataConfirmModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import SettingsLink from '@proton/components/components/link/SettingsLink';
   7 import type { PromptProps } from '@proton/components/components/prompt/Prompt';
   8 import Prompt from '@proton/components/components/prompt/Prompt';
   9 import { FeatureCode, useFeature } from '@proton/features';
  10
  11 const RecoverDataConfirmModal = (props: Omit<PromptProps, 'open' | 'title' | 'buttons' | 'children'>) => {
  12     const [dismissing, setDismissing] = useState(false);
  13     const { update: setDismissedRecoverDataCard } = useFeature(FeatureCode.DismissedRecoverDataCard);
  14
  15     const boldDataLocked = (
  16         <b key="data-locked-bold-text">{
  17             // translator: Full sentence is 'The Data locked message will no longer be shown, but you can still unlock your data under Encryption and keys.'
  18             c('Info').t`Data locked`
  19         }</b>
  20     );
  21
  22     const encryptionAndKeysLink = (
  23         <SettingsLink path="/encryption-keys" key="link">{
  24             // translator: Full sentence is 'The Data locked message will no longer be shown, but you can still unlock your data under Encryption and keys.'
  25             c('Link').t`Encryption and keys`
  26         }</SettingsLink>
  27     );
  28
  29     return (
  30         <Prompt
  31             {...props}
  32             title={c('Title').t`Don't show again?`}
  33             buttons={[
  34                 <Button
  35                     color="danger"
  36                     onClick={async () => {
  37                         setDismissing(true);
  38                         await setDismissedRecoverDataCard(true);
  39                         setDismissing(false);
  40                         props.onClose?.();
  41                     }}
  42                     loading={dismissing}
  43                 >
  44                     {c('Action').t`Don't show again`}
  45                 </Button>,
  46                 <Button onClick={props.onClose}>{c('Action').t`Cancel`}</Button>,
  47             ]}
  48         >
  49             <p>
  50                 {
  51                     // translator: Full sentence is 'The Data locked message will no longer be shown, but you can still unlock your data under Encryption and keys.'
  52                     c('Info')
  53                         .jt`The ${boldDataLocked} message will no longer be shown, but you can still unlock your data under ${encryptionAndKeysLink}.`
  54                 }
  55             </p>
  56         </Prompt>
  57     );
  58 };
  59
  60 export default RecoverDataConfirmModal;