[HOLD for Payment 2024-09-06][$250] Add bank account flow has too much padding below bottom button

[m-natarajan]

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.21-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1723725008039179

Action Performed:

1. Go to workspace
2. Add bank account
3. Continue to step 2 personal page
4. Observe the padding below the Next button

Expected Result:

They should just have 20px padding on the left/right/bottom

Actual Result:

All of the bottom docked buttons have too much padding below them

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016d5ff6180f00c2d9
• Upwork Job ID: 1825648516021828712
• Last Price Increase: 2024-08-19
• Automatic offers:
• ikevin127 | Reviewer | 103620843
• cretadn22 | Contributor | 103620845

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

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

[cretadn22]

Edited by proposal-police: This proposal was edited at 2024-08-16 15:52:37 UTC.

Proposal

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

Add bank account flow has too much padding below bottom button

What is the root cause of that problem?

App/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx

Line 77 in 279f561

submitButtonStyles={[styles.mb0, styles.pb5]}

We added bottom padding to this button.

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

Let's remove the bottom padding.

To maintain consistency, we should also remove the bottom padding from the submit button on other forms.

What alternative solutions did you explore? (Optional)

[melvin-bot]

@johncschuster Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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

[ikevin127]

@cretadn22's proposal looks good to me. The RCA is correct and the proposed solution fixes the issue.

I agree that in order to have consistency between the user and workspace BA flows we should fix this in all workspace BA flow pages:

PR Notes

.

For the following components we only need to remove styles.pb5:

• Address.tsx
• AddressBusiness.tsx
• AddressUBO.tsx
• BeneficialOwnerCheckUBO.tsx
• DateOfBirth.tsx
• DateOfBirthUBO.tsx
• FullName.tsx
• IncorporationDateBusiness.tsx
• LegalNameUBO.tsx
• NameBusiness.tsx
• PhoneNumberBusiness.tsx
• SocialSecurityNumber.tsx
• SocialSecurityNumberUBO.tsx
• TaxIdBusiness.tsx
• WebsiteBusiness.tsx

For this one remove styles.mh0 from style and replace styles.p5 with styles.mh5 in submitButtonStyles:

• IncorporationStateBusiness.tsx

For this one replace styles.p5 with styles.mh5 in submitButtonStyles:

• TypeBusiness.tsx

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @dangrous, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[dangrous]

great, that works for me - assigning! We should also have someone from @Expensify/design review the PR once it's ready to make sure we are looking good.

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @cretadn22 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[shawnborton]

Yup, please tag us in the PR when it's ready!

[ikevin127]

I noticed that this padding does not exist on the User - Add BA flow but it exists on the Workspace - Add BA flow.

I asked on Slack 🧵thread if anyone familiar can shed some light on why this is the case and all I was told so far is that, when testing on mobile (mWeb / Native) to make sure that the Next button is accessible and not covered by device safe areas.

Given this padding was already not present on the User - Add BA flow and there are no issues there on mobile, I tend to think that we're not going to have a problem.

I'll make sure to report any potential issue during testing 👍

[cretadn22]

@ikevin127 I just reviewed it again on staging. Please check out my video here:

Screen21.mov

It looks like the bottom padding appears on the step pages but not on the confirmation page. We probably shouldn't have padding at the bottom here. It seems like the submitButtonStyles might have been applied incorrectly during implementation.

[cretadn22]

@ikevin127 PR is ready

[ikevin127]

⚠️ We just got confirmation on Slack that the Deploy Checklist: New Expensify 2024-08-26 which includes the PR of this issue was only deployed to production today in Deploy Checklist: New Expensify 2024-08-28. More context on why this happened can be found in this Slack thread and this Slack comment.

Given the context above, this issue should be on [HOLD for Payment 2024-09-6] according to today’s production deploy from Deploy Checklist: New Expensify 2024-08-28.

cc @johncschuster @dangrous

[johncschuster]

Thanks, @ikevin127! I'll get payment issued one we've passed the regression threshold 👍

[ikevin127]

• [@ikevin127] The PR that introduced the bug has been identified. Link to the PR: [Wave 6] Bank Account Flow Refactor #34498
• [@ikevin127] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: [Wave 6] Bank Account Flow Refactor #34498 (comment)
• [@ikevin127] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A.
• [@ikevin127] Determine if we should create a regression test for this bug.
• [@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Login into the Expensify app.
2. Create a new workspace and go to workspace settings.
3. Add bank account.
4. Continue to step 2 personal page.
5. Observe that there is no extra padding below the Next button.
6. Also verify this on all the other pages on the bank account connection flow.

Do we agree 👍 or 👎.

[johncschuster]

Payment has been issued! Thanks for your contributions! 🎉