Add slash in Debit card expiration

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 (
             <ScreenWrapper>
@@ -217,11 +248,11 @@ class DebitCardPage extends Component {
                                     <TextInput
                                         label={this.props.translate('addDebitCardPage.expiration')}
                                         placeholder={this.props.translate('addDebitCardPage.expirationDate')}
-                                        onChangeText={expirationDate => this.clearErrorAndSetValue('expirationDate', expirationDate)}
                                         value={this.state.expirationDate}
                                         maxLength={7}
                                         errorText={this.getErrorText('expirationDate')}
                                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                                        onChangeText={this.addOrRemoveSlashToExpiryDate}
                                     />
                                 </View>
                                 <View style={[styles.flex1]}>