Skip to main content
Skip table of contents

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

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

If this problem persists, please contact our support.