Consolidate options on settlement "Pay" button

[brandonhenry]

Details

Fixed Issues

$ https://github.com/Expensify/App/issues/36301 PROPOSAL: https://github.com/Expensify/App/issues/36301#issuecomment-1949090025

Tests

1. Create an IOU
2. Attempt to pay IOU and notice updated Pay Button

• [x] Verify that no errors appear in the JS console

Offline tests

QA Steps

• [x] Verify that no errors appear in the JS console

PR Author Checklist

• [x] I linked the correct issue in the ### Fixed Issues section above
• [x] I wrote clear testing steps that cover the changes made in this PR
  • [x] I added steps for local testing in the Tests section
  • [x] I added steps for the expected offline behavior in the Offline steps section
  • [x] I added steps for Staging and/or Production testing in the QA steps section
  • [x] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • [x] 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)
  • [x] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• [x] I included screenshots or videos for tests on all platforms
• [x] I ran the tests on all platforms & verified they passed on:
  • [x] Android: Native
  • [x] Android: mWeb Chrome
  • [x] iOS: Native
  • [x] iOS: mWeb Safari
  • [x] MacOS: Chrome / Safari
  • [x] MacOS: Desktop
• [x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• [x] I followed proper code patterns (see Reviewing the code)
  • [x] 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)
  • [x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • [x] I verified that comments were added to code that is not self explanatory
  • [x] 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.
  • [x] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • [x] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • [x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • [x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • [x] 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.
  • [x] I verified the JSDocs style guidelines (in STYLE.md) were followed
• [x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• [x] I followed the guidelines as stated in the Review Guidelines
• [x] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• [x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• [x] 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
• [x] I verified that if a function's arguments changed that all usages have also been updated correctly
• [x] If any new file was added I verified that:
  • [x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• [x] If a new CSS style is added I verified that:
  • [x] A similar style doesn't already exist
  • [x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• [x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• [x] 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)
• [x] 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.
• [x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• [x] If the PR modifies the form input styles:
  • [x] I verified that all the inputs inside a form are aligned with each other.
  • [x] I added Design label so the design team can review the changes.
• [x] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• [x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

[melvin-bot[bot]]

@eh2077 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[github-actions[bot]]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[bondydaa]

not sure why @allroundexperts didn't get assign here since you reviewed the proposals https://github.com/Expensify/App/issues/36301#issuecomment-1956468039 so added you.

[allroundexperts]

Hi @brandonhenry! Can you please sign the CLA and complete the checklist? For future, please convert your pr to draft state if its not ready for review.

[brandonhenry]

Still working through this. @allroundexperts did you happen to see the comments I made in this PR? You can see them in them in the commented out lines

[brandonhenry]

I have read the CLA Document and I hereby sign the CLA

[allroundexperts]

did you happen to see the comments I made in this PR? You can see them in them in the commented out lines

@brandonhenry Can you please ask the questions as comments in this PR thread, instead of the code? This way it would be visible to everyone.

[brandonhenry]

hi @allroundexperts my main question revolves around this comment here. I think we are good as long as we map the current dropdown from the changes we proposed in this PR to how it is currently in prod.

The request tied to this PR asks for the dropdown to contain

Pay with business bank account
Pay with personal bank account
Pay with debit card
Pay elsewhere

How should I map each? Basically, what payment type should be sent to BE for each of these?

I would say pay with business bank account, pay with personal bank account would link to VBBA and pay with debit card would link to Expensify. Is that right?

If you're unsure, I'm going to go with that assumption - then finish this PR.

[allroundexperts]

hi @allroundexperts my main question revolves around this comment here. I think we are good as long as we map the current dropdown from the changes we proposed in this PR to how it is currently in prod.

The request tied to this PR asks for the dropdown to contain

Pay with business bank account
Pay with personal bank account
Pay with debit card
Pay elsewhere

How should I map each? Basically, what payment type should be sent to BE for each of these?

I would say pay with business bank account, pay with personal bank account would link to VBBA and pay with debit card would link to Expensify. Is that right?

If you're unsure, I'm going to go with that assumption - then finish this PR.

@tgolen Can you answer the above? I don't have enough backend context for this.

[brandonhenry]

@allroundexperts @tgolen think I made the appropriate changes to not affect this. I still needed to update the payment type, but I am still using the same functionality that exists in the app (just removed the extra dropdown we had)

[brandonhenry]

just about wrapped up here, just need to fix one file which had merge conflicts

[brandonhenry]

this is ready for review @allroundexperts @eh2077

[allroundexperts]

Hi @brandonhenry!

Please upload the screen recordings on all platforms.

[allroundexperts]

@tgolen Can you please approve the workflows above?

[bondydaa]

done

[allroundexperts]

@brandonhenry Lint and Typechecks failing.

[brandonhenry]

sorry still working on getting those additional screenshots. I had gotten my iPhone build working up until the point where i couldn't build because I didn't want to pay $99 for a apple developer account. Any thoughts there? @allroundexperts ?

[brandonhenry]

just lacking ios screenshots

[brandonhenry]

@allroundexperts all screenshots added!

[allroundexperts]

Will review this tomorrow.

[allroundexperts]

Wasn't able to review this yesterday because of some high priority PRs. Will try to review this tomorrow.

[brandonhenry]

@allroundexperts will get to this today!!

[brandonhenry]

Still awaiting feedback from @allroundexperts on 1 item and this is ready to be turned back over

[allroundexperts]

@brandonhenry What point needs my feedback? Can you please drop a link?

[brandonhenry]

@allroundexperts yes! here you mentioned that all the possible options are included. I think that it is okay and just want your confirmation as well (as it is how the original implementation worked)

[brandonhenry]

@allroundexperts this is still awaiting your review - thank you :D would like to get this merged this week

[brandonhenry]

@eh2077 also pinging for your review. hoping to wrap this one up soon, been open for awhile

[allroundexperts]

@brandonhenry I don't think @eh2077's review is required here. I'll re-review this again today. Just try to do the review changes quickly and we should be able to merge this in no time!

[brandonhenry]

thanks a ton @allroundexperts 🕺🏿

[brandonhenry]

slight nudge on this one @allroundexperts 😃