@postnord/pn-marketweb-components 2.0.3-beta3 → 2.0.4

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

@@ -0,0 +1,223 @@
+import { r as registerInstance, h } from './index-1b1c55fe.js';
+
+const pnVirtualAgentCss = "#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{-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px;box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px}.pn-virtual-agent #CentionChatQuestion{-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px inset;box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px inset;height:24px;padding:5px 10px}";
+
+let PnVirtualAgent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** 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"))));
+    }
+  }
+};
+PnVirtualAgent.style = pnVirtualAgentCss;
+
+export { PnVirtualAgent as pn_virtual_agent };

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

@@ -0,0 +1,178 @@
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-1b1c55fe.js';
+
+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',
+  },
+};
+
+const pnZipcodeSearchCss = "pn-zipcode-search{display:block;color:#5E554A}pn-zipcode-search .search-results{margin-top:1em;padding:0.5em}pn-zipcode-search .search-results>h3,pn-zipcode-search .search-results h2{font-weight:normal}pn-zipcode-search .text-row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}pn-zipcode-search .text-row+.text-row{margin-top:1em}pn-zipcode-search .text-row>*+*{margin-left:0.25em}pn-zipcode-search .error-text{color:#A70707;padding:0.5em 1em}pn-zipcode-search pn-search-field{width:100%}@media screen and (max-width: 30em){pn-zipcode-search .text-row:nth-child(-n+2){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:unset;align-items:unset}pn-zipcode-search .text-row:nth-child(-n+2) .delivery-date{margin-left:auto;margin-top:0.25em}}";
+
+let PnZipCodeSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.searchsuccessful = createEvent(this, "searchsuccessful", 7);
+    /** 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()));
+  }
+};
+PnZipCodeSearch.style = pnZipcodeSearchCss;
+
+export { PnZipCodeSearch as pn_zipcode_search };