GLD-DynamicTemplate

by ebottos

HTML

<div class="switchContainer">
  <span id="dtLabel">DEFAULT TEMPLATE</span> &nbsp; &nbsp;
  <label class="switch">
    <input type="checkbox" id="templateCheckbox" checked>
    <span class="slider round"></span>
  </label>
  &nbsp; &nbsp; <span id="ctLabel">CUSTOM TEMPLATE</span>
</div>
<hr />
<div class="header">
  <div class="logo">
    <img src="https://www.gliderpay.com/wp-content/uploads/2019/12/GLIDER_RGB_Brandmark_Navy_noborder.png" />
  </div>
  <div class="creditcards">
    <img src="https://meekimoney-customer-assets.s3-ap-southeast-2.amazonaws.com/images/payment-logos-visamastercard.png" style="width: 120px;" />
  </div>
  <div class="clear"></div>
</div>

<div id="introductionText">

</div>
<div id="gliderForm">
  <div class="formGroup" id="accountNumber">
    <div class="label">Account No.</div>
    <div class="value"></div>
    <div class="clear"></div>
  </div>
  <div class="formGroup" id="custom2">
    <div class="label"></div>
    <div class="value"></div>
    <div class="clear"></div>
  </div>
  <div class="formGroup" id="custom3">
    <div class="label"></div>
    <div class="value"></div>
    <div class="clear"></div>
  </div>
</div>

CSS

.header {
  padding: 15px 50px;
}

.header .logo {
  float: left;
  
}

.header .logo img{
  width: 180px;
  margin-top: 12px;
}

.header .creditcards {
  padding-top: 15px;
  float: right;
}

.clear {
  clear: both;
}

#introductionText {
  text-align: center;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  margin-bottom: 50px;
}

#introductionText h3 {
  font-weight: 500;
}

#introductionText h2 {
  font-size: 30px;
  font-weight: 300;
}

.switchContainer {
  width: 100%;
  text-align: center;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  line-height: 22px;
}

.switchContainer .bold {
  font-weight: 500;
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}


#gliderForm{
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  width: calc(100% -24px);
  background-color: #efeff4;
  padding: 18px 12px 50px 12px;
  display: none;
}

#gliderForm .formGroup{
  background-color: #e3e2e8;
  width: calc(100% -24px);
  padding: 18px 12px;
  margin-bottom: 12px;
}

#gliderForm .formGroup .label{
  float:...

JavaScript

let fields = {
  name: "John Doe",
  amount: 5000,
  account_number: "222222",
  company_name: "Green Energy",
  reference: "5353-XXXX",
  discount: "75%",
  due_date: "10/10/2020",
  custom1_label: "Originated By",
  custom1_value: "Green Energy",
  custom2_label: "Original amount",
  custom2_value: "$20,000.00",
  custom3_label: "Due Date",
  custom3_value: "10/10/2020"
  
}

/**
	Only allowed HTML tags in the template are <h2> <h3> <b> <i> <br> <small>
*/

let customTemplate = `
	<h2>{{name}}</h2>
  <br>
  Your outstanding debt is being managed by Glider
  <br><br>
  The matter relates to an invoice that originated with
  <h3>{{company_name}}</h3>
  for the account <b>{{reference}}</b>
  <br><br>
  We are offering a <b>{{discount}}</b> if the invoice is paid <b>in full</b> by {{due_date}}
  <br><br><br>
  To receive the discount, please pay
  <h2>{{amount}}</h2>
  <small>Contact [email protected] if you need more info</small>
`

/** 
	DON'T
  DON'T TOUCH BELOW HERE !!! 
  DON'T
  **/

let defaultTemplate = `
	<h2>{{name}}</h2>
  <br>
  Your outstanding debt is now with Glider
  <br><br><br>
  Amount
  <h2>{{amount}}</h2>
  {{custom1_label}}
  <h3>{{custom1_value}}</h3>
`

let template = setTemplate(defaultTemplate, customTemplate)
render(template,fields)

document.getElementById("templateCheckbox").onclick = function(){
	let template = setTemplate(defaultTemplate, customTemplate)
	render(template,fields)
}
  
function render(template, fields){
	const container = document.getElementById("introductionText")
	template = populateTemplate(template, fields)
  if (validateTemplate(template)) {
  	populateFormFields(fields)
    container.innerHTML = template
  }
  else
    container.innerHTML = `<h2>Your template is wroooong!!!</h2>`
}

function populateTemplate(template, fields) {
  const keys = Object.keys(fields)
  for (let i in keys) {
    if (keys[i] == "amount")
      template = template.replace(
        "{{" + keys[i] + "}}",
        new...