Refactor Session.resendValidationLink and the ResendValidationForm to use the new API

src/libs/ErrorUtils.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import CONST from '../CONST';
 
 /**
@@ -35,7 +36,23 @@ function getAuthenticateErrorMessage(response) {
     }
 }
 
+/**
+ * @param {Object} onyxData
+ * @param {Object} onyxData.errors
+ * @returns {String}
+ */
+function getLatestErrorMessage(onyxData) {
+    return _.chain(onyxData.errors || [])
+        .keys()
+        .sortBy()
+        .reverse()
+        .map(key => onyxData.errors[key])
+        .first()
+        .value();
+}
+
 export {
     // eslint-disable-next-line import/prefer-default-export
     getAuthenticateErrorMessage,
+    getLatestErrorMessage,
 };

src/libs/actions/Session/index.js

@@ -90,11 +90,29 @@ function signOutAndRedirectToSignIn() {
  * @param {String} [login]
  */
 function resendValidationLink(login = credentials.login) {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {isLoading: true});
-    DeprecatedAPI.ResendValidateCode({email: login})
-        .finally(() => {
-            Onyx.merge(ONYXKEYS.ACCOUNT, {isLoading: false});
-        });
+    const optimisticData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {isLoading: true},
+    }];
+    const successData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {
+            isLoading: false,
+            message: Localize.translateLocal('resendValidationForm.linkHasBeenResent'),
+        },
+    }];
+    const failureData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.ACCOUNT,
+        value: {
+            isLoading: false,
+            message: '',
+        },
+    }];
+
+    API.write('RequestAccountValidationLink', {email: login}, {optimisticData, successData, failureData});
 }
 
 /**

src/pages/signin/LoginForm.js

@@ -21,6 +21,7 @@ import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButto
 import OfflineIndicator from '../../components/OfflineIndicator';
 import {withNetwork} from '../../components/OnyxProvider';
 import networkPropTypes from '../../components/networkPropTypes';
+import * as ErrorUtils from '../../libs/ErrorUtils';
 
 const propTypes = {
     /** Should we dismiss the keyboard when transitioning away from the page? */
@@ -151,13 +152,7 @@ class LoginForm extends React.Component {
 
     render() {
         const formErrorTranslated = this.state.formError && this.props.translate(this.state.formError);
-        const error = formErrorTranslated || _.chain(this.props.account.errors || [])
-            .keys()
-            .sortBy()
-            .reverse()
-            .map(key => this.props.account.errors[key])
-            .first()
-            .value();
+        const error = formErrorTranslated || ErrorUtils.getLatestErrorMessage(this.props.account);
         return (
             <>
                 <View style={[styles.mt3]}>

src/pages/signin/ResendValidationForm.js

@@ -2,7 +2,6 @@ import React from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import _ from 'underscore';
 import Str from 'expensify-common/lib/str';
 import styles from '../../styles/styles';
 import Button from '../../components/Button';
@@ -17,6 +16,11 @@ import * as ReportUtils from '../../libs/ReportUtils';
 import OfflineIndicator from '../../components/OfflineIndicator';
 import networkPropTypes from '../../components/networkPropTypes';
 import {withNetwork} from '../../components/OnyxProvider';
+import * as ErrorUtils from '../../libs/ErrorUtils';
+import Icon from '../../components/Icon';
+import * as Expensicons from '../../components/Icon/Expensicons';
+import colors from '../../styles/colors';
+import variables from '../../styles/variables';
 
 const propTypes = {
     /* Onyx Props */
@@ -47,16 +51,6 @@ const defaultProps = {
 };
 
 class ResendValidationForm extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.validateAndSubmitForm = this.validateAndSubmitForm.bind(this);
-
-        this.state = {
-            formSuccess: '',
-        };
-    }
-
     componentWillUnmount() {
         if (!this.successMessageTimer) {
             return;
@@ -65,29 +59,12 @@ class ResendValidationForm extends React.Component {
         clearTimeout(this.successMessageTimer);
     }
 
-    /**
-     * Check that all the form fields are valid, then trigger the submit callback
-     */
-    validateAndSubmitForm() {
-        this.setState({
-            formSuccess: this.props.translate('resendValidationForm.linkHasBeenResent'),
-        });
-
-        if (!this.props.account.validated) {
-            Session.resendValidationLink();
-        } else {
-            Session.resetPassword();
-        }
-
-        this.successMessageTimer = setTimeout(() => {
-            this.setState({formSuccess: ''});
-        }, 5000);
-    }
-
     render() {
         const isSMSLogin = Str.isSMSLogin(this.props.credentials.login);
         const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login;
         const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase();
+        const error = ErrorUtils.getLatestErrorMessage(this.props.account);
+        const successMessage = this.props.account.message;
 
         return (
             <>
@@ -107,10 +84,25 @@ class ResendValidationForm extends React.Component {
                         {this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {login, loginType})}
                     </Text>
                 </View>
-                {!_.isEmpty(this.state.formSuccess) && (
-                    <Text style={[styles.formSuccess]}>
-                        {this.state.formSuccess}
-                    </Text>
+                {successMessage && (
+                    <View style={[styles.flexRow, styles.mb5]}>
+                        <View style={styles.offlineFeedback.errorDot}>
+                            <Icon src={Expensicons.DotIndicator} fill={colors.green} height={variables.iconSizeSmall} width={variables.iconSizeSmall} />
+                        </View>
+                        <Text style={[styles.textLabel, styles.colorMuted]}>
+                            {successMessage}
+                        </Text>
+                    </View>
+                )}
+                {!successMessage && error && (
+                    <View style={[styles.flexRow, styles.mb5]}>
+                        <View style={styles.offlineFeedback.errorDot}>
+                            <Icon src={Expensicons.DotIndicator} fill={colors.red} height={variables.iconSizeSmall} width={variables.iconSizeSmall} />
+                        </View>
+                        <Text style={[styles.textLabel, styles.colorMuted]}>
+                            {error}
+                        </Text>
+                    </View>
                 )}
                 <View style={[styles.mb4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
                     <TouchableOpacity onPress={() => redirectToSignIn()}>
@@ -123,7 +115,7 @@ class ResendValidationForm extends React.Component {
                         success
                         text={this.props.translate('resendValidationForm.resendLink')}
                         isLoading={this.props.account.loading}
-                        onPress={this.validateAndSubmitForm}
+                        onPress={() => (this.props.account.validated ? Session.resetPassword() : Session.resendValidationLink())}
                         isDisabled={this.props.network.isOffline}
                     />
                 </View>