[Due for payment 2025-03-05] [$250] Company cards - Error message bottom margin inconsistence

[IuliiaHerets]

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: v9.0.94-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/3798471
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Device used: Windows 11 / Chrome
App Component: Other

Action Performed:

Precondition: workspace with enabled Company cards.

1. Go to ws > Company cards
2. Click Add cards
3. On tab 'Who’s your bank?' do not make any select > click Next

Expected Result:

Error's message bottom margin is the same as on another tabs.

Actual Result:

Error's message bottom margin is too big in comparison with bottom margin on next tabs.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6732999_1738664845149.bandicam_2025-02-04_12-19-53-165.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021887668836486992857
• Upwork Job ID: 1887668836486992857
• Last Price Increase: 2025-02-14
• Automatic offers:
• allgandalf | Reviewer | 106195434
• Krishna2323 | Contributor | 106195435

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[etCoderDysto]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-04 12:09:09 UTC.

Proposal

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

Company cards - Error message bottom margin inconsistence

What is the root cause of that problem?

We are adding extra bottom margin on the error message in addition to the top margin from the FixedFooter

App/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx

Lines 100 to 103 in bfb97c5

	<View style={[styles.ph5, styles.mb3]}>
	<FormHelpMessage
	isError={hasError}
	message={translate('workspace.companyCards.addNewCard.error.pleaseSelectBank')}

MarginTop of the fixed footer is defined here

App/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx

Line 97 in bfb97c5

confirmButtonStyles={styles.mt5}

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

We should remove the bottom margin. And change the margin top applied on confirmButtonStyles

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A ui issue

What alternative solutions did you explore? (Optional)

We can remove shouldShowConfirm, and associated props from SelectionList and pass a custom button with formalert message to footerContent of the selection list. We use the same pattern in MoneyRequestConfirmationList.tsx

function footerContent () {

        return (
            <>
                {!!errorMessage && (
                    <FormHelpMessage
                        style={[styles.ph1, styles.mb2]}
                        isError={hasError}
                        message={errorMessage}
                    />
                )}

                {button}
            </>
        );
}

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-04 12:31:25 UTC.

Proposal

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

Company cards - Error message bottom margin inconsistence

What is the root cause of that problem?

• The FormHelpMessage is passes as a children of SelectionList and it is rendered above the confirm button. Additionally we have styles.mt5 applied on the confirm button and styles.mb3 on the FormHelpMessage container.
  

  App/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx

  Line 97 in bfb97c5

  confirmButtonStyles={styles.mt5}

  
  

  App/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx

  Lines 99 to 106 in bfb97c5

  	{hasError && (
  	<View style={[styles.ph5, styles.mb3]}>
  	<FormHelpMessage
  	isError={hasError}
  	message={translate('workspace.companyCards.addNewCard.error.pleaseSelectBank')}
  	/>
  	</View>
  	)}

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

• We should only add the styles.mt5 style to confirmButtonStyles when hasError is false because, when FormHelpMessage is rendered, we already have the correct margins.

confirmButtonStyles={!hasError && styles.mt5}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2025-02-04.18-14-21.mp4

[github-actions]

⚠️ @Krishna2323 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

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

[melvin-bot]

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