confirmation
Component that displays booking confirmation with all necessary data and a countdown to the booked event.
Component that displays booking confirmation with all necessary data and a countdown to the booked event.
Screenshots
Usage
Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.
<script src="https://nonprod.cloud.tui.com/osp/ao/ui/confirmation/current/confirmation.esm.js" defer></script>Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.
<tui-confirmation
api-key="VALUE"
manage-my-booking-url="VALUE"
start-page-url="VALUE">
</tui-confirmation>Examples
This is a MFE used on the confirmation page to show the booking after the customer has made a booking. It also contains links to my page and app store.
<tui-confirmation
market="se"
locale="sv-SE">
</tui-confirmation>
Attributes
This microfrontend accepts the following attributes:
| Name | Description | Values | Default | Required |
|---|---|---|---|---|
api-key | Google maps api key to be used for the map | yes | ||
booking-number | Booking number for fetching data | no | ||
hotel-url | Url to Hotel page of this confirmation | no | ||
locale | Locale to be used within UI | da-DK, de-AT, de-CH, de-DE, en-GB, en-IE, fi-FI, fr-BE, fr-CH, nb-NO, nl-BE, nl-NL, sv-SE | no | |
made-later-payment | Booking number for fetching data | no | ||
manage-my-booking-url | Url to MMB | yes | ||
market | Market to which API calls would be sent | at, be, ch, de, dk, fc, fi, ie, nl, no, se, uk | no | |
source-system | Booking sourceSystem | no | ||
start-page-url | Url to start page | yes | ||
theme | Theme to be used within UI | firstchoice, tui-light | no |
Events
This microfrontend emits the following events:
| Event | Schema |
|---|---|
Emitted when component initialization is finished. | |
Emitted when booking confirmed. | |