@postnord/web-components/esm/pn-zipcode-search.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-5606614b.js';
import { u as uuidv4, j as awaitTopbar, s as sv } from './helpers-88f72b54.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 PnZipcodeSearchStyle0 = pnZipcodeSearchCss;

const PnZipcodeSearch = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.searchsuccessful = createEvent(this, "searchsuccessful", 7);
        this.validZipCode = undefined;
        this.loading = false;
        this.showResult = false;
        this.zipCodeSearchResult = {
            delivery: '',
            upcoming: '',
            city: '',
            postalCode: '',
        };
        this.error = false;
        this.errorMessage = undefined;
        this.language = null;
        this.value = undefined;
    }
    /** This language property will update when pnTopbar loads */
    searchId = `pn-zipcode-${uuidv4()}`;
    get hostElement() { return getElement(this); }
    /** 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: '6ced0525306ff0ec238e08786e482e8101bff4eb' }, h("pn-search-field", { key: '3dd3987230908a344c0535497a0f957c02873c7a', 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()));
    }
};
PnZipcodeSearch.style = PnZipcodeSearchStyle0;

export { PnZipcodeSearch as pn_zipcode_search };

//# sourceMappingURL=pn-zipcode-search.entry.js.map