Merge pull request #52524 from Krishna2323/krishna2323/issue/51096

Update: Default / Custom Workspace Invite Behavior
Expensify · Nov 19, 2024 · 6e8590d · 6e8590d
2 parents 763215e + b9ba307
commit 6e8590d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.tsx b/src/pages/workspace/WorkspaceInviteMessagePage.tsx
@@ -1,5 +1,4 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import lodashDebounce from 'lodash/debounce';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {Keyboard, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -20,6 +19,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
+import * as FormActions from '@libs/actions/FormActions';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Parser from '@libs/Parser';
@@ -48,6 +48,7 @@ type WorkspaceInviteMessagePageProps = WithPolicyAndFullscreenLoadingProps &
 function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}: WorkspaceInviteMessagePageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [formData] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM_DRAFT);
 
     const viewportOffsetTop = useViewportOffsetTop();
     const [welcomeNote, setWelcomeNote] = useState<string>();
@@ -66,17 +67,19 @@ function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}:
 
     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 ||
+            workspaceInviteMessageDraft ??
             // policy?.description can be an empty string
             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            Parser.htmlToMarkdown(policy?.description ?? '') ||
-            translate('workspace.common.welcomeNote', {
-                workspaceName: policy?.name ?? '',
-            })
+            (Parser.htmlToMarkdown(policy?.description ?? '') ||
+                translate('workspace.common.welcomeNote', {
+                    workspaceName: policy?.name ?? '',
+                }))
         );
-    }, [workspaceInviteMessageDraft, policy, translate]);
+    }, [workspaceInviteMessageDraft, policy, translate, formData]);
 
     useEffect(() => {
         if (isOnyxLoading) {
@@ -93,16 +96,13 @@ function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}:
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isOnyxLoading]);
 
-    const debouncedSaveDraft = lodashDebounce((newDraft: string | null) => {
-        Policy.setWorkspaceInviteMessageDraft(route.params.policyID, newDraft);
-    });
-
     const sendInvitation = () => {
         Keyboard.dismiss();
         const policyMemberAccountIDs = Object.values(PolicyUtils.getMemberAccountIDsForWorkspace(policy?.employeeList, false, false));
         // Please see https://github.com/Expensify/App/blob/main/README.md#Security for more details
         Member.addMembersToWorkspace(invitedEmailsToAccountIDsDraft ?? {}, `${welcomeNoteSubject}\n\n${welcomeNote}`, route.params.policyID, policyMemberAccountIDs);
-        debouncedSaveDraft(null);
+        Policy.setWorkspaceInviteMessageDraft(route.params.policyID, welcomeNote ?? null);
+        FormActions.clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM);
         Navigation.dismissModal();
     };
 
@@ -194,7 +194,6 @@ function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}:
                             value={welcomeNote}
                             onChangeText={(text: string) => {
                                 setWelcomeNote(text);
-                                debouncedSaveDraft(text);
                             }}
                             ref={(element: AnimatedTextInputRef) => {
                                 if (!element) {
@@ -205,6 +204,7 @@ function WorkspaceInviteMessagePage({policy, route, currentUserPersonalDetails}:
                                 }
                                 inputCallbackRef(element);
                             }}
+                            shouldSaveDraft
                         />
                     </View>
                 </FormProvider>

diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx
@@ -16,6 +16,7 @@ import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as FormActions from '@libs/actions/FormActions';
 import * as ReportActions from '@libs/actions/Report';
 import {READ_COMMANDS} from '@libs/API/types';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -70,6 +71,7 @@ function WorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
     useEffect(() => {
         const unsubscribe = navigation.addListener('beforeRemove', () => {
             Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
+            FormActions.clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM);
         });
 
         return unsubscribe;

diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -30,6 +30,7 @@ import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as FormActions from '@libs/actions/FormActions';
 import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
@@ -417,6 +418,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
         const invitedEmails = Object.values(invitedEmailsToAccountIDsDraft).map(String);
         selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails, 1500);
         Member.setWorkspaceInviteMembersDraft(route.params.policyID, {});
+        FormActions.clearDraftValues(ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM);
     }, [invitedEmailsToAccountIDsDraft, route.params.policyID, isFocused, accountIDs, prevAccountIDs]);
 
     const getHeaderMessage = () => {