Fix - Web - Profile - App does not dynamically translate address options

src/components/AddressSearch/index.tsx

@@ -14,11 +14,11 @@ import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as UserLocation from '@libs/actions/UserLocation';
-import * as ApiUtils from '@libs/ApiUtils';
+import {setUserLocation} from '@libs/actions/UserLocation';
+import {getCommandURL} from '@libs/ApiUtils';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import type {GeolocationErrorCodeType} from '@libs/getCurrentPosition/getCurrentPosition.types';
-import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
+import {getAddressComponents, getPlaceAutocompleteTerms} from '@libs/GooglePlacesUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
@@ -65,7 +65,6 @@ function AddressSearch(
         onPress,
         onCountryChange,
         predefinedPlaces = [],
-        preferredLocale,
         renamedInputKeys = {
             street: 'addressStreet',
             street2: 'addressStreet2',
@@ -85,7 +84,7 @@ function AddressSearch(
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {translate} = useLocalize();
+    const {translate, preferredLocale} = useLocalize();
     const {isOffline} = useNetwork();
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
     const [isTyping, setIsTyping] = useState(false);
@@ -136,7 +135,7 @@ function AddressSearch(
             administrative_area_level_1: state,
             administrative_area_level_2: stateFallback,
             country: countryPrimary,
-        } = GooglePlacesUtils.getAddressComponents(addressComponents, {
+        } = getAddressComponents(addressComponents, {
             // eslint-disable-next-line @typescript-eslint/naming-convention
             street_number: 'long_name',
             route: 'long_name',
@@ -156,18 +155,14 @@ function AddressSearch(
 
         // The state's iso code (short_name) is needed for the StatePicker component but we also
         // need the state's full name (long_name) when we render the state in a TextInput.
-        const {administrative_area_level_1: longStateName} = GooglePlacesUtils.getAddressComponents(addressComponents, {
+        const {administrative_area_level_1: longStateName} = getAddressComponents(addressComponents, {
             // eslint-disable-next-line @typescript-eslint/naming-convention
             administrative_area_level_1: 'long_name',
         });
 
         // Make sure that the order of keys remains such that the country is always set above the state.
         // Refer to https://github.com/Expensify/App/issues/15633 for more information.
-        const {
-            country: countryFallbackLongName = '',
-            state: stateAutoCompleteFallback = '',
-            city: cityAutocompleteFallback = '',
-        } = GooglePlacesUtils.getPlaceAutocompleteTerms(autocompleteData?.terms ?? []);
+        const {country: countryFallbackLongName = '', state: stateAutoCompleteFallback = '', city: cityAutocompleteFallback = ''} = getPlaceAutocompleteTerms(autocompleteData?.terms ?? []);
 
         const countryFallback = Object.keys(CONST.ALL_COUNTRIES).find((country) => country === countryFallbackLongName);
 
@@ -281,7 +276,7 @@ function AddressSearch(
                 };
 
                 // Update the current user location
-                UserLocation.setUserLocation({longitude, latitude});
+                setUserLocation({longitude, latitude});
                 onPress?.(location);
             },
             (errorData) => {
@@ -406,7 +401,7 @@ function AddressSearch(
                         query={query}
                         requestUrl={{
                             useOnPlatform: 'all',
-                            url: isOffline ? '' : ApiUtils.getCommandURL({command: 'Proxy_GooglePlaces?proxyUrl='}),
+                            url: isOffline ? '' : getCommandURL({command: 'Proxy_GooglePlaces?proxyUrl='}),
                         }}
                         textInputProps={{
                             InputComp: TextInput,

src/components/AddressSearch/types.ts

@@ -1,7 +1,6 @@
 import type {RefObject} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputFocusEventData, View, ViewStyle} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
-import type Locale from '@src/types/onyx/Locale';
 import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
 type CurrentLocationButtonProps = {
@@ -85,9 +84,6 @@ type AddressSearchProps = {
     /** Location bias for querying search results. */
     locationBias?: string;
 
-    /** The user's preferred locale e.g. 'en', 'es-ES' */
-    preferredLocale?: Locale;
-
     /** Callback to be called when the country is changed */
     onCountryChange?: (country: unknown) => void;
 };