diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 851c4a4b2496..a63916db0784 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -51,23 +51,38 @@ const defaultProps = {
},
};
-class ValidationStep extends React.Component {
- constructor(props) {
- super(props);
+/**
+ * Filter input for validation amount
+ * Anything that isn't a number is returned as an empty string
+ * Any dollar amount (e.g. 1.12) will be returned as 112
+ *
+ * @param {String} amount field input
+ * @returns {String}
+ */
+const filterInput = (amount) => {
+ let value = amount ? amount.toString().trim() : '';
+ if (value === '' || _.isNaN(Number(value)) || !Math.abs(Str.fromUSDToNumber(value))) {
+ return '';
+ }
- this.submit = this.submit.bind(this);
- this.validate = this.validate.bind(this);
+ // If the user enters the values in dollars, convert it to the respective cents amount
+ if (_.contains(value, '.')) {
+ value = Str.fromUSDToNumber(value);
}
+ return value;
+};
+
+function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account}) {
/**
* @param {Object} values - form input values passed by the Form component
* @returns {Object}
*/
- validate(values) {
+ const validate = (values) => {
const errors = {};
_.each(values, (value, key) => {
- const filteredValue = typeof value === 'string' ? this.filterInput(value) : value;
+ const filteredValue = typeof value === 'string' ? filterInput(value) : value;
if (ValidationUtils.isRequiredFulfilled(filteredValue)) {
return;
}
@@ -75,160 +90,136 @@ class ValidationStep extends React.Component {
});
return errors;
- }
+ };
/**
* @param {Object} values - form input values passed by the Form component
*/
- submit(values) {
- const amount1 = this.filterInput(values.amount1);
- const amount2 = this.filterInput(values.amount2);
- const amount3 = this.filterInput(values.amount3);
+ const submit = (values) => {
+ const amount1 = filterInput(values.amount1);
+ const amount2 = filterInput(values.amount2);
+ const amount3 = filterInput(values.amount3);
const validateCode = [amount1, amount2, amount3].join(',');
// Send valid amounts to BankAccountAPI::validateBankAccount in Web-Expensify
- const bankaccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID');
+ const bankaccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID');
BankAccounts.validateBankAccount(bankaccountID, validateCode);
- }
+ };
- /**
- * Filter input for validation amount
- * Anything that isn't a number is returned as an empty string
- * Any dollar amount (e.g. 1.12) will be returned as 112
- *
- * @param {String} amount field input
- *
- * @returns {String}
- */
- filterInput(amount) {
- let value = amount ? amount.toString().trim() : '';
- if (value === '' || _.isNaN(Number(value)) || !Math.abs(Str.fromUSDToNumber(value))) {
- return '';
- }
-
- // If the user enters the values in dollars, convert it to the respective cents amount
- if (_.contains(value, '.')) {
- value = Str.fromUSDToNumber(value);
- }
-
- return value;
+ const state = lodashGet(reimbursementAccount, 'achData.state');
+
+ // If a user tries to navigate directly to the validate page we'll show them the EnableStep
+ if (state === BankAccount.STATE.OPEN) {
+ return ;
}
- render() {
- const state = lodashGet(this.props.reimbursementAccount, 'achData.state');
-
- // If a user tries to navigate directly to the validate page we'll show them the EnableStep
- if (state === BankAccount.STATE.OPEN) {
- return ;
- }
-
- const maxAttemptsReached = lodashGet(this.props.reimbursementAccount, 'maxAttemptsReached');
- const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING;
- const requiresTwoFactorAuth = lodashGet(this.props, 'account.requiresTwoFactorAuth');
-
- return (
-
-
- {maxAttemptsReached && (
-
-
- {this.props.translate('validationStep.maxAttemptsReached')} {this.props.translate('common.please')}{' '}
- {this.props.translate('common.contactUs')}.
-
+ const maxAttemptsReached = lodashGet(reimbursementAccount, 'maxAttemptsReached');
+ const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING;
+ const requiresTwoFactorAuth = lodashGet(account, 'requiresTwoFactorAuth');
+
+ return (
+
+
+ {maxAttemptsReached && (
+
+
+ {translate('validationStep.maxAttemptsReached')} {translate('common.please')}{' '}
+ {translate('common.contactUs')}.
+
+
+ )}
+ {!maxAttemptsReached && state === BankAccount.STATE.PENDING && (
+
- )}
- {isVerifying && (
-
-
- {this.props.translate('validationStep.letsChatText')}
-
-
-
- {this.props.reimbursementAccount.shouldShowResetModal && }
- {!requiresTwoFactorAuth && }
-
- )}
-
- );
- }
+ )}
+
+ )}
+ {isVerifying && (
+
+
+ {translate('validationStep.letsChatText')}
+
+
+
+ {reimbursementAccount.shouldShowResetModal && }
+ {!requiresTwoFactorAuth && }
+
+ )}
+
+ );
}
ValidationStep.propTypes = propTypes;
ValidationStep.defaultProps = defaultProps;
+ValidationStep.displayName = 'ValidationStep';
export default compose(
withLocalize,