Automatic Booking Association MFE
This MFE allows the user (logged in or guest) to automatically associate new bookings to his customer account.
Automatic Booking Association MFE
This MFE allows the user (logged in or guest) to automatically associate new bookings to his customer account.
Links
<!-- prettier-ignore-start -->
| Resource | Link |
|---|---|
| GitLab | https://source.tui/osp/customer/account/abba-mfe |
| MFE Link (Dev) | https://mwa-nonprod.tui.com/customer/mwa/ab-booking-association-mfe-test/ca-auto-booking-association-mfe/index.html |
| MFE Link (Test) | https://mwa-nonprod.tui.com/customer/mwa/ab-booking-association-mfe-test/ca-auto-booking-association-mfe/index.html |
| MFE Link (Prod) | https://mwa-nonprod.tui.com/customer/mwa/ab-booking-association-mfe-test/ca-auto-booking-association-mfe/index.html |
| Documentation | https://confluence.tuigroup.com/pages/viewpage.action?spaceKey=ONEPF&title=Orchestration+-+CFE |
| <!-- prettier-ignore-end --> |
MFE Integration
This MFE will work shoulder to shoulder with Automatic Booking Association CFE and it's not meant to be implemented as a standalone solution. Please refer to CFE documentation as well.
Example html code:
<tui-auto-booking-association-mfe
id="tui-auto-booking-association-mfe"
locale="en-GB"
data-theme="tui-light"
market="UK_TH"
first-name="John"
lead-passenger-email="test@test.com"
last-name="Doe"
gender="MALE"
booking-system-code="ATCOMRES"
booking-id="12341234"
brand="TUI_GB"
product-type="FLY_AND_STAY"
post-association-redirect-link="/"
source-market="GB"
source-market-region="NR"
departure-date="2021-08-01"
is-b2b="false"
>
<div
style="
width: 100%;
height: 600px;
border: 1px dotted #aaa;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
"
>
LOADING …
</div>
</tui-auto-booking-association-mfe>
...
<script async type="module" src="https://mwa-nonprod.tui.com/customer/mwa/ab-booking-association-mfe-test/main.js"></script>
Prerequisites
One prerequisite to seamlessly implement this MFE (Automatic Booking Association CFE) and is to enable Global Header with Authentication Layer in the host page. Also, please reach out to CA teams so we can have your settings and domains all sorted and whitelisted. Contact details are available in the documentation.
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://mwa-nonprod.tui.com/customer/mwa/ab-booking-association-mfe-test/main.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-auto-booking-association-mfe
data-theme="VALUE"
locale="VALUE"
market="VALUE"
booking-system-code="VALUE"
brand="VALUE"
booking-id="VALUE"
product-type="VALUE"
lead-passenger-email="VALUE"
departure-date="VALUE"
source-market="VALUE"
source-market-region="VALUE"
first-name="VALUE"
last-name="VALUE"
gender="VALUE"
post-association-redirect-link="VALUE">
</tui-auto-booking-association-mfe>Examples
Shows the ABBA MFE in English
<tui-auto-booking-association-mfe
data-theme="tui-light"
locale="en-GB"
market="UK_TH"
source-market="GB"
source-market-region="NR"
booking-system-code="ATCOMRES"
brand="TUI_GB"
booking-id="1234567890"
product-type="ACCOMMODATION_ONLY"
lead-passenger-email="email@test.com"
first-name="John"
last-name="Doe"
gender="MALE"
departure-date="2024-12-31"
post-association-redirect-link="/myTUI/">
</tui-auto-booking-association-mfe>
Attributes
This microfrontend accepts the following attributes:
| Name | Description | Values | Default | Required |
|---|---|---|---|---|
data-theme | This is the theme attribute that will be used to add the brand styles | tui, tui-light, firstchoice | yes | |
locale | This is the attribute that will be used to render the MFE in a specific language | nl-NL, nl-BE, fr-FR, sv-SE, nn-NO, da-DK, fi-FI, it-IT, de-DE, pl-PL, es-ES, pt-PT, pt-BR, en-GB | yes | |
is-b2b | This is the attribute that will be used to set the MFE in B2B mode, its using in case if auth integration layer url is not provided on the page | no | ||
market | This is the TUI market where the MFE will be consumed | UK, UK_TH, UK_FC, UK_FJ, NL, BE, BE_FO, FR_FO, MA_FO, SE, NO, DK, FI, DE, MM | yes | |
booking-system-code | This is the booking system to be used in association | ATCOMRES, ATCOMRESR1, BIBE, CTS, JUMP, MDCAMPER, MDCAMPRJ, MDCAR, MDCARPRJ, MDINSPRJ, MDINSURE, MUSEMENT, NSKTF, TOR, TRIPS, TRS, UNKNOWN, VSN, WHEELS | yes | |
brand | This is the brand to be used in association | TUI_NL, TUI_BE, VIP_BE, TUIFLY_BE, TUIFLY_MA, TUIFLY_FR, TUIFLY_NL, TUI_GB, FIRSTCHOICE_GB, FIRSTCHOICE_NL, FIRSTCHOICE_BE, TUI_IE, TUI_SE, TUI_DK, TUI_NO, TUI_FI, TUI_DE, TUI_CH, TUI_AT, TUI_PL, CRYSTAL_GB, CRYSTAL_IE, TUI_XX, ROBINSON_DE, ROBINSON_GB, ROBINSON_XX, MAGICLIFE_DE, MAGICLIFE_GB, TUIBLUE_DE, TUIBLUE_GB, TUIBLUE_XX | yes | |
booking-id | This is the booking ID | yes | ||
product-type | This is the product type to be used in association | ACCOMMODATION_ONLY, CARHIRE, CRUISE, EXCURSION, FLIGHT_ONLY, FLY_AND_STAY, INSURANCE, MULTICENTRE, OTHER, SKI, TOURS | yes | |
lead-passenger-email | This is the email of the lead passenger | yes | ||
departure-date | This is the booking's departure date | yes | ||
source-market | This is the TUI market where the booking was made | DE, PL, AT, CH, GB, IE, SE, DK, FI, NO, BE, NL, FR, MA, XX | yes | |
source-market-region | This is the region ID where the booking was made | CR, NR, WR, M3, MM | yes | |
first-name | This is the attribute for lead passenger first name | yes | ||
last-name | This is the attribute for lead passenger last name | yes | ||
gender | This is the attribute for lead passenger gender | FEMALE, MALE, UNKNOWN | yes | |
post-association-redirect-link | This is the url that user will be redirected to upon clicking on 'Go to myTUI account' button | yes |
Events
This microfrontend emits the following events:
| Event | Schema |
|---|---|
event dispatch added booking for Booking List MFE | |
event dispatch if booking successfully added | |
event dispatched if booking is associated / ingested by an existing not logged in user | |