Payments - I accept the Expensify Terms of Service and state are not clickable

[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: 1.4.77-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4581183
Email or phone of affected tester (no customers): dave0123seife+test29@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to Settings > Wallet
2. Click on "Add payment method"
3. Click on the "Debit Card" option
4. Notice that I accept the Expensify Terms of Service and state are not clickable on the Debit card fields

Expected Result:

I accept the Expensify Terms of Service and state are clickable

Actual Result:

I accept the Expensify Terms of Service and State are not clickable

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6495146_1716991181630.State_and_Accept_not_clickable.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @luacmartins (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

@luacmartins FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[luacmartins]

This seems to share the same root cause as #42768

[ShridharGoel]

Proposal

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

Payments - I accept the Expensify Terms of Service and state are not clickable

What is the root cause of that problem?

This is happening because there's a View on top of the state field and submit button, which is getting added because styles.flex1 is being passed in containerStyles to FormAlertWithSubmitButton.

App/src/components/Form/FormWrapper.tsx

Line 121 in db7fa86

containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles]}

App/src/components/FormAlertWrapper.tsx

Lines 77 to 87 in db7fa86

	<View style={containerStyles}>
	{isAlertVisible && (
	<FormHelpMessage
	message={message}
	style={[styles.mb3, errorMessageStyle]}
	>
	{content}
	</FormHelpMessage>
	)}
	{children(!!network.isOffline)}
	</View>

This started happening since the below change:

App/src/components/Form/FormWrapper.tsx

Line 111 in db7fa86

<View style={styles.flex1}>{children}</View>

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

Option 1:

Pass submitFlexEnabled as false via DebitCardPage:

<FormProvider
    formID={ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM}
    validate={validate}
    onSubmit={PaymentMethods.addPaymentCard}
    submitButtonText={translate('common.save')}
    scrollContextEnabled
    style={[styles.mh5, styles.flexGrow1]}
    submitFlexEnabled={false}
>

We also need to fix this in the bank info page.

Also, check for this issue at other places also.

To be discussed: Can we make the default value of submitFlexEnabled as false? It will ensure that this issue is fixed at all places.

Option 2:

Change this to {children} like before.

[ShridharGoel]

@luacmartins Can you check my proposal? I'm available to open a PR quickly since this is a blocker.

[luacmartins]

I wonder why we even have that prop. We could have just reused submitButtonStyles

[melvin-bot]

Triggered auto assignment to @strepanier03 (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.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[ShridharGoel]

@luacmartins Should we change its default value to false then?

[luacmartins]

@ShridharGoel according to your RCA this issue has been present for a while? So does that mean it's not a blocker?

[luacmartins]

@ShridharGoel I think we should just remove the prop and use submitButtonStyles when needed to pass the flex style

[ShridharGoel]

@luacmartins It started happening after this change from #35045

App/src/components/Form/FormWrapper.tsx

Line 111 in db7fa86

<View style={styles.flex1}>{children}</View>

[ShridharGoel]

Before, it wasn't having flex1 style.

[luacmartins]

Ah ok, makes sense. @ShridharGoel let's resolve this issue too - #42768

[arosiclair]

Hmm if these bugs are introduced by #35045 then the authors should fix it (cc @pac-guerreiro). We already agreed to revert the PR here.

[luacmartins]

This is fixed by the revert. Closing.