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 |
---|---|
| GoMeddo instance for API calls to salesforce |
| Array of GoMeddo contact |
| Custom CSS to control how reservation are displayed |
| Custom field name for the title of reservation in SalesForce |
| Custom field name for the description of reservation in SalesForce |
| Custom field name for the city name of reservation in SalesForce |
| Custom field name for the center name of reservation in SalesForce |
| Custom field name for the image of reservation in SalesForce |
| Function that is called when a reservation is selected |
CSS Variables
The reservation selector has two CSS variables:
Name | Description |
---|---|
| Changes the border color of the overview card |
| Changes the background color of the overview card |
Returned Data
Returned data is a Reservation
Example use case
.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;
}
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}
/>