[HOLD for payment 2024-12-19] [$150] IOS/Android-Verify account-Inconsistent behavior when returning from Let's make sure it is you

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.65.1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #52232

Action Performed:

precondition: user has enabled Expensify card

1. Open the app and log in
2. Navigate to the account settings > Security >Copilot
3. Continue with the flow
4. On "Let's make sure it is you" step, tap the back icon
5. Create a new workspace and open the workspace settings
6. Select More feature and enable Workflows
7. Open Workflows > toggle on "Make or track payments" option
8. Tap Connect bank account > any option
9. On "Let's make sure it is you" step, tap the back icon
10. Navigate to the workspace with Expensify card enabled
11. Start issuing a new card
12. On "Let's make sure it is you" step, tap the back icon
13. Navigate to account settings > Profile > Contact method
14. Start adding a new contact method
15. On "Let's make sure it is you" step, tap the back icon

Expected Result:

User is navigated to the previous screen after tapping the back icon on "Let's make sure it is you" in the flows where code validation is required

Actual Result:

When tapping the back icon on "Let's make sure it is you" step in the Add copilot and Add bank account flows (steps 4 and 9), the keyboard gets dismissed while in the other flows (Issue a new card, Add new contact method, Reveal card details) user is returned to the previous screen immediately (steps 12 and 15)

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6672434_1732229158372.video_2024-11-21_17-41-09.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861312036312016837
• Upwork Job ID: 1861312036312016837
• Last Price Increase: 2024-11-26

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[NJ-2020]

Proposal

Please re-state the problem that we are trying to solve in this issue.

IOS/Android-Verify account-Inconsistent behavior when returning from Let's make sure it is you

What is the root cause of that problem?

It's because the ValidateCodeActionModal is wrapped inside ScrollView component

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Lines 228 to 243 in 8d69d60

	<ValidateCodeActionModal
	title={translate('contacts.validateAccount')}
	descriptionPrimary={translate('contacts.featureRequiresValidate')}
	descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
	isVisible={!!isValidateCodeActionModalVisible}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	validatePendingAction={loginData?.pendingFields?.validateCodeSent}
	sendValidateCode={() => User.requestValidateCodeAction()}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onClose={() => toggleValidateCodeActionModal?.(false)}
	/>
	</View>
	</ScrollView>
	</View>

I can see like inside Profile page the ValidateCodeActionModal got dismissed properly when we click the back button because the ValidateCodeActionModal is not wrapped by ScrollView

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

Lines 156 to 180 in 8d69d60

	<ValidateCodeActionModal
	validatePendingAction={pendingContactAction?.pendingFields?.actionVerified}
	validateError={validateLoginError}
	handleSubmitForm={addNewContactMethod}
	clearError={() => {
	if (!loginData) {
	return;
	}
	User.clearContactMethodErrors(addSMSDomainIfPhoneNumber(pendingContactAction?.contactMethod ?? contactMethod), 'addedLogin');
	}}
	onClose={() => {
	if (loginData?.errorFields && pendingContactAction?.contactMethod) {
	User.clearContactMethod(pendingContactAction?.contactMethod);
	User.clearUnvalidatedNewContactMethodAction();
	}
	setIsValidateCodeActionModalVisible(false);
	}}
	isVisible={isValidateCodeActionModalVisible}
	hasMagicCodeBeenSent={!!loginData?.validateCodeSent}
	title={translate('delegate.makeSureItIsYou')}
	sendValidateCode={() => User.requestValidateCodeAction()}
	descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod})}
	/>
	</ScreenWrapper>
	);

But in the other side like inside Bank account page the ValidateCodeActionModal is not get dismissed properly because it's wrapped by ScrollView, example here:
BankAccountPage

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Lines 228 to 243 in 8d69d60

	<ValidateCodeActionModal
	title={translate('contacts.validateAccount')}
	descriptionPrimary={translate('contacts.featureRequiresValidate')}
	descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
	isVisible={!!isValidateCodeActionModalVisible}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	validatePendingAction={loginData?.pendingFields?.validateCodeSent}
	sendValidateCode={() => User.requestValidateCodeAction()}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onClose={() => toggleValidateCodeActionModal?.(false)}
	/>
	</View>
	</ScrollView>
	</View>

Copilot

App/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx

Lines 49 to 52 in 8d69d60

	return (
	<ValidateCodeActionModal
	clearError={clearError}
	onClose={onBackButtonPress}

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Lines 76 to 88 in 8d69d60

	<DelegateMagicCodeModal
	login={login}
	role={role}
	onClose={() => {
	if (!showValidateActionModal) {
	setIsValidateCodeActionModalVisible(false);
	return;
	}
	Navigation.navigate(ROUTES.SETTINGS_SECURITY);
	}}
	isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
	/>
	</HeaderPageLayout>

App/src/components/HeaderPageLayout.tsx

Lines 101 to 107 in 8d69d60

	<ScrollView contentContainerStyle={[safeAreaPaddingBottomStyle, style, scrollViewContainerStyles]}>
	{!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor ?? theme.appBG, windowHeight)} />}
	<View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor ?? theme.appBG), headerContainerStyles]}>
	{headerContent}
	</View>
	<View style={[styles.pt5, appBGColor, childrenContainerStyles]}>{children}</View>
	</ScrollView>

What changes do you think we should make in order to solve the problem?

We should put the ValidateCodeActionModal outside the ScrollView

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Lines 228 to 243 in 8d69d60

	<ValidateCodeActionModal
	title={translate('contacts.validateAccount')}
	descriptionPrimary={translate('contacts.featureRequiresValidate')}
	descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
	isVisible={!!isValidateCodeActionModalVisible}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	validatePendingAction={loginData?.pendingFields?.validateCodeSent}
	sendValidateCode={() => User.requestValidateCodeAction()}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onClose={() => toggleValidateCodeActionModal?.(false)}
	/>
	</View>
	</ScrollView>
	</View>

And we can do the same approach for other pages also

Result

Screen.Recording.2024-11-22.at.07.02.17.mov

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Inconsistent behavior on some pages that use the magic code validation modal.

What is the root cause of that problem?

For the copilot and bank account validation modal, the validation modal is wrapped inside a ScrollView.

App/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx

Lines 76 to 88 in a35df5b

	<DelegateMagicCodeModal
	login={login}
	role={role}
	onClose={() => {
	if (!showValidateActionModal) {
	setIsValidateCodeActionModalVisible(false);
	return;
	}
	Navigation.navigate(ROUTES.SETTINGS_SECURITY);
	}}
	isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
	/>
	</HeaderPageLayout>

App/src/components/HeaderPageLayout.tsx

Lines 101 to 107 in a35df5b

	<ScrollView contentContainerStyle={[safeAreaPaddingBottomStyle, style, scrollViewContainerStyles]}>
	{!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor ?? theme.appBG, windowHeight)} />}
	<View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor ?? theme.appBG), headerContainerStyles]}>
	{headerContent}
	</View>
	<View style={[styles.pt5, appBGColor, childrenContainerStyles]}>{children}</View>
	</ScrollView>

App/src/pages/ReimbursementAccount/BankAccountStep.tsx

Lines 228 to 242 in a35df5b

	<ValidateCodeActionModal
	title={translate('contacts.validateAccount')}
	descriptionPrimary={translate('contacts.featureRequiresValidate')}
	descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
	isVisible={!!isValidateCodeActionModalVisible}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	validatePendingAction={loginData?.pendingFields?.validateCodeSent}
	sendValidateCode={() => User.requestValidateCodeAction()}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onClose={() => toggleValidateCodeActionModal?.(false)}
	/>
	</View>
	</ScrollView>

ScrollView by default will dismiss the keyboard first when tapping on it, so we need to press the back button again to close the modal. Compared to the issue new card confirm page, the modal is outside the scroll view, so it doesn't have this problem.

What changes do you think we should make in order to solve the problem?

In a normal case, we won't have this problem because a header is usually not wrapped in a scroll view. But in this case, it's a bit different because the modal is put inside the scroll view, so the whole modal is affected. To fix this, we can keyboardShouldPersistTaps="handled" to the scroll view.

<ScrollView keyboardShouldPersistTaps="handled">

It's the same as what we did on the contact method details page.

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

Lines 244 to 273 in a35df5b

	<ScrollView keyboardShouldPersistTaps="handled">
	{isFailedAddContactMethod && (
	<ErrorMessageRow
	errors={ErrorUtils.getLatestErrorField(loginData, 'addedLogin')}
	errorRowStyles={[themeStyles.mh5, themeStyles.mv3]}
	onClose={() => {
	User.clearContactMethod(contactMethod);
	User.clearUnvalidatedNewContactMethodAction();
	Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
	}}
	canDismissError
	/>
	)}
	<ValidateCodeActionModal
	title={formattedContactMethod}
	onModalHide={() => {}}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	isVisible={isValidateCodeActionModalVisible && !loginData.validatedDate && !!loginData}
	validatePendingAction={loginData.pendingFields?.validateCodeSent}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onClose={() => {
	Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
	setIsValidateCodeActionModalVisible(false);
	}}
	sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)}
	descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod})}
	/>

This is especially useful for cases like the copilot confirm page because it uses HeaderPageLayout and the children is always wrapped with a scroll view. For other cases, if it's possible to put the modal outside the scroll view, then we put it outside the scroll view.

It's technically possible for the copilot confirm page too by doing it like this:

<>
    <HeaderPageLayout ... />
    <DelegateMagicCodeModal ... />
</>

But I think it would be cleaner to just apply keyboardShouldPersistTaps="handled" to the scroll view inside HeaderPageLayout (we can add a new prop to control it if needed).

Also, there are other pages that put the modal inside the scroll view too which we may need to fix too, such as the CodesStep.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Lines 172 to 186 in a35df5b

	<ValidateCodeActionModal
	title={translate('contacts.validateAccount')}
	descriptionPrimary={translate('contacts.featureRequiresValidate')}
	descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
	isVisible={!isUserValidated}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	validatePendingAction={loginData?.pendingFields?.validateCodeSent}
	sendValidateCode={() => User.requestValidateCodeAction()}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode, true)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onModalHide={() => {}}
	onClose={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)}
	/>
	</ScrollView>

[VictoriaExpensify]

Hmm ok so I think this is a pretty minor issue, but because we do want everything to be consistent, we should fix it.

My feeling is that this is a pretty easy fix so I'm going to lower the bounty on this one. If I'm missing anything to do with the complexity here, please let me know.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021861312036312016837

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)