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
`reservation`	Selected reservation
`contact`	Contact detail
`amountOfGuests`	Amount of guests selected
`additionalFields`	Object containing additional fields that will be displayed
`additionalFieldsEditState`	Object indicating which additional fields that can be edited
`contactInformationTitle`	Custom title for contact information section
`reservationSummaryTitle`	Custom title for reservation summary form
`additionalFieldInformationTitle`	Custom title for additional field section
`priceInformationTitle`	Custom title for price section
`titleFieldName`	Custom field name for the title of reservation in SalesForce
`centerFieldName`	Custom field name for the center name of reservation in SalesForce
`locationFieldName`	Custom field name for the location name of reservation in SalesForce
`isLoading`	Disabled edit option when API call is being made
`currencySymbol`	Alternative currency symbol
`contactFirstNameTitle`	Custom contact first name title
`contactLastNameTitle`	Custom contact last name title
`contactEmailTitle`	Custom contact email title
`contactPhoneTitle`	Custom contact phone title
`contactInfoErrorMessages`	Custom messages for errors for contact details
`handleConfirmation`	Function for handling confirmation
`handleCancellation`	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
`--form-background-color`	Changes the background color of the entire form
`--form-input-border-color`	Changed the border color of input field
`--form-input-focus-border-color`	Changes the focus border color of input field
`--form-disabled-input-background-color`	Changes the background color of disabled input field
`--form-disabled-input-border-color`	Changes the border color of disabled input field
`--form-disabled-input-text-color`	Changes the text color of disabled input field
`--form-header-border-color`	Changes the border color of section header
`--form-header-background-color`	Changes the background color of section header
`--form-total-price-border-color`	Changes the border color of total price
`--form-submit-button-text-color`	Changes the text color of the confirm button
`--form-submit-button-border-color`	Changes the border color of the confirm button
`--form-submit-button-hover-background-color`	Changest the background color when the confirm button is hovered over
`--form-cancel-button-background-color`	Changes the background color of the cancel button
`--form-cancel-button-border-color`	Changes the border color of the cancel button
`--form-cancel-button-text-color`	Changes the text color of the cancel button
`--form-error-message-text-color`	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

JSON

{
  'contact': Contact,
  ...AdditionalFields
}

Example use case

CSS

.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;
}

JSX

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}
/>