Update Add Debit Card page to use VBA styles and fix misaligned state/zip fields

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Issue was found when executing #4405

Action Performed:

1. Launch the app
2. Log in with any account
3. Open your settings
4. Open the "Payments" page
5. Tap the option "Debit Card" under "Add Payment Method"
6. Verify the "Add Debit Card" page

Expected Result:

There should be no misalignments observed in the page

Actual Result:

State and Zip code boxes are not aligned.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.5-0
Reproducible in staging?: Yes
Reproducible in production?: No
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:
Issue reported by: Applause
Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 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.

[MelvinBot]

Triggered auto assignment to @jasperhuangg (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Jag96]

The link issue looks like it was initially reported here, @jasperhuangg looks like you had some context on that. Regarding the form field alignment, it looks like this form isn't using the same form components that we use for the VBA flow:

Add Debit Card	VBA

It looks like the original issue for this page included old screenshots, so not sure if this is supposed to have different form fields (cc @stitesExpensify).

[isagoico]

Updated the original comment to reflect only the State and Zip code fields misalignment issue

[chiragsalian]

Jasper is OOO. Since its just a minor visual bug i'll be removing the deploy blocker and hourly label. Setting it to daily with the expectation that @rdjuric addresses the issue soon. Reassigning issue to @rdjuric. Please try to address it at the earliest.

[mvtglobally]

Issue reproducible during KI retests.

[Jag96]

Going to pick this one up to update the add debitcard page to use the same form elements as our other forms

[mvtglobally]

Issue reproducible during KI retests.

[Jag96]

WIP PR above has the latest todos, this is not overdue

[mvtglobally]

Issue reproducible during KI retests.