Sistema de emisión de eventos del motor de reservas Plus

Información general

El sistema de eventos es una función de nuestro motor de reservas que facilita la comunicación con personas y programas externos. Permite a usuarios recibir actualizaciones o automatizar tareas en el motor de reservas. Luego de agregar instrucciones específicas, el sistema se encarga del resto. 

Este artículo sirve como referencia para crear integraciones externas y ayudarte a conectar y usar el sistema de evento de manera efectiva.

Cómo usar el sistema de emisión de eventos

1. Haz clic en Configuraciónen el menú de tu Cuentay selecciona Motor de reservas
2. Haz clic en Personalizar

3. Agrega este código en el campo JavaScript
   Para usar el sistema de eventos, tienes que agregar un event listener a on-booking-engine-ready, que expone eventSystem de esta manera:

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

4. Guarda los cambios
   

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 enviados por el motor de reservas

1.  currency-change

Este evento se activa cuando el usuario cambia la moneda en el motor de reservas desde el desplegable de divisas en el encabezado. El valor currency en payload es la abreviatura de la moneda seleccionada, la misma que se ve en el parámetro de consulta currency de la URL.

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

2. language-change

Este evento se activa cuando el usuario cambia el idioma del motor de reservas desde el desplegable de idiomas en el encabezado. El valor language en la carga útil es la abreviatura del idioma seleccionado, la misma que se ve en la URL.

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

3. reservation-created

Este evento se activa al crear una reserva en el motor de reservas.

type ReservationCreatedEvent = {
  event: 'reserva-creada';
  payload: CreatedReservation;
};

Cuando CreatedReservation es:

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

Eventos a los que se suscribe el motor de reservas

•  custom-payment-option-change 

Este evento se usa en propiedades que quieren ofrecer una opción de pago personalizada a sus huéspedes. 

type CustomPaymentOptionChangeEvent = {
 event: 'cambio-opción-pago-personalizada';
 payload: {
   id: string;
   instructions?: string;
   name: string;
 };
};