New places api support

package.json

@@ -143,7 +143,7 @@
     "react-native-draggable-flatlist": "^4.0.1",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.18.0",
-    "react-native-google-places-autocomplete": "2.5.6",
+    "react-native-google-places-autocomplete": "2.5.7",
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-image-picker": "^7.0.3",
     "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#cb392140db4953a283590d7cf93b4d0461baa2a9",

src/CONST.ts

@@ -1560,6 +1560,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

@@ -75,7 +75,6 @@ function AddressSearch(
             lat: 'addressLat',
             lng: 'addressLng',
         },
-        resultTypes = 'address',
         shouldSaveDraft = false,
         value,
         locationBias,
@@ -99,26 +98,25 @@ function AddressSearch(
     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;
@@ -138,27 +136,27 @@ function AddressSearch(
             country: countryPrimary,
         } = GooglePlacesUtils.getAddressComponents(addressComponents, {
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            street_number: 'long_name',
-            route: 'long_name',
-            subpremise: 'long_name',
-            locality: 'long_name',
-            sublocality: 'long_name',
+            street_number: 'longText',
+            route: 'longText',
+            subpremise: 'longText',
+            locality: 'longText',
+            sublocality: 'longText',
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            postal_town: 'long_name',
+            postal_town: 'longText',
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            postal_code: 'long_name',
+            postal_code: 'longText',
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            administrative_area_level_1: 'short_name',
+            administrative_area_level_1: 'shortText',
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            administrative_area_level_2: 'long_name',
-            country: 'short_name',
+            administrative_area_level_2: 'longText',
+            country: 'shortText',
         });
 
         // 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.
+        // need the state's full name (longText) 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',
+            administrative_area_level_1: 'longText',
         });
 
         // Make sure that the order of keys remains such that the country is always set above the state.
@@ -176,7 +174,7 @@ function AddressSearch(
 
         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
@@ -189,9 +187,9 @@ function AddressSearch(
             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
@@ -213,9 +211,9 @@ function AddressSearch(
 
         // 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;
@@ -480,6 +478,8 @@ function AddressSearch(
                         }
                         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]);
 }

src/libs/GooglePlacesUtils.ts

@@ -1,8 +1,6 @@
 type AddressComponent = {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    long_name: string;
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    short_name: string;
+    longText: string;
+    shortText: string;
     types: string[];
 };
 type FieldsToExtract = Record<string, Exclude<keyof AddressComponent, 'types'>>;
@@ -11,8 +9,8 @@ type FieldsToExtract = Record<string, Exclude<keyof AddressComponent, 'types'>>;
  * Finds an address component by type, and returns the value associated to key. Each address component object
  * inside the addressComponents array has the following structure:
  * [{
- *   long_name: "New York",
- *   short_name: "New York",
+ *   longText: "New York",
+ *   shortText: "New York",
  *   types: [ "locality", "political" ]
  * }]
  */

src/pages/iou/request/step/IOURequestStepWaypoint.tsx

@@ -3,7 +3,7 @@ import React, {useMemo, useRef, useState} from 'react';
 import type {TextInput} from 'react-native';
 import {View} from 'react-native';
 import type {Place} from 'react-native-google-places-autocomplete';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import AddressSearch from '@components/AddressSearch';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -37,26 +37,36 @@ import withFullTransactionOrNotFound from './withFullTransactionOrNotFound';
 import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound';
 import withWritableReportOrNotFound from './withWritableReportOrNotFound';
 
-type IOURequestStepWaypointOnyxProps = {
-    /** List of recent waypoints */
-    recentWaypoints: OnyxEntry<Place[]>;
-
-    userLocation: OnyxEntry<OnyxTypes.UserLocation>;
+type IOURequestStepWaypointProps = WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_WAYPOINT> & {
+    transaction: OnyxEntry<OnyxTypes.Transaction>;
 };
 
-type IOURequestStepWaypointProps = IOURequestStepWaypointOnyxProps &
-    WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_WAYPOINT> & {
-        transaction: OnyxEntry<OnyxTypes.Transaction>;
-    };
+const recentWaypointsSelector = (waypoints: OnyxEntry<OnyxTypes.RecentWaypoint[]>): OnyxEntry<Place[]> =>
+    // Only grab the most recent 20 waypoints because that's all that is shown in the UI. This also puts them into the format of data
+    // that the google autocomplete component expects for it's "predefined places" feature.
+    (waypoints ? waypoints.slice(0, CONST.RECENT_WAYPOINTS_NUMBER as number) : [])
+        .filter((waypoint) => waypoint.keyForList?.includes(CONST.YOUR_LOCATION_TEXT) !== true)
+        .map((waypoint) => ({
+            name: waypoint.name,
+            description: waypoint.address ?? '',
+            geometry: {
+                location: {
+                    lat: waypoint.lat ?? 0,
+                    lng: waypoint.lng ?? 0,
+                    latitude: waypoint.lat ?? 0,
+                    longitude: waypoint.lng ?? 0,
+                },
+            },
+        })) as OnyxEntry<Place[]>;
 
 function IOURequestStepWaypoint({
     route: {
         params: {action, backTo, iouType, pageIndex, reportID, transactionID},
     },
     transaction,
-    recentWaypoints = [],
-    userLocation,
 }: IOURequestStepWaypointProps) {
+    const [userLocation] = useOnyx(ONYXKEYS.USER_LOCATION);
+    const [recentWaypoints] = useOnyx(ONYXKEYS.NVP_RECENT_WAYPOINTS, {selector: recentWaypointsSelector});
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
     const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
@@ -247,32 +257,4 @@ function IOURequestStepWaypoint({
 
 IOURequestStepWaypoint.displayName = 'IOURequestStepWaypoint';
 
-export default withWritableReportOrNotFound(
-    withFullTransactionOrNotFound(
-        withOnyx<IOURequestStepWaypointProps, IOURequestStepWaypointOnyxProps>({
-            userLocation: {
-                key: ONYXKEYS.USER_LOCATION,
-            },
-            recentWaypoints: {
-                key: ONYXKEYS.NVP_RECENT_WAYPOINTS,
-
-                // Only grab the most recent 20 waypoints because that's all that is shown in the UI. This also puts them into the format of data
-                // that the google autocomplete component expects for it's "predefined places" feature.
-                selector: (waypoints) =>
-                    (waypoints ? waypoints.slice(0, CONST.RECENT_WAYPOINTS_NUMBER as number) : [])
-                        .filter((waypoint) => waypoint.keyForList?.includes(CONST.YOUR_LOCATION_TEXT) !== true)
-                        .map((waypoint) => ({
-                            name: waypoint.name,
-                            description: waypoint.address ?? '',
-                            geometry: {
-                                location: {
-                                    lat: waypoint.lat ?? 0,
-                                    lng: waypoint.lng ?? 0,
-                                },
-                            },
-                        })),
-            },
-        })(IOURequestStepWaypoint),
-    ),
-    true,
-);
+export default withWritableReportOrNotFound(withFullTransactionOrNotFound(IOURequestStepWaypoint));