nylas-cancel-booking-form

Overview

The nylas-cancel-booking-form component is a UI component that allows users to cancel a booking (DELETE request). This component is also used to reject a booking (PUT request) by the organizer, if the prop rejectBookingId is provided.

Version	`1.1.4`
Install (React)	`npm install @nylas/react`
Import (React)	`import { NylasCancelBookingForm } from '@nylas/react';`
Import (CDN)	`<script type="module"> import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-cancel-booking-form/nylas-cancel-booking-form.es.js"; defineCustomElement(); </script>`

Example

Properties

Property	Description	Type	Default
`cancelBookingId`	The booking ID to cancel.	`string \| undefined`	`undefined`
`rejectBookingId`	The booking ID to reject.	`string \| undefined`	`undefined`
`selectedTimeslot _(required)_`	The selected timeslot.	`{ start_time: Date; end_time: Date; emails?: string[] \| undefined; }`	`undefined`

Standalone Props

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

Property	Description	Type	Default
`configSettings`	The config settings.	undefined \| { configuration_id: string; scheduler: { available_days_in_future: number; min_cancellation_notice: number; min_booking_notice: number; rescheduling_url?: string \| undefined; cancellation_url?: string \| undefined; cancellation_policy?: string \| undefined; hide_additional_guests?: boolean \| undefined; hide_cancellation_options?: boolean \| undefined; hide_rescheduling_options?: boolean \| undefined; additional_fields?: Record<string, AdditionalFields> \| undefined; confirmation_redirect_url?: string \| undefined; organizer_confirmation_url?: string \| undefined; }; organizer: { name: string; email: string; }; slug: string; appearance: Appearance; booking_type: string; name: string; }	`undefined`
`eventInfo`	The event info.	`undefined \| { booking_id: string; organizer: { email: string; name: string; is_organizer?: boolean \| undefined; }; title: string; description: string; status: string; }`	`undefined`
`isLoading`	The loading state.	`boolean \| undefined`	`undefined`

Events

Event	Description	Type
`cancelBookedEventError`	This event is fired when an error occurs while cancelling the booking.	`CustomEvent<NylasSchedulerErrorResponse>`
`cancelBookingFormError`	This event is fired when an error occurs in the booking form.	`CustomEvent<{ id?: string \| undefined; type?: NotificationType \| undefined; title?: string \| undefined; code?: number \| undefined; category?: string \| undefined; description?: string \| undefined; ttl?: number \| "none" \| undefined; }>`
`cancelBookingFormSubmitted`	This event is fired when the cancel booking form is submitted.	`CustomEvent<{ bookingId: string; action: "cancel" \| "reject"; reason: string; errorHandler?: ((error: NylasSchedulerErrorResponse) => void) \| undefined; }>`
`goBackButtonClicked`	This event is fired when the Go back button is clicked on the cancel booking form.	`CustomEvent<void>`
`triggerValidation`	This event is only for triggering the validation on the text area for cancellation reason. This is for internal purposes only.	`CustomEvent<{}>`

Shadow Parts

Part	Description
`"ncbf"`	The cancel booking form container.
`"ncbf__button-cta"`	The cancel booking form CTA button.
`"ncbf__button-outline"`	The cancel booking form outline button.
`"ncbf__card"`	The cancel booking form card.
`"ncbf__description"`	The description of the cancel booking form.
`"ncbf__icon"`	The calendar icon.
`"ncbf__reason-textarea"`	The reason textarea.
`"ncbf__title"`	The title of the cancel booking form.

Built with StencilJS