myDrawer CFE
myDrawer CFE enables the users to easily access CA functionalities like login, registration, and forgot password through a layover sliding drawer, without needing to leave the page and ultimately without disrupting any potential flow/funnel that they’re in (search, booking, payment, etc.).
myDrawer CFE
The main purpose of myDrawer CFE is to enable the users to easily access CA functionalities like login, registration, and forgot password through a layover sliding drawer, without needing to leave the page and ultimately without disrupting any potential flow/funnel that they’re in (search, booking, payment, etc.).
Links
| Resource | Link |
|---|---|
| GitLab | https://source.tui/osp/customer/account/my-drawer-cfe |
| CFE Link (Dev) | https://mwa-nonprod.tui.com/customer/mwa/my-drawer-cfe-dev/index.html |
| CFE Link (Test) | https://mwa-nonprod.tui.com/customer/mwa/my-drawer-cfe-test/index.html |
| CFE Link (Prod) | https://mwa.tui.com/customer/mwa/my-drawer-cfe/index.html |
| Documentation | https://confluence.tuigroup.com/display/ONEPF/1.2+Technical+Approach+-+Drawer+concept |
CFE Integration
This myDrawer CFE is part of Global Header and it's not meant to be implemented as a standalone solution. You can, however, technically do it but please make sure you reach to CA first.
For further information on how to integrate this CFE please refer to the technical documentation made available in the URL above.
Prerequisites
One prerequisite to seamlessly implement myDrawer CFE and is to have the Global Header with auth integration layer in the host page. Also, please reach out to CA so we can whitelist your domains. Contact details are available in the documentation.
CFE behaviours
This CFE will behave differently based on the config attribute set. Global Header implementation already provides default values but if you need to customise them to your needs you can easily replace them using a method of your choice.
The CONFIG attribute takes a string that must match an internal config object (mfeConfig). This object holds the logic/behaviour based on the business requierements for this CFE.
| Key | Description |
|---|---|
| DEFAULT / NO CHOICE | Same as MYD_AUTH_AND_NAV |
| MYD_AUTH_AND_NAV | will be able to display the following: login, forgot password, registration and navigation MFEs. |
| MYD_AUTH_ONLY | will be able to display the following: login, forgot password and registration MFEs. |
| MYD_AUTH_NO_REGISTRATION | will be able to display login and forgot password MFEs and will force remove any deeplinks for registration. |
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/my-drawer-cfe-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-my-drawer
market="VALUE"
login-link="VALUE"
registration-link="VALUE"
forgot-password-link="VALUE"
privacy-notice-link="VALUE"
terms-and-conditions-link="VALUE"
help-desk-link="VALUE">
</tui-my-drawer>Examples
Shows myDrawer CFE in English (en-GB) for UK market (UK_TH). Will be able to display login, forgot password, registration and navigation MFEs. Will not preload any of the MFEs.
<tui-my-drawer
locale="en-GB"
theme="tui-light"
market="UK_TH"
preload="false"
config="MYD_AUTH_AND_NAV"
login-link="/login-link"
registration-link="/registration-link"
forgot-password-link="/forgot-password-link"
privacy-notice-link="/privacy-notice-link"
terms-and-conditions-link="/terms-and-conditions-link"
help-desk-link="/help-desk-link">
</tui-my-drawer>
Attributes
This microfrontend accepts the following attributes:
| Name | Description | Values | Default | Required |
|---|---|---|---|---|
theme | This is the theme that will be used to attach styles. The default value is "tui-light". | tui, tui-light, firstchoice | tui-light | no |
locale | This is the locale that will be used to render the CFE content. | nl-NL, nl-BE, fr-FR, fr-MA, sv-SE, nn-NO, nb-NO, fi-FI, da-DK, en-GB | en-GB | no |
market | This is the market ID where the CFE will be embedded (e.g. UK_TH, UK_FC, UK_FJ, etc.). | UK_TH, UK_FC, UK_FJ, NL, BE, BE_FO, FR_FO, MA_FO, SE, NO, DK, FI, MM, TT, DE, DT_AT, CH, CH_AT, AT, NL_FC, BE_FC | yes | |
config | This is the key for mfeConfig obejct that will be used to control the CFE behaviour. | MYD_AUTH_AND_NAV, MYD_AUTH_ONLY, MYD_AUTH_NO_REGISTRATION | MYD_AUTH_AND_NAV | no |
preload | This option will be used to preload login and navigation MFEs on page load. | false | no | |
login-link | This URL will be used by auth MFEs (login, registration and forgot password). | yes | ||
registration-link | This URL will be used by auth MFEs (login, registration and forgot password). | yes | ||
forgot-password-link | This URL will be used by auth MFEs (login, registration and forgot password). | yes | ||
privacy-notice-link | This URL will be used within the registration MFE and it will redirect the user to the privacy notice page. | yes | ||
terms-and-conditions-link | This URL will be used within the registration MFE and it will redirect the user to the terms and conditions page. | yes | ||
help-desk-link | This URL will be used within the registration MFE and it will redirect the user to the help desk (FAQ) page. | yes |
Events
This microfrontend emits the following events:
| Event | Schema |
|---|---|
Event dispatched by myDrawer CFE as a response to tui-my-drawer.open event request. | |
Event dispatched by myDrawer CFE for analytics purposes | |