nylas-organizer-confirmation-card

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

PreviewCode

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

export default function NylasOrganizerConfirmationCardExample() {
const mockEventInfo = {
booking_id: "booking_123",
organizer: {
  email: "organizer@example.com",
  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.

StandaloneEvent handlersCustom theme

<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>