@postnord/pn-marketweb-components 2.0.150-test → 2.0.150-test1

package/collection/components/widgets/pn-proxio-findprice/pn-proxio-findprice.css

@@ -0,0 +1,105 @@
+@charset "UTF-8";
+pn-proxio-findprice .findprice-form {
+  /*max-width: 60em;*/
+  margin: 0em auto 3em auto;
+}
+pn-proxio-findprice .findprice-form-wrapper {
+  background-color: #EFFBFF;
+  padding: 3.2rem 0;
+}
+pn-proxio-findprice .sizeTable {
+  border-style: none !important;
+  border: 0 !important;
+  position: relative;
+}
+pn-proxio-findprice .sizeTable > tr td {
+  margin-bottom: 1em;
+  text-align: center;
+  vertical-align: bottom;
+  padding-right: 1em;
+  padding-top: 1em;
+}
+pn-proxio-findprice .sizeTable #clouds {
+  position: absolute;
+  top: 0em;
+  left: 4em;
+  z-index: -1;
+}
+pn-proxio-findprice .firstCell {
+  margin-right: 0;
+  margin-left: auto;
+}
+pn-proxio-findprice [slot=title] {
+  margin-bottom: 1rem;
+}
+pn-proxio-findprice h2 {
+  text-align: center;
+}
+pn-proxio-findprice .heading {
+  text-align: center;
+  line-height: 1.1;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  color: #000000;
+}
+pn-proxio-findprice .resultHeading {
+  text-align: center;
+  font-size: 1.5em;
+  line-height: 1.1;
+  font-weight: bold;
+  margin-bottom: 2em;
+}
+pn-proxio-findprice .sizecategory {
+  margin-top: 1em;
+  margin-bottom: 3rem;
+  font-size: 0.9em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+pn-proxio-findprice .weightoption {
+  font-size: 0.9em;
+  margin: 0 auto;
+}
+pn-proxio-findprice .weightoption-content {
+  text-align: center;
+}
+pn-proxio-findprice .weightoption-content pn-choice-button {
+  width: 7em;
+  line-height: 3.3em;
+  font-size: 0.9em;
+  vertical-align: bottom;
+}
+pn-proxio-findprice .weightoption-content pn-choice-button > label {
+  align-content: center;
+  justify-content: center;
+}
+pn-proxio-findprice .weightoption-content pn-choice-button ::before {
+  content: "Max  ";
+  font-weight: lighter;
+}
+pn-proxio-findprice .resultlist {
+  max-width: 60em;
+  margin: 3.2rem auto 3.2rem auto;
+}
+pn-proxio-findprice .servicePoint {
+  text-align: center;
+}
+pn-proxio-findprice .servicePoint pn-illustration {
+  display: block;
+  max-width: 5em;
+  max-height: 5em;
+  margin: 1.5em auto 0 auto;
+}
+pn-proxio-findprice .servicePoint h3 {
+  margin-top: 0.8em;
+  margin-bottom: 0.9em;
+}
+pn-proxio-findprice .servicePoint a {
+  color: #005D92;
+  text-decoration: none;
+}
+pn-proxio-findprice .servicePoint a:hover {
+  color: #0D234B;
+  text-decoration: underline;
+}

package/collection/components/widgets/pn-proxio-findprice/pn-proxio-findprice.js

@@ -0,0 +1,250 @@
+import { Component, h, Prop, State, Watch } from "@stencil/core";
+import { translations, markets } from "./pn-proxio-findprice-translations";
+import { MarketWebContextService } from "../../../globals/MarketWebContextService";
+import { weights, sizeCategories } from "./data.js";
+import { FetchHelper } from "../../../globals/FetchHelper";
+import { state } from "./pn-proxio-findprice-store";
+import S from "./img/small-package.svg";
+import M from "./img/medium-package.svg";
+import L from "./img/large-package.svg";
+import person from "./img/postnord-person2.svg";
+import clouds from "./img/clouds.svg";
+export class PnProxioFindPrice {
+  constructor() {
+    this.endpoint = null;
+    this.language = "da";
+    this.market = "dk";
+    this.cache = false;
+    this.filteredItems = [];
+    this.weight = { value: 0, name: "" };
+    this.weightvalue = 0;
+    this.sizecategory = { value: "", name: "", icon: "", unit: "" };
+    this.data = { proxioProducts: [] };
+    this.fetchHelper = new FetchHelper("proxiopricegroups");
+  }
+  componentWillLoad() {
+    this.setInitialValues().then(() => {
+      this.init();
+    });
+  }
+  async setInitialValues(href = window.location.href) {
+    const marketWebContextService = new MarketWebContextService(href);
+    const environment = await marketWebContextService.getEnvironmentName();
+    if ((!this.endpoint && (environment === null || environment === void 0 ? void 0 : environment.indexOf('local')) === -1)) {
+      const market = await marketWebContextService.getMarket();
+      this.endpoint = await marketWebContextService.getEndpoint(environment, market);
+    }
+    if (!this.endpoint) {
+      this.endpoint = "";
+    }
+  }
+  init() {
+    this.setState();
+    this.getDataSource();
+    this.fetchData();
+  }
+  async getDataSource() {
+    try {
+      //for keeping small value preselected
+      this.sizecategory = sizeCategories.filter(x => x.value === "S")[0];
+      console.log(this.sizecategory);
+      this.filterItems();
+    }
+    catch (e) {
+      console.log('Unable to parse data');
+    }
+  }
+  async fetchData() {
+    if (!this.market || !this.language) {
+      return;
+    }
+    const endpoint = (this.endpoint.lastIndexOf("/") === this.endpoint.length - 1) ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
+    const fetchUrl = `${endpoint}/api/proxio/price-list-groups?market=${this.market}&language=${this.language}&cached=${this.cache}`;
+    //const fetchUrl = `http://localhost:51444/api/proxio/price-list-groups?market=${this.market}&language=${this.language}&cached=${this.cache}`;
+    const data = await this.fetchHelper.fetchJson(fetchUrl, {
+      'mode': 'cors',
+    }, this.cache, this.onFetchData.bind(this));
+    if (data) {
+      this.data.proxioProducts = data;
+    }
+    this.filterItems();
+  }
+  onFetchData(data) {
+    this.data = data;
+  }
+  setState() {
+    this.market = "dk";
+    if (this.market) {
+      state.market = markets[this.market];
+    }
+    if (this.language && translations[this.language]) {
+      state.i18n = translations[this.language];
+    }
+  }
+  filterItems() {
+    if (!this.data) {
+      console.log('Data has not yet been loaded');
+      return;
+    }
+    console.log("data ", this.data);
+    const sizeItemData = this.data.proxioProducts.filter(item => {
+      return item.proxioProduct.productWeightGroupList.some(weightGroup => {
+        return weightGroup.item3.includes(this.sizecategory.value);
+      });
+    });
+    console.log("sizeItemData ", sizeItemData);
+    if (!this.weight) {
+      return;
+    }
+    const comparisonWeight = this.weight.value;
+    let weightFilteredData = sizeItemData.filter(item => {
+      return item.proxioProduct.productWeightGroupList.some(weightGroup => {
+        return weightGroup.item1 === comparisonWeight;
+      });
+    });
+    console.log("weightFilteredData ", weightFilteredData);
+    if (weightFilteredData.length === 0 && this.weightvalue !== 0) {
+      weightFilteredData = sizeItemData.filter(item => {
+        return item.proxioProduct.productWeightGroupList.some(weightGroup => {
+          return weightGroup.item1 === comparisonWeight;
+        });
+      });
+    }
+    this.filteredItems = weightFilteredData;
+  }
+  render() {
+    return (h("div", { class: "findprice-form" },
+      h("div", { class: "findprice-form-wrapper" },
+        h("h4", { class: "heading" }, state.i18n.sizeheading),
+        h("div", { class: "sizecategory" },
+          h("table", { class: "sizeTable" },
+            h("img", { id: "clouds", src: clouds }),
+            h("tr", null,
+              h("td", null,
+                h("img", { class: "firstCell", src: person })),
+              h("td", null,
+                h("img", { src: S })),
+              h("td", null,
+                h("img", { src: M })),
+              h("td", null,
+                h("img", { src: L }))),
+            h("tr", null,
+              h("td", null),
+              sizeCategories.map((sizeCategory) => (h("td", null,
+                h("pn-radio-button", { id: 'findpricecategory-' + sizeCategory.value, radioid: sizeCategory.value, value: sizeCategory.value, name: "sizecategory", checked: sizeCategory.value === this.sizecategory.value, onChange: () => {
+                    this.sizecategory = sizeCategories.filter(x => x.value === sizeCategory.value)[0];
+                    this.weight = { value: 0, name: "" };
+                    this.weightvalue = this.weight.value;
+                  } }))))))),
+        h("h4", { class: "heading" }, state.i18n.weightheading),
+        (this.sizecategory.value && weights[this.sizecategory.unit]) ? (h("div", { class: "weightoption" }, h("div", { class: "weightoption-content" }, weights[this.sizecategory.unit].map((wght) => (h("pn-choice-button", { id: 'findpriceweight-' + wght.value, choiceid: this.sizecategory.value + wght.value, name: "weight", type: "radio", value: (!this.weight.value) ? 0 : weights[this.sizecategory.unit].findIndex((x) => x.value === this.weightvalue), checked: wght.value === this.weight.value, onChange: () => {
+            this.weight = weights[this.sizecategory.unit].filter(x => x.value === wght.value)[0];
+            this.weightvalue = this.weight.value;
+          } }, wght.name)))))) : null),
+      (this.filteredItems && this.filteredItems.length > 0) ? (h("div", { class: "resultlist" },
+        (state.i18n.resultlistheading) ? (h("div", { class: "resultHeading" }, state.i18n.resultlistheading)) : null,
+        this.filteredItems.map((item) => (h("div", null,
+          h("pn-proxio-findprice-result", { activeweight: this.weight.value, item: item })))))) : null));
+  }
+  static get is() { return "pn-proxio-findprice"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-findprice.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-findprice.css"]
+  }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "endpoint",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "language": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "\"da\""
+    },
+    "market": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "market",
+      "reflect": false,
+      "defaultValue": "\"dk\""
+    },
+    "cache": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cache",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "filteredItems": {},
+    "weight": {},
+    "weightvalue": {},
+    "sizecategory": {},
+    "data": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "market",
+      "methodName": "setState"
+    }, {
+      "propName": "language",
+      "methodName": "setState"
+    }, {
+      "propName": "sizecategory",
+      "methodName": "filterItems"
+    }, {
+      "propName": "weightvalue",
+      "methodName": "filterItems"
+    }]; }
+}

package/collection/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.css

@@ -14,6 +14,9 @@ pn-proxio-pricegroup div.weightvaluecontainer {
 pn-proxio-pricegroup div.weightvaluecontainer pn-button {
   transform: translateY(-0.4rem);
 }
+pn-proxio-pricegroup div.weightvaluecontainer pn-button button::before {
+  display: none;
+}
 pn-proxio-pricegroup div.weightradios {
   display: flex;
   flex-direction: row;

package/collection/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.js

@@ -42,6 +42,7 @@ export class PnProxioPricegroup {
     }
     const endpoint = (this.endpoint.lastIndexOf("/") === this.endpoint.length - 1) ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
     const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;
+    //const fetchUrl = `http://localhost:51444/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;
     const data = await this.fetchHelper.fetchJson(fetchUrl, {
       'mode': 'cors',
     }, this.cache, this.onFetchData.bind(this));

package/custom-elements/index.d.ts

@@ -278,6 +278,18 @@ export const PnProfileSelectorOption: {
   new (): PnProfileSelectorOption;
 };
 
+interface PnProxioFindprice extends Components.PnProxioFindprice, HTMLElement {}
+export const PnProxioFindprice: {
+  prototype: PnProxioFindprice;
+  new (): PnProxioFindprice;
+};
+
+interface PnProxioFindpriceResult extends Components.PnProxioFindpriceResult, HTMLElement {}
+export const PnProxioFindpriceResult: {
+  prototype: PnProxioFindpriceResult;
+  new (): PnProxioFindpriceResult;
+};
+
 interface PnProxioPricegroup extends Components.PnProxioPricegroup, HTMLElement {}
 export const PnProxioPricegroup: {
   prototype: PnProxioPricegroup;