add new missing detail contact modal

src/libs/actions/PersonalDetails.ts

@@ -37,7 +37,7 @@
     key: ONYXKEYS.SESSION,
     callback: (val) => {
         currentUserEmail = val?.email ?? '';
         currentUserAccountID = val?.accountID ?? -1;
     },
 });
 
@@ -465,6 +465,15 @@
     });
 }
 
+/**
+ * Clear errors for the current user's personal details
+ */
+function clearPersonalDetailsErrors() {
+    Onyx.merge(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {
+        errors: null,
+    });
+}
+
 function updatePersonalDetailsAndShipExpensifyCards(values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>, validateCode: string) {
     const parameters: SetPersonalDetailsAndShipExpensifyCardsParams = {
         legalFirstName: values.legalFirstName?.trim() ?? '',
@@ -504,6 +513,15 @@
                 },
             },
         ],
+        finallyData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+                value: {
+                    isValidating: false,
+                },
+            },
+        ],
     });
 }
 
@@ -523,4 +541,5 @@
     updatePronouns,
     updateSelectedTimezone,
     updatePersonalDetailsAndShipExpensifyCards,
+    clearPersonalDetailsErrors,
 };

src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

@@ -1,24 +1,22 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader';
 import ScreenWrapper from '@components/ScreenWrapper';
-import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FormActions from '@libs/actions/FormActions';
-import {requestValidateCodeAction} from '@libs/actions/User';
 import Navigation from '@libs/Navigation/Navigation';
-import * as PersonalDetails from '@userActions/PersonalDetails';
+import {updatePersonalDetailsAndShipExpensifyCards} from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsForm} from '@src/types/form';
 import type {PrivatePersonalDetails} from '@src/types/onyx';
+import MissingPersonalDetailsMagicCodeModal from './MissingPersonalDetailsMagicCodeModal';
 import Address from './substeps/Address';
 import Confirmation from './substeps/Confirmation';
 import DateOfBirth from './substeps/DateOfBirth';
@@ -37,9 +35,6 @@
 function MissingPersonalDetailsContent({privatePersonalDetails, draftValues}: MissingPersonalDetailsContentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
-    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
-    const primaryLogin = account?.primaryLogin ?? '';
     const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
 
     const ref: ForwardedRef<InteractiveStepSubHeaderHandle> = useRef(null);
@@ -81,23 +76,13 @@
         prevScreen();
     };
 
-    const handleValidateCodeEntered = useCallback(
+    const handleSubmitForm = useCallback(
         (validateCode: string) => {
-            PersonalDetails.updatePersonalDetailsAndShipExpensifyCards(values, validateCode);
-            FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
-            Navigation.goBack();
+            updatePersonalDetailsAndShipExpensifyCards(values, validateCode);
         },
         [values],
     );
 
-    const sendValidateCode = () => {
-        if (validateCodeAction?.validateCodeSent) {
-            return;
-        }
-
-        requestValidateCodeAction();
-    };
-
     const handleNextScreen = useCallback(() => {
         if (isEditing) {
             goToTheLastStep();
@@ -132,15 +117,10 @@
                 personalDetailsValues={values}
             />
 
-            <ValidateCodeActionModal
-                handleSubmitForm={handleValidateCodeEntered}
-                sendValidateCode={sendValidateCode}
-                clearError={() => {}}
+            <MissingPersonalDetailsMagicCodeModal
                 onClose={() => setIsValidateCodeActionModalVisible(false)}
-                isVisible={isValidateCodeActionModalVisible}
-                title={translate('cardPage.validateCardTitle')}
-                descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
-                hasMagicCodeBeenSent={!!validateCodeAction?.validateCodeSent}
+                isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
+                handleSubmitForm={handleSubmitForm}
             />
         </ScreenWrapper>
     );

src/pages/MissingPersonalDetails/MissingPersonalDetailsMagicCodeModal.tsx

@@ -0,0 +1,81 @@
+import React, {useEffect} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useLocalize from '@hooks/useLocalize';
+import * as FormActions from '@libs/actions/FormActions';
+import {clearPersonalDetailsErrors} from '@libs/actions/PersonalDetails';
+import {requestValidateCodeAction} from '@libs/actions/User';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+
+type MissingPersonalDetailsMagicCodeModalProps = {
+    handleSubmitForm: (validateCode: string) => void;
+    isValidateCodeActionModalVisible: boolean;
+    onClose?: () => void;
+};
+
+function MissingPersonalDetailsMagicCodeModal({onClose, isValidateCodeActionModalVisible, handleSubmitForm}: MissingPersonalDetailsMagicCodeModalProps) {
+    const {translate} = useLocalize();
+    const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
+    const privateDetailsErrors = privatePersonalDetails?.errors ?? undefined;
+    const validateLoginError = ErrorUtils.getLatestError(privateDetailsErrors);
+    const primaryLogin = account?.primaryLogin ?? '';
+
+    const missingDetails =
+        !privatePersonalDetails?.legalFirstName ||
+        !privatePersonalDetails?.legalLastName ||
+        !privatePersonalDetails?.dob ||
+        !privatePersonalDetails?.phoneNumber ||
+        isEmptyObject(privatePersonalDetails?.addresses) ||
+        privatePersonalDetails.addresses.length === 0;
+
+    useEffect(() => {
+        if (missingDetails || !!privateDetailsErrors || privatePersonalDetails?.isValidating) {
+            return;
+        }
+
+        FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
+        Navigation.goBack();
+    }, [missingDetails, privateDetailsErrors, privatePersonalDetails?.isValidating]);
+
+    const sendValidateCode = () => {
+        if (validateCodeAction?.validateCodeSent) {
+            return;
+        }
+
+        requestValidateCodeAction();
+    };
+
+    const onBackButtonPress = () => {
+        onClose?.();
+    };
+
+    const clearError = () => {
+        if (!validateLoginError) {
+            return;
+        }
+        clearPersonalDetailsErrors();
+    };
+
+    return (
+        <ValidateCodeActionModal
+            clearError={clearError}
+            onClose={onBackButtonPress}
+            validateError={validateLoginError}
+            isVisible={isValidateCodeActionModalVisible}
+            title={translate('cardPage.validateCardTitle')}
+            descriptionPrimary={translate('cardPage.enterMagicCode', {contactMethod: primaryLogin})}
+            sendValidateCode={sendValidateCode}
+            hasMagicCodeBeenSent={validateCodeAction?.validateCodeSent}
+            handleSubmitForm={handleSubmitForm}
+        />
+    );
+}
+
+MissingPersonalDetailsMagicCodeModal.displayName = 'MissingPersonalDetailsMagicCodeModal';
+
+export default MissingPersonalDetailsMagicCodeModal;

src/types/onyx/PrivatePersonalDetails.ts

@@ -68,6 +68,12 @@ type PrivatePersonalDetails = {
 
     /** Error objects keyed by field name containing errors keyed by microtime */
     errorFields?: OnyxCommon.ErrorFields;
+
+    /** Authentication failure errors */
+    errors?: OnyxCommon.Errors | null;
+
+    /** Whether the API is loading */
+    isValidating?: boolean;
 };
 
 export default PrivatePersonalDetails;