[$500] [Form Refactor] AddPlaidBankAccount

[luacmartins]

Coming from the New Expensify Forms design doc, we should refactor AddPlaidBankAccount to use the new form component, follow the guidelines below:

Here's an example of a Form refactor: #9056

Guidelines

1. Replace the form component with Form.js.
2. Create a unique Onyx key in ONYXKEYS.FORM and pass it as the formID prop to Form.
3. Pass a validate callback prop.
4. Pass an onSubmit callback prop that calls the API via an action.
5. Update all inputs wrapped by Form, following the guidelines in Refactor inputs.
6. Remove any unused code.

Testing

Verify that:

• UI looks as it did before the refactor
• Values can be added and edited
• Errors are highlighted correctly (input border)
• Error messages show up correctly
• Draft values are saved properly
• Form alerts are displayed correctly
• Clicking the fix the errors link focuses the first input with error
• No duplicate submission of the form occurs (when it's already submitting)

[melvin-bot]

Triggered auto assignment to @puneetlath (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[puneetlath]

External Upwork job: https://www.upwork.com/jobs/~010eafe7d2fa06501c
Internal Upwork job: https://www.upwork.com/ab/applicants/1557036101645889536/job-details

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[melvin-bot]

Current assignee @puneetlath is eligible for the Exported assigner, not assigning anyone new.

[luacmartins]

This issue is being put on hold because of push to page discussion, as per this comment.

[liyamahendra]

@luacmartins I understand this issue is on hold. Just leaving a comment expressing my interested in this task. I believe my relevant experience doing Form implementation in the ProfilePage can prove useful while doing this refactor.

This comment will share updates with me over email, but would be helpful if you can let me know when this issue is ready to work on and if I can take this up! :)

[Santhosh-Sellavel]

on hold

[Santhosh-Sellavel]

on hold

[luacmartins]

@puneetlath @Santhosh-Sellavel @liyamahendra this issue is no longer on hold

[puneetlath]

Great! @liyamahendra feel free to make a proposal if you're still interested.

[HafeezRai]

Can i resolve this issue i have experience with RN

[puneetlath]

@HafeezRai feel free to make a proposal. You can look at our contributing guide and other issues in this repo to get a sense of how to do so.

[puneetlath]

Updated to $500.

[Santhosh-Sellavel]

Waiting for proposals

[puneetlath]

@luacmartins I think I'm going to take this on myself to get familiar with the new form component.

I was looking at addPlaidBankAccount and it's not really a form of its own. The component handles calling plaid getting the data and then renders a picker to select the bank accounts that plaid returned. It doesn't have a submit button or anything.

The selection on that form is then used by a form in the AddPersonalBankAccountPage and BankAccountStep (#9579) components.

So I think the form refactor would actually happen on those two components and not on the addPlaidBankAccount component. Do you agree with that?

[luacmartins]

Thanks for the interest in this @puneetlath!

What you said is correct, although we should refactor this part in AddPlaidBankAccount, in addition to AddPersonalBankAccountPage and BankAccountStep.

[Santhosh-Sellavel]

Not overdue, worked internally

[youssef-lr]

Hey @puneetlath! If you've got a lot on your plate I wouldn't mind working on this, I have a Form refactoring PR in review and could start working on this while review is ongoing.

[puneetlath]

Ok sounds good! Feel free to take it.