Activity Selector
The activity selector is an out of the box component offered by GoMeddo to it’s customers. The Activity selector allows users to sign up to an available activity (e.g Yoga, Rave).
The component will fetch activities that belong to the provided resource id within the provided date range.
Props
The activity selector has ten props:
Prop | Description |
---|---|
| GoMeddo instance for API calls to salesforce |
| Id of the resource |
| Custom CSS to control how activity are displayed |
| Path to custom loading image |
| Start of date range |
| End of date range |
| Can specify type of activity to fetch |
| Custom placeholder message when a activity is not available |
| Custom field name for the title of activity in SalesForce |
| Custom field name for the description of activity in SalesForce |
| Custom field name for the city name of activity in SalesForce |
| Custom field name for the center name of activity in SalesForce |
| Custom field name for the image of activity in SalesForce |
| Custom field name for the capacity of activity in SalesForce |
| Custom placeholder message when a activity is selected |
| Function that is called when a activity is selected |
CSS Variables
The activity selector has nine CSS variables:
Name | Description |
---|---|
| Changes the background color of activity card |
| Changes the background color of time indicator |
| Changes the text color of time indicator |
| Changes the border color of the selected activity button |
| Changes the background color of the selected activity button |
| Changes the background color of the price indicator |
| Changes the text color of the price indicator |
| Changes the text color when a activity is fully booked |
| Changes the background color when a activity is fully booked |
Step-by-Step Guide to Setting Up The Example
Set Up Resources and Resource Types:
Define the hierarchical structure for your resources:
Organization > Country > City > Activity.
Example:
Organization: Your Organization
Country: Netherlands
City: Amsterdam
Activity: Yoga
Room: Entry Level Room
Note: There can be multiple Resources of the type "Room", "City" and "activity".
Create Reservation Types:
Define a Reservation Type for each class type (e.g., Pilates, Yoga).
Create a custom image field for each class type and add an image representing the class.
Create Custom Fields Under the Reservation Object:
Add the following custom fields to provide detailed information about each activity:
Room_Capacity__c
(Formula Number Field)City_Location__c
(Formula Text Field)Center_Name__c
(Formula Text Field)Reservation_type_image__c
(Custom Image Field)
Create Reservations:
Create Reservations for the activities you want to display.
Ensure each Reservation is linked to the appropriate Reservation Types, and other Custom Fields.
Note:
Ensure that each resource in GoMeddo is marked as 'isActive' and 'Api Visible' to be displayed and available through the API.
Ensure that Resources, Resources Types and Reservation Types are set up in GoMeddo. For the booking system to accurately display available activitys, each activity must be created as a reservation within GoMeddo. This step is vital as the SDK relies on these existing Reservations to present customers with real-time availability and booking options.
Returned Data
Returned data is a Reservation
Example use case
.your-custom-class {
width: 40%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
gap: 0.5rem;
--activity-card-background-color: transparent;
--activity-time-background-color: blue;
--activity-time-text-color: white;
--selected-activity-border-color: purple;
--selected-activity-background-color: purple;
--book-button-border-color: cyan;
--book-button-hover-background-color: cyan;
--book-button-hover-text-color: white;
--disabled-book-button-text-color: white;
--disabled-book-button-background-color: black;
--activity-price-background-color: gray;
--activity-price-text-color: white;
}
import GoMeddo, {Reservation} from "@gomeddo/sdk";
import ActivitySelector from "./components/ActivitySelector.tsx";
import '/path/to/your/css';
const gm = new GoMeddo(<Your api key>);
const handleSelection = (data: Reservation | undefinded) => {
console.log(date);
}
<ActivitySelector gm={gm}
resourceId={<'Selected resource ID'>}
className={'your-custom-class'}
startDate={new Date(2025,4, 13)}
endDate={new Date(2025,4, 17)}
handleSelection={handleSelection}
/>