Sistema emisor de eventos de Booking Engine Plus

Introducción

El Sistema de eventos permite que el Motor de reservas se comunique con scripts personalizados y programas externos mediante el envío de eventos compatibles con datos de carga útil. Úsalo para recibir actualizaciones del Motor de reservas y activar acciones personalizadas desde el código JavaScript que agregues en la configuración del Motor de reservas.

En este artículo te explicamos cómo inicializar el eventSystem, consultar los eventos compatibles y usar los datos de carga útil disponibles para esos eventos.

Índice

• Cómo usar el Sistema emisor de eventos
• Eventos que envía el Motor de reservas
• Eventos a los que se suscribe el Motor de reservas

Cómo usar el Sistema emisor de eventos

1. Ve a la página Configuración de tu menú Cuenta y haz clic en la sección Motor de reservas
2. Haz clic en Personalizar

3. Agrega el siguiente código en el campo JavaScript
   Para usar el Sistema de eventos, debes agregar un detector de eventos (event listener) para el evento on-booking-engine-ready, que expone el eventSystem de la siguiente manera:

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

4. Haz clic en Guardar

   

5. El eventSystem implementa la interfaz IExternalEventSystem:

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

   Donde EventType se refiere al tipo de eventos que se pueden activar o escuchar, y PayloadOf<EventType> se refiere a la carga útil que se envía con el evento.

Eventos que envía el Motor de reservas

1.  Evento currency-change:

Este evento se activa cuando el usuario cambia la moneda del Motor de reservas desde el selector de moneda del encabezado. El valor currency de la carga útil (payload) es la abreviatura de la moneda seleccionada, tal como aparece en el parámetro de consulta currency de la URL.

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

2. Evento language-change:

Este evento se activa cuando el usuario cambia el idioma del Motor de reservas desde el selector de idioma del encabezado. El valor language de la carga útil es la abreviatura del idioma seleccionado, tal como aparece en la URL.

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

3. Evento reservation-created:

Este evento se activa cuando se crea una reserva en el Motor de reservas.

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

Donde CreatedReservation es:

interface CreatedReservation {
  booking_id?: `${number}`;
  booking_total?: number;
  checkin_date?: string;
  checkout_date?: string;
  city?: string;
  currency_code?: string;
  custom_payment_method?: string;
  hotel_name?: string;
  nights?: number;
  payment_method?: PAYMENT_METHOD;
  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;
}

Eventos a los que se suscribe el Motor de reservas

•  custom-payment-option-change 

Este evento lo usan las propiedades que quieren ofrecer a sus clientes una Opción de pago personalizada. 

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

Siguiente paso operativo

Ahora que sabes cómo configurar y consultar el Sistema de eventos, continúa con Soporte para pasarelas de pago personalizadas y tarjetas de regalo en el motor de reservas Plus para ver un ejemplo práctico con opciones de pago personalizadas.