[HOLD for payment 2021-11-04] PayPal.me - Don't allow spaces or special characters when adding a PayPal.me

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to settings
2. Click on payments
3. Click on add new payment method
4. Click on the Paypal option
5. Enter a PayPal.me user name with spaces and special characters

Expected Result:

User should not be able to save a username with spaces and special characters

Actual Result:

User is able to save the PayPal.me username with spaces and special characters

Workaround:

None needed.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.2-5

Reproducible in staging?: yes Reproducible in production?: yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL: Issue reported by: @akshayasalvi Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1632504499064300

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @pecanoro (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[akshayasalvi]

Solution:

We add a validate function and error in AddPayPalMePage.js.

  constructor(props) {
        this.state = {
            payPalMeUsername: props.payPalMeUsername,
            payPalMeUsernameError: false,
        };
    }

    validatePaypalMeUsername() {
        const regex = '/^([a-zA-Z0-9 _-]*)$/';
        if(this.state.payPalMeUsername && regex.test(this.state.payPalMeUsername)) {
            this.setState({ payPalMeUsernameError: true });
            return true;
        }
        this.setState({ payPalMeUsernameError: false});
        return false;
    }

    setPayPalMeUsername() {
        const isValid = validatePaypalMeUsername();
        if(!isValid) {
            return;
        }

        // Rest of the code
    }

    render() {

        // Other code

        <ExpensiTextInput
            label={this.props.translate('addPayPalMePage.payPalMe')}
            error={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError')}
        />

    }

and then accordingly add translations in en.js and es.js

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[Hanaffi]

Proposal

class AddPayPalMePage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            payPalMeUsername: props.payPalMeUsername,
            paypalError:false // NEW
        };
        this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this);
        this.paypalUsernameInputRef = null;
    }

    // Rest of code ...

    handleTextChange(text){ // NEW
        if(/\s/.test(text)){
            this.setState({error:true})
        }
        this.setState({payPalMeUsername: text})
    }

    render() {
        return (
             // Rest of code ...

                            <ExpensiTextInput
                                label={this.props.translate('addPayPalMePage.payPalMe')}
                                ref={el => this.paypalUsernameInputRef = el}
                                autoCompleteType="off"
                                autoCorrect={false}
                                value={this.state.payPalMeUsername}
                                placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
                                onChangeText={this.handleTextChange}  // NEW
                                returnKeyType="done"
                            />
                    //Rest of code
                        <Button
                            success
                            isDisabled={error}  // NEW
                            onPress={this.setPayPalMeUsername}
                            pressOnEnter
                            style={[styles.mt3]}
                            text={this.props.payPalMeUsername
                                ? this.props.translate('addPayPalMePage.editPayPalAccount')
                                : this.props.translate('addPayPalMePage.addPayPalAccount')}
                        />

        );
    }
}

[michaelhaxhiu]

I'm not able to reproduce this on web or iOS. When I tap "Payments" I get stuck on this white page.

Web: iOS:

@isagoico were you able to reproduce this one on your side?

[isagoico]

Weird, not able to reproduce that blank screen on my side 🤔 Do you have a bank account added? looks like somethingis wrong with the bankName

[michaelhaxhiu]

I'm not able to even view those option. I made a GH here - https://github.com/Expensify/App/issues/5601

[MelvinBot]

Triggered auto assignment to @arielgreen (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[michaelhaxhiu]

I'm re-applying the External label because I'm blocked from reproducing this myself. It seems to be working for most others.

Associated bug is filed already

[arielgreen]

https://www.upwork.com/jobs/~017adafcefa04af78f

[MelvinBot]

Triggered auto assignment to @deetergp (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[kadiealexander]

Please refer to this post for updated information on the n6 hold, we've raised the bonus to $250 for all issues where a PR is created before the N6 hold is lifted.

[akshayasalvi]

@deetergp quick reminder for the proposal https://github.com/Expensify/App/issues/5541#issuecomment-928203774

[deetergp]

@akshayasalvi's solution looks good for the most part. I'd love some reference that proves [a-zA-Z0-9 _-] are the only permissible characters for a PayPal.me link. And since we are not doing anything with the results of the capture group, we don't really need it do we?

[akshayasalvi]

@deetergp You're right can remove the capture group.

Here's the screencast while adding any space or a special character it doesn't allow and surrounds with a red border. Only numbers and characters work. So it seems the regex will get updates to remove _ and -.

Updated regex /^[a-zA-Z0-9]+$/

Screencast

https://user-images.githubusercontent.com/57435789/136850474-155d7c64-1ac4-48d9-bf6c-77687abc9976.mov

[deetergp]

Thanks for the added context @akshayasalvi.

@arielgreen let's hire @akshayasalvi in Upwork.

[parasharrajat]

I will be reviewing the PR and I will let you know @deetergp when this is ready for final review and possibly for merge. See More

[deetergp]

Settle down Melvin, this has already been merged.

[arielgreen]

Apologies for the delay @akshayasalvi ! I've sent over the offer. You'll also be paid the $250 bonus for reporting this, as well as the $250 n6-hold bonus.

[botify]

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.1.10-2 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/5842

If no regressions arise, payment will be issued on 2021-11-04. :confetti_ball:

[arielgreen]

Paid!