Skip to main content
Skip table of contents

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}
/>
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.