[Due for payment 2025-09-04] [$125] Vacation Delegate - Error message is not translated to Spanish

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.90-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precond: App is in English

1. Open the ND Beta app and sign into a valid account
2. Go to Account > Status > Vacation Delegate > Select a user (Notice the error message)
3. Turn off internet connection
4. Click "back" button (You can turn back on the internet connection here)
5. Go to Preferences > Spanish
6. Go back one more time to Account > Status > Vacation Delegate

Expected Result:

Text should be translated to Spanish as "Hubo un error al actualizar tu delegado de vacaciones.

Actual Result:

Text is not translated, still displays in English (You can even refresh the page and it still wont be translated)

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6909843_1754524042334.Text_doesnt_update_to_spanish.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021955073927151083356
• Upwork Job ID: 1955073927151083356
• Last Price Increase: 2025-08-19
• Automatic offers:
• ijmalik | Contributor | 108489859

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[ijmalik]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When users switch languages (e.g., from English to Spanish), error messages in the Vacation Delegate feature remain in the original language instead of translating to the new language.

What is the root cause of that problem?

App/src/libs/actions/VacationDelegate.ts

Line 44 in 206a0e6

errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('statusPage.vacationDelegateError'),

Current Implementation:
Uses getMicroSecondOnyxErrorWithTranslationKey() which immediately translates the error message and stores the string
Stores format: { "timestamp": "translated string" }

Expected Behavior:
Should store translation keys instead of translated strings
Required format: { "timestamp": { translationKey: "key" } }
Allows dynamic re-translation when language changes

Existing Format

"failureData": [
      {
        "onyxMethod": "merge",
        "key": "nvp_private_vacationDelegate",
        "value": {
          "errors": {
            "1754666974257000": "There was an error updating your vacation delegate."
          }
        }
      }
    ]

Expected Format

"failureData": [
      {
        "onyxMethod": "merge",
        "key": "nvp_private_vacationDelegate",
        "value": {
          "errors": {
            "1754666974257000": 
              translationKey: "statusPage.vacationDelegateError"
          }
        }
      }
    ]

What changes do you think we should make in order to solve the problem?

getMicroSecondTranslationErrorWithTranslationKey:

App/src/libs/ErrorUtils.ts

Lines 48 to 55 in 36c8f8b

	/**
	* Creates an error object with a timestamp (in microseconds) as the key and the translation key as the value.
	* @param translationKey - The translation key for the error message.
	*/
	function getMicroSecondTranslationErrorWithTranslationKey(translationKey: TranslationPaths, errorKey?: number): TranslationKeyErrors {
	return {[errorKey ?? DateUtils.getMicroseconds()]: {translationKey}};
	}

There is not much changes just replacing the function name from getMicroSecondOnyxErrorWithTranslationKey to getMicroSecondTranslationErrorWithTranslationKey. No param change, nothing else.

Replace

App/src/libs/actions/VacationDelegate.ts

Line 44 in 206a0e6

errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('statusPage.vacationDelegateError'),

with

errors: ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('statusPage.vacationDelegateError'),

and replace

App/src/libs/actions/VacationDelegate.ts

Line 97 in 206a0e6

errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('statusPage.vacationDelegateError'),

with same above function

errors: ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('statusPage.vacationDelegateError'),

App/src/libs/ErrorUtils.ts

Lines 48 to 55 in 36c8f8b

	/**
	* Creates an error object with a timestamp (in microseconds) as the key and the translation key as the value.
	* @param translationKey - The translation key for the error message.
	*/
	function getMicroSecondTranslationErrorWithTranslationKey(translationKey: TranslationPaths, errorKey?: number): TranslationKeyErrors {
	return {[errorKey ?? DateUtils.getMicroseconds()]: {translationKey}};
	}

The function will return errors in the required format with translation keys rather than pre-translated strings.

"failureData": [
      {
        "onyxMethod": "merge",
        "key": "nvp_private_vacationDelegate",
        "value": {
          "errors": {
            "1754666974257000": 
              translationKey: "statusPage.vacationDelegateError"
          }
        }
      }
    ]

The difference is:

getMicroSecondOnyxErrorWithTranslationKey → stores a translated string
getMicroSecondTranslationErrorWithTranslationKey → stores the translation key

That’s why we should replace it in VacationDelegate.ts so the error messages can be re-translated when the app language changes.

getMicroSecondTranslationErrorWithTranslationKey is specifically written for this purpose to accommodate translation of different languages.

Many test cases have already been written to test the functionality of ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey

App/tests/unit/ErrorUtilsTest.ts

Lines 70 to 226 in 17051f9

	describe('getMicroSecondTranslationErrorWithTranslationKey', () => {
	beforeEach(() => {
	jest.clearAllMocks();
	});
	test('should create an error object with microsecond timestamp and translation key', () => {
	const mockMicroseconds = 1234567890123;
	(DateUtils.getMicroseconds as jest.Mock).mockReturnValue(mockMicroseconds);
	const result = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.incorrectLoginOrPassword');
	expect(result).toEqual({
	[mockMicroseconds]: {translationKey: 'passwordForm.error.incorrectLoginOrPassword'},
	});
	expect(DateUtils.getMicroseconds).toHaveBeenCalledTimes(1);
	});
	test('should use provided errorKey instead of generating microsecond timestamp', () => {
	const customErrorKey = 9876543210;
	const result = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.fallback', customErrorKey);
	expect(result).toEqual({
	[customErrorKey]: {translationKey: 'passwordForm.error.fallback'},
	});
	expect(DateUtils.getMicroseconds).not.toHaveBeenCalled();
	});
	test('should handle different translation keys', () => {
	const mockMicroseconds = 1111111111111;
	(DateUtils.getMicroseconds as jest.Mock).mockReturnValue(mockMicroseconds);
	const result = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.incorrectLoginOrPassword');
	expect(result).toEqual({
	[mockMicroseconds]: {translationKey: 'passwordForm.error.incorrectLoginOrPassword'},
	});
	});
	});
	describe('isTranslationKeyError', () => {
	test('should return false for string messages', () => {
	expect(ErrorUtils.isTranslationKeyError('This is a string error')).toBe(false);
	expect(ErrorUtils.isTranslationKeyError('')).toBe(false);
	});
	test('should return false for array messages', () => {
	expect(ErrorUtils.isTranslationKeyError(['error1', 'error2'])).toBe(false);
	expect(ErrorUtils.isTranslationKeyError([])).toBe(false);
	});
	test('should return false for empty objects', () => {
	expect(ErrorUtils.isTranslationKeyError({})).toBe(false);
	});
	test('should return false for objects with multiple keys', () => {
	expect(
	ErrorUtils.isTranslationKeyError({
	translationKey: 'passwordForm.error.fallback',
	extraKey: 'extra',
	}),
	).toBe(false);
	});
	test('should return false for objects without translationKey property', () => {
	expect(ErrorUtils.isTranslationKeyError({error: 'generic error'})).toBe(false);
	expect(ErrorUtils.isTranslationKeyError({message: 'error message'})).toBe(false);
	});
	test('should return true for valid TranslationKeyError objects', () => {
	expect(ErrorUtils.isTranslationKeyError({translationKey: 'passwordForm.error.fallback'})).toBe(true);
	expect(ErrorUtils.isTranslationKeyError({translationKey: 'passwordForm.error.incorrectLoginOrPassword'})).toBe(true);
	expect(ErrorUtils.isTranslationKeyError({translationKey: 'session.offlineMessageRetry'})).toBe(true);
	});
	test('should return false for null and undefined', () => {
	expect(ErrorUtils.isTranslationKeyError(null)).toBe(false);
	expect(ErrorUtils.isTranslationKeyError(undefined)).toBe(false);
	});
	test('should return false for primitive types', () => {
	expect(ErrorUtils.isTranslationKeyError(123)).toBe(false);
	expect(ErrorUtils.isTranslationKeyError(true)).toBe(false);
	expect(ErrorUtils.isTranslationKeyError(false)).toBe(false);
	});
	});
	describe('Integration: getMicroSecondTranslationErrorWithTranslationKey and isTranslationKeyError', () => {
	beforeEach(() => {
	jest.clearAllMocks();
	});
	test('should create translation error objects that are correctly identified by isTranslationKeyError', () => {
	const mockMicroseconds = 1234567890123;
	(DateUtils.getMicroseconds as jest.Mock).mockReturnValue(mockMicroseconds);
	const errorObject = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.incorrectLoginOrPassword');
	// The error object should have one key (the timestamp)
	const keys = Object.keys(errorObject);
	expect(keys).toHaveLength(1);
	// The value at that key should be a valid translation key error
	const errorValue = errorObject[keys[0]];
	expect(ErrorUtils.isTranslationKeyError(errorValue)).toBe(true);
	});
	test('should work with custom error keys', () => {
	const customErrorKey = 9876543210;
	const errorObject = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.fallback', customErrorKey);
	// The error object should have the custom key
	expect(errorObject).toHaveProperty(customErrorKey.toString());
	// The value should be a valid translation key error
	const errorValue = errorObject[customErrorKey];
	expect(ErrorUtils.isTranslationKeyError(errorValue)).toBe(true);
	});
	test('should create objects with multiple errors that are all valid translation key errors', () => {
	const mockMicroseconds1 = 1111111111111;
	const mockMicroseconds2 = 2222222222222;
	(DateUtils.getMicroseconds as jest.Mock).mockReturnValueOnce(mockMicroseconds1).mockReturnValueOnce(mockMicroseconds2);
	const error1 = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.incorrectLoginOrPassword');
	const error2 = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('session.offlineMessageRetry');
	// Combine the error objects
	const combinedErrors = {...error1, ...error2};
	// All values should be valid translation key errors
	Object.values(combinedErrors).forEach((errorValue) => {
	expect(ErrorUtils.isTranslationKeyError(errorValue)).toBe(true);
	});
	});
	test('should verify the structure of created translation key errors', () => {
	const mockMicroseconds = 5555555555555;
	(DateUtils.getMicroseconds as jest.Mock).mockReturnValue(mockMicroseconds);
	const errorObject = ErrorUtils.getMicroSecondTranslationErrorWithTranslationKey('passwordForm.error.twoFactorAuthenticationEnabled');
	const errorValue = errorObject[mockMicroseconds];
	// Verify the structure matches what isTranslationKeyError expects
	expect(errorValue).toEqual({
	translationKey: 'passwordForm.error.twoFactorAuthenticationEnabled',
	});
	// Verify it passes all the checks in isTranslationKeyError
	expect(typeof errorValue).not.toBe('string');
	expect(Array.isArray(errorValue)).toBe(false);
	expect(Object.keys(errorValue)).toHaveLength(1);
	expect(errorValue.translationKey).toBeDefined();
	expect(ErrorUtils.isTranslationKeyError(errorValue)).toBe(true);
	});
	});
	});

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

N/A

68116.mp4

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021955073927151083356

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)

[melvin-bot]

Upwork job price has been updated to $125