Sistema de Emissão de Eventos do Motor de Reservas Plus

Visão Geral

O Sistema de Eventos é um recurso do nosso Motor de Reservas que permite a comunicação com outras pessoas e programas externos. Isso permite que os usuários recebam atualizações ou automatizem certas tarefas ao usar o Motor de Reservas. Ao adicionar instruções específicas nas configurações, o sistema cuidará do resto.

Este artigo serve como uma referência para integrações externas, ajudando você a conectar e usar o Sistema de Eventos de forma eficaz.

Como usar o Sistema de Emissão de Eventos

1. Vá para a página de Configuraçõesem seu Menu de Contae clique na seção do Motor de Reservas;
2. Clique em Personalização;

3. Adicione o código abaixo ao campo de JavaScript:
   Para usar o Sistema de Eventos, você precisa adicionar um ouvinte de eventos para o evento on-booking-engine-ready, que expõe o eventSystem da seguinte forma:

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

4. Clique em Salvar;
   

5. O eventSystemimplementa a interfaceIExternalEventSystem :

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

   Onde EventTyperefere-se ao tipo de eventos que podemos acionar ou ouvir, e PayloadOf<EventType>refere-se ao conteúdo que é enviado com o evento.

Eventos enviados pelo Motor de Reservas

1. Evento currency-change:

Este evento é acionado quando o usuário altera a moeda do Motor de Reservas a partir do seletor de moeda no cabeçalho. O valor de currency no payload é a abreviação da moeda selecionada, assim como aparece no parâmetro de consulta currency da URL.

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

2. Evento language-change:

Este evento é acionado quando o usuário altera o idioma do Motor de Reservas a partir do seletor de idioma no cabeçalho. O valor language  no payload é a abreviação do idioma selecionado, assim como aparece na URL.

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

3. Evento reservation-created :

Este evento é acionado quando uma reserva é criada no Motor de Reservas.

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

Quando CreatedReservation é:

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 aos quais o Motor de Reservas se inscreve

•  custom-payment-option-change

Este evento é utilizado para propriedades que desejam usar uma Opção de Pagamento Personalizada para oferecer aos seus clientes. 

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