nylas-booking-confirmation-type

Overview

The nylas-booking-confirmation-type component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.

Version	`2.1.0`
Install (React)	`npm install @nylas/react`
Import (React)	`import { NylasBookingConfirmationType } from '@nylas/react';`
Import (CDN)	You do not need to individually import the component, just import the parent component either `nylas-scheduling` or `nylas-scheduler-editor`.

Example

Properties

Property	Attribute	Description	Type	Default
`selectedLanguage`		The selected language.	`LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \| LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh \| undefined`	`undefined`

Standalone Props

ⓘ NOTE: The following props are automatically configured when used within nylas-scheduler-editor. Set these props manually only if you’re using the component independently.

Property	Description	Type	Default
`bookingType`	The booking type.	`string`	`'booking'`
`name`	The name of the confirmation redirect link.	`string`	`'confirmation-type'`
`selectedConfiguration`	The selected config	`Configuration \| undefined`	`undefined`
`showComponent`	Show or hide the confirmation type. This prop is automatically determined based on the value of selectedConfiguration in the config, making it unnecessary to set this prop manually. If the configuration is a group configuration, the component will not be shown.	`boolean`	`this.selectedConfiguration?.event_booking?.booking_type !== 'custom-confirmation' && this.selectedConfiguration?.type !== 'group'`
`themeConfig`	The theme configuration.	undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined; '--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined; '--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined; '--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined; '--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined; '--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined; '--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined; '--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined; '--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined; '--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined; '--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined; '--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined; '--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined; '--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined; '--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined; '--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined; '--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \| undefined; '--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \| undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string \| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?: string \| undefined; '--nylas-color-yellow-500'?: string \| undefined; '--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string \| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?: string \| undefined; '--nylas-color-purple-300'?: string \| undefined; '--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \| undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \| undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \| undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \| undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \| undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \| undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \| undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \| undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \| undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \| undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \| undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \| undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?: string \| undefined; }	`undefined`

Events

Event	Description	Type
`valueChanged`	This event is fired when the selected bookingType changes.	`CustomEvent<{ value: string; name: string; valueChanged?: ((event: CustomEvent<{ value: string; name: string; }>) => void) \| undefined; }>`

Shadow Parts

Part	Description
`"nbct"`	The custom booking flow container
`"nbct__dropdown"`	The dropdown container
`"nbct__dropdown-button"`	The dropdown button
`"nbct__dropdown-content"`	The dropdown content
`"nbct__header"`	The header of the custom booking flow

Built with StencilJS