diff --git a/assets/images/creditcard.svg b/assets/images/creditcard.svg new file mode 100644 index 000000000000..9d701f73e2bf --- /dev/null +++ b/assets/images/creditcard.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/assets/images/paypal.svg b/assets/images/paypal.svg index 01599d5021d5..752dac9dac95 100644 --- a/assets/images/paypal.svg +++ b/assets/images/paypal.svg @@ -5,9 +5,9 @@ - - + - diff --git a/src/CONST.js b/src/CONST.js index b4255d042439..dd1005bc037a 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -88,6 +88,13 @@ const CONST = { COMPLETE: 'complete', DISABLED: 'disabled', }, + CARD_TYPES: { + /** This is a default card type that all users have. It is just a placeholder, not an actual card */ + DEFAULT_CASH: '__CASH__', + }, + BANK_ACCOUNT_TYPES: { + WALLET: 'WALLET', + }, COUNTRY: { US: 'US', MX: 'MX', diff --git a/src/ROUTES.js b/src/ROUTES.js index d77cf02ed13a..e85d3c9d7d4e 100644 --- a/src/ROUTES.js +++ b/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', diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 98b54c92403e..d41626c25810 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -11,6 +11,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'; @@ -33,7 +34,7 @@ import NewWorkspace from '../../../assets/images/new-workspace.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 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'; @@ -64,6 +65,7 @@ export { Checkmark, Clipboard, Close, + CreditCard, DownArrow, Download, Emoji, @@ -86,7 +88,7 @@ export { Offline, Paperclip, Paycheck, - Paypal, + PayPal, Pencil, Phone, Pin, diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 8807e4679d43..e2108ef60824 100644 --- a/src/components/MenuItem.js +++ b/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 && ( @@ -124,11 +124,16 @@ const MenuItem = ({ )} - + {title} {description && ( - + {description} )} @@ -138,14 +143,14 @@ const MenuItem = ({ {subtitle && ( {subtitle} )} {shouldShowRightIcon && ( - + )} - )} diff --git a/src/components/CreateMenu/BaseCreateMenu.js b/src/components/PopoverMenu/BasePopoverMenu.js similarity index 90% rename from src/components/CreateMenu/BaseCreateMenu.js rename to src/components/PopoverMenu/BasePopoverMenu.js index 8d35c218081a..22dc315b1c6d 100644 --- a/src/components/CreateMenu/BaseCreateMenu.js +++ b/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 ( { +const PopoverMenu = (props) => { // Trigger the item's `onSelect` action as soon as clicked const selectItem = (item) => { item.onSelected(); @@ -20,11 +20,11 @@ const CreateMenu = (props) => { }; // eslint-disable-next-line react/jsx-props-no-spreading - return ; + return ; }; -CreateMenu.propTypes = propTypes; -CreateMenu.defaultProps = defaultProps; -CreateMenu.displayName = 'CreateMenu'; +PopoverMenu.propTypes = propTypes; +PopoverMenu.defaultProps = defaultProps; +PopoverMenu.displayName = 'PopoverMenu'; -export default CreateMenu; +export default PopoverMenu; diff --git a/src/components/CreateMenu/index.native.js b/src/components/PopoverMenu/index.native.js similarity index 68% rename from src/components/CreateMenu/index.native.js rename to src/components/PopoverMenu/index.native.js index 6d20a86850f8..b4e48377f290 100644 --- a/src/components/CreateMenu/index.native.js +++ b/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 ( - { 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], ''), }); }); } diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js index 8c57493cbfb3..6e785629e6c9 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}, ${CONST.NVP.PAYPAL_ME_ADDRESS}`, + nvpNames: CONST.NVP.BLOCKED_FROM_CONCIERGE, }) .then((response) => { // Update the User onyx key diff --git a/src/libs/getClickedElementLocation/index.js b/src/libs/getClickedElementLocation/index.js new file mode 100644 index 000000000000..f3fa4112a657 --- /dev/null +++ b/src/libs/getClickedElementLocation/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 getClickedElementLocation(nativeEvent) { + return nativeEvent.currentTarget.getBoundingClientRect(); +} + +export default getClickedElementLocation; diff --git a/src/libs/getClickedElementLocation/index.native.js b/src/libs/getClickedElementLocation/index.native.js new file mode 100644 index 000000000000..e6ed6a720435 --- /dev/null +++ b/src/libs/getClickedElementLocation/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 getClickedElementLocation() { + return { + bottom: 0, + left: 0, + }; +} + +export default getClickedElementLocation; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index d1449ed486aa..a9336d0e68da 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/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 { > - this.setMenuVisibility(false)} onItemSelected={() => this.setMenuVisibility(false)} diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen.js index ab73bb4c47c8..fcfd60c59950 100755 --- a/src/pages/home/sidebar/SidebarScreen.js +++ b/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} /> - )} {this.state.paymentOptions.length > 1 && ( - this.setMenuVisibility(false)} onItemSelected={() => this.setMenuVisibility(false)} diff --git a/src/pages/settings/InitialPage.js b/src/pages/settings/InitialPage.js index 724548a171b3..c2d6d001529f 100755 --- a/src/pages/settings/InitialPage.js +++ b/src/pages/settings/InitialPage.js @@ -131,7 +131,7 @@ const InitialSettingsPage = ({ title: policy.name, icon: Building, action: () => Navigation.navigate(ROUTES.getWorkspaceCardRoute(policy.id)), - iconStyles: [styles.createMenuIconEmphasized], + iconStyles: [styles.popoverMenuIconEmphasized], iconFill: themeColors.iconReversed, })) .value(); diff --git a/src/pages/settings/PaymentsPage.js b/src/pages/settings/Payments/AddPayPalMePage.js old mode 100755 new mode 100644 similarity index 68% rename from src/pages/settings/PaymentsPage.js rename to src/pages/settings/Payments/AddPayPalMePage.js index 34a5fcf2f5b1..70437936f971 --- a/src/pages/settings/PaymentsPage.js +++ b/src/pages/settings/Payments/AddPayPalMePage.js @@ -2,22 +2,22 @@ import React from 'react'; import {TextInput, View} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; -import CONST from '../../CONST'; -import ONYXKEYS from '../../ONYXKEYS'; -import ROUTES from '../../ROUTES'; -import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; -import Text from '../../components/Text'; -import ScreenWrapper from '../../components/ScreenWrapper'; -import NameValuePair from '../../libs/actions/NameValuePair'; -import {getUserDetails} from '../../libs/actions/User'; -import Navigation from '../../libs/Navigation/Navigation'; -import styles from '../../styles/styles'; -import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; -import compose from '../../libs/compose'; -import Button from '../../components/Button'; -import KeyboardAvoidingView from '../../components/KeyboardAvoidingView'; -import FixedFooter from '../../components/FixedFooter'; -import Growl from '../../libs/Growl'; +import CONST from '../../../CONST'; +import ONYXKEYS from '../../../ONYXKEYS'; +import ROUTES from '../../../ROUTES'; +import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; +import Text from '../../../components/Text'; +import ScreenWrapper from '../../../components/ScreenWrapper'; +import NameValuePair from '../../../libs/actions/NameValuePair'; +import {getUserDetails} from '../../../libs/actions/User'; +import Navigation from '../../../libs/Navigation/Navigation'; +import styles from '../../../styles/styles'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import compose from '../../../libs/compose'; +import Button from '../../../components/Button'; +import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; +import FixedFooter from '../../../components/FixedFooter'; +import Growl from '../../../libs/Growl'; const propTypes = { /** Username for PayPal.Me */ @@ -30,7 +30,7 @@ const defaultProps = { payPalMeUsername: '', }; -class PaymentsPage extends React.Component { +class AddPayPalMePage extends React.Component { constructor(props) { super(props); @@ -58,7 +58,7 @@ class PaymentsPage extends React.Component { */ setPayPalMeUsername() { NameValuePair.set(CONST.NVP.PAYPAL_ME_ADDRESS, this.state.payPalMeUsername, ONYXKEYS.NVP_PAYPAL_ME_ADDRESS); - Growl.show(this.props.translate('paymentsPage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000); + Growl.show(this.props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000); } render() { @@ -71,18 +71,18 @@ class PaymentsPage extends React.Component { > Navigation.navigate(ROUTES.SETTINGS)} + onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)} onCloseButtonPress={() => Navigation.dismissModal(true)} /> - {this.props.translate('paymentsPage.enterYourUsernameToGetPaidViaPayPal')} + {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')} - {this.props.translate('paymentsPage.payPalMe')} + {this.props.translate('addPayPalMePage.payPalMe')} this.paypalUsernameInputRef = el} @@ -90,7 +90,7 @@ class PaymentsPage extends React.Component { autoCorrect={false} style={[styles.textInput]} value={this.state.payPalMeUsername} - placeholder={this.props.translate('paymentsPage.yourPayPalUsername')} + placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')} onChangeText={text => this.setState({payPalMeUsername: text})} editable={!this.props.payPalMeUsername} returnKeyType="done" @@ -103,7 +103,7 @@ class PaymentsPage extends React.Component { isDisabled={Boolean(this.props.payPalMeUsername)} onPress={this.setPayPalMeUsername} style={[styles.mt3]} - text={this.props.translate('paymentsPage.addPayPalAccount')} + text={this.props.translate('addPayPalMePage.addPayPalAccount')} /> @@ -112,9 +112,9 @@ class PaymentsPage extends React.Component { } } -PaymentsPage.propTypes = propTypes; -PaymentsPage.defaultProps = defaultProps; -PaymentsPage.displayName = 'PaymentsPage'; +AddPayPalMePage.propTypes = propTypes; +AddPayPalMePage.defaultProps = defaultProps; +AddPayPalMePage.displayName = 'AddPayPalMePage'; export default compose( withLocalize, @@ -123,4 +123,4 @@ export default compose( key: ONYXKEYS.NVP_PAYPAL_ME_ADDRESS, }, }), -)(PaymentsPage); +)(AddPayPalMePage); diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js new file mode 100644 index 000000000000..8b6ea1d4d01b --- /dev/null +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -0,0 +1,173 @@ +import _ from 'underscore'; +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {FlatList} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import MenuItem from '../../../components/MenuItem'; +import compose from '../../../libs/compose'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import ONYXKEYS from '../../../ONYXKEYS'; +import CONST from '../../../CONST'; +import { + Bank, + CreditCard, + PayPal, + Plus, + Wallet, +} from '../../../components/Icon/Expensicons'; + +const propTypes = { + /** What to do when a menu item is pressed */ + onPress: PropTypes.func.isRequired, + + /** User's paypal.me username if they have one */ + payPalMeUsername: PropTypes.string, + + /** Array of bank account objects */ + bankAccountList: PropTypes.arrayOf(PropTypes.shape({ + /** The name of the institution (bank of america, etc */ + addressName: PropTypes.string, + + /** The masked bank account number */ + accountNumber: PropTypes.string, + + /** The bankAccountID in the bankAccounts db */ + bankAccountID: PropTypes.number, + + /** The bank account type */ + type: PropTypes.string, + })), + + /** Array of card objects */ + cardList: PropTypes.arrayOf(PropTypes.shape({ + /** The name of the institution (bank of america, etc */ + cardName: PropTypes.string, + + /** The masked credit card number */ + cardNumber: PropTypes.string, + + /** The ID of the card in the cards DB */ + cardID: PropTypes.number, + })), + + ...withLocalizePropTypes, +}; + +const defaultProps = { + payPalMeUsername: '', + bankAccountList: [], + cardList: [], +}; + +class PaymentMethodList extends Component { + constructor(props) { + super(props); + + this.renderItem = this.renderItem.bind(this); + } + + /** + * Take all of the different payment methods and create a list that can be easily digested by renderItem + * + * @returns {Array} + */ + createPaymentMethodList() { + const combinedPaymentMethods = []; + + _.each(this.props.bankAccountList, (bankAccount) => { + combinedPaymentMethods.push({ + title: bankAccount.addressName, + + // eslint-disable-next-line + description: `${this.props.translate('paymentMethodList.accountLastFour')} ${bankAccount.accountNumber.slice(-4)}`, + icon: bankAccount.type === CONST.BANK_ACCOUNT_TYPES.WALLET ? Wallet : Bank, + onPress: e => this.props.onPress(e, bankAccount.bankAccountID), + key: `bankAccount-${bankAccount.bankAccountID}`, + }); + }); + + _.each(this.props.cardList, (card) => { + if (card.cardName !== CONST.CARD_TYPES.DEFAULT_CASH) { + combinedPaymentMethods.push({ + title: card.cardName, + + // eslint-disable-next-line + description: `${this.props.translate('paymentMethodList.cardLastFour')} ${card.cardNumber.slice(-4)}`, + icon: CreditCard, + onPress: e => this.props.onPress(e, card.cardID), + key: `card-${card.cardID}`, + }); + } + }); + + if (this.props.payPalMeUsername) { + combinedPaymentMethods.push({ + title: 'PayPal.me', + description: this.props.payPalMeUsername, + icon: PayPal, + onPress: e => this.props.onPress(e, 'payPalMe'), + key: 'payPalMePaymentMethod', + }); + } + + combinedPaymentMethods.push({ + title: this.props.translate('paymentMethodList.addPaymentMethod'), + icon: Plus, + onPress: e => this.props.onPress(e), + key: 'addPaymentMethodButton', + }); + + return combinedPaymentMethods; + } + + /** + * Create a menuItem for each passed paymentMethod + * + * @param {Object} params + * @param {Object} params.item + * + * @return {React.Component} + */ + renderItem({item}) { + return ( + + ); + } + + render() { + return ( + + ); + } +} + +PaymentMethodList.propTypes = propTypes; +PaymentMethodList.defaultProps = defaultProps; + +export default compose( + withLocalize, + withOnyx({ + bankAccountList: { + key: ONYXKEYS.BANK_ACCOUNT_LIST, + }, + cardList: { + key: ONYXKEYS.CARD_LIST, + }, + userWallet: { + key: ONYXKEYS.USER_WALLET, + }, + payPalMeUsername: { + key: ONYXKEYS.NVP_PAYPAL_ME_ADDRESS, + }, + }), +)(PaymentMethodList); diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js new file mode 100644 index 000000000000..a3121567f8bf --- /dev/null +++ b/src/pages/settings/Payments/PaymentsPage.js @@ -0,0 +1,124 @@ +import React from 'react'; +import {View} from 'react-native'; +import PaymentMethodList from './PaymentMethodList'; +import ROUTES from '../../../ROUTES'; +import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; +import ScreenWrapper from '../../../components/ScreenWrapper'; +import Navigation from '../../../libs/Navigation/Navigation'; +import styles from '../../../styles/styles'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import compose from '../../../libs/compose'; +import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView/index'; +import getPaymentMethods from '../../../libs/actions/PaymentMethods'; +import Popover from '../../../components/Popover'; +import {PayPal} from '../../../components/Icon/Expensicons'; +import MenuItem from '../../../components/MenuItem'; +import getClickedElementLocation from '../../../libs/getClickedElementLocation'; + +const PAYPAL = 'payPalMe'; + +const propTypes = { + ...withLocalizePropTypes, +}; + +class PaymentsPage extends React.Component { + constructor(props) { + super(props); + + this.state = { + shouldShowAddPaymentMenu: false, + anchorPositionTop: 0, + anchorPositionLeft: 0, + }; + + this.paymentMethodPressed = this.paymentMethodPressed.bind(this); + this.addPaymentMethodTypePressed = this.addPaymentMethodTypePressed.bind(this); + this.hideAddPaymentMenu = this.hideAddPaymentMenu.bind(this); + } + + componentDidMount() { + getPaymentMethods(); + } + + /** + * Display the delete/default menu, or the add payment method menu + * + * @param {Object} nativeEvent + * @param {String} account + */ + paymentMethodPressed(nativeEvent, account) { + if (account) { + // TODO: Show the make default/delete popover + } else { + const position = getClickedElementLocation(nativeEvent); + this.setState({ + shouldShowAddPaymentMenu: true, + anchorPositionTop: position.bottom, + + // We want the position to be 20px to the right of the left border + anchorPositionLeft: position.left + 20, + }); + } + } + + /** + * Navigate to the appropriate payment type addition screen + * + * @param {String} paymentType + */ + addPaymentMethodTypePressed(paymentType) { + this.hideAddPaymentMenu(); + + if (paymentType === PAYPAL) { + Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME); + } + } + + /** + * Hide the add payment modal + */ + hideAddPaymentMenu() { + this.setState({shouldShowAddPaymentMenu: false}); + } + + render() { + return ( + + + Navigation.navigate(ROUTES.SETTINGS)} + onCloseButtonPress={() => Navigation.dismissModal(true)} + /> + + + + + this.addPaymentMethodTypePressed(PAYPAL)} + /> + + + + ); + } +} + +PaymentsPage.propTypes = propTypes; +PaymentsPage.displayName = 'PaymentsPage'; + +export default compose( + withLocalize, +)(PaymentsPage); diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 52df9d412468..fd85b5a99995 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -24,7 +24,7 @@ import themeColors from '../../../styles/themes/default'; import LoginField from './LoginField'; import {DownArrow, Upload, Trashcan} from '../../../components/Icon/Expensicons'; import AttachmentPicker from '../../../components/AttachmentPicker'; -import CreateMenu from '../../../components/CreateMenu'; +import PopoverMenu from '../../../components/PopoverMenu'; import Picker from '../../../components/Picker'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import compose from '../../../libs/compose'; @@ -292,7 +292,7 @@ class ProfilePage extends Component { )} /> - this.setState({isEditPhotoMenuVisible: false})} onItemSelected={() => this.setState({isEditPhotoMenuVisible: false})} diff --git a/src/styles/styles.js b/src/styles/styles.js index d213bca928b8..22cf52ca528e 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -655,7 +655,7 @@ const styles = { color: themeColors.heading, }, - createMenuItem: { + popoverMenuItem: { flexDirection: 'row', borderRadius: 0, paddingHorizontal: 20, @@ -664,26 +664,26 @@ const styles = { width: '100%', }, - createMenuIcon: { + popoverMenuIcon: { width: variables.componentSizeNormal, height: variables.componentSizeNormal, justifyContent: 'center', alignItems: 'center', }, - createMenuIconEmphasized: { + popoverMenuIconEmphasized: { backgroundColor: themeColors.iconSuccessFill, borderRadius: variables.componentSizeLarge / 2, }, - createMenuText: { + popoverMenuText: { fontFamily: fontFamily.GTA_BOLD, fontSize: variables.fontSizeNormal, fontWeight: fontWeightBold, color: themeColors.heading, }, - createMenuDescription: { + popoverMenuDescription: { fontFamily: fontFamily.GTA, fontSize: variables.fontSizeLabel, color: themeColors.textSupporting,