@postnord/web-components
Version:
PostNord Web Components
180 lines (179 loc) • 6.72 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { translations } from "./translations";
import { sv, uuidv4, awaitTopbar } from "../../../index";
/** Check the delivery date for letters, newspapers and direct mail that are distributed every second day. */
export class PnZipcodeSearch {
/** This language property will update when pnTopbar loads */
searchId = `pn-zipcode-${uuidv4()}`;
hostElement;
validZipCode;
loading = false;
showResult = false;
zipCodeSearchResult = {
delivery: '',
upcoming: '',
city: '',
postalCode: '',
};
error = false;
errorMessage;
/** The `language` property will be prioritized before the pnTopbar language. */
language = null;
/** Set a pre initialized value. */
value;
/** Event fired when search has result */
searchsuccessful;
async componentWillLoad() {
if (this.language === null)
await awaitTopbar(this.hostElement);
if (!!this.value)
this.handleSearch(this.value);
}
translation(key) {
return translations[key][this.language || sv];
}
handleSearch(value) {
this.value = value;
this.validateZipCode();
if (this.error) {
this.errorMessage = 'VALIDATION_ERROR_MESSAGE';
return;
}
this.zipCodeSearch();
}
async zipCodeSearch() {
this.loading = true;
await fetch(`https://portal.postnord.com/api/sendoutarrival/closest?postalCode=${this.validZipCode}`)
.then(response => response.json())
.then(data => {
this.showResult = true;
this.zipCodeSearchResult = data;
this.searchsuccessful.emit(true);
})
.catch(() => {
this.error = true;
this.errorMessage = 'SERVER_ERROR_MESSAGE';
this.searchsuccessful.emit(false);
})
.finally(() => {
this.loading = false;
});
}
validateZipCode() {
// Removes spaces and dashes
const formatValue = this.value ? this.value.replace(/[ -]/gi, '') : '';
const validRegex = /^\d{5}$/;
const valid = validRegex.test(formatValue);
this.error = !valid;
if (valid) {
this.validZipCode = formatValue;
}
}
renderSearchResult() {
if (!this.loading && !this.error && this.showResult) {
return (h("output", { class: "pn-search-results", htmlFor: this.searchId }, h("p", { class: "text-row" }, h("span", null, this.translation('CLOSEST_DELIVERY_DATE')), h("h3", { class: "delivery-date" }, this.zipCodeSearchResult.delivery)), h("p", { class: "text-row" }, h("span", null, this.translation('NEXT_DELIVERY_DATE')), h("h3", { class: "delivery-date" }, this.zipCodeSearchResult.upcoming)), h("p", { class: "text-row" }, h("span", null, this.translation('ZIP_CODE')), h("h3", null, this.zipCodeSearchResult.postalCode, ", ", this.zipCodeSearchResult.city || 'N/A'))));
}
}
renderErrorMessage() {
if (this.error && !this.loading) {
return (h("p", { class: "pn-error-text", role: "alert" }, h("small", null, this.translation(this.errorMessage))));
}
}
render() {
return (h(Host, { key: 'b9314bbca808c725bc074d1dc9e58223bb551468' }, h("pn-search-field", { key: '4c7eaf8c96aa36e17c546371345c7aac6a0c5ee7', label: this.translation('PLACEHOLDER_TEXT'), value: this.value, searchid: this.searchId, loading: this.loading, button: "icon", buttonLabel: this.translation('SEARCH'), placeholder: this.translation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e.detail) }), 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 {
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnZipCodeSearchLanguages",
"resolved": "\"\" | \"en\" | \"sv\"",
"references": {
"PnZipCodeSearchLanguages": {
"location": "import",
"path": "@/index",
"id": "src/index.ts::PnZipCodeSearchLanguages",
"referenceLocation": "PnZipCodeSearchLanguages"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The `language` property will be prioritized before the pnTopbar language."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "language",
"defaultValue": "null"
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a pre initialized value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
}
};
}
static get states() {
return {
"validZipCode": {},
"loading": {},
"showResult": {},
"zipCodeSearchResult": {},
"error": {},
"errorMessage": {}
};
}
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": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
}