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

UI kit to implement Pay by Invoice with Sprinque

import { API_ERROR_ELEM } from './selectors';
const pj = require(process.env.NODE_ENV === 'development'
    ? '../../package.json'
    : '../package.json');
import { MAIN_STYLES } from './styles';
import { getStep1 } from './step-1/layout';
import { getStep2 } from './step-2/layout';
import { getStep3 } from './step-3/layout';
import { getStep4 } from './step-4/layout';
import { getStep5 } from './step-5/layout';
import { getStep6 } from './step-6/layout';
import { FALLBACK_LOGO_URL } from './constants';
export const getTemplate = (lang) => {
    const template = document.createElement('template');
    template.innerHTML = `
    ${MAIN_STYLES}
    
    <div class="sprinque-modal-wrapper sdk-lang-${lang}">
      <div class="sprinque-modal">
        <!-- logo -->
        <div class='sprinque-logo-wrapper'>
          <img class='sprinque-logo' src='${FALLBACK_LOGO_URL}' alt='b2b logo'/>
        </div>
        <span class="close-btn">&times;</span>
        ${getStep1()}
        ${getStep2()}
        ${getStep3()}
        ${getStep4()}
        ${getStep5()}
        ${getStep6()}
        <!-- api error -->
        <p class=${API_ERROR_ELEM.replace('.', '')} style='display: none'>Something went wrong.</p>
        <!-- powered by -->
        <div class='powered-by'>
          <div>Powered by <img class='sprinque-powered-img' src=${FALLBACK_LOGO_URL} alt='sprinque'></div>
          <div>v.${pj.version}</div>
        </div>
        
      </div>
    </div>`;
    return template;
};