Reservation Selector

The reservation selector is an out of the box component offered by GoMeddo to it’s customers. The reservation selector will fetch and display all the reservations a customer has signed up too. Through which the customer can select a reservation, depending on the use case, display full summary of the reservation or go to the listing.

Props

The reservation selector has nine props:

Prop	Description
`gm`	GoMeddo instance for API calls to salesforce
`contacts`	Array of GoMeddo contact
`className`	Custom CSS to control how reservation are displayed
`titleFieldName`	Custom field name for the title of reservation in SalesForce
`descriptionFieldName`	Custom field name for the description of reservation in SalesForce
`cityFieldName`	Custom field name for the city name of reservation in SalesForce
`centerFieldName`	Custom field name for the center name of reservation in SalesForce
`imageFieldName`	Custom field name for the image of reservation in SalesForce
`handleSelection`	Function that is called when a reservation is selected

CSS Variables

The reservation selector has two CSS variables:

Name	Description
`--reservation-background-color`	Changes the border color of the overview card
`--reservation-hover-background-color`	Changes the background color of the overview card

Returned Data

Returned data is a Reservation

Example use case

CSS

.your-custom-class {
  width: 50vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  gap: 0.5rem;

  --reservation-background-color: purple;
  --reservation-hover-background-color: blue;
}

JSX

import GoMeddo, {Contact, Reservation} from "@gomeddo/sdk";
import Guest from "./components/ReservationSelector.tsx";
import '/path/to/your/css';

const gm = new GoMeddo(<Your api key>);

const handleSelection = (data: Reservation) => {
    console.log(data);
}

<ReservationSelector gm={gm}
                     className={'your-custom-class'}
                     contacts={[
                       new Contact('Test', 'Tester', 'test@example.com'),
                     ]}
                     handleSelection={handleSelection}
/>