@postnord/pn-marketweb-components 2.0.3-beta6 → 2.0.6-beta1

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 {

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

@@ -1,41 +1,57 @@
 export 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',
   }

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

@@ -10,13 +10,14 @@ pn-product-pricelist .heading {
   margin-bottom: 1rem;
 }
 pn-product-pricelist .content,
-pn-product-pricelist .weightselection {
+pn-product-pricelist .weightselection,
+pn-product-pricelist .resultlist {
   max-width: 50em;
-  margin: 0 auto 1em;
+  margin: 0 auto 1.6rem;
 }
 pn-product-pricelist .weightoption {
   display: flex;
-  gap: 1em;
+  gap: 1.6rem;
 }
 pn-product-pricelist .weightoption-input {
   width: 5em;

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

@@ -2,10 +2,11 @@ import { Component, h, Prop, State, Host, Watch } from "@stencil/core";
 import { translations, markets } from "./pn-product-pricelist-translations";
 import { weights } from "./data.js";
 import { convertFileFromStream } from "../../../globals/shared/productprice/convert.js";
-import { state } from "./pn-product-pricelist-store";
+// import { state } from "./pn-product-pricelist-store";
+import { state } from "../pn-find-price/pn-find-price-store";
 export class PnFindProductPricelist {
   constructor() {
-    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 = "";
@@ -89,7 +90,6 @@ export class PnFindProductPricelist {
         h("slot", null)),
       this.loading ? (h("pn-spinner", null)) : null,
       (this.postagetype.value && weights[this.postagetype.value]) ? (h("div", { class: "weightselection" },
-        (state.i18n.sizeheading) ? (h("div", { class: "heading" }, state.i18n.sizeheading)) : null,
         h("div", { class: "weightoption" },
           h("div", { class: "weightoption-input" },
             h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: state.i18n.weightlabel, value: this.weightvalue, onChange: (e) => {
@@ -124,7 +124,7 @@ export class PnFindProductPricelist {
               return (h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
             })))))) : null,
       h("div", { class: "resultlist", "data-list-count": this.filteredItems.length }, this.filteredItems.map((item) => (h("div", null,
-        h("pn-product-pricelist-result", { item: item })))))));
+        h("pn-find-price-result", { item: item })))))));
   }
   static get is() { return "pn-product-pricelist"; }
   static get originalStyleUrls() { return {
@@ -150,7 +150,7 @@ export class PnFindProductPricelist {
       },
       "attribute": "source",
       "reflect": false,
-      "defaultValue": "\"https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx\""
+      "defaultValue": "\"https://com-integration.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx\""
     },
     "language": {
       "type": "string",

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

@@ -26,10 +26,10 @@ const Template = ({ ...args }) => {
 
 export const Primary = Template.bind({});
 Primary.args = {
-  heading: '1:a-klassbrev inrikes',
-  description: '1:a-klassbrev kan väga upp till 2 kg och delas normalt ut första alternativt andra dagen dagen efter att det lämnats. För att skicka ett 1:a-klassbrev behöver du vara avtalskund hos oss.',
-  source: 'https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx',
+  heading: '',
+  description: '',
+  source: 'https://com-integration.postnord.com/globalassets/global/prices/sv-findprice-1-PN.xlsx',
   language: 'sv',
   market: 'se',
-  productid: 'registered10000'
+  productid: 'letter'
 };