@postnord/pn-marketweb-components 2.1.0 → 2.1.2

package/collection/components/widgets/pn-proxio-findprice/img/small-package.svg

@@ -0,0 +1,23 @@
+<svg width="54" height="38" viewBox="0 0 54 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.3848 38H50.3017C51.9339 38 53.3111 36.2357 53.3111 33.9964V4.00357C53.3111 1.83214 51.9849 0 50.3017 0H44.3848V38Z" fill="#005D92"/>
+<path d="M47.3433 38H13.321C11.6887 38 10.3115 36.2357 10.3115 33.9964V4.00357C10.3115 1.83214 11.6377 0 13.321 0H44.8439C46.2211 0 47.3433 1.49286 47.3433 3.325V38Z" fill="#00A0D6"/>
+<path d="M43.3143 10.7895C43.3143 12.9609 41.9881 14.7252 40.3559 14.7252H35.9692C34.3369 14.7252 33.0107 12.9609 33.0107 10.7895C33.0107 8.61804 34.3369 6.85376 35.9692 6.85376H40.3559C42.0391 6.92162 43.3143 8.61804 43.3143 10.7895Z" fill="#8EDDF9"/>
+<g clip-path="url(#clip0_1246_34703)">
+<path d="M23.3114 32.6772H0.688477V23.2348L10.3784 13.4694C11.3047 12.5358 12.7849 12.5389 13.7074 13.4763L23.3114 23.2348V32.6772Z" fill="#005D92"/>
+<path d="M5.28627 17.0176H18.7132C19.3401 17.0176 19.9414 17.2013 20.3847 17.5284C20.828 17.8555 21.0771 18.2991 21.0771 18.7617V33.3734H2.92285V18.7617C2.92285 18.2991 3.1719 17.8555 3.61521 17.5284C4.05852 17.2013 4.65978 17.0176 5.28671 17.0176H5.28627Z" fill="#F9F8F8"/>
+<path d="M12.0776 23.7432H7.41657C7.19891 23.7432 7.02246 23.9256 7.02246 24.1507V24.1508C7.02246 24.3759 7.19891 24.5583 7.41657 24.5583H12.0776C12.2952 24.5583 12.4717 24.3759 12.4717 24.1508V24.1507C12.4717 23.9256 12.2952 23.7432 12.0776 23.7432Z" fill="#D3CECB"/>
+<path d="M16.987 25.761H7.41657C7.19891 25.761 7.02246 25.9434 7.02246 26.1685V26.1686C7.02246 26.3937 7.19891 26.5762 7.41657 26.5762H16.987C17.2046 26.5762 17.3811 26.3937 17.3811 26.1686V26.1685C17.3811 25.9434 17.2046 25.761 16.987 25.761Z" fill="#D3CECB"/>
+<path d="M16.987 27.6598H7.41657C7.19891 27.6598 7.02246 27.8422 7.02246 28.0673V28.0674C7.02246 28.2925 7.19891 28.475 7.41657 28.475H16.987C17.2046 28.475 17.3811 28.2925 17.3811 28.0674V28.0673C17.3811 27.8422 17.2046 27.6598 16.987 27.6598Z" fill="#D3CECB"/>
+<path d="M10.3217 30.2231H7.41657C7.19891 30.2231 7.02246 30.4056 7.02246 30.6307V30.6308C7.02246 30.8559 7.19891 31.0383 7.41657 31.0383H10.3217C10.5394 31.0383 10.7158 30.8559 10.7158 30.6308V30.6307C10.7158 30.4056 10.5394 30.2231 10.3217 30.2231Z" fill="#D3CECB"/>
+<path d="M0.688813 23.2346L19.8537 37.9165H3.10689C1.77124 37.9165 0.688477 36.7997 0.688477 35.4219L0.688813 23.2346Z" fill="#00A0D6"/>
+<path d="M23.3119 23.3242L4.13477 37.9161H20.8934C22.2291 37.9161 23.3119 36.7993 23.3119 35.4215V23.3242Z" fill="#8EDDF9"/>
+<path d="M12.0378 21.9537C12.9492 21.9537 13.6881 21.1916 13.6881 20.2513C13.6881 19.3111 12.9489 18.549 12.0378 18.549C11.1267 18.549 10.3877 19.3111 10.3877 20.2513C10.3877 21.1916 11.1265 21.9537 12.0378 21.9537Z" fill="#005D92"/>
+<path d="M13.6778 20.0662C13.4119 20.1936 13.1318 20.3163 12.8714 20.4306C12.3538 20.6581 11.865 20.8728 11.5107 21.0907C11.3925 21.1632 11.1087 21.3375 10.9971 21.5725C11.0876 21.6481 11.1857 21.7135 11.2896 21.7677C11.2888 21.6813 11.4305 21.5431 11.6825 21.3883C12.0173 21.1828 12.4961 20.9725 13.003 20.7498C13.233 20.6486 13.4597 20.5487 13.6758 20.4487C13.691 20.3218 13.6916 20.1935 13.6774 20.0665L13.6778 20.0662Z" fill="#00A0D6"/>
+<path d="M13.2568 19.3703C13.2131 19.2881 13.1603 19.2102 13.0992 19.1378C12.7291 19.3731 12.2814 19.6447 11.7601 19.8243C11.2262 20.0084 10.8085 20.0936 10.4639 20.0738C10.4729 20.1672 10.4928 20.2594 10.5231 20.3489C10.9281 20.3572 11.3749 20.2487 11.8664 20.0793C12.4144 19.8904 12.8755 19.6122 13.2568 19.3703Z" fill="#00A0D6"/>
+</g>
+<defs>
+<clipPath id="clip0_1246_34703">
+<rect width="22.623" height="27.5625" fill="white" transform="translate(0.688477 10.3541)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,9 @@
+pn-proxio-find-price-result .test {
+  margin: 3em 0;
+}
+
+.resultcontent {
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+}

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

@@ -0,0 +1,234 @@
+import { Component, h, Prop, Host, Watch, State } from "@stencil/core";
+import { translations } from "../pn-proxio-pricegroup/translations";
+export class PnProxioFindPriceResult {
+  constructor() {
+    this.item = null;
+    this.activeweight = null;
+    this.shownitems = [];
+    this.description = [];
+    this.showMeasurement = false;
+    this.weightText = "";
+    this.linkId = '';
+    this.shopLabel = '';
+    this.shopUrl = '';
+    this.shopId = '';
+    this.i18n = translations["sv"];
+  }
+  componentWillLoad() {
+    this.composeItems();
+  }
+  composeItems() {
+    this.shownitems = [this.item];
+  }
+  getPriceString(product) {
+    var _a;
+    if (product.productWeightGroupList) {
+      const activeIndex = product.productWeightGroupList.findIndex((item) => item.item1 === this.activeweight);
+      let price = product.weightAndPriceList ? (_a = product === null || product === void 0 ? void 0 : product.weightAndPriceList[activeIndex]) === null || _a === void 0 ? void 0 : _a.item2 : '';
+      return price ? this.i18n.from + price : '';
+    }
+    return null;
+  }
+  getProductLink(product, productWeightGroupList) {
+    var _a;
+    if (product.productWeightGroupList) {
+      const activeIndex = product.productWeightGroupList.findIndex((item) => item.item1 === this.activeweight);
+      let productId = (_a = productWeightGroupList[activeIndex]) === null || _a === void 0 ? void 0 : _a.item2;
+      let productLink = product.productLink ? product === null || product === void 0 ? void 0 : product.productLink : '';
+      return productLink ? productLink + (productId ? "?productId=" + productId : '') : '';
+    }
+    return null;
+  }
+  render() {
+    return (h(Host, null, h("pn-proxio-productcard", null,
+      h("pn-illustration", { slot: "illustrationmobile", illustration: this.item.proxioProduct.productIcon }),
+      h("h2", { slot: "title" }, this.item.proxioProduct.productTitle),
+      h("pn-proxio-productcard-description", { slot: "description", heading: this.item.proxioProduct.productPreamble, highlight: this.item.proxioProduct.deliveryDateInformation, list: this.item.proxioProduct.productDescriptionBulletListItems }),
+      h("div", { slot: "information" },
+        h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensions, information: this.item.proxioProduct.productPackageDimensionsList }),
+        h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensionsRoll, information: this.item.proxioProduct.productRollDimensionsList })),
+      h("div", { slot: "bottomtags" },
+        this.item.proxioProduct.usp1 ?
+          (h("pn-titletag", { color: "gray50" }, this.item.proxioProduct.usp1)) : (null),
+        this.item.proxioProduct.usp2 ?
+          (h("pn-titletag", { color: "gray50" }, this.item.proxioProduct.usp2)) : (null),
+        this.item.proxioProduct.usp3 ?
+          (h("pn-titletag", { color: "gray50" }, this.item.proxioProduct.usp3)) : (null)),
+      h("pn-illustration", { slot: "illustration", illustration: this.item.proxioProduct.productIcon }),
+      h("div", { slot: "pricelink" },
+        h("pn-proxio-productcard-pricelink", { price: this.getPriceString(this.item.proxioProduct), link: this.getProductLink(this.item.proxioProduct, this.item.proxioProduct.productWeightGroupList), linktext: this.item.proxioProduct.productLinkText }),
+        this.item.relatedProxioProducts ? (this.item.relatedProxioProducts.map((product) => (h("pn-proxio-productcard-pricelink", { price: this.getPriceString(product), link: product.productLink, linktext: product.productLinkText })))) : (null)))));
+  }
+  static get is() { return "pn-proxio-findprice-result"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-findprice-result.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-findprice-result.css"]
+  }; }
+  static get properties() { return {
+    "item": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "ProxioPriceListGroupResponse",
+        "resolved": "ProxioPriceListGroupResponse",
+        "references": {
+          "ProxioPriceListGroupResponse": {
+            "location": "import",
+            "path": "../pn-proxio-pricegroup/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "activeweight": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "activeweight",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "shownitems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ProxioPriceListGroupResponse[]",
+        "resolved": "ProxioPriceListGroupResponse[]",
+        "references": {
+          "ProxioPriceListGroupResponse": {
+            "location": "import",
+            "path": "../pn-proxio-pricegroup/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "Usp1": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "usp-1",
+      "reflect": false
+    },
+    "Usp2": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "usp-2",
+      "reflect": false
+    },
+    "Usp3": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "usp-3",
+      "reflect": false
+    },
+    "description": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    },
+    "showMeasurement": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-measurement",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "weightText": {},
+    "linkId": {},
+    "shopLabel": {},
+    "shopUrl": {},
+    "shopId": {},
+    "i18n": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "item",
+      "methodName": "composeItems"
+    }, {
+      "propName": "activeweight",
+      "methodName": "getPriceString"
+    }, {
+      "propName": "activeweight",
+      "methodName": "getProductLink"
+    }]; }
+}

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

@@ -0,0 +1,29 @@
+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: '',
+    resultlistheading: '',
+    sizeheading: '',
+    weightheading: '',
+    weightlabel: '',
+    maxweightlabel: '',
+    maxmeasurementlabel: '',
+    senddirectcta: '',
+    stampshopcta: '',
+    message: '',
+    servicePointHeader: '',
+    servicePointLink: '',
+    realPostcard: '',
+    realPostcardMobile: '',
+    ombudHeader: ''
+  },
+  market: {
+    currency: "",
+    country: "",
+    servicePoint: "",
+  }
+});
+export { state, onChange };
+export default state;

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

@@ -0,0 +1,106 @@
+export const translations = {
+  'sv': {
+    'componentheading': 'Våra priser och villkor för inrikesförsändelser för dig som direktbetalande kund?',
+    'deliveryscopeheading': 'Endast leveranser inom Sverige',
+    'resultlistheading': 'Några bra alternativ för dig',
+    'sizeheading': 'Uppskatta storleken på din försändelse',
+    'weightheading': 'Uppskatta vikten på din försändelse',
+    'weightlabel': 'Vikt',
+    'maxweightlabel': 'Maxvikt',
+    'maxmeasurementlabel': 'Maxvolym',
+    'senddirectcta': 'Köp online',
+    'stampshopcta': 'Till butiken',
+    'message': '*Vid köp hos valfritt ombud',
+    'servicePointHeader': 'Eller hitta närmaste serviceställe',
+    'servicePointLink': 'Hitta Serviceställe',
+    'realPostcard': 'Köp Riktiga Vykort',
+    'realPostcardMobile': 'Ladda ner appen',
+    'ombudHeader': 'Köp via ombud',
+    "from": "Från ",
+    "labelMaxDimensionsRoll": "Rulle",
+    "labelMaxDimensions": "Maxmått"
+  },
+  'en': {
+    'componentheading': 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',
+    'deliveryscopeheading': 'Deliveries within Sweden only',
+    'resultlistheading': 'Some suitable options for you',
+    'sizeheading': 'Estimate the size of your shipment',
+    'weightheading': 'Estimate the weight of your shipment',
+    'weightlabel': 'Weight',
+    'maxweightlabel': 'Max weight',
+    'maxmeasurementlabel': 'Maximum measurement',
+    'senddirectcta': 'Buy Online',
+    'stampshopcta': 'To the Store',
+    'message': 'When buying from any agent',
+    'servicePointHeader': 'Find service point',
+    'servicePointLink': 'Find service point',
+    'realPostcard': 'Buy Postcards',
+    'realPostcardMobile': 'Download the app',
+    'ombudHeader': 'Purchase by agent',
+    "from": "From ",
+    "labelMaxDimensionsRoll": "Roll",
+    "labelMaxDimensions": "Maximum dimensions"
+  },
+  'da': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Kun leveringer indenfor Sverige',
+    'resultlistheading': 'Nogle passende muligheder for dig',
+    'sizeheading': 'Anslå størrelsen på din forsendelse',
+    'weightheading': 'Anslå vægten af din forsendelse',
+    'weightlabel': 'Vægt',
+    'maxweightlabel': 'Max vægt',
+    'maxmeasurementlabel': 'Maks. Volumen',
+    'senddirectcta': 'Køb Online',
+    'stampshopcta': 'Til butikken',
+    'message': 'When buying from any agent',
+    'servicePointHeader': 'Find nærmeste servicested',
+    'servicePointLink': 'Find nærmeste servicested',
+    'realPostcard': 'Køb Riktiga Vykort',
+    'ombudHeader': 'Køb af agent',
+    "from": "Från ",
+    "labelMaxDimensionsRoll": "Rulle",
+    "labelMaxDimensions": "Maks måle"
+  },
+  'no': {
+    'componentheading': 'Vad vill du skicka?',
+    'deliveryscopeheading': 'Kun leveranser innen Sverige',
+    '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': 'Toimitukset vain Ruotsin sisällä',
+    '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",
+    "country": "Sweden",
+    "servicePoint": "https://www.postnord.se/vara-verktyg/sok-brevlada-eller-servicestalle",
+  },
+  'dk': {
+    "currency": "dk",
+    "country": "Denmark",
+    "servicePoint": "https://www.postnord.dk/varktojer/find-os",
+  },
+  'fi': {
+    "currency": " €",
+    "country": "Finland",
+    "servicePoint": "",
+  },
+  'no': {
+    "currency": "kr",
+    "country": "Norway",
+    "servicePoint": "",
+  }
+};

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

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

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

@@ -0,0 +1,119 @@
+@charset "UTF-8";
+pn-proxio-findprice .findprice-form {
+  margin: 0em auto 3em auto;
+}
+pn-proxio-findprice .findprice-form-wrapper {
+  background-color: #EFFBFF;
+  padding: 3.2rem;
+}
+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;
+  position: relative;
+  z-index: 1;
+}
+pn-proxio-findprice .sizeTable #clouds {
+  position: absolute;
+  top: 3rem;
+  width: 100%;
+}
+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 .findprice__heading {
+  text-align: center;
+  line-height: 1.1;
+  font-weight: bold;
+  color: #000000;
+  font-size: 3.2rem;
+  font-weight: 700;
+}
+pn-proxio-findprice .findprice__subheading {
+  font-size: 2.4rem;
+  margin-bottom: 2.4rem;
+}
+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 .findprice-form-wrapper .weightoption .weightoption-content {
+  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: row;
+}
+pn-proxio-findprice .findprice-form-wrapper .weightoption .weightoption-content pn-choice-button {
+  width: 7em;
+  line-height: 3.3em;
+  font-size: 0.9em;
+  vertical-align: bottom;
+  background: #FFFFFF;
+  border-radius: 1rem;
+}
+pn-proxio-findprice .findprice-form-wrapper .weightoption .weightoption-content pn-choice-button > label {
+  align-content: center;
+  justify-content: center;
+  color: #000000;
+  margin-bottom: 0;
+}
+pn-proxio-findprice .findprice-form-wrapper .weightoption .weightoption-content pn-choice-button ::before {
+  content: "Max  ";
+  font-weight: lighter;
+  color: #5E554A;
+}
+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;
+}