[HOLD for payment 2022-02-08] [HOLD for payment 2022-01-25] Add the Transfer Balance Page

[JmillsExpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

This is a new E.cash initiative. See expected result.

Expected Result:

1. Create a new file /PaymentPages/TransferBalancePage.js

2. Add a route for the transfer balance page: ROUTES.SETTINGS_TRANSFER_BALANCE = "settings/payments/transfer-balance"

3. Add a "Transfer Balance" button to PaymentsPage.js that links to the new transfer page

   • Icon:
     • We will need to add the transfer icon to the assets/images folder, and then export it in src/components/Icon/Expensicons.js.
     • We will then import it in PaymentsPage.js and pass that icon as a param
   • OnPress:
     • Navigate to the transfer balance page
   • PrimaryText: “Transfer Balance”
   • shouldShowRightArrow: True
   • The button will only be shown if there is a balance above $0

4. Add the <currentBalance> component to the top

5. Add 2 <menuItem> components for instant/slow transfer

   • Instant:
     • Icon: LightningBolt (new)
     • PrimaryText: Instant
     • SecondaryText: 1.5% fee ($0.25 minimum)
     • onPress: () => this.setState({transferType: Instant})
   • ACH:
     • Icon: Bank
     • PrimaryText: 1-3 Business Days
     • SecondaryText: No Fee
     • onPress: () =. this.setState({transferType: ACH})
   • When the state changes, the item that was clicked will show a different border and icon color

6. Create the "Which Account" section

   • This should be a <MenuItem>
   • For an example of the rendering take a look at PaymentMethodList.js
   • The initial account should be the account defined in the onyx prop USER_WALLET.linkedBankAccount
   • The onPress for the MenuItem will navigate to ChooseTransferAccountPage

7. Create a new page ChooseTransferAccountPage.js (screenshot 3)

   • The route for this page will be ROUTES.SETTINGS_PAYMENTS_CHOOSE_TRANSFER_ACCOUNT = “settings/payments/choose-transfer-Account”
   • The page will display a <PaymentMethodList>
     • When a method is selected, we will route back to TransferBalancePage with the account type and ID
     • The selected method should be displayed in the choose account section

8. Create the "Transfer" button

   • This should be a <PressableOpacity>
   • The onPress should:
     • Call PaymentMethods.TransferWalletBalance() (described below)
     • Display a <FullScreenLoadingIndicator>
     • When the API command is complete
       • Hide the loading indicator
       • Display a success modal (The far right screenshot) that on submit will reroute to PaymentsPage.js
       • This will be created by using the default react native component, similar to confirmModal.js

9. Create a new method in PaymentMethods.js called TransferWalletBalance()

   • This should call a new method in API.js called TransferWalletBalance()
     • This will call the API command TransferWalletBalance (no parameters necessary)
   • Once the API call comes back positive this method should set USER_WALLET.balance = 0 in Onyx

Progress

Per this comment we are breaking this down to smaller pieces.

• Do a simple PR to scaffold out some of the little changes first and add all the assets, consts, pages, etc (PR)

  • Add consts
  • Add Routes
  • Add blank pages for the new routes we are adding
  • Translations
  • API.js change
  • Move payment methods list building logic into PaymentUtils without modifying the original logic and use in PaymentMethodList.

• Create the TransferBalancePage and have the account select feature disabled for now - we can test with just the default account and see that transfers can be initiated, errors handled, etc. (PR)

• Create a new component that wraps AddPaymentMethodMenu (without modifying this component too much) and call it “AddBalanceTransferAccountButton”

• Create a version of the PaymentMethodList that is selectable. It should not duplicate the logic, but wrap PaymentMethodList.

• Build out the ChooseTransferBalanceAccount page and hook it up to TransferBalancePage so we can select an account.

Platform:

All platforms

Version Number: N/A
Logs: N/A
Notes/Photos/Videos: Please ask any questions in this issue.
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/169395

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @davidcardoza (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[JmillsExpensify]

If you're coming from our Upwork posting (https://www.upwork.com/jobs/~01081fb3ff015abc6c), a heads up that we will prioritizing contributors that we have been actively working with. Thank you!

[MelvinBot]

Triggered auto assignment to @tgolen (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Burhanuddin971]

I've submitted the proposal on Upwork. Please do check