sprinque-js-sdk-wip/dist/src/step-3/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 { USER_EMAIL, USER_NAME, USER_PHONE, USER_SURNAME } from '../selectors';
import { STYLE_STEP_3 } from './style';
export const getStep3 = () => `
  <div class='${SPRINQUE_STEP_CLASS}-3' style='display: none'>
  <!-- styles for intl-tel-input -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/css/intlTelInput.css" integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
      ${STYLE_STEP_3}
      <!-- #styles for intl-tel-input -->
    <div class='sprinque-header'>
      <h3>${i18next.t('contact.title')}</h3>
      <span class='sprinque-stepper'>${i18next.t('general.step')} 3/4</span>
    </div>
    <p>${i18next.t('contact.description')}</p>
    <div id='sp-form-step-3'>
      
      <!-- First name -->
      <label for="sp-user-name">${i18next.t('contact.name')}*</label>
      <input type="text" id=${USER_NAME.replace('#', '')} required>
      <!-- Last name -->
      <label for="sp-user-surname">${i18next.t('contact.surname')}*</label>
      <input type="text" id=${USER_SURNAME.replace('#', '')} required>
      <!-- Email -->
      <label for="sp-user-email">${i18next.t('contact.email')}*</label>
      <input type="text" id=${USER_EMAIL.replace('#', '')} required>
      <!-- Phone -->
      <label for="sp-user-phone">${i18next.t('contact.phone')}*</label>
      <input type="text" id=${USER_PHONE.replace('#', '')} required>
     
      
      <br>
      <br>
      <div class='${VALIDATION_ERROR_CLASS_PREFIX}3'></div>
      
      <div class='justify-between'>
        <button class='nav secondary' data-to-step='2'><i class="sp-arrow sp-left"></i>${i18next.t('general.back')}</button>
        <button class='nav' data-validate-step='3' data-to-step='4'>${i18next.t('general.next')}<i class="sp-arrow sp-right"></i></button>
      </div>
    </div> 
  </div>
`;