From 715fa3e27a24acc09873240216275f128cf98aa9 Mon Sep 17 00:00:00 2001
From: tugbadogan <tugbadogan92@gmail.com>
Date: Wed, 14 Jul 2021 13:59:55 +0100
Subject: [PATCH 1/3] Hide Add Payment Method button

Hide Paypal.me button if there is a Paypal.me username.
Hide Add Payment Method button if there is no available payment method.
---
 .../settings/Payments/PaymentMethodList.js    | 17 +++++++----
 src/pages/settings/Payments/PaymentsPage.js   | 28 +++++++++++++++----
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
index 8b6ea1d4d01b..0994ca80a31e 100644
--- a/src/pages/settings/Payments/PaymentMethodList.js
+++ b/src/pages/settings/Payments/PaymentMethodList.js
@@ -110,12 +110,17 @@ class PaymentMethodList extends Component {
             });
         }
 
-        combinedPaymentMethods.push({
-            title: this.props.translate('paymentMethodList.addPaymentMethod'),
-            icon: Plus,
-            onPress: e => this.props.onPress(e),
-            key: 'addPaymentMethodButton',
-        });
+        // Don't show Add Payment Method button if user provided details for all possible payment methods.
+        // Right now only available method is Paypal.me
+        // When there is a new payment method, it needs to be added to following if condition.
+        if (!this.props.payPalMeUsername) {
+            combinedPaymentMethods.push({
+                title: this.props.translate('paymentMethodList.addPaymentMethod'),
+                icon: Plus,
+                onPress: e => this.props.onPress(e),
+                key: 'addPaymentMethodButton',
+            });
+        }
 
         return combinedPaymentMethods;
     }
diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js
index a3121567f8bf..f5e38e8ae691 100644
--- a/src/pages/settings/Payments/PaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../../ONYXKEYS';
 import PaymentMethodList from './PaymentMethodList';
 import ROUTES from '../../../ROUTES';
 import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
@@ -18,9 +21,16 @@ import getClickedElementLocation from '../../../libs/getClickedElementLocation';
 const PAYPAL = 'payPalMe';
 
 const propTypes = {
+    /** User's paypal.me username if they have one */
+    payPalMeUsername: PropTypes.string,
+
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    payPalMeUsername: '',
+};
+
 class PaymentsPage extends React.Component {
     constructor(props) {
         super(props);
@@ -104,11 +114,13 @@ class PaymentsPage extends React.Component {
                             left: this.state.anchorPositionLeft,
                         }}
                     >
-                        <MenuItem
-                            title="PayPal.me"
-                            icon={PayPal}
-                            onPress={() => this.addPaymentMethodTypePressed(PAYPAL)}
-                        />
+                        {!this.props.payPalMeUsername && (
+                            <MenuItem
+                                title="PayPal.me"
+                                icon={PayPal}
+                                onPress={() => this.addPaymentMethodTypePressed(PAYPAL)}
+                            />
+                        )}
                     </Popover>
                 </KeyboardAvoidingView>
             </ScreenWrapper>
@@ -117,8 +129,14 @@ class PaymentsPage extends React.Component {
 }
 
 PaymentsPage.propTypes = propTypes;
+PaymentsPage.defaultProps = defaultProps;
 PaymentsPage.displayName = 'PaymentsPage';
 
 export default compose(
     withLocalize,
+    withOnyx({
+        payPalMeUsername: {
+            key: ONYXKEYS.NVP_PAYPAL_ME_ADDRESS,
+        },
+    }),
 )(PaymentsPage);

From e1bc2e56d3401c98ebc10aea59fed59bb5e171aa Mon Sep 17 00:00:00 2001
From: tugbadogan <tugbadogan92@gmail.com>
Date: Wed, 14 Jul 2021 14:13:29 +0100
Subject: [PATCH 2/3] Make Paypal.me user name editable

---
 src/pages/settings/Payments/AddPayPalMePage.js | 2 --
 src/pages/settings/Payments/PaymentsPage.js    | 4 +++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index e6601581b0bc..774f82563cdf 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -92,7 +92,6 @@ class AddPayPalMePage extends React.Component {
                                 value={this.state.payPalMeUsername}
                                 placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
                                 onChangeText={text => this.setState({payPalMeUsername: text})}
-                                editable={!this.props.payPalMeUsername}
                                 returnKeyType="done"
                             />
                         </View>
@@ -100,7 +99,6 @@ class AddPayPalMePage extends React.Component {
                     <FixedFooter>
                         <Button
                             success
-                            isDisabled={Boolean(this.props.payPalMeUsername)}
                             onPress={this.setPayPalMeUsername}
                             style={[styles.mt3]}
                             text={this.props.translate('addPayPalMePage.addPayPalAccount')}
diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js
index f5e38e8ae691..7f2dc9deb8ad 100644
--- a/src/pages/settings/Payments/PaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage.js
@@ -58,7 +58,9 @@ class PaymentsPage extends React.Component {
      */
     paymentMethodPressed(nativeEvent, account) {
         if (account) {
-            // TODO: Show the make default/delete popover
+            if (account === PAYPAL) {
+                Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME);
+            }
         } else {
             const position = getClickedElementLocation(nativeEvent);
             this.setState({

From f8c684f16087a831d7c85899e2370d2d21ea316f Mon Sep 17 00:00:00 2001
From: tugbadogan <tugbadogan92@gmail.com>
Date: Wed, 14 Jul 2021 23:41:22 +0100
Subject: [PATCH 3/3] Fixed API call

---
 src/libs/actions/User.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index 6e785629e6c9..4bf663aca62f 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -64,7 +64,7 @@ function getBetas() {
 function getUserDetails() {
     API.Get({
         returnValueList: 'account, loginList, nameValuePairs',
-        nvpNames: CONST.NVP.BLOCKED_FROM_CONCIERGE,
+        nvpNames: [CONST.NVP.BLOCKED_FROM_CONCIERGE, CONST.NVP.PAYPAL_ME_ADDRESS].join(','),
     })
         .then((response) => {
             // Update the User onyx key