Welcome
The main purpose of myDrawer CFE is to enable users to easily access CA functionalities like login, registration, and forgot password through a sliding drawer, without needing to leave the page and without disrupting any ongoing flow or funnel (e.g., search, booking, payment).
This CFE is highly interactive and it operates through events. You can open (and close) the drawer programmatically by specifying the name of the MFE you want to load and any necessary attributes for its workings. You should expect a response event every time a request is successfully fulfilled and the drawer is shown. For more information be sure to refer to the documentation made available in Confluence.
Additionally, the following UI is NOT part of the CFE and only serves playground purposes.
Login MFE #1
Opens login mfe with NO deep links
This event will request the drawer to show the login MFE, however if the user is already logged in it will show a "You are already logged in" message.
const eventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "login",
},
};
const event = new CustomEvent(eventPayload.eventName, {
detail: eventPayload.eventDetails,
});
window.dispatchEvent(event);
{
"mfeName": "login",
}
This payload will open the default configuration for the login MFE. Since no deep links are set, the user will not have access to the registration and forgot password links within login MFE.
Login MFE #2
Opens login MFE with deep links
This event will request the drawer to show the login MFE with deep links for registration and forgot password MFEs.
If your myDrawer implementation uses config option "MYD_AUTH_NO_REGISTRATION" the "Create your account" deep link (registration) will be automatically removed by the CFE.
const eventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "login",
"mfeAttributes": {
"registration-link": "/",
"forgot-password-link": "/",
},
},
};
const alternativeEventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "login",
"loginAttributes": {
"registration-link": "/",
"forgot-password-link": "/",
},
},
};
const otherAlternativeEventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "login",
"mfeAttributes": {
"registration-link": "/",
},
"loginAttributes": {
"forgot-password-link": "/",
},
},
};
const event = new CustomEvent(eventPayload.eventName, {
detail: eventPayload.eventDetails,
});
window.dispatchEvent(event);
{
"mfeName": "login",
"mfeAttributes": {
"registration-link": "/",
"forgot-password-link": "/",
}
}
You should set the MFE attributes under "mfeAttributes" and/or "loginAttributes" (optional). Any values you assign to the "registration-link" and "forgot-password-link" attributes will be automatically overwritten by the CFE using the values set directly in the web component (see playground settings). This means that you don't need to set specific values for these attributes, but you must include the key/value pair reference in the object. We recommend using a forward slash "/" as shown in the code snippet above. However, if these attributes aren't set at the web component level, the values you define in the event payload will be used.
If you choose to set both "mfeAttributes" and "loginAttributes" they will be merged by the CFE.
Navigation MFE #1
Opens the navigation MFE (or possibly the login MFE instead)
This event will request the drawer to show the navigation MFE. If the user is not logged in, the CFE will first show the login MFE. Once the user successfully logs in, the drawer content will be replaced with the requested MFE. This is the standard CFE behavior for all MFEs that require authentication.
If your myDrawer implementation uses config option "MYD_AUTH_ONLY" or "MYD_AUTH_NO_REGISTRATION" the request to show the navigation MFE may not be successful as CFE will block it from view.
const eventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "navigation",
"mfeAttributes": {
"some-attribute": "true",
},
"loginAttributes": {
"registration-link": "/",
"forgot-password-link": "/",
},
},
};
const event = new CustomEvent(eventPayload.eventName, {
detail: eventPayload.eventDetails,
});
window.dispatchEvent(event);
{
"mfeName": "navigation",
"mfeAttributes": {
"some-attribute": "true",
},
"loginAttributes": {
"registration-link": "/",
"forgot-password-link": "/",
},
}
In cases where the requested MFE requires authentication, you'll need to specify both "mfeAttributes" and "loginAttributes".
The "mfeName" should always be the target MFE (the one you want to request). Use "mfeAttributes" to set specific attributes for your target MFE (navigation or other). You should also set "loginAttributes" in the event payload. If you don't, the CFE will use the default login MFE setup (no attributes = no deep links).
As explained in the examples above, any values you set for the "registration-link" and "forgot-password-link" attributes will be automatically overwritten by the CFE using the values set in the web component directly (see playground settings). This means that you don't need to set specific values for these attributes, but you must include the key/value pair in the object. We suggest using a forward slash "/" as shown in the code snippet above. However, if these attributes aren't set at the web component level, the values you define in the event payload will be used.
This payload example is also valid for requesting other MFEs besides the navigation MFE.
Navigation MFE #2
Opens the navigation MFE (or login MFE instead with NO deep links)
This event will request the drawer to show the navigation MFE. If the user is not logged in, the CFE will first show the login MFE. Once the user successfully logs in, the drawer content will be replaced with the requested MFE.
In this example we're only exploring a different setup for the eventPayload object not to include any deep links. You should refer to the example above for a more comprehensive and detailed explanation on how to request the navigation MFE properly.
const eventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "navigation",
"mfeAttributes": {
"some-attribute": "true",
},
},
};
const event = new CustomEvent(eventPayload.eventName, {
detail: eventPayload.eventDetails,
});
window.dispatchEvent(event);
{
"mfeName": "navigation",
"mfeAttributes": {
"some-attribute": "true",
},
}
Because the navigation MFE requires authentication, you should also set "loginAttributes" in the event payload. However, this code snippet demonstrates the opposite scenario, where the CFE will use the default login MFE setup (no attributes = no deep links).
Since there are no deep link attributes set, the CFE will not overwrite the values, differing from the standard behavior described in the previous examples.
Registration MFE
Opens the registration MFE directly
This event will request the drawer to show the registration MFE. If your myDrawer implementation uses config option "MYD_AUTH_NO_REGISTRATION" (see playground settings) the request to show registration MFE may not be successful as CFE will block it from view.
const eventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "registration",
"mfeAttributes": {
"show-title-field": "true",
"privacy-notice-link": "/",
"terms-and-conditions-link": "/",
"help-desk-link": "/",
},
},
};
const event = new CustomEvent(eventPayload.eventName, {
detail: eventPayload.eventDetails,
});
window.dispatchEvent(event);
{
"mfeName": "registration",
"mfeAttributes": {
"show-title-field": "true",
"privacy-notice-link": "/",
"terms-and-conditions-link": "/blah",
"help-desk-link": "/",
},
}
As in the examples above, you should set "mfeAttributes" in the event payload. Any values you set for these attributes (privacy notice, terms and conditions and help desk links) will be automatically overwritten by the CFE using the values set directly in the web component (see playground settings). This means that you don't need to set specific values for them, but you must include the key/value pair in the object. We suggest using a forward slash "/" as shown in the code snippet above. However, if these attributes aren't set at the web component level, the values you define in the event payload will be used.
Keep in mind that the title and terms and conditions fields are only available/visible for certain markets. Therefore, even if you set them here, they may be hidden from view when the MFE is shown.
Forgot password MFE
Opens the forgot password MFE directly
This event will request the drawer to show the forgot password MFE.
const eventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "forgot-password",
},
};
const alternativeEventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "forgot-password",
"mfeAttributes": {
"login-link": "/",
},
},
};
const event = new CustomEvent(eventPayload.eventName, {
detail: eventPayload.eventDetails,
});
window.dispatchEvent(event);
{
"mfeName": "forgot-password",
}
No need to set any mfeAttributes for this one, unless you want to show a back link to login MFE.
XYZ MFE
Opens a non-existing MFE
This event will request the drawer to show a non-existing MFE.
const eventPayload = {
eventName: "tui-my-drawer.open",
eventDetails: {
"mfeName": "some-xyz-mfe",
},
};
const event = new CustomEvent(eventPayload.eventName, {
detail: eventPayload.eventDetails,
});
window.dispatchEvent(event);
{
"mfeName": "some-xyz-mfe",
}
You should only request or embed supported MFEs that are included in the drawer's mfeRegistry object. Please refer to the CFE documentation for details. An error message will appear in your browser's console.