Allow user to edit their paypal account

src/languages/en.js

@@ -147,6 +147,7 @@ export default {
         km: 'kilometer',
         copied: 'Copied!',
         someone: 'Someone',
+        edit: 'Edit',
     },
     anonymousReportFooter: {
         logoTagline: 'Join in on the discussion.',
@@ -581,6 +582,8 @@ export default {
         yourPayPalUsername: 'Your PayPal username',
         addPayPalAccount: 'Add PayPal account',
         growlMessageOnSave: 'Your PayPal username was successfully added',
+        updatePaypalAccount: 'Save PayPal account',
+        growlMessageOnUpdate: 'Your PayPal username was successfully saved',
         formatError: 'Invalid PayPal.me username',
         checkListOf: 'Check the list of ',
         supportedCurrencies: 'supported currencies',

src/languages/es.js

@@ -146,6 +146,7 @@ export default {
         km: 'kilómetro',
         copied: '¡Copiado!',
         someone: 'Alguien',
+        edit: 'Editar',
     },
     anonymousReportFooter: {
         logoTagline: 'Únete a la discussion.',
@@ -582,6 +583,8 @@ export default {
         yourPayPalUsername: 'Tu usuario de PayPal',
         addPayPalAccount: 'Agregar cuenta de PayPal',
         growlMessageOnSave: 'Tu nombre de usuario de PayPal se agregó correctamente',
+        updatePaypalAccount: 'Guardar cuenta PayPal',
+        growlMessageOnUpdate: 'Su nombre de usuario de PayPal se guardó con éxito',
         formatError: 'Usuario PayPal.me no válido',
         checkListOf: 'Consulta la lista de ',
         supportedCurrencies: 'monedas admitidas',

src/pages/settings/Payments/AddPayPalMePage.js

@@ -1,8 +1,12 @@
 import React, {useRef, useState, useCallback} from 'react';
 import {View, Linking} from 'react-native';
 import _ from 'underscore';
+import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import CONST from '../../../CONST';
 import ROUTES from '../../../ROUTES';
+import compose from '../../../libs/compose';
+import ONYXKEYS from '../../../ONYXKEYS';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import TextLink from '../../../components/TextLink';
 import Text from '../../../components/Text';
@@ -20,13 +24,27 @@ import Icon from '../../../components/Icon';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import variables from '../../../styles/variables';
 import PressableWithoutFeedback from '../../../components/Pressable/PressableWithoutFeedback';
+import paypalMeDataPropTypes from '../../../components/paypalMeDataPropTypes';
+
+const propTypes = {
+    /** Account details for PayPal.Me */
+    payPalMeData: paypalMeDataPropTypes,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    payPalMeData: {},
+};
 
 function AddPayPalMePage(props) {
-    const [payPalMeUsername, setPayPalMeUsername] = useState('');
+    const [payPalMeUsername, setPayPalMeUsername] = useState(lodashGet(props.payPalMeData, 'accountData.username', ''));
     const [payPalMeUsernameError, setPayPalMeUsernameError] = useState(false);
     const payPalMeInput = useRef(null);
 
-    const growlMessageOnSave = props.translate('addPayPalMePage.growlMessageOnSave');
+    const hasPaypalAccount = !_.isEmpty(props.payPalMeData);
+
+    const growlMessageOnSave = props.translate(hasPaypalAccount ? 'addPayPalMePage.growlMessageOnUpdate' : 'addPayPalMePage.growlMessageOnSave');
 
     /**
      * Sets the payPalMe username and error data for the current user
@@ -104,14 +122,22 @@ function AddPayPalMePage(props) {
                     pressOnEnter
                     style={[styles.mt3]}
                     isDisabled={_.isEmpty(payPalMeUsername.trim())}
-                    text={props.translate('addPayPalMePage.addPayPalAccount')}
+                    text={props.translate(hasPaypalAccount ? 'addPayPalMePage.updatePaypalAccount' : 'addPayPalMePage.addPayPalAccount')}
                 />
             </FixedFooter>
         </ScreenWrapper>
     );
 }
 
-AddPayPalMePage.propTypes = {...withLocalizePropTypes};
+AddPayPalMePage.propTypes = propTypes;
+AddPayPalMePage.defaultProps = defaultProps;
 AddPayPalMePage.displayName = 'AddPayPalMePage';
 
-export default withLocalize(AddPayPalMePage);
+export default compose(
+    withLocalize,
+    withOnyx({
+        payPalMeData: {
+            key: ONYXKEYS.PAYPAL,
+        },
+    }),
+)(AddPayPalMePage);

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

@@ -68,6 +68,7 @@ class BasePaymentsPage extends React.Component {
         this.navigateToTransferBalancePage = this.navigateToTransferBalancePage.bind(this);
         this.setMenuPosition = this.setMenuPosition.bind(this);
         this.listHeaderComponent = this.listHeaderComponent.bind(this);
+        this.navigateToAddPaypalRoute = this.navigateToAddPaypalRoute.bind(this);
 
         this.debounceSetShouldShowLoadingSpinner = _.debounce(this.setShouldShowLoadingSpinner.bind(this), CONST.TIMING.SHOW_LOADING_SPINNER_DEBOUNCE_TIME);
     }
@@ -329,6 +330,13 @@ class BasePaymentsPage extends React.Component {
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE);
     }
 
+    navigateToAddPaypalRoute() {
+        Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME);
+        this.setState({
+            shouldShowDefaultDeleteMenu: false,
+        });
+    }
+
     listHeaderComponent() {
         return (
             <>
@@ -386,7 +394,6 @@ class BasePaymentsPage extends React.Component {
             Permissions.canUseWallet(this.props.betas) &&
             !isPayPalMeSelected &&
             !(this.state.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.BANK_ACCOUNT && this.state.selectedPaymentMethod.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);
-
         // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens
         const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth;
         return (
@@ -465,6 +472,13 @@ class BasePaymentsPage extends React.Component {
                                     text={this.props.translate('paymentsPage.setDefaultConfirmation')}
                                 />
                             )}
+                            {isPayPalMeSelected && (
+                                <Button
+                                    onPress={this.navigateToAddPaypalRoute}
+                                    style={[styles.mb4]}
+                                    text={this.props.translate('common.edit')}
+                                />
+                            )}
                             <Button
                                 onPress={() => {
                                     this.setState({