@postnord/pn-marketweb-components 2.0.148 → 2.0.149

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { MarketWebLoginManager } from "../../../globals/MarketWebLoginManager";
+import { state as headerState } from "./pn-marketweb-siteheader-store";
 export class PnMarketwebSiteheaderLogin {
   constructor() {
     var _a;
@@ -12,33 +13,34 @@ export class PnMarketwebSiteheaderLogin {
     this.fullname = "";
     this.loggedin = false;
     this.showProfileSelection = false;
-    this.loginManager = null;
+    this.checkUserLoggedInStateInterval = 0;
     this.loginLinks = undefined;
     this.toggleButtonText = (((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinkText) ? this.loginDialog.loginMenuLinkText : "");
     this.username = this.fullname;
   }
   componentWillLoad() {
     const userInfo = this.loggedin && this.fullname ? { given_name: this.fullname } : null;
-    this.loginManager = new MarketWebLoginManager({
+    headerState.loginManager = new MarketWebLoginManager({
       endpoint: this.endpoint,
       eventTarget: this.hostElement,
+      checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval,
       userInfo
     });
-    this.loginManager.setSiteUrl(this.siteUrl);
-    this.hostElement["loginmanager"] = this.loginManager;
+    headerState.loginManager.setSiteUrl(this.siteUrl);
+    this.hostElement["loginmanager"] = headerState.loginManager;
     if (this.token) {
-      this.loginManager.registerToken(this.token, 'backend');
+      headerState.loginManager.registerToken(this.token, 'backend');
     }
     else if (this.emitEvents) { // The primary login instance
-      this.loginManager.invalidateTokenOfType('backend');
+      headerState.loginManager.invalidateTokenOfType('backend');
     }
-    this.hostElement.addEventListener(this.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
+    this.hostElement.addEventListener(headerState.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
     this.init();
     this.setUserName();
     this.setToggleButtonText();
   }
   async init() {
-    this.loginManager.init(this.emitEvents);
+    headerState.loginManager.init(this.emitEvents);
     this.setToggleButtonText();
     this.adjustLoginLinks();
   }
@@ -52,10 +54,10 @@ export class PnMarketwebSiteheaderLogin {
         link.isLogoutLink = (link.pageLink.indexOf('location.href') !== -1 && link.pageLink.indexOf('logout') !== -1);
       }
       if (link.isLogoutLink) {
-        link.href = this.loginManager.getLogoutUrl(link.href);
+        link.href = headerState.loginManager.getLogoutUrl(link.href);
       }
       if (i === 0 && !link.href) {
-        link.href = this.loginManager.getLoginUrl();
+        link.href = headerState.loginManager.getLoginUrl();
         link.linkType = 'primary';
       }
       if (link.primaryLinkApperance && !link.linkType) {
@@ -69,7 +71,7 @@ export class PnMarketwebSiteheaderLogin {
     }
     this.loginDialog.legacyLoginLinks = [
       {
-        href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl),
+        href: headerState.loginManager.getLoginUrl(this.loginDialog.loginUrl),
         linkText: this.loginDialog.loginLinkText,
         openInNewWindow: false,
         isLogoutLink: false,
@@ -78,7 +80,7 @@ export class PnMarketwebSiteheaderLogin {
         primaryLinkApperance: true
       },
       {
-        href: this.loginManager.getLoginUrl(this.loginDialog.registerUrl),
+        href: headerState.loginManager.getLoginUrl(this.loginDialog.registerUrl),
         linkText: this.loginDialog.createLoginLinkText,
         openInNewWindow: false,
         isLogoutLink: false,
@@ -88,7 +90,7 @@ export class PnMarketwebSiteheaderLogin {
     ];
   }
   setUserName() {
-    const userInfo = this.loginManager.getUserInfo();
+    const userInfo = headerState.loginManager.getUserInfo();
     let name = "";
     if (!this.loggedin || !userInfo) {
       this.username = name;
@@ -118,7 +120,7 @@ export class PnMarketwebSiteheaderLogin {
   onLoginStateChange(e) {
     if (this.loggedin !== e.detail && this.emitEvents) {
       this.loggedin = e.detail;
-      this.loginStateChange.emit({ loggedIn: this.loggedin, token: this.loginManager.getToken() });
+      this.loginStateChange.emit({ loggedIn: this.loggedin, token: headerState.loginManager.getToken() });
       this.setUserName();
       this.setToggleButtonText();
     }
@@ -136,9 +138,9 @@ export class PnMarketwebSiteheaderLogin {
       hostElementAttribute.loggedin = this.loggedin + '';
     }
     return (h(Host, Object.assign({}, hostElementAttribute), h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, this.loggedin && this.showProfileSelection ?
-      h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loginManager: this.loginManager, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })
+      h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })
       :
-        h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loginManager: this.loginManager, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username }))));
+        h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username }))));
   }
   static get is() { return "pn-marketweb-siteheader-login"; }
   static get originalStyleUrls() {
@@ -320,12 +322,29 @@ export class PnMarketwebSiteheaderLogin {
         "attribute": "show-profile-selection",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "checkUserLoggedInStateInterval": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Continiously check if a user is logged in *"
+        },
+        "attribute": "check-user-logged-in-state-interval",
+        "reflect": false,
+        "defaultValue": "0"
       }
     };
   }
   static get states() {
     return {
-      "loginManager": {},
       "loginLinks": {},
       "toggleButtonText": {},
       "username": {}

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search.js

@@ -38,7 +38,7 @@ export class PnMarketwebSiteheaderSearch {
       }
     }
     const req = await fetch(autocompleteUrl, { signal: state.requestAbortController.signal }).catch((e) => {
-      console.log('Unable to fetch autocomplete suggestions', e);
+      console.warn('Unable to fetch autocomplete suggestions', e);
     });
     if (!req) {
       return;

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-store.js

@@ -0,0 +1,7 @@
+import { createStore } from "@stencil/store";
+// Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
+const { state, onChange } = createStore({
+  loginManager: null
+});
+export { state, onChange };
+export default state;

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.js

@@ -1,7 +1,7 @@
 import { h, Host, } from '@stencil/core';
 import { FetchHelper } from '../../../globals/FetchHelper';
 import { MarketWebContextService } from '../../../globals/MarketWebContextService';
-import { MarketWebLoginManager } from '../../../globals/MarketWebLoginManager';
+import { state as headerState } from "./pn-marketweb-siteheader-store";
 import { translations } from './translations';
 export class PnMarketwebSiteheader {
   constructor() {
@@ -28,6 +28,7 @@ export class PnMarketwebSiteheader {
     this.cache = false;
     this.searchPlaceholder = '';
     this.spaMode = false;
+    this.checkUserLoggedInStateInterval = 0;
     this.i18n = {
       searchlabel: '',
       searchplaceholder: '',
@@ -50,10 +51,8 @@ export class PnMarketwebSiteheader {
     this.loginDialog = null;
     this.minimizeSearch = false;
     this.loggedIn = false;
-    this.loginManager = null;
   }
   componentWillLoad() {
-    this.loginManager = new MarketWebLoginManager({ eventTarget: this.hostElement });
     this.setInitialValues().then(() => {
       this.init();
     });
@@ -139,7 +138,9 @@ export class PnMarketwebSiteheader {
     }
     // Set site definition
     this.siteDefinition = data.sitedefinition;
-    this.loginManager.setSiteUrl(this.siteDefinition.url);
+    if (headerState.loginManager) {
+      headerState.loginManager.setSiteUrl(this.siteDefinition.url);
+    }
     let updatedMenuItems = [];
     // Set navigation information
     if (this.siteDomainInUrls) {
@@ -293,13 +294,16 @@ export class PnMarketwebSiteheader {
     if (matchedHref.length === 0) {
       return href;
     }
-    return this.loginManager.getLoginUrl(href);
+    if (headerState.loginManager) {
+      return headerState.loginManager.getLoginUrl(href);
+    }
+    return href;
   }
   render() {
     var _a, _b, _c, _d, _e, _f;
     return (h(Host, { language: this.language, market: this.market, environment: this.environment }, h("header", null, h("div", { class: "siteheader-row" }, h("div", { class: "siteheader-topleft" }, h("slot", { name: "topleft" }), this.gotData && this.siteSelector && !this.hideSiteSelector && (h("pn-site-selector", { language: this.language, buttontext: (_b = (_a = this.siteSelector) === null || _a === void 0 ? void 0 : _a.currentSiteTitle) !== null && _b !== void 0 ? _b : 'postnord' }, this.gotData && ((_c = this.siteSelector) === null || _c === void 0 ? void 0 : _c.currentSiteTitle) && (h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle + ' ', description: this.siteSelector.currentSiteDescription })), this.gotData &&
       ((_d = this.siteSelector) === null || _d === void 0 ? void 0 : _d.siteSelections) &&
-      this.siteSelector.siteSelections.map(site => (h("pn-site-selector-item", { heading: site.linkText + ' ', description: site.linkDescription, url: this.adjustSiteSelectorUrl(site.href), newwindow: site.openInNewWindow })))))), h("div", { class: "siteheader-logocontainer" }, h("a", { href: this.homePageLink, title: "Home", class: "siteheader-logolink" }, h("slot", { name: "logo" }, h("svg", { class: "siteheader-logo", xmlns: "http://www.w3.org/2000/svg", width: "12.7rem", height: "2.4rem", viewBox: "0 0 141.73 26.65" }, h("path", { d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "#00A0D6", transform: "translate(0 0)" }))))), h("div", { class: "siteheader-topright" }, h("slot", { name: "toprightstart" }), this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { token: this.userToken, siteUrl: this.siteDefinition.url, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n, showProfileSelection: this.showProfileSelection })), this.gotData && this.languageOptions && this.languageOptions.length && !this.hideLanguageSelector && (h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))))), h("slot", { name: "toprightend" }), h("div", { class: "siteheader-menu-top-search" }, h("pn-marketweb-siteheader-search", { language: this.language, siteid: this.siteid, search: this.search, "hide-search": this.hideSearch, i18n: this.i18n, icononly: false })))), h("slot", { name: "siteheader-menu-top-button" }), h("div", { class: "siteheader-row" }, h("div", { class: "siteheader-menu" }, this.gotData && this.menuItems && (h("pn-mainnav", { market: this.market, language: this.language, onMenuOpenChange: e => {
+      this.siteSelector.siteSelections.map(site => (h("pn-site-selector-item", { heading: site.linkText + ' ', description: site.linkDescription, url: this.adjustSiteSelectorUrl(site.href), newwindow: site.openInNewWindow })))))), h("div", { class: "siteheader-logocontainer" }, h("a", { href: this.homePageLink, title: "Home", class: "siteheader-logolink" }, h("slot", { name: "logo" }, h("svg", { class: "siteheader-logo", xmlns: "http://www.w3.org/2000/svg", width: "12.7rem", height: "2.4rem", viewBox: "0 0 141.73 26.65" }, h("path", { d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "#00A0D6", transform: "translate(0 0)" }))))), h("div", { class: "siteheader-topright" }, h("slot", { name: "toprightstart" }), this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { token: this.userToken, siteUrl: this.siteDefinition.url, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n, showProfileSelection: this.showProfileSelection, "check-user-logged-in-state-interval": this.checkUserLoggedInStateInterval })), this.gotData && this.languageOptions && this.languageOptions.length && !this.hideLanguageSelector && (h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))))), h("slot", { name: "toprightend" }), h("div", { class: "siteheader-menu-top-search" }, h("pn-marketweb-siteheader-search", { language: this.language, siteid: this.siteid, search: this.search, "hide-search": this.hideSearch, i18n: this.i18n, icononly: false })))), h("slot", { name: "siteheader-menu-top-button" }), h("div", { class: "siteheader-row" }, h("div", { class: "siteheader-menu" }, this.gotData && this.menuItems && (h("pn-mainnav", { market: this.market, language: this.language, onMenuOpenChange: e => {
         document.body.setAttribute('data-siteheader-menuopen', e.detail + '');
       } }, h("pn-mainnav-level", null, h("pn-mainnav-list", null, this.menuItems.map(item => {
       var _a, _b;
@@ -683,6 +687,24 @@ export class PnMarketwebSiteheader {
         "attribute": "spa-mode",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "checkUserLoggedInStateInterval": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Continiously check if a user is logged in *"
+        },
+        "attribute": "check-user-logged-in-state-interval",
+        "reflect": false,
+        "defaultValue": "0"
       }
     };
   }
@@ -700,8 +722,7 @@ export class PnMarketwebSiteheader {
       "languageOptions": {},
       "loginDialog": {},
       "minimizeSearch": {},
-      "loggedIn": {},
-      "loginManager": {}
+      "loggedIn": {}
     };
   }
   static get events() {

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js

@@ -1,6 +1,6 @@
 import readme from './readme.md';
 
-const usertoken = '47019f7f7e72279395dc60a3bb975b38d0f17ef4b5c6ead3cea1082';
+const usertoken = '6ae6bde345eb68fc0102f4ba256f31e9151db31dc2ea4c23a51917c';
 
 export default {
   title: 'Web Components/Market web site Header',
@@ -380,6 +380,7 @@ const LoggedInTemplate = ({ ...args }) => {
     language="${args.language}"
     endpoint="${args.endpoint}"
     user-token="${args.token}"
+    check-user-logged-in-state-interval="${args.checkUserLoggedInStateInterval+''}"
   >
   </pn-marketweb-siteheader>
 </div>
@@ -395,6 +396,16 @@ LoggedIn.args = {
   token: usertoken,
 };
 
+export const LoggedInWithStatusCheck = LoggedInTemplate.bind({});
+LoggedInWithStatusCheck.args = {
+  market: 'se',
+  language: 'sv',
+  endpoint: 'https://com-integration.postnord.com',
+  checkUserLoggedInStateInterval: 10000,
+  //endpoint: 'http://localhost:51444',
+  token: usertoken,
+};
+
 const LoggedInProfileSelectionTemplate = ({ ...args }) => {
   return `
   <div style="background:#ddd;min-height:100vh;">
@@ -403,6 +414,7 @@ const LoggedInProfileSelectionTemplate = ({ ...args }) => {
     language="${args.language}"
     endpoint="${args.endpoint}"
     user-token="${args.token}"
+    check-user-logged-in-state-interval="10000"
     show-profile-selection="true"
   >
   </pn-marketweb-siteheader>

package/collection/globals/MarketWebLoginManager.js

@@ -4,6 +4,7 @@ class MarketWebLoginManager {
     this.eventTarget = (window !== null && window !== void 0 ? window : document === null || document === void 0 ? void 0 : document.body);
     this.endpoint = "";
     this.storagePrefix = "pn-user";
+    this.checkUserLoggedInStateInterval = 0;
     this.baseUrls = {
       at: 'https://atportal.postnord.com/api/unified-login/backend',
       prod: 'https://portal.postnord.com/api/unified-login/backend',
@@ -27,6 +28,9 @@ class MarketWebLoginManager {
     };
     this.overridetokenValue = 'overridetokenValue';
     this.siteUrl = window.location.origin;
+    this.abortSignalForLoginCheck = null;
+    this.loginCheckInProgress = false;
+    this.loginCheckTimer = null;
     this.store = {
       get: (key) => {
         const value = window.sessionStorage.getItem(`${this.storagePrefix}-${key}`);
@@ -62,6 +66,7 @@ class MarketWebLoginManager {
     this.eventTarget = (options.eventTarget) ? options.eventTarget : this.eventTarget;
     this.endpoint = options.endpoint ? options.endpoint : `${window.location.protocol}//${window.location.host}`;
     (_a = this.storagePrefix) !== null && _a !== void 0 ? _a : (this.storagePrefix = options.storagePrefix);
+    this.checkUserLoggedInStateInterval = (options.checkUserLoggedInStateInterval && options.checkUserLoggedInStateInterval > 0) ? parseInt((options.checkUserLoggedInStateInterval + ''), 10) : 0;
     if (options.userInfo) {
       this.store.set(this.keys.user, options.userInfo);
       this.registerToken(this.overridetokenValue, 'override');
@@ -76,6 +81,9 @@ class MarketWebLoginManager {
         this.fetchUserInfo();
       }
       this.loginStateChange();
+      if (this.checkUserLoggedInStateInterval > 0) {
+        this.initiateLoggedInCheck();
+      }
     }
   }
   setSiteUrl(siteUrl) {
@@ -83,6 +91,75 @@ class MarketWebLoginManager {
       this.siteUrl = siteUrl;
     }
   }
+  initiateLoggedInCheck() {
+    if (this.isLoggedIn()) {
+      if (window && window['AbortController']) {
+        this.abortSignalForLoginCheck = new AbortController();
+      }
+      this.loginCheckTimer = window.setInterval(() => {
+        this.doExternalLoggedInCheck().then(() => { }).catch(() => { });
+      }, this.checkUserLoggedInStateInterval);
+    }
+  }
+  async doExternalLoggedInCheck() {
+    if (!window.navigator.onLine) {
+      // Don't check if the user is not online
+      return;
+    }
+    if (!this.getToken()) {
+      window.clearInterval(this.checkUserLoggedInStateInterval);
+      return;
+    }
+    if (this.loginCheckInProgress && this.abortSignalForLoginCheck) {
+      this.abortSignalForLoginCheck.abort();
+      this.abortSignalForLoginCheck = new AbortController();
+    }
+    this.loginCheckInProgress = true;
+    const reqConfig = {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': this.getToken()
+      },
+    };
+    if (this.abortSignalForLoginCheck && this.abortSignalForLoginCheck["signal"]) {
+      reqConfig["signal"] = this.abortSignalForLoginCheck["signal"];
+    }
+    const response = await fetch(`${this.getBaseUrl()}${this.endpoints.userInfoEndpoint}`, reqConfig);
+    if (response.status === 409) { // This is a status the API returns if a user has been logged out
+      window.clearInterval(this.checkUserLoggedInStateInterval);
+      console.log('Cleared out user data due to bad response from authentication endpoint');
+      this.LogoutUser();
+      return;
+    }
+    if (!response.ok) {
+      // The response was "bad". This could be due to bad connectivity or something else. 
+      // We'll ignore it so we don't unecessarily log users out or have them loose state if they're switching connection
+      return;
+    }
+    const data = await response.json();
+    if (!data || !data['accessToken']) {
+      window.clearInterval(this.checkUserLoggedInStateInterval);
+      console.log('Cleared out user data due to bad response from authentication endpoint');
+      this.LogoutUser();
+    }
+    this.loginCheckInProgress = false;
+  }
+  LogoutUser() {
+    this.clearUserData();
+    // Log out user
+    if (this.eventTarget) {
+      const logoutLink = this.eventTarget.querySelector('#pn-marketweb-header-logoutlink');
+      if (logoutLink) {
+        logoutLink.click();
+        return;
+      }
+    }
+    // If no logout link was found, attempt to change URL to redirect link
+    const currentPageHref = window.location.href;
+    window.location.href = this.getLogoutUrl(currentPageHref);
+  }
   isLoggedIn(override = false) {
     if (override) {
       return override;