sprinque-js-sdk-wip/dist/src/step-2/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 { ADDRESS_CITY, ADDRESS_LINE_1, ADDRESS_LINE_2, ADDRESS_ZIP } from '../selectors';
export const getStep2 = () => `
  <div class='${SPRINQUE_STEP_CLASS}-2' style='display: none'>
    <div class='sprinque-header'>
      <h3>${i18next.t('address.title')}</h3>
      <span class='sprinque-stepper'>${i18next.t('general.step')} 2/4</span>
    </div>
    <p>${i18next.t('address.description')}</p>
    <div id='sp-form-step-2'>
      
      <!-- address line 1 -->
      <label for="sp-address-line1">${i18next.t('address.line1')}*</label>
      <input type="text" id=${ADDRESS_LINE_1.replace('#', '')} required name="sp-address-line1">
      <!-- address line 2 -->
      <label for="sp-address-line2">${i18next.t('address.line2')}</label>
      <input type="text" id=${ADDRESS_LINE_2.replace('#', '')} required name="sp-address-line2">
      <!-- city -->
      <label for="sp-address-city">${i18next.t('address.city')}*</label>
      <input type="text" id=${ADDRESS_CITY.replace('#', '')} required name="sp-address-city">
      <!-- zip -->
      <label for="sp-address-zip">${i18next.t('address.zip')}*</label>
      <input type="text" id=${ADDRESS_ZIP.replace('#', '')} required name="sp-address-zip">
      
      <br>
      <br>
      <div class='${VALIDATION_ERROR_CLASS_PREFIX}2'></div>
      <div class='justify-between'>
        <button class='nav secondary' data-to-step='1'><i class="sp-arrow sp-left"></i>
          ${i18next.t('general.back')}
        </button>
        <button class='nav' data-validate-step='2' data-to-step='3'>
          ${i18next.t('general.next')}
          <i class="sp-arrow sp-right"></i>
        </button>
      </div>
    </div> 
  </div>
`;