@postnord/pn-marketweb-components 2.1.0 → 2.1.1

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;
+}

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: "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": ""
+      },
+      "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/collection/globals/MarketWebLoginManager.js

@@ -332,7 +332,7 @@ class MarketWebLoginManager {
   getBaseUrl() {
     const atEnvironments = ["localhost", "integration.", 'local.'];
     let useATEnv = atEnvironments.filter(x => this.endpoint.indexOf(x) !== -1).length > 0;
-    if (window.location.hostname.indexOf('atportal.postnord.com') === 0) {
+    if (['devportal.postnord.com', 'atportal.postnord.com'].indexOf(window.location.hostname) !== -1) {
       useATEnv = true;
     }
     if (useATEnv) {

package/custom-elements/index.d.ts

@@ -152,6 +152,12 @@ export const PnMarketwebSiteheaderLogin: {
   new (): PnMarketwebSiteheaderLogin;
 };
 
+interface PnMarketwebSiteheaderLoginButton extends Components.PnMarketwebSiteheaderLoginButton, HTMLElement {}
+export const PnMarketwebSiteheaderLoginButton: {
+  prototype: PnMarketwebSiteheaderLoginButton;
+  new (): PnMarketwebSiteheaderLoginButton;
+};
+
 interface PnMarketwebSiteheaderLoginLinklist extends Components.PnMarketwebSiteheaderLoginLinklist, HTMLElement {}
 export const PnMarketwebSiteheaderLoginLinklist: {
   prototype: PnMarketwebSiteheaderLoginLinklist;
@@ -164,6 +170,12 @@ export const PnMarketwebSiteheaderLoginLinks: {
   new (): PnMarketwebSiteheaderLoginLinks;
 };
 
+interface PnMarketwebSiteheaderLoginMypageButton extends Components.PnMarketwebSiteheaderLoginMypageButton, HTMLElement {}
+export const PnMarketwebSiteheaderLoginMypageButton: {
+  prototype: PnMarketwebSiteheaderLoginMypageButton;
+  new (): PnMarketwebSiteheaderLoginMypageButton;
+};
+
 interface PnMarketwebSiteheaderLoginProfileselection extends Components.PnMarketwebSiteheaderLoginProfileselection, HTMLElement {}
 export const PnMarketwebSiteheaderLoginProfileselection: {
   prototype: PnMarketwebSiteheaderLoginProfileselection;
@@ -272,6 +284,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;