diff --git a/assets/images/bolt.svg b/assets/images/bolt.svg
new file mode 100644
index 000000000000..15e45f9b9bff
--- /dev/null
+++ b/assets/images/bolt.svg
@@ -0,0 +1,7 @@
+
+
+
diff --git a/assets/images/transfer.svg b/assets/images/transfer.svg
new file mode 100644
index 000000000000..03cb3c5f72b2
--- /dev/null
+++ b/assets/images/transfer.svg
@@ -0,0 +1,11 @@
+
+
+
diff --git a/src/CONST.js b/src/CONST.js
index 78e1ac329947..2a18124938cb 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -371,6 +371,11 @@ const CONST = {
},
WALLET: {
+ TRANSFER_BALANCE_FEE: 0.30,
+ TRANSFER_METHOD_TYPE: {
+ INSTANT: 'instant',
+ ACH: 'ach',
+ },
ERROR: {
IDENTITY_NOT_FOUND: 'Identity not found',
INVALID_SSN: 'Invalid SSN',
diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
index 928d3b3f5eb2..2f6057d2a475 100755
--- a/src/ONYXKEYS.js
+++ b/src/ONYXKEYS.js
@@ -127,6 +127,9 @@ export default {
// Stores information about the active reimbursement account being set up
REIMBURSEMENT_ACCOUNT: 'reimbursementAccount',
+ // Stores information about active wallet transfer amount, selectedAccountID, status, etc
+ WALLET_TRANSFER: 'walletTransfer',
+
// Stores draft information about the active reimbursement account being set up
REIMBURSEMENT_ACCOUNT_DRAFT: 'reimbursementAccountDraft',
diff --git a/src/ROUTES.js b/src/ROUTES.js
index 463ecdd1126f..90a52b80b6c4 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -28,6 +28,8 @@ export default {
SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
SETTINGS_PAYMENTS: 'settings/payments',
SETTINGS_ADD_PAYPAL_ME: 'settings/payments/add-paypal-me',
+ SETTINGS_TRANSFER_BALANCE: 'settings/payments/transfer-balance',
+ SETTINGS_PAYMENTS_CHOOSE_TRANSFER_ACCOUNT: 'settings/payments/choose-transfer-account',
SETTINGS_ADD_DEBIT_CARD: 'settings/payments/add-debit-card',
SETTINGS_ADD_BANK_ACCOUNT: 'settings/payments/add-bank-account',
SETTINGS_ADD_LOGIN: 'settings/addlogin/:type',
diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
index 5e77e2fd47b8..b1059f1e600a 100644
--- a/src/components/AddPaymentMethodMenu.js
+++ b/src/components/AddPaymentMethodMenu.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import Popover from './Popover';
@@ -9,54 +9,166 @@ import styles from '../styles/styles';
import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
import CONST from '../CONST';
+import * as StyleUtils from '../styles/StyleUtils';
+import getClickedElementLocation from '../libs/getClickedElementLocation';
+import ROUTES from '../ROUTES';
+import Navigation from '../libs/Navigation/Navigation';
-const propTypes = {
- isVisible: PropTypes.bool.isRequired,
- onClose: PropTypes.func.isRequired,
- anchorPosition: PropTypes.shape({
- top: PropTypes.number,
- left: PropTypes.number,
- }),
+const propTypes = {
/** Username for PayPal.Me */
payPalMeUsername: PropTypes.string,
+ /** Type to filter the payment Method list */
+ filterType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT, '']),
+
+ /** Are we loading payments from the server? */
+ isLoadingPayments: PropTypes.bool,
+
...withLocalizePropTypes,
};
const defaultProps = {
- anchorPosition: {},
payPalMeUsername: '',
+ filterType: '',
+ isLoadingPayments: false,
};
-const AddPaymentMethodMenu = props => (
-
-
-);
+class AddPaymentMethodMenu extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isAddPaymentMenuActive: false,
+ anchorPosition: {
+ top: 0,
+ left: 0,
+ },
+ };
+ this.addPaymentMethodPressed = this.addPaymentMethodPressed.bind(this);
+ this.addPaymentMethodTypePressed = this.addPaymentMethodTypePressed.bind(this);
+ this.hideAddPaymentMenu = this.hideAddPaymentMenu.bind(this);
+ }
+
+ /**
+ * Get the AddPaymentMethod Button title
+ * @returns {String}
+ */
+ getAddPaymentMethodButtonTitle() {
+ switch (this.props.filterType) {
+ case CONST.PAYMENT_METHODS.BANK_ACCOUNT:
+ return this.props.translate('paymentMethodList.addBankAccount');
+ case CONST.PAYMENT_METHODS.DEBIT_CARD:
+ return this.props.translate('paymentMethodList.addDebitCard');
+ default: break;
+ }
+ return this.props.translate('paymentMethodList.addPaymentMethod');
+ }
+
+ /**
+ * Display the add payment method menu
+ * @param {Object} nativeEvent
+ */
+ addPaymentMethodPressed(nativeEvent) {
+ const position = getClickedElementLocation(nativeEvent);
+ this.setState({
+ isAddPaymentMenuActive: true,
+ anchorPosition: {
+ top: position.bottom,
+
+ // We want the position to be 20px to the right of the left border
+ left: position.left + 20,
+ },
+ });
+ }
+
+ /**
+ * Navigate to the appropriate payment type addition screen
+ * @param {String} paymentType
+ */
+ addPaymentMethodTypePressed(paymentType) {
+ if (!this.props.filterType) {
+ this.hideAddPaymentMenu();
+ }
+
+ if (paymentType === CONST.PAYMENT_METHODS.PAYPAL) {
+ Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME);
+ return;
+ }
+
+ if (paymentType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
+ Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD);
+ return;
+ }
+
+ if (paymentType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
+ Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT);
+ return;
+ }
+
+ throw new Error('Invalid payment method type selected');
+ }
+
+ /**
+ * Hide the add payment modal
+ */
+ hideAddPaymentMenu() {
+ this.setState({isAddPaymentMenuActive: false});
+ }
+
+ render() {
+ const addPaymentMethodButtonTitle = this.getAddPaymentMethodButtonTitle();
+
+ return (
+ <>
+