@postnord/pn-marketweb-components 1.0.4 → 1.0.8

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

@@ -0,0 +1,231 @@
+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";
+export class PnFindProductPricelist {
+  constructor() {
+    this.source = "https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx";
+    this.language = "sv";
+    this.market = "se";
+    this.productid = "";
+    this.filteredItems = [];
+    this.sourceData = { types: [], data: [] };
+    this.gotData = false;
+    this.loading = false;
+    this.postagetype = { value: "" };
+    this.weight = { value: 0, name: "" };
+    this.weightvalue = 0;
+  }
+  componentWillLoad() {
+    this.setState();
+    this.getDataSource().then(() => { });
+  }
+  setState() {
+    if (this.market) {
+      state.market = markets[this.market];
+    }
+    if (this.language && translations[this.language]) {
+      state.i18n = translations[this.language];
+    }
+  }
+  async getDataSource() {
+    if (!this.productid) {
+      return;
+    }
+    this.loading = true;
+    const req = await fetch(this.source);
+    const reqbody = await req.blob();
+    try {
+      const convertedData = await convertFileFromStream(reqbody);
+      this.sourceData = convertedData;
+      this.filterItems();
+    }
+    catch (e) {
+      this.loading = false;
+      console.warn('Unable to parse data');
+    }
+  }
+  filterItems() {
+    var _a;
+    if (!((_a = this.sourceData) === null || _a === void 0 ? void 0 : _a.data)) {
+      console.info('Data has not yet been loaded');
+      return;
+    }
+    this.loading = false;
+    const productIdItems = this.sourceData.data.filter(x => x.id === this.productid);
+    if (productIdItems.length === 0) {
+      return;
+    }
+    this.postagetype.value = productIdItems[0].what;
+    if (!weights[this.postagetype.value] || weights[this.postagetype.value].length === 0) {
+      return;
+    }
+    if (this.weightvalue === 0) {
+      this.weight = weights[this.postagetype.value][0];
+      this.weightvalue = this.weight.value;
+    }
+    // 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 weightFilteredData = productIdItems.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 (weightFilteredData.length === 0) {
+      weightFilteredData = productIdItems.filter(x => x.maxweight >= comparisonWeight);
+      if (weightFilteredData.length > 0) {
+        // We reverse the result array since the map will take the last unique item instead of the first
+        const uniqueWeightOptions = [...new Map(weightFilteredData.reverse().map(item => [item["id"], item])).values()];
+        if (uniqueWeightOptions.length > 0) {
+          weightFilteredData = uniqueWeightOptions;
+        }
+      }
+    }
+    this.filteredItems = weightFilteredData;
+    this.gotData = this.filteredItems.length > 0;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "content" },
+        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) => {
+                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,
+      h("div", { class: "resultlist", "data-list-count": this.filteredItems.length }, this.filteredItems.map((item) => (h("div", null,
+        h("pn-product-pricelist-result", { item: item })))))));
+  }
+  static get is() { return "pn-product-pricelist"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-product-pricelist.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-product-pricelist.css"]
+  }; }
+  static get properties() { return {
+    "source": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "source",
+      "reflect": false,
+      "defaultValue": "\"https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx\""
+    },
+    "language": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "\"sv\""
+    },
+    "market": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "market",
+      "reflect": false,
+      "defaultValue": "\"se\""
+    },
+    "productid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "productid",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "filteredItems": {},
+    "sourceData": {},
+    "gotData": {},
+    "loading": {},
+    "postagetype": {},
+    "weight": {},
+    "weightvalue": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "market",
+      "methodName": "setState"
+    }, {
+      "propName": "language",
+      "methodName": "setState"
+    }, {
+      "propName": "postagetype",
+      "methodName": "filterItems"
+    }, {
+      "propName": "weightvalue",
+      "methodName": "filterItems"
+    }]; }
+}

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

@@ -0,0 +1,35 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Widgets/Product price list",
+  parameters: {
+    notes: readme
+  }
+};
+
+
+
+const Template = ({ ...args }) => {
+  return `
+    <div style="max-width: 100%; margin:1em auto 0;">
+      <pn-product-pricelist 
+        source="${args.source}" 
+        market="${args.market}" 
+        language="${args.language}" 
+        productid="${args.productid}">
+        <h2>${args.heading}</h2>
+        <p>${args.description}</p>
+      </pn-product-pricelist>
+    </div>
+  `;
+};
+
+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',
+  language: 'sv',
+  market: 'se',
+  productid: 'expressletter'
+};

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

@@ -0,0 +1,2 @@
+const convert = require("./libs/convertnode.js");
+convert();

package/collection/components/widgets/pn-product-tile/pn-product-tile-info.css

@@ -0,0 +1,3 @@
+pn-product-tile-info {
+  align-self: center;
+}

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

@@ -0,0 +1,70 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProductTileInfo {
+  render() {
+    return (h(Host, null,
+      (this.label) ? (h("p", null,
+        h("small", null, this.label))) : null,
+      (this.text) ? (h("h3", null, this.text)) : null));
+  }
+  static get is() { return "pn-product-tile-info"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-product-tile-info.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-product-tile-info.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    }
+  }; }
+}
+h("pn-icon", { symbol: "align-center", small: "false", color: "black" });

package/collection/components/widgets/pn-product-tile/pn-product-tile-price.css

@@ -0,0 +1,23 @@
+pn-product-tile-price {
+  margin-top: 1em;
+  white-space: nowrap;
+  text-align: right;
+}
+pn-product-tile-price span:last-child {
+  display: inline-block;
+  margin-left: 0.2em;
+}
+pn-product-tile-price + pn-product-tile-price {
+  margin-left: 1.5em;
+}
+pn-product-tile-price pn-icon {
+  display: inline-block;
+  align-self: center;
+}
+pn-product-tile-price a {
+  text-decoration: none;
+  color: #005D92;
+}
+pn-product-tile-price a h3 {
+  text-decoration: underline;
+}

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

@@ -0,0 +1,94 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProductTilePrice {
+  render() {
+    if (!this.amount) {
+      return;
+    }
+    return (this.url) ? (h(Host, null,
+      h("h3", null,
+        (this.amount) ? (h("span", { class: "pn-2xl" }, this.amount)) : null,
+        (this.currency) ? (h("span", { class: "pn-2xl" }, this.currency)) : null),
+      (this.label) ? (h("a", { href: this.url },
+        h("pn-button", { small: "true", icon: "arrow-right" }, this.label))) : null)) : (h(Host, null,
+      h("h3", null,
+        (this.amount) ? (h("span", { class: "pn-2xl" }, this.amount)) : null,
+        (this.currency) ? (h("span", { class: "pn-2xl" }, this.currency)) : null)));
+  }
+  static get is() { return "pn-product-tile-price"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-product-tile-price.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-product-tile-price.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "amount": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "amount",
+      "reflect": false
+    },
+    "currency": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "currency",
+      "reflect": false
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,48 @@
+pn-product-tile {
+  margin-bottom: 1em;
+  border: 0.1rem solid #D3CECB;
+  outline: none;
+  background: white;
+  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: flex;
+  padding: 1.5em;
+  word-break: break-word;
+  text-decoration: none;
+  border-radius: 0.8rem;
+}
+pn-product-tile [slot=content] h3 {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 0.5em;
+}
+pn-product-tile > pn-illustration {
+  min-width: 8rem;
+  width: 8rem;
+  height: 8rem;
+  margin-right: 3rem;
+  align-self: center;
+}
+pn-product-tile .tilecontent {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-grow: 1;
+}
+pn-product-tile .details {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+pn-product-tile .info {
+  display: flex;
+  justify-content: space-between;
+  flex-grow: 1;
+  max-width: calc((100% / 3) * 2);
+  flex-flow: wrap;
+}
+pn-product-tile .info > * {
+  min-width: 6em;
+  margin: 0.2em 1em 0.2em 0;
+}

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

@@ -0,0 +1,21 @@
+import { Component, h, Host } from "@stencil/core";
+export class PnProductTile {
+  render() {
+    return (h(Host, null,
+      h("slot", { name: "illustration" }),
+      h("div", { class: "tilecontent" },
+        h("div", { class: "details" },
+          h("slot", { name: "content" }),
+          h("div", { class: "info" },
+            h("slot", null)),
+          h("slot", { name: "note" })),
+        h("slot", { name: "price" }))));
+  }
+  static get is() { return "pn-product-tile"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-product-tile.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-product-tile.css"]
+  }; }
+}

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

@@ -0,0 +1,50 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Widgets/Product Tile",
+  parameters: {
+    notes: readme
+  }
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <div style="max-width: 30em; margin:1em auto 0;">
+      <pn-product-tile>
+        <div slot="content">
+          <h3>${args.heading}</h3>
+          <p>${args.description}</p>
+        </div>
+        <pn-product-tile-info label="${args.info1label}" text="${args.info1value}"></pn-product-tile-info>
+        <pn-product-tile-info label="${args.info2label}" text="${args.info2value}"></pn-product-tile-info>
+        <pn-product-tile-price slot="price" label="${args.pricelabel}" amount="${args.priceamount}" currency="${args.pricecurrency}"></pn-product-tile-price>
+      </pn-product-tile>
+    </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  heading: "Skicka hem",
+  description: "Lorem ipsum dolor sit amet",
+  info1label: "Maxvikt",
+  info1value: "250g",
+  info2label: "Max längd + bredd + höjd",
+  info2value: "90cm",
+  pricelabel: "Skicka direkt",
+  priceamount: "52",
+  pricecurrency: "kr"
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  heading: "",
+  description: "",
+  info1label: "Maxvikt",
+  info1value: "250g",
+  info2label: "Max längd + bredd + höjd",
+  info2value: "90cm",
+  pricelabel: "Skicka direkt",
+  priceamount: "52",
+  pricecurrency: "kr"
+};

package/collection/globals/shared/productprice/convert.js

@@ -0,0 +1,43 @@
+import readXlsxFile from 'read-excel-file';
+
+async function convertFileFromStream(stream, filterColumnNames = ["what", "deliveryscope"]) {
+    const toFilterValue = (x) => x.toLowerCase().replace(/\s+/g, '');
+    const sheets = await readXlsxFile(stream, { getSheets: true })
+    let dataRows = [];
+    let sheetsData = await Promise.all(sheets.map(async (sheet) => { return await readXlsxFile(stream, { sheet: sheet.name }) }));
+
+    let types = {};
+    sheetsData.forEach(sheetData => {
+        const firstRow = sheetData.shift().map(x => toFilterValue(x));
+        // Set up column for adding options
+        firstRow.forEach((col, i) => {
+            if (typeof types[col] === "undefined" && filterColumnNames.includes(col)) {
+                types[col] = [];
+            }
+        });
+        sheetData.forEach((row, rowindex) => {
+            const dataRow = {};
+            firstRow.forEach(async (col, i) => {
+                const rowVal = row[i];
+                dataRow[col] = rowVal;
+                // Add to types options
+                if (filterColumnNames.includes(col)) {
+                    const filterVal = toFilterValue(rowVal);
+                    dataRow[col] = filterVal;
+                    if (!types[col].includes(filterVal)) {
+                        types[col].push(filterVal);
+                    }
+                }
+            });
+            dataRows.push(dataRow);
+        });
+    });
+
+    const fileData = {
+        "types": types,
+        "data": dataRows
+    };
+    return fileData;
+}
+
+export { convertFileFromStream };

package/collection/globals/shared/productprice/product-price-types.js

@@ -0,0 +1 @@
+export {};