sprinque-js-sdk-wip/dist/src/step-5/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 { SUPPORTED_NET_TERMS } from '../constants';
import { STYLE_STEP_5 } from './style';
export const getStep5 = () => `
  ${STYLE_STEP_5}
  <div class='${SPRINQUE_STEP_CLASS}-5' style='display: none'>
    <div class='sprinque-header'>
      <h3>${i18next.t('order.title')}</h3>
    </div>
    <p>${i18next.t('order.description')}</p>
    
    <div id='sp-form-step-5'>
      ${LOADER}
      <div class='justify-between' style='margin-top: 20px'>
        <span><strong>${i18next.t('order.totalAmount')}</strong></span>
        <strong>
          <span id='order-total-currency'>-</span>
          <span id='order-total-amount'>-</span>
        </strong>
      </div>
      
      <!-- select payment terms -->
      ${SUPPORTED_NET_TERMS.map(term => `<label style='display: none' for="${term}" class='payment-term-item justify-between'>
              <div>
                <input type="radio" id="${term}" name="net-terms" value="${term}">
                <span>${i18next.t(`order.${term}`)}</span>
                <span class="checkmark"></span>
              </div>
              <div class="payment-term-price ${term}">-</div>
          </label>`).join('')} <!-- join will hide comma -->
      
      <div class='${VALIDATION_ERROR_CLASS_PREFIX}5'></div>
      
      <div class='justify-between'>
        <button style='width: 100%' id='place-order' class='nav' data-validate-step='5' data-to-step='6'>
          ${i18next.t('order.confirmOrder')}
        </button>
      </div>
      
    </div> 
  </div>
`;