sprinque-js-sdk-wip/dist/src/inject-web-component.js

UI kit to implement Pay by Invoice with Sprinque

import { showNextStep, registerModalBgListener } from './helpers';
import { registerStep1Listeners } from './step-1/form-listeners';
import { registerStep3Listeners } from './step-3/form-listeners';
import { registerStep4Listeners } from './step-4/form-listeners';
import { getTemplate } from './template';
import { registerNavBtnListeners, setInitialBuyerInfo } from './listeners';
import { registerStep2Listeners } from './step-2/form-listeners';
import { registerStep5Listeners } from './step-5/form-listeners';
export class SprinqueModal extends HTMLElement {
    constructor() {
        super();
        this.changeStep = (value = '1') => {
            showNextStep(this.shadowRoot, this.step, value);
            this.step = value;
        };
        this.step = '1';
    }
    async connectedCallback() {
        this.attachShadow({ mode: 'open' });
        const lang = this.getAttribute('lang') || 'en';
        if (this.shadowRoot) {
            this.shadowRoot.appendChild(getTemplate(lang).content.cloneNode(true));
        }
        const buyerId = this.getAttribute('buyer-id');
        if (this.shadowRoot) {
            // close on the wrapper click
            registerModalBgListener(this.shadowRoot);
            // STEP 1
            await registerStep1Listeners(this.shadowRoot, lang, buyerId);
            // STEP 2
            registerStep2Listeners(this.shadowRoot);
            // STEP 3
            registerStep3Listeners(this.shadowRoot);
            // STEP 4
            registerStep4Listeners(this.shadowRoot, this.changeStep);
            // STEP 5
            registerStep5Listeners(this.shadowRoot);
            // navigation buttons
            registerNavBtnListeners(this.shadowRoot, this.changeStep);
            if (buyerId) {
                await setInitialBuyerInfo(this.shadowRoot, buyerId, this.changeStep);
            }
        }
    }
}