@postnord/pn-marketweb-components 1.0.4 → 1.0.8

package/collection/components/navigation/pn-site-selector/pn-site-selector-item.js

@@ -0,0 +1,103 @@
+import { Component, Prop, h, Host } from "@stencil/core";
+export class PnSiteSelectorItem {
+  constructor() {
+    /* Link URL */
+    this.url = "";
+    /* Link title  */
+    this.heading = "";
+    /* Link description */
+    this.description = "";
+    /* Open link in new window */
+    this.newwindow = false;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, this.url ? (h("a", { class: "siteselector-item-link", href: this.url, target: this.newwindow ? "_blank" : "self", rel: this.newwindow ? "nofollow noopener" : "" },
+      h("span", null,
+        this.heading && (h("span", { class: "siteselector-item-title" }, this.heading)),
+        this.description && (h("small", { class: "siteselector-item-description" }, this.description))),
+      h("pn-icon", { symbol: "angle-small-right", color: "blue700" }))) : (h("div", null,
+      this.heading && (h("span", { class: "siteselector-item-title" }, this.heading)),
+      this.description && (h("small", { class: "siteselector-item-description" }, this.description))))));
+  }
+  static get is() { return "pn-site-selector-item"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-site-selector-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-site-selector-item.css"]
+  }; }
+  static get properties() { return {
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "newwindow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "newwindow",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/collection/components/navigation/pn-site-selector/pn-site-selector-types.js

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

package/collection/components/navigation/pn-site-selector/pn-site-selector.css

@@ -0,0 +1,29 @@
+pn-site-selector {
+  display: flex;
+  position: relative;
+  justify-content: center;
+}
+@media screen and (min-width: 75em) {
+  pn-site-selector {
+    display: block;
+  }
+}
+
+.siteselector-heading {
+  display: block;
+  padding: 0;
+  margin-bottom: 1.6rem;
+}
+@media screen and (min-width: 75em) {
+  .siteselector-heading {
+    display: flex;
+    align-items: center;
+    margin-top: 0.8rem;
+  }
+}
+
+.siteselector-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

package/collection/components/navigation/pn-site-selector/pn-site-selector.js

@@ -0,0 +1,96 @@
+import { Component, Prop, h, State, Element, Host } from "@stencil/core";
+import languageData from './pn-site-selector-i18n';
+export class PnSiteSelector {
+  constructor() {
+    /* Site selector Button text */
+    this.buttontext = "postnord.se";
+    /* Site selector flyout title */
+    this.heading = "PostNord";
+    /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */
+    this.language = "sv";
+    this.i18n = { navlabel: "Site selector" };
+  }
+  componentWillLoad() {
+    this.setLanguage();
+  }
+  setLanguage() {
+    if (languageData[this.language]) {
+      this.i18n = languageData[this.language];
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("pn-nav-dropdown", { label: this.buttontext, icon: "angle-small-down" },
+        h("nav", { class: "siteselector-nav", "aria-label": this.i18n.navlabel },
+          this.heading ? (h("strong", { class: "siteselector-heading" }, this.heading)) : null,
+          h("ul", { class: "siteselector-list" },
+            h("slot", null))))));
+  }
+  static get is() { return "pn-site-selector"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-site-selector.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-site-selector.css"]
+  }; }
+  static get properties() { return {
+    "buttontext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "buttontext",
+      "reflect": false,
+      "defaultValue": "\"postnord.se\""
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "\"PostNord\""
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies which language we want to show navigation in (sv,da,fi,no,en)"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "\"sv\""
+    }
+  }; }
+  static get states() { return {
+    "i18n": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/navigation/pn-site-selector/site-selector.stories.js

@@ -0,0 +1,35 @@
+import readme from "./readme.md";
+
+export default {
+  title: "navigation/Site Selector",
+  parameters: {
+    notes: readme
+  }
+};
+
+// export const regular = () => {
+//   // Storybook Knobs ------------------------------------------//
+//   const language = select("Language", {
+//     'Enlish':'en',
+//     'Swedish': 'sv', 
+//     'Danish': 'da', 
+//     'Finnish': 'fi', 
+//     'Norwegian': 'no'
+//   }, 'sv');
+//   // --------------------------------------------------------- //
+  const Template = ({ ...args }) => {
+  return `
+  <pn-site-selector buttontext="${args.buttontext}" heading="${args.heading}">
+    <pn-site-selector-item heading="postnord.se" description="Tjänster och verktyg för att skicka och ta emot din post"></pn-site-selector-item>
+    <pn-site-selector-item heading="Portal" description="Hantera dina försändelser" url="https://portal.postnord.com"></pn-site-selector-item>
+    <pn-site-selector-item heading="postnord.com" description="Information om PostNord Koncernen" url="https://www.postnord.com"></pn-site-selector-item>
+  </pn-site-selector>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  buttontext: "postnord.se",
+  heading: "PostNord"
+};
+

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

@@ -0,0 +1,53 @@
+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 },    
+  ]
+};
+
+
+
+export { postagetypes, weights, deliveryscopes};

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

@@ -0,0 +1,27 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Widgets /Find Service and Price",
+  parameters: {
+    notes: readme
+  }
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <div style="max-width: 100%; margin:1em auto 0;">
+      <pn-find-service-and-price 
+        source="${args.source}" 
+        market="${args.market}" 
+        language="${args.language}"
+        ></pn-find-service-and-price>
+    </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  source: 'https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx',
+  language: 'sv',
+  market: 'se',
+};

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

@@ -0,0 +1,58 @@
+const fs = require("fs-extra");
+const path = require("path");
+const readXlsxFile = require('read-excel-file/node');
+
+async function getFiles(dirpath = "./data") {
+    const allFiles = await fs.readdir(dirpath);
+    const xslxFiles = allFiles.filter(x => (x.indexOf('.xlsx') !== -1 && x.indexOf('~') !== 0));
+    return xslxFiles.map((file) => path.join(dirpath, file));
+}
+
+async function convertFile(filepath) {
+    const toFilterValue = (x) => x.toLowerCase().replace(/\s+/g, '');
+    const outputFilename = filepath.substring(0, filepath.lastIndexOf('.') + 1) + 'json';
+    console.log(`Reading file "${filepath}" and converting to "${outputFilename}"`);
+    const sheets = await readXlsxFile(filepath, { getSheets: true })
+    let dataRows = [];
+    let sheetsData = await Promise.all(sheets.map(async (sheet) => { return await readXlsxFile(filepath, { sheet: sheet.name }) })); //await readXlsxFile(filepath, { sheet: sheet.name });
+    const filterColumnNames = ["what", "deliveryscope"];
+    let types = {};
+    sheetsData.forEach(sheetData => {
+        const firstRow = sheetData.shift().map(x => toFilterValue(x));
+        // Set up column for adding options
+        firstRow.forEach(async (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 dataFile = filepath;
+    const fileData = {
+        "file": filepath,
+        "types": types,
+        "data": dataRows
+    };
+    console.log(`Stored ${dataRows.length} rows from ${sheetsData.length} sheets. ${Object.keys(types).length} filter types identified`)
+    fs.writeJsonSync(outputFilename, fileData)
+}
+
+async function convert(dirpath = "./data") {
+    const files = await getFiles(dirpath);
+    files.forEach(convertFile);
+}

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

@@ -0,0 +1,101 @@
+import { Component, h, Prop, Host, Watch, State } from "@stencil/core";
+import { state } from "./pn-find-service-and-price-store";
+export class PnfindServiceAndPriceResult {
+  constructor() {
+    this.item = null;
+    this.shownitems = [];
+    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 }));
+    }
+    // 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 }),
+      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)))));
+  }
+  static get is() { return "pn-find-service-and-price-result"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-find-service-and-price-result.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-find-service-and-price-result.css"]
+  }; }
+  static get properties() { return {
+    "item": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "ProductPriceItem",
+        "resolved": "ProductPriceItem",
+        "references": {
+          "ProductPriceItem": {
+            "location": "import",
+            "path": "../../../globals/shared/productprice/product-price-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "shownitems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ProductPriceItem[]",
+        "resolved": "ProductPriceItem[]",
+        "references": {
+          "ProductPriceItem": {
+            "location": "import",
+            "path": "../../../globals/shared/productprice/product-price-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "weightText": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "item",
+      "methodName": "composeItems"
+    }]; }
+}

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

@@ -0,0 +1,20 @@
+import { createStore } from "@stencil/store";
+// Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
+const { state, onChange } = createStore({
+  i18n: {
+    componentheading: '',
+    deliveryscopeheading: '',
+    sizeheading: '',
+    resultlistheading: '',
+    weightlabel: '',
+    maxweightlabel: '',
+    maxmeasurementlabel: '',
+    senddirectcta: '',
+    stampshopcta: '',
+  },
+  market: {
+    currency: ""
+  }
+});
+export { state, onChange };
+export default state;

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

@@ -0,0 +1,71 @@
+export 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',
+    'senddirectcta': 'Köp frakt via Skicka Direkt',
+    'stampshopcta': 'Köp frimärken via vår webshop',
+  },
+  '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',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  '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',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  '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',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  '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',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  }
+};
+export const markets = {
+  'se': {
+    "currency": "kr",
+  },
+  'dk': {
+    "currency": "dk",
+  },
+  'fi': {
+    "currency": " €",
+  },
+  'no': {
+    "currency": "kr",
+  }
+};

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

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

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

@@ -0,0 +1,56 @@
+pn-find-service-and-price .findprice-form {
+  max-width: 50em;
+  margin: 0 auto;
+}
+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: 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%;
+  transform: translateY(-50%);
+  right: 1.2em;
+  margin-top: 1.55rem;
+  font-weight: 500;
+}
+pn-find-service-and-price .weightoption-range {
+  flex-grow: 1;
+  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: flex;
+  justify-content: space-between;
+  font-size: 0.75em;
+}
+pn-find-service-and-price .resultlist {
+  margin: 3em 0;
+}