add new missing detail contact modal

src/libs/actions/PersonalDetails.ts

@@ -465,6 +465,15 @@ function clearAvatarErrors() {
     });
 }
 
+/**
+ * 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() ?? '',
@@ -486,21 +495,16 @@ function updatePersonalDetailsAndShipExpensifyCards(values: FormOnyxValues<typeo
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
                 value: {
-                    addresses: [
-                        ...(privatePersonalDetails?.addresses ?? []),
-                        {
-                            street: PersonalDetailsUtils.getFormattedStreet(parameters.addressStreet, parameters.addressStreet2),
-                            city: parameters.addressCity,
-                            state: parameters.addressState,
-                            zip: parameters.addressZip,
-                            country: parameters.addressCountry as Country | '',
-                            current: true,
-                        },
-                    ],
-                    legalFirstName: parameters.legalFirstName,
-                    legalLastName: parameters.legalLastName,
-                    dob: parameters.dob,
-                    phoneNumber: parameters.phoneNumber,
+                    isLoading: true,
+                },
+            },
+        ],
+        finallyData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+                value: {
+                    isLoading: false,
                 },
             },
         ],
@@ -523,4 +527,5 @@ export {
     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 {clearDraftValues} from '@libs/actions/FormActions';
 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 @@ const formSteps = [LegalName, DateOfBirth, Address, PhoneNumber, Confirmation];
 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);
@@ -73,31 +68,21 @@ function MissingPersonalDetailsContent({privatePersonalDetails, draftValues}: Mi
 
         // Clicking back on the first screen should dismiss the modal
         if (screenIndex === CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.LEGAL_NAME) {
-            FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
+            clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
             Navigation.goBack();
             return;
         }
         ref.current?.movePrevious();
         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 @@ function MissingPersonalDetailsContent({privatePersonalDetails, draftValues}: Mi
                 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,74 @@
+import React, {useEffect} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
+import useLocalize from '@hooks/useLocalize';
+import {clearDraftValues} from '@libs/actions/FormActions';
+import {clearPersonalDetailsErrors} from '@libs/actions/PersonalDetails';
+import {requestValidateCodeAction} from '@libs/actions/User';
+import {getLatestError} 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 = 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) {
+            return;
+        }
+
+        clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
+        Navigation.goBack();
+    }, [missingDetails, privateDetailsErrors]);
+
+    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={() => requestValidateCodeAction()}
+            hasMagicCodeBeenSent={validateCodeAction?.validateCodeSent}
+            handleSubmitForm={handleSubmitForm}
+            isLoading={privatePersonalDetails?.isLoading}
+        />
+    );
+}
+
+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 request is being processed */
+    isLoading?: boolean;
 };
 
 export default PrivatePersonalDetails;