@postnord/web-components
Version:
PostNord Web Components
172 lines (166 loc) • 6.71 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4, j 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',
},
};
const pnZipcodeSearchCss = "pn-zipcode-search{display:block;color:#5e554a}pn-zipcode-search .search-results{display:flex;flex-direction:column;gap:1em;padding:0 0.75em}pn-zipcode-search .search-results span{color:#5e554a}pn-zipcode-search .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 PnZipcodeSearchStyle0 = pnZipcodeSearchCss;
const PnZipcodeSearch$1 = /*@__PURE__*/ proxyCustomElement(class PnZipcodeSearch extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.searchsuccessful = createEvent(this, "searchsuccessful", 7);
}
get hostElement() { return this; }
/** This language property will update when pnTopbar loads */
zipcodeId = `pn-zipcode-${uuidv4()}`;
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;
/** Event fired when search has result */
searchsuccessful;
async componentWillLoad() {
if (this.language === null)
return await awaitTopbar(this.hostElement);
}
getTranslation(key) {
return translations[key][this.language || sv];
}
handleSearch({ detail }) {
this.validateZipCode(detail);
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(value) {
// Removes spaces and dashes
const formatValue = value ? 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: "search-results", htmlFor: this.zipcodeId }, h("p", { class: "text-row" }, h("span", null, this.getTranslation('CLOSEST_DELIVERY_DATE')), h("h3", { class: "delivery-date" }, this.zipCodeSearchResult.delivery)), h("p", { class: "text-row" }, h("span", null, this.getTranslation('NEXT_DELIVERY_DATE')), h("h3", { class: "delivery-date" }, this.zipCodeSearchResult.upcoming)), h("p", { class: "text-row" }, h("span", null, this.getTranslation('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.getTranslation(this.errorMessage))));
}
}
render() {
return (h(Host, { key: '517f6030331e323f2e70aec9c29c1acd4f426b49' }, h("pn-search-field", { key: 'ceffe972b39e168f1ecd86f78eea95329a899d0a', label: this.getTranslation('PLACEHOLDER_TEXT'), searchid: this.zipcodeId, loading: this.loading, button: "none", placeholder: this.getTranslation('PLACEHOLDER_TEXT'), onSearch: e => this.handleSearch(e) }), this.renderSearchResult(), this.renderErrorMessage()));
}
static get style() { return PnZipcodeSearchStyle0; }
}, [0, "pn-zipcode-search", {
"language": [1],
"zipcodeId": [32],
"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