New Feature : Allow inviting new users from the card assignment dialog

src/CONST/index.ts

@@ -3197,6 +3197,7 @@ const CONST = {
             BANK_CONNECTION: 'BankConnection',
             PLAID_CONNECTION: 'PlaidConnection',
             ASSIGNEE: 'Assignee',
+            INVITE_NEW_MEMBER: 'InviteNewMember',
             CARD: 'Card',
             CARD_NAME: 'CardName',
             TRANSACTION_START_DATE: 'TransactionStartDate',
@@ -3240,6 +3241,7 @@ const CONST = {
         ASSIGNEE_EXCLUDED_STEP_NAMES: ['1', '2', '3', '4', '5'],
         STEP: {
             ASSIGNEE: 'Assignee',
+            INVITE_NEW_MEMBER: 'InviteNewMember',
             CARD_TYPE: 'CardType',
             LIMIT_TYPE: 'LimitType',
             LIMIT: 'Limit',

src/components/InviteNewMemberStepComponent.tsx

@@ -0,0 +1,199 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {Keyboard, View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {clearDraftValues} from '@libs/actions/FormActions';
+import {addMembersToWorkspace, clearWorkspaceInviteRoleDraft} from '@libs/actions/Policy/Member';
+import {setWorkspaceInviteMessageDraft} from '@libs/actions/Policy/Policy';
+import Navigation from '@libs/Navigation/Navigation';
+import {getAvatarsForAccountIDs} from '@libs/OptionsListUtils';
+import {getMemberAccountIDsForWorkspace} from '@libs/PolicyUtils';
+import updateMultilineInputRange from '@libs/updateMultilineInputRange';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/WorkspaceInviteMessageForm';
+import type * as OnyxTypes from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import FormProvider from './Form/FormProvider';
+import InputWrapper from './Form/InputWrapper';
+import InteractiveStepWrapper from './InteractiveStepWrapper';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import MultipleAvatars from './MultipleAvatars';
+import type {AnimatedTextInputRef} from './RNTextInput';
+import Text from './Text';
+import TextInput from './TextInput';
+
+type InviteNewMemberStepComponentProps = {
+    // The title of the header
+    title: string;
+
+    // The function to call when the back button is pressed
+    handleBackButtonPress: () => void;
+
+    // Whether the user is editing step
+    isEditing?: boolean;
+
+    // The email address of the assignee
+    assigneeEmail: string | undefined;
+
+    // The name of the step
+    stepNames: string[];
+
+    // The account ID of the cardholder
+    assigneeAccountID: number | undefined;
+
+    // The policy that the card will be issued under
+    policy: OnyxEntry<OnyxTypes.Policy>;
+
+    // The function to call when the user wants to go to the next step
+    goToNextStep: () => void;
+};
+function InviteNewMemberStepComponent({title, handleBackButtonPress, isEditing, assigneeEmail, assigneeAccountID, policy, goToNextStep, stepNames}: InviteNewMemberStepComponentProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const policyID = policy?.id;
+    const [welcomeNote, setWelcomeNote] = useState<string>();
+    const {inputCallbackRef, inputRef} = useAutoFocusInput();
+    const [workspaceInviteRoleDraft = CONST.POLICY.ROLE.USER] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_ROLE_DRAFT}${policyID}`, {canBeMissing: true});
+    const [workspaceInviteMessageDraft, workspaceInviteMessageDraftResult] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MESSAGE_DRAFT}${policyID}`, {canBeMissing: true});
+    const [formData, formDataResult] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM_DRAFT, {canBeMissing: true});
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const [allPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
+    const isOnyxLoading = isLoadingOnyxValue(workspaceInviteMessageDraftResult, formDataResult);
+
+    const getDefaultWelcomeNote = useCallback(() => {
+        return (
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            formData?.[INPUT_IDS.WELCOME_MESSAGE] ??
+            // workspaceInviteMessageDraft can be an empty string
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            workspaceInviteMessageDraft ??
+            translate('workspace.common.welcomeNote')
+        );
+    }, [workspaceInviteMessageDraft, translate, formData]);
+
+    const welcomeNoteSubject = useMemo(
+        () => `# ${currentUserPersonalDetails?.displayName ?? ''} invited you to ${policy?.name ?? 'a workspace'}`,
+        [policy?.name, currentUserPersonalDetails?.displayName],
+    );
+
+    useEffect(() => {
+        if (isOnyxLoading) {
+            return;
+        }
+
+        if (!isEmptyObject(assigneeEmail)) {
+            setWelcomeNote(getDefaultWelcomeNote());
+        }
+    }, [assigneeEmail, getDefaultWelcomeNote, isOnyxLoading]);
+
+    const sendInvitationAndGoToNextStep = () => {
+        Keyboard.dismiss();
+        const policyMemberAccountIDs = Object.values(getMemberAccountIDsForWorkspace(policy?.employeeList, false, false));
+        // Please see https://github.com/Expensify/App/blob/main/README.md#Security for more details
+        addMembersToWorkspace(
+            {
+                [assigneeEmail ?? '']: assigneeAccountID ?? CONST.DEFAULT_NUMBER_ID,
+            },
+            `${welcomeNoteSubject}\n\n${welcomeNote}`,
+            policyID,
+            policyMemberAccountIDs,
+            workspaceInviteRoleDraft,
+        );
+        setWorkspaceInviteMessageDraft(policyID, welcomeNote ?? null);
+        clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM);
+
+        goToNextStep();
+    };
+
+    useEffect(() => {
+        return () => {
+            clearWorkspaceInviteRoleDraft(policyID);
+        };
+    }, [policyID]);
+
+    return (
+        <InteractiveStepWrapper
+            wrapperID={InviteNewMemberStepComponent.displayName}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+            headerTitle={title}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={0}
+            stepNames={stepNames}
+            enableEdgeToEdgeBottomSafeAreaPadding
+        >
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.invite.inviteNewMember')}</Text>
+            <FormProvider
+                formID={ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM}
+                submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+                onSubmit={sendInvitationAndGoToNextStep}
+                style={[styles.mh5, styles.flexGrow1]}
+                enabledWhenOffline
+                shouldHideFixErrorsAlert
+                addBottomSafeAreaPadding
+            >
+                <View style={[styles.mv4, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                    <MultipleAvatars
+                        size={CONST.AVATAR_SIZE.LARGE}
+                        icons={getAvatarsForAccountIDs([Number(assigneeAccountID) || 0], allPersonalDetails ?? {}, {})}
+                        shouldStackHorizontally
+                        shouldDisplayAvatarsInRows
+                        secondAvatarStyle={[styles.secondAvatarInline]}
+                    />
+                </View>
+                <View style={[styles.mb5]}>
+                    <Text>{translate('workspace.inviteMessage.inviteMessagePrompt')}</Text>
+                </View>
+                <View style={[styles.mb3]}>
+                    <View style={[styles.mhn5, styles.mb3]}>
+                        <MenuItemWithTopDescription
+                            title={translate(`workspace.common.roleName`, {role: workspaceInviteRoleDraft})}
+                            description={translate('common.role')}
+                            shouldShowRightIcon
+                            onPress={() => {
+                                Navigation.navigate(ROUTES.WORKSPACE_INVITE_MESSAGE_ROLE.getRoute(policyID, Navigation.getActiveRoute()));
+                            }}
+                        />
+                    </View>
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        role={CONST.ROLE.PRESENTATION}
+                        inputID={INPUT_IDS.WELCOME_MESSAGE}
+                        label={translate('workspace.inviteMessage.personalMessagePrompt')}
+                        accessibilityLabel={translate('workspace.inviteMessage.personalMessagePrompt')}
+                        autoCompleteType="off"
+                        autoCorrect={false}
+                        autoGrowHeight
+                        maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
+                        value={welcomeNote}
+                        onChangeText={(text: string) => {
+                            setWelcomeNote(text);
+                        }}
+                        ref={(element: AnimatedTextInputRef) => {
+                            if (!element) {
+                                return;
+                            }
+                            if (!inputRef.current) {
+                                updateMultilineInputRange(element);
+                            }
+                            inputCallbackRef(element);
+                        }}
+                        shouldSaveDraft
+                    />
+                </View>
+            </FormProvider>
+        </InteractiveStepWrapper>
+    );
+}
+
+InviteNewMemberStepComponent.displayName = 'InviteNewMemberStepComponent';
+
+export default InviteNewMemberStepComponent;

src/languages/de.ts

@@ -5223,6 +5223,7 @@ const translations = {
         invite: {
             member: 'Mitglied einladen',
             members: 'Mitglieder einladen',
+            inviteNewMember: 'Neues Mitglied einladen',
             invitePeople: 'Neue Mitglieder einladen',
             genericFailureMessage: 'Beim Einladen des Mitglieds in den Arbeitsbereich ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.',
             pleaseEnterValidLogin: `Bitte stellen Sie sicher, dass die E-Mail-Adresse oder Telefonnummer gültig ist (z. B. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/en.ts

@@ -5204,6 +5204,7 @@ const translations = {
         invite: {
             member: 'Invite member',
             members: 'Invite members',
+            inviteNewMember: 'Invite new member',
             invitePeople: 'Invite new members',
             genericFailureMessage: 'An error occurred while inviting the member to the workspace. Please try again.',
             pleaseEnterValidLogin: `Please ensure the email or phone number is valid (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/es.ts

@@ -5215,6 +5215,7 @@ const translations = {
         invite: {
             member: 'Invitar miembros',
             members: 'Invitar miembros',
+            inviteNewMember: 'Invitar nuevo miembro',
             invitePeople: 'Invitar nuevos miembros',
             genericFailureMessage: 'Se ha producido un error al invitar al miembro al espacio de trabajo. Vuelva a intentarlo.',
             pleaseEnterValidLogin: `Asegúrese de que el correo electrónico o el número de teléfono sean válidos (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/fr.ts

@@ -5237,6 +5237,7 @@ const translations = {
         invite: {
             member: 'Inviter un membre',
             members: 'Inviter des membres',
+            inviteNewMember: 'Inviter un nouveau membre',
             invitePeople: 'Inviter de nouveaux membres',
             genericFailureMessage: "Une erreur s'est produite lors de l'invitation du membre à l'espace de travail. Veuillez réessayer.",
             pleaseEnterValidLogin: `Veuillez vous assurer que l'email ou le numéro de téléphone est valide (par exemple, ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/it.ts

@@ -5236,6 +5236,7 @@ const translations = {
         invite: {
             member: 'Invita membro',
             members: 'Invita membri',
+            inviteNewMember: 'Invita nuovo membro',
             invitePeople: 'Invita nuovi membri',
             genericFailureMessage: "Si è verificato un errore durante l'invito del membro allo spazio di lavoro. Per favore, riprova.",
             pleaseEnterValidLogin: `Assicurati che l'email o il numero di telefono siano validi (ad es. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/ja.ts

@@ -5210,6 +5210,7 @@ const translations = {
         invite: {
             member: 'メンバーを招待',
             members: 'メンバーを招待する',
+            inviteNewMember: '新しいメンバーを招待する',
             invitePeople: '新しいメンバーを招待する',
             genericFailureMessage: 'メンバーをワークスペースに招待する際にエラーが発生しました。もう一度お試しください。',
             pleaseEnterValidLogin: `メールアドレスまたは電話番号が有効であることを確認してください（例: ${CONST.EXAMPLE_PHONE_NUMBER}）。`,

src/languages/nl.ts

@@ -5236,6 +5236,7 @@ const translations = {
         invite: {
             member: 'Lid uitnodigen',
             members: 'Leden uitnodigen',
+            inviteNewMember: 'Nieuw lid uitnodigen',
             invitePeople: 'Nieuwe leden uitnodigen',
             genericFailureMessage: 'Er is een fout opgetreden bij het uitnodigen van het lid voor de werkruimte. Probeer het alstublieft opnieuw.',
             pleaseEnterValidLogin: `Zorg ervoor dat het e-mailadres of telefoonnummer geldig is (bijv. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/pl.ts

@@ -5224,6 +5224,7 @@ const translations = {
         invite: {
             member: 'Zaproś członka',
             members: 'Zaproś członków',
+            inviteNewMember: 'Zaproś nowego członka',
             invitePeople: 'Zaproś nowych członków',
             genericFailureMessage: 'Wystąpił błąd podczas zapraszania członka do przestrzeni roboczej. Proszę spróbować ponownie.',
             pleaseEnterValidLogin: `Proszę upewnić się, że adres e-mail lub numer telefonu jest prawidłowy (np. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/pt-BR.ts

@@ -5233,6 +5233,7 @@ const translations = {
         invite: {
             member: 'Convidar membro',
             members: 'Convidar membros',
+            inviteNewMember: 'Convidar novo membro',
             invitePeople: 'Convidar novos membros',
             genericFailureMessage: 'Ocorreu um erro ao convidar o membro para o espaço de trabalho. Por favor, tente novamente.',
             pleaseEnterValidLogin: `Por favor, certifique-se de que o e-mail ou número de telefone é válido (por exemplo, ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/zh-hans.ts

@@ -5145,6 +5145,7 @@ const translations = {
         invite: {
             member: '邀请成员',
             members: '邀请成员',
+            inviteNewMember: '邀请新成员',
             invitePeople: '邀请新成员',
             genericFailureMessage: '邀请成员加入工作区时发生错误。请再试一次。',
             pleaseEnterValidLogin: `请确保电子邮件或电话号码有效（例如 ${CONST.EXAMPLE_PHONE_NUMBER}）。`,

src/libs/actions/Policy/Member.ts

@@ -50,7 +50,7 @@
 };
 
 const allPolicies: OnyxCollection<Policy> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     callback: (val, key) => {
         if (!key) {
@@ -83,7 +83,7 @@
 });
 
 let allReportActions: OnyxCollection<ReportActions>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     waitForCollectionCallback: true,
     callback: (actions) => (allReportActions = actions),
@@ -91,7 +91,7 @@
 
 let sessionEmail = '';
 let sessionAccountID = 0;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (val) => {
         sessionEmail = val?.email ?? '';
@@ -100,13 +100,13 @@
 });
 
 let allPersonalDetails: OnyxEntry<PersonalDetailsList>;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (val) => (allPersonalDetails = val),
 });
 
 let policyOwnershipChecks: Record<string, PolicyOwnershipChangeChecks>;
 Onyx.connect({
     key: ONYXKEYS.POLICY_OWNERSHIP_CHANGE_CHECKS,
     callback: (value) => {
         policyOwnershipChecks = value ?? {};
@@ -1181,7 +1181,7 @@
     Onyx.set(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_ROLE_DRAFT}${policyID}`, role);
 }
 
-function clearWorkspaceInviteRoleDraft(policyID: string) {
+function clearWorkspaceInviteRoleDraft(policyID: string | undefined) {
     Onyx.set(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_ROLE_DRAFT}${policyID}`, null);
 }
 

src/libs/actions/Policy/Policy.ts

@@ -165,7 +165,7 @@
 };
 
 const allPolicies: OnyxCollection<Policy> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     callback: (val, key) => {
         if (!key) {
@@ -198,7 +198,7 @@
 });
 
 let allReports: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -207,7 +207,7 @@
 });
 
 let allReportActions: OnyxCollection<ReportActions>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     waitForCollectionCallback: true,
     callback: (actions) => {
@@ -217,7 +217,7 @@
 
 let sessionEmail = '';
 let sessionAccountID = 0;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (val) => {
         sessionEmail = val?.email ?? '';
@@ -226,7 +226,7 @@
 });
 
 let allPersonalDetails: OnyxEntry<PersonalDetailsList>;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (val) => (allPersonalDetails = val),
 });
@@ -2682,7 +2682,7 @@
     API.write(WRITE_COMMANDS.UPDATE_POLICY_MEMBERS_CUSTOM_FIELDS, params, {optimisticData, successData, failureData});
 }
 
-function setWorkspaceInviteMessageDraft(policyID: string, message: string | null) {
+function setWorkspaceInviteMessageDraft(policyID: string | undefined, message: string | null) {
     Onyx.set(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MESSAGE_DRAFT}${policyID}`, message);
 }
 

src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx

@@ -18,6 +18,7 @@ import AssigneeStep from './AssigneeStep';
 import CardNameStep from './CardNameStep';
 import CardSelectionStep from './CardSelectionStep';
 import ConfirmationStep from './ConfirmationStep';
+import InviteNewMemberStep from './InviteNewMemberStep';
 import TransactionStartDateStep from './TransactionStartDateStep';
 
 type AssignCardFeedPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS_ASSIGN_CARD> & WithPolicyAndFullscreenLoadingProps;
@@ -73,6 +74,13 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
                     feed={feed}
                 />
             );
+        case CONST.COMPANY_CARD.STEP.INVITE_NEW_MEMBER:
+            return (
+                <InviteNewMemberStep
+                    policy={policy}
+                    feed={feed}
+                />
+            );
         case CONST.COMPANY_CARD.STEP.CARD:
             return (
                 <CardSelectionStep