Système d'Émission d'Événements du moteur de réservation Plus

Aperçu

Le système d'événements est une fonction de notre moteur de réservation qui permet la communication avec d'autres personnes et programmes externes. Cela permet aux utilisateurs de recevoir des mises à jour ou d'automatiser certaines tâches lors de l'utilisation du moteur de réservation. En ajoutant des instructions spécifiques dans les paramètres, le système s'occupe du reste.

Cet article sert de référence pour les intégrations tierces, vous aidant à connecter et utiliser efficacement le système d'événements.

Comment utiliser le système d'émission d'événements

1. Accédez à la page Paramètres du menu Compte et cliquez sur la section Moteur de réservation
2. Cliquez sur Personnaliser

3. Ajoutez le code ci-dessous dans le champ JavaScript
   Pour utiliser le système d'événements, vous devez ajouter un écouteur d'événements pour l'événement on-booking-engine-ready, qui expose le eventSystem comme suit :

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

4. Cliquez sur Enregistrer
   

5. Le eventSystem implémente l'interface 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;
   }

   Où EventType désigne le type d'événements que nous pouvons déclencher ou écouter, et PayloadOf<EventType> désigne la charge utile envoyée avec l'événement.

Événements déclenchés par le moteur de réservation

1.  currency-change :

Cet événement est déclenché lorsque l'utilisateur modifie la devise du moteur de réservation via le sélecteur de devise dans l'en-tête. La valeur currency dans la charge utile est l'abréviation de la devise sélectionnée, identique à celle qui apparaît dans le paramètre de requête currency de l'URL.

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

2. language-change événement :

Cet événement est déclenché lorsque l'utilisateur change la langue du moteur de réservation via le sélecteur de langue dans l'en-tête. La valeur language dans la charge utile est l'abréviation de la langue sélectionnée, telle qu'elle apparaît dans l'URL.

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

3. reservation-created événement :

Cet événement est déclenché lorsqu'une réservation est créée dans le moteur de réservation.

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

Quand CreatedReservation est :

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

Événements auxquels le moteur de réservation s'abonne

•  custom-payment-option-change 

Cet événement est utilisé par les établissements qui souhaitent proposer une option de paiement personnalisée à leurs clients.

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