@postnord/pn-marketweb-components 1.0.39 → 1.0.42-beta2

package/collection/components/widgets/pn-pex-pricefinder/pex-pricefinder.stories.js

@@ -0,0 +1,22 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Widgets/Pex Pricefinder",
+  parameters: {
+    notes: readme
+  }
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <div style="max-width: 30em; margin:1em auto 0;">
+      <pn-pex-pricefinder language="${args.language}">
+      </pn-product-tile>
+    </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  language: "sv",
+};

package/collection/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder.css

@@ -0,0 +1,59 @@
+.pex-pricefinder-top {
+  display: flex;
+  align-items: center;
+}
+.pex-pricefinder-top pn-illustration {
+  width: 5.5rem;
+  height: 5.5rem;
+  margin-right: 1.6rem;
+}
+
+.pex-pricefinder-form {
+  margin: 1.6rem 0 0 0;
+  padding: 0;
+  border: 0;
+}
+.pex-pricefinder-form fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.pex-pricefinder-form fieldset + fieldset {
+  margin-top: 1.6rem;
+}
+.pex-pricefinder-form fieldset > div {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+.pex-pricefinder-form fieldset > div > * {
+  flex-grow: 1;
+  width: 100%;
+}
+.pex-pricefinder-form pn-button {
+  align-self: end;
+  margin-left: auto;
+}
+.pex-pricefinder-form .datepicker {
+  display: inline-flex;
+  flex-direction: column;
+}
+.pex-pricefinder-form .datepicker label {
+  margin-bottom: 0.4rem;
+  color: #5E554A;
+  font-size: 0.875em;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.pex-pricefinder-form .datepicker pn-date-picker {
+  width: 100%;
+}
+
+.pex-pricefinder-response {
+  margin-top: 2.4rem;
+  text-align: center;
+  font-size: 2.4em;
+}

package/collection/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder.js

@@ -0,0 +1,188 @@
+import { Component, h, Host, Element, Prop, State, Listen } from "@stencil/core";
+import { translations } from "./translations";
+export class PnPexPricefinder {
+  constructor() {
+    /** Specifies which language we want to show component in (sv,da,fi,no,en) */
+    this.language = "sv";
+    /** Currency (Kr, €)*/
+    this.currency = "Kr";
+    /** API Url */
+    this.apiUrl = "/api/pex/order";
+    this.i18n = translations.sv;
+    this.fromzip = null;
+    this.tozip = null;
+    this.weight = 100;
+    this.when = (new Date()).toISOString().split('T')[0];
+    this.response = null;
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  async init() {
+    this.checkParameters();
+    this.setLanguage();
+  }
+  checkParameters() {
+    const params = new URLSearchParams(window.location.href);
+    if (!params) {
+      return;
+    }
+    const paramKeys = ['fromzip', 'tozip', 'weight', 'when'];
+    paramKeys.forEach((key) => {
+      if (params.get(key)) {
+        this[key] = params.get(key);
+      }
+    });
+  }
+  setLanguage() {
+    if (translations[this.language]) {
+      this.i18n = translations[this.language];
+    }
+  }
+  onSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const requestQuery = this.compileRequestQuery(formData);
+    this.fetchResult(requestQuery);
+  }
+  compileRequestQuery(formData) {
+    let query = {
+      "from": formData.get("fromzip"),
+      "to": formData.get("tozip"),
+      "weight": formData.get("weight"),
+      "when": formData.get("when")
+    };
+    if (!query.when) {
+      query.when = this.hostElement.querySelector('input.date-input').value;
+    }
+    if (!formData.get("fromzip") || !formData.get("tozip") || !formData.get("weight")) {
+      console.error("Form data is not compliant");
+      return;
+    }
+    return query;
+  }
+  async fetchResult(query) {
+    this.response = null;
+    const params = new URLSearchParams(query);
+    const req = await (fetch(`${this.apiUrl}?${params.toString()}`, {
+      method: 'get',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).catch(this.onFetchError.bind(this)));
+    let response = await (req.json().catch(this.onFetchError.bind(this)));
+    if (!response) {
+      response = await (await import("./mockresponse.json")).default;
+    }
+    if (response) {
+      this.response = response;
+    }
+  }
+  onFetchError(error) {
+    console.error('onFetchError(error', error);
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pex-pricefinder-top" },
+        h("pn-illustration", { illustration: "PEX-truck" }),
+        h("h2", null, this.i18n.heading)),
+      h("form", { method: "get", action: "", class: "pex-pricefinder-form", onSubmit: this.onSubmit.bind(this) },
+        h("fieldset", null,
+          h("div", null,
+            h("pn-input", { type: "number", label: this.i18n.labelFrom, inputid: "fromzip", name: "fromzip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.fromzip }),
+            h("pn-input", { type: "number", label: this.i18n.labelTo, inputid: "tozip", name: "tozip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.tozip }))),
+        h("fieldset", null,
+          h("div", null,
+            h("pn-input", { type: "number", label: this.i18n.labelWeight, inputid: "weight", name: "weight", placeholder: this.i18n.weightPlaceholder, required: true, value: this.weight }),
+            h("div", { class: "datepicker" },
+              h("label", { htmlFor: "when" }, this.i18n.labelWhen),
+              h("pn-date-picker", { inputid: "when", name: "when", "start-of-week": "1", min: (new Date()).toISOString().split('T')[0], language: this.language, value: this.when })))),
+        h("fieldset", null,
+          h("div", null,
+            h("pn-button", { type: "submit" }, this.i18n.submitButtonText)))),
+      this.response ? (h("div", { class: "pex-pricefinder-response" },
+        h("strong", null,
+          this.response.data.value,
+          " ",
+          this.currency))) : null));
+  }
+  static get is() { return "pn-pex-pricefinder"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-pex-pricefinder.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-pex-pricefinder.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies which language we want to show component in (sv,da,fi,no,en)"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "\"sv\""
+    },
+    "currency": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Currency (Kr, \u20AC)"
+      },
+      "attribute": "currency",
+      "reflect": false,
+      "defaultValue": "\"Kr\""
+    },
+    "apiUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "API Url"
+      },
+      "attribute": "api-url",
+      "reflect": false,
+      "defaultValue": "\"/api/pex/order\""
+    }
+  }; }
+  static get states() { return {
+    "i18n": {},
+    "fromzip": {},
+    "tozip": {},
+    "weight": {},
+    "when": {},
+    "response": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "language",
+      "method": "setLanguage",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/collection/components/widgets/pn-pex-pricefinder/translations.js

@@ -0,0 +1,22 @@
+export const translations = {
+  'sv': {
+    "heading": "Beräkna kostnad med PEX Bud",
+    "labelFrom": "Från postkod",
+    "labelTo": "Till postkod",
+    "zipPlaceholder": "Ex. 12831",
+    "labelWeight": "Vikt (i gram)",
+    "weightPlaceholder": "Ex. 1000",
+    "labelWhen": "När",
+    "submitButtonText": "Beräkna pris"
+  },
+  'en': {
+    "heading": "Calculate cost with PEX Bud",
+    "labelFrom": "From zip",
+    "labelTo": "To zip",
+    "zipPlaceholder": "Ex. 12831",
+    "labelWeight": "Weight (in grams)",
+    "weightPlaceholder": "Ex. 1000",
+    "labelWhen": "When",
+    "submitButtonText": "Calculate price"
+  }
+};

package/collection/components/widgets/pn-pex-pricefinder/types.js

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

package/collection/globals/MarketWebLoginManager.js

@@ -87,8 +87,7 @@ class MarketWebLoginManager {
     return `${this.getBaseUrl()}${this.endpoints.authorizationEndpoint}?redirectionUrl=${redirectPage}`;
   }
   getLogoutUrl(redirectPage = "") {
-    const currentPage = window.location.href;
-    redirectPage = redirectPage ? redirectPage : currentPage;
+    redirectPage = window.location.origin + '/logout';
     return `${this.getBaseUrl()}${this.endpoints.logoutEndpoint}?redirectionUrl=${redirectPage}&authorization=${this.store.get(this.keys.token)}`;
   }
   getUserInfo() {

package/custom-elements/index.d.ts

@@ -2,6 +2,18 @@
 
 import type { Components, JSX } from "../types/components";
 
+interface PnBonusProgressbar extends Components.PnBonusProgressbar, HTMLElement {}
+export const PnBonusProgressbar: {
+  prototype: PnBonusProgressbar;
+  new (): PnBonusProgressbar;
+};
+
+interface PnBonusProgressbarLevel extends Components.PnBonusProgressbarLevel, HTMLElement {}
+export const PnBonusProgressbarLevel: {
+  prototype: PnBonusProgressbarLevel;
+  new (): PnBonusProgressbarLevel;
+};
+
 interface PnChoiceButton extends Components.PnChoiceButton, HTMLElement {}
 export const PnChoiceButton: {
   prototype: PnChoiceButton;
@@ -92,6 +104,12 @@ export const PnMarketwebSiteheaderSearch: {
   new (): PnMarketwebSiteheaderSearch;
 };
 
+interface PnPexPricefinder extends Components.PnPexPricefinder, HTMLElement {}
+export const PnPexPricefinder: {
+  prototype: PnPexPricefinder;
+  new (): PnPexPricefinder;
+};
+
 interface PnProductPricelist extends Components.PnProductPricelist, HTMLElement {}
 export const PnProductPricelist: {
   prototype: PnProductPricelist;