diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index ed44cd10b4d1..5c04e9ee7cb1 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import {View} from 'react-native'; import lodashGet from 'lodash/get'; +import lodashEndsWith from 'lodash/endsWith'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; @@ -91,6 +92,7 @@ class DebitCardPage extends Component { this.submit = this.submit.bind(this); this.clearErrorAndSetValue = this.clearErrorAndSetValue.bind(this); this.getErrorText = this.getErrorText.bind(this); + this.addOrRemoveSlashToExpiryDate = this.addOrRemoveSlashToExpiryDate.bind(this); } /** @@ -184,6 +186,35 @@ class DebitCardPage extends Component { })); } + /** + * @param {String} inputExpiryDate + */ + addOrRemoveSlashToExpiryDate(inputExpiryDate) { + this.setState((prevState) => { + let expiryDate = inputExpiryDate; + + // Remove the digit and '/' when backspace is pressed with expiry date ending with '/' + if (inputExpiryDate.length < prevState.expirationDate.length + && (((inputExpiryDate.length === 3 && lodashEndsWith(inputExpiryDate, '/')) + || (inputExpiryDate.length === 2 && lodashEndsWith(prevState.expirationDate, '/'))))) { + expiryDate = inputExpiryDate.substring(0, inputExpiryDate.length - 1); + } else if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { + // An Expiry Date was added, so we should append a slash '/' + expiryDate = `${inputExpiryDate}/`; + } else if (inputExpiryDate.length > 2 && _.indexOf(inputExpiryDate, '/') === -1) { + // Expiry Date with MM and YY without slash, hence adding slash(/) + expiryDate = `${inputExpiryDate.slice(0, 2)}/${inputExpiryDate.slice(2)}`; + } + return { + expirationDate: expiryDate, + errors: { + ...prevState.errors, + expirationDate: false, + }, + }; + }); + } + render() { return ( @@ -217,11 +248,11 @@ class DebitCardPage extends Component { this.clearErrorAndSetValue('expirationDate', expirationDate)} value={this.state.expirationDate} maxLength={7} errorText={this.getErrorText('expirationDate')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} + onChangeText={this.addOrRemoveSlashToExpiryDate} />