Merge account feature fixes - Part 2

src/components/ValidateCodeActionForm/index.tsx

@@ -11,6 +11,8 @@ import type {ValidateCodeActionFormProps} from './type';
 function ValidateCodeActionForm({
     descriptionPrimary,
     descriptionSecondary,
+    descriptionPrimaryStyles,
+    descriptionSecondaryStyles,
     validatePendingAction,
     validateError,
     handleSubmitForm,
@@ -24,7 +26,7 @@ function ValidateCodeActionForm({
 }: ValidateCodeActionFormProps) {
     const themeStyles = useThemeStyles();
 
-    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
+    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE, {canBeMissing: true});
 
     const isUnmounted = useRef(false);
 
@@ -50,8 +52,8 @@ function ValidateCodeActionForm({
 
     return (
         <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb5, themeStyles.flex1]}>
-            <Text style={[themeStyles.mb3]}>{descriptionPrimary}</Text>
-            {!!descriptionSecondary && <Text style={[themeStyles.mb3]}>{descriptionSecondary}</Text>}
+            <Text style={[themeStyles.mb6, descriptionPrimaryStyles]}>{descriptionPrimary}</Text>
+            {!!descriptionSecondary && <Text style={[themeStyles.mb6, descriptionSecondaryStyles]}>{descriptionSecondary}</Text>}
             <ValidateCodeForm
                 isLoading={isLoading}
                 validateCodeAction={validateCodeAction}

src/components/ValidateCodeActionForm/type.ts

@@ -1,14 +1,21 @@
 import type {ForwardedRef, ReactNode} from 'react';
+import type {TextStyle} from 'react-native';
 import type {ValidateCodeFormHandle} from '@components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm';
 import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
 
 type ValidateCodeActionFormProps = {
     /** Primary description of the modal */
     descriptionPrimary: ReactNode;
 
+    /** Primary description styles */
+    descriptionPrimaryStyles?: TextStyle;
+
     /** Secondary description of the modal */
     descriptionSecondary?: ReactNode;
 
+    /** Secondary description styles */
+    descriptionSecondaryStyles?: TextStyle;
+
     /** The pending action for submitting form */
     validatePendingAction?: PendingAction | null;
 

src/pages/settings/Security/MergeAccounts/AccountDetailsPage.tsx

@@ -52,8 +52,8 @@ const getValidateCodeErrorKey = (err: string): ValueOf<typeof CONST.MERGE_ACCOUN
 
 function AccountDetailsPage() {
     const formRef = useRef<FormRef>(null);
-    const [userEmailOrPhone] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email});
-    const [getValidateCodeForAccountMerge] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.getValidateCodeForAccountMerge});
+    const [userEmailOrPhone] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email, canBeMissing: true});
+    const [getValidateCodeForAccountMerge] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.getValidateCodeForAccountMerge, canBeMissing: true});
     const {params} = useRoute<PlatformStackRouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.MERGE_ACCOUNTS.ACCOUNT_DETAILS>>();
     const [email, setEmail] = useState(params?.email ?? '');
 
@@ -120,6 +120,7 @@ function AccountDetailsPage() {
 
     return (
         <ScreenWrapper
+            shouldEnableMaxHeight
             includeSafeAreaPaddingBottom
             testID={AccountDetailsPage.displayName}
         >
@@ -141,24 +142,26 @@ function AccountDetailsPage() {
                 ref={formRef}
             >
                 <View style={[styles.flexGrow1, styles.mt3]}>
-                    <Text>
-                        {translate('mergeAccountsPage.accountDetails.accountToMergeInto')}
-                        <Text style={styles.textStrong}>{userEmailOrPhone}</Text>
-                    </Text>
+                    <View>
+                        <Text>
+                            {translate('mergeAccountsPage.accountDetails.accountToMergeInto')}
+                            <Text style={styles.textStrong}>{userEmailOrPhone}</Text>
+                        </Text>
+                    </View>
                     <InputWrapper
                         InputComponent={TextInput}
                         inputID={INPUT_IDS.PHONE_OR_EMAIL}
                         autoCapitalize="none"
                         label={translate('loginForm.phoneOrEmail')}
                         aria-label={translate('loginForm.phoneOrEmail')}
                         role={CONST.ROLE.PRESENTATION}
-                        containerStyles={[styles.mt5]}
+                        containerStyles={[styles.mt8]}
                         autoCorrect={false}
                         onChangeText={setEmail}
                         value={email}
                     />
                     <InputWrapper
-                        style={[styles.mt6]}
+                        style={[styles.mt8]}
                         InputComponent={CheckboxWithLabel}
                         inputID={INPUT_IDS.CONSENT}
                         label={translate('mergeAccountsPage.accountDetails.notReversibleConsent')}

src/pages/settings/Security/MergeAccounts/AccountValidatePage.tsx

@@ -5,6 +5,7 @@ import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import ValidateCodeActionForm from '@components/ValidateCodeActionForm';
 import type {ValidateCodeFormHandle} from '@components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm';
@@ -64,6 +65,7 @@ function AccountValidatePage() {
             mergeWithValidateCode: data?.mergeWithValidateCode,
             getValidateCodeForAccountMerge: data?.getValidateCodeForAccountMerge,
         }),
+        canBeMissing: true,
     });
 
     const {params} = useRoute<PlatformStackRouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.MERGE_ACCOUNTS.ACCOUNT_VALIDATE>>();
@@ -110,6 +112,7 @@ function AccountValidatePage() {
 
     return (
         <ScreenWrapper
+            shouldEnableMaxHeight
             includeSafeAreaPaddingBottom
             testID={AccountValidatePage.displayName}
         >
@@ -120,34 +123,41 @@ function AccountValidatePage() {
                 }}
                 shouldDisplayHelpButton={false}
             />
-            <ValidateCodeActionForm
-                descriptionPrimary={<Text style={[styles.textStrong]}>{translate('mergeAccountsPage.accountValidate.confirmMerge')}</Text>}
-                descriptionSecondary={
-                    <View>
-                        <Text style={[styles.mb3]}>
-                            {translate('mergeAccountsPage.accountValidate.lossOfUnsubmittedData')}
-                            <Text style={styles.textStrong}>{email}</Text>.
-                        </Text>
-                        <Text>
-                            {translate('mergeAccountsPage.accountValidate.enterMagicCode')}
-                            <Text style={styles.textStrong}>{email}</Text>.
-                        </Text>
-                    </View>
-                }
-                handleSubmitForm={(code) => {
-                    mergeWithValidateCodeAction(email, code);
-                }}
-                sendValidateCode={() => {
-                    requestValidationCodeForAccountMerge(email);
-                }}
-                shouldSkipInitialValidation
-                clearError={() => clearMergeWithValidateCode()}
-                validateError={!errorKey ? mergeWithValidateCode?.errors : undefined}
-                hasMagicCodeBeenSent={getValidateCodeForAccountMerge?.validateCodeSent}
-                submitButtonText={translate('mergeAccountsPage.mergeAccount')}
-                forwardedRef={validateCodeFormRef}
-                isLoading={mergeWithValidateCode?.isLoading}
-            />
+            <ScrollView
+                style={[styles.w100, styles.h100, styles.flex1]}
+                contentContainerStyle={[styles.flexGrow1]}
+            >
+                <ValidateCodeActionForm
+                    descriptionPrimary={translate('mergeAccountsPage.accountValidate.confirmMerge')}
+                    descriptionPrimaryStyles={{...styles.mb8, ...styles.textStrong}}
+                    descriptionSecondary={
+                        <View>
+                            <Text style={[styles.mb8]}>
+                                {translate('mergeAccountsPage.accountValidate.lossOfUnsubmittedData')}
+                                <Text style={styles.textStrong}>{email}</Text>.
+                            </Text>
+                            <Text>
+                                {translate('mergeAccountsPage.accountValidate.enterMagicCode')}
+                                <Text style={styles.textStrong}>{email}</Text>.
+                            </Text>
+                        </View>
+                    }
+                    descriptionSecondaryStyles={styles.mb8}
+                    handleSubmitForm={(code) => {
+                        mergeWithValidateCodeAction(email, code);
+                    }}
+                    sendValidateCode={() => {
+                        requestValidationCodeForAccountMerge(email);
+                    }}
+                    shouldSkipInitialValidation
+                    clearError={() => clearMergeWithValidateCode()}
+                    validateError={!errorKey ? mergeWithValidateCode?.errors : undefined}
+                    hasMagicCodeBeenSent={getValidateCodeForAccountMerge?.validateCodeSent}
+                    submitButtonText={translate('mergeAccountsPage.mergeAccount')}
+                    forwardedRef={validateCodeFormRef}
+                    isLoading={mergeWithValidateCode?.isLoading}
+                />
+            </ScrollView>
         </ScreenWrapper>
     );
 }

src/pages/settings/Security/MergeAccounts/MergeResultPage.tsx

@@ -29,7 +29,7 @@ function MergeResultPage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {setRootStatusBarEnabled} = useContext(CustomStatusBarAndBackgroundContext);
-    const [userEmailOrPhone] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email});
+    const [userEmailOrPhone] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email, canBeMissing: true});
     const {params} = useRoute<PlatformStackRouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.MERGE_ACCOUNTS.MERGE_RESULT>>();
     const {result, login} = params;
 
@@ -134,22 +134,21 @@ function MergeResultPage() {
             },
             [CONST.MERGE_ACCOUNT_RESULTS.ERR_SAML_NOT_SUPPORTED]: {
                 heading: translate('mergeAccountsPage.mergePendingSAML.weAreWorkingOnIt'),
-                description: (
-                    <>
-                        <Text style={[styles.textSupporting, styles.textAlignCenter]}>{translate('mergeAccountsPage.mergePendingSAML.limitedSupport')}</Text>
-                        <Text style={[styles.dBlock, styles.textAlignCenter, styles.textSupporting, styles.mt2]}>
-                            {translate('mergeAccountsPage.mergePendingSAML.reachOutForHelp.beforeLink')}
-                            <TextLink
-                                onPress={() => {
-                                    navigateToConciergeChat();
-                                }}
-                            >
-                                {translate('mergeAccountsPage.mergePendingSAML.reachOutForHelp.linkText')}
-                            </TextLink>
-                            {translate('mergeAccountsPage.mergePendingSAML.reachOutForHelp.afterLink')}
-                        </Text>
-                    </>
+                description: <Text style={[styles.textSupporting, styles.textAlignCenter]}>{translate('mergeAccountsPage.mergePendingSAML.limitedSupport')}</Text>,
+                cta: (
+                    <Text style={[styles.textAlignCenter, styles.textSupporting]}>
+                        {translate('mergeAccountsPage.mergePendingSAML.reachOutForHelp.beforeLink')}
+                        <TextLink
+                            onPress={() => {
+                                navigateToConciergeChat();
+                            }}
+                        >
+                            {translate('mergeAccountsPage.mergePendingSAML.reachOutForHelp.linkText')}
+                        </TextLink>
+                        {translate('mergeAccountsPage.mergePendingSAML.reachOutForHelp.afterLink')}
+                    </Text>
                 ),
+                ctaStyle: styles.mt2,
                 secondaryButtonText: translate('mergeAccountsPage.mergePendingSAML.goToExpensifyClassic'),
                 onSecondaryButtonPress: () => {
                     if (CONFIG.IS_HYBRID_APP) {