Fix send code validation

src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

@@ -1,5 +1,5 @@
 import {useFocusEffect} from '@react-navigation/native';
-import type {ForwardedRef} from 'react';
+import type {ForwardedRef, ReactNode} from 'react';
 import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
@@ -70,7 +70,9 @@ type ValidateCodeFormProps = {
     /** Function is called when validate code modal is mounted and on magic code resend */
     sendValidateCode: () => void;
 
-    /** Whether the form is loading or not */
+    /** A component to be rendered inside the validateCodeForm */
+    menuItems?: () => ReactNode;
+    /** Wheather the form is loading or not */
     isLoading?: boolean;
 };
 
@@ -85,6 +87,7 @@ function BaseValidateCodeForm({
     clearError,
     sendValidateCode,
     buttonStyles,
+    menuItems,
     hideSubmitButton,
     isLoading,
 }: ValidateCodeFormProps) {
@@ -93,6 +96,7 @@ function BaseValidateCodeForm({
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+
     const [formError, setFormError] = useState<ValidateCodeFormError>({});
     const [validateCode, setValidateCode] = useState('');
     const inputValidateCodeRef = useRef<MagicCodeInputHandle>(null);
@@ -211,77 +215,84 @@ function BaseValidateCodeForm({
 
     const shouldShowTimer = timeRemaining > 0 && !isOffline;
     return (
-        <>
-            <MagicCodeInput
-                autoComplete={autoComplete}
-                ref={inputValidateCodeRef}
-                name="validateCode"
-                value={validateCode}
-                onChangeText={onTextInput}
-                errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})}
-                hasError={!isEmptyObject(validateError)}
-                onFulfill={validateAndSubmitForm}
-                autoFocus={false}
-            />
-            {shouldShowTimer && (
-                <Text style={[styles.mt5]}>
-                    {translate('validateCodeForm.requestNewCode')}
-                    <Text style={[styles.textBlue]}>00:{String(timeRemaining).padStart(2, '0')}</Text>
-                </Text>
-            )}
-            <OfflineWithFeedback
-                pendingAction={validateCodeAction?.pendingFields?.validateCodeSent}
-                errors={ErrorUtils.getLatestErrorField(validateCodeAction, 'actionVerified')}
-                errorRowStyles={[styles.mt2]}
-                onClose={() => User.clearValidateCodeActionError('actionVerified')}
-            >
-                {!shouldShowTimer && (
-                    <View style={[styles.mt5, styles.dFlex, styles.flexColumn, styles.alignItemsStart]}>
-                        <PressableWithFeedback
-                            disabled={shouldDisableResendValidateCode}
-                            style={[styles.mr1]}
-                            onPress={resendValidateCode}
-                            underlayColor={theme.componentBG}
-                            hoverDimmingValue={1}
-                            pressDimmingValue={0.2}
-                            role={CONST.ROLE.BUTTON}
-                            accessibilityLabel={translate('validateCodeForm.magicCodeNotReceived')}
-                        >
-                            <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>{translate('validateCodeForm.magicCodeNotReceived')}</Text>
-                        </PressableWithFeedback>
-                    </View>
-                )}
-            </OfflineWithFeedback>
-            {!!hasMagicCodeBeenSent && (
-                <DotIndicatorMessage
-                    type="success"
-                    style={[styles.mt6, styles.flex0]}
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
-                    messages={{0: translate('validateCodeModal.successfulNewCodeRequest')}}
+        <View style={styles.flex1}>
+            <View style={[styles.ph5, styles.mb5]}>
+                <MagicCodeInput
+                    autoComplete={autoComplete}
+                    ref={inputValidateCodeRef}
+                    name="validateCode"
+                    value={validateCode}
+                    onChangeText={onTextInput}
+                    errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})}
+                    hasError={!isEmptyObject(validateError)}
+                    onFulfill={validateAndSubmitForm}
+                    autoFocus={false}
                 />
-            )}
-            <OfflineWithFeedback
-                shouldDisplayErrorAbove
-                pendingAction={validatePendingAction}
-                errors={validateError}
-                errorRowStyles={[styles.mt2]}
-                onClose={() => clearError()}
-                style={buttonStyles}
-            >
-                {!hideSubmitButton && (
-                    <Button
-                        isDisabled={isOffline}
-                        text={translate('common.verify')}
-                        onPress={validateAndSubmitForm}
-                        style={[styles.mt4]}
-                        success
-                        large
-                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                        isLoading={account?.isLoading || isLoading}
+                {shouldShowTimer && (
+                    <Text style={[styles.mt5]}>
+                        {translate('validateCodeForm.requestNewCode')}
+                        <Text style={[styles.textBlue]}>00:{String(timeRemaining).padStart(2, '0')}</Text>
+                    </Text>
+                )}
+                <OfflineWithFeedback
+                    pendingAction={validateCodeAction?.pendingFields?.validateCodeSent}
+                    errors={ErrorUtils.getLatestErrorField(validateCodeAction, 'actionVerified')}
+                    errorRowStyles={[styles.mt2]}
+                    onClose={() => User.clearValidateCodeActionError('actionVerified')}
+                >
+                    {!shouldShowTimer && (
+                        <View style={[styles.mt5, styles.dFlex, styles.flexColumn, styles.alignItemsStart]}>
+                            <PressableWithFeedback
+                                disabled={shouldDisableResendValidateCode}
+                                style={[styles.mr1]}
+                                onPress={resendValidateCode}
+                                underlayColor={theme.componentBG}
+                                hoverDimmingValue={1}
+                                pressDimmingValue={0.2}
+                                role={CONST.ROLE.BUTTON}
+                                accessibilityLabel={translate('validateCodeForm.magicCodeNotReceived')}
+                            >
+                                <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>{translate('validateCodeForm.magicCodeNotReceived')}</Text>
+                            </PressableWithFeedback>
+                        </View>
+                    )}
+                </OfflineWithFeedback>
+                {!!hasMagicCodeBeenSent && (
+                    <DotIndicatorMessage
+                        type="success"
+                        style={[styles.mt6, styles.flex0]}
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        messages={{0: translate('validateCodeModal.successfulNewCodeRequest')}}
                     />
                 )}
-            </OfflineWithFeedback>
-        </>
+            </View>
+
+            {menuItems ? menuItems() : null}
+
+            <View style={[styles.flex1, styles.justifyContentEnd, styles.ph5]}>
+                <OfflineWithFeedback
+                    shouldDisplayErrorAbove
+                    pendingAction={validatePendingAction}
+                    errors={validateError}
+                    errorRowStyles={[styles.mt2]}
+                    onClose={() => clearError()}
+                    style={buttonStyles}
+                >
+                    {!hideSubmitButton && (
+                        <Button
+                            isDisabled={isOffline}
+                            text={translate('common.verify')}
+                            onPress={validateAndSubmitForm}
+                            style={[styles.mt4]}
+                            success
+                            large
+                            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                            isLoading={account?.isLoading || isLoading}
+                        />
+                    )}
+                </OfflineWithFeedback>
+            </View>
+        </View>
     );
 }
 

src/components/ValidateCodeActionModal/index.tsx

@@ -28,6 +28,7 @@ function ValidateCodeActionModal({
     sendValidateCode,
     hasMagicCodeBeenSent,
     isLoading,
+    isAddingNewContact,
     shouldHandleNavigationBack,
 }: ValidateCodeActionModalProps) {
     const themeStyles = useThemeStyles();
@@ -43,13 +44,14 @@ function ValidateCodeActionModal({
     }, [onClose, clearError]);
 
     useEffect(() => {
-        if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent) {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent || isAddingNewContact) {
             return;
         }
         firstRenderRef.current = false;
 
         sendValidateCode();
-    }, [isVisible, sendValidateCode, hasMagicCodeBeenSent]);
+    }, [isVisible, sendValidateCode, hasMagicCodeBeenSent, isAddingNewContact]);
 
     return (
         <Modal
@@ -75,9 +77,9 @@ function ValidateCodeActionModal({
                     onBackButtonPress={hide}
                 />
 
-                <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb7, themeStyles.flex1]}>
-                    <Text style={[themeStyles.mb3]}>{descriptionPrimary}</Text>
-                    {!!descriptionSecondary && <Text style={[themeStyles.mb3]}>{descriptionSecondary}</Text>}
+                <View style={[themeStyles.flex1, themeStyles.mt3, themeStyles.pb5]}>
+                    <Text style={[themeStyles.ph5, themeStyles.mb3]}>{descriptionPrimary}</Text>
+                    {!!descriptionSecondary && <Text style={[themeStyles.ph5, themeStyles.mb3]}>{descriptionSecondary}</Text>}
                     <ValidateCodeForm
                         isLoading={isLoading}
                         validateCodeAction={validateCodeAction}
@@ -89,9 +91,9 @@ function ValidateCodeActionModal({
                         buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]}
                         ref={validateCodeFormRef}
                         hasMagicCodeBeenSent={hasMagicCodeBeenSent}
+                        menuItems={footer}
                     />
                 </View>
-                {footer?.()}
             </ScreenWrapper>
         </Modal>
     );

src/components/ValidateCodeActionModal/type.ts

@@ -44,6 +44,9 @@ type ValidateCodeActionModalProps = {
     /** Whether the form is loading or not */
     isLoading?: boolean;
 
+    /** Whether adding new contact action is in progress */
+    isAddingNewContact?: boolean;
+
     /** Whether handle navigation back when modal show. */
     shouldHandleNavigationBack?: boolean;
 };

src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

@@ -40,6 +40,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
     const [loginList, loginListResult] = useOnyx(ONYXKEYS.LOGIN_LIST);
     const [session, sessionResult] = useOnyx(ONYXKEYS.SESSION);
     const [myDomainSecurityGroups, myDomainSecurityGroupsResult] = useOnyx(ONYXKEYS.MY_DOMAIN_SECURITY_GROUPS);
+    const [pendingContactAction] = useOnyx(ONYXKEYS.PENDING_CONTACT_ACTION);
     const [securityGroups, securityGroupsResult] = useOnyx(ONYXKEYS.COLLECTION.SECURITY_GROUP);
     const [isLoadingReportData, isLoadingReportDataResult] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true});
     const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true);
@@ -78,6 +79,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
     const loginData = useMemo(() => loginList?.[contactMethod], [loginList, contactMethod]);
     const isDefaultContactMethod = useMemo(() => session?.email === loginData?.partnerUserID, [session?.email, loginData?.partnerUserID]);
     const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
+    const isAddingNewContact = pendingContactAction?.contactMethod === contactMethod;
 
     /**
      * Attempt to set this contact method as user's "Default contact method"
@@ -143,10 +145,14 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
             return;
         }
 
+        if (pendingContactAction?.actionVerified) {
+            User.clearUnvalidatedNewContactMethodAction();
+        }
+
         // Navigate to methods page on successful magic code verification
         // validatedDate property is responsible to decide the status of the magic code verification
-        Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
-    }, [prevValidatedDate, loginData?.validatedDate, isDefaultContactMethod, backTo, loginData]);
+        Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
+    }, [prevValidatedDate, loginData?.validatedDate, isDefaultContactMethod, backTo, loginData, pendingContactAction?.actionVerified]);
 
     useBeforeRemove(() => setIsValidateCodeActionModalVisible(false));
 
@@ -189,6 +195,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
                         title={translate('contacts.setAsDefault')}
                         icon={Expensicons.Star}
                         onPress={setAsDefault}
+                        style={themeStyles.ph2}
                     />
                 </OfflineWithFeedback>
             ) : null}
@@ -213,6 +220,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
                         icon={Expensicons.Trashcan}
                         iconFill={theme.danger}
                         onPress={() => toggleDeleteModal(true)}
+                        style={themeStyles.ph2}
                     />
                 </OfflineWithFeedback>
             )}
@@ -271,6 +279,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
                         Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
                         setIsValidateCodeActionModalVisible(false);
                     }}
+                    isAddingNewContact={isAddingNewContact}
                     sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)}
                     descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod: formattedContactMethod})}
                 />

src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

@@ -70,9 +70,9 @@ function NewContactMethodPage({route}: NewContactMethodPageProps) {
             return;
         }
 
-        Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS.route);
+        Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(pendingContactAction?.contactMethod ?? ''));
         User.clearUnvalidatedNewContactMethodAction();
-    }, [pendingContactAction?.actionVerified]);
+    }, [pendingContactAction?.actionVerified, pendingContactAction?.contactMethod]);
 
     const validate = React.useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM>): Errors => {