@postnord/pn-marketweb-components 2.0.79 → 2.0.81

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

@@ -0,0 +1,204 @@
+import { Component, h, Host, Listen, Prop, State } 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.endpoint = null;
+    this.culture = "sv-se";
+    this.tariffid = "";
+    this.cache = true;
+    this.activeWeightIndex = 0;
+    this.data = null;
+    this.i18n = translations["sv-se"];
+    this.fetchHelper = new FetchHelper("proxiopricegroup");
+  }
+  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.setCulture();
+    this.fetchData();
+  }
+  async fetchData() {
+    if (!this.culture || !this.tariffid) {
+      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-group?tariffId=${this.tariffid}&culture=${this.culture}&cached=${this.cache}`;
+    const data = await this.fetchHelper.fetchJson(fetchUrl, {
+      'mode': 'cors'
+    }, this.cache, this.onFetchData.bind(this));
+    if (data === null || data === void 0 ? void 0 : data.proxioProduct) {
+      this.data = data;
+    }
+  }
+  onFetchData(data) {
+    this.data = data;
+  }
+  setActiveWeightIndex(weightIndex) {
+    var _a, _b, _c;
+    let minIndex = 0;
+    let maxIndex = (_c = ((_b = (_a = this.data.proxioProduct) === null || _a === void 0 ? void 0 : _a.weightAndPriceList) === null || _b === void 0 ? void 0 : _b.length) - 1) !== null && _c !== void 0 ? _c : minIndex;
+    weightIndex = weightIndex > maxIndex ? maxIndex : weightIndex;
+    weightIndex = weightIndex < minIndex ? minIndex : weightIndex;
+    this.activeWeightIndex = weightIndex;
+  }
+  setCulture() {
+    if (translations[this.culture]) {
+      this.i18n = translations[this.culture];
+    }
+  }
+  getPrice(product) {
+    var _a;
+    return (_a = product === null || product === void 0 ? void 0 : product.weightAndPriceList[this.activeWeightIndex]) === null || _a === void 0 ? void 0 : _a.item2;
+  }
+  isActive(index) {
+    return index === this.activeWeightIndex;
+  }
+  render() {
+    var _a, _b, _c;
+    return (h(Host, null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (h("div", null,
+      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" },
+            h("div", { class: "weightline" }),
+            this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => h("div", { class: "weightdata" + (this.isActive(index) ? (" activeweight") : ("")) },
+              h("input", { type: "radio", id: "weightradio" + index, name: "weightradio", value: index, checked: this.isActive(index), onClick: () => this.setActiveWeightIndex(index) }),
+              h("label", { htmlFor: "weightradio" + index }, weightItem.item1)))),
+          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("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.labelPackage, information: this.data.proxioProduct.productPackageDimensionsList }),
+          h("pn-proxio-productcard-information", { label: this.i18n.labelRoll, information: this.data.proxioProduct.productRollDimensionsList })),
+        h("div", { slot: "bottomtags" },
+          this.data.proxioProduct.tracable ?
+            (h("pn-titletag", { color: "gray50" }, this.i18n.notTraceable)) : (null),
+          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.i18n.from + this.getPrice(this.data.proxioProduct), link: this.data.proxioProduct.productLink, linktext: this.data.proxioProduct.productLinkText }),
+          this.data.relatedProxioProducts ? (this.data.relatedProxioProducts.map((product) => (h("pn-proxio-productcard-pricelink", { price: this.i18n.from + this.getPrice(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"
+    },
+    "culture": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "culture",
+      "reflect": false,
+      "defaultValue": "\"sv-se\""
+    },
+    "tariffid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tariffid",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "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": "culture",
+      "method": "setCulture",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,27 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Proxio/Price group list",
+  parameters: {
+    notes: readme
+  }
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <div style="max-width: 67em; margin:1em auto 0;">
+      <pn-proxio-pricegroup
+        culture="${args.culture}"
+        tariffid="${args.tariffId}"
+        cache="${args.cache}" >
+      </pn-proxio-pricegroup>
+    </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  culture: "sv-se",
+  tariffId: "7c702ee4-d20c-4b01-aad8-6e5309d59bd0",
+  cache: true
+};

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

@@ -0,0 +1,16 @@
+export const translations = {
+  'sv-se': {
+    "from": "Från ",
+    "labelRoll": "Rulle",
+    "labelPackage": "Paket",
+    "notTraceable": "Inte spårbart",
+    "Creapest": "Billigast"
+  },
+  'en-gb': {
+    "from": "From ",
+    "labelRoll": "Roll",
+    "labelPackage": "Package",
+    "notTraceable": "Not traceable",
+    "Creapest": "Cheapest"
+  }
+};

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

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

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-description.css

@@ -0,0 +1,6 @@
+pn-proxio-productcard-description h3 {
+  font-size: 2rem;
+}
+pn-proxio-productcard-description .highlight {
+  color: #0fa85c;
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-description.js

@@ -0,0 +1,93 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProxioProductcardDescription {
+  constructor() {
+    this.list = [];
+  }
+  render() {
+    return (h(Host, null,
+      this.heading ? (h("h3", null, this.heading)) : (null),
+      this.highlight ? (h("h3", { class: "highlight" }, this.highlight)) : (null),
+      this.description ? (h("span", null, this.description)) : (null),
+      this.list ?
+        (h("ul", null, this.list.map((text) => {
+          return (h("li", null, text));
+        })))
+        : (null)));
+  }
+  static get is() { return "pn-proxio-productcard-description"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-productcard-description.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-productcard-description.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "highlight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "highlight",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "list": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.css

@@ -0,0 +1,6 @@
+pn-proxio-productcard-information {
+  align-self: center;
+}
+pn-proxio-productcard-information p strong.label {
+  font-weight: 500;
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.js

@@ -0,0 +1,67 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProxioProductcardInformation {
+  constructor() {
+    this.information = [];
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "cardinfocontent" }, this.information && this.label ? (h("div", { class: "cardinfocontent-item" },
+        h("p", null,
+          h("strong", null, this.label)),
+        this.information.map((item) => (item ?
+          (h("p", null,
+            h("strong", { class: "label" },
+              item.item1,
+              ":"),
+            " ",
+            item.item2))
+          : (null))))) : null)));
+  }
+  static get is() { return "pn-proxio-productcard-information"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-productcard-information.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-productcard-information.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
+    },
+    "information": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ProductGenericItem[]",
+        "resolved": "ProductGenericItem[]",
+        "references": {
+          "ProductGenericItem": {
+            "location": "import",
+            "path": "../pn-proxio-pricegroup/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-pricelink.css

@@ -0,0 +1,13 @@
+pn-proxio-productcard-pricelink {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 2rem 1rem;
+  gap: 1rem;
+  align-content: center;
+  flex-wrap: wrap;
+}
+pn-proxio-productcard-pricelink pn-button {
+  min-width: 17rem;
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-pricelink.js

@@ -0,0 +1,69 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProxioProductcardPricelink {
+  render() {
+    return this.link && this.linktext ?
+      (h(Host, null,
+        this.price ? (h("h2", null, this.price)) : (null),
+        h("pn-button", { small: "true", icon: "arrow-right", appearance: "light", href: this.link, target: "_blank", rel: "noopener nofollower noreferrer" }, this.linktext))) : (null);
+  }
+  static get is() { return "pn-proxio-productcard-pricelink"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-productcard-pricelink.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-productcard-pricelink.css"]
+  }; }
+  static get properties() { return {
+    "price": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "price",
+      "reflect": false
+    },
+    "link": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link",
+      "reflect": false
+    },
+    "linktext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "linktext",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,60 @@
+pn-proxio-productcard .cardcontent {
+  display: flex;
+  flex-direction: row;
+  border: solid 0.1rem #F9F8F8;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1.6rem;
+}
+pn-proxio-productcard .carddetails {
+  min-width: 70%;
+  padding: 2rem;
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
+pn-proxio-productcard .cardcalltoactions {
+  min-width: 30%;
+  background-color: #EFFBFF;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+}
+pn-proxio-productcard .cardcalltoactions pn-illustration[slot=illustration] .pn-illustration {
+  max-width: 10rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+pn-proxio-productcard [slot=information] {
+  display: flex;
+  gap: 1rem;
+}
+pn-proxio-productcard [slot=uppertags] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2rem;
+}
+pn-proxio-productcard [slot=bottomtags] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2rem;
+  margin: 1rem 0;
+}
+pn-proxio-productcard .heading {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+pn-proxio-productcard [slot=title] {
+  text-decoration: underline;
+}

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

@@ -2,14 +2,17 @@ import { Component, h, Host } from "@stencil/core";
 export class PnProxioProductcard {
   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" }))));
+      h("div", { class: "cardcontent" },
+        h("div", { class: "carddetails" },
+          h("div", { class: "heading" },
+            h("slot", { name: "title" }),
+            h("slot", { name: "uppertags" })),
+          h("slot", { name: "description" }),
+          h("slot", { name: "information" }),
+          h("slot", { name: "bottomtags" })),
+        h("div", { class: "cardcalltoactions" },
+          h("slot", { name: "illustration" }),
+          h("slot", { name: "pricelink" })))));
   }
   static get is() { return "pn-proxio-productcard"; }
   static get originalStyleUrls() { return {

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard.stories.js

@@ -3,15 +3,34 @@ import readme from "./readme.md";
 export default {
   title: "Proxio/Product card",
   parameters: {
-    
+    notes: readme
   }
 };
 
 const Template = ({ ...args }) => {
   return `
-    <div style="max-width: 30em; margin:1em auto 0;">
-      <pn-proxio-productcard language="en" endpoint="https://se-integration.postnord.com/api/proxio">
-        
+    <div style="max-width: 67em; margin:1em auto 0;">
+      <pn-proxio-productcard>
+        <h2 slot="title">${args.heading}</h2>
+        <div slot="uppertags">
+          <pn-titletag icon="box-label" color="green700">${args.uppertag}</pn-titletag>
+        </div>
+        <pn-proxio-productcard-description slot="description" heading="${args.description}" highlight="${args.highlight}" list="${args.list}" ></pn-proxio-productcard-description>
+        <div slot="information">
+          <pn-proxio-productcard-information label="${args.paketlabel}" information="${args.paket}" ></pn-proxio-productcard-information>
+          <pn-proxio-productcard-information label="${args.rullelabel}" information="${args.rulle}" ></pn-proxio-productcard-information>
+        </div>
+        <div slot="bottomtags">
+          <pn-titletag color="gray50">${args.traceable}</pn-titletag>
+          <pn-titletag color="gray50">${args.usp1}</pn-titletag>
+          <pn-titletag color="gray50">${args.usp2}</pn-titletag>
+          <pn-titletag color="gray50">${args.usp3}</pn-titletag>
+        </div>
+        <pn-illustration slot="illustration" illustration="${args.illustration}" ></pn-illustration>
+        <div slot="pricelink">
+          <pn-proxio-productcard-pricelink price="${args.price1}" link="${args.link}" linktext="${args.linktext1}" ></pn-proxio-productcard-pricelink>
+          <pn-proxio-productcard-pricelink price="${args.price2}" link="${args.link}" linktext="${args.linktext2}" ></pn-proxio-productcard-pricelink>
+        </div>
       </pn-proxio-productcard>
     </div>
   `;
@@ -19,5 +38,23 @@ const Template = ({ ...args }) => {
 
 export const Primary = Template.bind({});
 Primary.args = {
-  
+  heading: "Brev",
+  description: "Skicka brev som väger upp till 2 kilo",
+  highlight: "Leverans senast 2 juni 2022",
+  list: ["Portot betalas med frimärken eller med portkod (digitalt frimärke)", "Levereras till postlåda om det får plats, annars till serviceställe", "Postas i någon av våra brevlådor eller lämnas in hos ett postombud."],
+  paketlabel: "Paket:",
+  paket: [{ item1: "Längd:", item2: "Max XX cm" }, { item1: "Längd + bredd + höjd:", item2: "Max XX cm" }],
+  rullelabel: "Rulle:",
+  rulle: [{ item1:"Längd:", item2:"Max XX cm" }, { item1:"Längd + bredd + höjd:", item2:"Max XX cm" }],
+  price1: "från 14 kronor",
+  price2: "från 13 kronor",
+  link: "www.google.com",
+  linktext1: "Köp portkod",
+  linktext2: "Till butiken",
+  uppertag: "Billigast",
+  traceable: "Inte spårbart",
+  usp1: "usp1",
+  usp2: "usp2",
+  usp3: "usp3",
+  illustration: "hand-letter-stamp"
 };