complete the implementation

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() ?? '',
@@ -504,6 +513,15 @@ function updatePersonalDetailsAndShipExpensifyCards(values: FormOnyxValues<typeo
                 },
             },
         ],
+        finallyData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
+                value: {
+                    isValidating: false,
+                },
+            },
+        ],
     });
 }
 
@@ -523,4 +541,5 @@ export {
     updatePronouns,
     updateSelectedTimezone,
     updatePersonalDetailsAndShipExpensifyCards,
+    clearPersonalDetailsErrors,
 };

src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx

@@ -1,7 +1,6 @@
 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';
@@ -12,19 +11,19 @@ import useSubStep from '@hooks/useSubStep';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as FormActions 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';
 import LegalName from './substeps/LegalName';
 import PhoneNumber from './substeps/PhoneNumber';
 import type {CustomSubStepProps} from './types';
 import {getInitialSubstep, getSubstepValues} from './utils';
-import MissingPersonalDetailsMagicCodeModal from './MissingPersonalDetailsMagicCodeModal';
 
 type MissingPersonalDetailsContentProps = {
     privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
@@ -36,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);
@@ -82,9 +78,7 @@ function MissingPersonalDetailsContent({privatePersonalDetails, draftValues}: Mi
 
     const handleSubmitForm = useCallback(
         (validateCode: string) => {
-            PersonalDetails.updatePersonalDetailsAndShipExpensifyCards(values, validateCode);
-            FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
-            Navigation.goBack();
+            updatePersonalDetailsAndShipExpensifyCards(values, validateCode);
         },
         [values],
     );

src/pages/MissingPersonalDetails/MissingPersonalDetailsMagicCodeModal.tsx

@@ -3,11 +3,12 @@ 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 * as Delegate from '@userActions/Delegate';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 type MissingPersonalDetailsMagicCodeModalProps = {
     handleSubmitForm: (validateCode: string) => void;
@@ -20,17 +21,26 @@ function MissingPersonalDetailsMagicCodeModal({onClose, isValidateCodeActionModa
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
-    const validateLoginError = ErrorUtils.getLatestError();
-    const privateDetailValidated = privatePersonalDetails?.validated;
+    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 (!privateDetailValidated) {
+        if (missingDetails || !!privateDetailsErrors || privatePersonalDetails?.isValidating) {
             return;
         }
 
         FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
         Navigation.goBack();
-    }, [privateDetailValidated]);
+    }, [missingDetails, privateDetailsErrors, privatePersonalDetails?.isValidating]);
 
     const sendValidateCode = () => {
         if (validateCodeAction?.validateCodeSent) {
@@ -48,9 +58,9 @@ function MissingPersonalDetailsMagicCodeModal({onClose, isValidateCodeActionModa
         if (!validateLoginError) {
             return;
         }
-        Delegate.clearDelegateErrorsByField(currentDelegate?.email ?? '', 'addDelegate');
+        clearPersonalDetailsErrors();
     };
- 
+
     return (
         <ValidateCodeActionModal
             clearError={clearError}

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;