Confirmation Component
The confirmation component is an out of the box component offered by GoMeddo to it’s customers. The confirmation component will display the user details, reservation details, price and additional information. The component allows the edit of contact information and any additional information.
Props
The reservation selector has twenty-two props:
Prop | Description |
---|---|
| Selected reservation |
| Contact detail |
| Amount of guests selected |
| Object containing additional fields that will be displayed |
| Object indicating which additional fields that can be edited |
| Custom title for contact information section |
| Custom title for reservation summary form |
| Custom title for additional field section |
| Custom title for price section |
| Custom field name for the title of reservation in SalesForce |
| Custom field name for the center name of reservation in SalesForce |
| Custom field name for the location name of reservation in SalesForce |
| Disabled edit option when API call is being made |
| Alternative currency symbol |
| Custom contact first name title |
| Custom contact last name title |
| Custom contact email title |
| Custom contact phone title |
| Custom messages for errors for contact details |
| Function for handling confirmation |
| Function for handling cancellation |
The component supports the edit of phone numbers. To use this functionality, you will need to add custom property to the Contact object called Phone
CSS Variables
The reservation selector has fourteen CSS variables:
Name | Description |
---|---|
| Changes the background color of the entire form |
| Changed the border color of input field |
| Changes the focus border color of input field |
| Changes the background color of disabled input field |
| Changes the border color of disabled input field |
| Changes the text color of disabled input field |
| Changes the border color of section header |
| Changes the background color of section header |
| Changes the border color of total price |
| Changes the text color of the confirm button |
| Changes the border color of the confirm button |
| Changest the background color when the confirm button is hovered over |
| Changes the background color of the cancel button |
| Changes the border color of the cancel button |
| Changes the text color of the cancel button |
| Changes the text color of error message for contact information |
Returned Data
Returned data is a FormType
The returned object will include the contact
key which will contain the Contact
object with the information contact information that has been passed to the component.
Additionally, the return data will also contain the data from additionalField
prop
{
'contact': Contact,
...AdditionalFields
}
Example use case
.your-custom-class {
width: 50vw;
--form-background-color: red;
--form-input-border-color: cyan;
--form-input-focus-border-color: purple;
--form-disabled-input-background-color: cyan;
--form-disabled-input-border-color: grey;
--form-disabled-input-text-color: darkgrey;
--form-header-border-color: orange;
--form-header-background-color: green;
--form-total-price-border-color: white;
--form-submit-button-text-color: black;
--form-submit-button-border-color: blue;
--form-submit-button-hover-background-color: darkcyan;
--form-cancel-button-background-color: darkviolet;
--form-cancel-button-border-color: magenta;
--form-cancel-button-text-color: prink;
--form-error-message-text-color: darkmagenta;
}
import {Contact} from "@gomeddo/sdk";
import ConfirmationComponent, {FormType} from "../components/ConfirmationComponent.tsx";
import {useEffect, useMemo, useState} from "react";
import '/path/to/your/css';
const contact = new Contact('John', 'Doe', 'john_doe@GoMeddo.com');
const reservation = <'Selected reservation'>;
const isLoading = false;
const selectedAmountOfGuest = 10;
const handleSelection = (data: FormType) => {
isLoading = true;
//Your code for handling the data and API call
isLoading = false;
}
const handleCancellation = () => {
//Your code for handling cancel
}
<ConfirmationComponent className={'your-custom-class'}
reservation={reservation}
centerFieldName={<'your-field-name-for-center-name'>}
locationFieldName={<'your-field-name-for-location-name'>}
contact={contact}
additionalFields={{
"your-custom-field": 'field-data',
}}
additionalFieldsEditState={{
"your-custom-field": true
}}
amountOfGuests={selectedAmountOfGuest}
isLoading={isLoading}
handleConfirmation={handleSelection}
handleCancellation={handleCancellation}
/>