Integrated Bar-tabs demo

by IntegrationSupport

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://iclientsimulator.test.tyro.com/iclient-with-ui-v1.js"></script>
<style>
    .myDiv {
        background-color: #ABBAEA;
    }    
</style>

<h2>Integrated Bar-tabs Demo</h2>

<p>Please select the bar-tab limit amount and press the <strong> "Open Tab" </strong> button to secure the open bar tab first<br>Then please input  a tab completion amount and press the <strong>"Close Tab"</strong> button to close the tab.
</p>

<h4>Select Bar-tab amount</h4>

<select class="form-control" id="tabLimitAmount">
    <option value="10200">$102.00 (Approved; swiped + credit + PIN; Visa card type)</option>
    <option value="10201">$102.01 (Declined; swiped + credit + PIN; Visa card type)</option>
    <option value="10208">$102.08 (Approved; swiped + credit + signature; Visa card type)</option>
</select>

<button id="openTabBtn" type="button" class="mt10 btn btn-primary" onclick="openTab()">Open Tab</button>
<button type="button" class="mt10 btn btn-primary" onclick="pairing()">Pairing</button>

<h3 class="mt10">
 <iframe id="iClientFrame" src="" 
       style="height: 400px; width: 400px;">
    </iframe>
    </h3>

<br>
<div class="myDiv" id="tabRef"></div>


<br>
<br>

<form>
<div>
<label>Tab Completion Amount (in cents)</label>
<input class="form-control" id="tabCompletionAmount">
<small id="tabHelp" class="form-text text-muted">Amount can not exceed the maximum tab limit</small>
</div>

<button id="closeTabBtn" type="button" class="mt10 btn btn-primary disabled" onclick="closeTab()">Close Tab</button>
<button id="voidTabBtn" type="button" class="mt10 btn btn-primary disabled" onclick="voidTab()">Void Tab</button>

</form>

<br>

<h3 class="mt10">Transaction result</h3>

<table style="width: 100%;">
    <tr valign="top">
        <td style="width: 35%">
           ...

CSS

body {
    margin: 10px;
}
h3 {
    margin-top: 0;
}
td {
    padding: 3px;
}
.mt10 {
    margin-top: 10px;
}

.myDiv {
  margin-top: 10px;
  font-size: large;
  
}

JavaScript

var apiKey = "Test API Key"; // API Key not validated test environments
var posProductInfo = {
    posProductVendor: "Acme Co",
    posProductName: "Acme Cloud POS",
    posProductVersion: "1.0.0"
};
var iclient = new TYRO.IClientWithUI(apiKey, posProductInfo);
var completionRef;
var amount;
var tabCompletionAmount;
var messageString = "Tab Completion Reference: "

function pairing() {
   var x = document.getElementById("iClientFrame")
   x.src
   = "https://iclientsimulator.test.tyro.com/configuration.html";
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
        }


// Function to process the Open Tab request //
function openTab() {
    reset();
    //Setting the div colors back to original//
     var element = document.getElementById("tabRef");
  element.style.backgroundColor = "#ABBAEA";
  element.style.color = "black";
  
  var element2 = document.getElementById("result");
var color = element.style.color;
if (color == "red"){
toggleCrresult();
}
  
    amount = $("#tabLimitAmount").val();
    console.log(amount);
    doOpenTab(amount);
    console.log(amount);
}

//Function to process the Close Tab request//
function closeTab() { // no receipts are returned / printed for the close function
tabCompletionAmount = $("#tabCompletionAmount").val();

if(tabCompletionAmount > 0 && tabCompletionAmount <= amount){
toggleClrResult("black");
doCloseTab(completionRef, tabCompletionAmount);
}
else if(tabCompletionAmount > amount){
toggleClrResult("red");
//window.alert("Tab Completion Amount Cannot be greater than the tab limit")
  

$("#result").html(" The Tab Completion amount cannot be greater than tab limit amount, please choose a completion amount that is less than the tab limit and retry")
 
}

else{
window.alert("Please specify a tab completion amount and retry");
}
    
}

//Function to process the Void Tab request//
function voidTab() { // no receipts are returned / printed for the void function
 ...