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

UI kit to implement Pay by Invoice with Sprinque

import { isValidStep } from './validation';
import { CUSTOM_NAVIGATION_EVENT } from './constants';
import { request } from './request';
import { ADDRESS_CITY, ADDRESS_LINE_1, ADDRESS_LINE_2, ADDRESS_ZIP, COMPANY_NAME, COUNTRY_SELECT, REG_NUMBER, STEP_1_NEXT_BTN, USER_EMAIL, USER_NAME, USER_PHONE, USER_SURNAME, } from './selectors';
import { displayCorrectLabelForBusinessSearch } from './helpers';
export const registerNavBtnListeners = (shadowRoot, onChangeStep) => {
    shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelectorAll('.nav').forEach(item => {
        item.addEventListener('click', () => {
            const step = item.getAttribute('data-to-step');
            // validation
            const stepToValidate = item.getAttribute('data-validate-step');
            if (stepToValidate && !isValidStep(stepToValidate, shadowRoot)) {
                return;
            }
            // handle step change
            onChangeStep(step);
            // dispatch custom event
            const event = new CustomEvent(`${CUSTOM_NAVIGATION_EVENT}${step}`, { bubbles: true });
            item.dispatchEvent(event);
        });
    });
};
export const automaticallyGoToStep = (step, onChangeStep, shadowRoot) => {
    const event = new CustomEvent(`${CUSTOM_NAVIGATION_EVENT}${step}`, { bubbles: true });
    shadowRoot.dispatchEvent(event);
    onChangeStep(`${step}`);
};
export const setInitialBuyerInfo = async (shadowRoot, buyerId, onChangeStep) => {
    var _a, _b, _c;
    // get buyer details
    const buyerResponse = await request(`buyers/${buyerId}`, shadowRoot, undefined, 'GET');
    const { address: { address_line1, address_line2, city, country: { code }, zip_code, }, business_name, registration_number, buyer_users, } = buyerResponse;
    // set values for step 1 (company)
    shadowRoot.querySelector(COUNTRY_SELECT).value = code;
    shadowRoot.querySelector(COMPANY_NAME).value = business_name;
    shadowRoot.querySelector(REG_NUMBER).value = registration_number;
    (_a = shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelector(COMPANY_NAME)) === null || _a === void 0 ? void 0 : _a.removeAttribute('disabled');
    (_b = shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelector(REG_NUMBER)) === null || _b === void 0 ? void 0 : _b.removeAttribute('disabled');
    const nextBtn = shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelector(STEP_1_NEXT_BTN);
    nextBtn === null || nextBtn === void 0 ? void 0 : nextBtn.removeAttribute('disabled');
    // display "search by" label
    const { searchByVat = '' } = (_c = shadowRoot.getElementById(`country-${code}`)) === null || _c === void 0 ? void 0 : _c.dataset;
    displayCorrectLabelForBusinessSearch(searchByVat, shadowRoot);
    // set values for step 2 (address)
    shadowRoot.querySelector(ADDRESS_LINE_1).value = address_line1;
    shadowRoot.querySelector(ADDRESS_LINE_2).value = address_line2;
    shadowRoot.querySelector(ADDRESS_CITY).value = city;
    shadowRoot.querySelector(ADDRESS_ZIP).value = zip_code;
    // set values for step 3 (user)
    const user = buyer_users.find(({ email_otp_validated }) => email_otp_validated) || buyer_users[0];
    shadowRoot.querySelector(USER_NAME).value = user.first_name;
    shadowRoot.querySelector(USER_SURNAME).value = user.last_name;
    shadowRoot.querySelector(USER_EMAIL).value = user.email;
    shadowRoot.querySelector(USER_PHONE).value = user.phone;
    // move to step 4 automatically
    automaticallyGoToStep('4', onChangeStep, shadowRoot);
};