@postnord/pn-marketweb-components 2.0.20-beta1 → 2.0.23-beta1

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/widgets/pn-find-price/pn-find-price-result.js

@@ -9,6 +9,9 @@ export class PnfindPriceResult {
     this.showMeasurement = false;
     this.weightText = "";
     this.linkId = '';
+    this.shopLabel = '';
+    this.shopUrl = '';
+    this.shopId = '';
   }
   componentWillLoad() {
     this.composeItems();
@@ -25,6 +28,10 @@ export class PnfindPriceResult {
     }
     this.showMeasurement = (this.item.maxmått !== null) || (this.item.rulle !== null);
     this.linkId = `${this.item.id}-${this.item.name.toLocaleLowerCase().replace(/[^a-zA-Z0-9]/g, '')}`;
+    var availableOnline = (this.item.availableonline !== "No");
+    this.shopLabel = availableOnline ? state.i18n.stampshopcta : state.i18n.ombudHeader;
+    this.shopUrl = availableOnline ? stampShopUrl : state.market.servicePoint;
+    this.shopId = availableOnline ? '-stampshop' : '-servicepoint';
   }
   render() {
     return (h(Host, null, h("pn-product-card", { "data-productid": this.item.id },
@@ -54,7 +61,7 @@ export class PnfindPriceResult {
       h("div", { slot: "cardprice" },
         this.item.pricesenddirect ? (h("pn-product-card-price", { slot: "sendDirectPrice", label: state.i18n.senddirectcta, amount: this.item.pricesenddirect + '', currency: state.market.currency, url: sendDirectUrl, linkid: this.linkId + '-portal' })) : null,
         this.item.pricestamps ? ((this.item.name.toLocaleLowerCase() !== "riktiga vykort") ?
-          (h("pn-product-card-price", { slot: "stampPrice", label: state.i18n.stampshopcta, amount: this.item.pricestamps + '', currency: state.market.currency, url: stampShopUrl, linkid: this.linkId + '-stampshop' })) :
+          (h("pn-product-card-price", { slot: "stampPrice", label: this.shopLabel, amount: this.item.pricestamps + '', currency: state.market.currency, url: this.shopUrl, linkid: this.linkId + this.shopId })) :
           (h("pn-product-card-price", { slot: "riktiga", label: state.i18n.riktigaVykort, amount: this.item.pricestamps + '', currency: state.market.currency, url: RiktigaValues["WebUrl"], linkid: this.linkId + '-riktiga' }))) : null),
       h("div", { slot: "servicepoint" }, (this.item.showservicepointlink) ? (h("a", { href: state.market.servicePoint, target: "_blank" },
         h("pn-icon", { symbol: "map-marker", color: "blue700" }),
@@ -206,7 +213,10 @@ export class PnfindPriceResult {
   }; }
   static get states() { return {
     "weightText": {},
-    "linkId": {}
+    "linkId": {},
+    "shopLabel": {},
+    "shopUrl": {},
+    "shopId": {}
   }; }
   static get watchers() { return [{
       "propName": "item",

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

@@ -14,7 +14,8 @@ const { state, onChange } = createStore({
     servicePointHeader: '',
     servicePointLink: '',
     riktigaVykort: '',
-    riktigaVykortMobile: ''
+    riktigaVykortMobile: '',
+    ombudHeader: ''
   },
   market: {
     currency: "",

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

@@ -7,12 +7,13 @@ export const translations = {
     'maxweightlabel': 'Maxvikt',
     'maxmeasurementlabel': 'Maxvolym',
     'senddirectcta': 'Köp online',
-    'stampshopcta': 'Köp frimärken',
+    'stampshopcta': 'Till butiken',
     'message': '*Vid köp hos valfritt ombud',
     'servicePointHeader': 'Eller hitta närmaste serviceställe',
     'servicePointLink': 'Hitta Serviceställe',
-    'riktigaVykort': 'köp Riktiga Vykort',
-    'riktigaVykortMobile': 'Testa Riktiga Vykorts mobilapp'
+    'riktigaVykort': 'Köp Riktiga Vykort',
+    'riktigaVykortMobile': 'Ladda ner appen',
+    'ombudHeader': 'Köp via ombud'
   },
   'en': {
     'componentheading': 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',
@@ -22,12 +23,13 @@ export const translations = {
     'maxweightlabel': 'Max weight',
     'maxmeasurementlabel': 'Maximum measurement',
     'senddirectcta': 'Buy Online',
-    'stampshopcta': 'Buy Stamps',
+    'stampshopcta': 'To the Store',
     'message': 'When buying from any agent',
     'servicePointHeader': 'Find service point',
     'servicePointLink': 'Find service point',
     'riktigaVykort': 'Buy Postcards',
-    'riktigaVykortMobile': 'Try the Real Postcards mobile app'
+    'riktigaVykortMobile': 'Download the app',
+    'ombudHeader': 'Purchase by agent'
   },
   'da': {
     'componentheading': 'Vad vill du skicka?',
@@ -37,11 +39,12 @@ export const translations = {
     'maxweightlabel': 'Max vægt',
     'maxmeasurementlabel': 'Maks. Volumen',
     'senddirectcta': 'Køb Online',
-    'stampshopcta': 'Køb Frimærker',
+    'stampshopcta': 'Til butikken',
     'message': 'When buying from any agent',
     'servicePointHeader': 'Find nærmeste servicested',
     'servicePointLink': 'Find nærmeste servicested',
     'riktigaVykort': 'Køb Riktiga Vykort',
+    'ombudHeader': 'Køb af agent'
   },
   'no': {
     'componentheading': 'Vad vill du skicka?',

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

@@ -58,11 +58,12 @@ export class PnfindPrice {
       return;
     }
     const sizeItemData = deliveryScopeData.filter((x) => x.sizecategory.toLocaleLowerCase() === this.sizecategory.value.toLocaleLowerCase());
-    if (!this.weight) {
+    if (this.weight.value === 0) {
       return;
     }
     const comparisonWeight = this.weight.value <= 20 ? this.weight.value * 1000 : this.weight.value;
-    let weightFilteredData = sizeItemData.filter(x => (x.maxweight <= 20 ? x.maxweight * 1000 : x.maxweight) === comparisonWeight);
+    let weightFilteredData = sizeItemData.filter(x => (x.maxweight <= 20 ? x.maxweight * 1000 : x.maxweight) === comparisonWeight ||
+      x.maxweight.toString() === "-");
     // if no value found select the next available value
     if (weightFilteredData.length === 0 && this.weightvalue !== 0) {
       weightFilteredData = sizeItemData.filter(x => (x.maxweight <= 20 ? x.maxweight * 1000 : x.maxweight) >= comparisonWeight);

package/collection/components/widgets/pn-product-card/pn-product-card-info.js

@@ -5,16 +5,16 @@ export class PnProductCardInfo {
       h("div", { class: "cardinfocontent" }, (this.text) ? (h("pre", { slot: "formatPre" }, this.text)) : null))) : (h(Host, null,
       h("div", { class: "cardinfocontent" },
         (this.paket) ? (h("div", { class: "cardinfocontent-item" },
-          h("strong", null, "Maxm\u00E5tt:"),
-          this.paket.split("/").map((item) => ((item.split(":").length > 0) ?
-            h("p", null,
+          h("strong", null, "Maxm\u00E5tt"),
+          this.paket.split("/").map((item) => ((item.split(":").length > 1) ?
+            (h("p", null,
               h("strong", null, item.split(":")[0] + ": "),
               " ",
-              item.split(":")[1]) :
-            h("p", null, item))))) : null,
+              item.split(":")[1])) :
+            (h("p", null, item)))))) : null,
         (this.rulle) ?
           (h("div", { class: "cardinfocontent-item" },
-            h("strong", null, "Rulle:"),
+            h("strong", null, "Rulle"),
             this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
               h("p", null,
                 h("strong", null, item.split(":")[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;