Switching to VueQrcode, cleaner code and easier refresh

BTCPayServer/Views/Invoice/Checkout.cshtml

@@ -25,12 +25,12 @@
     <link href="~/css/normalizer.css" rel="stylesheet" type="text/css">
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"
             crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
     <script type="text/javascript">
 		@Model.ToSrvModel()
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
     <script src="~/js/vue.js" type="text/javascript" defer="defer"></script>
+    <script src="~/js/vue-qrcode.js" type="text/javascript" defer="defer"></script>
     <script src="~/js/core.js" type="text/javascript" defer="defer"></script>
     <!-- <script src="img/Intl.js" type="text/javascript" defer="defer"></script>
     <script src="img/en-US.js" type="text/javascript" defer="defer"></script>
@@ -163,23 +163,7 @@
                                 <div adjust-height="" class="payment-box">
                                     <div class="bp-view payment scan" id="scan" style="opacity: 1;">
                                         <div class="payment__scan">
-                                            @*<div class="payment__details__instruction__open-wallet hidden-sm-up">
-                                                    <!---->
-                                                    <a class="payment__details__instruction__open-wallet__btn action-button action-button--secondary">
-                                                        <span i18n="">Show QR code</span>
-                                                        <img class="m-qr-code-icon" src="~/img/qr-code.svg">
-                                                    </a>
-                                                    <div class="m-qr-code-container hidden-sm-up hide">
-                                                        <p class="m-qr-code-header" i18n="">
-                                                            Hide QR code
-                                                            <img class="m-qr-code-expand" src="~/img/chevron.svg">
-                                                        </p>
-                                                        <!---->
-                                                        <div class="qr-codes"></div>
-                                                    </div>
-                                                </div>*@
-                                            <!---->
-                                            <div class="qr-codes"></div>
+                                            <qrcode :val="srvModel.btcAddress" :size="256" bg-color="#f5f5f7" fg-color="#000" />
                                         </div>
                                         <div class="payment__details__instruction__open-wallet">
                                             <a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">

BTCPayServer/wwwroot/js/core.js

@@ -16,6 +16,9 @@
 // TODO: Vue controller... complete migrate to it for binding, animations can stay in jQuery
 var checkoutCtrl = new Vue({
     el: '#checkoutCtrl',
+    components: {
+        qrcode: VueQr
+    },
     data: {
         srvModel: srvModel
     }
@@ -40,8 +43,6 @@ function hideEmailForm() {
     $("[role=document]").removeClass("enter-purchaser-email");
     $("#emailAddressView").removeClass("active");
     $("placeholder-refundEmail").html(srvModel.customerEmail);
-    // to generate a QR-Code : $(<selector>).qrcode("1Dut19quHiJrXEwfmig4hB8RyLss5aTRTC");
-    $('.qr-codes').qrcode(srvModel.btcAddress);
 
     // Remove Email mode
     $(".modal-dialog").removeClass("enter-purchaser-email");
@@ -182,16 +183,11 @@ function onDataCallback(jsonData) {
         $("#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 }, "*");
     }
 
+    // updating ui
     checkoutCtrl.srvModel = jsonData;
 }