From 91b17faa0ebffe35cf4d5203a61b39fa5c26dee2 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 22 Jan 2022 00:48:23 +0530 Subject: [PATCH 01/19] fix: Added instance var and insertStringAt utils --- src/pages/settings/Payments/AddDebitCardPage.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index dc0f308b552..535ee9b9667 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -91,6 +91,7 @@ class DebitCardPage extends Component { this.submit = this.submit.bind(this); this.clearErrorAndSetValue = this.clearErrorAndSetValue.bind(this); this.getErrorText = this.getErrorText.bind(this); + this.allowExpirationDateChange = true; } /** @@ -184,6 +185,19 @@ class DebitCardPage extends Component { })); } + /** + * Insert string at index position for a given input string + * @param {String} inputString + * @param {Number} indexPosition + * @param {String} stringToAdd + * @returns {String} + */ + insertStringAt(inputString, indexPosition, stringToAdd) { + return inputString.slice(0, indexPosition) + + stringToAdd + + inputString.slice(indexPosition); + } + render() { return ( From 42b95242298d667f9e5beb0f3e17acc6f0a1b548 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Sat, 22 Jan 2022 00:49:16 +0530 Subject: [PATCH 02/19] fix: Added onKeyPress and onChangeText for slash handling --- src/pages/settings/Payments/AddDebitCardPage.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 535ee9b9667..8b5facafcc3 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -231,11 +231,24 @@ class DebitCardPage extends Component { this.clearErrorAndSetValue('expirationDate', expirationDate)} value={this.state.expirationDate} maxLength={7} errorText={this.getErrorText('expirationDate')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} + onKeyPress={({nativeEvent}) => { + if (nativeEvent.key === 'Backspace' && this.state.expirationDate.length === 3) { + this.allowExpirationDateChange = false; + this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, 2)})); + } else { + this.allowExpirationDateChange = true; + } + }} + onChangeText={(text) => { + if (!this.allowExpirationDateChange) { + return; + } + this.clearErrorAndSetValue('expirationDate', text.length === 3 ? `${this.insertStringAt(text, 2, '/')}` : text); + }} /> From 5d29dd777cdc0f45118edf2f465f257fbc590ac5 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 22 Feb 2022 01:33:54 +0530 Subject: [PATCH 03/19] fix: Changed the auto slash logic for length --- src/pages/settings/Payments/AddDebitCardPage.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 8b5facafcc3..501e8e72e3b 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -236,9 +236,9 @@ class DebitCardPage extends Component { errorText={this.getErrorText('expirationDate')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} onKeyPress={({nativeEvent}) => { - if (nativeEvent.key === 'Backspace' && this.state.expirationDate.length === 3) { + if (nativeEvent.key === 'Backspace' && this.state.expirationDate.length === 4) { this.allowExpirationDateChange = false; - this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, 2)})); + this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, 3)})); } else { this.allowExpirationDateChange = true; } @@ -247,7 +247,7 @@ class DebitCardPage extends Component { if (!this.allowExpirationDateChange) { return; } - this.clearErrorAndSetValue('expirationDate', text.length === 3 ? `${this.insertStringAt(text, 2, '/')}` : text); + this.clearErrorAndSetValue('expirationDate', text.length === 2 && _.indexOf(text, '/') === -1 ? `${text}/` : text); }} /> From 61b79ee478e0fc0e90bb1a80d93ca8da252fcc23 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 7 Mar 2022 23:51:23 +0530 Subject: [PATCH 04/19] feat: moved the auto slash code to separate functions --- .../settings/Payments/AddDebitCardPage.js | 47 +++++++++---------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index c66301463ae..1d950cdee7e 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -185,17 +185,26 @@ class DebitCardPage extends Component { })); } - /** - * Insert string at index position for a given input string - * @param {String} inputString - * @param {Number} indexPosition - * @param {String} stringToAdd - * @returns {String} - */ - insertStringAt(inputString, indexPosition, stringToAdd) { - return inputString.slice(0, indexPosition) - + stringToAdd - + inputString.slice(indexPosition); + addSlashToExpiryDate(text) { + if (!this.allowExpirationDateChange) { + return; + } + let expiryDate = text; + if (text.length === 2 && _.indexOf(text, '/') === -1) { + expiryDate = `${text}/`; + } if (text.length > 3 && _.indexOf(text, '/') === -1) { + expiryDate = `${text.slice(0, 2)}/${text.slice(2)}`; + } + this.clearErrorAndSetValue('expirationDate', expiryDate); + } + + removeSlashFromExpiryDate(nativeEvent) { + if (nativeEvent.key === 'Backspace' && this.state.expirationDate.length === 4) { + this.allowExpirationDateChange = false; + this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, prevState.expirationDate.length - 1)})); + } else { + this.allowExpirationDateChange = true; + } } render() { @@ -235,20 +244,8 @@ class DebitCardPage extends Component { maxLength={7} errorText={this.getErrorText('expirationDate')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} - onKeyPress={({nativeEvent}) => { - if (nativeEvent.key === 'Backspace' && this.state.expirationDate.length === 4) { - this.allowExpirationDateChange = false; - this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, 3)})); - } else { - this.allowExpirationDateChange = true; - } - }} - onChangeText={(text) => { - if (!this.allowExpirationDateChange) { - return; - } - this.clearErrorAndSetValue('expirationDate', text.length === 2 && _.indexOf(text, '/') === -1 ? `${text}/` : text); - }} + onKeyPress={this.removeSlashFromExpiryDate} + onChangeText={this.addSlashToExpiryDate} /> From c5471514a856f62cf4d3dbd9947c363354166697 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 7 Mar 2022 23:51:59 +0530 Subject: [PATCH 05/19] fix: added funcs to this --- src/pages/settings/Payments/AddDebitCardPage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 1d950cdee7e..1d1a1ae8d62 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -92,6 +92,8 @@ class DebitCardPage extends Component { this.clearErrorAndSetValue = this.clearErrorAndSetValue.bind(this); this.getErrorText = this.getErrorText.bind(this); this.allowExpirationDateChange = true; + this.addSlashToExpiryDate = this.addSlashToExpiryDate.bind(this); + this.removeSlashFromExpiryDate = this.removeSlashFromExpiryDate.bind(this); } /** From a84ede9e7cc4ebe63ec122e9447b069a3a5dd69e Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 7 Mar 2022 23:55:50 +0530 Subject: [PATCH 06/19] fix: handle delete slash when its the last char --- src/pages/settings/Payments/AddDebitCardPage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 1d1a1ae8d62..07c1a89b7c9 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'; @@ -201,7 +202,8 @@ class DebitCardPage extends Component { } removeSlashFromExpiryDate(nativeEvent) { - if (nativeEvent.key === 'Backspace' && this.state.expirationDate.length === 4) { + const expirationDate = this.state.expirationDate; + if (nativeEvent.key === 'Backspace' && (expirationDate.length === 4 || (expirationDate.length === 3 && lodashEndsWith(expirationDate, '/')))) { this.allowExpirationDateChange = false; this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, prevState.expirationDate.length - 1)})); } else { From 77fd124fe2290497f29586c29f9ec40c31e4613e Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 8 Mar 2022 00:07:53 +0530 Subject: [PATCH 07/19] fix: Code cleanup --- src/pages/settings/Payments/AddDebitCardPage.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 07c1a89b7c9..dc5f42f86dc 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -188,15 +188,19 @@ class DebitCardPage extends Component { })); } - addSlashToExpiryDate(text) { + /** + * Adds slash to the expiry date + * @param {String} inputExpiryDate + */ + addSlashToExpiryDate(inputExpiryDate) { if (!this.allowExpirationDateChange) { return; } - let expiryDate = text; - if (text.length === 2 && _.indexOf(text, '/') === -1) { - expiryDate = `${text}/`; - } if (text.length > 3 && _.indexOf(text, '/') === -1) { - expiryDate = `${text.slice(0, 2)}/${text.slice(2)}`; + let expiryDate = inputExpiryDate; + if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { + expiryDate = `${inputExpiryDate}/`; + } if (inputExpiryDate.length > 3 && _.indexOf(inputExpiryDate, '/') === -1) { + expiryDate = `${inputExpiryDate.slice(0, 2)}/${inputExpiryDate.slice(2)}`; } this.clearErrorAndSetValue('expirationDate', expiryDate); } From b1177c17ace2ce26f1a2b0bcd9b239304d9a0344 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 8 Mar 2022 00:13:44 +0530 Subject: [PATCH 08/19] fix: added comment to functions --- src/pages/settings/Payments/AddDebitCardPage.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index dc5f42f86dc..5fcaa40ae11 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -189,7 +189,7 @@ class DebitCardPage extends Component { } /** - * Adds slash to the expiry date + * Add slash to the expiry date * @param {String} inputExpiryDate */ addSlashToExpiryDate(inputExpiryDate) { @@ -197,16 +197,25 @@ class DebitCardPage extends Component { return; } let expiryDate = inputExpiryDate; + + // Expiry Date(MM)is added so append a slash(/) if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { expiryDate = `${inputExpiryDate}/`; - } if (inputExpiryDate.length > 3 && _.indexOf(inputExpiryDate, '/') === -1) { + } else if (inputExpiryDate.length > 3 && _.indexOf(inputExpiryDate, '/') === -1) { + // Expiry Date with MM and YY without slash, hence adding slash(/) expiryDate = `${inputExpiryDate.slice(0, 2)}/${inputExpiryDate.slice(2)}`; } this.clearErrorAndSetValue('expirationDate', expiryDate); } + /** + * Remove slash from expiry date on backspace + * @param {Object} nativeEvent + */ removeSlashFromExpiryDate(nativeEvent) { const expirationDate = this.state.expirationDate; + + // Auto remove the slash and digit when backspace is pressed and it ends with slash if (nativeEvent.key === 'Backspace' && (expirationDate.length === 4 || (expirationDate.length === 3 && lodashEndsWith(expirationDate, '/')))) { this.allowExpirationDateChange = false; this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, prevState.expirationDate.length - 1)})); From e0c7020745f84d45eee1b480d5da0671571653b8 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 8 Mar 2022 00:55:51 +0530 Subject: [PATCH 09/19] fix: change event to e.nativeEvent --- src/pages/settings/Payments/AddDebitCardPage.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 5fcaa40ae11..869e4d985e6 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -210,13 +210,13 @@ class DebitCardPage extends Component { /** * Remove slash from expiry date on backspace - * @param {Object} nativeEvent + * @param {Object} e */ - removeSlashFromExpiryDate(nativeEvent) { + removeSlashFromExpiryDate(e) { const expirationDate = this.state.expirationDate; // Auto remove the slash and digit when backspace is pressed and it ends with slash - if (nativeEvent.key === 'Backspace' && (expirationDate.length === 4 || (expirationDate.length === 3 && lodashEndsWith(expirationDate, '/')))) { + if (e.nativeEvent.key === 'Backspace' && (expirationDate.length === 4 || (expirationDate.length === 3 && lodashEndsWith(expirationDate, '/')))) { this.allowExpirationDateChange = false; this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, prevState.expirationDate.length - 1)})); } else { From 578ec9e30110c786283de7b09415466c1c5f00a5 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Thu, 10 Mar 2022 22:25:20 +0530 Subject: [PATCH 10/19] fix: changed setstate to clearErrorAndSetValue, temp console added --- src/components/TextInput/BaseTextInput.js | 1 + src/pages/settings/Payments/AddDebitCardPage.js | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 283bfa5a9ba..d205ab203c2 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -65,6 +65,7 @@ class BaseTextInput extends Component { return; } + // console.log('Values to Compare in BaseTextInput', this.value, this.props.value); this.value = this.props.value; this.input.setNativeProps({text: this.value}); diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 6ef390f15d8..baef49f7fc4 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -218,13 +218,17 @@ class DebitCardPage extends Component { // Auto remove the slash and digit when backspace is pressed and it ends with slash if (e.nativeEvent.key === 'Backspace' && (expirationDate.length === 4 || (expirationDate.length === 3 && lodashEndsWith(expirationDate, '/')))) { this.allowExpirationDateChange = false; - this.setState(prevState => ({expirationDate: prevState.expirationDate.substring(0, prevState.expirationDate.length - 1)})); + e.preventDefault(); + + // console.log('About to update state', expirationDate.substring(0, expirationDate.length - 2)); + this.clearErrorAndSetValue('expirationDate', expirationDate.substring(0, expirationDate.length - 2)); } else { this.allowExpirationDateChange = true; } } render() { + // console.log('Current State', this.state.expirationDate); return ( From 88d83b4360147051ad360e5f217d136396e80d11 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 14 Mar 2022 22:54:21 +0530 Subject: [PATCH 11/19] fix: length check to > 2 for expirationdate --- src/pages/settings/Payments/AddDebitCardPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 93f326d4802..26f0bf962e7 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -201,7 +201,7 @@ class DebitCardPage extends Component { // Expiry Date(MM)is added so append a slash(/) if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { expiryDate = `${inputExpiryDate}/`; - } else if (inputExpiryDate.length > 3 && _.indexOf(inputExpiryDate, '/') === -1) { + } 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)}`; } From b51bb249c255a6a906b11abdef2ea1e617135901 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 21 Mar 2022 19:29:36 +0530 Subject: [PATCH 12/19] fix: removed keyup handling and update addslash function --- .../settings/Payments/AddDebitCardPage.js | 42 ++++++------------- 1 file changed, 12 insertions(+), 30 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 26f0bf962e7..f12043d5277 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -94,7 +94,6 @@ class DebitCardPage extends Component { this.getErrorText = this.getErrorText.bind(this); this.allowExpirationDateChange = true; this.addSlashToExpiryDate = this.addSlashToExpiryDate.bind(this); - this.removeSlashFromExpiryDate = this.removeSlashFromExpiryDate.bind(this); } /** @@ -189,46 +188,30 @@ class DebitCardPage extends Component { } /** - * Add slash to the expiry date * @param {String} inputExpiryDate */ - addSlashToExpiryDate(inputExpiryDate) { - if (!this.allowExpirationDateChange) { - return; - } + addOrRemoveSlashToExpiryDate(inputExpiryDate) { let expiryDate = inputExpiryDate; - - // Expiry Date(MM)is added so append a slash(/) - if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { + console.log('Expiry date', inputExpiryDate); + + // Backspace was hit/character removed + if (inputExpiryDate.length < this.state.expirationDate.length + && (((inputExpiryDate.length === 3 && lodashEndsWith(inputExpiryDate, '/')) + || (inputExpiryDate.length === 2 && lodashEndsWith(this.state.expirationDate, '/'))))) { + expiryDate = inputExpiryDate.substring(0, inputExpiryDate.length - 1); + } else if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { // Expiry Date(MM)is added so 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)}`; } - this.clearErrorAndSetValue('expirationDate', expiryDate); - } - /** - * Remove slash from expiry date on backspace - * @param {Object} e - */ - removeSlashFromExpiryDate(e) { - const expirationDate = this.state.expirationDate; - - // Auto remove the slash and digit when backspace is pressed and it ends with slash - if (e.nativeEvent.key === 'Backspace' && (expirationDate.length === 4 || (expirationDate.length === 3 && lodashEndsWith(expirationDate, '/')))) { - this.allowExpirationDateChange = false; - e.preventDefault(); - - // console.log('About to update state', expirationDate.substring(0, expirationDate.length - 2)); - this.clearErrorAndSetValue('expirationDate', expirationDate.substring(0, expirationDate.length - 2)); - } else { - this.allowExpirationDateChange = true; - } + console.log('Updated Expiry Date', expiryDate); + this.clearErrorAndSetValue('expirationDate', expiryDate); } render() { - // console.log('Current State', this.state.expirationDate); + console.log('Current State', this.state.expirationDate); return ( @@ -265,7 +248,6 @@ class DebitCardPage extends Component { maxLength={7} errorText={this.getErrorText('expirationDate')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} - onKeyPress={this.removeSlashFromExpiryDate} onChangeText={this.addSlashToExpiryDate} /> From 0c452886cebc9c55091d5676fbb42ca354fc5234 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 21 Mar 2022 19:30:45 +0530 Subject: [PATCH 13/19] fix: update binding and remove console log --- src/pages/settings/Payments/AddDebitCardPage.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index f12043d5277..3dc65c386e5 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -93,7 +93,7 @@ class DebitCardPage extends Component { this.clearErrorAndSetValue = this.clearErrorAndSetValue.bind(this); this.getErrorText = this.getErrorText.bind(this); this.allowExpirationDateChange = true; - this.addSlashToExpiryDate = this.addSlashToExpiryDate.bind(this); + this.addOrRemoveSlashToExpiryDate = this.addOrRemoveSlashToExpiryDate.bind(this); } /** @@ -192,7 +192,6 @@ class DebitCardPage extends Component { */ addOrRemoveSlashToExpiryDate(inputExpiryDate) { let expiryDate = inputExpiryDate; - console.log('Expiry date', inputExpiryDate); // Backspace was hit/character removed if (inputExpiryDate.length < this.state.expirationDate.length @@ -205,8 +204,6 @@ class DebitCardPage extends Component { // Expiry Date with MM and YY without slash, hence adding slash(/) expiryDate = `${inputExpiryDate.slice(0, 2)}/${inputExpiryDate.slice(2)}`; } - - console.log('Updated Expiry Date', expiryDate); this.clearErrorAndSetValue('expirationDate', expiryDate); } @@ -248,7 +245,7 @@ class DebitCardPage extends Component { maxLength={7} errorText={this.getErrorText('expirationDate')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} - onChangeText={this.addSlashToExpiryDate} + onChangeText={this.addOrRemoveSlashToExpiryDate} /> From 3ca97a17c80e03167fb4858494bdab0e2fde794b Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Mon, 21 Mar 2022 19:31:40 +0530 Subject: [PATCH 14/19] fix: updated comment --- src/pages/settings/Payments/AddDebitCardPage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 3dc65c386e5..bfb8cc70609 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -194,11 +194,13 @@ class DebitCardPage extends Component { let expiryDate = inputExpiryDate; // Backspace was hit/character removed + // Remove extra digit when there's a / involved if (inputExpiryDate.length < this.state.expirationDate.length && (((inputExpiryDate.length === 3 && lodashEndsWith(inputExpiryDate, '/')) || (inputExpiryDate.length === 2 && lodashEndsWith(this.state.expirationDate, '/'))))) { expiryDate = inputExpiryDate.substring(0, inputExpiryDate.length - 1); - } else if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { // Expiry Date(MM)is added so append a slash(/) + } else if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { + // Expiry Date(MM)is added so append a slash(/) expiryDate = `${inputExpiryDate}/`; } else if (inputExpiryDate.length > 2 && _.indexOf(inputExpiryDate, '/') === -1) { // Expiry Date with MM and YY without slash, hence adding slash(/) From eba7a98afd4f84b5887aad49c37702313939d03a Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Thu, 24 Mar 2022 02:20:36 +0530 Subject: [PATCH 15/19] fix: updated auto-slash logic to onChangeText --- .../settings/Payments/AddDebitCardPage.js | 36 +++++++++++-------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index bfb8cc70609..ae12c84be1e 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -191,26 +191,34 @@ class DebitCardPage extends Component { * @param {String} inputExpiryDate */ addOrRemoveSlashToExpiryDate(inputExpiryDate) { - let expiryDate = inputExpiryDate; + this.setState((prevState) => { + let expiryDate = inputExpiryDate; + const inputKey = 'expirationDate'; - // Backspace was hit/character removed - // Remove extra digit when there's a / involved - if (inputExpiryDate.length < this.state.expirationDate.length - && (((inputExpiryDate.length === 3 && lodashEndsWith(inputExpiryDate, '/')) - || (inputExpiryDate.length === 2 && lodashEndsWith(this.state.expirationDate, '/'))))) { - expiryDate = inputExpiryDate.substring(0, inputExpiryDate.length - 1); - } else if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { + // Backspace was hit/character removed + // Remove extra digit when there's a / involved + 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) { // Expiry Date(MM)is added so append a slash(/) - expiryDate = `${inputExpiryDate}/`; - } else if (inputExpiryDate.length > 2 && _.indexOf(inputExpiryDate, '/') === -1) { + 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)}`; - } - this.clearErrorAndSetValue('expirationDate', expiryDate); + expiryDate = `${inputExpiryDate.slice(0, 2)}/${inputExpiryDate.slice(2)}`; + } + return { + [inputKey]: expiryDate, + errors: { + ...prevState.errors, + [inputKey]: false, + }, + }; + }); } render() { - console.log('Current State', this.state.expirationDate); return ( From a5b8a5b34bc9be2521a12a023ab9932a2a123cde Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Thu, 24 Mar 2022 17:00:10 +0530 Subject: [PATCH 16/19] fix: removed unwanted var --- src/pages/settings/Payments/AddDebitCardPage.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index ae12c84be1e..e5afc6a2823 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -193,7 +193,6 @@ class DebitCardPage extends Component { addOrRemoveSlashToExpiryDate(inputExpiryDate) { this.setState((prevState) => { let expiryDate = inputExpiryDate; - const inputKey = 'expirationDate'; // Backspace was hit/character removed // Remove extra digit when there's a / involved @@ -209,10 +208,10 @@ class DebitCardPage extends Component { expiryDate = `${inputExpiryDate.slice(0, 2)}/${inputExpiryDate.slice(2)}`; } return { - [inputKey]: expiryDate, + expirationDate: expiryDate, errors: { ...prevState.errors, - [inputKey]: false, + expirationDate: false, }, }; }); From 80bdec7fe0894ce5981ebba09211dbf7c22b1f9e Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Thu, 24 Mar 2022 17:14:07 +0530 Subject: [PATCH 17/19] fix: comment alignment fixed --- src/pages/settings/Payments/AddDebitCardPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index e5afc6a2823..b8cc05ecee8 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -201,10 +201,10 @@ class DebitCardPage extends Component { || (inputExpiryDate.length === 2 && lodashEndsWith(prevState.expirationDate, '/'))))) { expiryDate = inputExpiryDate.substring(0, inputExpiryDate.length - 1); } else if (inputExpiryDate.length === 2 && _.indexOf(inputExpiryDate, '/') === -1) { - // Expiry Date(MM)is added so append a slash(/) + // Expiry Date(MM)is added so append a slash(/) expiryDate = `${inputExpiryDate}/`; } else if (inputExpiryDate.length > 2 && _.indexOf(inputExpiryDate, '/') === -1) { - // Expiry Date with MM and YY without slash, hence adding slash(/) + // Expiry Date with MM and YY without slash, hence adding slash(/) expiryDate = `${inputExpiryDate.slice(0, 2)}/${inputExpiryDate.slice(2)}`; } return { From 6beb3d8a8bde75783f6d3ef35c86f1ff6116325e Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Tue, 12 Apr 2022 22:39:56 +0530 Subject: [PATCH 18/19] fix: remove unwanted variable --- src/pages/settings/Payments/AddDebitCardPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index b8cc05ecee8..1edb514fcd7 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -92,7 +92,6 @@ class DebitCardPage extends Component { this.submit = this.submit.bind(this); this.clearErrorAndSetValue = this.clearErrorAndSetValue.bind(this); this.getErrorText = this.getErrorText.bind(this); - this.allowExpirationDateChange = true; this.addOrRemoveSlashToExpiryDate = this.addOrRemoveSlashToExpiryDate.bind(this); } From 49956d7220a1b54e90340888959a19c710035cf0 Mon Sep 17 00:00:00 2001 From: Manan Jadhav Date: Wed, 13 Apr 2022 17:02:42 +0530 Subject: [PATCH 19/19] refactor: changed comment language --- src/pages/settings/Payments/AddDebitCardPage.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 1edb514fcd7..5c04e9ee7cb 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -193,14 +193,13 @@ class DebitCardPage extends Component { this.setState((prevState) => { let expiryDate = inputExpiryDate; - // Backspace was hit/character removed - // Remove extra digit when there's a / involved + // 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) { - // Expiry Date(MM)is added so append a slash(/) + // 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(/)