New places api support

src/CONST.ts

@@ -1322,6 +1322,10 @@ const CONST = {
 
     YOUR_LOCATION_TEXT: 'Your Location',
 
+    GOOGLE_PLACES_API: {
+        FIELDS_MASK: 'id,name,addressComponents,adrFormatAddress,formattedAddress,location,plusCode,shortFormattedAddress,types,viewport',
+    },
+
     ATTACHMENT_MESSAGE_TEXT: '[Attachment]',
     ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source',
     ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE: 'data-optimistic-src',

src/components/AddressSearch/index.tsx

@@ -74,7 +74,6 @@
             lat: 'addressLat',
             lng: 'addressLng',
         },
-        resultTypes = 'address',
         shouldSaveDraft = false,
         value,
         locationBias,
@@ -97,26 +96,25 @@
     const containerRef = useRef<View>(null);
     const query = useMemo(
         () => ({
-            language: preferredLocale,
-            types: resultTypes,
-            components: isLimitedToUSA ? 'country:us' : undefined,
-            ...(locationBias && {locationbias: locationBias}),
+            languageCode: preferredLocale,
+            includedRegionCodes: isLimitedToUSA ? ['us'] : undefined,
+            ...(locationBias && {locationBias}),
         }),
-        [preferredLocale, resultTypes, isLimitedToUSA, locationBias],
+        [preferredLocale, isLimitedToUSA, locationBias],
     );
     const shouldShowCurrentLocationButton = canUseCurrentLocation && searchValue.trim().length === 0 && isFocused;
     const saveLocationDetails = (autocompleteData: GooglePlaceData, details: GooglePlaceDetail | null) => {
-        const addressComponents = details?.address_components;
+        const addressComponents = details?.addressComponents;
         if (!addressComponents) {
             // When there are details, but no address_components, this indicates that some predefined options have been passed
             // to this component which don't match the usual properties coming from auto-complete. In that case, only a limited
             // amount of data massaging needs to happen for what the parent expects to get from this function.
             if (details) {
                 onPress?.({
                     address: autocompleteData.description ?? '',
-                    lat: details.geometry.location.lat ?? 0,
-                    lng: details.geometry.location.lng ?? 0,
-                    name: details.name,
+                    lat: details.location?.latitude ?? details.geometry.location?.lat ?? 0,
+                    lng: details.location?.longitude ?? details.geometry.location?.lng ?? 0,
+                    name: autocompleteData?.structured_formatting?.main_text ?? details?.name ?? '',
                 });
             }
             return;
@@ -134,7 +132,7 @@
             administrative_area_level_1: state,
             administrative_area_level_2: stateFallback,
             country: countryPrimary,
         } = GooglePlacesUtils.getAddressComponents(addressComponents, {
             // eslint-disable-next-line @typescript-eslint/naming-convention
             street_number: 'long_name',
             route: 'long_name',
@@ -154,7 +152,7 @@
 
         // 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, {
             // eslint-disable-next-line @typescript-eslint/naming-convention
             administrative_area_level_1: 'long_name',
         });
@@ -174,7 +172,7 @@
 
         const values = {
             street: `${streetNumber} ${streetName}`.trim(),
-            name: details.name ?? '',
+            name: autocompleteData?.structured_formatting?.main_text ?? details?.name ?? '',
             // Autocomplete returns any additional valid address fragments (e.g. Apt #) as subpremise.
             street2: subpremise,
             // Make sure country is updated first, since city and state will be reset if the country changes
@@ -187,9 +185,9 @@
             city: locality || postalTown || sublocality || cityAutocompleteFallback,
             zipCode,
 
-            lat: details.geometry.location.lat ?? 0,
-            lng: details.geometry.location.lng ?? 0,
-            address: autocompleteData.description || details.formatted_address || '',
+            lat: details.location?.latitude ?? details.geometry.location?.lat ?? 0,
+            lng: details.location?.longitude ?? details.geometry.location?.lng ?? 0,
+            address: autocompleteData.description || details.formattedAddress || '',
         };
 
         // If the address is not in the US, use the full length state name since we're displaying the address's
@@ -211,9 +209,9 @@
 
         // Some edge-case addresses may lack both street_number and route in the API response, resulting in an empty "values.street"
         // We are setting up a fallback to ensure "values.street" is populated with a relevant value
-        if (!values.street && details.adr_address) {
+        if (!values.street && details.adrFormatAddress) {
             const streetAddressRegex = /<span class="street-address">([^<]*)<\/span>/;
-            const adrAddress = details.adr_address.match(streetAddressRegex);
+            const adrAddress = details.adrFormatAddress.match(streetAddressRegex);
             const streetAddressFallback = adrAddress ? adrAddress?.[1] : null;
             if (streetAddressFallback) {
                 values.street = streetAddressFallback;
@@ -473,6 +471,8 @@
                         }
                         placeholder=""
                         listViewDisplayed
+                        fields={CONST.GOOGLE_PLACES_API.FIELDS_MASK}
+                        isNewPlacesAPI
                     >
                         <LocationErrorMessage
                             onClose={() => setLocationErrorCode(null)}

src/components/AddressSearch/types.ts

@@ -27,6 +27,19 @@ type PredefinedPlace = Place & {
     name?: string;
 };
 
+type LocationBias = {
+    rectangle: {
+        low: {
+            latitude: number,
+            longitude: number,
+        },
+        high: {
+            latitude: number,
+            longitude: number,
+        }
+    }
+};
+
 type AddressSearchProps = {
     /** The ID used to uniquely identify the input in a Form */
     inputID?: string;
@@ -83,7 +96,7 @@ type AddressSearchProps = {
     resultTypes?: string;
 
     /** Location bias for querying search results. */
-    locationBias?: string;
+    locationBias?: LocationBias | undefined;
 
     /** The user's preferred locale e.g. 'en', 'es-ES' */
     preferredLocale?: Locale;

src/hooks/useLocationBias.ts

@@ -48,8 +48,21 @@ export default function useLocationBias(allWaypoints: WaypointCollection, userLo
         const north = maxLat < 90 ? maxLat : 90;
         const east = maxLng < 180 ? maxLng : 180;
 
-        // Format: rectangle:south,west|north,east
-        const rectFormat = `rectangle:${south},${west}|${north},${east}`;
-        return rectFormat;
+        if(latitudes.length === 0 || longitudes.length === 0) {
+            return undefined;
+        }
+        const rectangularBoundary = {
+            rectangle: {
+                low: {
+                    latitude: south,
+                    longitude: west,
+                },
+                high: {
+                    latitude: north,
+                    longitude: east,
+                }
+            }
+        };
+        return rectangularBoundary;
     }, [userLocation, allWaypoints]);
 }