@postnord/pn-marketweb-components 1.0.41 → 1.0.44-beta1

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

@@ -0,0 +1,212 @@
+import { Component, h, Prop, State, Watch } from "@stencil/core";
+import { translations, markets } from "./pn-find-price-translations";
+import { weights, sizeCategories } from "./data.js";
+import { convertFileForSizeCategogy } from "../../../globals/shared/productprice/convert.js";
+import { state } from "./pn-find-price-store";
+export class PnfindPrice {
+  constructor() {
+    this.source = "https://com-integration.postnord.com/globalassets/global/prices/sv-findprice.xlsx";
+    this.language = "sv";
+    this.market = "se";
+    this.filteredItems = [];
+    this.weight = { value: 0, name: "" };
+    this.weightvalue = 0;
+    this.sourceData = { types: [], data: [] };
+    this.sizecategory = { value: "", name: "", icon: "", unit: "" };
+  }
+  componentWillLoad() {
+    this.setState();
+    this.getDataSource();
+  }
+  async getDataSource() {
+    const cacheBusting = `?cache=${Math.floor(Math.random() * (10000 - 1) + 1)}`;
+    const req = await fetch(this.source + cacheBusting);
+    const reqbody = await req.blob();
+    try {
+      const convertedData = await convertFileForSizeCategogy(reqbody);
+      this.sourceData = convertedData;
+      this.filterItems();
+    }
+    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;
+    if (!((_a = this.sourceData) === null || _a === void 0 ? void 0 : _a.data)) {
+      console.log('Data has not yet been loaded');
+      return;
+    }
+    const deliveryScopeData = this.sourceData.data.filter((x) => x.deliveryscope === "Sweden");
+    if (!this.sizecategory) {
+      return;
+    }
+    const sizeItemData = deliveryScopeData.filter((x) => x.sizecategory === this.sizecategory.value);
+    if (!this.weight || !this.weight.value) {
+      return;
+    }
+    const comparisonWeight = this.weight.value <= 20 ? this.weight.value * 1000 : this.weight.value;
+    let weightFilteredData = sizeItemData.filter(x => (x.maxweight <= 20 ? x.maxweight * 1000 : x.maxweight) === comparisonWeight);
+    // if no value found select the next available value
+    if (weightFilteredData.length === 0) {
+      weightFilteredData = sizeItemData.filter(x => (x.maxweight <= 20 ? x.maxweight * 1000 : x.maxweight) >= comparisonWeight);
+      if (weightFilteredData.length > 0) {
+        //sort based on the maxvalue
+        weightFilteredData.sort((a, b) => { return (a.maxweight - b.maxweight); });
+        // map to get the next unique item 
+        const uniqueWeightOptions = [...new Map(weightFilteredData.reverse().map(item => [item["id"], item])).values()];
+        if (uniqueWeightOptions.length > 0) {
+          weightFilteredData = uniqueWeightOptions;
+        }
+      }
+    }
+    this.filteredItems = weightFilteredData;
+  }
+  render() {
+    return (h("div", null,
+      h("div", { class: "findprice-form" },
+        h("div", null, (h("div", { class: "heading" }, state.i18n.deliveryscopeheading))),
+        h("div", null,
+          (h("div", { class: "heading" }, state.i18n.componentheading)),
+          h("div", { class: "sizecategory" }, sizeCategories.map((sizeCategory) => (h("pn-choice-button", { choiceid: sizeCategory.value, value: sizeCategory.value, name: "sizecategory", type: "radio", checked: sizeCategory.value === this.sizecategory.value, onChange: () => {
+              this.sizecategory = sizeCategories.filter(x => x.value === sizeCategory.value)[0];
+              if (this.weight.value === 0) {
+                this.weight = weights[this.sizecategory.unit][0];
+                this.weightvalue = this.weight.value;
+              }
+            } },
+            h("pn-illustration", { illustration: sizeCategory.illustration }),
+            " ",
+            sizeCategory.name))))),
+        (this.sizecategory.value && weights[this.sizecategory.unit]) ? (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.sizecategory.unit].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.sizecategory.unit].findIndex((x) => x.value === this.weightvalue), onChange: (e) => {
+                  const value = e.target.value;
+                  this.weight = weights[this.sizecategory.unit][value];
+                  this.weightvalue = this.weight.value;
+                }, min: "0", 
+                // max={ weights[this.postagetype.value][weights[this.postagetype.value].length - 1].value }
+                max: weights[this.sizecategory.unit].length - 1 }),
+              h("datalist", { id: "weightlist" }, weights[this.sizecategory.unit].map((weight, weightindex) => {
+                let labelText = weight.name;
+                if (weights[this.sizecategory.unit].length > 6) {
+                  labelText = (weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.sizecategory.unit].length - 1) ? weight.name : '';
+                }
+                return (h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
+              })))))) : null),
+      (this.filteredItems && this.filteredItems.length > 0) ? (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-price-result", { item: item })))))) : null));
+  }
+  static get is() { return "pn-find-price"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-find-price.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-find-price.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-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\""
+    }
+  }; }
+  static get states() { return {
+    "filteredItems": {},
+    "weight": {},
+    "weightvalue": {},
+    "sourceData": {},
+    "sizecategory": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "market",
+      "methodName": "setState"
+    }, {
+      "propName": "language",
+      "methodName": "setState"
+    }, {
+      "propName": "weightvalue",
+      "methodName": "filterItems"
+    }, {
+      "propName": "sizecategory",
+      "methodName": "filterItems"
+    }]; }
+}

package/collection/globals/MarketWebLoginManager.js

@@ -87,8 +87,7 @@ class MarketWebLoginManager {
     return `${this.getBaseUrl()}${this.endpoints.authorizationEndpoint}?redirectionUrl=${redirectPage}`;
   }
   getLogoutUrl(redirectPage = "") {
-    const currentPage = window.location.href;
-    redirectPage = redirectPage ? redirectPage : currentPage;
+    redirectPage = window.location.origin + '/logout';
     return `${this.getBaseUrl()}${this.endpoints.logoutEndpoint}?redirectionUrl=${redirectPage}&authorization=${this.store.get(this.keys.token)}`;
   }
   getUserInfo() {

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

@@ -40,4 +40,58 @@ async function convertFileFromStream(stream, filterColumnNames = ["what", "deliv
     return fileData;
 }
 
-export { convertFileFromStream };
+async function convertFileForSizeCategogy(stream, filterColumnNames = ["sizecategory"]) {
+    const toFilterValue = (x) => x.toLowerCase().replace(/\s+/g, '');
+    const sheets = await readXlsxFile(stream, { getSheets: true })
+    let dataRows = [];
+    let sizecategoryColumn;
+    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] = [];
+            }
+            if(col === "sizecategory")
+                sizecategoryColumn = i;
+        });
+        
+        sheetData.forEach((row, rowindex) => {
+            // read sizeCategory column of each row and split it to save data for each item
+            const firstColRow = row[sizecategoryColumn];
+            const sizeCatColumnValue = firstColRow.split('/');
+
+            sizeCatColumnValue.forEach((value, j) => {
+                    const dataRow = {};    
+
+                    firstRow.forEach(async (col, i) => {
+                        const rowVal = (i === sizecategoryColumn) ? value : 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, convertFileForSizeCategogy };

package/custom-elements/index.d.ts

@@ -32,6 +32,18 @@ export const PnFilterSearch: {
   new (): PnFilterSearch;
 };
 
+interface PnFindPrice extends Components.PnFindPrice, HTMLElement {}
+export const PnFindPrice: {
+  prototype: PnFindPrice;
+  new (): PnFindPrice;
+};
+
+interface PnFindPriceResult extends Components.PnFindPriceResult, HTMLElement {}
+export const PnFindPriceResult: {
+  prototype: PnFindPriceResult;
+  new (): PnFindPriceResult;
+};
+
 interface PnFindServiceAndPrice extends Components.PnFindServiceAndPrice, HTMLElement {}
 export const PnFindServiceAndPrice: {
   prototype: PnFindServiceAndPrice;