Events To Configure & Manage

Component loaded

Listen to know when <enterprise-nav-header> component is loaded: enterpriseNavHeaderLoaded.
Listen to know when <enterprise-nav-menu> component is loaded: enterpriseNavMenuLoaded.
Listen to know when the menu items in <enterprise-nav-menu> component are loaded: enterpriseNavMenuItemsLoaded.
Listen to know when all the items in digitalData have been written into the data layer: dataLayerReady
- This event replaces the old qualtricsDataLoaded. Please replace the old event name with the new one, as it will eventually stop being triggered.

Once that both components are loaded, initialization function could be called on <enterprise-nav-header> component.

Initializating

A public method is available on <enterprise-nav-header> to initialize Enterprise Navigation Component.

enterpriseNavHeader.initialize(uri, menuConf, eventsConf, optional);

uri: Domain where we are working on (Mandatory)

ie: <https://admin-controlcenter-itv1.centurylink.com>, <https://controlcenter-test1.lumen.com>, etc...

menuConf: Configuration object for menu (Mandatory):

site => Site name (from your data file) that it will be selected in the switcher (Mandatory)
```
              ie. 'Control Center', 'UCommand'...
```
origin => Origin key in origin objec for your site (ex. CC, ML3) (Mandatory)

option => Menu option id selected on the initialization. (Not mandatory)

              This id could be find into entitledMenus endpoint.
              By default, the selection will be done looking for local-href value into the location.href.
              Not mandatory.

url => URL or path where your data file is located (Not mandatory)

              By default `/Application/v1/Portal/navigation/entitledMenus` value will be used.

requestInit => request init object needed to make the call against url parameter (Not mandatory)

ccmenu => Menu content gotten from Control Center endpoint or po-auth profile (Not mandatory)

              If this value is added, `url` value will be ignored for getting the menu content.

menu => Menu options that you need to add dynamically to the menu component (Not mandatory)

eventsConf: Configuration object for events behaviour. Format { <<event>>: <<configuration-behaviour>> } (Mandatory)
- Values for <<event>>:
  - "logo" => "same-tab" by default. This event will not work for Partner users.
  - "notification" => "new-tab" by default.
  - "notification-settings" => "new-tab" by default.
  - "user-settings" => "same-tab" by default.
  - "impersonation-logout" => "same-tab" by default.
  - "my-profile" => "same-tab" by default.
  - "logout" => "same-tab" by default.
  - "manage-my-enterprises" => "same-tab" by default.
  - "sign-in" => "emit-event" by default.
- Values for <<configuration-behaviour>>:
  - "emit-event": An event will be fired in order to be manage by the parent.
  - "same-tab": A page will be open in the same tab.
  - "new-tab": A page will be open in a new tab.

optional: Configuration object for optional properties. Format { <<property>>: <<value>> }.

env => environment selected. Value can be 'local', 'stage', 'prod'. 'prod' is default value (Not mandatory)
- Menu behaviour:
  - 'prod': menuConf.menu property content will maintain the sidenav styles.
  - 'local' or 'stage': menuConf.menu property content will be shown in red color.
- Logout behaviour:
  - 'prod' value => 'https://business-signin.lumen.com' will be used.
  - 'stage' or 'local' values => 'https://business-auth-test.lumen.com'.
user?: User; => Optional. The user logged in
apiUri?: string; => Optional. The API that will be used to load the user in case it's empty
sessionToken?: string; => Optional. A session token
cookieDomain => Optional. Components that need to store cookies will use this value as the domain
enterprises?: Enterprise[]; => Optional. The enterprises available for the user

customize => object to customize each component (Not mandatory)

One entry for component ('logo', 'notification', 'enterprises', 'switcher', 'user', 'infobar', 'infofooter', or 'search' ), ie:

{
   logo: {
     hide: false | true,
     path: "/customized-logo-path",
     uri: "https://www.lumen.com",
     html: "<svg>...</svg>", | image: "https://lib.lumen.com/images/lumen-logo-black.svg",
     css: "css-classes",
     alt: "customized-alt",
   },
   notification: {
     hide: false | true,
     path: "/customized-notification-path",
   },
   enterprises: {
     hide: false | true,
     list: {
       hide: false | true,
       path: "/customized-enterprises-update-path",
     },
     manage: {
       hide: false | true,
       path: "/customized-enterprises-manage-path",
     },
   },
   switcher: {
     hide: false | true,
   },
   user: {
     hide: false | true,
     profile: {
       hide: false | true,
       path: "/customized-user-profile-path",
     },
     logout: {
       hide: false | true,
       path: "/customized-user-logout-path",
     },
     notificationSettings: {
        hide: false | true,
        path: "/customized-user-notification-settings-path",
      },
     userSettings: {
        hide: false | true,
        path: "/customized-user-settings-path",
        uri: "https://custom-uri-path-not-control-center", (optional field)
        icon: "icon-from-chi-icon-list", (optional field)
        name: "User Settings Custom Name", (optional field)
      },
     signin: {
        path: "/login",
      },
   },
   infobar: {
     hide: false | true,
     theme: "brightspeed",
     content: [
      {
        position: 1,
        hide: false | true,
        text: "text in the button (by default 'explore')",
        path: "/customized-explore-path", (can use "defaultExplore" to use the default URL)
      },
      {
        position: 2,
        hide: false | true,
        text: "text in the button (by default 'help')",
        path: "/customized-help-path", (can use "defaultHelp" to use the default URL)
      },
      {
        position: 3,
        hide: false | true,
        text: "text in the button (by default 'contact')",
        path: "/customized-contact-path", (can use "defaultContact" to use the default URL)
        dropdownContent: [
          {"title":"Displayed Dropdown Words","url":"https://www.fullurlhere", newTab: false | true (optional, defaults to false)},
        ]
      },
      {
        color: "#0075c9"(Not Mandatory)
      },
    ]
   },
   infofooter: {
     hide: false | true,
     theme: "brightspeed" | "lumen",
     help: {
       hide: false | true,
       path: "/customized-help-path",
     },
     contact: {
       hide: false | true,
       path: "/customized-contact-path",
     },
   },
   menu: {
     horizontal: false | true,
     uppercase: false | true,
   },
   header: {
     size: "-xl" | "-lg",
   },
   search: {
     hide: false | true,
     query_separator: "/customized-query-separator",
     custom_search_url: "https://www.lumen.com/en-us",
   },
   smartSearch: {
     hide: false | true,
     apiUrl: "https://www.lumen.com/enterprise/smart-search?q=",
     resultsPage: {
       href: "/smart-search?q=",
       external_href: "https://www.lumen.com/enterprise/smart-search?q=",
       site: "CC",
     },
   },
   timeoutModal: {
     enabled: false | true,
     showModalTimerMs?: number = 115 * 60 * 1000; // Optional. By default, 115 minutes.
     redirectTimerMs?: number = 120 * 60 * 1000; // Optional. By default, 120 minutes.
     redirectBaseUrl: string; // Mandatory. Timeout page Url. To this URL a parameter will be appended. For example http://localhost:9000?r=.
     returnMode?: "current-url" | "current-menu-item" | "fixed-url" = "current-url"; // Optional. The url mode that will be used to fill redirectBaseUrl
     returnFixedUrl?: string; // Optional. In case the returnMode is 'fixed-url', this is mandatory. For example http://localhost:9000/
     multiTab?: boolean = false; // Optional. Config to make the dialog work cross tab.
     cookieDomain?: string; // Optional. In case multiTab is true, this is mandatory. For example lumen.com
     keepServerAliveImgUrl?: string; // Optional. In case there must be an img which needs to be reloaded so the server does not timeout.
     keepServerAliveImgTimerMs?: number = 3 * 60 * 1000; // Optional. By default, 3 minutes.
   },
   userPresence: {
     enabled: false | true
   }
 }

user => object to send user information.
- doNotContact should be defined (true | false) if the backend call has to be skipped.
enterprises => object to send enterprises information.
apiUri: Endpoint domain where we authenticat the user
- ie: <https://api-dev1.centurylink.com>, <https://api-test1.centurylink.com>, <https://api.centurylink.com>.
sessionToken => access token for api calls.

Use example:

    let enterpriseNavMenuLoaded = false;
    let enterpriseNavHeaderLoaded = false;
    let enterpriseNavMenuItemsLoaded = false;
    let dataLayerReady = false;

    function enterpriseNavMenuLoadedEvent() {
        enterpriseNavMenuLoaded = true;
        enterpriseInitialize(true);
    };

    function enterpriseNavMenuItemsLoadedEvent() {
        enterpriseNavMenuItemsLoaded = true;
        enterpriseInitialize(true);
    };


    function enterpriseNavHeaderLoadedEvent() {
        enterpriseNavHeaderLoaded = true;
        enterpriseInitialize(true);
    };

    function dataLayerReady() {
      dataLayerReady = true;
    }


    function enterpriseInitialize(addListener) {
      let uri = 'https://controlcenter-test1.lumen.com';
      let menuConf = {
        site: 'Control Center',
        origin: 'CC',
      };
      let eventsConf = {
        'notification': 'same-tab',
      };
      let optional = {
        'env': 'stage',
        'apiUri': 'https://api-dev1.centurylink.com'
      }

      const enterpriseNavMenu = document.querySelector('enterprise-nav-menu');
      const enterpriseNavHeader = document.querySelector('enterprise-nav-header');

      if (
        enterpriseNavMenu && enterpriseNavHeader &&
        enterpriseNavMenuLoaded && enterpriseNavHeaderLoaded && enterpriseNavMenuItemsLoaded &&
        dataLayerReady
      ) {
        enterpriseNavMenu.addEventListener('enterpriseNavMenuSelected', function menuSelected(event) {
          actions when an option in the left menu is selected
          refer Listening section to `enterpriseNavMenuSelected` event
        });
        enterpriseNavMenu.addEventListener('enterpriseNavMenuHighlighted', function updateMenuOption(event) {
          actions depending on the menu option selected
        });
        enterpriseNavHeader.addEventListener('enterpriseNavHeaderSelected', function headerSelected(event) {
          actions when an option in the header is selected
          refer Listening section to `enterpriseNavHeaderSelected` event
        });
        enterpriseNavHeader.addEventListener('enterpriseNavHeaderError', function headerError(event) {
          actions when an error is produced on the header component
          refer Listening section to `enterpriseNavHeaderError` event
        });
        enterpriseNavHeader.addEventListener('dataLayerReady', function dataLayerReady(event) {
          actions when the info from do not contact updates digitalData.page.liveEngage
          refer Listening section to `dataLayerReady`event
        };
        enterpriseNavHeader.addEventListener('smartSearchLinkSelected', function smartSearchLinkSelected(event) {
          actions when a smart search link which is in the same site is clicked. It could be the results page or a 
          result link.For example, in a vue application, use the router to redirect the user.
          refer Listening section to `smartSearchLinkSelected`event
        };
        enterpriseNavHeader.addEventListener('timeoutModalKeepAlive', function timeoutModalKeepAliveClicked(event) {
          actions when the modal is clicked and the user clicks the "keep me signed in" button 
        };

        enterpriseNavHeader.initialize(uri, menuConf, eventsConf, optional);
      }
    };

    document.addEventListener('enterpriseNavMenuLoaded', enterpriseNavMenuLoadedEvent);
    document.addEventListener('enterpriseNavMenuItemsLoaded', enterpriseNavMenuItemsLoadedEvent);
    document.addEventListener('enterpriseNavHeaderLoaded', enterpriseNavHeaderLoadedEvent);
    document.addEventListener('dataLayerReady', dataLayerReady);

Framework notes:

In order to configure properly eventsConf object, EventConfiguration type should imported from po-enterprise-nav library.

    import { EventConfiguration } from 'po-enterprise-nav';

    let eventsConf: Record<string, EventConfiguration> = {
      'notification': EventConfiguration.SAME_TAB,
      'imperonation-logout': EventConfiguration.EMIT,
    };

On the other hand, adding listener should be done in the constructor methos or in 'create' or 'init' lifecycle events. Please, remember to remove these listeners in 'destroy' event in order to avoid memory leaks on the browser.

Listening

Listener name to link <enterprise-nav-menu> component with the management function: enterpriseNavMenuSelected.

example:

    const enterpriseNavMenu = document.querySelector('enterprise-nav-menu');
    enterpriseNavMenu.addEventListener('enterpriseNavMenuSelected', function goLink(event) {

      Event will be fired always an user had clicked a menu option in the same domain.
      `event` is a CustomEvent type with the format:
        {
          detail: "local-href" property from menu option name entry in JSON file
        }

    });

Listener name to link <enterprise-nav-menu> component with the management funcion: enterpriseNavMenuHighlighted.

  const enterpriseNavMenu = document.querySelector('enterprise-nav-menu');
  enterpriseNavMenu.addEventListener('enterpriseNavMenuHighlighted', function checkUpdateMenuOption(event) {});

Event will be fired after calling initialize or update methods for <enterprise-nav-menu> component.

event is a CustomEvent type with the format:

{
   detail: {
     "isSelected": `<<true when an option is selected, otherwise false>>`,
     "localHref": `<<local-href value selected from entitledMenus>>`,
     "id": `<<id value selected from entitledMenus>>`,
     "name": `<<name value selected from entitledMenus>>`,
   }
}

Listener name to link <enterprise-nav-header> component with the management function: enterpriseNavHeaderSelected.

const enterpriseNavHeader = document.querySelector('enterprise-nav-header');
enterpriseNavHeader.addEventListener('enterpriseNavHeaderSelected', function headerSelected(event) {

Event will be fired in two situations:

User has selected an enterprise in the enterprises list. Backend is already updated with the new enterprise. event is a CustomEvent type with the format:
```
  {
    detail: {
      "type": "enterprise",
      "value": `<<enterprise object selected>>`,
    }
  }
```

An event was configured as emit-event in the eventsConf object. event is a CustomEvent type with the format:

  {
    detail: {
      "type": "link",
      "value": `<<event>>`,
      "path": `<<selected option relative path>>`,
      "uri": `<<uri set in the initialization object or logout uri depens on env value>>`,
    }
  }

Listener name to link <enterprise-nav-header> component with the management function: enterpriseNavHeaderError.

const enterpriseNavHeader = document.querySelector('enterprise-nav-header');
enterpriseNavHeader.addEventListener('enterpriseNavHeaderError', function headerError(event) {});

Event will be fired when an error occurs changing enterprises:

event is a CustomEvent type with the format:

{
  detail: {
    "type": "enterprise",
    "value": {
      "id": "undefined",
      "error": {
        "status": `<<error status, ie. 302>>`,
        "text": `<<error description>>`,
      }
    }
  }
}

Listener name to link <enterprise-nav-header> component with the management function: dataLayerReady.
```
const enterpriseNavHeader = document.querySelector('enterprise-nav-header');
enterpriseNavheader.addEventListener('dataLayerReady', function dataLayerReady(event) {});
```
- Event will be fired when the info from qualtrics data from do not contact has been read and loaded after into the dataLayer in digitalData.page.liveEngage
  Updating

A public method is available on <enterprise-nav-header> to update Enterprise Navigation Component.

With IHeader parameter. The Enterprise Navigation Component will not make any API call, and just update the information available into the parameter. The parameter is iheader. This object is property object available to update manually. The type is IHeader that has next properties:
- iheader: property object available to update manually.
  - IHeader type:
```
      {
        alertsUnread: `<<new alert unread number to set>>`
        menuOption: `<<new id menu option to set>>`. `enterpriseNavMenuHighlighted` event will be emit after update the menu option
      }
```
enterpriseNavHeader.update(iheader);

Use example with parameter:

  const enterpriseNavHeader = document.querySelector('enterprise-nav-header');

  let iheader: IHeader = {
    alertsUnread: 6
  }
  enterpriseNavHeader.update(iheader);

  let iheader: IHeader = {
    menuOption: "users"
  }
  enterpriseNavHeader.update(iheader);

In addition to the public method, Enterprise Navigation Component has the ability of update the menu option always that the URL has changed. In these cases, the component will emit the enterpriseNavMenuHighlighted event in order to inform that the value has changed.