@postnord/pn-marketweb-components 2.0.3-beta4 → 2.0.5

package/cjs/pn-product-pricelist.cjs.entry.js

@@ -3,48 +3,65 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3e27c79.js');
+const data = require('./data-e77c1ada.js');
 const convert = require('./convert-362ef5e6.js');
-const pnProductPricelistStore = require('./pn-product-pricelist-store-86310b5a.js');
+const pnFindPriceStore = require('./pn-find-price-store-6aab7fd0.js');
 require('./index-28bbc937.js');
 
 const translations = {
   'sv': {
-    'maxweightlabel': 'Maxvikt',
+    'componentheading': 'Våra priser och villkor för inrikesförsändelser för dig som direktbetalande kund?',
+    'deliveryscopeheading': 'Endast leveranser inom Sverige',
+    'resultlistheading': 'Några bra alternativ för dig',
     'weightlabel': 'Vikt',
+    'maxweightlabel': 'Maxvikt',
     'maxmeasurementlabel': 'Maxvolym',
-    'sizeheading': 'Hur mycket väger det?',
-    'senddirectcta': 'Köp frakt via Skicka Direkt',
-    'stampshopcta': 'Köp frimärken via vår webshop',
+    'senddirectcta': 'Köp online',
+    'stampshopcta': 'Köp frimärken',
+    'message': '*Vid köp hos valfritt ombud',
+    'servicePointHeader': 'Eller hitta närmaste serviceställe',
+    'servicePointLink': 'Sök serviceställe eller brevlåda'
   },
   'en': {
-    'maxweightlabel': 'Max weight',
+    'componentheading': 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',
+    'deliveryscopeheading': 'Deliveries within Sweden only',
+    'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Weight',
+    'maxweightlabel': 'Max weight',
     'maxmeasurementlabel': 'Maximum measurement',
-    'sizeheading': 'How much does it weigh?',
-    'senddirectcta': 'Buy shipping in Send Direct',
-    'stampshopcta': 'Order home stamps from the webshop',
+    'senddirectcta': 'Buy Online',
+    'stampshopcta': 'Buy Stamps',
+    'message': 'When buying from any agent',
+    'servicePointHeader': 'Or find nearest service point',
+    'servicePointLink': 'Search letter-box or service point'
   },
   'da': {
-    'maxweightlabel': 'Max vægt',
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Kun leveringer indenfor Sverige',
+    'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Vægt',
+    'maxweightlabel': 'Max vægt',
     'maxmeasurementlabel': 'Maks. Volumen',
-    'sizeheading': 'How much does it weigh?',
     'senddirectcta': 'Buy shipping in Send Direct',
     'stampshopcta': 'Order home stamps from the webshop',
   },
   'no': {
-    'maxweightlabel': 'Maks vekt',
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Kun leveranser innen Sverige',
+    'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Vekt',
+    'maxweightlabel': 'Maks vekt',
     'maxmeasurementlabel': 'Maks volum',
-    'sizeheading': 'How much does it weigh?',
     'senddirectcta': 'Buy shipping in Send Direct',
     'stampshopcta': 'Order home stamps from the webshop',
   },
   'fi': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Toimitukset vain Ruotsin sisällä',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Paino',
     'maxweightlabel': 'Max paino',
-    'weightlabel': 'Piano',
     'maxmeasurementlabel': 'Max äänenvoimakkuus',
-    'sizeheading': 'How much does it weigh?',
     'senddirectcta': 'Buy shipping in Send Direct',
     'stampshopcta': 'Order home stamps from the webshop',
   }
@@ -64,44 +81,12 @@ const markets = {
   }
 };
 
-const weights = {
-  "letter": [
-    { name: "50g",   abbreviation: 'g', value: 50 },
-    { name: "100g",  abbreviation: 'g', value: 100 },
-    { name: "250g",  abbreviation: 'g', value: 250 },
-    { name: "500g",  abbreviation: 'g', value: 500 },
-    { name: "1kg",   abbreviation: 'kg', value: 1 },
-    { name: "2kg",   abbreviation: 'kg', value: 2 },
-  ],
-  "parcel": [
-    { name: "1kg",   abbreviation: 'kg', value: 1 },
-    { name: "2kg",   abbreviation: 'kg', value: 2 },
-    { name: "3kg",   abbreviation: 'kg', value: 3 },
-    { name: "4kg",   abbreviation: 'kg', value: 4 },
-    { name: "5kg",   abbreviation: 'kg', value: 5 },
-    { name: "6kg",   abbreviation: 'kg', value: 6 },
-    { name: "7Kg",   abbreviation: 'kg', value: 7 },
-    { name: "8kg",   abbreviation: 'kg', value: 8 },
-    { name: "9kg",   abbreviation: 'kg', value: 9 },
-    { name: "10kg",  abbreviation: 'kg', value: 10 },
-    { name: "11kg",  abbreviation: 'kg', value: 11 },
-    { name: "12kg",  abbreviation: 'kg', value: 12 },
-    { name: "13kg",  abbreviation: 'kg', value: 13 },
-    { name: "14kg",  abbreviation: 'kg', value: 14 },
-    { name: "15kg",  abbreviation: 'kg', value: 15 },
-    { name: "16kg",  abbreviation: 'kg', value: 16 },
-    { name: "17kg",  abbreviation: 'kg', value: 17 },
-    { name: "18kg",  abbreviation: 'kg', value: 18 },
-    { name: "20kg",  abbreviation: 'kg', value: 20 },    
-  ]
-};
-
-const pnProductPricelistCss = "pn-product-pricelist pn-spinner{margin:1em auto}pn-product-pricelist h2,pn-product-pricelist .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-product-pricelist .content,pn-product-pricelist .weightselection{max-width:50em;margin:0 auto 1em}pn-product-pricelist .weightoption{display:-ms-flexbox;display:flex;gap:1em}pn-product-pricelist .weightoption-input{width:5em;position:relative;display:none}pn-product-pricelist .weightoption-input input::-webkit-outer-spin-button,pn-product-pricelist .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-product-pricelist .weightoption-input-abbreviation{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-product-pricelist .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;align-self:flex-end;position:relative;top:0.5em}pn-product-pricelist .weightoption-range input{width:calc(100% - 1.5em)}pn-product-pricelist .weightoption-range datalist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-product-pricelist .resultlist:not([data-list-count=\"0\"]){margin-top:2em}";
+const pnProductPricelistCss = "pn-product-pricelist pn-spinner{margin:1em auto}pn-product-pricelist h2,pn-product-pricelist .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-product-pricelist .content,pn-product-pricelist .weightselection,pn-product-pricelist .resultlist{max-width:50em;margin:0 auto 1.6rem}pn-product-pricelist .weightoption{display:-ms-flexbox;display:flex;gap:1.6rem}pn-product-pricelist .weightoption-input{width:5em;position:relative;display:none}pn-product-pricelist .weightoption-input input::-webkit-outer-spin-button,pn-product-pricelist .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-product-pricelist .weightoption-input-abbreviation{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-product-pricelist .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;align-self:flex-end;position:relative;top:0.5em}pn-product-pricelist .weightoption-range input{width:calc(100% - 1.5em)}pn-product-pricelist .weightoption-range datalist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-product-pricelist .resultlist:not([data-list-count=\"0\"]){margin-top:2em}";
 
 let PnFindProductPricelist = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.source = "https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx";
+    this.source = "https://com-integration.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx";
     this.language = "sv";
     this.market = "se";
     this.productid = "";
@@ -119,10 +104,10 @@ let PnFindProductPricelist = class {
   }
   setState() {
     if (this.market) {
-      pnProductPricelistStore.state.market = markets[this.market];
+      pnFindPriceStore.state.market = markets[this.market];
     }
     if (this.language && translations[this.language]) {
-      pnProductPricelistStore.state.i18n = translations[this.language];
+      pnFindPriceStore.state.i18n = translations[this.language];
     }
   }
   async getDataSource() {
@@ -155,11 +140,11 @@ let PnFindProductPricelist = class {
       return;
     }
     this.postagetype.value = productIdItems[0].what;
-    if (!weights[this.postagetype.value] || weights[this.postagetype.value].length === 0) {
+    if (!data.weights[this.postagetype.value] || data.weights[this.postagetype.value].length === 0) {
       return;
     }
     if (this.weightvalue === 0) {
-      this.weight = weights[this.postagetype.value][0];
+      this.weight = data.weights[this.postagetype.value][0];
       this.weightvalue = this.weight.value;
     }
     // For letters we use grams. Otherwise we use KG
@@ -180,11 +165,11 @@ let PnFindProductPricelist = class {
     this.gotData = this.filteredItems.length > 0;
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "content" }, index.h("slot", null)), this.loading ? (index.h("pn-spinner", null)) : null, (this.postagetype.value && weights[this.postagetype.value]) ? (index.h("div", { class: "weightselection" }, (pnProductPricelistStore.state.i18n.sizeheading) ? (index.h("div", { class: "heading" }, pnProductPricelistStore.state.i18n.sizeheading)) : null, index.h("div", { class: "weightoption" }, index.h("div", { class: "weightoption-input" }, index.h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: pnProductPricelistStore.state.i18n.weightlabel, value: this.weightvalue, onChange: (e) => {
+    return (index.h(index.Host, null, index.h("div", { class: "content" }, index.h("slot", null)), this.loading ? (index.h("pn-spinner", null)) : null, (this.postagetype.value && data.weights[this.postagetype.value]) ? (index.h("div", { class: "weightselection" }, index.h("div", { class: "weightoption" }, index.h("div", { class: "weightoption-input" }, index.h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: pnFindPriceStore.state.i18n.weightlabel, value: this.weightvalue, onChange: (e) => {
         if (e && e.target && e.target.value) {
           const weightNum = parseInt(e.target.value, 10);
           if (!isNaN(weightNum)) {
-            let matchingWeights = weights[this.postagetype.value].filter((x) => {
+            let matchingWeights = data.weights[this.postagetype.value].filter((x) => {
               let weightInGrams = (x.abbreviation === "kg") ? x.value * 1000 : x.value;
               return weightInGrams >= weightNum;
             });
@@ -194,19 +179,19 @@ let PnFindProductPricelist = class {
             }
           }
         }
-      } }), index.h("span", { class: "weightoption-input-abbreviation" }, this.weight.abbreviation)), index.h("div", { class: "weightoption-range" }, index.h("input", { type: "range", id: "weightrange", name: "weightrange", list: "weightlist", value: (!this.weight.value) ? 0 : weights[this.postagetype.value].findIndex((x) => x.value === this.weightvalue), onChange: (e) => {
+      } }), index.h("span", { class: "weightoption-input-abbreviation" }, this.weight.abbreviation)), index.h("div", { class: "weightoption-range" }, index.h("input", { type: "range", id: "weightrange", name: "weightrange", list: "weightlist", value: (!this.weight.value) ? 0 : data.weights[this.postagetype.value].findIndex((x) => x.value === this.weightvalue), onChange: (e) => {
         const value = e.target.value;
-        this.weight = weights[this.postagetype.value][value];
+        this.weight = data.weights[this.postagetype.value][value];
         this.weightvalue = this.weight.value;
       }, min: "0",
       // max={ weights[this.postagetype.value][weights[this.postagetype.value].length - 1].value }
-      max: weights[this.postagetype.value].length - 1 }), index.h("datalist", { id: "weightlist" }, weights[this.postagetype.value].map((weight, weightindex) => {
+      max: data.weights[this.postagetype.value].length - 1 }), index.h("datalist", { id: "weightlist" }, data.weights[this.postagetype.value].map((weight, weightindex) => {
       let labelText = weight.name;
-      if (weights[this.postagetype.value].length > 6) {
-        labelText = (weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.postagetype.value].length - 1) ? weight.name : '';
+      if (data.weights[this.postagetype.value].length > 6) {
+        labelText = (weightindex % 5 === 0 || weightindex === 0 || weightindex === data.weights[this.postagetype.value].length - 1) ? weight.name : '';
       }
       return (index.h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
-    })))))) : null, index.h("div", { class: "resultlist", "data-list-count": this.filteredItems.length }, this.filteredItems.map((item) => (index.h("div", null, index.h("pn-product-pricelist-result", { item: item })))))));
+    })))))) : null, index.h("div", { class: "resultlist", "data-list-count": this.filteredItems.length }, this.filteredItems.map((item) => (index.h("div", null, index.h("pn-find-price-result", { item: item })))))));
   }
   static get watchers() { return {
     "market": ["setState"],

package/cjs/{pn-product-tile_3.cjs.entry.js → pn-product-tile-info_2.cjs.entry.js}

@@ -4,18 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3e27c79.js');
 
-const pnProductTileCss = "pn-product-tile{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:white;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-tile [slot=content] h3{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:0.5em}pn-product-tile>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-tile .tilecontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-tile .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-tile .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;max-width:66.6666666667%;-ms-flex-flow:wrap;flex-flow:wrap}pn-product-tile .info>*{min-width:6em;margin:0.2em 1em 0.2em 0}";
-
-let PnProductTile = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "illustration" }), index.h("div", { class: "tilecontent" }, index.h("div", { class: "details" }, index.h("slot", { name: "content" }), index.h("div", { class: "info" }, index.h("slot", null)), index.h("slot", { name: "note" })), index.h("slot", { name: "price" }))));
-  }
-};
-PnProductTile.style = pnProductTileCss;
-
 const pnProductTileInfoCss = "pn-product-tile-info{-ms-flex-item-align:center;align-self:center}";
 
 let PnProductTileInfo = class {
@@ -44,6 +32,5 @@ let PnProductTilePrice = class {
 };
 PnProductTilePrice.style = pnProductTilePriceCss;
 
-exports.pn_product_tile = PnProductTile;
 exports.pn_product_tile_info = PnProductTileInfo;
 exports.pn_product_tile_price = PnProductTilePrice;

package/cjs/pn-product-tile.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3e27c79.js');
+
+const pnProductTileCss = "pn-product-tile{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:white;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-tile [slot=content] h3{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:0.5em}pn-product-tile>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-tile .tilecontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-tile .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-tile .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;max-width:66.6666666667%;-ms-flex-flow:wrap;flex-flow:wrap}pn-product-tile .info>*{min-width:6em;margin:0.2em 1em 0.2em 0}";
+
+let PnProductTile = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "illustration" }), index.h("div", { class: "tilecontent" }, index.h("div", { class: "details" }, index.h("slot", { name: "content" }), index.h("div", { class: "info" }, index.h("slot", null)), index.h("slot", { name: "note" })), index.h("slot", { name: "price" }))));
+  }
+};
+PnProductTile.style = pnProductTileCss;
+
+exports.pn_product_tile = PnProductTile;

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

@@ -6,6 +6,9 @@
     display: block;
   }
 }
+.siteheader-search pn-search-field > .input-container button {
+  background: #FFFFFF;
+}
 .siteheader-search pn-search-field.button-icon pn-button,
 .siteheader-search pn-button {
   display: inline-flex;

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

@@ -8,6 +8,7 @@ export class PnfindPriceResult {
     this.description = [];
     this.showMeasurement = false;
     this.weightText = "";
+    this.linkId = '';
   }
   componentWillLoad() {
     this.composeItems();
@@ -23,9 +24,10 @@ export class PnfindPriceResult {
       this.description = this.item.description.split("#bullet").filter(x => x !== "");
     }
     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, '')}`;
   }
   render() {
-    return (h(Host, null, h("pn-product-card", null,
+    return (h(Host, null, h("pn-product-card", { "data-productid": this.item.id },
       h("pn-illustration", { slot: "illustration", illustration: this.item.illustration }),
       h("div", { slot: "title" },
         h("h2", null,
@@ -51,8 +53,8 @@ export class PnfindPriceResult {
         this.Usp3 ? (h("span", null, this.Usp3)) : null)) : null,
       this.showMeasurement ? (h("pn-product-card-info", { paket: this.item.maxmått, rulle: this.item.rulle })) : null,
       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, service: this.item.name + "-portal" })) : null,
-        this.item.pricestamps ? (h("pn-product-card-price", { slot: "stampPrice", label: state.i18n.stampshopcta, amount: this.item.pricestamps + '', currency: state.market.currency, url: stampShopUrl, service: this.item.name + "-eshop" })) : null))));
+        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 ? (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' })) : null))));
   }
   static get is() { return "pn-find-price-result"; }
   static get originalStyleUrls() { return {
@@ -66,10 +68,10 @@ export class PnfindPriceResult {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "ProductPriceItm",
-        "resolved": "ProductPriceItm",
+        "original": "ProductPriceItem",
+        "resolved": "ProductPriceItem",
         "references": {
-          "ProductPriceItm": {
+          "ProductPriceItem": {
             "location": "import",
             "path": "./pn-find-price-types"
           }
@@ -87,10 +89,10 @@ export class PnfindPriceResult {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "ProductPriceItm[]",
-        "resolved": "ProductPriceItm[]",
+        "original": "ProductPriceItem[]",
+        "resolved": "ProductPriceItem[]",
         "references": {
-          "ProductPriceItm": {
+          "ProductPriceItem": {
             "location": "import",
             "path": "./pn-find-price-types"
           }
@@ -191,7 +193,8 @@ export class PnfindPriceResult {
     }
   }; }
   static get states() { return {
-    "weightText": {}
+    "weightText": {},
+    "linkId": {}
   }; }
   static get watchers() { return [{
       "propName": "item",

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

@@ -71,7 +71,7 @@ pn-find-price .weightoption-content pn-choice-button ::before {
   font-weight: lighter;
 }
 pn-find-price .resultlist {
-  margin: 3em 0;
+  margin: 3.2rem 0;
 }
 pn-find-price .servicePoint {
   text-align: center;

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

@@ -10,22 +10,23 @@ export class PnfindServiceAndPriceResult {
     this.composeItems();
   }
   composeItems() {
-    this.shownitems = [];
-    if (this.item.pricestamps) {
-      this.shownitems.push(Object.assign(Object.assign({}, this.item), { priceagent: null, pricesenddirect: null }));
-    }
-    if (this.item.priceagent) {
-      this.shownitems.push(Object.assign(Object.assign({}, this.item), { pricestamps: null, pricesenddirect: null }));
-    }
-    if (this.item.pricesenddirect) {
-      this.shownitems.push(Object.assign(Object.assign({}, this.item), { pricestamps: null, priceagent: null }));
-    }
+    this.shownitems = [this.item];
+    // this.shownitems = [];
+    // if (this.item.pricestamps) {
+    //   this.shownitems.push({...this.item, priceagent: null, pricesenddirect: null});
+    // }
+    // if (this.item.priceagent) {
+    //   this.shownitems.push({...this.item, pricestamps: null, pricesenddirect: null});
+    // }
+    // if (this.item.pricesenddirect) {
+    //   this.shownitems.push({...this.item, pricestamps: null, priceagent: null});
+    // }
     // Parcels are always in KG. Letter KG must be converted from grams
-    this.weightText = (this.item.what === "parcel") ? this.item.maxweight + 'kg' :
-      (this.item.what === "letter" && this.item.maxweight > 999) ? Math.round(this.item.maxweight / 1000) + " kg" : this.item.maxweight + " g";
+    // this.weightText = (this.item.what === "parcel") ? this.item.maxweight + 'kg' : 
+    // (this.item.what === "letter" && this.item.maxweight > 999) ? Math.round(this.item.maxweight/1000) + " kg" : this.item.maxweight + " g";
   }
   render() {
-    return (h(Host, null, this.shownitems.map((item) => (h("pn-product-tile", null,
+    return (h(Host, null, this.shownitems.map((item) => (h("pn-product-card", null,
       h("pn-illustration", { slot: "illustration", illustration: item.illustration }),
       h("div", { slot: "content" },
         h("div", { class: "content" },
@@ -33,9 +34,7 @@ export class PnfindServiceAndPriceResult {
           (item.description) ? (h("div", { class: "description" }, item.description)) : null,
           (item.info) ? (h("div", { class: "description" }, item.info)) : null)),
       item.maxweight ? (h("pn-product-tile-info", { label: state.i18n.maxweightlabel, text: this.weightText })) : null,
-      item.maximummeasurements ? (h("pn-product-tile-info", { label: state.i18n.maxmeasurementlabel, text: item.maximummeasurements })) : null,
       item.pricestamps ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.stampshopcta, amount: item.pricestamps + '', currency: state.market.currency })) : null,
-      item.priceagent ? (h("pn-product-tile-price", { slot: "price", label: "", amount: item.priceagent + '', currency: state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx" })) : null,
       item.pricesenddirect ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.senddirectcta, amount: item.pricesenddirect + '', currency: state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null,
       item.note ? (h("small", { slot: "note" },
         h("p", null, item.note))) : null)))));

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

@@ -4,12 +4,12 @@ export class PnProductCardPrice {
     if (!this.amount) {
       return;
     }
-    return (this.url) ? (h(Host, null,
+    return (this.url) ? (h(Host, { id: this.linkid },
       h("div", { class: "price" },
         (this.amount) ? (h("span", null, this.amount)) : null,
         (this.currency) ? (h("span", null, " " + this.currency)) : null),
       (this.note) ? (h("p", null, this.note)) : null,
-      (this.label) ? (h("pn-button", { small: "true", icon: "open-in-new", appearance: "light", href: this.url, target: "_blank", id: this.service.split(" ").join("-").toLocaleLowerCase() }, this.label)) : null)) : (h(Host, null,
+      (this.label) ? (h("pn-button", { small: "true", icon: "open-in-new", appearance: "light", href: this.url, target: "_blank" }, this.label)) : null)) : (h(Host, null,
       h("div", { class: "price" },
         (this.amount) ? (h("span", null, this.amount)) : null,
         (this.currency) ? (h("span", null, this.currency)) : null)));
@@ -123,6 +123,23 @@ export class PnProductCardPrice {
       },
       "attribute": "service",
       "reflect": false
+    },
+    "linkid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "linkid",
+      "reflect": false
     }
   }; }
 }

package/collection/components/widgets/pn-product-pricelist/data.js

@@ -48,6 +48,13 @@ const weights = {
   ]
 };
 
+const fileLocation = "https://com-integration.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx";
 
+const servicePointUrl = "https://www.postnord.se/vara-verktyg/sok-brevlada-eller-servicestalle";
 
-export { postagetypes, weights, deliveryscopes};
+const sendDirectUrl = "https://portal.postnord.com/skickadirekt/";
+
+const stampShopUrl = "https://shop.postnord.se/ebutik/default.aspx";
+
+
+export { postagetypes, weights, deliveryscopes, servicePointUrl, sendDirectUrl, stampShopUrl};

package/collection/components/widgets/pn-product-pricelist/pn-product-pricelist-result.js

@@ -1,44 +1,79 @@
 import { Component, h, Prop, Host, State, Watch } from "@stencil/core";
 import { state } from "./pn-product-pricelist-store";
+import { sendDirectUrl, stampShopUrl } from "./data.js";
 export class PnFindProductPricelistResult {
   constructor() {
     this.item = null;
+    this.description = [];
     this.shownitems = [];
+    this.showMeasurement = false;
     this.weightText = "";
   }
   componentWillLoad() {
     this.composeItems();
   }
   composeItems() {
-    this.shownitems = [];
-    if (this.item.pricestamps) {
-      this.shownitems.push(Object.assign(Object.assign({}, this.item), { priceagent: null, pricesenddirect: null }));
-    }
-    if (this.item.priceagent) {
-      this.shownitems.push(Object.assign(Object.assign({}, this.item), { pricestamps: null, pricesenddirect: null }));
-    }
-    if (this.item.pricesenddirect) {
-      this.shownitems.push(Object.assign(Object.assign({}, this.item), { pricestamps: null, priceagent: null }));
+    if (this.item.description) {
+      this.description = this.item.description.split("#bullet").filter(x => x !== "");
     }
-    // Parcels are always in KG. Letter KG must be converted from grams
-    this.weightText = (this.item.what === "parcel") ? this.item.maxweight + 'kg' :
-      (this.item.what === "letter" && this.item.maxweight > 999) ? Math.round(this.item.maxweight / 1000) + " kg" : this.item.maxweight + " g";
+    this.showMeasurement = (this.item.maxmått !== null) || (this.item.rulle !== null);
+    this.shownitems = [this.item];
+    // if (this.item.pricestamps) {
+    //   this.shownitems.push({...this.item, priceagent: null, pricesenddirect: null});
+    // }
+    // if (this.item.priceagent) {
+    //   this.shownitems.push({...this.item, pricestamps: null, pricesenddirect: null});
+    // }
+    // if (this.item.pricesenddirect) {
+    //   this.shownitems.push({...this.item, pricestamps: null, priceagent: null});
+    // }
+    // // Parcels are always in KG. Letter KG must be converted from grams
+    // this.weightText = (this.item.what === "parcel") ? this.item.maxweight + 'kg' : 
+    // (this.item.what === "letter" && this.item.maxweight > 999) ? Math.round(this.item.maxweight/1000) + " kg" : this.item.maxweight + " g";
   }
   render() {
-    return (h(Host, null, this.shownitems.map((item) => (h("pn-product-tile", null,
-      h("pn-illustration", { slot: "illustration", illustration: item.illustration }),
+    return (h(Host, null, this.shownitems.map((item) => (h("pn-product-card", { "data-productid": item.id },
+      h("pn-illustration", { slot: "illustration", illustration: this.item.illustration }),
+      h("div", { slot: "title" },
+        h("h2", null,
+          item.name,
+          " "),
+        (this.item.highestrankusp) ?
+          (this.item.highestrankusp === "Billigast") ?
+            (h("span", { slot: "Billigast" },
+              this.item.highestrankusp,
+              h("pn-icon", { symbol: "box-label", small: "false", color: "green700" })))
+            : (h("span", { slot: "Snabbast" },
+              this.item.highestrankusp,
+              h("pn-icon", { symbol: "bolt", small: "false", color: "blue700" }))) : null),
       h("div", { slot: "content" },
         h("div", { class: "content" },
-          h("h3", null, item.name),
-          (item.description) ? (h("div", { class: "description" }, item.description)) : null,
-          (item.info) ? (h("div", { class: "description" }, item.info)) : null)),
-      item.maxweight ? (h("pn-product-tile-info", { label: state.i18n.maxweightlabel, text: this.weightText })) : null,
-      item.maximummeasurements ? (h("pn-product-tile-info", { label: state.i18n.maxmeasurementlabel, text: item.maximummeasurements })) : null,
-      item.pricestamps ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.stampshopcta, amount: item.pricestamps + '', currency: state.market.currency })) : null,
-      item.priceagent ? (h("pn-product-tile-price", { slot: "price", label: "", amount: item.priceagent + '', currency: state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx" })) : null,
-      item.pricesenddirect ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.senddirectcta, amount: item.pricesenddirect + '', currency: state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null,
-      item.note ? (h("small", { slot: "note" },
-        h("p", null, item.note))) : null)))));
+          (this.item.description) ? (h("div", { class: "description" }, this.description.map((desc) => (h("li", null, desc))))) : null,
+          (this.item.info) ? (h("div", { class: "description" }, this.item.info)) : null)),
+      this.item.note ? (h("small", { slot: "note" },
+        h("p", null, this.item.note))) : null,
+      this.item.additionalusp ? (h("div", { slot: "additionalUSP" })) : null,
+      this.showMeasurement ? (h("pn-product-card-info", { paket: this.item.maxmått, rulle: this.item.rulle })) : null,
+      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, service: this.item.name + "-portal" })) : null,
+        this.item.pricestamps ? (h("pn-product-card-price", { slot: "stampPrice", label: state.i18n.stampshopcta, amount: this.item.pricestamps + '', currency: state.market.currency, url: stampShopUrl, service: this.item.name + "-eshop" })) : null))
+    // <pn-product-tile>
+    //   <pn-illustration slot="illustration" illustration={ item.illustration }></pn-illustration>
+    //   <div slot="content">
+    //     <div class="content">
+    //       <h3>{item.name}</h3>
+    //       {(item.description) ? (<div class="description">{item.description}</div>) : null}
+    //       {(item.info) ? (<div class="description">{item.info}</div>) : null}
+    //     </div>
+    //   </div>
+    //   { item.maxweight ? (<pn-product-tile-info label={state.i18n.maxweightlabel} text={this.weightText}></pn-product-tile-info>) : null }
+    //   {/* { item.maximummeasurements ? (<pn-product-tile-info label={state.i18n.maxmeasurementlabel} text={item.maximummeasurements}></pn-product-tile-info>) : null } */}
+    //   { item.pricestamps ? (<pn-product-tile-price slot="price" label={state.i18n.stampshopcta} amount={item.pricestamps+''} currency={ state.market.currency }></pn-product-tile-price>) : null }
+    //   {/* { item.priceagent ? (<pn-product-tile-price slot="price" label="" amount={item.priceagent+''} currency={ state.market.currency } url="https://shop.postnord.se/ebutik/default.aspx"></pn-product-tile-price>) : null } */}
+    //   { item.pricesenddirect ? (<pn-product-tile-price slot="price" label={state.i18n.senddirectcta} amount={item.pricesenddirect+''} currency={ state.market.currency } url="https://portal.postnord.com/skickadirekt/"></pn-product-tile-price>) : null }
+    //   { item.note ? (<small slot="note"><p>{item.note}</p></small>) : null } 
+    // </pn-product-tile>
+    ))));
   }
   static get is() { return "pn-product-pricelist-result"; }
   static get originalStyleUrls() { return {
@@ -69,6 +104,22 @@ export class PnFindProductPricelistResult {
       },
       "defaultValue": "null"
     },
+    "description": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
     "shownitems": {
       "type": "unknown",
       "mutable": false,
@@ -89,6 +140,24 @@ export class PnFindProductPricelistResult {
         "text": ""
       },
       "defaultValue": "[]"
+    },
+    "showMeasurement": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-measurement",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {