# nylas-cancel-booking-form

Source: https://developer.nylas.com/docs/reference/ui/cancel-booking-form/

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.

## Overview

- **Tag**: `<nylas-cancel-booking-form>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-cancel-booking-form></nylas-cancel-booking-form>
```

### React

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

export default function Example() {
  return <NylasCancelBookingForm />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `cancelBookingId` | `cancel-booking-id` | string \| undefined | - | No | The booking ID to cancel. |
| `configSettings` | `config-settings` | any | - | No | The config settings. |
| `eventInfo` | `event-info` | 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; } | - | No | The event info. |
| `isLoading` | `is-loading` | boolean \| undefined | - | No | The loading state. |
| `rejectBookingId` | `reject-booking-id` | string \| undefined | - | No | The booking ID to reject. |
| `selectedLanguage` | `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 | - | No | The default language. |
| `selectedTimeslot` | `selected-timeslot` | { start_time: Date; end_time: Date; emails?: string[] \| undefined; capacity?: number \| undefined; event_id?: string \| undefined; master_id?: string \| undefined; calendar_id?: string \| undefined; } | - | Yes | The selected timeslot. |
| `themeConfig` | `theme-config` | any | - | No | The theme configuration. |

## Events

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

## CSS 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. |

## Dependencies

This component uses the following child components:

- [`<calendar-cancel-icon>`](/docs/reference/ui/calendar-cancel-icon/)
- [`<textarea-component>`](/docs/reference/ui/textarea-component/)
- [`<button-component>`](/docs/reference/ui/button-component/)

## Used by

This component is used inside:

- [`<nylas-scheduling>`](/docs/reference/ui/scheduling/)