@postnord/pn-marketweb-components 1.0.3 → 1.0.7

package/esm/pn-find-service-and-price.entry.js

@@ -0,0 +1,242 @@
+import { r as registerInstance, h } from './index-52dc19ca.js';
+import { c as convertFileFromStream } from './convert-b49a0857.js';
+import { s as state } from './pn-find-service-and-price-store-0c7083bd.js';
+import './index-7c277874.js';
+
+const translations = {
+  'sv': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Hit eller dit?',
+    'sizeheading': 'Hur mycket väger det?',
+    'resultlistheading': 'Några utvalda val',
+    'weightlabel': 'Vikt',
+    'maxweightlabel': 'Maxvikt',
+    'maxmeasurementlabel': 'Maxvolym',
+  },
+  'en': {
+    'componentheading': 'What do you want to send?',
+    'deliveryscopeheading': 'Here or there?',
+    'sizeheading': 'How much does it weigh?',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Weight',
+    'maxweightlabel': 'Max weight',
+    'maxmeasurementlabel': 'Maximum measurement',
+  },
+  'da': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Here or there?',
+    'sizeheading': 'How much does it weigh?',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Vægt',
+    'maxweightlabel': 'Max vægt',
+    'maxmeasurementlabel': 'Maks. Volumen',
+  },
+  'no': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Here or there?',
+    'sizeheading': 'How much does it weigh?',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Vekt',
+    'maxweightlabel': 'Maks vekt',
+    'maxmeasurementlabel': 'Maks volum',
+  },
+  'fi': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Here or there?',
+    'sizeheading': 'How much does it weigh?',
+    'resultlistheading': 'Some suitable options for you',
+    'weightlabel': 'Paino',
+    'maxweightlabel': 'Max paino',
+    'maxmeasurementlabel': 'Max äänenvoimakkuus',
+  }
+};
+const markets = {
+  'se': {
+    "currency": "kr",
+  },
+  'dk': {
+    "currency": "dk",
+  },
+  'fi': {
+    "currency": " €",
+  },
+  'no': {
+    "currency": "kr",
+  }
+};
+
+const postagetypes = [
+  { name: "Brev",   value: "letter", illustration: "letterbox-reply-letter-plants" },
+  { name: "Paket",  value: "parcel", illustration: "tracking" }
+];
+
+const deliveryscopes = {
+  "letter": [
+    { name: "Sweden",   value: "sweden", illustration: "letterboxes" },
+    { name: "Abroad",   value: "abroad", illustration: "character-box-letters-globe" },
+    
+  ],
+  "parcel": [
+    { name: "Sweden",   value: "sweden", illustration: "letterboxes" },
+    { name: "Within Europe", value:"withineurope", illustration: "character-box-letters-globe" },
+    { name: "Outside Europe", value:"outsideeurope", illustration: "discover" },
+  ]
+};
+
+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 pnFindServiceAndPriceCss = "pn-find-service-and-price h2,pn-find-service-and-price .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-find-service-and-price .postagetypes,pn-find-service-and-price .deliveryscope{text-align:center;margin-bottom:3rem}pn-find-service-and-price .weightoption{display:-ms-flexbox;display:flex;gap:1em}pn-find-service-and-price .weightoption-input{width:5em;position:relative}pn-find-service-and-price .weightoption-input input::-webkit-outer-spin-button,pn-find-service-and-price .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-find-service-and-price .weightoption-input-abbreviation{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:0.75em;font-weight:500}pn-find-service-and-price .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;align-self:flex-end;position:relative;top:0.5em}pn-find-service-and-price .weightoption-range input{width:calc(100% - 1.5em)}pn-find-service-and-price .weightoption-range datalist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-find-service-and-price .resultlist{margin:3em 0}";
+
+const PnfindServiceAndPrice = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.source = "https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx";
+    this.language = "sv";
+    this.market = "se";
+    this.filteredItems = [];
+    this.postagetype = { value: "", name: "", icon: "" };
+    this.weight = { value: 0, name: "" };
+    this.weightvalue = 0;
+    this.deliveryscope = { value: "", name: "", icon: "" };
+    this.sourceData = { types: [], data: [] };
+  }
+  componentWillLoad() {
+    this.setState();
+    this.getDataSource();
+    window.setTimeout(() => {
+      this.postagetype = postagetypes[1];
+      this.deliveryscope = deliveryscopes[this.postagetype.value][0];
+      this.weight = weights[this.postagetype.value][0];
+      this.weightvalue = this.weight.value;
+    }, 500);
+    // this.filterItems();
+  }
+  async getDataSource() {
+    const req = await fetch(this.source);
+    const reqbody = await req.blob();
+    try {
+      const convertedData = await convertFileFromStream(reqbody);
+      this.sourceData = convertedData;
+    }
+    catch (e) {
+      console.log('Unable to parse data');
+    }
+  }
+  setState() {
+    if (this.market) {
+      state.market = markets[this.market];
+    }
+    if (this.language && translations[this.language]) {
+      state.i18n = translations[this.language];
+    }
+  }
+  filterItems() {
+    var _a;
+    // this.debug = `Postagetype: ${this.postagetype.value}. <br/>Weight: ${ this.weight.value }`;
+    if (!((_a = this.sourceData) === null || _a === void 0 ? void 0 : _a.data)) {
+      console.log('Data has not yet been loaded');
+      return;
+    }
+    if (!this.postagetype) {
+      return;
+    }
+    const typeData = this.sourceData.data.filter((x) => x.what === this.postagetype.value);
+    if (!this.deliveryscope) {
+      return;
+    }
+    const deliveryScopeData = typeData.filter((x) => x.deliveryscope === this.deliveryscope.value);
+    if (!this.weight || !this.weight.value) {
+      return;
+    }
+    // For letters we use grams. Otherwise we use KG
+    const comparisonWeight = (this.weight.abbreviation.toLocaleLowerCase() === "kg" && this.postagetype.value === 'letter') ? this.weight.value * 1000 : this.weight.value;
+    let weightData = deliveryScopeData.filter(x => x.maxweight === comparisonWeight);
+    // In parcels the maxwidths don't necessarily start at 1kg so we fetch any type below the user selected value
+    if (weightData.length === 0) {
+      weightData = deliveryScopeData.filter(x => x.maxweight >= comparisonWeight);
+      if (weightData.length > 0) {
+        // We reverse the result array since the map will take the last unique item instead of the first
+        const uniqueWeightOptions = [...new Map(weightData.reverse().map(item => [item["id"], item])).values()];
+        if (uniqueWeightOptions.length > 0) {
+          weightData = uniqueWeightOptions;
+        }
+      }
+    }
+    this.filteredItems = weightData;
+  }
+  render() {
+    return (h("div", null, h("div", { class: "form" }, (state.i18n.componentheading) ? (h("h2", null, state.i18n.componentheading)) : null, h("div", { class: "postagetypes" }, postagetypes.map((postagetype) => (h("pn-choice-button", { choiceid: postagetype.value, value: postagetype.value, name: "postagetype", type: "radio", checked: postagetype.value === this.postagetype.value, onChange: () => {
+        this.postagetype = postagetypes.filter(x => x.value === postagetype.value)[0];
+        this.weight = weights[this.postagetype.value][0];
+        this.weightvalue = this.weight.value;
+      } }, h("pn-illustration", { illustration: postagetype.illustration }), " ", postagetype.name)))), this.postagetype.value && deliveryscopes[this.postagetype.value] ? (h("div", null, (state.i18n.deliveryscopeheading) ? (h("div", { class: "heading" }, state.i18n.deliveryscopeheading)) : null, h("div", { class: "deliveryscope" }, deliveryscopes[this.postagetype.value].map((deliveryscope) => (h("pn-choice-button", { choiceid: this.postagetype.value + deliveryscope.value, value: deliveryscope.value, name: "deliveryscope", type: "radio", checked: deliveryscope.value === this.deliveryscope.value, onChange: () => {
+        this.deliveryscope = deliveryscopes[this.postagetype.value].filter(x => x.value === deliveryscope.value)[0];
+      } }, h("pn-illustration", { illustration: deliveryscope.illustration }), " ", deliveryscope.name)))))) : null, (this.postagetype.value && weights[this.postagetype.value] && this.deliveryscope.value) ? (h("div", null, (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) => {
+        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 weightInGrams = (x.abbreviation === "kg") ? x.value * 1000 : x.value;
+              return weightInGrams >= weightNum;
+            });
+            if (matchingWeights && matchingWeights.length > 0) {
+              this.weight = matchingWeights[0];
+              this.weightvalue = this.weight.value;
+            }
+          }
+        }
+      } }), h("span", { class: "weightoption-input-abbreviation" }, this.weight.abbreviation)), h("div", { class: "weightoption-range" }, 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) => {
+        const value = e.target.value;
+        this.weight = 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 }), h("datalist", { id: "weightlist" }, 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 : '';
+      }
+      return (h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
+    })))))) : null), (this.filteredItems) ? (h("div", { class: "resultlist" }, (state.i18n.resultlistheading) ? (h("div", { class: "heading" }, state.i18n.resultlistheading)) : null, this.filteredItems.map((item) => (h("div", null, h("pn-find-service-and-price-result", { item: item })))))) : null));
+  }
+  static get watchers() { return {
+    "market": ["setState"],
+    "language": ["setState"],
+    "postagetype": ["filterItems"],
+    "deliveryscope": ["filterItems"],
+    "weightvalue": ["filterItems"]
+  }; }
+};
+PnfindServiceAndPrice.style = pnFindServiceAndPriceCss;
+
+export { PnfindServiceAndPrice as pn_find_service_and_price };