Add New payments page

src/ROUTES.js

@@ -19,6 +19,7 @@ export default {
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_PAYMENTS: 'settings/payments',
+    SETTINGS_ADD_PAYPAL_ME: 'settings/payments/addPayPalMe',
     SETTINGS_ADD_LOGIN: 'settings/addlogin/:type',
     getSettingsAddLoginRoute: type => `settings/addlogin/${type}`,
     NEW_GROUP: 'new/group',

src/components/Icon/Expensicons.js

@@ -10,6 +10,7 @@ import ChatBubble from '../../../assets/images/chatbubble.svg';
 import Checkmark from '../../../assets/images/checkmark.svg';
 import Clipboard from '../../../assets/images/clipboard.svg';
 import Close from '../../../assets/images/close.svg';
+import CreditCard from '../../../assets/images/creditcard.svg';
 import DownArrow from '../../../assets/images/down.svg';
 import Download from '../../../assets/images/download.svg';
 import Emoji from '../../../assets/images/emoji.svg';
@@ -30,6 +31,7 @@ import NewWindow from '../../../assets/images/new-window.svg';
 import Offline from '../../../assets/images/offline.svg';
 import Paperclip from '../../../assets/images/paperclip.svg';
 import Paycheck from '../../../assets/images/paycheck.svg';
+import PayPal from '../../../assets/images/paypal.svg';
 import Pencil from '../../../assets/images/pencil.svg';
 import Phone from '../../../assets/images/phone.svg';
 import Pin from '../../../assets/images/pin.svg';
@@ -60,6 +62,7 @@ export {
     Checkmark,
     Clipboard,
     Close,
+    CreditCard,
     DownArrow,
     Download,
     Emoji,
@@ -81,6 +84,7 @@ export {
     Offline,
     Paperclip,
     Paycheck,
+    PayPal,
     Pencil,
     Phone,
     Pin,

src/components/CreateMenu/BaseCreateMenu.js → src/components/PopoverMenu/BasePopoverMenu.js

@@ -8,7 +8,7 @@ import MenuItem from '../MenuItem';
 import {
     propTypes as createMenuPropTypes,
     defaultProps as defaultCreateMenuPropTypes,
-} from './CreateMenuPropTypes';
+} from './PopoverMenuPropTypes';
 
 const propTypes = {
     /** Callback fired when the menu is completely closed */
@@ -23,7 +23,7 @@ const defaultProps = {
     onMenuHide: () => {},
 };
 
-class BaseCreateMenu extends PureComponent {
+class BasePopoverMenu extends PureComponent {
     render() {
         return (
             <Popover
@@ -61,6 +61,6 @@ class BaseCreateMenu extends PureComponent {
     }
 }
 
-BaseCreateMenu.propTypes = propTypes;
-BaseCreateMenu.defaultProps = defaultProps;
-export default withWindowDimensions(BaseCreateMenu);
+BasePopoverMenu.propTypes = propTypes;
+BasePopoverMenu.defaultProps = defaultProps;
+export default withWindowDimensions(BasePopoverMenu);

src/components/CreateMenu/index.js → src/components/PopoverMenu/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import BaseCreateMenu from './BaseCreateMenu';
-import {propTypes, defaultProps} from './CreateMenuPropTypes';
+import BasePopoverMenu from './BasePopoverMenu';
+import {propTypes, defaultProps} from './PopoverMenuPropTypes';
 
 /**
  * The web implementation of the menu needs to trigger actions before the popup closes
@@ -12,19 +12,19 @@ import {propTypes, defaultProps} from './CreateMenuPropTypes';
  * @param {Object} props
  * @returns {React.ReactElement}
  */
-const CreateMenu = (props) => {
+const PopoverMenu = (props) => {
     // Trigger the item's `onSelect` action as soon as clicked
     const selectItem = (item) => {
         item.onSelected();
         props.onItemSelected(item);
     };
 
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <BaseCreateMenu {...props} onItemSelected={selectItem} />;
+    return <BasePopoverMenu {...props} onItemSelected={selectItem} />;
 };
 
-CreateMenu.propTypes = propTypes;
-CreateMenu.defaultProps = defaultProps;
-CreateMenu.displayName = 'CreateMenu';
+PopoverMenu.propTypes = propTypes;
+PopoverMenu.defaultProps = defaultProps;
+PopoverMenu.displayName = 'PopoverMenu';
 
-export default CreateMenu;
+export default PopoverMenu;

src/components/CreateMenu/index.native.js → src/components/PopoverMenu/index.native.js

@@ -1,13 +1,13 @@
 import React, {Component} from 'react';
-import BaseCreateMenu from './BaseCreateMenu';
-import {propTypes, defaultProps} from './CreateMenuPropTypes';
+import BasePopoverMenu from './BasePopoverMenu';
+import {propTypes, defaultProps} from './PopoverMenuPropTypes';
 
 /**
  * The mobile native implementation of the CreateMenu needs to trigger actions after the popup closes
  * We need to wait for the modal to close otherwise menu actions that trigger another modal
  * would not work
  */
-class CreateMenu extends Component {
+class PopoverMenu extends Component {
     /**
      * Set the item's `onSelected` action to fire after the menu popup closes
      * @param {{onSelected: function}} item
@@ -25,7 +25,7 @@ class CreateMenu extends Component {
 
     render() {
         return (
-            <BaseCreateMenu
+            <BasePopoverMenu
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...this.props}
                 onMenuHide={this.onMenuHide}
@@ -35,7 +35,7 @@ class CreateMenu extends Component {
     }
 }
 
-CreateMenu.propTypes = propTypes;
-CreateMenu.defaultProps = defaultProps;
+PopoverMenu.propTypes = propTypes;
+PopoverMenu.defaultProps = defaultProps;
 
-export default CreateMenu;
+export default PopoverMenu;

src/languages/en.js

@@ -16,6 +16,7 @@ export default {
         password: 'Password',
         profile: 'Profile',
         payments: 'Payments',
+        payPalMe: 'PayPal.me',
         preferences: 'Preferences',
         view: 'View',
         not: 'Not',
@@ -213,7 +214,7 @@ export default {
         newPasswordPrompt: 'New password must be different than your old password, have at least 8 characters,\n1 capital letter, 1 lowercase letter, 1 number.',
         confirmNewPassword: 'Confirm New Password',
     },
-    paymentsPage: {
+    addPayPalMePage: {
         enterYourUsernameToGetPaidViaPayPal: 'Enter your username to get paid back via PayPal.',
         payPalMe: 'PayPal.me/',
         yourPayPalUsername: 'Your PayPal username',

src/languages/es.js

@@ -210,7 +210,7 @@ export default {
         newPasswordPrompt: 'La nueva contraseña tiene que ser diferente de la antigua, tener al menos 8 letras,\n1 letra mayúscula, 1 letra minúscula y 1 número.',
         confirmNewPassword: 'Confirma la Nueva Contraseña',
     },
-    paymentsPage: {
+    addPayPalMePage: {
         enterYourUsernameToGetPaidViaPayPal: 'Escribe tu nombre de usuario para que otros puedan pagarte a través de PayPal.',
         payPalMe: 'PayPal.me/',
         yourPayPalUsername: 'Tu usuario de PayPal',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -15,7 +15,8 @@ import SettingsPreferencesPage from '../../../pages/settings/PreferencesPage';
 import SettingsAboutPage from '../../../pages/settings/AboutPage';
 import SettingsAppDownloadLinks from '../../../pages/settings/AppDownloadLinks';
 import SettingsPasswordPage from '../../../pages/settings/PasswordPage';
-import SettingsPaymentsPage from '../../../pages/settings/PaymentsPage';
+import SettingsPaymentsPage from '../../../pages/settings/Payments/PaymentsPage';
+import SettingsAddPayPalMePage from '../../../pages/settings/Payments/AddPayPalMePage';
 import SettingsAddSecondaryLoginPage from '../../../pages/settings/AddSecondaryLoginPage';
 import IOUCurrencySelection from '../../../pages/iou/IOUCurrencySelection';
 import ReportParticipantsPage from '../../../pages/ReportParticipantsPage';
@@ -144,6 +145,10 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         Component: SettingsPaymentsPage,
         name: 'Settings_Payments',
     },
+    {
+        Component: SettingsAddPayPalMePage,
+        name: 'Settings_Add_Paypal_Me',
+    },
 ]);
 
 const EnablePaymentsStackNavigator = createModalStackNavigator([{

src/libs/Navigation/linkingConfig.js

@@ -44,6 +44,10 @@ export default {
                         path: ROUTES.SETTINGS_PAYMENTS,
                         exact: true,
                     },
+                    Settings_Add_Paypal_Me: {
+                        path: ROUTES.SETTINGS_ADD_PAYPAL_ME,
+                        exact: true,
+                    },
                     Settings_Profile: {
                         path: ROUTES.SETTINGS_PROFILE,
                         exact: true,

src/libs/actions/PaymentMethods.js

@@ -2,16 +2,20 @@ import lodashGet from 'lodash/get';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as API from '../API';
+import CONST from '../../CONST';
 
 function getPaymentMethods() {
     API.Get({
-        returnValueList: 'bankAccountList, cardList, userWallet',
+        returnValueList: 'bankAccountList, cardList, userWallet, nameValuePairs',
+        name: 'paypalMeAddress',
     })
         .then((response) => {
             Onyx.multiSet({
                 [ONYXKEYS.USER_WALLET]: lodashGet(response, 'userWallet', null),
                 [ONYXKEYS.BANK_ACCOUNT_LIST]: lodashGet(response, 'bankAccountList', []),
                 [ONYXKEYS.CARD_LIST]: lodashGet(response, 'cardList', []),
+                [ONYXKEYS.NVP_PAYPAL_ME_ADDRESS]:
+                    lodashGet(response, `nameValuePairs.${CONST.NVP.PAYPAL_ME_ADDRESS}`, ''),
             });
         });
 }

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}, ${CONST.NVP.PAYPAL_ME_ADDRESS}`,
+        nvpNames: `${CONST.NVP.BLOCKED_FROM_CONCIERGE}`,
     })
         .then((response) => {
             // Update the User onyx key

src/pages/home/report/ReportActionCompose.js

@@ -36,7 +36,7 @@ import {
 import ReportTypingIndicator from './ReportTypingIndicator';
 import AttachmentModal from '../../../components/AttachmentModal';
 import compose from '../../../libs/compose';
-import CreateMenu from '../../../components/CreateMenu';
+import PopoverMenu from '../../../components/PopoverMenu';
 import Popover from '../../../components/Popover';
 import EmojiPickerMenu from './EmojiPickerMenu';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
@@ -442,7 +442,7 @@ class ReportActionCompose extends React.Component {
                                             >
                                                 <Icon src={Plus} />
                                             </TouchableOpacity>
-                                            <CreateMenu
+                                            <PopoverMenu
                                                 isVisible={this.state.isMenuVisible}
                                                 onClose={() => this.setMenuVisibility(false)}
                                                 onItemSelected={() => this.setMenuVisibility(false)}

src/pages/home/sidebar/SidebarScreen.js

@@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
 import SidebarLinks from './SidebarLinks';
-import CreateMenu from '../../../components/CreateMenu';
+import PopoverMenu from '../../../components/PopoverMenu';
 import FAB from '../../../components/FAB';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import Navigation from '../../../libs/Navigation/Navigation';
@@ -103,7 +103,7 @@ class SidebarScreen extends Component {
                                 onPress={this.toggleCreateMenu}
                             />
                         </View>
-                        <CreateMenu
+                        <PopoverMenu
                             onClose={this.toggleCreateMenu}
                             isVisible={this.state.isCreateMenuActive}
                             anchorPosition={styles.createMenuPositionSidebar}

src/pages/iou/IOUDetailsModal.js

@@ -18,7 +18,7 @@ import IOUTransactions from './IOUTransactions';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import CONST from '../../CONST';
-import CreateMenu from '../../components/CreateMenu';
+import PopoverMenu from '../../components/PopoverMenu';
 import isAppInstalled from '../../libs/isAppInstalled';
 import Button from '../../components/Button';
 import Permissions from '../../libs/Permissions';
@@ -249,7 +249,7 @@ class IOUDetailsModal extends Component {
                                     />
                                 )}
                                 {this.state.paymentOptions.length > 1 && (
-                                    <CreateMenu
+                                    <PopoverMenu
                                         isVisible={this.state.isSettlementMenuVisible}
                                         onClose={() => this.setMenuVisibility(false)}
                                         onItemSelected={() => this.setMenuVisibility(false)}