myHeader MFE

The myHeader MFE works as a gateway to Customer Account within the Global Header, enabling the user to see his auth status or enabling login and registration through myDrawer CFE or by simply redirecting the user to CA domain.

myHeader MFE

Links

Resource	Link
GitLab	https://source.tui/osp/customer/account/my-header-mfe
MFE Link (Dev)	https://mwa-nonprod.tui.com/customer/mwa/my-header-mfe-dev/index.html
MFE Link (Test)	https://mwa-nonprod.tui.com/customer/mwa/my-header-mfe-test/index.html
MFE Link (Prod)	https://mwa.tui.com/customer/mwa/my-header-mfe/index.html
Documentation	https://confluence.tuigroup.com/display/ONEPF/2.2+Technical+Approach+-+myHeader

MFE Integration

This myHeader MFE 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 MFE please refer to the technical documentation made available in the URL above.

Prerequisites

One prerequisite to seamlessly implement myHeader MFE 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.

MFE behaviours

This MFE has different UI renderings and different behaviours based on its attributes (LOCALE, MARKET and CONFIG). 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 MFE.

Key	Description
DEFAULT / NO CHOICE	Same as MYH_BASIC_UI_WITH_LINKS
MYH_BASIC_UI_WITH_LINKS	Will render basic UI with anchor links to Customer Account.
MYH_EXTENDED_UI_WITH_LINKS	Will render extended UI with a dropdown containing anchor links to login and create account.
MYH_BASIC_UI_NO_INTERACTION	Will render basic UI with no user interaction.
MYH_BASIC_UI_DRAWER_NAVIGATION	Will render basic UI and will open the drawer with navigation mfe (will show login mfe first if the user isn't logged in).
MYH_BASIC_UI_DRAWER_LOGIN	Will render basic UI and will open the drawer with login mfe.

Screenshots

MFE rendering for config option MYH_EXTENDED_UI_WITH_LINKS (dropdown with links) - user not logged in

MFE rendering for config option MYH_EXTENDED_UI_WITH_LINKS (dropdown with links) - user logged in

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-header-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-my-header
	market="VALUE"
	login-link="VALUE"
	registration-link="VALUE">
</tui-my-header>

Examples

Shows myHeader MFE with a dropdown containing links to in English (en-GB) for UK market (UK_TH).

<tui-my-header
	locale="en-GB"
	theme="tui-light"
	market="UK_TH"
	config="MYH_EXTENDED_UI_WITH_LINKS"
	login-link="/mytui/"
	registration-link="/mytui/register/">
</tui-my-header>

Shows myHeader MFE with button to open the drawer (myDrawer CFE) in English (en-GB) for UK market (UK_TH).

<tui-my-header
	locale="en-GB"
	theme="tui-light"
	market="UK_TH"
	config="MYH_BASIC_UI_DRAWER_LOGIN"
	login-link="/mytui/"
	registration-link="/mytui/register/">
</tui-my-header>

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 MFE 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 MFE 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 mfe behaviour.	`MYH_BASIC_UI_WITH_LINKS`, `MYH_EXTENDED_UI_WITH_LINKS`, `MYH_BASIC_UI_NO_INTERACTION`, `MYH_BASIC_UI_DRAWER_NAVIGATION`, `MYH_BASIC_UI_DRAWER_LOGIN`	`MYH_BASIC_UI_WITH_LINKS`	no
`login-link`	This URL will redirect the user to customer account login (or dashboard) page.			yes
`registration-link`	This URL will redirect the user to customer account registration page.			yes

Events

This microfrontend emits the following events:

Event Schema

Event	Schema
`tui-my-drawer.open` Event dispatched to open the drawer with the requested MFE and attributes inside	`type: object properties: detail: type: object properties: mfeName: type: string mfeAttributes: type: object loginAttributes: type: object`
`openmfe.analytics` Event dispatched by myHeader MFE for analytics purposes	`type: object properties: detail: type: object properties: origin: type: string id: type: string category: type: string name: type: string data: type: object properties: eventLabel: type: string`

tui-my-drawer.open

Event dispatched to open the drawer with the requested MFE and attributes inside

type: object
properties:
  detail:
    type: object
    properties:
      mfeName:
        type: string
      mfeAttributes:
        type: object
      loginAttributes:
        type: object

openmfe.analytics

Event dispatched by myHeader MFE for analytics purposes

type: object
properties:
  detail:
    type: object
    properties:
      origin:
        type: string
      id:
        type: string
      category:
        type: string
      name:
        type: string
      data:
        type: object
        properties:
          eventLabel:
            type: string