packages/components/containers/addresses/AddressStatus.tsx

   1 import { c } from 'ttag';
   2
   3 import Badge from '@proton/components/components/badge/Badge';
   4 import Tooltip from '@proton/components/components/tooltip/Tooltip';
   5 import clsx from '@proton/utils/clsx';
   6 import isTruthy from '@proton/utils/isTruthy';
   7
   8 import type { AddressStatuses } from './helper';
   9
  10 const AddressStatus = ({
  11     isDefault,
  12     isActive,
  13     isDisabled,
  14     isOrphan,
  15     isMissingKeys,
  16     isExternal,
  17     isNotEncrypted,
  18     isSignatureNotExpected,
  19 }: Partial<AddressStatuses>) => {
  20     const list = [
  21         isDefault &&
  22             ({
  23                 text: c('Address status').t`Default`,
  24                 type: 'primary',
  25             } as const),
  26         isExternal &&
  27             ({
  28                 text: c('Address status').t`External`,
  29                 type: 'info',
  30             } as const),
  31         isActive &&
  32             ({
  33                 text: c('Address status').t`Active`,
  34                 type: 'success',
  35             } as const),
  36         isDisabled &&
  37             ({
  38                 text: c('Address status').t`Disabled`,
  39                 type: 'light',
  40             } as const),
  41         isOrphan &&
  42             ({
  43                 text: c('Address status').t`Orphan`,
  44                 type: 'origin',
  45             } as const),
  46         isMissingKeys &&
  47             ({
  48                 text: c('Address status').t`Inactive`,
  49                 type: 'light',
  50                 tooltip: c('Tooltip').t`This can be caused by a password reset or the user not logging in yet.`,
  51             } as const),
  52         isNotEncrypted &&
  53             ({
  54                 // translator: E2EE stands for end-to-end encryption. If possible, keep the abbreviation as the UI will be best with a short translated string.
  55                 text: c('Address status').t`No E2EE mail`,
  56                 type: 'error',
  57             } as const),
  58         isSignatureNotExpected &&
  59             ({
  60                 text: c('Address status').t`Allow unsigned mail`,
  61                 type: 'error',
  62             } as const),
  63     ]
  64         .filter(isTruthy)
  65         .map(({ text, type, tooltip }) => {
  66             const addresssBadge = (
  67                 <Badge key={text} type={type} className={clsx('mr-1 mb-1', tooltip && 'cursor-default')}>
  68                     {text}
  69                 </Badge>
  70             );
  71
  72             if (tooltip) {
  73                 return (
  74                     <Tooltip title={tooltip} key={text}>
  75                         <span>{addresssBadge}</span>
  76                     </Tooltip>
  77                 );
  78             }
  79
  80             return addresssBadge;
  81         });
  82
  83     return <>{list}</>;
  84 };
  85 export default AddressStatus;