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/add-paypal-me',
     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/MenuItem.js

@@ -98,7 +98,7 @@ const MenuItem = ({
             onPress(e);
         }}
         style={({hovered, pressed}) => ([
-            styles.createMenuItem,
+            styles.popoverMenuItem,
             getButtonBackgroundColorStyle(getButtonState(focused || hovered, pressed, success, disabled)),
             wrapperStyle,
         ])}
@@ -109,7 +109,7 @@ const MenuItem = ({
                     {icon && (
                         <View
                             style={[
-                                styles.createMenuIcon,
+                                styles.popoverMenuIcon,
                                 ...iconStyles,
                             ]}
                         >
@@ -124,11 +124,15 @@ const MenuItem = ({
                         </View>
                     )}
                     <View style={[styles.justifyContentCenter, styles.menuItemTextContainer]}>
-                        <Text style={[styles.createMenuText, styles.ml3, (disabled ? styles.disabledText : undefined)]}>
+                        <Text style={[
+                            styles.popoverMenuText,
+                            styles.ml3, (disabled ? styles.disabledText : undefined),
+                        ]}
+                        >
                             {title}
                         </Text>
                         {description && (
-                            <Text style={[styles.createMenuDescription, styles.ml3, styles.mt1]}>
+                            <Text style={[styles.popoverMenuDescription, styles.ml3, styles.mt1]}>
                                 {description}
                             </Text>
                         )}
@@ -138,22 +142,21 @@ const MenuItem = ({
                     {subtitle && (
                         <View style={[styles.justifyContentCenter, styles.mr1]}>
                             <Text
-                                style={styles.createMenuDescription}
+                                style={styles.popoverMenuDescription}
                             >
                                 {subtitle}
                             </Text>
                         </View>
                     )}
                     {shouldShowRightIcon && (
-                        <View style={styles.createMenuIcon}>
+                        <View style={styles.popoverMenuIcon}>
                             <Icon
                                 src={iconRight}
                                 fill={getIconFillColor(getButtonState(focused || hovered, pressed, success, disabled))}
                             />
                         </View>
                     )}
                 </View>
-
             </>
         )}
     </Pressable>

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
+ * The mobile native implementation of the PopoverMenu 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',
@@ -221,13 +222,18 @@ 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',
         addPayPalAccount: 'Add PayPal Account',
         growlMessageOnSave: 'Your PayPal username was successfully added',
     },
+    paymentMethodList: {
+        addPaymentMethod: 'Add Payment Method',
+        accountLastFour: 'Account ending in',
+        cardLastFour: 'Card ending in',
+    },
     preferencesPage: {
         mostRecent: 'Most Recent',
         mostRecentModeDescription: 'This will display all chats by default, sorted by most recent, with pinned items at the top',

src/languages/es.js

@@ -16,6 +16,7 @@ export default {
         password: 'Contraseña',
         profile: 'Perfil',
         payments: 'Pagos',
+        payPalMe: 'PayPal.me',
         preferences: 'Preferencias',
         view: 'Ver',
         not: 'No',
@@ -218,12 +219,17 @@ 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',
         addPayPalAccount: 'Agregar Cuenta de Paypal',
     },
+    paymentMethodList: {
+        addPaymentMethod: 'Agrega método de pago',
+        accountLastFour: 'Cuenta con terminación',
+        cardLastFour: 'Tarjeta con terminacíon',
+    },
     preferencesPage: {
         mostRecent: 'Más Recientes',
         mostRecentModeDescription: 'Esta opción muestra por defecto todos los chats, ordenados a partir del más reciente, con los chats destacados arriba de todo',

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';
@@ -150,6 +151,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,24 @@ import lodashGet from 'lodash/get';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as API from '../API';
+import CONST from '../../CONST';
+
+/**
+ * Calls the API to get the user's bankAccountList, cardList, wallet, and payPalMe
+ */
 
 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/libs/getPaymentMethodScreenLocation/index.js

@@ -0,0 +1,11 @@
+/**
+ * We don't need to get the position of the element on native platforms because the popover will be bottom mounted
+ *
+ * @param {Object} nativeEvent
+ * @returns {Object}
+ */
+function getPaymentMethodScreenLocation(nativeEvent) {
+    return nativeEvent.currentTarget.getBoundingClientRect();
+}
+
+export default getPaymentMethodScreenLocation;

src/libs/getPaymentMethodScreenLocation/index.native.js

@@ -0,0 +1,13 @@
+/**
+ * We don't need to get the position of the element on native platforms because the popover will be bottom mounted
+ *
+ * @returns {Object}
+ */
+function getPaymentMethodScreenLocation() {
+    return {
+        bottom: 0,
+        left: 0,
+    };
+}
+
+export default getPaymentMethodScreenLocation;