@postnord/pn-marketweb-components 2.1.7 → 2.1.9

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import { translations, markets } from "./pn-proxio-findprice-translations";
 import { MarketWebContextService } from "../../../globals/MarketWebContextService";
 import { weights, sizeCategories } from "./data.js";
@@ -11,6 +11,7 @@ import person from "./img/postnord-person2.svg";
 import clouds from "./img/clouds.svg";
 export class PnProxioFindPrice {
   constructor() {
+    this.fetchHelper = new FetchHelper("proxiopricegroups");
     this.endpoint = null;
     this.language = "da";
     this.market = "dk";
@@ -20,7 +21,6 @@ export class PnProxioFindPrice {
     this.weightvalue = 0;
     this.sizecategory = { value: "", name: "", icon: "", unit: "" };
     this.data = { proxioProducts: [] };
-    this.fetchHelper = new FetchHelper("proxiopricegroups");
   }
   componentWillLoad() {
     this.setInitialValues().then(() => {
@@ -110,138 +110,124 @@ export class PnProxioFindPrice {
     this.filteredItems = weightFilteredData;
   }
   render() {
-    return (h("div", { class: "findprice-form" },
-      h("div", { class: "findprice-form-wrapper" },
-        h("h4", { class: "findprice__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: "findprice__heading findprice__subheading" }, 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));
+    return (h("div", { class: "findprice-form" }, h("div", { class: "findprice-form-wrapper" }, h("h4", { class: "findprice__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: "findprice__heading findprice__subheading" }, 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": ""
+  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"
       },
-      "attribute": "market",
-      "reflect": false,
-      "defaultValue": "\"dk\""
-    },
-    "cache": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "language": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "\"da\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "market": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "market",
+        "reflect": false,
+        "defaultValue": "\"dk\""
       },
-      "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"
-    }]; }
+      "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.js

@@ -1,12 +1,11 @@
-import { Component, h, Host, Listen, Prop, State } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { FetchHelper } from "../../../globals/FetchHelper";
 import { MarketWebContextService } from "../../../globals/MarketWebContextService";
 import { translations } from "./translations";
 export class PnProxioPricegroup {
   constructor() {
-    /** Specifies which endpoint domain we should load from */
+    this.fetchHelper = new FetchHelper("proxiopricegroup");
     this.endpoint = null;
-    //@Prop() culture: string = "sv-SE";
     this.language = "sv";
     this.market = "se";
     this.tariffid = "";
@@ -14,7 +13,6 @@ export class PnProxioPricegroup {
     this.activeWeightIndex = 0;
     this.data = null;
     this.i18n = translations["sv"];
-    this.fetchHelper = new FetchHelper("proxiopricegroup");
   }
   componentWillLoad() {
     this.setInitialValues().then(() => {
@@ -124,151 +122,138 @@ export class PnProxioPricegroup {
   }
   render() {
     var _a, _b, _c;
-    return (h(Host, null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (h("div", { class: "proxio-pricegroup-container" },
-      h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ?
-        (h("div", { class: "weightvaluecontainer" },
-          h("pn-button", { disabled: this.activeWeightIndex === 0 ? ("disabled") : (null), "icon-only": "true", icon: "arrow-left", appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }),
-          h("div", { class: "weightradios ", "data-carousel-container-position": this.getContainerPosition() },
-            h("div", { class: "weightline" }),
-            this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => this.getCarouselPosition(index) !== null ?
-              h("div", { class: "weightdata", "data-carousel-position": this.getCarouselPosition(index), onClick: () => this.setActiveWeightIndex(index) },
-                h("input", { type: "radio", id: "weightradio" + index, name: "weightradio", value: index, checked: this.isActive(index) }),
-                h("label", { htmlFor: "weightradio" + index }, weightItem.item1)) : null)),
-          h("pn-button", { disabled: this.activeWeightIndex === ((_c = (_b = this.data.proxioProduct) === null || _b === void 0 ? void 0 : _b.weightAndPriceList) === null || _c === void 0 ? void 0 : _c.length) - 1 ? ("disabled") : (null), icon: "arrow-right", appearance: "light", "icon-only": "true", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : (null)),
-      h("pn-proxio-productcard", null,
-        h("pn-illustration", { slot: "illustrationmobile", illustration: this.data.proxioProduct.productIcon }),
-        h("h2", { slot: "title" }, this.data.proxioProduct.productTitle),
-        h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }),
-        h("div", { slot: "information" },
-          h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensions, information: this.data.proxioProduct.productPackageDimensionsList }),
-          h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensionsRoll, information: this.data.proxioProduct.productRollDimensionsList })),
-        h("div", { slot: "bottomtags" },
-          this.data.proxioProduct.usp1 ?
-            (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp1)) : (null),
-          this.data.proxioProduct.usp2 ?
-            (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp2)) : (null),
-          this.data.proxioProduct.usp3 ?
-            (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3)) : (null)),
-        h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }),
-        h("div", { slot: "pricelink" },
-          h("pn-proxio-productcard-pricelink", { price: this.getPriceString(this.data.proxioProduct), link: this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList), linktext: this.data.proxioProduct.productLinkText }),
-          this.data.relatedProxioProducts ? (this.data.relatedProxioProducts.map((product) => (h("pn-proxio-productcard-pricelink", { price: this.getPriceString(product), link: product.productLink, linktext: product.productLinkText })))) : (null))))) : (null)));
+    return (h(Host, null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (h("div", { class: "proxio-pricegroup-container" }, h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ?
+      (h("div", { class: "weightvaluecontainer" }, h("pn-button", { disabled: this.activeWeightIndex === 0 ? ("disabled") : (null), "icon-only": "true", icon: "arrow-left", appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }), h("div", { class: "weightradios ", "data-carousel-container-position": this.getContainerPosition() }, h("div", { class: "weightline" }), this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => this.getCarouselPosition(index) !== null ?
+        h("div", { class: "weightdata", "data-carousel-position": this.getCarouselPosition(index), onClick: () => this.setActiveWeightIndex(index) }, h("input", { type: "radio", id: "weightradio" + index, name: "weightradio", value: index, checked: this.isActive(index) }), h("label", { htmlFor: "weightradio" + index }, weightItem.item1)) : null)), h("pn-button", { disabled: this.activeWeightIndex === ((_c = (_b = this.data.proxioProduct) === null || _b === void 0 ? void 0 : _b.weightAndPriceList) === null || _c === void 0 ? void 0 : _c.length) - 1 ? ("disabled") : (null), icon: "arrow-right", appearance: "light", "icon-only": "true", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : (null)), h("pn-proxio-productcard", null, h("pn-illustration", { slot: "illustrationmobile", illustration: this.data.proxioProduct.productIcon }), h("h2", { slot: "title" }, this.data.proxioProduct.productTitle), h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }), h("div", { slot: "information" }, h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensions, information: this.data.proxioProduct.productPackageDimensionsList }), h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensionsRoll, information: this.data.proxioProduct.productRollDimensionsList })), h("div", { slot: "bottomtags" }, this.data.proxioProduct.usp1 ?
+      (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp1)) : (null), this.data.proxioProduct.usp2 ?
+      (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp2)) : (null), this.data.proxioProduct.usp3 ?
+      (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3)) : (null)), h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }), h("div", { slot: "pricelink" }, h("pn-proxio-productcard-pricelink", { price: this.getPriceString(this.data.proxioProduct), link: this.getProductLink(this.data.proxioProduct, this.data.proxioProduct.productWeightGroupList), linktext: this.data.proxioProduct.productLinkText }), this.data.relatedProxioProducts ? (this.data.relatedProxioProducts.map((product) => (h("pn-proxio-productcard-pricelink", { price: this.getPriceString(product), link: product.productLink, linktext: product.productLinkText })))) : (null))))) : (null)));
   }
   static get is() { return "pn-proxio-pricegroup"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-proxio-pricegroup.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-proxio-pricegroup.css"]
-  }; }
-  static get properties() { return {
-    "endpoint": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies which endpoint domain we should load from"
-      },
-      "attribute": "endpoint",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "\"sv\""
-    },
-    "market": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "market",
-      "reflect": false,
-      "defaultValue": "\"se\""
-    },
-    "tariffid": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-proxio-pricegroup.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-proxio-pricegroup.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which endpoint domain we should load from"
+        },
+        "attribute": "endpoint",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "\"sv\""
       },
-      "attribute": "tariffid",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "cache": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "market": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "market",
+        "reflect": false,
+        "defaultValue": "\"se\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "tariffid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tariffid",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "cache",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "activeWeightIndex": {},
-    "data": {},
-    "i18n": {}
-  }; }
-  static get listeners() { return [{
-      "name": "activeWeightIndex",
-      "method": "setActiveWeightIndex",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "language",
-      "method": "setLanguage",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+      "cache": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cache",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "activeWeightIndex": {},
+      "data": {},
+      "i18n": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "activeWeightIndex",
+        "method": "setActiveWeightIndex",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "language",
+        "method": "setLanguage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }