packages/components/containers/members/InviteUserCreateSubUserModal.tsx

   1 import { c } from 'ttag';
   2
   3 import { useCustomDomains } from '@proton/account/domains/hooks';
   4 import { Button } from '@proton/atoms';
   5 import type { ModalStateProps } from '@proton/components/components/modalTwo/useModalState';
   6 import useModalState from '@proton/components/components/modalTwo/useModalState';
   7 import Prompt from '@proton/components/components/prompt/Prompt';
   8 import Tooltip from '@proton/components/components/tooltip/Tooltip';
   9 import { getInviteLimit } from '@proton/components/containers/members/UsersAndAddressesSection/helper';
  10 import { PLAN_NAMES } from '@proton/payments';
  11 import type { APP_NAMES } from '@proton/shared/lib/constants';
  12 import { BRAND_NAME } from '@proton/shared/lib/constants';
  13 import type { Domain, EnhancedMember, Organization } from '@proton/shared/lib/interfaces';
  14 import { isOrganizationFamily, isOrganizationPassFamily } from '@proton/shared/lib/organization/helper';
  15
  16 import SubUserCreateModal from './SubUserCreateModal';
  17
  18 interface Props extends ModalStateProps {
  19     members: EnhancedMember[] | undefined;
  20     organization?: Organization;
  21     verifiedDomains: Domain[];
  22     onInviteUser: () => void;
  23     allowAIAssistantConfiguration: boolean;
  24     aiSeatsRemaining: boolean;
  25     app: APP_NAMES;
  26 }
  27
  28 interface ButtonProps {
  29     onClick: () => void;
  30 }
  31
  32 const AddUserButton = ({ onClick }: ButtonProps) => {
  33     const [customDomains = []] = useCustomDomains();
  34
  35     if (customDomains.length === 0) {
  36         return (
  37             <Tooltip
  38                 title={c('familyOffer_2023:Family plan')
  39                     .t`You need to configure a custom domain before creating a new user.`}
  40             >
  41                 <div className="w-full">
  42                     <Button disabled fullWidth>{c('familyOffer_2023:Action').t`Create a new user`}</Button>
  43                 </div>
  44             </Tooltip>
  45         );
  46     }
  47
  48     return <Button onClick={onClick} fullWidth>{c('familyOffer_2023:Action').t`Create a new user`}</Button>;
  49 };
  50
  51 interface InviteButtonProps {
  52     organization?: Organization;
  53 }
  54
  55 const InviteProtonUserButton = ({ onClick, organization }: ButtonProps & InviteButtonProps) => {
  56     if (organization && organization.InvitationsRemaining === 0) {
  57         const tooltip =
  58             isOrganizationFamily(organization) || isOrganizationPassFamily(organization)
  59                 ? getInviteLimit(10)
  60                 : getInviteLimit(3);
  61
  62         return (
  63             <Tooltip title={tooltip}>
  64                 <div className="w-full">
  65                     <Button disabled fullWidth>{c('familyOffer_2023:Action')
  66                         .t`Invite an existing ${BRAND_NAME} user`}</Button>
  67                 </div>
  68             </Tooltip>
  69         );
  70     }
  71
  72     return (
  73         <Button fullWidth onClick={onClick} color="norm">{c('familyOffer_2023:Action')
  74             .t`Invite an existing ${BRAND_NAME} user`}</Button>
  75     );
  76 };
  77
  78 const InviteUserCreateSubUserModal = ({
  79     members,
  80     organization,
  81     verifiedDomains,
  82     onInviteUser,
  83     app,
  84     allowAIAssistantConfiguration,
  85     aiSeatsRemaining,
  86     ...modalState
  87 }: Props) => {
  88     const [subUserCreateModalProps, setSubUserCreateModalOpen, renderSubUserCreateModal] = useModalState();
  89
  90     const handleAddUser = () => {
  91         setSubUserCreateModalOpen(true);
  92     };
  93
  94     const handleInviteUser = () => {
  95         modalState.onClose();
  96         onInviteUser();
  97     };
  98
  99     return (
 100         <>
 101             <Prompt
 102                 title={c('familyOffer_2023:Title').t`Add a user to your ${PLAN_NAMES.visionary2022} account`}
 103                 buttons={[
 104                     <InviteProtonUserButton onClick={handleInviteUser} organization={organization} />,
 105                     <AddUserButton onClick={handleAddUser} />,
 106                     <Button fullWidth onClick={modalState.onClose} shape="ghost">{c('Action').t`Cancel`}</Button>,
 107                 ]}
 108                 {...modalState}
 109             >
 110                 <p>{c('familyOffer_2023:Info').t`To create a new user, a configured custom domain is required.`}</p>
 111             </Prompt>
 112             {renderSubUserCreateModal && organization && verifiedDomains?.length > 0 && (
 113                 <SubUserCreateModal
 114                     members={members}
 115                     aiSeatsRemaining={aiSeatsRemaining}
 116                     organization={organization}
 117                     verifiedDomains={verifiedDomains}
 118                     {...subUserCreateModalProps}
 119                     onClose={() => modalState.onClose()}
 120                     allowStorageConfiguration
 121                     allowVpnAccessConfiguration
 122                     allowPrivateMemberConfiguration
 123                     allowAIAssistantConfiguration={allowAIAssistantConfiguration}
 124                     app={app}
 125                 />
 126             )}
 127         </>
 128     );
 129 };
 130
 131 export default InviteUserCreateSubUserModal;