diff --git a/assets/images/product-illustrations/tada--blue.svg b/assets/images/product-illustrations/tada--blue.svg new file mode 100644 index 000000000000..5430863ca145 --- /dev/null +++ b/assets/images/product-illustrations/tada--blue.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js index 9da4bcae764f..f7466159a964 100644 --- a/src/components/Icon/Illustrations.js +++ b/src/components/Icon/Illustrations.js @@ -14,6 +14,7 @@ import MoneyMousePink from '../../../assets/images/product-illustrations/money-m import ReceiptYellow from '../../../assets/images/product-illustrations/receipt--yellow.svg'; import RocketOrange from '../../../assets/images/product-illustrations/rocket--orange.svg'; import TadaYellow from '../../../assets/images/product-illustrations/tada--yellow.svg'; +import TadaBlue from '../../../assets/images/product-illustrations/tada--blue.svg'; import GpsTrackOrange from '../../../assets/images/product-illustrations/gps-track--orange.svg'; export { @@ -33,5 +34,6 @@ export { ReceiptYellow, RocketOrange, TadaYellow, + TadaBlue, GpsTrackOrange, }; diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index 0a450e649db6..94c0cb44f1fd 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -17,11 +17,8 @@ const propTypes = { /** Information about the network */ network: networkPropTypes.isRequired, - /** Additional styles to add after local styles. */ - style: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.object), - PropTypes.object, - ]), + /** Optional styles for container element that will override the default styling for the offline indicator */ + containerStyles: PropTypes.arrayOf(PropTypes.object), /** Is the window width narrow, like on a mobile device */ isSmallScreenWidth: PropTypes.bool.isRequired, @@ -30,7 +27,14 @@ const propTypes = { }; const defaultProps = { - style: [], + containerStyles: [], +}; + +const setStyles = (containerStyles, isSmallScreenWidth) => { + if (containerStyles.length) { + return containerStyles; + } + return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator; }; const OfflineIndicator = (props) => { @@ -40,18 +44,18 @@ const OfflineIndicator = (props) => { return ( - + {props.translate('common.youAppearToBeOffline')} diff --git a/src/languages/en.js b/src/languages/en.js index ddfca9d73d35..fa86c37a450d 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -387,9 +387,6 @@ export default { deleteBankAccountSuccess: 'Bank account successfully deleted', deleteDebitCardSuccess: 'Debit Card successfully deleted', deletePayPalSuccess: 'PayPal.me successfully deleted', - allSet: 'All Set!', - transferConfirmText: ({amount}) => `${amount} will hit your account shortly!`, - gotIt: 'Got it, Thanks!', error: { notOwnerOfBankAccount: 'There was an error setting this bank account as your default payment method.', invalidBankAccount: 'This bank account is temporarily suspended.', @@ -407,6 +404,9 @@ export default { achSummary: 'No fee', whichAccount: 'Which Account?', fee: 'Fee', + transferSuccess: 'Transfer successful!', + transferDetailBankAccount: 'Your money should arrive in the next 1-3 business days.', + transferDetailDebitCard: 'Your money should arrive immediately.', failedTransfer: 'Your balance isn’t fully settled. Please transfer to a bank account.', }, chooseTransferAccountPage: { diff --git a/src/languages/es.js b/src/languages/es.js index 11136b8a23bd..934df4f03e1c 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -387,9 +387,6 @@ export default { deleteBankAccountSuccess: 'Cuenta bancaria eliminada correctamente', deleteDebitCardSuccess: 'Tarjeta de débito eliminada correctamente', deletePayPalSuccess: 'PayPal.me eliminada correctamente', - allSet: 'Todo listo!', - transferConfirmText: ({amount}) => `${amount} llegará a tu cuenta en breve!`, - gotIt: 'Gracias!', error: { notOwnerOfBankAccount: 'Ha ocurrido un error al establecer esta cuenta bancaria como tu método de pago predeterminado.', invalidBankAccount: 'Esta cuenta bancaria está temporalmente suspendida.', @@ -407,6 +404,9 @@ export default { achSummary: 'Sin cargo', whichAccount: '¿Que cuenta?', fee: 'Tarifa', + transferSuccess: '¡Transferencia exitosa!', + transferDetailBankAccount: 'Tu dinero debería llegar en 1-3 días laborables.', + transferDetailDebitCard: 'Tu dinero debería llegar de inmediato.', failedTransfer: 'Tu saldo no se ha acreditado completamente. Por favor transfiere los fondos a una cuenta bancaria.', }, chooseTransferAccountPage: { diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index c728f1b08d9f..849928425115 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -10,9 +10,9 @@ import Growl from '../Growl'; import * as Localize from '../Localize'; import Navigation from '../Navigation/Navigation'; import * as CardUtils from '../CardUtils'; -import ROUTES from '../../ROUTES'; import * as User from './User'; import * as store from './ReimbursementAccount/store'; +import ROUTES from '../../ROUTES'; /** * Deletes a debit card @@ -215,21 +215,42 @@ function transferWalletBalance(paymentMethod) { : CONST.PAYMENT_METHOD_ID_KEYS.DEBIT_CARD; const parameters = { [paymentMethodIDKey]: paymentMethod.methodID, + shouldReturnOnyxData: true, }; - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: true}); - DeprecatedAPI.TransferWalletBalance(parameters) - .then((response) => { - if (response.jsonCode !== 200) { - throw new Error(response.message); - } - Onyx.merge(ONYXKEYS.USER_WALLET, {currentBalance: 0}); - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowConfirmModal: true, loading: false}); - Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); - }).catch(() => { - Growl.error(Localize.translateLocal('transferAmountPage.failedTransfer')); - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: false}); - }); + API.write('TransferWalletBalance', parameters, { + optimisticData: [ + { + onyxMethod: 'merge', + key: ONYXKEYS.WALLET_TRANSFER, + value: { + loading: true, + error: null, + }, + }, + ], + successData: [ + { + onyxMethod: 'merge', + key: ONYXKEYS.WALLET_TRANSFER, + value: { + loading: false, + shouldShowSuccess: true, + paymentMethodType: paymentMethod.accountType, + }, + }, + ], + failureData: [ + { + onyxMethod: 'merge', + key: ONYXKEYS.WALLET_TRANSFER, + value: { + loading: false, + shouldShowSuccess: false, + }, + }, + ], + }); } function resetWalletTransferData() { @@ -238,17 +259,10 @@ function resetWalletTransferData() { selectedAccountID: null, filterPaymentMethodType: null, loading: false, - shouldShowConfirmModal: false, + shouldShowSuccess: false, }); } -/** - * @param {Number} transferAmount - */ -function saveWalletTransferAmount(transferAmount) { - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {transferAmount}); -} - /** * @param {String} selectedAccountType * @param {String} selectedAccountID @@ -265,8 +279,9 @@ function saveWalletTransferMethodType(filterPaymentMethodType) { Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {filterPaymentMethodType}); } -function dismissWalletConfirmModal() { - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowConfirmModal: false}); +function dismissSuccessfulTransferBalancePage() { + Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowSuccess: false}); + Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); } export { @@ -278,11 +293,10 @@ export { kycWallRef, continueSetup, clearDebitCardFormErrorAndSubmit, + dismissSuccessfulTransferBalancePage, transferWalletBalance, resetWalletTransferData, - saveWalletTransferAmount, saveWalletTransferAccountTypeAndID, saveWalletTransferMethodType, - dismissWalletConfirmModal, cleanLocalReimbursementData, }; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 12fb896ea1e3..c2cf3b9262b3 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -669,7 +669,7 @@ class ReportActionCompose extends React.Component { - {!this.props.isSmallScreenWidth && } + {!this.props.isSmallScreenWidth && } diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index d07a807098fb..c8b5b803add4 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -28,11 +28,11 @@ import ConfirmPopover from '../../../../components/ConfirmPopover'; import AddPaymentMethodMenu from '../../../../components/AddPaymentMethodMenu'; import CONST from '../../../../CONST'; import * as Expensicons from '../../../../components/Icon/Expensicons'; -import ConfirmModal from '../../../../components/ConfirmModal'; import KYCWall from '../../../../components/KYCWall'; import {propTypes, defaultProps} from './paymentsPagePropTypes'; import {withNetwork} from '../../../../components/OnyxProvider'; import * as PaymentUtils from '../../../../libs/PaymentUtils'; +import OfflineIndicator from '../../../../components/OfflineIndicator'; class BasePaymentsPage extends React.Component { constructor(props) { @@ -291,6 +291,7 @@ class BasePaymentsPage extends React.Component { icon={Expensicons.Transfer} onPress={triggerKYCFlow} shouldShowRightIcon + disabled={this.props.network.isOffline} /> )} @@ -433,19 +434,7 @@ class BasePaymentsPage extends React.Component { shouldShowCancelButton danger /> - + ); } diff --git a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js index 1a441577aa02..8783a0e47249 100644 --- a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js +++ b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js @@ -41,7 +41,7 @@ const propTypes = { const defaultProps = { walletTransfer: { - shouldShowConfirmModal: false, + shouldShowSuccess: false, }, betas: [], isLoadingPaymentMethods: true, diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index 9c3a4eca6512..a6694e785556 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -11,6 +11,9 @@ import styles from '../../../styles/styles'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import compose from '../../../libs/compose'; import * as Expensicons from '../../../components/Icon/Expensicons'; +import * as Illustrations from '../../../components/Icon/Illustrations'; +import Icon from '../../../components/Icon'; +import defaultTheme from '../../../styles/themes/default'; import MenuItem from '../../../components/MenuItem'; import CONST from '../../../CONST'; import variables from '../../../styles/variables'; @@ -24,6 +27,8 @@ import * as PaymentUtils from '../../../libs/PaymentUtils'; import cardPropTypes from '../../../components/cardPropTypes'; import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes'; import ROUTES from '../../../ROUTES'; +import FormAlertWrapper from '../../../components/FormAlertWrapper'; +import OfflineIndicator from '../../../components/OfflineIndicator'; const propTypes = { /** User's wallet information */ @@ -123,15 +128,6 @@ class TransferBalancePage extends React.Component { return selectedAccount || defaultAccount; } - /** - * @param {Number} transferAmount - * @param {Object} selectedAccount - */ - saveTransferAmountAndStartTransfer(transferAmount, selectedAccount) { - PaymentMethods.saveWalletTransferAmount(transferAmount); - PaymentMethods.transferWalletBalance(selectedAccount); - } - /** * @param {String} filterPaymentMethodType */ @@ -160,6 +156,43 @@ class TransferBalancePage extends React.Component { } render() { + if (this.props.walletTransfer.shouldShowSuccess && !this.props.walletTransfer.loading) { + return ( + + + + + + + {this.props.translate('transferAmountPage.transferSuccess')} + + + {this.props.walletTransfer.paymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT + ? this.props.translate('transferAmountPage.transferDetailBankAccount') + : this.props.translate('transferAmountPage.transferDetailDebitCard')} + + + + +