Merge pull request #60298 from Expensify/jsenyitko-phone-error-fix

Show message when validating suspended phone number

(cherry picked from commit c7b5ba1)

(CP triggered by roryabraham)

Author: JS00001

src/languages/en.ts

@@ -2079,7 +2079,7 @@ const translations = {
         smsDeliveryFailureMessage: ({login}: OurEmailProviderParams) =>
             `We've been unable to deliver SMS messages to ${login}, so we've suspended it temporarily. Please try validating your number:`,
         validationSuccess: 'Your number has been validated! Click below to send a new magic sign-in code.',
-        validationFailed: ({timeData}: {timeData?: {days?: number; hours?: number; minutes?: number}}) => {
+        validationFailed: ({timeData}: {timeData?: {days?: number; hours?: number; minutes?: number} | null}) => {
             if (!timeData) {
                 return 'Please wait a moment before trying again.';
             }

src/languages/es.ts

@@ -2083,7 +2083,7 @@ const translations = {
         smsDeliveryFailureMessage: ({login}: OurEmailProviderParams) =>
             `No hemos podido entregar mensajes SMS a ${login}, así que lo hemos suspendido temporalmente. Por favor, intenta validar tu número:`,
         validationSuccess: '¡Tu número ha sido validado! Haz clic abajo para enviar un nuevo código mágico de inicio de sesión.',
-        validationFailed: ({timeData}: {timeData?: {days?: number; hours?: number; minutes?: number}}) => {
+        validationFailed: ({timeData}: {timeData?: {days?: number; hours?: number; minutes?: number} | null}) => {
             if (!timeData) {
                 return 'Por favor, espera un momento antes de intentarlo de nuevo.';
             }

src/pages/signin/SMSDeliveryFailurePage.tsx

@@ -18,8 +18,8 @@ function SMSDeliveryFailurePage() {
     const styles = useThemeStyles();
     const {isKeyboardShown} = useKeyboardState();
     const {translate} = useLocalize();
-    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS);
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS, {canBeMissing: true});
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});
 
     const login = useMemo(() => {
         if (!credentials?.login) {
@@ -40,7 +40,14 @@ function SMSDeliveryFailurePage() {
         if (!SMSDeliveryFailureMessage) {
             return null;
         }
-        return JSON.parse(SMSDeliveryFailureMessage) as TimeData;
+
+        const parsedData = JSON.parse(SMSDeliveryFailureMessage) as TimeData | [];
+
+        if (Array.isArray(parsedData) && !parsedData.length) {
+            return null;
+        }
+
+        return parsedData as TimeData;
     }, [SMSDeliveryFailureMessage]);
 
     const hasSMSDeliveryFailure = account?.smsDeliveryFailureStatus?.hasSMSDeliveryFailure;
@@ -63,7 +70,7 @@ function SMSDeliveryFailurePage() {
             <>
                 <View style={[styles.mv3, styles.flexRow]}>
                     <View style={[styles.flex1]}>
-                        <Text>{timeData && translate('smsDeliveryFailurePage.validationFailed', {timeData})}</Text>
+                        <Text>{translate('smsDeliveryFailurePage.validationFailed', {timeData})}</Text>
                     </View>
                 </View>
                 <View style={[styles.mv4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsEnd]}>