Refactor PLAID_DATA and fix plaid bankAccounts selector #11750

nkuoch · 2022-10-12T08:51:12Z

Details

Some views where unnecessarily re-rendering because too many "independent" things where stored in PLAID_DATA.
There was a placeholder to plaid bank account selectors, which value (undefined) was somehow passed when selecting another item, due to multiple simultaneous re-rendering.
So, now I made sure only useful data where stored, in appropriate places

Fixed Issues

$ #11554
$ #11769

Tests

Test adding a personal bank account
Test adding a VBBA
Verify that no errors appear in the JS console

PR Review Checklist

PR Author Checklist

PR Reviewer Checklist

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

QA Steps

Test adding a personal bank account
Test adding a VBBA
Verify that no errors appear in the JS console

Screenshots

Web

Add a personal bank account via Plaid

2022-10-12_21-35-54.mp4

Add a VBBA via Plaid. Make sure no error occurs

vbba.mp4

Mobile Web - Chrome

Screen.Recording.2022-10-12.at.20.27.03.mov

Mobile Web - Safari

Kapture.2022-10-12.at.16.19.05.mp4

Desktop

Kapture.2022-10-12.at.16.24.13.mp4

iOS

Kapture.2022-10-12.at.17.02.47.mp4

Android

Kapture.2022-10-12.at.17.47.30.mp4

…cessarily when other attributes of PLAID_DATA change

MariaHCD

I think the proposals being discussed here are probably related and would conflict with this PR.

MariaHCD · 2022-10-12T10:36:44Z

src/components/AddPlaidBankAccount.js

@@ -116,9 +113,12 @@ class AddPlaidBankAccount extends React.Component {
     */
    selectAccount(plaidAccountID) {
        const selectedPlaidBankAccount = _.findWhere(this.getPlaidBankAccounts(), {plaidAccountID});
+        if (!selectedPlaidBankAccount) {


Do we know why the selectedPlaidBankAccount can be undefined/null value here? When testing locally (on main) I started running into this error:

Yep, it was a mix of several things that I fixed in this PR. Not it can't be undefined anymore.

github-actions · 2022-10-12T20:09:57Z

⚠️ ⚠️ Heads up! This pull request has the CP Staging label. ⚠️ ⚠️
Merging it will cause it to be immediately deployed to staging, even if the open StagingDeployCash deploy checklist is locked.

…at-isPlaidDisabled

marcochavezf · 2022-10-12T21:21:47Z

Review in progress:

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots

Web

Add a PBA (Plaid)

Screen.Recording.2022-10-12.at.16.28.12.mov

Add a VBA (Plaid)

Mobile Web - Chrome

Screen.Recording.2022-10-12.at.20.27.03.mov

Mobile Web - Safari

Desktop

iOS

Screen.Recording.2022-10-12.at.20.38.05.mov

Android

Screen.Recording.2022-10-12.at.20.19.54.mov

…at-isPlaidDisabled

yuwenmemon · 2022-10-12T22:35:50Z

@marcochavezf Updated!

marcochavezf · 2022-10-12T23:08:52Z

I checked that screenshots or videos are included for tests on all platforms

@yuwenmemon I think we (author and reviewer) now should add the screenshots for all platforms

yuwenmemon · 2022-10-12T23:10:03Z

I'll add screenshots

yuwenmemon · 2022-10-13T00:48:17Z

Added!

cead22 · 2022-10-13T01:43:45Z

src/components/AddPlaidBankAccount.js

@@ -26,6 +26,8 @@ const propTypes = {
    /** Contains plaid data */
    plaidData: plaidDataPropTypes,

+    selectedPlaidAccountID: PropTypes.string,


The reviewer checklist says that all props are defined accurately and each prop has a /** comment above it */, although it's under _ If a new component is created I verified that:_ so not sure if this should be a blocker or not

Good catch, we should probably still do that.

cead22 · 2022-10-13T01:44:49Z

src/pages/AddPersonalBankAccountPage.js

@@ -31,6 +31,7 @@ const propTypes = {
        error: PropTypes.string,
        shouldShowSuccess: PropTypes.bool,
        isLoading: PropTypes.bool,
+        plaidAccountID: PropTypes.string,


Maybe all these need to be documented too

cead22 · 2022-10-13T01:46:18Z

src/pages/AddPersonalBankAccountPage.js

@@ -76,7 +78,11 @@ class AddPersonalBankAccountPage extends React.Component {
     * @param {Object} values - form input values passed by the Form component


NAB since this wasn't modified in this PR and I'm not sure if all these are mandatory, the JSDocs style guide says to Document object parameters with separate lines e.g. @param {Object} parameters followed by @param {String} parameters.field

marcochavezf · 2022-10-13T02:13:40Z

Tested both flows (PBA and VBA) on every platform, added the screenshots and videos in this comment.

marcochavezf · 2022-10-13T02:23:18Z

I checked that screenshots or videos are included for tests on all platforms

There's a missing screenshot for the Mobile Web - Chrome platform, but I'm checking off this point ^ since I tested it locally and looks good.

luacmartins

LGTM. I left a clean up comment and I think the test steps could be more descriptive.

luacmartins · 2022-10-13T03:45:02Z

src/pages/ReimbursementAccount/BankAccountPlaidStep.js

-        });
+            plaidAccessToken: this.props.plaidData.plaidAccessToken,
+        };
+        ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);


NAB we can clean this up later, but I don't think that we need this since Form automatically updates the draft data if we pass shouldSaveDraft to each input

Suggested change

ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);

ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);

Okay, cc @nkuoch and @MariaHCD so you're aware. You're saying that we could just remove this as long as we pass shouldSaveDraft to each form component below, yeah?

Refactor PLAID_DATA and fix plaid bankAccounts selector (cherry picked from commit 6f0d806)

…-11750 🍒 Cherry pick PR #11750 to staging 🍒

OSBotify · 2022-10-13T05:12:31Z

🚀 Cherry-picked to staging by @yuwenmemon in version: 1.2.13-5 🚀

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

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

OSBotify · 2022-10-13T05:54:31Z

🚀 Deployed to production by @yuwenmemon in version: 1.2.13-5 🚀

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

Refactor PLAID_DATA and fix plaid bankAccounts selector

OSBotify · 2023-06-15T01:44:16Z

🚀 Cherry-picked to staging by https://github.com/AndrewGable in version: 1.3.28-2 🚀

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

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

nkuoch self-assigned this Oct 12, 2022

nkuoch changed the title ~~Move isPlaidDisabled to a separate Onyx key to avoid rerendering unne…~~ Move isPlaidDisabled to a separate Onyx key to avoid rerendering unnecessarily when other attributes of PLAID_DATA change Oct 12, 2022

nkuoch force-pushed the nat-isPlaidDisabled branch 2 times, most recently from 418f4f0 to b34d8c6 Compare October 12, 2022 09:39

Move isPlaidDisabled to a separate Onyx key to avoid rerendering unne…

ee52b44

…cessarily when other attributes of PLAID_DATA change

nkuoch force-pushed the nat-isPlaidDisabled branch from b34d8c6 to ee52b44 Compare October 12, 2022 10:02

nkuoch changed the title ~~Move isPlaidDisabled to a separate Onyx key to avoid rerendering unnecessarily when other attributes of PLAID_DATA change~~ Refactor PLAID_DATA Oct 12, 2022

MariaHCD reviewed Oct 12, 2022

View reviewed changes

Trying to fix selectAccount issue

c2ad155

sketchydroide mentioned this pull request Oct 12, 2022

[$250] Investigate: 💥 Crash 💥 value #11554

Closed

nkuoch changed the title ~~Refactor PLAID_DATA~~ Refactor PLAID_DATA and fix plaid bankAccounts selector Oct 12, 2022

nkuoch force-pushed the nat-isPlaidDisabled branch from a291186 to 4a298ca Compare October 12, 2022 19:05

nkuoch marked this pull request as ready for review October 12, 2022 19:17

nkuoch requested a review from a team as a code owner October 12, 2022 19:17

nkuoch requested review from MariaHCD and removed request for a team October 12, 2022 19:17

melvin-bot bot requested a review from marcochavezf October 12, 2022 19:17

nkuoch force-pushed the nat-isPlaidDisabled branch 2 times, most recently from 4f1aa9e to 5f0722f Compare October 12, 2022 19:48

Fix Plaid selectAccount

b6e47e8

nkuoch force-pushed the nat-isPlaidDisabled branch from 5f0722f to b6e47e8 Compare October 12, 2022 20:03

nkuoch added the CP Staging label Oct 12, 2022

yuwenmemon self-assigned this Oct 12, 2022

yuwenmemon and others added 4 commits October 12, 2022 13:13

Merge branch 'main' of github.com:Expensify/App into nat-isPlaidDisabled

2b6acc4

Revert useless isPlaidDisabled change

2f70daf

Merge branch 'nat-isPlaidDisabled' of github.com:Expensify/App into n…

5296864

…at-isPlaidDisabled

Revert useless changes

494f242

make sure we get account number from the right spot

f4526e3

yuwenmemon added 2 commits October 12, 2022 15:19

Merge branch 'nat-isPlaidDisabled' of github.com:Expensify/App into n…

128f886

…at-isPlaidDisabled

get accountNumber from accountData and use lodash get

e1ade35

cead22 reviewed Oct 13, 2022

View reviewed changes

Add docs

56bb1d9

luacmartins approved these changes Oct 13, 2022

View reviewed changes

yuwenmemon merged commit 6f0d806 into main Oct 13, 2022

yuwenmemon deleted the nat-isPlaidDisabled branch October 13, 2022 03:50

OSBotify pushed a commit that referenced this pull request Oct 13, 2022

Merge pull request #11750 from Expensify/nat-isPlaidDisabled

4800bfa

Refactor PLAID_DATA and fix plaid bankAccounts selector (cherry picked from commit 6f0d806)

OSBotify mentioned this pull request Oct 13, 2022

🍒 Cherry pick PR #11750 to staging 🍒 #11789

Merged

OSBotify added a commit that referenced this pull request Oct 13, 2022

Merge pull request #11789 from Expensify/OSBotify-cherry-pick-staging…

1a54e1a

…-11750 🍒 Cherry pick PR #11750 to staging 🍒

OSBotify mentioned this pull request Oct 13, 2022

Deploy Checklist: New Expensify 2022-10-11 #11741

Closed

48 tasks

OSBotify mentioned this pull request Oct 13, 2022

Deploy Checklist: New Expensify 2022-10-13 #11793

Closed

9 tasks

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

Merge pull request Expensify#11750 from Expensify/nat-isPlaidDisabled

709d0f4

Refactor PLAID_DATA and fix plaid bankAccounts selector

OSBotify mentioned this pull request Oct 14, 2022

Deploy Checklist: New Expensify 2022-10-14 #11873

Closed

53 tasks

sobitneupane mentioned this pull request Oct 15, 2022

[HOLD for payment 2022-11-04] [$250] BUG: Enter password field shows on add bank account page while trying to add bank accounts consecutively reported by @adeel0202 #11816

Closed

OSBotify mentioned this pull request May 2, 2023

Deploy Checklist: New Expensify 2023-05-02 #18315

Closed

OSBotify mentioned this pull request Jun 15, 2023

Deploy Checklist: New Expensify 2023-06-14 #20782

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor PLAID_DATA and fix plaid bankAccounts selector #11750

Refactor PLAID_DATA and fix plaid bankAccounts selector #11750

nkuoch commented Oct 12, 2022 •

edited by yuwenmemon

Loading

MariaHCD left a comment

MariaHCD Oct 12, 2022 •

edited

Loading

nkuoch Oct 12, 2022

github-actions bot commented Oct 12, 2022

marcochavezf commented Oct 12, 2022 •

edited

Loading

yuwenmemon commented Oct 12, 2022

marcochavezf commented Oct 12, 2022

yuwenmemon commented Oct 12, 2022

yuwenmemon commented Oct 13, 2022

cead22 Oct 13, 2022

yuwenmemon Oct 13, 2022

cead22 Oct 13, 2022

cead22 Oct 13, 2022

marcochavezf commented Oct 13, 2022

marcochavezf commented Oct 13, 2022 •

edited

Loading

luacmartins left a comment

luacmartins Oct 13, 2022

yuwenmemon Oct 13, 2022

OSBotify commented Oct 13, 2022

OSBotify commented Oct 13, 2022

OSBotify commented Jun 15, 2023

		@@ -76,7 +78,11 @@ class AddPersonalBankAccountPage extends React.Component {
		* @param {Object} values - form input values passed by the Form component

	ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);
	ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);

Refactor PLAID_DATA and fix plaid bankAccounts selector #11750

Refactor PLAID_DATA and fix plaid bankAccounts selector #11750

Conversation

nkuoch commented Oct 12, 2022 • edited by yuwenmemon Loading

Details

Fixed Issues

Tests

PR Review Checklist

PR Author Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

MariaHCD left a comment

Choose a reason for hiding this comment

MariaHCD Oct 12, 2022 • edited Loading

Choose a reason for hiding this comment

nkuoch Oct 12, 2022

Choose a reason for hiding this comment

github-actions bot commented Oct 12, 2022

marcochavezf commented Oct 12, 2022 • edited Loading

Screenshots

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

yuwenmemon commented Oct 12, 2022

marcochavezf commented Oct 12, 2022

yuwenmemon commented Oct 12, 2022

yuwenmemon commented Oct 13, 2022

cead22 Oct 13, 2022

Choose a reason for hiding this comment

yuwenmemon Oct 13, 2022

Choose a reason for hiding this comment

cead22 Oct 13, 2022

Choose a reason for hiding this comment

cead22 Oct 13, 2022

Choose a reason for hiding this comment

marcochavezf commented Oct 13, 2022

marcochavezf commented Oct 13, 2022 • edited Loading

luacmartins left a comment

Choose a reason for hiding this comment

luacmartins Oct 13, 2022

Choose a reason for hiding this comment

yuwenmemon Oct 13, 2022

Choose a reason for hiding this comment

OSBotify commented Oct 13, 2022

OSBotify commented Oct 13, 2022

OSBotify commented Jun 15, 2023

nkuoch commented Oct 12, 2022 •

edited by yuwenmemon

Loading

MariaHCD Oct 12, 2022 •

edited

Loading

marcochavezf commented Oct 12, 2022 •

edited

Loading

marcochavezf commented Oct 13, 2022 •

edited

Loading