@postnord/pn-marketweb-components 2.0.3-beta4 → 2.0.5

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-zipcode-search/pn-zipcode-search.js

@@ -0,0 +1,196 @@
+import { Component, h, State, Host, Event, Prop } from "@stencil/core";
+import { translations } from "./translations";
+export class PnZipCodeSearch {
+  constructor() {
+    /** marketwebLanguage property will be prioritized before the state language */
+    this.marketwebLanguage = "";
+    /** If property marketwebLanguage is empty it will fall back on the state language */
+    this.language = "sv";
+    this.loading = false;
+    this.error = false;
+    this.errorMessage = "";
+    this.showResult = false;
+    this.zipCodeSearchResult = {
+      delivery: "",
+      upcoming: "",
+      city: "",
+      postalCode: ""
+    };
+  }
+  componentWillLoad() {
+    const topbar = window.pnTopbar;
+    if (topbar) {
+      this.init();
+    }
+    else {
+      window.addEventListener("topbarLoaded", () => {
+        this.init();
+      });
+    }
+  }
+  init() {
+    const topbar = window.pnTopbar;
+    if (topbar) {
+      this.language = topbar.language;
+      topbar.onChangeLanguage = language => {
+        this.language = language;
+      };
+    }
+  }
+  isEmpty(input) {
+    const isNullOrUndefined = !input;
+    if (isNullOrUndefined) {
+      return true;
+    }
+    const isEmptyStr = input.trim().length === 0;
+    if (isEmptyStr) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  getTranslation(keyToMatch, languageToMatch) {
+    // Loop through translations
+    for (const [key, languages] of Object.entries(translations)) {
+      if (key === keyToMatch.toUpperCase()) {
+        const englishTranslation = translations[key].en;
+        // Loop through languages
+        for (const [language, translation] of Object.entries(languages)) {
+          if (language === languageToMatch.toLowerCase()) {
+            if (this.isEmpty(translation)) {
+              return englishTranslation;
+            }
+            else {
+              return translation;
+            }
+          }
+        }
+        // If no matching language, return the english translation as fallback
+        return englishTranslation;
+      }
+    }
+    return keyToMatch; // If no translation found, return the key as last fallback
+  }
+  handleSearch(e) {
+    const validationResult = this.validateZipCode(e.detail);
+    if (validationResult.error) {
+      this.error = true;
+      this.errorMessage = "VALIDATION_ERROR_MESSAGE";
+      return;
+    }
+    // call endpoint
+    this.zipCodeSearch(validationResult.value);
+  }
+  async zipCodeSearch(zipCode) {
+    this.loading = true;
+    await fetch(`https://portal.postnord.com/api/sendoutarrival/closest?postalCode=${zipCode}`)
+      .then(response => {
+      return response.json();
+    })
+      .then(data => {
+      this.error = false;
+      this.loading = false;
+      this.showResult = true;
+      this.zipCodeSearchResult = data;
+      this.searchsuccessful.emit(true);
+    })
+      .catch(() => {
+      this.error = true;
+      this.errorMessage = "SERVER_ERROR_MESSAGE";
+      this.loading = false;
+      this.searchsuccessful.emit(false);
+    });
+  }
+  validateZipCode(value) {
+    // Removes spaces and dashes
+    const formatValue = value ? value.replace(/[ -]/gi, '') : '';
+    // Looks for non-digits
+    const postalCodeRegex = new RegExp(/\D+/);
+    const error = postalCodeRegex.test(formatValue) || formatValue.length !== 5;
+    return { error, value: formatValue };
+  }
+  renderSearchResult() {
+    if (!this.loading && !this.error && this.showResult) {
+      return (h("div", { class: "search-results" },
+        h("div", { class: "text-row" },
+          h("h3", null,
+            this.getTranslation("CLOSEST_DELIVERY_DATE", (this.marketwebLanguage || this.language)),
+            " "),
+          h("h2", { class: "delivery-date" }, this.zipCodeSearchResult.delivery)),
+        h("div", { class: "text-row" },
+          h("h3", null,
+            this.getTranslation("NEXT_DELIVERY_DATE", (this.marketwebLanguage || this.language)),
+            " "),
+          h("h2", { class: "delivery-date" }, this.zipCodeSearchResult.upcoming)),
+        h("div", { class: "text-row" },
+          h("h3", null, this.getTranslation("ZIP_CODE", (this.marketwebLanguage || this.language))),
+          h("h2", null,
+            " ",
+            this.zipCodeSearchResult.postalCode)),
+        h("h3", null, this.zipCodeSearchResult.city)));
+    }
+  }
+  renderErrorMessage() {
+    if (this.error && !this.loading) {
+      return (h("p", { class: "error-text pn-tiny" }, this.getTranslation(this.errorMessage, (this.marketwebLanguage || this.language))));
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("pn-search-field", { loading: this.loading, button: "none", placeholder: this.getTranslation("PLACEHOLDER_TEXT", (this.marketwebLanguage || this.language)), onSearch: e => this.handleSearch(e) }),
+      this.renderSearchResult(),
+      this.renderErrorMessage()));
+  }
+  static get is() { return "pn-zipcode-search"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-zipcode-search.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-zipcode-search.css"]
+  }; }
+  static get properties() { return {
+    "marketwebLanguage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "marketwebLanguage property will be prioritized before the state language"
+      },
+      "attribute": "marketweb-language",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "language": {},
+    "loading": {},
+    "error": {},
+    "errorMessage": {},
+    "showResult": {},
+    "zipCodeSearchResult": {}
+  }; }
+  static get events() { return [{
+      "method": "searchsuccessful",
+      "name": "searchsuccessful",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when search has result"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-zipcode-search/translations.js

@@ -0,0 +1,44 @@
+export const translations = {
+  CLOSEST_DELIVERY_DATE: {
+    da: 'Closest delivery date:',
+    en: 'Closest delivery date:',
+    fi: 'Closest delivery date:',
+    no: 'Closest delivery date:',
+    sv: 'Nästa utdelningsdag:',
+  },
+  NEXT_DELIVERY_DATE: {
+    da: 'Next delivery date:',
+    en: 'Next delivery date:',
+    fi: 'Next delivery date:',
+    no: 'Next delivery date:',
+    sv: 'Kommande utdelningsdag:',
+  },
+  ZIP_CODE: {
+    da: 'Zip code:',
+    en: 'Zip code:',
+    fi: 'Zip code:',
+    no: 'Zip code:',
+    sv: 'Postnummer:',
+  },
+  VALIDATION_ERROR_MESSAGE: {
+    da: 'Zip code not valid',
+    en: 'Zip code not valid',
+    fi: 'Zip code not valid',
+    no: 'Zip code not valid',
+    sv: 'Postnumret är inte giltigt',
+  },
+  SERVER_ERROR_MESSAGE: {
+    da: 'Could not find zip code',
+    en: 'Could not find zip code',
+    fi: 'Could not find zip code',
+    no: 'Could not find zip code',
+    sv: 'Kan inte hitta postnumret',
+  },
+  PLACEHOLDER_TEXT: {
+    da: 'Search for a zip code',
+    en: 'Search for a zip code',
+    fi: 'Search for a zip code',
+    no: 'Search for a zip code',
+    sv: 'Sök på ett postnummer',
+  },
+};

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-zipcode-search/zipcode-search.stories.js

@@ -0,0 +1,15 @@
+import readme from "./readme.md";
+
+export default {
+  title: "web components/Delivery Day Zip Code Search",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const regular = () => {
+  return `
+    <pn-zipcode-search />
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/web-components/virtual-agent/pn-virtual-agent.css

@@ -0,0 +1,24 @@
+#CentionChatList .message .info {
+  display: none;
+}
+
+.pn-virtual-agent {
+  position: fixed;
+  bottom: 1em;
+  right: 10vw;
+  z-index: 1;
+}
+
+.pn-virtual-agent #CentionWidgetFooter {
+  display: none;
+}
+
+.pn-virtual-agent #CentionChatHeader {
+  box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
+}
+
+.pn-virtual-agent #CentionChatQuestion {
+  box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px inset;
+  height: 24px;
+  padding: 5px 10px;
+}

package/umd/modules/@postnord/web-components/collection/components/web-components/virtual-agent/pn-virtual-agent.js

@@ -0,0 +1,286 @@
+import { Component, h, Prop, State } from "@stencil/core";
+export class PnVirtualAgent {
+  constructor() {
+    /** The ID of the pracel you want to pass to the agent */
+    this.parcelid = "";
+    this.areaid = 23;
+    this.show = true;
+    this.instanceActive = false;
+  }
+  loadVirtualAgentScripts() {
+    // @ts-ignore
+    window.CentionBaseURL = "https://chat-postnord.clearinteract.se"; //PROD
+    // @ts-ignore
+    // window.CentionBaseURL = "https://chat-postnordtest.clearinteract.se"; //TEST
+    function addScript(url) {
+      var newScript = document.createElement("script");
+      document.head.appendChild(newScript);
+      newScript.src = url;
+    }
+    addScript("https://code.jquery.com/jquery-1.12.0.min.js");
+    addScript("https://chat-postnord.clearinteract.se/cention/chat/js/widget.js");
+  }
+  async checkStatus() {
+    let statusChecker = await fetch(
+    // `https://pncs-lb-service.pn-isp.com/api/can_handle?id=${this.parcelid}` // OLD
+    `https://app.iva-pncs.prod.postnord.services/api/can_handle?id=${this.parcelid}` // NEW
+    // `https://pn-test.ca-test-env.com/api/can_handle?id=${this.parcelid}` // TEST
+    );
+    this.status = await statusChecker.json();
+    // console.log("status of can handle: ", this.status);
+  }
+  async initVirtualAgent() {
+    if (document.getElementById("CentionChat")) {
+      this.instanceActive = true;
+      return;
+    }
+    this.instanceActive = true;
+    this.checkStatus();
+    let checkAgent = () => {
+      let agentChecker = setInterval(() => {
+        // console.log("checking agent");
+        // @ts-ignore
+        if (typeof CentionChat !== "undefined") {
+          clearInterval(agentChecker);
+          const area = this.areaid;
+          // @ts-ignore
+          CentionChat("cention-chat-container", {
+            translation: {
+              "*Please allow cookie from {CENTION_BASE_URL} to make sure your chat continues if you browse to other pages during the chat.": "",
+              "En kopia av konversationen kommer att skickas till {CLIENT_EMAIL}": "",
+              "PostNord skriver...": "",
+              "Agent(s) har bjudit in: {AGENT_NAMES}": "",
+              "Agent(s) tog bort: {AGENT_NAMES}": "",
+              "Chatten har avslutats.": "",
+              "Återansluter, vänligen vänta ...": "",
+              System: "",
+              "Den uppladdade filen är för stor.": "",
+              "Denna session har löpt ut.": "",
+              "Ett fel har inträffat vid uppladdningen av filen.": "",
+              "Ställ din fråga...": "",
+              "{AGENT_NAME} har avslutat chatten.": "",
+              "{AGENT_NAME} har lämnat chatten.": "",
+              "{AGENT_NAME} har anslutit till chatten.": "",
+              "Väntar på medarbetare": "",
+              "{FROM_AGENT} har skickat vidare chatten till {TO_AGENT}": "",
+              "Du har avslutat chatten.": ""
+            },
+            css: {
+              // logo is shown at the top left hand side of the widget
+              // if it starts with '<' then it is assumed to be font-awesome icon
+              // otherwise it is treated as an image and will be put in <img src="{logo}">
+              logo: "<i class='fa fa-comments'></i>",
+              headerColor: "#00A0D6",
+              headerBorderColor: "#00A0D6",
+              headerTextColor: "#fff",
+              mainColor: "#FFF",
+              mainBorderColor: "#00A0D6",
+              fontColor: "#000",
+              buttonStartColor: "#00A0D6",
+              buttonStartBorderColor: "#00A0D6",
+              buttonStartTextColor: "#fff",
+              buttonAwayColor: "#BEBEBE",
+              buttonAwayTextColor: "#000000",
+              buttonAwayBorderColor: "#BEBEBE",
+              buttonAwayCustomClass: "CentionAwayButton",
+              buttonRetryTextColor: "#000",
+              messageBackgroundColor: "",
+              messageAwayTextColor: "#000",
+              menuTextColor: "#25335E",
+              footerTextColor: "#000",
+              tickKerningOffset: "-6px",
+              tickUnsentColor: "lightgray",
+              tickUnreadColor: "lightgray",
+              tickSentColor: "green",
+              tickReadColor: "green"
+            },
+            text: {
+              // The following attributes names are also used as their respective html element id, so
+              // you can inspect the html element on the text that you would like to change in order
+              // to find out the corresponding entry to be customized here.
+              textTitle: "Chatt",
+              textTitleProactive: "Behöver du lite hjälp?",
+              textButtonStart: "Börja chatta",
+              // textButtonAway is the label for the link/button for away text which only visible when
+              // buttonAwayEnable is set to 'true' and
+              // a link added to buttonAwayLink config.
+              // This is displayed under textMessageAway text.
+              textButtonAway: "Kontakta oss",
+              textButtonRetry: "Försök igen",
+              textButtonProactiveStart: "Chatta",
+              textButtonProactiveLater: "Kanske senare",
+              textInputName: "Namn",
+              textInputEmail: "Email",
+              textInputQuestion: "Fråga",
+              textStatusConnecting: "Ansluter...",
+              textStatusQueue: "Vänligen vänta, vi hjälper dig strax...",
+              textStatusConnected: "Du har anslutits till",
+              textMessageCurrentQueue: "Din nuvarande plats i kön är:",
+              textMessageAgentBusy: "Tyvärr är alla agenter upptagna för tillfället.",
+              textMessageAway: "Vi ber om ursäkt, antingen är chatten stängd eller så är alla agenter upptagna för tillfället.",
+              textMessageEmailInvalid: "Du måste ange en giltig mailadress",
+              textMessageChatEnded: "Chatten är avslutad.",
+              textMessageProactive: "Har du en fråga? Skriv här för att få hjälp.",
+              textMenuSendFile: "Skicka fil",
+              textMenuNewChat: "Ny chatt",
+              textMenuFinishChat: "Avsluta chatt",
+              textMenuPrintChat: "Skriv ut",
+              textMenuSaveChat: "Spara utdrag",
+              textTickSent: "✓",
+              textTickRead: "✓",
+              // textEULA is the text displayed next to EULA checkbox if enabled through 'askEULA' settings
+              textEULA: "I consent to that information about this chat will be collected and stored in accordance with Data Protections laws and directives."
+            },
+            ui: {
+              buttonAwayEnable: false,
+              // buttonAwayLink is the link to
+              // where it redirected to when clicked
+              buttonAwayLink: "#",
+              //  Position is where to position the chat widget. Possible values are:
+              // 	bottomLeft
+              // 	bottomRight
+              // 	centerLeft
+              // 	centerRight
+              position: "bottomRight",
+              bottomPosition: 0,
+              rightPosition: 0,
+              // Or:
+              //rightPosition: 0, // rightPosition is x position of the widget from the right side of the page, in pixels
+              extraFieldEnabled: false,
+              extraFieldMandatory: false,
+              extraFieldDisplayName: "",
+              loadFontAwesome: true,
+              proactiveEnable: false,
+              proactiveDelayTime: 30,
+              proactiveTimeAfterDecline: 45,
+              proactiveRepeatedContact: 2,
+              proactiveTimeout: 20,
+              proactiveImmediateStart: false,
+              askEULA: false,
+              // hideChatWhenOffline is for not showing the chat widget
+              // if or chat is not open and no agent available
+              hideChatWhenOffline: true
+            },
+            hooks: {
+              onChatMaximize: function () {
+                // This function is called when the chat is maximized
+              },
+              onChatMinimize: function () {
+                // This function is called when the chat is minimized
+              }
+            },
+            areaId: area //Prod
+            // areaId: 3 //Test
+          });
+        }
+      }, 150);
+      return;
+    };
+    if (this.status) {
+      checkAgent();
+      let tries = 0;
+      let domChecker = setInterval(() => {
+        let askQuestionBtn = document.getElementById("textButtonStart");
+        if (!!askQuestionBtn) {
+          let nameInput = document.getElementById("textInputName");
+          nameInput.value = "Du";
+          let emailInput = document.getElementById("textInputEmail");
+          emailInput.value = "Guest@postnord.se";
+          let questionInput = document.getElementById("textInputQuestion");
+          questionInput.innerText = this.parcelid;
+          askQuestionBtn.click();
+          clearInterval(domChecker);
+        }
+        // console.log("Checking dom elements");
+        tries++;
+        if (tries > 15)
+          clearInterval(domChecker);
+      }, 250);
+    }
+    return;
+  }
+  componentWillLoad() {
+    this.loadVirtualAgentScripts();
+    this.checkStatus();
+  }
+  componentDidUpdate() {
+    this.checkStatus();
+  }
+  render() {
+    if (this.status && this.show) {
+      return (h("div", { class: "pn-virtual-agent" },
+        h("div", { id: "cention-chat-container" }),
+        h("pn-button-container", { appearance: "secondary", style: {
+            display: this.instanceActive ? "none" : "block"
+          } },
+          h("button", { onClick: () => this.initVirtualAgent() }, "Chatta om ditt paket"))));
+    }
+  }
+  static get is() { return "pn-virtual-agent"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-virtual-agent.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-virtual-agent.css"]
+  }; }
+  static get properties() { return {
+    "parcelid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ID of the pracel you want to pass to the agent"
+      },
+      "attribute": "parcelid",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "areaid": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "areaid",
+      "reflect": false,
+      "defaultValue": "23"
+    },
+    "show": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "status": {},
+    "instanceActive": {}
+  }; }
+}

package/umd/modules/@postnord/web-components/collection/components/web-components/virtual-agent/virtual-agent.stories.js

@@ -0,0 +1,27 @@
+import { text, boolean, select } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "Web Components/Virtual Agent",
+  parameters: {
+    notes: readme
+  }
+};
+
+const areaIds = {
+  production: 23,
+  blue: 29,
+  green: 30
+};
+
+export const regular = () => {
+  // Storybook Knobs, please ignore ----------------------------//
+  const parcelIdString = text("Parcel ID", "96110810953SE");
+  const areaId = select("area", areaIds, 23);
+  const showBool = boolean("show", true);
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-virtual-agent areaid=${areaId} parcelid="${parcelIdString}" show=${showBool} />
+  `;
+};