nylas-cancel-booking-form

The nylas-cancel-booking-form element 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.

PreviewCode

import { NylasCancelBookingForm } from '@nylas/react';

export default function NylasCancelBookingFormExample() {
return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
  <NylasCancelBookingForm
    bookingId="booking_123"
    eventTitle="Meeting with John"
    eventDate="2024-01-15T10:00:00Z"
  />
</div>
);
}

Properties

cancelBookingId?

Name	cancelBookingId
Description	The booking ID to cancel.
Type	string | undefined

rejectBookingId?

Name	rejectBookingId
Description	The booking ID to reject.
Type	string | undefined

selectedTimeslot?

Name	selectedTimeslot
Description	The selected time slot.
Type	{ start_time: Date; end_time: Date; emails?: string[] | undefined; capacity?: number | undefined; event_id?: string | undefined; master_id?: string | undefined; calendar_id?: string | undefined; }

Standalone properties

The following props are automatically configured when used within NylasScheduling. Set these props manually only if you’re using the component independently.

configSettings?

Name	configSettings
Description	The Configuration settings.
Type	undefined | { configuration_id: string; booking?: { additional_fields: Record<string, string>; additional_guests: { email: string; name: string; }[]; booking_ref: string; booking_ref_salt: string; guest: { email: string; name: string; }; timezone: string; email_language: string; event_data: { location: string; when: { start_time: Date; end_time: Date; end_timezone: string; start_timezone: string; object: string; }; }; event_organizer: { name: string; email: string; is_organizer: boolean; }; } | undefined; 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; }

eventInfo?

Name	eventInfo
Description	The event information.
Type	undefined | { booking_id: string; organizer: { email: string; name: string; is_organizer?: boolean | undefined; }; title: string; description: string; status: string; event_id: string; location: string; booking_ref: string; }

isLoading?

Name	isLoading
Description	The loading state.
Type	boolean | undefined

selectedLanguage?

Name	selectedLanguage
Description	The default language.
Type	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

themeConfig?

Name	themeConfig
Description	The theme configuration.
Type	any

Events

Event	Description
cancelBookedEventError	Fired when an error occurs while cancelling the booking.
cancelBookingFormError	Fired when an error occurs in the booking form.
cancelBookingFormSubmitted	Fired when the cancel booking form is submitted.
goBackButtonClicked	Fired when the Go back button is clicked on the cancel booking form.
triggerValidation	This event is for triggering the validation on the text area for cancellation reason. This is for internal purposes only.

CSS 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 text area.
ncbf__title	The title of the cancel booking form.

Code samples

The nylas-cancel-booking-form element is automatically included in the main NylasScheduling component. The following code samples show how to use the element on its own.

StandaloneEvent handlersCustom theme

<nylas-cancel-booking-form
  cancel-booking-id="booking_123"
  event-title="Meeting with John"
  event-date="2024-01-15T10:00:00Z"
  on-cancel-booking-form-submitted="handleCancellation"
  on-go-back-button-clicked="handleGoBack">
</nylas-cancel-booking-form>

// Listen for form submission
element.addEventListener('cancelBookingFormSubmitted', (event) => {
  const { bookingId, action, reason } = event.detail;
  console.log('Cancellation submitted:', { bookingId, action, reason });

  if (action === 'cancel') {
    // Handle cancellation
    cancelBooking(bookingId, reason);
  } else if (action === 'reject') {
    // Handle rejection
    rejectBooking(bookingId, reason);
  }
});

// Listen for go back button
element.addEventListener('goBackButtonClicked', (event) => {
  console.log('Go back button clicked');
  // Navigate back or hide the form
});

// Listen for errors
element.addEventListener('cancelBookingFormError', (event) => {
  console.log('Form error:', event.detail);
  // Display error message to user
});

<nylas-cancel-booking-form
  cancel-booking-id="booking_123"
  event-title="Meeting with John"
  event-date="2024-01-15T10:00:00Z"
  theme-config='{
    "--nylas-primary": "#dc2626",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-cancel-booking-form>