Refactor TransferWalletBalance

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,
 };

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 (
         <View style={[
-            props.isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator,
+            setStyles(props.containerStyles, props.isSmallScreenWidth),
             styles.flexRow,
             styles.alignItemsCenter,
             ...StyleUtils.parseStyleAsArray(props.style),
         ]}
         >
             <Icon
-                src={Expensicons.Offline}
-                width={variables.iconSizeExtraSmall}
-                height={variables.iconSizeExtraSmall}
+                src={Expensicons.OfflineCloud}
+                width={variables.iconSizeSmall}
+                height={variables.iconSizeSmall}
             />
-            <Text style={[styles.ml2, styles.chatItemComposeSecondaryRowSubText]}>
+            <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>
                 {props.translate('common.youAppearToBeOffline')}
             </Text>
         </View>

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: {

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: {

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,
 };

src/pages/home/report/ReportActionCompose.js

@@ -669,7 +669,7 @@ class ReportActionCompose extends React.Component {
                     </View>
                 </View>
                 <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                    {!this.props.isSmallScreenWidth && <OfflineIndicator style={[styles.chatItemComposeSecondaryRowOffset]} />}
+                    {!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRowOffset]} />}
                     <ReportTypingIndicator reportID={this.props.reportID} />
                     <ExceededCommentLength commentLength={this.comment.length} />
                 </View>

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}
                                         />
                                     )}
                                 </KYCWall>
@@ -433,19 +434,7 @@ class BasePaymentsPage extends React.Component {
                     shouldShowCancelButton
                     danger
                 />
-                <ConfirmModal
-                    title={this.props.translate('paymentsPage.allSet')}
-                    onConfirm={PaymentMethods.dismissWalletConfirmModal}
-                    isVisible={this.props.walletTransfer.shouldShowConfirmModal}
-                    prompt={this.props.translate('paymentsPage.transferConfirmText', {
-                        amount: this.props.numberFormat(
-                            this.props.walletTransfer.transferAmount / 100,
-                            {style: 'currency', currency: 'USD'},
-                        ),
-                    })}
-                    confirmText={this.props.translate('paymentsPage.gotIt')}
-                    shouldShowCancelButton={false}
-                />
+                <OfflineIndicator containerStyles={[styles.ml5, styles.mv3]} />
             </ScreenWrapper>
         );
     }

src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js

@@ -41,7 +41,7 @@ const propTypes = {
 
 const defaultProps = {
     walletTransfer: {
-        shouldShowConfirmModal: false,
+        shouldShowSuccess: false,
     },
     betas: [],
     isLoadingPaymentMethods: true,