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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, g as getElement, h, a as Host } from './index-5606614b.js';
import { j as awaitTopbar, s as sv } from './helpers-88f72b54.js';

const translations = {
    SEARCH_BUTTON: {
        da: 'Search',
        en: 'Search',
        fi: 'Search',
        no: 'Search',
        sv: 'Sök',
    },
    SEARCH_SUCCESS: {
        da: 'Your OCR number is',
        en: 'Your OCR number is',
        fi: 'Your OCR number is',
        no: 'Your OCR number is',
        sv: 'Ditt OCR-nummer är',
    },
    ERROR_INVALID_LICENSE_NUMBER: {
        da: 'Invalid license number',
        en: 'Invalid license number',
        fi: 'Invalid license number',
        no: 'Invalid license number',
        sv: 'Ogiltligt licensnummer',
    },
    ERROR_NO_RESULTS: {
        da: 'The search did not generate any results',
        en: 'The search did not generate any results',
        fi: 'The search did not generate any results',
        no: 'The search did not generate any results',
        sv: 'Sökningen genererade inga träffar',
    },
    ERROR_REASON_HEADER: {
        da: 'It may be due to:',
        en: 'It may be due to:',
        fi: 'It may be due to:',
        no: 'It may be due to:',
        sv: 'Det kan bero på:',
    },
    ERROR_REASON_ONE: {
        da: 'We could not find that license number',
        en: 'We could not find that license number',
        fi: 'We could not find that license number',
        no: 'We could not find that license number',
        sv: 'Vi hittar inget sådant licensnummer',
    },
    ERROR_REASON_TWO: {
        da: 'Check the information and try again.',
        en: 'Check the information and try again.',
        fi: 'Check the information and try again.',
        no: 'Check the information and try again.',
        sv: 'Kontrollera uppgifterna och försök igen.',
    },
    PLACEHOLDER_TEXT: {
        da: 'License number 6 digits',
        en: 'License number 6 digits',
        fi: 'License number 6 digits',
        no: 'License number 6 digits',
        sv: 'Licensnummer 6 tecken',
    },
};

const pnOcrSearchCss = "pn-ocr-search .bold{font-weight:700}pn-ocr-search .search-results,pn-ocr-search .error-text-container{padding:1em 0.5em}pn-ocr-search .invalid-text-container{padding:0.5em 1em}pn-ocr-search .invalid-text-container .invalid-ocr{color:#a70707}";
const PnOcrSearchStyle0 = pnOcrSearchCss;

const PnOcrSearch = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.loading = false;
        this.error = false;
        this.ocrNumber = undefined;
        this.searchSuccess = false;
        this.invalidOcrNumber = false;
        this.language = null;
    }
    get hostElement() { return getElement(this); }
    async componentWillLoad() {
        if (this.language === null)
            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: '3da362d72860e477c5211a457511d296bbbad69b' }, h("pn-search-field", { key: 'dcf2a8893929940ad53bc82ce66af24e78d5f6ef', 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()));
    }
};
PnOcrSearch.style = PnOcrSearchStyle0;

export { PnOcrSearch as pn_ocr_search };

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