import { User } from '../../../../../../types/group-management/user' import { Alert, Button, ControlLabel, Form, FormControl, FormGroup, Modal, } from 'react-bootstrap' import AccessibleModal from '../../../../shared/components/accessible-modal' import Icon from '../../../../shared/components/icon' import { useState } from 'react' import useAsync from '../../../../shared/hooks/use-async' import { useTranslation } from 'react-i18next' import { useLocation } from '../../../../shared/hooks/use-location' import { FetchError, postJSON } from '../../../../infrastructure/fetch-json' type OffboardManagedUserModalProps = { user: User allMembers: User[] groupId: string onClose: () => void } export default function OffboardManagedUserModal({ user, allMembers, groupId, onClose, }: OffboardManagedUserModalProps) { const { t } = useTranslation() const location = useLocation() const [selectedRecipientId, setSelectedRecipientId] = useState() const [suppliedEmail, setSuppliedEmail] = useState() const [error, setError] = useState() const { isLoading, isSuccess, runAsync } = useAsync() const otherMembers = allMembers.filter(u => u._id !== user._id && !u.invite) const userFullName = user.last_name ? `${user.first_name || ''} ${user.last_name || ''}` : user.first_name const shouldEnableDeleteUserButton = suppliedEmail === user.email && !!selectedRecipientId const handleDeleteUserSubmit = (event: any) => { event.preventDefault() runAsync( postJSON(`/manage/groups/${groupId}/offboardManagedUser/${user._id}`, { body: { verificationEmail: suppliedEmail, transferProjectsToUserId: selectedRecipientId, }, }) .then(() => { location.reload() }) .catch(err => { console.error(err) setError( err instanceof FetchError ? err.getUserFacingMessage() : err.message ) }) ) } return (
{t('delete_user')}

{t('about_to_delete_user_preamble', { userName: userFullName, userEmail: user.email, })}

  • {t('they_lose_access_to_account')}
  • {t('their_projects_will_be_transferred_to_another_user')}
  • {t('you_will_be_able_to_reassign_subscription')}

{t('this_action_cannot_be_reversed')}   {t('learn_more_about_managed_users')}

{t('transfer_this_users_projects')}

{t('transfer_this_users_projects_description')}

{t('select_a_new_owner_for_projects')} ) => setSelectedRecipientId(e.target.value) } > {otherMembers.map(member => ( ))}

{t('all_projects_will_be_transferred_immediately')}

{t('confirm_delete_user_type_email_address', { userName: userFullName, })} ) => setSuppliedEmail(e.target.value) } /> {error && {error}}
) }