feat(getDetails): accept the request object as the parameter

README.md

@@ -295,7 +295,7 @@ const PlacesAutocomplete = () => {
   const renderSuggestions = () =>
     data.map(suggestion => (
         <li
-          key={suggestion.id}
+          key={suggestion.place_id}
           onClick={handleSelect(suggestion)}
         >
           {/* Render suggestion text */}
@@ -336,7 +336,7 @@ const PlacesAutocomplete = () => {
   const renderSuggestions = () =>
     data.map(suggestion => (
         <li
-          key={suggestion.id}
+          key={suggestion.place_id}
           onClick={handleSelect(suggestion)}
         >
           {/* Render suggestion text */}
@@ -465,9 +465,14 @@ const PlacesAutocomplete = () => {
   };
 
   const submit = () => {
-    // Use the suggestion from the drop down (object), or just the place ID (string) if you like
-    // Here just taking first suggestion for brevity
-    getDetails(suggestions[0])
+    const parameter = {
+      // Use the "place_id" of suggestion from the dropdown (object), here just taking first suggestion for brevity
+      placeId: suggestions[0].place_id,
+      // Specify the return data that you want (optional)
+      fields: ["name", "rating"],
+    };
+
+    getDetails(parameter)
       .then((details) => {
         console.log("Details: ", details);
       })
@@ -488,7 +493,7 @@ const PlacesAutocomplete = () => {
 
 `getDetails` is an asynchronous function with the following API:
 
-- `parameters: string | object` - the place ID that you would like details about, or the entire suggestion object returned as part of the suggestions collection from usePlacesAutocomplete.
+- `parameter: object` - [the request](https://developers.google.com/maps/documentation/javascript/places#place_details_requests) of the PlacesService's `getDetails()` method. You must supply the `placeId` that you would like details about.
 - `placeResult: object | null` - [the details](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult) about the specific place your queried.
 - `error: any` - an exception.
 

src/__tests__/getDetails.ts

@@ -3,59 +3,17 @@ import { getDetailsErr, getDetails } from "../utils";
 describe("getDetails", () => {
   const data = { formatted_address: "123", name: "abc" };
   const error = "ERROR";
+  const request = { placeId: "0109", fields: ["name", "rating"] };
   const getDetailsFn = jest.fn();
-  const autocompletePrediction = {
-    description: "1230 East 38th 1/2 Street, Austin, TX, USA",
-    matched_substrings: [
-      {
-        length: 3,
-        offset: 0,
-      },
-    ],
-    place_id: "ChIJW0rEhvO1RIYRNbiY896zeNw",
-    reference: "ChIJW0rEhvO1RIYRNbiY896zeNw",
-    structured_formatting: {
-      main_text: "1230 East 38th 1/2 Street",
-      main_text_matched_substrings: [
-        {
-          length: 3,
-          offset: 0,
-        },
-      ],
-      secondary_text: "Austin, TX, USA",
-    },
-    terms: [
-      {
-        offset: 0,
-        value: "1230",
-      },
-      {
-        offset: 5,
-        value: "East 38th 1/2 Street",
-      },
-      {
-        offset: 27,
-        value: "Austin",
-      },
-      {
-        offset: 35,
-        value: "TX",
-      },
-      {
-        offset: 39,
-        value: "USA",
-      },
-    ],
-    types: ["street_address", "geocode"],
-  };
+
   const setupMaps = (type = "success") => {
     global.google = {
       maps: {
         places: {
           // @ts-expect-error
           PlacesService: class {
             getDetails =
-              type === "opts"
+              type === "request"
                 ? getDetailsFn
                 : (_: any, cb: (dataArg: any, status: string) => void) => {
                     cb(
@@ -69,48 +27,33 @@ describe("getDetails", () => {
     };
   };
 
-  it("should make call with places_id when placesId passed in", () => {
-    setupMaps("opts");
-    const opts = "0109";
-    getDetails(opts);
-    expect(getDetailsFn).toHaveBeenCalledWith(
-      { placeId: "0109" },
-      expect.any(Function)
-    );
-  });
-
-  it("should make call with places_id when AutocompletePrediction passed in", () => {
-    setupMaps("opts");
-    getDetails(autocompletePrediction);
-    expect(getDetailsFn).toHaveBeenCalledWith(
-      { placeId: "0109" },
-      expect.any(Function)
-    );
+  it("should make call with request passed in", () => {
+    setupMaps("request");
+    getDetails(request);
+    expect(getDetailsFn).toHaveBeenCalledWith(request, expect.any(Function));
   });
 
   it("should handle success correctly", () => {
     setupMaps();
-    return getDetails("0109").then((results) => {
+    return getDetails(request).then((results) => {
       expect(results).toBe(data);
     });
   });
 
   it("should throw error when place_id is not provided", () => {
     console.error = jest.fn();
 
-    const auto = { ...autocompletePrediction, place_id: null };
     setupMaps();
     // @ts-expect-error
-    return getDetails(auto).catch((err) => {
+    return getDetails({}).catch((err) => {
       expect(console.error).toHaveBeenCalledWith(getDetailsErr);
       expect(err).toBe(getDetailsErr);
     });
   });
 
   it("should handle failure correctly", () => {
-    const auto = { ...autocompletePrediction, place_id: "" };
     setupMaps("failure");
-    return getDetails(auto).catch((err) => {
+    return getDetails(request).catch((err) => {
       expect(err).toBe(error);
     });
   });

src/use-places-autocomplete.d.ts

@@ -136,6 +136,12 @@ declare module "use-places-autocomplete" {
   }
 
   // getDetails
+  interface PlaceDetailsRequest {
+    placeId: string;
+    fields?: string[];
+    sessionToken?: AutocompleteSessionToken;
+  }
+
   interface PlaceResult {
     address_components?: GeocoderAddressComponent[];
     adr_address?: string;
@@ -224,7 +230,8 @@ declare module "use-places-autocomplete" {
     time: number;
   }
 
-  /* Hook types */
+  /* Package types */
+  // Hook
   export type RequestOptions = AutocompletionRequest;
 
   interface HookArgs {
@@ -255,8 +262,8 @@ declare module "use-places-autocomplete" {
 
   export default usePlacesAutocomplete;
 
-  // Geocoding types
-  type GeoArgs = GeocoderRequest;
+  // Utils
+  export type GeoArgs = GeocoderRequest;
 
   export type GeocodeResult = GeocoderResult;
 
@@ -279,8 +286,7 @@ declare module "use-places-autocomplete" {
     useShortName: boolean
   ) => ZipCodeReturn;
 
-  // getDetails types
-  type GetDetailsArgs = AutocompletePrediction | string;
+  export type GetDetailsArgs = PlaceDetailsRequest;
 
   type DetailsResult = Promise<PlaceResult | string>;
 

src/utils.ts

@@ -60,22 +60,21 @@ export const getZipCode = (
 
 export const getDetailsErr =
   "💡use-places-autocomplete: Please provide a place Id when using getDetails() either as a string or as part of an Autocomplete Prediction.";
-type GetDetailsArgs = google.maps.places.AutocompletePrediction | string;
+type GetDetailsArgs = google.maps.places.PlaceDetailsRequest;
 type DetailsResult = Promise<google.maps.places.PlaceResult | string>;
 
 export const getDetails = (args: GetDetailsArgs): DetailsResult => {
   const PlacesService = new window.google.maps.places.PlacesService(
     document.createElement("div")
   );
-  const placeId = typeof args === "object" ? args.place_id : args;
 
-  if (typeof placeId !== "string") {
+  if (!args.placeId) {
     console.error(getDetailsErr);
     return Promise.reject(getDetailsErr);
   }
 
   return new Promise((resolve, reject) => {
-    PlacesService.getDetails({ placeId }, (results, status) => {
+    PlacesService.getDetails(args, (results, status) => {
       if (status !== "OK") reject(status);
       resolve(results);
     });