[HOLD for payment 2025-02-04] [$250] Web - Profile - App does not dynamically translate address options

[vincdargento]

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: v9.0.78-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Go to Settings -> Profile -> Personal Details -> Home Address
3. In the Address Line 1, type any initial search say (123, Polar) and wait for the results to appear
4. Keep the dropdown/form open in the current device
5. In the second device, change the language (Settings -> Preferences -> Language)

Expected Result:

In the first device, the list of addresses get updated with the newly selected language (as in PR #21949)

Actual Result:

In the first device, the list of addresses is not updated with the newly selected language.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021874221963298137998
• Upwork Job ID: 1874221963298137998
• Last Price Increase: 2025-01-14
• Automatic offers:
• FitseTLT | Contributor | 105712879

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Triggered auto assignment to @anmurali (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.

[FitseTLT]

Proposal

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

Web - Profile - App does not dynamically translate address options

What is the root cause of that problem?

The mechanism built in #21949 to dynamically translate still works but we are not passing preferredLocale prop so the query.language will be undefined and no translation is applied on the address options

App/src/components/AddressSearch/index.tsx

Lines 100 to 102 in 12e0941

	const query = useMemo(
	() => ({
	language: preferredLocale,

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

If we want to apply translation for all address auto complete component in all the code base we can easily get the preferedLocale inside the component instead of accepting as a prop

App/src/components/AddressSearch/index.tsx

Line 88 in 12e0941

const {translate} = useLocalize();

    const {translate, preferredLocale} = useLocalize();

But if we want to apply the translation selectively we can keep preferredLocale prop of AddressSearch and pass the locale properly wherever we need the translation

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

We will not add tests because it is only a problem of not passing locale prop from the App side and the address options are determined by the internal logic of GooglePlacesAutocomplete which makes it hard to mock and test from the App 👍

What alternative solutions did you explore? (Optional)

[melvin-bot]

@anmurali Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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

[hoangzinh]

@FitseTLT can you complete the section "What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?"? Thank you.