nylas-organizer-confirmation-card

The nylas-organizer-confirmation-card element displays the organizer confirmation card.

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

export default function NylasOrganizerConfirmationCardExample() {
const mockEventInfo = {
booking_id: "booking_123",
organizer: {
  email: "[email protected]",
  name: "John Doe"
},
title: "Meeting with Client",
description: "Discuss project requirements",
status: "pending_confirmation",
event_id: "event_456",
location: "Conference Room A",
booking_ref: "ref_789"
};

return (
<div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
  <NylasOrganizerConfirmationCard
    eventInfo={mockEventInfo}
  />
</div>
);
}

Properties

`organizerConfirmationBookingId?`


Name	`organizerConfirmationBookingId`
Description	Booking flow type.
Type	string \| `undefined`

`selectedLanguage?`


Name	`selectedLanguage`
Description	The selected language.
Type	string

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 for the Scheduler.
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; }`

`isLoading?`


Name	`isLoading`
Description	The loading state property. Used to display loading state when fetching availability.
Type	boolean \| `undefined`

`themeConfig?`


Name	`themeConfig`
Description	The theme configuration.
Type	any

Events

Event	Description
`confirmBookingButtonClicked`	Reschedule button clicked event.
`confirmBookingError`	Fired when an error occurs while rescheduling the booking.
`rejectBookingButtonClicked`	Reject booking button clicked event.

Methods

Method	Type returned
`resetAction() => Promise<void>`	`Promise<void>`

CSS parts

Part	Description
`nmcc`	The organizer confirmation card host.
`nmcc__button-outline`	The cancel & reschedule button CTA.
`nmcc__cancel-cta`	The cancel button CTA.
`nmcc__card`	The organizer confirmation card.
`nmcc__description`	The description of the organizer confirmation card.
`nmcc__reschedule-cta`	The reschedule button CTA.
`nmcc__title`	The title of the organizer confirmation card.
`nmccc__card`

Code samples

The nylas-organizer-confirmation-card element is automatically included in the main NylasScheduling component. The following code samples show how to use the element on its own.

<nylas-organizer-confirmation-card
  organizer-confirmation-booking-id="booking_123"
  on-confirm-booking-button-clicked="handleConfirm"
  on-reject-booking-button-clicked="handleReject">
</nylas-organizer-confirmation-card>

// Listen for confirm booking button clicks
element.addEventListener('confirmBookingButtonClicked', (event) => {
  const { bookingId, host } = event.detail;
  console.log('Confirm booking clicked:', bookingId);

  // Handle booking confirmation
  confirmBooking(bookingId);
});

// Listen for reject booking button clicks
element.addEventListener('rejectBookingButtonClicked', (event) => {
  const { bookingId } = event.detail;
  console.log('Reject booking clicked:', bookingId);

  // Handle booking rejection
  rejectBooking(bookingId);
});

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

<nylas-organizer-confirmation-card
  organizer-confirmation-booking-id="booking_123"
  theme-config='{
    "--nylas-primary": "#059669",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
</nylas-organizer-confirmation-card>