packages/components/containers/organization/OrganizationTwoFAHeader.tsx

   1 import { c, msgid } from 'ttag';
   2
   3 import { useMembers } from '@proton/account/members/hooks';
   4 import { Card } from '@proton/atoms';
   5 import Loader from '@proton/components/components/loader/Loader';
   6 import type { Organization } from '@proton/shared/lib/interfaces';
   7 import { getOrganizationDenomination } from '@proton/shared/lib/organization/helper';
   8
   9 interface Props {
  10     organization?: Organization;
  11 }
  12
  13 const OrganizationTwoFAHeader = ({ organization }: Props) => {
  14     const [members] = useMembers();
  15     const hasFamilyOrg = getOrganizationDenomination(organization) === 'familyGroup';
  16
  17     if (!organization || !members) {
  18         return <Loader />;
  19     }
  20
  21     const twoFAMembers = members.filter((member) => member['2faStatus'] !== 0) || [];
  22
  23     // translator: the variables here are numbers, e.g. "2/4 of your organization members use two-factor authentication."
  24     const cardContentB2B = c('Loading info').ngettext(
  25         msgid`${twoFAMembers.length}/${members.length} of your organization member use two-factor authentication.`,
  26         `${twoFAMembers.length}/${members.length} of your organization members use two-factor authentication.`,
  27         members.length
  28     );
  29
  30     // translator: the variables here are numbers, e.g. "2/4 of your family members use two-factor authentication."
  31     const cardContentFamily = c('Loading info').ngettext(
  32         msgid`${twoFAMembers.length}/${members.length} of your organization member use two-factor authentication.`,
  33         `${twoFAMembers.length}/${members.length} of your family members use two-factor authentication.`,
  34         members.length
  35     );
  36
  37     const cardContent = hasFamilyOrg ? cardContentFamily : cardContentB2B;
  38
  39     return (
  40         <Card rounded background bordered={false} className="max-w-custom" style={{ '--max-w-custom': '43em' }}>
  41             {cardContent}
  42         </Card>
  43     );
  44 };
  45
  46 export default OrganizationTwoFAHeader;