sprinque-js-sdk-wip/dist/src/step-1/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 { BILLING_EMAIL, COMPANY_NAME, COUNTRY_SELECT, REG_NUMBER, REG_NUMBER_ASTERISK, REG_NUMBER_WARNING, SEARCH_BY_NAME, SEARCH_BY_VAT, SEARCH_TYPE, } from '../selectors';
export const getStep1 = () => `
  ${STYLE}
  <div class='${SPRINQUE_STEP_CLASS}-1'>
    <div class='sprinque-header'>
      <h3>${i18next.t('business.title')}</h3>
      <span class='sprinque-stepper'>${i18next.t('general.step')} 1/4</span>
    </div>
    <p>${i18next.t('business.description')}</p>
    <div id='sp-form-step-1'>
      <!-- country select -->
      <label for=${COUNTRY_SELECT.replace('#', '')}>${i18next.t('business.country')}*</label>
      <select id=${COUNTRY_SELECT.replace('#', '')} required>
         <option value='' selected disabled>${i18next.t('business.loading')}...</option>
      </select>
      <div style='display: none' id=${SEARCH_TYPE.replace('#', '')} data-search-by='NAME'>
        <!-- by name -->
        <label for=${SEARCH_BY_NAME.replace('#', '')}>
          <input type="radio" id=${SEARCH_BY_NAME.replace('#', '')} name='search-by' checked>
          <span class="sp-checkmark"></span>${i18next.t('business.companyName')}
        </label>
        <!-- by vat id -->
        <label for=${SEARCH_BY_VAT.replace('#', '')}>
          <input type="radio" id=${SEARCH_BY_VAT.replace('#', '')} name='search-by'>
          <span class="sp-checkmark"></span>${i18next.t('business.vatId')}
        </label>
      </div>
      <!-- company name -->
      <label for=${COMPANY_NAME.replace('#', '')}>${i18next.t('business.companyName')}*</label>
      <input type="text" id=${COMPANY_NAME.replace('#', '')} disabled required placeholder='${i18next.t('business.search')}'>
      ${LOADER}
      <div id='sprinque-businesses'></div>
      <!-- reg number -->
      <label for=${REG_NUMBER.replace('#', '')}>
        ${i18next.t('business.registrationNumber')}
        <span id=${REG_NUMBER_ASTERISK.replace('#', '')}>*</span>
      </label>
      <input type="text" id=${REG_NUMBER.replace('#', '')} disabled>
      <!-- warning -->
      <div style='display: none' class='warning' id=${REG_NUMBER_WARNING.replace('#', '')}></div>
      <!-- billing email -->
      <label for=${BILLING_EMAIL.replace('#', '')}>${i18next.t('business.billingEmail')}*</label>
      <input type="text" id=${BILLING_EMAIL.replace('#', '')}>
      
      <br>
      <div class='${VALIDATION_ERROR_CLASS_PREFIX}1'></div>
      
      <div class='sprinque-text-right'>
        <button class='nav' data-validate-step='1' data-to-step='2' disabled>${i18next.t('general.next')}<i class="sp-arrow sp-right"></i></button>
      </div>
    </div> 
  </div>
`;