@postnord/pn-marketweb-components 2.0.150-test → 2.0.150-test2

package/cjs/pn-proxio-pricegroup.cjs.entry.js

@@ -4,26 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3e27c79.js');
 const MarketWebContextService = require('./MarketWebContextService-392b4585.js');
+const translations = require('./translations-585711ff.js');
 
-const translations = {
-  'sv': {
-    "from": "Från ",
-    "labelMaxDimensionsRoll": "Rulle",
-    "labelMaxDimensions": "Maxmått"
-  },
-  'da': {
-    "from": "Från ",
-    "labelMaxDimensionsRoll": "Rulle",
-    "labelMaxDimensions": "Maks måle"
-  },
-  'en': {
-    "from": "From ",
-    "labelMaxDimensionsRoll": "Roll",
-    "labelMaxDimensions": "Maximum dimensions"
-  }
-};
-
-const pnProxioPricegroupCss = "pn-proxio-pricegroup div.proxio-pricegroup-container{max-width:99.4rem}pn-proxio-pricegroup div.weightcontainer{margin:2.8rem 0}pn-proxio-pricegroup div.weightvaluecontainer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}pn-proxio-pricegroup div.weightvaluecontainer pn-button{-webkit-transform:translateY(-0.4rem);transform:translateY(-0.4rem)}pn-proxio-pricegroup div.weightradios{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;color:#005D92;width:80%;margin:0 3.6rem;position:relative;width:0%}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50]{width:45%;margin-left:auto;margin-right:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50]{width:40%}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75]{width:65%;margin-left:auto;margin-right:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75]{margin-right:auto}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50]{width:45%;margin-right:auto;margin-left:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50]{width:40%}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75]{width:65%;margin-right:auto;margin-left:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75]{margin-left:auto}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default]{-ms-flex:0 0 auto;flex:0 0 auto;width:80%}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default]{width:65%}}pn-proxio-pricegroup div.weightdata{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;gap:1.2rem;min-width:4rem;cursor:pointer}pn-proxio-pricegroup div.weightdata label{font-size:1.4rem;cursor:pointer}pn-proxio-pricegroup div.weightdata[data-carousel-position=\"0\"]{font-size:2rem;font-weight:700}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightdata[data-carousel-position=\"2\"],pn-proxio-pricegroup div.weightdata[data-carousel-position=\"-2\"]{display:none}}pn-proxio-pricegroup div.weightdata[data-carousel-position=outside]{display:none}pn-proxio-pricegroup div.weightdata input[type=radio]{-webkit-appearance:none;-moz-appearance:none;width:1.2rem;height:1.2rem;background-color:#005D92;border-radius:50%;margin:0;cursor:pointer}pn-proxio-pricegroup div.weightdata input[type=radio]:checked{z-index:1;-webkit-transform:translateY(-0.1rem);transform:translateY(-0.1rem);height:1.4rem;width:1.4rem;-webkit-box-shadow:0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92}pn-proxio-pricegroup div.weightline{width:100%;background-color:#F3F2F2;z-index:-1;height:0.8rem;-webkit-transform:translateX(2.1rem) translateY(1.32rem);transform:translateX(2.1rem) translateY(1rem);border-radius:2rem;margin-right:3.5rem}pn-proxio-pricegroup pn-button[disabled=disabled]{opacity:0.2}pn-proxio-pricegroup pn-button[disabled=disabled] button{cursor:default}pn-proxio-pricegroup pn-button[disabled=disabled] button.pn-button-light .pn-button-bg:after{background-color:#FFFFFF}pn-proxio-pricegroup pn-button[disabled=disabled] button[data-tooltip-open]:before{display:none}pn-proxio-pricegroup pn-button button div.button-tooltip{display:none}pn-proxio-pricegroup pn-button button:focus .pn-button-bg{-webkit-box-shadow:none;box-shadow:none}";
+const pnProxioPricegroupCss = "pn-proxio-pricegroup div.proxio-pricegroup-container{max-width:99.4rem}pn-proxio-pricegroup div.weightcontainer{margin:2.8rem 0}pn-proxio-pricegroup div.weightvaluecontainer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}pn-proxio-pricegroup div.weightvaluecontainer pn-button{-webkit-transform:translateY(-0.4rem);transform:translateY(-0.4rem)}pn-proxio-pricegroup div.weightvaluecontainer pn-button button::before{display:none}pn-proxio-pricegroup div.weightradios{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;color:#005D92;width:80%;margin:0 3.6rem;position:relative;width:0%}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50]{width:45%;margin-left:auto;margin-right:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50]{width:40%}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75]{width:65%;margin-left:auto;margin-right:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75]{margin-right:auto}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50]{width:45%;margin-right:auto;margin-left:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50]{width:40%}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75]{width:65%;margin-right:auto;margin-left:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75]{margin-left:auto}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default]{-ms-flex:0 0 auto;flex:0 0 auto;width:80%}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default]{width:65%}}pn-proxio-pricegroup div.weightdata{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;gap:1.2rem;min-width:4rem;cursor:pointer}pn-proxio-pricegroup div.weightdata label{font-size:1.4rem;cursor:pointer}pn-proxio-pricegroup div.weightdata[data-carousel-position=\"0\"]{font-size:2rem;font-weight:700}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightdata[data-carousel-position=\"2\"],pn-proxio-pricegroup div.weightdata[data-carousel-position=\"-2\"]{display:none}}pn-proxio-pricegroup div.weightdata[data-carousel-position=outside]{display:none}pn-proxio-pricegroup div.weightdata input[type=radio]{-webkit-appearance:none;-moz-appearance:none;width:1.2rem;height:1.2rem;background-color:#005D92;border-radius:50%;margin:0;cursor:pointer}pn-proxio-pricegroup div.weightdata input[type=radio]:checked{z-index:1;-webkit-transform:translateY(-0.1rem);transform:translateY(-0.1rem);height:1.4rem;width:1.4rem;-webkit-box-shadow:0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92}pn-proxio-pricegroup div.weightline{width:100%;background-color:#F3F2F2;z-index:-1;height:0.8rem;-webkit-transform:translateX(2.1rem) translateY(1.32rem);transform:translateX(2.1rem) translateY(1rem);border-radius:2rem;margin-right:3.5rem}pn-proxio-pricegroup pn-button[disabled=disabled]{opacity:0.2}pn-proxio-pricegroup pn-button[disabled=disabled] button{cursor:default}pn-proxio-pricegroup pn-button[disabled=disabled] button.pn-button-light .pn-button-bg:after{background-color:#FFFFFF}pn-proxio-pricegroup pn-button[disabled=disabled] button[data-tooltip-open]:before{display:none}pn-proxio-pricegroup pn-button button div.button-tooltip{display:none}pn-proxio-pricegroup pn-button button:focus .pn-button-bg{-webkit-box-shadow:none;box-shadow:none}";
 
 let PnProxioPricegroup = class {
   constructor(hostRef) {
@@ -37,7 +20,7 @@ let PnProxioPricegroup = class {
     this.cache = true;
     this.activeWeightIndex = 0;
     this.data = null;
-    this.i18n = translations["sv"];
+    this.i18n = translations.translations["sv"];
     this.fetchHelper = new MarketWebContextService.FetchHelper("proxiopricegroup");
   }
   componentWillLoad() {
@@ -66,6 +49,7 @@ let PnProxioPricegroup = class {
     }
     const endpoint = (this.endpoint.lastIndexOf("/") === this.endpoint.length - 1) ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
     const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;
+    //const fetchUrl = `http://localhost:51444/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;
     const data = await this.fetchHelper.fetchJson(fetchUrl, {
       'mode': 'cors',
     }, this.cache, this.onFetchData.bind(this));
@@ -85,8 +69,8 @@ let PnProxioPricegroup = class {
     this.activeWeightIndex = weightIndex;
   }
   setLanguage() {
-    if (translations[this.language]) {
-      this.i18n = translations[this.language];
+    if (translations.translations[this.language]) {
+      this.i18n = translations.translations[this.language];
     }
   }
   getPriceString(product) {

package/cjs/pn-titletag.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3e27c79.js');
+
+const pnTitletagCss = "pn-titletag{display:-ms-inline-flexbox;display:inline-flex;border-radius:0.4rem;min-height:2.5em;font-weight:normal;font-size:0.75em;text-align:center;vertical-align:bottom;padding:0.6rem;gap:0.6em}pn-titletag[color=green700],pn-titletag[color=green]{color:#005E41;background:#DCF6E7}pn-titletag[color=blue700],pn-titletag[color=blue]{background:#E0F8FF;color:#005D92}pn-titletag[color=coral700],pn-titletag[color=coral]{background:#FDEFEE;color:#9B1C2E}pn-titletag[color=gray900],pn-titletag[color=gray],pn-titletag[color=grey]{background:#D3CECB;color:#2D2013}pn-titletag[color=gray50],pn-titletag[color=lightgray],pn-titletag[color=lightgrey]{background:#F3F2F2;color:#2D2013}";
+
+let PnTiletag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Icon of the tag */
+    this.icon = null;
+    /** Icon of the tag */
+    this.color = "green700";
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null), this.icon ? (index.h("pn-icon", { symbol: this.icon, small: "false", color: this.color })) : null));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnTiletag.style = pnTitletagCss;
+
+exports.pn_titletag = PnTiletag;

package/cjs/translations-585711ff.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const translations = {
+  'sv': {
+    "from": "Från ",
+    "labelMaxDimensionsRoll": "Rulle",
+    "labelMaxDimensions": "Maxmått"
+  },
+  'da': {
+    "from": "Från ",
+    "labelMaxDimensionsRoll": "Rulle",
+    "labelMaxDimensions": "Maks måle"
+  },
+  'en': {
+    "from": "From ",
+    "labelMaxDimensionsRoll": "Roll",
+    "labelMaxDimensions": "Maximum dimensions"
+  }
+};
+
+exports.translations = translations;

package/collection/collection-manifest.json

@@ -20,6 +20,7 @@
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-button.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-links.js",
+    "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-mypage-button.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search.js",
@@ -61,6 +62,8 @@
     "./components/widgets/pn-product-tile/pn-product-tile-info.js",
     "./components/widgets/pn-product-tile/pn-product-tile-price.js",
     "./components/widgets/pn-product-tile/pn-product-tile.js",
+    "./components/widgets/pn-proxio-findprice/pn-proxio-findprice-result.js",
+    "./components/widgets/pn-proxio-findprice/pn-proxio-findprice.js",
     "./components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.js",
     "./components/widgets/pn-proxio-productcard/pn-proxio-productcard-description.js",
     "./components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.js",

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-button.css

@@ -1,3 +0,0 @@
-pn-marketweb-siteheader-login-button button {
-  background-color: red;
-}

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

@@ -1,23 +1,47 @@
 import { Component, Element, h, Host, Prop } from '@stencil/core';
+const LoginURL = {
+  at: 'https://atportal.postnord.com/api/unified-login/backend/authorization?redirectionUrl=',
+  prod: 'https://portal.postnord.com/api/unified-login/backend/authorization?redirectionUrl=',
+};
+const staging = ['localhost', 'integration.postnord.com', 'atportal.postnord.com', 'devportal.postnord.com'];
+//om staging "atportal.postnord.com" annars "portal.postnord.com" för login
+/*
+
+1. Check if we are on a market website domain. If so, use a relative /login link
+
+2. Check if the site is a “AT”/dev/test site. If so, use the atportal.postnord.com domain for the unified login endpoint
+
+3. Else use the portal.postnord.com for the unified login endpoint
+
+*/
 export class PnMarketwebSiteheaderLoginButton {
-  createLoginUrl() {
-    const base = window.location.origin;
-    console.log('base: ', window.location.origin);
-    if (base.includes('portal')) {
-      return base.concat(`/api/unified-login/backend/authorization?redirectionUrl=${window.location.href}`);
-    }
-    return base.concat(`/login?returnUrl=${window.location.href}`);
+  constructor() {
+    this.label = 'Log in';
   }
-  navigateToLogin() {
-    this.loginUrl = this.createLoginUrl();
-    //temp test
-    if (this.active) {
-      location.href = this.loginUrl;
+  isStaging() {
+    return staging.some(el => window.location.href.includes(el));
+  }
+  determineLoginUrl() {
+    if (this.isStaging()) {
+      //staging 'https://atportal.postnord.com/api/unified-login/backend/authorization?redirectionUrl='
+      return LoginURL.at.concat(window.location.href);
     }
     else {
-      console.log('loginurl with its redirect: ', this.loginUrl);
+      //portal but not staging portal... 'https://portal.postnord.com/api/unified-login/backend/authorization?redirectionUrl='
+      if (window.location.href.includes('portal')) {
+        return LoginURL.prod.concat(window.location.href);
+      }
+      else {
+        //not staging, not portal -> marketweb (?) /login?returnUrl=
+        return window.location.hostname.concat(`/login?returnUrl=${window.location.href}`);
+      }
     }
   }
+  navigateToLogin() {
+    const url = this.determineLoginUrl();
+    console.log('url: ', url);
+    //location.href = url;
+  }
   render() {
     return (h(Host, null,
       h("pn-button", { onClick: () => this.navigateToLogin() }, this.label)));
@@ -31,11 +55,11 @@ export class PnMarketwebSiteheaderLoginButton {
   }; }
   static get properties() { return {
     "label": {
-      "type": "any",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -45,24 +69,8 @@ export class PnMarketwebSiteheaderLoginButton {
         "text": ""
       },
       "attribute": "label",
-      "reflect": false
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "active",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'Log in'"
     }
   }; }
   static get elementRef() { return "hostElement"; }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.css

@@ -1,22 +1,34 @@
 pn-marketweb-siteheader-login-linklist {
-  padding: 1rem 0;
-  max-height: 5.2rem;
-  position: relative;
+  display: flex;
+  flex-direction: column;
 }
 pn-marketweb-siteheader-login-linklist strong {
-  padding: 0.8rem 1.6rem;
-  display: flex;
-  align-items: center;
+  margin-bottom: 2.4rem;
 }
-pn-marketweb-siteheader-login-linklist ul, pn-marketweb-siteheader-login-linklist li {
-  list-style: none;
-  margin: 0;
+pn-marketweb-siteheader-login-linklist ul {
+  list-style-type: none;
   padding: 0;
+  margin: 0;
 }
 pn-marketweb-siteheader-login-linklist li {
-  padding: 0.8rem 1.6rem;
+  margin-bottom: 2.4rem;
+}
+pn-marketweb-siteheader-login-linklist li a {
+  color: #005D92;
+  text-decoration: none;
+  font-size: 1.6rem;
+  line-height: 1.5;
+  font-weight: 500;
+}
+pn-marketweb-siteheader-login-linklist li pn-icon {
+  padding-left: 0.8rem;
+}
+pn-marketweb-siteheader-login-linklist li pn-icon svg > path {
+  fill: #005D92 !important;
+}
+pn-marketweb-siteheader-login-linklist li:hover a {
+  text-decoration: underline;
 }
-pn-marketweb-siteheader-login-linklist li pn-button {
-  display: block;
-  width: 100%;
+pn-marketweb-siteheader-login-linklist li:last-of-type {
+  margin-bottom: 0;
 }

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

@@ -1,49 +1,14 @@
-import { Component, Prop, h, Element, Host } from "@stencil/core";
-import { state as headerState } from "./pn-marketweb-siteheader-store";
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { state as headerState } from './pn-marketweb-siteheader-store';
 export class PnMarketwebSiteheaderLoginLinklist {
   constructor() {
     this.heading = null;
     this.links = [];
-    this.idNamespace = "";
-  }
-  componentWillLoad() {
+    this.idNamespace = '';
   }
+  componentWillLoad() { }
   uniqueId(text) {
-    return "loginlink-" + text.replace(/[^A-Za-z0-9.\\\/]/igm, "") + "-" + this.idNamespace;
-  }
-  linkAppearanceAttributes(link) {
-    let attributes = {};
-    if (link.linkType) {
-      switch (link.linkType) {
-        case 'primary':
-          attributes = {
-            appearance: '',
-            variant: ''
-          };
-          break;
-        case 'secondary':
-          attributes = {
-            appearance: 'light',
-            variant: 'outlined'
-          };
-          break;
-        case 'regularlink':
-        default:
-          attributes = {
-            appearance: 'light',
-            variant: 'borderless',
-            icon: 'arrow-right'
-          };
-          break;
-      }
-      return attributes;
-    }
-    if (!link.linkType) {
-      attributes = {
-        appearance: link.primaryLinkApperance ? "dark" : "light"
-      };
-    }
-    return attributes;
+    return 'loginlink-' + text.replace(/[^A-Za-z0-9.\\\/]/gim, '') + '-' + this.idNamespace;
   }
   render() {
     if (!this.links || this.links.length === 0) {
@@ -51,11 +16,15 @@ export class PnMarketwebSiteheaderLoginLinklist {
     }
     return (h(Host, null,
       this.heading ? h("strong", null, this.heading) : null,
-      h("ul", null, this.links.map((link) => {
+      h("ul", null, this.links.map(link => {
         return (h("li", null,
-          h("pn-button", Object.assign({ href: link.href, id: this.uniqueId(link.linkText) }, (link.openInNewWindow && { target: '_blank' }), this.linkAppearanceAttributes(link), { onClick: () => { if (link.isLogoutLink) {
-              headerState.loginManager.clearUserData();
-            } } }), link.linkText)));
+          h("a", Object.assign({ href: link.href, id: this.uniqueId(link.linkText) }, (link.openInNewWindow && { target: '_blank' }), { onClick: () => {
+              if (link.isLogoutLink) {
+                headerState.loginManager.clearUserData();
+              }
+            } }),
+            link.linkText,
+            link.isLogoutLink ? h("pn-icon", { symbol: "transfer" }) : h("pn-icon", { symbol: "arrow-right" }))));
       }))));
   }
   static get is() { return "pn-marketweb-siteheader-login-linklist"; }
@@ -121,7 +90,7 @@ export class PnMarketwebSiteheaderLoginLinklist {
       },
       "attribute": "id-namespace",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     }
   }; }
   static get elementRef() { return "hostElement"; }

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

@@ -1,12 +1,12 @@
-import { Component, Prop, h, Element, Watch, Host } from "@stencil/core";
-import { state as headerState } from "./pn-marketweb-siteheader-store";
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { state as headerState } from './pn-marketweb-siteheader-store';
 export class PnMarketwebSiteheaderLoginLinks {
   constructor() {
     // Login dialog
     this.loginDialog = null;
-    this.idNamespace = "";
+    this.idNamespace = '';
     this.loggedin = false;
-    this.username = "";
+    this.username = '';
   }
   componentWillLoad() {
     this.init();
@@ -21,12 +21,12 @@ export class PnMarketwebSiteheaderLoginLinks {
     }
     const adjustLink = (link, i) => {
       if (!link.isLogoutLink) {
-        link.isLogoutLink = (link.pageLink.indexOf('location.href') !== -1 && link.pageLink.indexOf('logout') !== -1);
+        link.isLogoutLink = link.pageLink.indexOf('location.href') !== -1 && link.pageLink.indexOf('logout') !== -1;
       }
       if (link.isLogoutLink) {
         link.href = headerState.loginManager.getLogoutUrl(link.href);
       }
-      link.href = link.href.replace("window.location.href", window.location.href);
+      link.href = link.href.replace('window.location.href', window.location.href);
       if (i === 0 && !link.href) {
         link.href = headerState.loginManager.getLoginUrl();
         link.linkType = 'primary';
@@ -49,7 +49,7 @@ export class PnMarketwebSiteheaderLoginLinks {
         isLogoutLink: false,
         pageLink: null,
         linkType: 'primary',
-        primaryLinkApperance: true
+        primaryLinkApperance: true,
       },
       {
         href: headerState.loginManager.getLoginUrl(this.loginDialog.registerUrl),
@@ -57,8 +57,8 @@ export class PnMarketwebSiteheaderLoginLinks {
         openInNewWindow: false,
         isLogoutLink: false,
         pageLink: null,
-        primaryLinkApperance: false
-      }
+        primaryLinkApperance: false,
+      },
     ];
   }
   render() {
@@ -75,18 +75,8 @@ export class PnMarketwebSiteheaderLoginLinks {
       hostElementAttribute.loggedin = this.loggedin;
     }
     return (h(Host, Object.assign({}, hostElementAttribute),
-      (!this.loginDialog.overrideLoginMenu) ?
-        h("div", { "data-loggedin": this.loggedin + '' }, (this.loggedin) ?
-          h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loggedInLinks, idNamespace: this.idNamespace })
-          :
-            h("div", null, ((_a = this.loginDialog.loginMenuLinks) === null || _a === void 0 ? void 0 : _a.length) > 0 ?
-              h("pn-marketweb-siteheader-login-linklist", { heading: this.loginDialog.loginTitle, links: this.loginDialog.loginMenuLinks, idNamespace: this.idNamespace })
-              :
-                h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.legacyLoginLinks, idNamespace: this.idNamespace })))
-        : null,
-      (this.loginDialog.overrideLoginMenu) ?
-        h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loginMenuLinks, idNamespace: this.idNamespace })
-        : null));
+      !this.loginDialog.overrideLoginMenu ? (h("div", { "data-loggedin": this.loggedin + '' }, this.loggedin ? (h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loggedInLinks, idNamespace: this.idNamespace })) : (h("div", null, ((_a = this.loginDialog.loginMenuLinks) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("pn-marketweb-siteheader-login-linklist", { heading: this.loginDialog.loginTitle, links: this.loginDialog.loginMenuLinks, idNamespace: this.idNamespace })) : (h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.legacyLoginLinks, idNamespace: this.idNamespace })))))) : null,
+      this.loginDialog.overrideLoginMenu ? (h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loginMenuLinks, idNamespace: this.idNamespace })) : null));
   }
   static get is() { return "pn-marketweb-siteheader-login-links"; }
   static get originalStyleUrls() { return {
@@ -133,7 +123,7 @@ export class PnMarketwebSiteheaderLoginLinks {
       },
       "attribute": "id-namespace",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "loggedin": {
       "type": "boolean",
@@ -169,7 +159,7 @@ export class PnMarketwebSiteheaderLoginLinks {
       },
       "attribute": "username",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     }
   }; }
   static get elementRef() { return "hostElement"; }

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

@@ -0,0 +1,55 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class PnMarketwebSiteheaderLoginMypageButton {
+  constructor() {
+    this.label = 'Mina sidor!';
+  }
+  render() {
+    return (h(Host, null,
+      h("pn-button", { href: this.myPageUrl }, this.label)));
+  }
+  static get is() { return "pn-marketweb-siteheader-login-mypage-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-mypage-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-mypage-button.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "'Mina sidor!'"
+    },
+    "myPageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "my-page-url",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -17,6 +17,8 @@ export class PnMarketwebSiteheaderLogin {
       mainMenuButton: '',
       menuStartButton: '',
       profileSelectionFlyoutHeading: '',
+      loginButtonText: '',
+      loginPreamble: '',
     };
     this.siteUrl = '';
     this.emitEvents = true;
@@ -33,6 +35,7 @@ export class PnMarketwebSiteheaderLogin {
     this.username = this.fullname;
   }
   componentWillLoad() {
+    console.log('env: ', this.environment);
     const userInfo = this.loggedin && this.fullname ? { given_name: this.fullname } : null;
     headerState.loginManager = new MarketWebLoginManager({
       endpoint: this.endpoint,
@@ -154,9 +157,10 @@ export class PnMarketwebSiteheaderLogin {
     }
     return (h(Host, Object.assign({}, hostElementAttribute),
       h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" },
-        !this.loggedin && h("pn-marketweb-siteheader-login-button", { label: 'test console' }),
-        !this.loggedin && h("pn-marketweb-siteheader-login-button", { active: true, label: 'test redirect' }),
-        this.loggedin && this.showProfileSelection ? (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, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username })))));
+        this.environment !== 'production' && !this.loggedin && h("pn-marketweb-siteheader-login-button", { label: /* this.i18n?.loginButtonText */ 'login check' }),
+        this.environment !== 'production' && this.loggedin && h("pn-marketweb-siteheader-login-mypage-button", { myPageUrl: "https://account.postnord.com/secure/profile" }),
+        this.loggedin && this.showProfileSelection ? (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, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username })),
+        this.environment !== 'production' && h("p", null, "L\u00E4s mer om v\u00E5ra inloggade tj\u00E4nster och hur du anv\u00E4nder dem"))));
   }
   static get is() { return "pn-marketweb-siteheader-login"; }
   static get originalStyleUrls() { return {
@@ -221,7 +225,7 @@ export class PnMarketwebSiteheaderLogin {
         "tags": [],
         "text": ""
       },
-      "defaultValue": "{\n    searchlabel: '',\n    searchplaceholder: '',\n    searchbuttontext: '',\n    menuHomeButton: '',\n    menuGoBackButton: '',\n    mainMenuButton: '',\n    menuStartButton: '',\n    profileSelectionFlyoutHeading: '',\n  } as SiteHeaderI18N"
+      "defaultValue": "{\n    searchlabel: '',\n    searchplaceholder: '',\n    searchbuttontext: '',\n    menuHomeButton: '',\n    menuGoBackButton: '',\n    mainMenuButton: '',\n    menuStartButton: '',\n    profileSelectionFlyoutHeading: '',\n    loginButtonText: '',\n    loginPreamble: '',\n  } as SiteHeaderI18N"
     },
     "siteUrl": {
       "type": "string",
@@ -351,6 +355,23 @@ export class PnMarketwebSiteheaderLogin {
       "attribute": "check-user-logged-in-state-interval",
       "reflect": false,
       "defaultValue": "0"
+    },
+    "environment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "environment",
+      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -87,6 +87,29 @@ pn-marketweb-siteheader .siteheader-row > pn-marketweb-siteheader-search {
 pn-marketweb-siteheader pn-spinner {
   display: none;
 }
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content {
+  max-width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  padding: 4rem;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content pn-button {
+  width: 100%;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content pn-marketweb-siteheader-login-links::before,
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content p::before {
+  display: block;
+  content: "";
+  height: 2px;
+  background: #F9F8F8;
+  width: 100%;
+  margin-bottom: 2.4rem;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content p {
+  font-size: 1.4rem;
+  color: #005D92;
+}
 pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-container {
   display: none;
 }
@@ -360,6 +383,9 @@ header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav
   background-color: #00A0D6;
   text-decoration: none;
 }
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-marketweb-siteheader-login-linklist ul li a {
+  color: #005D92;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header [data-level="1"] pn-mainnav-link pn-icon.first-level_arrow svg > path {
   fill: #FFFFFF;
 }

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

@@ -1,7 +1,7 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch, } from '@stencil/core';
+import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 import { FetchHelper } from '../../../globals/FetchHelper';
 import { MarketWebContextService } from '../../../globals/MarketWebContextService';
-import { state as headerState } from "./pn-marketweb-siteheader-store";
+import { state as headerState } from './pn-marketweb-siteheader-store';
 import { translations } from './translations';
 export class PnMarketwebSiteheader {
   constructor() {
@@ -367,7 +367,7 @@ export class PnMarketwebSiteheader {
               })),
               h("div", { slot: "footer", class: "siteheader-menu-footer" },
                 h("slot", { name: "menu-footer-cta" }),
-                this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { emitEvents: false, siteUrl: this.siteDefinition.url, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
+                this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { emitEvents: false, siteUrl: this.siteDefinition.url, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection, environment: this.environment })),
                 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) }))))),
                 !this.hideSiteSelector && (h("pn-site-selector", { language: this.language },
                   this.gotData && ((_e = this.siteSelector) === null || _e === void 0 ? void 0 : _e.currentSiteTitle) && (h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription })),