Merge pull request #7362 from mananjadhav/fix/autoslash-expiration-date

Add slash in Debit card expiration
Expensify · Apr 13, 2022 · b85d4a9 · b85d4a9
2 parents aa26058 + 49956d7
commit b85d4a9
Showing 1 changed file with 32 additions and 1 deletion.
diff --git 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 (
             <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]}>