Refactor SMS Delivery Failure sign in flow

src/languages/en.ts

@@ -496,6 +496,7 @@ const translations = {
         destination: 'Destination',
         subrate: 'Subrate',
         perDiem: 'Per diem',
+        validate: 'Validate',
     },
     supportalNoAccess: {
         title: 'Not so fast',
@@ -1878,7 +1879,10 @@ const translations = {
         toUnblock: ' to unblock your login.',
     },
     smsDeliveryFailurePage: {
-        smsDeliveryFailureMessage: ({login}: OurEmailProviderParams) => `We've been unable to deliver SMS messages to ${login}, so we've suspended it for 24 hours.`,
+        smsDeliveryFailureMessage: ({login}: OurEmailProviderParams) =>
+            `We've been unable to deliver SMS messages to ${login}, so we've suspended it for 24 hours. Please try validating your number:`,
+        validationFailed: 'Validation failed because it hasn’t been 24 hours since your last attempt.',
+        validationSuccess: 'Your number has been validated! Click below to send a new magic sign-in code.',
     },
     welcomeSignUpForm: {
         join: 'Join',

src/languages/es.ts

@@ -487,6 +487,7 @@ const translations = {
         destination: 'Destino',
         subrate: 'Subtasa',
         perDiem: 'Per diem',
+        validate: 'Validar',
     },
     supportalNoAccess: {
         title: 'No tan rápido',
@@ -1883,7 +1884,10 @@ const translations = {
         toUnblock: ' para desbloquear el inicio de sesión.',
     },
     smsDeliveryFailurePage: {
-        smsDeliveryFailureMessage: ({login}: OurEmailProviderParams) => `No hemos podido entregar mensajes SMS a ${login}, por lo que lo hemos suspendido durante 24 horas.`,
+        smsDeliveryFailureMessage: ({login}: OurEmailProviderParams) =>
+            `No hemos podido entregar mensajes SMS a ${login}, así que lo hemos suspendido durante 24 horas. Por favor, intenta validar tu número:`,
+        validationFailed: 'La validación falló porque no han pasado 24 horas desde tu último intento.',
+        validationSuccess: '¡Tu número ha sido validado! Haz clic abajo para enviar un nuevo código mágico de inicio de sesión.',
     },
     welcomeSignUpForm: {
         join: 'Unirse',

src/libs/API/parameters/ResetSMSDeliveryFailureParams.ts

@@ -0,0 +1,5 @@
+type ResetSMSDeliveryFailureParams = {
+    login: string;
+};
+
+export default ResetSMSDeliveryFailureParams;

src/libs/API/parameters/index.ts

@@ -361,3 +361,4 @@ export type {default as ExportPerDiemCSVParams} from './ExportPerDiemCSVParams';
 export type {default as UpdateWorkspaceCustomUnitParams} from './UpdateWorkspaceCustomUnitParams';
 export type {default as DismissProductTrainingParams} from './DismissProductTraining';
 export type {default as OpenWorkspacePlanPageParams} from './OpenWorkspacePlanPage';
+export type {default as ResetSMSDeliveryFailureParams} from './ResetSMSDeliveryFailureParams';

src/libs/API/types.ts

@@ -446,6 +446,7 @@ const WRITE_COMMANDS = {
     UPDATE_WORKSPACE_CUSTOM_UNIT: 'UpdateWorkspaceCustomUnit',
     VALIDATE_USER_AND_GET_ACCESSIBLE_POLICIES: 'ValidateUserAndGetAccessiblePolicies',
     DISMISS_PRODUCT_TRAINING: 'DismissProductTraining',
+    RESET_SMS_DELIVERY_FAILURE: 'ResetSMSDeliveryFailure',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -772,6 +773,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_SIZE]: Parameters.UpdateSubscriptionSizeParams;
     [WRITE_COMMANDS.REQUEST_TAX_EXEMPTION]: null;
     [WRITE_COMMANDS.UPDATE_WORKSPACE_CUSTOM_UNIT]: Parameters.UpdateWorkspaceCustomUnitParams;
+    [WRITE_COMMANDS.RESET_SMS_DELIVERY_FAILURE]: Parameters.ResetSMSDeliveryFailureParams;
 
     [WRITE_COMMANDS.DELETE_MONEY_REQUEST_ON_SEARCH]: Parameters.DeleteMoneyRequestOnSearchParams;
     [WRITE_COMMANDS.HOLD_MONEY_REQUEST_ON_SEARCH]: Parameters.HoldMoneyRequestOnSearchParams;

src/libs/actions/Session/index.ts

@@ -17,6 +17,7 @@ import type {
     RequestAccountValidationLinkParams,
     RequestNewValidateCodeParams,
     RequestUnlinkValidationLinkParams,
+    ResetSMSDeliveryFailureParams,
     SignInUserWithLinkParams,
     SignUpUserParams,
     UnlinkLoginParams,
@@ -1226,6 +1227,52 @@ function isUserOnPrivateDomain() {
     return false;
 }
 
+/**
+ * To reset SMS delivery failure
+ */
+function resetSMSDeliveryFailure(login: string) {
+    const params: ResetSMSDeliveryFailureParams = {login};
+
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ACCOUNT,
+            value: {
+                errors: null,
+                smsDeliveryFailureStatus: {
+                    isLoading: true,
+                },
+            },
+        },
+    ];
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ACCOUNT,
+            value: {
+                smsDeliveryFailureStatus: {
+                    isLoading: false,
+                    isReset: true,
+                },
+            },
+        },
+    ];
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.ACCOUNT,
+            value: {
+                errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                smsDeliveryFailureStatus: {
+                    isLoading: false,
+                },
+            },
+        },
+    ];
+
+    API.write(WRITE_COMMANDS.RESET_SMS_DELIVERY_FAILURE, params, {optimisticData, successData, failureData});
+}
+
 export {
     beginSignIn,
     beginAppleSignIn,
@@ -1267,4 +1314,5 @@ export {
     signInAfterTransitionFromOldDot,
     validateUserAndGetAccessiblePolicies,
     isUserOnPrivateDomain,
+    resetSMSDeliveryFailure,
 };

src/pages/signin/SMSDeliveryFailurePage.tsx

@@ -3,11 +3,13 @@ import React, {useEffect, useMemo} from 'react';
 import {Keyboard, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
+import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import Text from '@components/Text';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Session from '@userActions/Session';
+import {getLatestErrorMessage} from '@libs/ErrorUtils';
+import {beginSignIn, clearSignInData, resetSMSDeliveryFailure} from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink';
 import Terms from './Terms';
@@ -27,6 +29,11 @@ function SMSDeliveryFailurePage() {
     }, [credentials?.login]);
 
     const SMSDeliveryFailureMessage = account?.smsDeliveryFailureStatus?.message;
+    const hasSMSDeliveryFailure = account?.smsDeliveryFailureStatus?.hasSMSDeliveryFailure;
+    const isReset = account?.smsDeliveryFailureStatus?.isReset;
+
+    const errorText = useMemo(() => (account ? getLatestErrorMessage(account) : ''), [account]);
+    const shouldShowError = !!errorText;
 
     useEffect(() => {
         if (!isKeyboardShown) {
@@ -35,26 +42,83 @@ function SMSDeliveryFailurePage() {
         Keyboard.dismiss();
     }, [isKeyboardShown]);
 
+    if (hasSMSDeliveryFailure && isReset) {
+        return (
+            <>
+                <View style={[styles.mv3, styles.flexRow]}>
+                    <View style={[styles.flex1]}>
+                        <Text>
+                            {translate('smsDeliveryFailurePage.validationFailed')} {SMSDeliveryFailureMessage}
+                        </Text>
+                    </View>
+                </View>
+                <View style={[styles.mv4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsEnd]}>
+                    <Button
+                        success
+                        large
+                        text={translate('common.buttonConfirm')}
+                        onPress={() => clearSignInData()}
+                        pressOnEnter
+                        style={styles.w100}
+                    />
+                </View>
+                <View style={[styles.mt3, styles.mb2]}>
+                    <ChangeExpensifyLoginLink onPress={() => clearSignInData()} />
+                </View>
+                <View style={[styles.mt4, styles.signInPageWelcomeTextContainer]}>
+                    <Terms />
+                </View>
+            </>
+        );
+    }
+
+    if (!hasSMSDeliveryFailure && isReset) {
+        return (
+            <>
+                <View style={[styles.mv3, styles.flexRow]}>
+                    <View style={[styles.flex1]}>
+                        <Text>{translate('smsDeliveryFailurePage.validationSuccess')}</Text>
+                    </View>
+                </View>
+                <View style={[styles.mv4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsEnd]}>
+                    <FormAlertWithSubmitButton
+                        buttonText={translate('common.send')}
+                        isLoading={account?.isLoading}
+                        onSubmit={() => beginSignIn(login)}
+                        message={errorText}
+                        isAlertVisible={shouldShowError}
+                        containerStyles={[styles.w100, styles.mh0]}
+                    />
+                </View>
+                <View style={[styles.mt3, styles.mb2]}>
+                    <ChangeExpensifyLoginLink onPress={() => clearSignInData()} />
+                </View>
+                <View style={[styles.mt4, styles.signInPageWelcomeTextContainer]}>
+                    <Terms />
+                </View>
+            </>
+        );
+    }
+
     return (
         <>
             <View style={[styles.mv3, styles.flexRow]}>
                 <View style={[styles.flex1]}>
-                    <Text>
-                        {translate('smsDeliveryFailurePage.smsDeliveryFailureMessage', {login})} {SMSDeliveryFailureMessage}
-                    </Text>
+                    <Text>{translate('smsDeliveryFailurePage.smsDeliveryFailureMessage', {login})}</Text>
                 </View>
             </View>
             <View style={[styles.mv4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsEnd]}>
-                <Button
-                    success
-                    medium
-                    text={translate('common.buttonConfirm')}
-                    onPress={() => Session.clearSignInData()}
-                    pressOnEnter
+                <FormAlertWithSubmitButton
+                    buttonText={translate('common.validate')}
+                    isLoading={account?.smsDeliveryFailureStatus?.isLoading}
+                    onSubmit={() => resetSMSDeliveryFailure(login)}
+                    message={errorText}
+                    isAlertVisible={shouldShowError}
+                    containerStyles={[styles.w100, styles.mh0]}
                 />
             </View>
             <View style={[styles.mt3, styles.mb2]}>
-                <ChangeExpensifyLoginLink onPress={() => Session.clearSignInData()} />
+                <ChangeExpensifyLoginLink onPress={() => clearSignInData()} />
             </View>
             <View style={[styles.mt4, styles.signInPageWelcomeTextContainer]}>
                 <Terms />

src/pages/signin/SignInPage.tsx

@@ -13,14 +13,14 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as ActiveClientManager from '@libs/ActiveClientManager';
-import * as Localize from '@libs/Localize';
+import {isClientTheLeader as isClientTheLeaderActiveClientManager} from '@libs/ActiveClientManager';
+import {getDevicePreferredLocale} from '@libs/Localize';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import Visibility from '@libs/Visibility';
-import * as App from '@userActions/App';
-import * as Session from '@userActions/Session';
+import {setLocale} from '@userActions/App';
+import {clearSignInData} from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -94,7 +94,7 @@ function getRenderOptions({
     const isSAMLEnabled = !!account?.isSAMLEnabled;
     const isSAMLRequired = !!account?.isSAMLRequired;
     const hasEmailDeliveryFailure = !!account?.hasEmailDeliveryFailure;
-    const hasSMSDeliveryFailure = !!account?.smsDeliveryFailureStatus?.hasSMSDeliveryFailure;
+    const hasSMSDeliveryFailure = !!account?.smsDeliveryFailureStatus;
 
     // True, if the user has SAML required, and we haven't yet initiated SAML for their account
     const shouldInitiateSAMLLogin = hasAccount && hasLogin && isSAMLRequired && !hasInitiatedSAMLLogin && !!account.isLoading;
@@ -104,14 +104,14 @@ function getRenderOptions({
     // case we want to clear their sign in data so they don't end up in an infinite loop redirecting back to their
     // SSO provider's login page
     if (hasLogin && isSAMLRequired && !shouldInitiateSAMLLogin && !hasInitiatedSAMLLogin && !account.isLoading) {
-        Session.clearSignInData();
+        clearSignInData();
     }
 
     // Show the Welcome form if a user is signing up for a new account in a domain that is not controlled
     const shouldShouldSignUpWelcomeForm = !!credentials?.login && !account?.validated && !account?.accountExists && !account?.domainControlled;
     const shouldShowLoginForm = !shouldShowAnotherLoginPageOpenedMessage && !hasLogin && !hasValidateCode;
     const shouldShowEmailDeliveryFailurePage = hasLogin && hasEmailDeliveryFailure && !shouldShowChooseSSOOrMagicCode && !shouldInitiateSAMLLogin;
-    const shouldShowSMSDeliveryFailurePage = hasLogin && hasSMSDeliveryFailure && !shouldShowChooseSSOOrMagicCode && !shouldInitiateSAMLLogin;
+    const shouldShowSMSDeliveryFailurePage = !!(hasLogin && hasSMSDeliveryFailure && !shouldShowChooseSSOOrMagicCode && !shouldInitiateSAMLLogin && account?.accountExists);
     const isUnvalidatedSecondaryLogin = hasLogin && !isPrimaryLogin && !account?.validated && !hasEmailDeliveryFailure && !hasSMSDeliveryFailure;
     const shouldShowValidateCodeForm =
         !shouldShouldSignUpWelcomeForm &&
@@ -176,7 +176,7 @@ function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: F
 
     const [login, setLogin] = useState(() => Str.removeSMSDomain(credentials?.login ?? ''));
 
-    const isClientTheLeader = !!activeClients && ActiveClientManager.isClientTheLeader();
+    const isClientTheLeader = !!activeClients && isClientTheLeaderActiveClientManager();
     // We need to show "Another login page is opened" message if the page isn't active and visible
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowAnotherLoginPageOpenedMessage = Visibility.isVisible() && !isClientTheLeader;
@@ -186,7 +186,7 @@ function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: F
         if (preferredLocale) {
             return;
         }
-        App.setLocale(Localize.getDevicePreferredLocale());
+        setLocale(getDevicePreferredLocale());
     }, [preferredLocale]);
     useEffect(() => {
         if (credentials?.login) {
@@ -282,7 +282,7 @@ function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: F
             (!shouldShowAnotherLoginPageOpenedMessage &&
                 (shouldShowEmailDeliveryFailurePage || shouldShowUnlinkLoginForm || shouldShowChooseSSOOrMagicCode || shouldShowSMSDeliveryFailurePage))
         ) {
-            Session.clearSignInData();
+            clearSignInData();
             return;
         }
 

src/types/onyx/Account.ts

@@ -67,6 +67,12 @@ type SMSDeliveryFailureStatus = {
 
     /** The message associated with the SMS delivery failure */
     message: string;
+
+    /** Indicates whether the SMS delivery failure status has been reset by an API call */
+    isReset?: boolean;
+
+    /** Whether a sign is loading */
+    isLoading?: boolean;
 };
 
 /** Model of user account */