@postnord/web-components/components/pn-ocr-search.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as n,HTMLElement as t,h as r,Host as s}from"@stencil/core/internal/client";import{k as i,s as a}from"./helpers.js";import{d as c}from"./pn-button2.js";import{d as o}from"./pn-icon2.js";import{d as h}from"./pn-search-field2.js";import{d as l}from"./pn-spinner2.js";const d={SEARCH_BUTTON:{da:"Search",en:"Search",fi:"Search",no:"Search",sv:"Sök"},SEARCH_SUCCESS:{da:"Your OCR number is",en:"Your OCR number is",fi:"Your OCR number is",no:"Your OCR number is",sv:"Ditt OCR-nummer är"},ERROR_INVALID_LICENSE_NUMBER:{da:"Invalid license number",en:"Invalid license number",fi:"Invalid license number",no:"Invalid license number",sv:"Ogiltligt licensnummer"},ERROR_NO_RESULTS:{da:"The search did not generate any results",en:"The search did not generate any results",fi:"The search did not generate any results",no:"The search did not generate any results",sv:"Sökningen genererade inga träffar"},ERROR_REASON_HEADER:{da:"It may be due to:",en:"It may be due to:",fi:"It may be due to:",no:"It may be due to:",sv:"Det kan bero på:"},ERROR_REASON_ONE:{da:"We could not find that license number",en:"We could not find that license number",fi:"We could not find that license number",no:"We could not find that license number",sv:"Vi hittar inget sådant licensnummer"},ERROR_REASON_TWO:{da:"Check the information and try again.",en:"Check the information and try again.",fi:"Check the information and try again.",no:"Check the information and try again.",sv:"Kontrollera uppgifterna och försök igen."},PLACEHOLDER_TEXT:{da:"License number 6 digits",en:"License number 6 digits",fi:"License number 6 digits",no:"License number 6 digits",sv:"Licensnummer 6 tecken"}},u=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}get hostElement(){return this}loading=!1;error=!1;ocrNumber;searchSuccess=!1;invalidOcrNumber=!1;language=null;async componentWillLoad(){null===this.language&&await i(this.hostElement)}getTranslation(e){return d[e][this.language||a]}handleSearch(e){this.invalidOcrNumber=!1,this.searchSuccess=!1,this.error=!1;const n=this.validateOcrNumber(e.detail);n.error?this.invalidOcrNumber=!0:this.ocrNumberSearch(n.value)}async ocrNumberSearch(e){this.loading=!0,await fetch("https://portal.postnord.com/public-service/api/ocr?key="+e).then((e=>e.json())).then((e=>{this.ocrNumber=e.newOcr,this.searchSuccess=!0})).catch((()=>{this.error=!0,this.searchSuccess=!1})).finally((()=>{this.loading=!1}))}validateOcrNumber(e){const n=e?e.replace(/[ -]/gi,""):"";return{error:RegExp(/\D+/).test(n)||6!==n.length,value:n}}renderSearchResult(){if(!this.loading&&!this.error&&this.searchSuccess)return r("div",{class:"search-results"},this.getTranslation("SEARCH_SUCCESS"),": ",r("b",null,this.ocrNumber))}renderErrorMessage(){return this.invalidOcrNumber&&!this.loading?r("div",{class:"invalid-text-container"},r("p",{class:"invalid-ocr"},this.getTranslation("ERROR_INVALID_LICENSE_NUMBER"))):this.error&&!this.loading?r("div",{class:"error-text-container"},r("p",{class:"bold"},this.getTranslation("ERROR_NO_RESULTS")),r("p",{class:"bold"},this.getTranslation("ERROR_REASON_HEADER")),r("p",null,this.getTranslation("ERROR_REASON_ONE")),r("p",null,this.getTranslation("ERROR_REASON_TWO"))):void 0}render(){return r(s,{key:"edf8696a2d3f115868f13d3bfa9c5e9c4128426c"},r("pn-search-field",{key:"b54f8575a5ebdd518e4082f78799f417448d53e9",loading:this.loading,label:this.getTranslation("SEARCH_BUTTON"),button:"icon",buttonLabel:this.getTranslation("SEARCH_BUTTON"),placeholder:this.getTranslation("PLACEHOLDER_TEXT"),onSearch:e=>this.handleSearch(e)}),this.renderSearchResult(),this.renderErrorMessage())}static get style(){return`${e("pn-ocr-search")} .bold{font-weight:700}${e("pn-ocr-search")} .search-results,${e("pn-ocr-search")} .error-text-container{padding:1em 0.5em}${e("pn-ocr-search")} .invalid-text-container{padding:0.5em 1em}${e("pn-ocr-search")} .invalid-text-container .invalid-ocr{color:#a70707}`}},[512,"pn-ocr-search",{language:[1],loading:[32],error:[32],ocrNumber:[32],searchSuccess:[32],invalidOcrNumber:[32]}]),m=u,R=function(){"undefined"!=typeof customElements&&["pn-ocr-search","pn-button","pn-icon","pn-search-field","pn-spinner"].forEach((n=>{switch(n){case"pn-ocr-search":customElements.get(e(e(n)))||customElements.define(e(e(n)),u);break;case"pn-button":customElements.get(e(e(n)))||c();break;case"pn-icon":customElements.get(e(e(n)))||o();break;case"pn-search-field":customElements.get(e(e(n)))||h();break;case"pn-spinner":customElements.get(e(e(n)))||l()}}))};export{m as PnOcrSearch,R as defineCustomElement}