packages/components/containers/members/multipleUserCreation/MultiUserCreationSection.tsx

   1 import { useMemo, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { useCustomDomains } from '@proton/account/domains/hooks';
   6 import { useMembers } from '@proton/account/members/hooks';
   7 import { Button } from '@proton/atoms';
   8 import useModalState from '@proton/components/components/modalTwo/useModalState';
   9 import Tooltip from '@proton/components/components/tooltip/Tooltip';
  10 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  11 import SettingsSectionWide from '@proton/components/containers/account/SettingsSectionWide';
  12 import type { APP_NAMES } from '@proton/shared/lib/constants';
  13 import { CreateMemberMode } from '@proton/shared/lib/interfaces';
  14 import { getIsDomainActive } from '@proton/shared/lib/organization/helper';
  15 import { useFlag } from '@proton/unleash';
  16
  17 import CreateUserAccountsModal from './CreateUserAccountsModal/CreateUserAccountsModal';
  18 import UploadCSVFileButton from './UploadCSVFileButton';
  19 import type { CsvConfig } from './csv';
  20 import { downloadSampleCSV } from './csv';
  21 import type { UserTemplate } from './types';
  22
  23 const defaultCsvConfig: Omit<CsvConfig, 'mode'> = {
  24     multipleAddresses: true,
  25     includeStorage: true,
  26     includeVpnAccess: true,
  27     includePrivateSubUser: true,
  28 };
  29
  30 const MultiUserCreationSection = ({ app }: { app: APP_NAMES }) => {
  31     const [customDomains = []] = useCustomDomains();
  32     const [usersToImport, setUsersToImport] = useState<UserTemplate[]>();
  33     const [members] = useMembers();
  34     const [createUserAccountsModal, setCreateUserAccountsModal, renderCreateUserAccountsModal] = useModalState();
  35     const isMagicLinkEnabled = useFlag('MagicLink');
  36     const mode = isMagicLinkEnabled ? CreateMemberMode.Invitation : CreateMemberMode.Password;
  37
  38     const csvConfig = {
  39         ...defaultCsvConfig,
  40         mode,
  41     };
  42
  43     const verifiedDomains = useMemo(() => (customDomains || []).filter(getIsDomainActive), [customDomains]);
  44
  45     const onCSVFileUpload = (usersToImport: UserTemplate[]) => {
  46         setUsersToImport(usersToImport);
  47         setCreateUserAccountsModal(true);
  48     };
  49
  50     const handleDownloadClick = () => {
  51         downloadSampleCSV(csvConfig);
  52     };
  53
  54     return (
  55         <>
  56             {renderCreateUserAccountsModal && usersToImport && (
  57                 <CreateUserAccountsModal
  58                     mode={mode}
  59                     members={members}
  60                     usersToImport={usersToImport}
  61                     app={app}
  62                     verifiedDomains={verifiedDomains}
  63                     {...createUserAccountsModal}
  64                     expectedCsvConfig={csvConfig}
  65                 />
  66             )}
  67             <SettingsSectionWide>
  68                 <SettingsParagraph>{c('Info').t`Add multiple users to your organization at once.`}</SettingsParagraph>
  69                 <SettingsParagraph className="mb-4">
  70                     {c('Info')
  71                         .t`Download our CSV template, fill in the user details, and then upload your completed CSV file to create accounts for these users.`}
  72                 </SettingsParagraph>
  73
  74                 <div className="flex flex-rows gap-4">
  75                     {verifiedDomains.length === 0 ? (
  76                         <Tooltip
  77                             title={c('familyOffer_2023:Family plan')
  78                                 .t`You need to configure a custom domain before adding multiple users.`}
  79                         >
  80                             <span>
  81                                 <Button disabled>{c('Select file').t`Upload CSV file`}</Button>
  82                             </span>
  83                         </Tooltip>
  84                     ) : (
  85                         <UploadCSVFileButton onUpload={onCSVFileUpload} color="norm" csvConfig={csvConfig} />
  86                     )}
  87                     <Button onClick={handleDownloadClick}>{c('Action').t`Download CSV sample`}</Button>
  88                 </div>
  89             </SettingsSectionWide>
  90         </>
  91     );
  92 };
  93
  94 export default MultiUserCreationSection;