Booking Engine Plus Event Emitter System

Overview

The Event System is a feature of our Booking Engine that enables communication with other people and external programs. This allows users to receive updates or automate certain tasks when using the Booking Engine. By adding specific instructions in the settings, the system will handle the rest. 

This article serves as a reference for third-party integrations, helping you connect and use the Event System effectively.

How to use the Event Emitter System

1. Go to the Settings page of your Account Menu and click on the Booking Engine section
2. Click on Customize

3. Add the code below to the JavaScript field
   To use the Event System, you need to add an event listener for the on-booking-engine-ready event, which exposes the eventSystem as follows:

   <script>
    window.addEventListener('on-booking-engine-ready', (e) => {
      const { eventSystem } = e.detail;
    });
   </script>

4. Click Save
   

5. The eventSystem implements the IExternalEventSystem interface:

   interface IExternalEventSystem {
    addEventListener: (
      event: EventType,
      listener: (payload: PayloadOf<EventType>) => void
    ) => void;
    dispatchEvent: (event: EventType, payload: PayloadOf<EventType>) => void;
    removeEventListener: (
      event: EventType,
      listener: (payload: PayloadOf<EventType>) => void
    ) => void;
   }

   Where EventType refers to the type of events that we can trigger or listen to, and PayloadOf<EventType> refers to the payload that is sent with the event.

Events dispatched by the Booking Engine

1.  currency-change event:

This event is triggered when the user changed the currency of the Booking Engine from the currency selector in the header. The currency value in the payload is the abbreviation of the selected currency, same as it appears in the currency query parameter of the URL.

export type CurrencyChangeEvent = {
 event: 'currency-change';
 payload: { currency: Currency };
};

2. language-change event:

This event is triggered when the user changed the language of the Booking Engine from the language selector in the header. The language value in the payload is the abbreviation of the selected language, same as it appears in the URL.

type LanguageChangeEvent = {
 event: 'language-change';
 payload: { language: Language };
};

3. reservation-created event:

This event is triggered when a reservation was created in the Booking Engine.

type ReservationCreatedEvent = {
  event: 'reservation-created';
  payload: CreatedReservation;
};

When CreatedReservation is:

interface CreatedReservation {
 booking_id?: `${number}`;
 booking_total?: number;
 checkin_date?: string;
 checkout_date?: string;
 city?: string;
 currency_code?: string;
 hotel_name?: string;
 real_booking_total?: number;
 resRooms?: {
   adults: `${number}`;
   id: `${number}`;
   kids: `${number}`;
   package: `${number}`;
   package_name: string | null;
   rate_id: `${number}`;
   room_total: `${number}`;
   room_type_id: `${number}`;
   room_type_name: string;
   room_type_photos: ({
     TYPE?: string;
     alt: string;
     cropParam: string | null;
     croppedImage: string;
     fullPath: string;
     galleryPath?: string | null;
     id: string;
     imageHeight: string;
     imageWidth: string;
     mime?: string;
     originalName: string;
     ownerId?: string;
     ownerType?: string;
     parentId: string;
     path: string;
     section?: string;
     size?: string;
     thumbPath: string;
     uploadedAt?: string;
     utype?: string;
   } & {
     featured: number;
     featuredPath: string | null;
   })[];
 }[];
 rooms?: Record<string, {
   adults: number;
   amount: number;
   bookedId: string[];
   kids: number;
   name: string;
   packageId?: string;
   packageName?: string;
   picture?: string;
   price?: number;
   rateId: string;
   roomId: string;
   unit?: string;
 }>;
 state?: string;
 total_tax?: number;
 widget_property?: number;
};

Events that the Booking Engine subscribes to

•  custom-payment-option-change 

This event is used for properties that want to use a Custom Payment Option to offer to their customers. 

type CustomPaymentOptionChangeEvent = {
 event: 'custom-payment-option-change';
 payload: {
   id: string;
   instructions?: string;
   name: string;
 };
};