sprinque-js-sdk-wip/dist/src/step-4/layout.js

UI kit to implement Pay by Invoice with Sprinque

import i18next from 'i18next';
import { SPRINQUE_STEP_CLASS, VALIDATION_ERROR_CLASS_PREFIX } from '../constants';
import { LOADER } from '../loader';
import { STYLE } from './style';
import { USER_EMAIL_TO } from '../selectors';
export const getStep4 = () => `
  ${STYLE}
  <div class='${SPRINQUE_STEP_CLASS}-4' style='display: none'>
    <div class='sprinque-header'>
      <h3>${i18next.t('otp.title')}</h3>
      <span class='sprinque-stepper'>${i18next.t('general.step')} 4/4</span>
    </div>
    <p>
      ${i18next.t('otp.description')} <strong id=${USER_EMAIL_TO.replace('#', '')}></strong>
    </p>
    <div id='sp-form-step-4'>
      ${LOADER}
      
      <!-- digits --> 
      <div id='sp-otp-digits'>
        <input class='sp-otp-digit sp-otp-1' type='number' maxlength='1' min="0" max='9'>
        <input class='sp-otp-digit sp-otp-2' type='number' maxlength='1' min="0" max='9'>
        <input class='sp-otp-digit sp-otp-3' type='number' maxlength='1' min="0" max='9'>
        <input class='sp-otp-digit sp-otp-4' type='number' maxlength='1' min="0" max='9'>
        <input class='sp-otp-digit sp-otp-5' type='number' maxlength='1' min="0" max='9'>
      </div>
      
      <div class='${VALIDATION_ERROR_CLASS_PREFIX}4'></div>
      
      <div class='justify-between'>
        <button class='nav secondary' data-to-step='3'><i class="sp-arrow sp-left"></i>
          ${i18next.t('general.back')}
        </button>
        <button style='display:none' class='nav' data-validate-step='4' data-to-step='5'>
          ${i18next.t('general.next')}
          <i class="sp-arrow sp-right"></i>
        </button>
        
        <button disabled id='confirm-otp-code'>${i18next.t('general.confirm')}</button>
      </div>
      
      <p style='margin: 10px 0'>
        ${i18next.t('otp.notReceivedText')}
        <span id='resend-code' class='disabled'>
          ${i18next.t('otp.resendCode')}
          <span id='resend-code-desc'> (${i18next.t('otp.timerBeforeText')} 
          <span id='resend-code-sec'>30</span> ${i18next.t('otp.timerAfterText')})</span>
        </span>
      </p>
    </div> 
  </div>
`;