Adding Vue.js and databinding checkout properties on clientside

BTCPayServer/wwwroot/js/core.js

@@ -13,22 +13,13 @@
 
 */
 
-// Setup Base variables from the API
-
-//var btcAddress = "1Dut19quHiJrXEwfmig4hB8RyLss5aTRTC",
-//	btcDue = "0.2254", //must be a string
-//	customerEmail = "", // Place holder
-//	maxTime = 60 * 15 - 1, // Can be calculted server-side, or fixed
-//	isArchieved = false, // Preferably Bool
-//	display = $(".timer-row__time-left"), // Timer container
-//	isPaid = false, // Tx listener
-//	merchantRefLink = "https://merchant.link"; // Merchant link to redect the user
-//	merchantName = "Merchant Name",
-//	merchantDesc = "Item description or Invoice description",
-//	btcRate = "4500",
-//	btcAmount = "0.22";
-//	itemAmount = 1,
-//	txFees = "0.0054";
+// TODO: Vue controller... complete migrate to it for binding, animations can stay in jQuery
+var checkoutCtrl = new Vue({
+    el: '#checkoutCtrl',
+    data: {
+        srvModel: srvModel
+    }
+})
 
 var display = $(".timer-row__time-left"); // Timer container
 
@@ -93,10 +84,6 @@ function emailForm() {
     })
 }
 
-// Copy Tab Info 
-$("#copy .manual__step-two__instructions span").html("To complete your payment, please send " + srvModel.btcDue + " BTC to the address below.");
-
-
 /* =============== Even listeners =============== */
 
 // Email
@@ -155,16 +142,11 @@ $("#copy-tab").click(function () {
 // Should connect using webhook ?
 // If notification received
 
-var oldStat = srvModel.status;
 onDataCallback(srvModel);
 
 function onDataCallback(jsonData) {
     var newStatus = jsonData.status;
 
-    if (oldStat != newStatus) {
-        oldStat = newStatus;
-        window.parent.postMessage({ "invoiceId": srvModel.invoiceId, "status": newStatus }, "*");
-    }
     if (newStatus == "complete" ||
         newStatus == "confirmed" ||
         newStatus == "paid") {
@@ -172,14 +154,14 @@ function onDataCallback(jsonData) {
             $(".modal-dialog").removeClass("expired");
         }
 
-        if (srvModel.merchantRefLink != "") {
-            $(".action-button").click(function () {
-                window.location.href = srvModel.merchantRefLink;
-            });
-        }
-        else {
-            $(".action-button").hide();
-        }
+        //if (srvModel.merchantRefLink != "") {
+        //    $(".action-button").click(function () {
+        //        window.location.href = srvModel.merchantRefLink;
+        //    });
+        //}
+        //else {
+        //    $(".action-button").hide();
+        //}
 
         $(".modal-dialog").addClass("paid");
 
@@ -199,6 +181,18 @@ function onDataCallback(jsonData) {
         $(".modal-dialog").addClass("expired");
         $("#expired").addClass("active");
     }
+
+    if (newStatus == "new" && jsonData.btcDue < checkoutCtrl.srvModel.btcDue) {
+        // TODO: Refresh not working as expected
+        $(".qr-codes").html("");
+        $(".qr-codes").qrcode(srvModel.btcAddress);
+    }
+
+    if (checkoutCtrl.srvModel.status != newStatus) {
+        window.parent.postMessage({ "invoiceId": srvModel.invoiceId, "status": newStatus }, "*");
+    }
+
+    checkoutCtrl.srvModel = jsonData;
 }
 
 var watcher = setInterval(function () {