@postnord/web-components
Version:
PostNord Web Components
130 lines (129 loc) • 4.91 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { translations } from "./translations";
import { sv, awaitTopbar } from "../../../index";
export class PnOcrSearch {
hostElement;
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)
return 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: '26af6aaf9b8679a5a7fafbd512359cd9123005ad' }, h("pn-search-field", { key: 'ecbd20d488504ba0138582cecc070e7ac73f4208', 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 is() { return "pn-ocr-search"; }
static get originalStyleUrls() {
return {
"$": ["pn-ocr-search.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-ocr-search.css"]
};
}
static get properties() {
return {
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnLanguages",
"resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
"references": {
"PnLanguages": {
"location": "import",
"path": "@/index",
"id": "src/index.ts::PnLanguages"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The `language` property will be prioritized before the pnTopbar language."
},
"getter": false,
"setter": false,
"attribute": "language",
"reflect": false,
"defaultValue": "null"
}
};
}
static get states() {
return {
"loading": {},
"error": {},
"ocrNumber": {},
"searchSuccess": {},
"invalidOcrNumber": {}
};
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-ocr-search.js.map