Paypal username field validation

src/CONST.js

@@ -441,6 +441,7 @@ const CONST = {
         CARD_NUMBER: /^[0-9]{15,16}$/,
         CARD_SECURITY_CODE: /^[0-9]{3,4}$/,
         CARD_EXPIRATION_DATE: /(0[1-9]|10|11|12)\/20[0-9]{2}$/,
+        PAYPAL_ME_USERNAME: /^[a-zA-Z0-9]*$/,
 
         // Adapted from: https://gist.github.com/dperini/729294
         // eslint-disable-next-line max-len

src/languages/en.js

@@ -282,6 +282,7 @@ export default {
         addPayPalAccount: 'Add PayPal account',
         editPayPalAccount: 'Update PayPal account',
         growlMessageOnSave: 'Your PayPal username was successfully added',
+        formatError: 'Invalid PayPa.me username',
     },
     addDebitCardPage: {
         addADebitCard: 'Add a Debit Card',

src/languages/es.js

@@ -282,6 +282,7 @@ export default {
         addPayPalAccount: 'Agregar cuenta de PayPal',
         growlMessageOnSave: 'Su nombre de usuario de PayPal se agregó correctamente',
         editPayPalAccount: 'Actualizar cuenta de PayPal',
+        formatError: 'Usuario PayPa.me no válido',
     },
     addDebitCardPage: {
         addADebitCard: 'Agregar una tarjeta de débito',

src/pages/settings/Payments/AddPayPalMePage.js

@@ -37,8 +37,10 @@ class AddPayPalMePage extends React.Component {
 
         this.state = {
             payPalMeUsername: props.payPalMeUsername,
+            payPalMeUsernameError: false,
         };
         this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this);
+        this.validatePaypalMeUsername = this.validatePaypalMeUsername.bind(this);
         this.paypalUsernameInputRef = null;
     }
 
@@ -58,11 +60,31 @@ class AddPayPalMePage extends React.Component {
      * Sets the payPalMeUsername for the current user
      */
     setPayPalMeUsername() {
+        const isValid = this.validatePaypalMeUsername();
+        if (!isValid) {
+            return;
+        }
         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);
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
     }
 
+    /**
+     * Validate the paypal username with regex
+     *
+     * @returns {Boolean}
+     */
+    validatePaypalMeUsername() {
+        const regex = CONST.REGEX.PAYPAL_ME_USERNAME;
+        if (this.state.payPalMeUsername && !regex.test(this.state.payPalMeUsername)) {
+            this.setState({payPalMeUsernameError: true});
+            return false;
+        }
+        this.setState({payPalMeUsernameError: false});
+        return true;
+    }
+
+
     render() {
         return (
             <ScreenWrapper onTransitionEnd={() => {
@@ -92,6 +114,9 @@ class AddPayPalMePage extends React.Component {
                                 placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
                                 onChangeText={text => this.setState({payPalMeUsername: text})}
                                 returnKeyType="done"
+                                hasError={this.state.payPalMeUsernameError}
+                                errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
+
                             />
                         </View>
                     </View>