@postnord/pn-marketweb-components 2.0.19 → 2.0.22

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

@@ -0,0 +1,319 @@
+import { Component, Prop, h, State, Element, Watch, Event, Host } from "@stencil/core";
+import { MarketWebLoginManager } from "../../../globals/MarketWebLoginManager";
+export class PnMarketwebSiteheaderProfileSelection {
+  constructor() {
+    /** Specifies which endpoint domain we should load from */
+    this.endpoint = "";
+    /** Access token passed from backend */
+    this.token = "";
+    this.emitEvents = true;
+    // Login dialog
+    this.loginDialog = null;
+    /** User Fullname */
+    this.fullname = "";
+    this.loggedin = false;
+    this.loginManager = null;
+    this.toggleButtonText = "";
+    this.username = this.fullname;
+  }
+  componentWillLoad() {
+    const userInfo = this.loggedin && this.fullname ? { given_name: this.fullname } : null;
+    this.loginManager = new MarketWebLoginManager({ endpoint: this.endpoint, eventTarget: this.hostElement, userInfo });
+    this.hostElement["loginmanager"] = this.loginManager;
+    if (this.token) {
+      this.loginManager.registerToken(this.token, 'backend');
+    }
+    else if (this.emitEvents) { // The primary login instance
+      this.loginManager.invalidateTokenOfType('backend');
+    }
+    this.hostElement.addEventListener(this.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
+    this.init();
+    this.setUserName();
+    this.setToggleButtonText();
+  }
+  async init() {
+    this.toggleButtonText = this.loginDialog.loginMenuLinkText;
+    this.loginManager.init(this.emitEvents);
+    this.setToggleButtonText();
+  }
+  setUserName() {
+    const userInfo = this.loginManager.getUserInfo();
+    let name = "";
+    if (!this.loggedin || !userInfo) {
+      this.username = name;
+    }
+    if (userInfo && userInfo.given_name) {
+      name = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : "");
+    }
+    if (!name && userInfo && userInfo.email) {
+      name = userInfo.email;
+    }
+    if (!name && this.fullname) {
+      name = this.fullname;
+    }
+    this.username = name;
+  }
+  setToggleButtonText() {
+    if (this.loggedin) {
+      this.toggleButtonText = this.username;
+      if (!this.toggleButtonText) {
+        this.toggleButtonText = this.loginDialog.loggedInButtonText;
+      }
+    }
+    else {
+      this.toggleButtonText = this.loginDialog.loginMenuLinkText;
+    }
+  }
+  onLoginStateChange(e) {
+    if (this.loggedin !== e.detail && this.emitEvents) {
+      this.loggedin = e.detail;
+      this.loginStateChange.emit({ loggedIn: this.loggedin, token: this.loginManager.getToken() });
+      this.setUserName();
+      this.setToggleButtonText();
+    }
+  }
+  uniqueId(text) {
+    return "loginlink-" + text.replace(/[^A-Za-z0-9.\\\/]/igm, "") + "-" + (this.emitEvents ? "1" : "2");
+  }
+  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;
+  }
+  render() {
+    var _a, _b, _c;
+    if (!this.loginDialog) {
+      return;
+    }
+    let hostElementAttribute = {
+      username: null
+    };
+    if (this.username) {
+      hostElementAttribute.username = this.username;
+    }
+    return (h(Host, Object.assign({}, hostElementAttribute),
+      h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, (!this.loginDialog.overrideLoginMenu) ?
+        h("div", { "data-loggedin": this.loggedin + '' }, (!this.loggedin) ?
+          h("div", null, (_a = this.loginDialog.loginTitle) !== null && _a !== void 0 ? _a : h("strong", null, this.loginDialog.loginTitle),
+            ((_b = this.loginDialog.loginMenuLinks) === null || _b === void 0 ? void 0 : _b.length) > 0 ?
+              h("ul", null, this.loginDialog.loginMenuLinks.map((link, i) => {
+                const href = (i === 0 && !link.href) ? this.loginManager.getLoginUrl() : link.href;
+                return (h("li", null,
+                  h("pn-button", Object.assign({ href: href, id: this.uniqueId(link.linkText) }, this.linkAppearanceAttributes(link), (link.openInNewWindow && { target: '_blank' })), link.linkText)));
+              }))
+              : (h("ul", null,
+                h("li", null,
+                  h("pn-button", { href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl), target: "_top" }, this.loginDialog.loginLinkText)),
+                h("li", null,
+                  h("pn-button", { href: this.loginDialog.registerUrl, target: "_top", appearance: "light", variant: "outlined" }, this.loginDialog.createLoginLinkText)))))
+          :
+            h("div", null,
+              h("ul", null, this.loginDialog.loggedInLinks.map((link) => {
+                const isLogoutLink = link.href.indexOf('logout') !== -1;
+                const href = (isLogoutLink) ? this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', '')) : link.href;
+                return (h("li", null,
+                  h("pn-button", Object.assign({ href: href, id: this.uniqueId(link.linkText) }, (link.openInNewWindow && { target: '_blank' }), this.linkAppearanceAttributes(link), { onClick: () => { if (isLogoutLink) {
+                      this.loginManager.clearUserData();
+                    } } }), link.linkText)));
+              }))))
+        :
+          h("div", null,
+            h("ul", null, (_c = this.loginDialog.loginMenuLinks) === null || _c === void 0 ? void 0 : _c.map(link => h("li", null,
+              h("a", { href: link.href, target: link.openInNewWindow ? "_blank" : "_self", class: "btn btn-link" }, link.linkText))))))));
+  }
+  static get is() { return "pn-marketweb-siteheader-profileselection"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-marketweb-siteheader-profileselection.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-marketweb-siteheader-profileselection.css"]
+  }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies which endpoint domain we should load from"
+      },
+      "attribute": "endpoint",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Access token passed from backend"
+      },
+      "attribute": "token",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "i18n": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "i-1-8n",
+      "reflect": false
+    },
+    "emitEvents": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "emit-events",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "loginDialog": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "LoginDialog",
+        "resolved": "LoginDialog",
+        "references": {
+          "LoginDialog": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "fullname": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User Fullname"
+      },
+      "attribute": "fullname",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "loggedin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loggedin",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "loginManager": {},
+    "toggleButtonText": {},
+    "username": {}
+  }; }
+  static get events() { return [{
+      "method": "loginStateChange",
+      "name": "loginStateChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "i18n",
+      "methodName": "init"
+    }, {
+      "propName": "loginDialog",
+      "methodName": "init"
+    }]; }
+}

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

@@ -41,7 +41,7 @@ export class PnMarketwebSiteheaderSearch {
     if (!data || !data.hits || !data.hits.length) {
       return;
     }
-    const suggestions = data.hits.map((item) => {
+    const suggestions = data.hits.filter(item => item.type === "editorial").map((item) => {
       return item.query;
     });
     // Store query in store

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

@@ -51,7 +51,7 @@ const PrimaryTemplate = ({ ...args }) => {
   hide-search="false"
   hide-login="false"
   cache="false"
-  
+  autocomplete-endpoint="http://localhost:51444/find_v2/_autocomplete"
   session-forward="true">
   <a href="" class="header-cart" slot="toprightend" style="align-self:center;position:relative;text-decoration:none;">
     <span>Varukorg</span>
@@ -69,7 +69,7 @@ Content that is higher than 100% viewport height
 -->
 `;
 };
-//   autocomplete-endpoint="http://localhost:51444/find_v2/_autocomplete"
+//   
 export const Primary = PrimaryTemplate.bind({});
 Primary.args = {
   market : "se",
@@ -192,7 +192,7 @@ LoggedIn.args = {
   market : "se",
   language: 'sv',
   endpoint: 'https://com-integration.postnord.com',
-  token: '441c4a692237f6baa82459431400cb39ac4c07b70116ebd8f5c9df3',
+  token: '26be29f67598bb2ee0530ac63c938727d703262646e521b67fe9751',
 };
 
 const BusinessUserLoggedInTemplate = ({ ...args }) => {

package/collection/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.css

@@ -19,6 +19,7 @@ pn-customernumber-selector-option:last-of-type {
 }
 .customernumberoption:hover, .customernumberoption:focus, .customernumberoption:active {
   background: #E0F8FF;
+  text-decoration: none;
 }
 
 .customernumberoption-text {

package/collection/components/widgets/pn-find-price/pn-find-price-result.js

@@ -9,10 +9,6 @@ export class PnfindPriceResult {
     this.showMeasurement = false;
     this.weightText = "";
     this.linkId = '';
-    this.usp = {
-      Billigast: h("pn-titletag", { slot: "Billigast", icon: "box-label" }, this.item.highestrankusp),
-      Snabbast: h("pn-titletag", { slot: "Snabbast", icon: "box-label", color: "blue700" }, this.item.highestrankusp)
-    };
   }
   componentWillLoad() {
     this.composeItems();
@@ -38,7 +34,11 @@ export class PnfindPriceResult {
           (h("h2", null,
             h("a", { href: this.item.infopagelink, target: "_blank" }, this.item.name))) :
           (h("h2", null, this.item.name)),
-        this.usp[this.item.highestrankusp]),
+        (this.item.highestrankusp === "Snabbast") ?
+          (h("pn-titletag", { slot: "Snabbast", icon: "bolt", color: "blue700" }, this.item.highestrankusp))
+          : (this.item.highestrankusp === "Billigast") ?
+            (h("pn-titletag", { slot: "Billigast", icon: "box-label", color: "green700" }, this.item.highestrankusp))
+            : null),
       h("div", { slot: "content" },
         h("div", { class: "content" },
           (this.item.description) ? (h("div", { class: "description" }, this.description.map((desc) => (h("li", null, desc))))) : null,
@@ -202,22 +202,6 @@ export class PnfindPriceResult {
       "attribute": "show-measurement",
       "reflect": false,
       "defaultValue": "false"
-    },
-    "usp": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{ Billigast: any; Snabbast: any; }",
-        "resolved": "{ Billigast: any; Snabbast: any; }",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "{\n     Billigast : <pn-titletag slot=\"Billigast\" icon=\"box-label\">{this.item.highestrankusp}</pn-titletag>,\n     Snabbast :  <pn-titletag slot=\"Snabbast\" icon=\"box-label\" color=\"blue700\">{this.item.highestrankusp}</pn-titletag>\n  }"
     }
   }; }
   static get states() { return {

package/collection/components/widgets/pn-find-price/pn-find-price.js

@@ -80,7 +80,11 @@ export class PnfindPrice {
     weightFilteredData.sort((a, b) => {
       var ra = a.rank ? a.rank : 10000;
       var rb = b.rank ? b.rank : 10000;
-      return (ra - rb);
+      var ua = a.highestrankusp ? a.highestrankusp : "z";
+      var ub = b.highestrankusp ? b.highestrankusp : "z";
+      const compareUsp = ua.localeCompare(ub);
+      const compareRank = ra - rb;
+      return compareUsp || compareRank;
     });
     this.filteredItems = weightFilteredData;
   }

package/collection/components/widgets/pn-product-card/pn-product-card.css

@@ -44,17 +44,17 @@ pn-product-card [slot=title] h2 > a {
 pn-product-card [slot=title] h2 > a::after {
   content: "" !important;
 }
-pn-product-card [slot=title] [slot=note] {
+pn-product-card [slot=note] {
   margin-top: 1em;
   margin-bottom: 1em;
 }
-pn-product-card [slot=title] [slot=additionalUSP] {
+pn-product-card [slot=additionalUSP] {
   display: flex;
 }
-pn-product-card [slot=title] [slot=additionalUSP] :first-child {
+pn-product-card [slot=additionalUSP] :first-child {
   margin-left: 0em;
 }
-pn-product-card [slot=title] [slot=additionalUSP] span {
+pn-product-card [slot=additionalUSP] span {
   margin-left: 1em;
   background: #D3CECB;
   color: #2D2013;
@@ -64,7 +64,7 @@ pn-product-card [slot=title] [slot=additionalUSP] span {
   margin-top: 0.5em;
   font-size: 0.75em;
 }
-pn-product-card [slot=title] > pn-illustration {
+pn-product-card > pn-illustration {
   min-width: 8rem;
   width: 8rem;
   height: 8rem;
@@ -77,7 +77,7 @@ pn-product-card [slot=title] > pn-illustration {
   border-radius: 100%;
 }
 @media screen and (min-width: 36em) {
-  pn-product-card [slot=title] > pn-illustration {
+  pn-product-card > pn-illustration {
     box-shadow: none;
     top: 1.6rem;
     right: 1.6rem;
@@ -86,26 +86,26 @@ pn-product-card [slot=title] > pn-illustration {
   }
 }
 @media screen and (min-width: 48em) {
-  pn-product-card [slot=title] > pn-illustration {
+  pn-product-card > pn-illustration {
     position: static;
     top: auto;
     right: auto;
     margin-right: 3rem;
   }
 }
-pn-product-card [slot=title] .cardcontent {
+pn-product-card .cardcontent {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
 }
 @media screen and (min-width: 48em) {
-  pn-product-card [slot=title] .cardcontent {
+  pn-product-card .cardcontent {
     flex-direction: row;
     gap: 1.6rem;
   }
 }
-pn-product-card [slot=title] [slot=cardprice] {
+pn-product-card [slot=cardprice] {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -113,48 +113,48 @@ pn-product-card [slot=title] [slot=cardprice] {
   flex-grow: 1;
 }
 @media screen and (min-width: 36em) {
-  pn-product-card [slot=title] [slot=cardprice] {
+  pn-product-card [slot=cardprice] {
     flex-direction: row;
     justify-content: space-between;
   }
 }
 @media screen and (min-width: 48em) {
-  pn-product-card [slot=title] [slot=cardprice] {
+  pn-product-card [slot=cardprice] {
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
   }
 }
-pn-product-card [slot=title] [slot=mobiledownload] {
+pn-product-card [slot=mobiledownload] {
   margin-top: 1rem;
   white-space: nowrap;
   text-align: center;
   display: flex;
   flex-direction: column;
 }
-pn-product-card [slot=title] [slot=mobiledownload] #riktiga {
+pn-product-card [slot=mobiledownload] #riktiga {
   order: 4;
   margin-top: 1em;
 }
-pn-product-card [slot=title] [slot=mobiledownload] #riktiga > div > a::after {
+pn-product-card [slot=mobiledownload] #riktiga > div > a::after {
   content: "" !important;
 }
-pn-product-card [slot=title] [slot=mobiledownload] .riktigaAndroidImg {
+pn-product-card [slot=mobiledownload] .riktigaAndroidImg {
   width: 6em;
   margin: 0.5em;
 }
-pn-product-card [slot=title] [slot=mobiledownload] .riktigaAppleImg {
+pn-product-card [slot=mobiledownload] .riktigaAppleImg {
   width: 5.6em;
   margin: 0.5em;
 }
-pn-product-card [slot=title] [slot=mobiledownload] a {
+pn-product-card [slot=mobiledownload] a {
   text-decoration: none;
   color: #005D92;
 }
-pn-product-card [slot=title] [slot=mobiledownload] a h3 {
+pn-product-card [slot=mobiledownload] a h3 {
   text-decoration: underline;
 }
-pn-product-card [slot=title] [slot=servicepoint] {
+pn-product-card [slot=servicepoint] {
   flex-direction: column;
   justify-content: center;
   flex-grow: 2;
@@ -162,32 +162,32 @@ pn-product-card [slot=title] [slot=servicepoint] {
   text-align: center;
 }
 @media screen and (min-width: 36em) {
-  pn-product-card [slot=title] [slot=servicepoint] {
+  pn-product-card [slot=servicepoint] {
     flex-direction: row;
     justify-content: space-between;
   }
 }
 @media screen and (min-width: 48em) {
-  pn-product-card [slot=title] [slot=servicepoint] {
+  pn-product-card [slot=servicepoint] {
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
   }
 }
-pn-product-card [slot=title] .details {
+pn-product-card .details {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
 }
-pn-product-card [slot=title] .info {
+pn-product-card .info {
   display: flex;
   justify-content: space-between;
   flex-grow: 1;
   flex-flow: wrap;
   padding: 0 1em 0 0;
 }
-pn-product-card [slot=title] .info > * {
+pn-product-card .info > * {
   min-width: 6em;
   margin: 0.5em 1em 0.5em 0;
 }

package/custom-elements/index.d.ts

@@ -128,6 +128,12 @@ export const PnMarketwebSiteheaderLogin: {
   new (): PnMarketwebSiteheaderLogin;
 };
 
+interface PnMarketwebSiteheaderProfileselection extends Components.PnMarketwebSiteheaderProfileselection, HTMLElement {}
+export const PnMarketwebSiteheaderProfileselection: {
+  prototype: PnMarketwebSiteheaderProfileselection;
+  new (): PnMarketwebSiteheaderProfileselection;
+};
+
 interface PnMarketwebSiteheaderSearch extends Components.PnMarketwebSiteheaderSearch, HTMLElement {}
 export const PnMarketwebSiteheaderSearch: {
   prototype: PnMarketwebSiteheaderSearch;