From b5a4d743c5a3bf96a89e7c75f5b32343f96469f3 Mon Sep 17 00:00:00 2001 From: Brandon Stites Date: Thu, 17 Jun 2021 17:42:35 -0600 Subject: [PATCH 01/53] Move PayPalMe to its own page, and update translations --- src/languages/en.js | 3 +- .../AppNavigator/ModalStackNavigators.js | 2 +- .../settings/Payments/AddPayPalMePage.js | 118 ++++++++++++++++++ .../settings/{ => Payments}/PaymentsPage.js | 0 4 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 src/pages/settings/Payments/AddPayPalMePage.js rename src/pages/settings/{ => Payments}/PaymentsPage.js (100%) diff --git a/src/languages/en.js b/src/languages/en.js index d1bd0b5c52d0..f69043aabcdc 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -17,6 +17,7 @@ export default { password: 'Password', profile: 'Profile', payments: 'Payments', + payPalMe: 'PayPal.me', preferences: 'Preferences', view: 'View', not: 'Not', @@ -207,7 +208,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', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 2c48f3785e07..5644567df91b 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -15,7 +15,7 @@ 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 SettingsAddSecondaryLoginPage from '../../../pages/settings/AddSecondaryLoginPage'; import IOUCurrencySelection from '../../../pages/iou/IOUCurrencySelection'; import ReportParticipantsPage from '../../../pages/ReportParticipantsPage'; diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js new file mode 100644 index 000000000000..d9d8095b5900 --- /dev/null +++ b/src/pages/settings/Payments/AddPayPalMePage.js @@ -0,0 +1,118 @@ +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'; + +const propTypes = { + /** Username for PayPal.Me */ + payPalMeUsername: PropTypes.string, + + ...withLocalizePropTypes, +}; + +const defaultProps = { + payPalMeUsername: '', +}; + +class AddPayPalMePage extends React.Component { + constructor(props) { + super(props); + + this.state = { + payPalMeUsername: props.payPalMeUsername, + }; + this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this); + } + + componentDidMount() { + getUserDetails(); + } + + componentDidUpdate(prevProps) { + if (prevProps.payPalMeUsername !== this.props.payPalMeUsername) { + // Suppressing because this is within a conditional, and hence we won't run into an infinite loop + // eslint-disable-next-line react/no-did-update-set-state + this.setState({payPalMeUsername: this.props.payPalMeUsername}); + } + } + + /** + * Sets the payPalMeUsername for the current user + */ + setPayPalMeUsername() { + NameValuePair.set(CONST.NVP.PAYPAL_ME_ADDRESS, this.state.payPalMeUsername, ONYXKEYS.NVP_PAYPAL_ME_ADDRESS); + Growl.show(this.props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000); + } + + render() { + return ( + + + Navigation.navigate(ROUTES.SETTINGS)} + onCloseButtonPress={() => Navigation.dismissModal(true)} + /> + + + + {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')} + + + {this.props.translate('addPayPalMePage.payPalMe')} + + this.setState({payPalMeUsername: text})} + editable={!this.props.payPalMeUsername} + /> + + + +