@postnord/web-components
Version:
PostNord Web Components
183 lines (177 loc) • 7.01 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4, 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 = {
CLOSEST_DELIVERY_DATE: {
en: 'Closest delivery date:',
sv: 'Nästa utdelningsdag:',
},
NEXT_DELIVERY_DATE: {
en: 'Next delivery date:',
sv: 'Kommande utdelningsdag:',
},
ZIP_CODE: {
en: 'Zip code:',
sv: 'Postnummer:',
},
VALIDATION_ERROR_MESSAGE: {
en: 'Zip code not valid',
sv: 'Postnumret är inte giltigt',
},
SERVER_ERROR_MESSAGE: {
en: 'Could not find zip code',
sv: 'Kan inte hitta postnumret',
},
PLACEHOLDER_TEXT: {
en: 'Search for a zip code',
sv: 'Sök på ett postnummer',
},
SEARCH: {
en: 'Search',
sv: 'Sök',
},
};
const pnZipcodeSearchCss = "pn-zipcode-search{display:block;color:#5e554a}pn-zipcode-search .pn-search-results{display:flex;flex-direction:column;gap:1em;padding:0 0.75em}pn-zipcode-search .pn-search-results span{color:#5e554a}pn-zipcode-search .pn-search-results h3{color:#2d2013}pn-zipcode-search .pn-error-text{color:#a70707;padding:0 0.75em}pn-zipcode-search>pn-search-field{width:100%;margin-bottom:1em}";
const PnZipcodeSearch$1 = /*@__PURE__*/ proxyCustomElement(class PnZipcodeSearch extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.searchsuccessful = createEvent(this, "searchsuccessful", 7);
}
/** This language property will update when pnTopbar loads */
searchId = `pn-zipcode-${uuidv4()}`;
get hostElement() { return this; }
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: '9df0c8efe6e90043512bee25d090908439adbdbf' }, h("pn-search-field", { key: 'f5ae391159851ded1851bffd7925e049683c9880', 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 style() { return pnZipcodeSearchCss; }
}, [256, "pn-zipcode-search", {
"language": [1],
"value": [1025],
"validZipCode": [32],
"loading": [32],
"showResult": [32],
"zipCodeSearchResult": [32],
"error": [32],
"errorMessage": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-zipcode-search", "pn-button", "pn-icon", "pn-search-field", "pn-spinner"];
components.forEach(tagName => { switch (tagName) {
case "pn-zipcode-search":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnZipcodeSearch$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 PnZipcodeSearch = PnZipcodeSearch$1;
const defineCustomElement = defineCustomElement$1;
export { PnZipcodeSearch, defineCustomElement };
//# sourceMappingURL=pn-zipcode-search.js.map
//# sourceMappingURL=pn-zipcode-search.js.map