Form refactor bankaccountstep #10900

jayeshmangwani · 2022-09-08T14:17:00Z

Details

Fixed Issues

$ #9579

Tests

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)

Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

The Contributor+ will copy/paste it into a new comment and complete it after the author checklist is completed

QA Steps

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)
Verify that no errors appear in the JS console

Screenshots

Web

9579-web.mov

Mobile Web

9579-mWeb.mp4

Desktop

9579-desktop.mov

iOS

9579-ios.mov

Android

9579-Android.mp4

…to null

src/pages/ReimbursementAccount/BankAccountStep.js

mananjadhav

2 questions raised, @jayeshmangwani

jayeshmangwani · 2022-09-15T15:40:41Z

@mananjadhav conflicts resolved and latest main merged,

and I have removed 2 different keys(BANK_ACCOUNT_STEP_FORM_MANUAL, BANK_ACCOUNT_STEP_FORM_PLAID) and now using a single key REIMBURSEMENT_ACCOUNT for all the reimbursement data.

cc: @luacmartins

mananjadhav · 2022-09-16T04:23:09Z

I'll check this today again @jayeshmangwani .

src/pages/ReimbursementAccount/BankAccountStep.js

youssef-lr

LGTM overall, left a comment about the submit button that remains visible when Plaid is still loading or no account has been selected. Also, inside this function loading should be changed to isLoading so that it can be used from Form.

luacmartins

Left a small comment. Also I'm getting an error when selecting a Plaid account and clicking Save & continue

src/pages/ReimbursementAccount/BankAccountStep.js

youssef-lr · 2022-09-23T15:42:03Z

src/components/Form.js

    draftValues: PropTypes.object,

+    /** Should we show the form button */
+    isSubmitButtonVisible: PropTypes.bool,


I think this needs to be moved below submitButtonText, as now it sits under the /* Onyx Props */ comment but it's not an Onyx prop.

this change has been done

youssef-lr · 2022-09-23T15:56:23Z

src/pages/ReimbursementAccount/BankAccountStep.js

    }

-    validatePlaidAccount(values) {
+    validatePlaidAccount() {


I think we can skip validating Plaid account, as we don't allow the user to continue unless they choose an account. I don't see a way of triggering the validation error if it exists. @luacmartins what do you think?

Yes I think we can skip this, removed validatePlaidAccount for now

Makes sense since we can't display that error and the user can't continue without selecting an account.

youssef-lr · 2022-09-23T19:15:21Z

src/pages/ReimbursementAccount/BankAccountStep.js

                {subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID && (
                    <Form
                        formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
-                        validate={this.validatePlaidAccount}


Removing this completely will cause an error, maybe we can have it return an empty object validate={() => ({})} to satisfy Form. I still think we don't need that validation method because it will only run when selectedPlaidBankAccount is already defined.

added empty object to validate in PLAID Form

luacmartins · 2022-09-29T17:47:13Z

@jayeshmangwani we have conflicts again!

jayeshmangwani · 2022-09-29T18:15:20Z

@luacmartins conflicts resolved

mananjadhav · 2022-09-29T21:06:31Z

@youssef-lr Would you be able to get this? We should try to get this merged before we have to resolve conflicts again.

youssef-lr · 2022-09-29T21:20:02Z

We're not displaying any error from the server. This is because we started returning errors instead of error, here are the changes I made to Form in another PR, let's wait for @luacmartins's input on them then we can include the changes in this PR here and we should be good to go!

Screen.Recording.2022-09-29.at.22.16.51.mov

youssef-lr · 2022-09-30T18:12:10Z

@jayeshmangwani feel free to merge contents of Form and FormActions into this PR then we should be all set to merge!

jayeshmangwani · 2022-09-30T18:34:37Z

FormActions

@youssef-lr latest code merged from main, and checked plaid and manual setup , its working fine, any changes I have to do for FormActions ?

youssef-lr · 2022-09-30T18:52:08Z

So the files I've linked are from this PR and not from main, it hasn't been merged yet. The changes should support a new errors key we send from the backend to display server side errors.

There is also a separate issue to bring some more changes to Form but it's not gonna be merged yet.

So I think you can copy contents of the files I linked and push the changes then we can merge!

jayeshmangwani · 2022-09-30T18:59:29Z

So the files I've linked are from this PR and not from main, it hasn't been merged yet. The changes should support a new errors key we send from the backend to display server side errors.

There is also a separate issue to bring some more changes to Form but it's not gonna be merged yet.

So I think you can copy contents of the files I linked and push the changes then we can merge!

@youssef-lr Done

jayeshmangwani · 2022-09-30T19:20:13Z

@youssef-lr fixed newline lint issue

youssef-lr

Thanks for the changes!

OSBotify · 2022-09-30T19:33:38Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2022-09-30T22:50:24Z

🚀 Deployed to staging by @youssef-lr in version: 1.2.11-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

mvtglobally · 2022-10-01T05:41:16Z

@jayeshmangwani @youssef-lr @luacmartins Did you guys QA it internally? If not, can you help with QA steps. I am not able to follow what exactly we can validate here

luacmartins · 2022-10-03T17:03:54Z

@mvtglobally I just QA'd this and it's a pass.

OSBotify · 2022-10-05T23:37:51Z

🚀 Deployed to production by @AndrewGable in version: 1.2.11-4 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

…bankaccountstep Form refactor bankaccountstep

NikkiWines · 2023-03-02T18:26:56Z

👋 Hi, we've identified this PR as 1/2 of the cause of #14972. This PR changed the naming convention from acceptTerms to acceptedTerms. Since the value from the server is acceptTerms this caused us to incorrectly read the value when trying to set the state and for the bank account.

In this case, this could've been avoided by retaining the old naming convention, or by doing some more robust testing to ensure that both the draft and state values matched what we were expecting in a variety of scenarios. We've got a proposed regression test here that should cover the latter case 🙌

fedirjh · 2023-06-12T11:00:42Z

src/components/Form.js


+    getErrorMessage() {
+        const latestErrorMessage = ErrorUtils.getLatestErrorMessage(this.props.formState);
+        return this.props.formState.error || (typeof latestErrorMessage === 'string' ? latestErrorMessage : '');


Doing a refactor in #20228 , I got an eslint error related to this line :

ESLint: 'formState.error' is missing in props validation (react/prop-types)

I guess this should be updated to this.props.formState.errors . But as I don't have much context, I would appreciate further clarification on this issue.

cc @jayeshmangwani @luacmartins

@jayeshmangwani feel free to merge contents of Form and FormActions into this PR then we should be all set to merge!

I am not sure about this change, I copied these changes from this Form.js file and @youssef-lr may have the full context of these changes

We're removing this.props.formState.error from that line in https://github.com/Expensify/App/pull/20091/files. See this comment.

That’s perfect.

jayeshmangwani added 5 commits September 6, 2022 01:06

bank account step form refactored

c09bf34

Merge branch 'main' into form_refactor_bankaccountstep

3f8c116

fixed console warnings & changed inputID defaultValue from undefined …

8808c9c

…to null

added shouldSaveDraft to inputs and checkbox

9bf7312

Merge branch 'main' into form_refactor_bankaccountstep

7ecc6c2

jayeshmangwani requested a review from a team as a code owner September 8, 2022 14:17

melvin-bot bot requested review from iwiznia and mananjadhav and removed request for a team September 8, 2022 14:17

jayeshmangwani mentioned this pull request Sep 8, 2022

[HOLD for payment 2022-10-12] [$1000][Form Refactor] BankAccountStep #9579

Closed

8 tasks

luacmartins self-requested a review September 9, 2022 08:57

mananjadhav reviewed Sep 9, 2022

View reviewed changes

src/pages/ReimbursementAccount/BankAccountStep.js Outdated Show resolved Hide resolved

mananjadhav reviewed Sep 9, 2022

View reviewed changes

src/pages/ReimbursementAccount/BankAccountStep.js Outdated Show resolved Hide resolved

mananjadhav reviewed Sep 9, 2022

View reviewed changes

resolved conflicts & replaced form key with REIMBURSEMENT_ACCOUNT key

590d0df

youssef-lr reviewed Sep 17, 2022

View reviewed changes

src/pages/ReimbursementAccount/BankAccountStep.js Outdated Show resolved Hide resolved

youssef-lr requested changes Sep 17, 2022

View reviewed changes

luacmartins reviewed Sep 19, 2022

View reviewed changes

src/pages/ReimbursementAccount/BankAccountStep.js Outdated Show resolved Hide resolved

jayeshmangwani added 3 commits September 20, 2022 10:45

Merge branch 'main' into form_refactor_bankaccountstep

f4134db

added isSubmitButtonVisible form prop

191739a

Merge branch 'main' into form_refactor_bankaccountstep

90057a2

youssef-lr reviewed Sep 23, 2022

View reviewed changes

jayeshmangwani added 3 commits September 23, 2022 23:12

skipped validation for plaid

2d99e38

removed inputID from AddPlaidBankAccount

cdb883a

Merge branch 'main' into form_refactor_bankaccountstep

2ef74ca

youssef-lr reviewed Sep 23, 2022

View reviewed changes

added validate function to PLAID Form

0e2b26f

resolved conflicts

44cc59d

luacmartins previously approved these changes Sep 29, 2022

View reviewed changes

iwiznia previously approved these changes Sep 30, 2022

View reviewed changes

Merge branch 'main' into form_refactor_bankaccountstep

fbd3ca4

merged code from Form and FormActions

bd2e691

jayeshmangwani dismissed stale reviews from iwiznia and luacmartins via bd2e691 September 30, 2022 18:57

fixed newline lint issue

08753f3

youssef-lr approved these changes Sep 30, 2022

View reviewed changes

youssef-lr merged commit 6c81537 into Expensify:main Sep 30, 2022

OSBotify mentioned this pull request Sep 30, 2022

Deploy Checklist: New Expensify 2022-09-30 #11485

Closed

29 tasks

smrutiparida pushed a commit to autosave-app/App that referenced this pull request Oct 13, 2022

Merge pull request Expensify#10900 from jayeshmangwani/form_refactor_…

384ca7c

…bankaccountstep Form refactor bankaccountstep

mollfpr mentioned this pull request Dec 7, 2022

[Hold for payment 2022-12-06] [$250] Terms of Service link has to be clicked twice to open in bank account setup page reported by @mdneyazahmad #12715

Closed

NikkiWines mentioned this pull request Mar 2, 2023

[HOLD for payment 2023-03-06] [$1000] The Terms of Service checkbox doesn't respond properly while navigating the connect bank account flow #14972

Closed

1 task

fedirjh reviewed Jun 12, 2023

View reviewed changes

Form refactor bankaccountstep #10900

Form refactor bankaccountstep #10900

Uh oh!

Conversation

jayeshmangwani commented Sep 8, 2022

Details

Fixed Issues

Tests

PR Review Checklist

Contributor (PR Author) Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

Mobile Web

Desktop

iOS

Android

Uh oh!

Uh oh!

Uh oh!

mananjadhav left a comment

Choose a reason for hiding this comment

Uh oh!

jayeshmangwani commented Sep 15, 2022

Uh oh!

mananjadhav commented Sep 16, 2022

Uh oh!

Uh oh!

youssef-lr left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

luacmartins left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

luacmartins commented Sep 29, 2022

Uh oh!

jayeshmangwani commented Sep 29, 2022

Uh oh!

mananjadhav commented Sep 29, 2022

Uh oh!

youssef-lr commented Sep 29, 2022

Uh oh!

youssef-lr commented Sep 30, 2022

Uh oh!

jayeshmangwani commented Sep 30, 2022

Uh oh!

youssef-lr commented Sep 30, 2022

Uh oh!

jayeshmangwani commented Sep 30, 2022

Uh oh!

jayeshmangwani commented Sep 30, 2022

Uh oh!

youssef-lr left a comment

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Sep 30, 2022

Uh oh!

OSBotify commented Sep 30, 2022

Uh oh!

mvtglobally commented Oct 1, 2022

Uh oh!

luacmartins commented Oct 3, 2022

Uh oh!

youssef-lr left a comment •

edited

Loading