Hide add payment button

src/pages/settings/Payments/AddPayPalMePage.js

@@ -92,15 +92,13 @@ 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>
                     </View>
                     <FixedFooter>
                         <Button
                             success
-                            isDisabled={Boolean(this.props.payPalMeUsername)}
                             onPress={this.setPayPalMeUsername}
                             style={[styles.mt3]}
                             text={this.props.translate('addPayPalMePage.addPayPalAccount')}

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

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);
@@ -48,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({
@@ -104,11 +116,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 +131,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);