sprinque-js-sdk-wip/dist/src/helpers.js

UI kit to implement Pay by Invoice with Sprinque

import { SPRINQUE_STEP_CLASS } from './constants';
import { API_ERROR_ELEM, COMPANY_NAME, SEARCH_TYPE } from './selectors';
export const removeSprinqueModal = () => {
    const element = document.getElementsByTagName('sprinque-modal')[0];
    if (element)
        element.remove();
};
export const registerModalBgListener = (shadowRoot) => {
    const modalWrapper = shadowRoot.querySelector('.sprinque-modal-wrapper');
    if (modalWrapper)
        modalWrapper.addEventListener('click', removeSprinqueModal);
    // close by icon
    const closeBtn = shadowRoot.querySelector('.close-btn');
    if (closeBtn)
        closeBtn.addEventListener('click', removeSprinqueModal);
    // stop modal propagation
    const modal = shadowRoot.querySelector('.sprinque-modal');
    if (modal)
        modal.addEventListener('click', e => e.stopPropagation());
};
export const showNextStep = (shadowRoot, currentStep, nextStep) => {
    const currentElement = shadowRoot.querySelector(`.${SPRINQUE_STEP_CLASS}-${currentStep}`);
    const nextElement = shadowRoot.querySelector(`.${SPRINQUE_STEP_CLASS}-${nextStep}`);
    currentElement.style.display = 'none';
    nextElement.style.display = 'block';
};
export const debounce = (callback) => {
    // @ts-ignore
    let timeout;
    return (value) => {
        // @ts-ignore
        clearTimeout(timeout);
        timeout = setTimeout(() => callback(value), 500);
    };
};
export const onSelectBusiness = (
// @ts-ignore
shadowRoot, name, address, regNumber, creditBureauId) => {
    // set business name
    if (name)
        shadowRoot.getElementById(COMPANY_NAME.replace('#', '')).value = name;
    // set credit bureau id from search
    if (creditBureauId)
        shadowRoot.getElementById(COMPANY_NAME.replace('#', '')).dataset.creditBureauId =
            creditBureauId;
    // set reg number
    if (regNumber)
        shadowRoot.getElementById('sp-reg-number').value = regNumber;
    // set address
    if (address) {
        try {
            const { address_line_1, address_line_2, city, zipcode } = JSON.parse(address);
            if (address_line_1)
                shadowRoot.getElementById('sp-address-line1').value = address_line_1;
            if (address_line_2)
                shadowRoot.getElementById('sp-address-line2').value = address_line_2;
            if (city)
                shadowRoot.getElementById('sp-address-city').value = city;
            if (zipcode)
                shadowRoot.getElementById('sp-address-zip').value = zipcode;
        }
        catch (e) {
            console.log(`Sprinque > failed to parse address for ${name}`);
        }
    }
    // clear search results
    shadowRoot.getElementById('sprinque-businesses').innerHTML = '';
};
export const getElemValueBySelector = (selector, shadowRoot) => shadowRoot.querySelector(selector).value;
export const displayCorrectLabelForBusinessSearch = (searchByVat, shadowRoot) => {
    const isSearchByVat = searchByVat === 'true';
    shadowRoot.getElementById(SEARCH_TYPE.replace('#', '')).style.display =
        isSearchByVat ? 'inline-flex' : 'none';
    shadowRoot.querySelector(`[for=${COMPANY_NAME.replace('#', '')}]`).style.display = isSearchByVat ? 'none' : 'block';
};
export const displayApiError = (message, shadowRoot) => {
    const elem = shadowRoot.querySelector(API_ERROR_ELEM);
    elem.style.display = 'block';
    elem.innerHTML = message;
    // hide after 10 sec
    setTimeout(() => {
        elem.style.display = 'none';
    }, 10 * 1000);
};
export const parseSpinqueErrorResponse = (response) => {
    if (!response || !response.errors)
        return 'Failed to parse backend error';
    let errorsString = '';
    Object.entries(response.errors).forEach(([key, valArr]) => (errorsString += `${key} > ${valArr.join(', ')} `));
    return errorsString;
};