@postnord/web-components
Version:
PostNord Web Components
197 lines (191 loc) • 7.45 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { k as awaitTopbar, s as sv } from './helpers.js';
import { d as defineCustomElement$5 } from './pn-button2.js';
import { d as defineCustomElement$4 } from './pn-icon2.js';
import { d as defineCustomElement$3 } from './pn-search-field2.js';
import { d as defineCustomElement$2 } from './pn-spinner2.js';
const translations = {
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',
},
};
const pnOcrSearchCss = "pn-ocr-search .bold{font-weight:700}pn-ocr-search .search-results,pn-ocr-search .error-text-container{padding:1em 0.5em}pn-ocr-search .invalid-text-container{padding:0.5em 1em}pn-ocr-search .invalid-text-container .invalid-ocr{color:#a70707}";
const PnOcrSearch$1 = /*@__PURE__*/ proxyCustomElement(class PnOcrSearch extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
}
get hostElement() { return this; }
loading = false;
error = false;
ocrNumber;
searchSuccess = false;
invalidOcrNumber = false;
/** The `language` property will be prioritized before the pnTopbar language. */
language = null;
async componentWillLoad() {
if (this.language === null)
await awaitTopbar(this.hostElement);
}
getTranslation(key) {
return translations[key][this.language || sv];
}
handleSearch(e) {
// reset states
this.invalidOcrNumber = false;
this.searchSuccess = false;
this.error = false;
const validationResult = this.validateOcrNumber(e.detail);
if (validationResult.error) {
this.invalidOcrNumber = true;
return;
}
this.ocrNumberSearch(validationResult.value);
}
async ocrNumberSearch(ocrNumber) {
this.loading = true;
await fetch(`https://portal.postnord.com/public-service/api/ocr?key=${ocrNumber}`)
.then(response => response.json())
.then(data => {
this.ocrNumber = data.newOcr;
this.searchSuccess = true;
})
.catch(() => {
this.error = true;
this.searchSuccess = false;
})
.finally(() => {
this.loading = false;
});
}
validateOcrNumber(value) {
// Removes spaces and dashes
const formatValue = value ? value.replace(/[ -]/gi, '') : '';
// Looks for non-digits
const ocrRegex = new RegExp(/\D+/);
// Needs to be atleast 6 numbers
const error = ocrRegex.test(formatValue) || formatValue.length !== 6;
return { error, value: formatValue };
}
renderSearchResult() {
if (!this.loading && !this.error && this.searchSuccess) {
return (h("div", { class: "search-results" }, this.getTranslation('SEARCH_SUCCESS'), ": ", h("b", null, this.ocrNumber)));
}
}
renderErrorMessage() {
if (this.invalidOcrNumber && !this.loading) {
return (h("div", { class: "invalid-text-container" }, h("p", { class: "invalid-ocr" }, this.getTranslation('ERROR_INVALID_LICENSE_NUMBER'))));
}
if (this.error && !this.loading) {
return (h("div", { class: "error-text-container" }, h("p", { class: "bold" }, this.getTranslation('ERROR_NO_RESULTS')), h("p", { class: "bold" }, this.getTranslation('ERROR_REASON_HEADER')), h("p", null, this.getTranslation('ERROR_REASON_ONE')), h("p", null, this.getTranslation('ERROR_REASON_TWO'))));
}
}
render() {
return (h(Host, { key: '679c85a39114b09baf137d23a125135fb867f224' }, h("pn-search-field", { key: 'af2c176f119649e1180ed46dfc01b24f089689cc', 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 pnOcrSearchCss; }
}, [256, "pn-ocr-search", {
"language": [1],
"loading": [32],
"error": [32],
"ocrNumber": [32],
"searchSuccess": [32],
"invalidOcrNumber": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-ocr-search", "pn-button", "pn-icon", "pn-search-field", "pn-spinner"];
components.forEach(tagName => { switch (tagName) {
case "pn-ocr-search":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnOcrSearch$1);
}
break;
case "pn-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "pn-search-field":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "pn-spinner":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnOcrSearch = PnOcrSearch$1;
const defineCustomElement = defineCustomElement$1;
export { PnOcrSearch, defineCustomElement };
//# sourceMappingURL=pn-ocr-search.js.map
//# sourceMappingURL=pn-ocr-search.js.map