fix: Error message is not translated to Spanish after trying to move report to a deleted WS

Author: drminh2807

src/components/DotIndicatorMessage.tsx

@@ -7,9 +7,10 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {isReceiptError} from '@libs/ErrorUtils';
+import {isReceiptError, isTranslationPathError} from '@libs/ErrorUtils';
 import fileDownload from '@libs/fileDownload';
 import handleRetryPress from '@libs/ReceiptUploadRetryHandler';
+import type {TranslationPathError} from '@src/languages/types';
 import type {ReceiptError} from '@src/types/onyx/Transaction';
 import ConfirmModal from './ConfirmModal';
 import Icon from './Icon';
@@ -25,7 +26,7 @@ type DotIndicatorMessageProps = {
      *      timestamp: 'message',
      *  }
      */
-    messages: Record<string, string | ReceiptError | ReactElement | null>;
+    messages: Record<string, string | ReceiptError | TranslationPathError | ReactElement | null>;
 
     /** The type of message, 'error' shows a red dot, 'success' shows a green dot */
     type: 'error' | 'success';
@@ -109,7 +110,7 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles, dismissErr
                 key={index}
                 style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles]}
             >
-                {message}
+                {isTranslationPathError(message) ? translate(message.translationPath) : message}
             </Text>
         );
     };

src/components/ErrorMessageRow.tsx

@@ -1,14 +1,15 @@
 import mapValues from 'lodash/mapValues';
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
+import type {TranslationPathError, TranslationPathErrors} from '@src/languages/types';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {ReceiptError, ReceiptErrors} from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import MessagesRow from './MessagesRow';
 
 type ErrorMessageRowProps = {
     /** The errors to display  */
-    errors?: OnyxCommon.Errors | ReceiptErrors | null;
+    errors?: OnyxCommon.Errors | ReceiptErrors | TranslationPathErrors | null;
 
     /** Additional style object for the error row */
     errorRowStyles?: StyleProp<ViewStyle>;
@@ -26,7 +27,7 @@ type ErrorMessageRowProps = {
 function ErrorMessageRow({errors, errorRowStyles, onClose, canDismissError = true, dismissError}: ErrorMessageRowProps) {
     // Some errors have a null message. This is used to apply opacity only and to avoid showing redundant messages.
     const errorEntries = Object.entries(errors ?? {});
-    const filteredErrorEntries = errorEntries.filter((errorEntry): errorEntry is [string, string | ReceiptError] => errorEntry[1] !== null);
+    const filteredErrorEntries = errorEntries.filter((errorEntry): errorEntry is [string, string | ReceiptError | TranslationPathError] => errorEntry[1] !== null);
     const errorMessages = mapValues(Object.fromEntries(filteredErrorEntries), (error) => error);
     const hasErrorMessages = !isEmptyObject(errorMessages);
 

src/components/MessagesRow.tsx

@@ -7,6 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {ReceiptError} from '@src/types/onyx/Transaction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type { TranslationPathError } from '@src/languages/types';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -15,7 +16,7 @@ import Tooltip from './Tooltip';
 
 type MessagesRowProps = {
     /** The messages to display */
-    messages: Record<string, string | ReceiptError>;
+    messages: Record<string, string | ReceiptError | TranslationPathError>;
 
     /** The type of message, 'error' shows a red dot, 'success' shows a green dot */
     type: 'error' | 'success';

src/components/OfflineWithFeedback.tsx

@@ -12,6 +12,7 @@ import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import type { TranslationPathErrors } from '@src/languages/types';
 import CustomStylesForChildrenProvider from './CustomStylesForChildrenProvider';
 import ErrorMessageRow from './ErrorMessageRow';
 
@@ -29,7 +30,7 @@ type OfflineWithFeedbackProps = ChildrenProps & {
     shouldHideOnDelete?: boolean;
 
     /** The errors to display  */
-    errors?: OnyxCommon.Errors | ReceiptErrors | null;
+    errors?: OnyxCommon.Errors | ReceiptErrors | TranslationPathErrors | null;
 
     /** Whether we should show the error messages */
     shouldShowErrorMessages?: boolean;

src/languages/types.ts

@@ -76,6 +76,11 @@ type DefaultTranslation = typeof en;
  */
 type TranslationPaths = FlattenObject<DefaultTranslation>;
 
+type TranslationPathError = {
+    translationPath: TranslationPaths
+}
+
+type TranslationPathErrors = Record<string, TranslationPathError>;
 /**
  * Flattened default translation object with its values
  */
@@ -94,4 +99,4 @@ type TranslationParameters<TKey extends TranslationPaths> = FlatTranslationsObje
         : Args
     : never[];
 
-export type {TranslationDeepObject, TranslationPaths, PluralForm, FlatTranslationsObject, TranslationParameters};
+export type {TranslationDeepObject, TranslationPaths, PluralForm, FlatTranslationsObject, TranslationParameters, TranslationPathError, TranslationPathErrors};

src/libs/ErrorUtils.ts

@@ -1,7 +1,7 @@
 import mapValues from 'lodash/mapValues';
 import type {OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
+import type {TranslationPathError, TranslationPathErrors, TranslationPaths} from '@src/languages/types';
 import type {ErrorFields, Errors} from '@src/types/onyx/OnyxCommon';
 import type Response from '@src/types/onyx/Response';
 import type {ReceiptError} from '@src/types/onyx/Transaction';
@@ -45,6 +45,10 @@ function getMicroSecondOnyxErrorWithTranslationKey(error: TranslationPaths, erro
     return {[errorKey ?? DateUtils.getMicroseconds()]: Localize.translateLocal(error)};
 }
 
+function getMicroSecondTranslationErrorWithTranslationKey(error: TranslationPaths, errorKey?: number): TranslationPathErrors {
+    return {[errorKey ?? DateUtils.getMicroseconds()]: {translationPath: error}};
+}
+
 /**
  * Creates an error object with a timestamp (in microseconds) as the key and the error message as the value.
  * @param error - The error message.
@@ -197,6 +201,19 @@ function isReceiptError(message: unknown): message is ReceiptError {
     return ((message as Record<string, unknown>)?.error ?? '') === CONST.IOU.RECEIPT_ERROR;
 }
 
+function isTranslationPathError(message: unknown): message is TranslationPathError {
+    if (typeof message === 'string') {
+        return false;
+    }
+    if (Array.isArray(message)) {
+        return false;
+    }
+    if (Object.keys(message as Record<string, unknown>).length === 0) {
+        return false;
+    }
+    return (message as Record<string, unknown>)?.translationPath !== undefined;
+}
+
 export {
     addErrorMessage,
     getAuthenticateErrorMessage,
@@ -212,6 +229,8 @@ export {
     getMicroSecondOnyxErrorWithMessage,
     getMicroSecondOnyxErrorObject,
     isReceiptError,
+    isTranslationPathError,
+    getMicroSecondTranslationErrorWithTranslationKey,
 };
 
 export type {OnyxDataWithErrors};

src/libs/actions/Report.ts

@@ -67,7 +67,7 @@ import * as Environment from '@libs/Environment/Environment';
 import {getOldDotURLFromEnvironment} from '@libs/Environment/Environment';
 import getEnvironment from '@libs/Environment/getEnvironment';
 import type EnvironmentType from '@libs/Environment/getEnvironment/types';
-import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
+import {getMicroSecondOnyxErrorWithTranslationKey, getMicroSecondTranslationErrorWithTranslationKey} from '@libs/ErrorUtils';
 import fileDownload from '@libs/fileDownload';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
 import HttpUtils from '@libs/HttpUtils';
@@ -5642,7 +5642,7 @@ function buildOptimisticChangePolicyData(report: Report, policyID: string, repor
         key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
         value: {
             [optimisticMovedReportAction.reportActionID]: {
-                errors: getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                errors: getMicroSecondTranslationErrorWithTranslationKey('common.genericErrorMessage'),
             },
         },
     });