From b1984f06861f3e82bd872a7d7e071924e3407296 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 13 Jan 2022 09:45:09 -1000 Subject: [PATCH 1/5] Fix up popover placements --- src/ROUTES.js | 1 + src/components/AddPaymentMethodMenu.js | 40 ++++++++++--------- src/components/Button.js | 1 + src/components/KYCWall.js | 27 ++++++++++++- src/components/MenuItem.js | 4 +- .../AppNavigator/ModalStackNavigators.js | 4 ++ src/libs/Navigation/linkingConfig.js | 4 ++ src/libs/getClickedElementLocation/index.js | 2 +- src/pages/settings/Payments/PaymentsPage.js | 23 ++++++++--- src/styles/StyleUtils.js | 10 +++++ src/styles/styles.js | 4 ++ 11 files changed, 90 insertions(+), 30 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 5754c1d5ca65..c71b311767cd 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -32,6 +32,7 @@ export default { SETTINGS_ADD_PAYPAL_ME: 'settings/payments/add-paypal-me', SETTINGS_ADD_DEBIT_CARD: 'settings/payments/add-debit-card', SETTINGS_ADD_BANK_ACCOUNT: 'settings/payments/add-bank-account', + SETTINGS_ENABLE_PAYMENTS: 'settings/payments/enable-payments', SETTINGS_ADD_LOGIN: 'settings/addlogin/:type', getSettingsAddLoginRoute: type => `settings/addlogin/${type}`, SETTINGS_PAYMENTS_TRANSFER_BALANCE: 'settings/payments/transfer-balance', diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js index 986c4ea3c203..7837e2444cb1 100644 --- a/src/components/AddPaymentMethodMenu.js +++ b/src/components/AddPaymentMethodMenu.js @@ -1,14 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import Popover from './Popover'; import MenuItem from './MenuItem'; import * as Expensicons from './Icon/Expensicons'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; -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 withWindowDimensions from './withWindowDimensions'; const propTypes = { isVisible: PropTypes.bool.isRequired, @@ -39,26 +41,25 @@ const AddPaymentMethodMenu = props => ( onClose={props.onClose} anchorPosition={props.anchorPosition} > - props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT)} - wrapperStyle={styles.pr15} - /> - props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD)} - wrapperStyle={styles.pr15} - /> - {props.shouldShowPaypal && !props.payPalMeUsername && ( + props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL)} - wrapperStyle={styles.pr15} + title={props.translate('common.bankAccount')} + icon={Expensicons.Bank} + onPress={() => props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT)} /> - )} + props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD)} + /> + {props.shouldShowPaypal && !props.payPalMeUsername && ( + props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL)} + /> + )} + ); @@ -66,6 +67,7 @@ AddPaymentMethodMenu.propTypes = propTypes; AddPaymentMethodMenu.defaultProps = defaultProps; export default compose( + withWindowDimensions, withLocalize, withOnyx({ payPalMeUsername: { diff --git a/src/components/Button.js b/src/components/Button.js index 0081f6876fbc..ceebb436e6ce 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -140,6 +140,7 @@ class Button extends Component { ( > {({hovered, pressed}) => ( <> - + {(props.icon && props.iconType === CONST.ICON_TYPE_ICON) && ( ( )} - + {props.badgeText && } {/* Since subtitle can be of type number, we should allow 0 to be shown */} diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index b87d7f030cf3..5fe4a16f32c3 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -226,6 +226,10 @@ const SettingsModalStackNavigator = createModalStackNavigator([ Component: SettingsAddPayPalMePage, name: 'Settings_Add_Paypal_Me', }, + { + Component: EnablePaymentsPage, + name: 'Settings_Payments_EnablePayments', + }, { Component: AddDebitCardPage, name: 'Settings_Add_Debit_Card', diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 9ae9085c330e..eb396beae293 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -56,6 +56,10 @@ export default { path: ROUTES.SETTINGS_PAYMENTS, exact: true, }, + Settings_Payments_EnablePayments: { + path: ROUTES.SETTINGS_ENABLE_PAYMENTS, + exact: true, + }, Settings_Payments_Transfer_Balance: { path: ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE, exact: true, diff --git a/src/libs/getClickedElementLocation/index.js b/src/libs/getClickedElementLocation/index.js index f3fa4112a657..f29a57ebf5c0 100644 --- a/src/libs/getClickedElementLocation/index.js +++ b/src/libs/getClickedElementLocation/index.js @@ -5,7 +5,7 @@ * @returns {Object} */ function getClickedElementLocation(nativeEvent) { - return nativeEvent.currentTarget.getBoundingClientRect(); + return nativeEvent.target.getBoundingClientRect(); } export default getClickedElementLocation; diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js index 3279ce0adb72..eda22a246ab7 100644 --- a/src/pages/settings/Payments/PaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage.js @@ -23,6 +23,7 @@ import * as Expensicons from '../../../components/Icon/Expensicons'; import MenuItem from '../../../components/MenuItem'; import walletTransferPropTypes from './walletTransferPropTypes'; import ConfirmModal from '../../../components/ConfirmModal'; +import KYCWall from '../../../components/KYCWall'; const propTypes = { /** Wallet balance transfer props */ @@ -141,12 +142,22 @@ class PaymentsPage extends React.Component { - + + {triggerKYCFlow => ( + + )} + )} Date: Tue, 18 Jan 2022 09:45:13 -1000 Subject: [PATCH 2/5] add paddingRight style to paypal button --- src/components/AddPaymentMethodMenu.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js index 1db18966955d..03b470771b29 100644 --- a/src/components/AddPaymentMethodMenu.js +++ b/src/components/AddPaymentMethodMenu.js @@ -67,6 +67,7 @@ const AddPaymentMethodMenu = props => ( title={props.translate('common.payPalMe')} icon={Expensicons.PayPal} onPress={() => props.onItemSelected(CONST.PAYMENT_METHODS.PAYPAL)} + wrapperStyle={styles.pr15} /> )} From 4f77c4cb83bd7cb0366d6ffc3ab3be243aa8e975 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 19 Jan 2022 09:40:14 -1000 Subject: [PATCH 3/5] Add userWallet to formatPaymentMethods --- src/pages/settings/Payments/TransferBalancePage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index 25ff4366b292..ed8087dd5695 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -109,6 +109,7 @@ class TransferBalancePage extends React.Component { const paymentMethods = PaymentUtils.formatPaymentMethods( this.props.bankAccountList, this.props.cardList, + this.props.userWallet, ); const accountID = this.props.walletTransfer.selectedAccountID || lodashGet(this.props, 'userWallet.walletLinkedAccountID', ''); From d49c4a4ffcb349858101d4e788149f8d34d4d713 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 19 Jan 2022 12:04:38 -1000 Subject: [PATCH 4/5] fix various things --- src/libs/API.js | 4 ++-- src/libs/PaymentUtils.js | 4 ++-- src/pages/ReimbursementAccount/EnableStep.js | 4 ++-- .../settings/Payments/PaymentMethodList.js | 7 ++++--- .../settings/Payments/TransferBalancePage.js | 17 +++++++---------- .../workspace/WorkspaceResetBankAccountModal.js | 4 ++-- 6 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/libs/API.js b/src/libs/API.js index 1279bb289d01..8cf3fc89abfc 100644 --- a/src/libs/API.js +++ b/src/libs/API.js @@ -1175,7 +1175,7 @@ function CreatePolicyRoom(parameters) { * @param {String} [parameters.fundID] * @returns {Promise} */ -function Wallet_TransferBalance(parameters) { +function TransferWalletBalance(parameters) { const commandName = 'TransferWalletBalance'; if (!parameters.bankAccountID && !parameters.fundID) { throw new Error('Must pass either bankAccountID or fundID to TransferWalletBalance'); @@ -1244,7 +1244,7 @@ export { ValidateEmail, Wallet_Activate, Wallet_GetOnfidoSDKToken, - Wallet_TransferBalance, + TransferWalletBalance, GetLocalCurrency, GetCurrencyList, Policy_Create, diff --git a/src/libs/PaymentUtils.js b/src/libs/PaymentUtils.js index f80ae10a13be..eb55234ece6f 100644 --- a/src/libs/PaymentUtils.js +++ b/src/libs/PaymentUtils.js @@ -51,7 +51,7 @@ function formatPaymentMethods(bankAccountList, cardList, payPalMeUsername = '', iconSize, key: `bankAccount-${bankAccount.bankAccountID}`, accountType: CONST.PAYMENT_METHODS.BANK_ACCOUNT, - accountData: _.extend(bankAccount, {icon}), + accountData: _.extend({}, bankAccount, {icon}), isDefault, }); }); @@ -70,7 +70,7 @@ function formatPaymentMethods(bankAccountList, cardList, payPalMeUsername = '', iconSize, key: `card-${card.cardNumber}`, accountType: CONST.PAYMENT_METHODS.DEBIT_CARD, - accountData: _.extend(card, {icon}), + accountData: _.extend({}, card, {icon}), isDefault, }); }); diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 6e6afb904491..bc03e733278d 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -30,14 +30,14 @@ const propTypes = { isLoadingPaymentMethods: PropTypes.bool, /** Array of bank account objects */ - bankAccountList: PropTypes.arrayOf(bankAccountPropTypes), + bankAccountList: PropTypes.objectOf(bankAccountPropTypes), ...withLocalizePropTypes, }; const defaultProps = { isLoadingPaymentMethods: true, - bankAccountList: [], + bankAccountList: {}, }; class EnableStep extends React.Component { diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 245fadbe689a..b3ab3acce517 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -58,8 +58,8 @@ const propTypes = { const defaultProps = { payPalMeUsername: '', - bankAccountList: [], - cardList: [], + bankAccountList: {}, + cardList: {}, userWallet: { walletLinkedAccountID: 0, walletLinkedAccountType: '', @@ -91,6 +91,7 @@ class PaymentMethodList extends Component { // If we have not added any payment methods, show a default empty state if (_.isEmpty(combinedPaymentMethods)) { combinedPaymentMethods.push({ + key: 'addFirstPaymentMethodHelpText', text: this.props.translate('paymentMethodList.addFirstPaymentMethod'), }); } @@ -125,7 +126,6 @@ class PaymentMethodList extends Component { title={item.title} description={item.description} icon={item.icon} - key={item.key} disabled={item.disabled} iconFill={item.iconFill} iconHeight={item.iconSize} @@ -150,6 +150,7 @@ class PaymentMethodList extends Component { item.key} /> ); } diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index ed8087dd5695..21adea9c3dc9 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -30,7 +30,7 @@ const propTypes = { userWallet: userWalletPropTypes.userWallet, /** Array of bank account objects */ - bankAccountList: PropTypes.arrayOf(PropTypes.shape({ + bankAccountList: PropTypes.objectOf(PropTypes.shape({ /** The name of the institution (bank of america, etc) */ addressName: PropTypes.string, @@ -45,7 +45,7 @@ const propTypes = { })), /** Array of card objects */ - cardList: PropTypes.arrayOf(PropTypes.shape({ + cardList: PropTypes.objectOf(PropTypes.shape({ /** The name of the institution (bank of america, etc) */ cardName: PropTypes.string, @@ -64,8 +64,8 @@ const propTypes = { const defaultProps = { userWallet: {}, - bankAccountList: [], - cardList: [], + bankAccountList: {}, + cardList: {}, walletTransfer: {}, }; @@ -97,6 +97,8 @@ class TransferBalancePage extends React.Component { ]; this.saveTransferAmountAndBalance = this.saveTransferAmountAndBalance.bind(this); + this.getSelectedPaymentMethodAccount = this.getSelectedPaymentMethodAccount.bind(this); + const selectedAccount = this.getSelectedPaymentMethodAccount(); PaymentMethods.saveWalletTransferAccountAndResetData(selectedAccount ? selectedAccount.id : ''); } @@ -106,12 +108,7 @@ class TransferBalancePage extends React.Component { * @returns {Object|undefined} */ getSelectedPaymentMethodAccount() { - const paymentMethods = PaymentUtils.formatPaymentMethods( - this.props.bankAccountList, - this.props.cardList, - this.props.userWallet, - ); - + const paymentMethods = PaymentUtils.formatPaymentMethods(this.props.bankAccountList, this.props.cardList, '', this.props.userWallet); const accountID = this.props.walletTransfer.selectedAccountID || lodashGet(this.props, 'userWallet.walletLinkedAccountID', ''); return _.find(paymentMethods, method => method.methodID === accountID); } diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.js index 23b6824ef032..6a922386cb5a 100644 --- a/src/pages/workspace/WorkspaceResetBankAccountModal.js +++ b/src/pages/workspace/WorkspaceResetBankAccountModal.js @@ -19,14 +19,14 @@ const propTypes = { reimbursementAccount: reimbursementAccountPropTypes, /** List of bank accounts */ - bankAccountList: PropTypes.arrayOf(bankAccountPropTypes), + bankAccountList: PropTypes.objectOf(bankAccountPropTypes), ...withLocalizePropTypes, }; const defaultProps = { reimbursementAccount: {}, - bankAccountList: [], + bankAccountList: {}, }; const WorkspaceResetBankAccountModal = (props) => { From c9cdedf3ea01a70724f323d1ebe87fb8fc62a2e7 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 20 Jan 2022 07:17:37 -1000 Subject: [PATCH 5/5] Update propTypes --- .../actions/ReimbursementAccount/resetFreePlanBankAccount.js | 2 +- src/pages/ReimbursementAccount/EnableStep.js | 2 +- src/pages/settings/Payments/PaymentMethodList.js | 4 ++-- src/pages/settings/Payments/TransferBalancePage.js | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js index 2993fac460cb..4091ba2c55ce 100644 --- a/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js +++ b/src/libs/actions/ReimbursementAccount/resetFreePlanBankAccount.js @@ -41,7 +41,7 @@ function resetFreePlanBankAccount() { }; Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {achData}); Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, null); - Onyx.set(ONYXKEYS.BANK_ACCOUNT_LIST, []); + Onyx.set(ONYXKEYS.BANK_ACCOUNT_LIST, {[bankAccountID]: null}); // Clear the NVP for the bank account so the user can add a new one API.SetNameValuePair({name: CONST.NVP.FREE_PLAN_BANK_ACCOUNT_ID, value: ''}); diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index bc03e733278d..a96e495cf8d4 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -29,7 +29,7 @@ const propTypes = { /** Are we loading payment methods? */ isLoadingPaymentMethods: PropTypes.bool, - /** Array of bank account objects */ + /** List of bank accounts */ bankAccountList: PropTypes.objectOf(bankAccountPropTypes), ...withLocalizePropTypes, diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index b3ab3acce517..fac11964eab7 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -30,10 +30,10 @@ const propTypes = { /** User's paypal.me username if they have one */ payPalMeUsername: PropTypes.string, - /** Array of bank account objects */ + /** List of bank accounts */ bankAccountList: PropTypes.objectOf(bankAccountPropTypes), - /** Array of card objects */ + /** List of cards */ cardList: PropTypes.objectOf(PropTypes.shape({ /** The name of the institution (bank of america, etc */ cardName: PropTypes.string, diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index 21adea9c3dc9..c54e3cb9617b 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -29,7 +29,7 @@ const propTypes = { /** User's wallet information */ userWallet: userWalletPropTypes.userWallet, - /** Array of bank account objects */ + /** List of bank accounts */ bankAccountList: PropTypes.objectOf(PropTypes.shape({ /** The name of the institution (bank of america, etc) */ addressName: PropTypes.string, @@ -44,7 +44,7 @@ const propTypes = { type: PropTypes.string, })), - /** Array of card objects */ + /** List of card objects */ cardList: PropTypes.objectOf(PropTypes.shape({ /** The name of the institution (bank of america, etc) */ cardName: PropTypes.string,