sprinque-js-sdk-wip/dist/src/step-6/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 { BORDER_COLOR } from '../styles';
export const getStep6 = () => `
  <div class='${SPRINQUE_STEP_CLASS}-6' style='display: none'>
    <div class='sprinque-header'>
      <h3>${i18next.t('success.title')}</h3>
    </div>
    <div id='sp-form-step-6'>
      ${LOADER}
      <div class='justify-between'>${i18next.t('success.creditDecision')}: <strong><span id='buyer-credit-decision'>-</span></strong>
      </div>
      <div class='justify-between'>${i18next.t('success.paymentTerms')}: <strong><span id='buyer-net-terms'>-</span></strong>
      </div>
      
      <div style='padding: 10px 0; margin: 10px 0;border-top: 1px solid ${BORDER_COLOR}; border-bottom: 1px solid ${BORDER_COLOR};'>
        ${i18next.t('success.description')}
      </div>
     
      <!-- Order info -->
      <div id='order-info' style='display: none'>
        <h3>${i18next.t('success.orderPlaced')}</h3>
        <div class='justify-between'>${i18next.t('success.transactionId')}: <strong id='order-id'></strong></div>
      </div>
      
      <br>
      <br>
      <div class='${VALIDATION_ERROR_CLASS_PREFIX}6'></div>
      
    </div> 
  </div>
`;