import { c } from 'ttag' ; import { Button , Href , SettingsLink } from '@proton/components' ; import * as React from 'react' ; import Icon from '@proton/components/components/icon/Icon' ; import { APPS } from '@proton/shared/lib/constants' ; import { reActivateKeySettingsURL , restoringEncryptedMessagesURL } from '../../constants' ; interface Props { onDiscard : ( ) => void ; keyFound ? : boolean ; } const DecryptionErrorNotification = ( { onDiscard , keyFound = false } ) => { const getNotificationText = ( ) => { const learnMoreLink = ( < Href key = "learn-more-link" url = { restoringEncryptedMessagesURL } className = "text-bold link align-baseline color-inherit" > { c ( 'Action' ) . t `Learn more` } < /Href>); if ( keyFound ) { const reActivateKeyLink = ( < SettingsLink key = "re-activate-link" path = { reActivateKeySettingsURL } className = "text-bold link align-baseline color-inherit" app = { APPS . PROTONMAIL } > { c ( 'Error' ) . t `re-activate the previous key` } < /SettingsLink>); return c ( 'Error' ) . jt `Your emails cannot be decrypted due to a recent password reset. If you remember your previous password, you can ${ reActivateKeyLink } in order to access your messages. ${ learnMoreLink }` ; } return c ( 'Error' ) . jt `Your emails cannot be decrypted. This may be due to a password reset. ${ learnMoreLink }` ; } ; return ( < > < div className = "flex flex-nowrap text-center relative" > < span className = "flex-item-fluid" > { getNotificationText ( ) } < /span> < /div> < Button icon size = "small" shape = "ghost" className = " top-right absolute" onClick = { onDiscard } title = { c ( 'Action' ) . t `Close this banner` } > < Icon name = "xmark" alt = { c ( 'Action' ) . t `Close this banner` } / > < /Button> < />); } ; export default DecryptionErrorNotification ;