Displaying notification for extra transaction if paidPartial

BTCPayServer/Views/Invoice/Checkout-Body.cshtml

@@ -109,6 +109,9 @@
         <span class="fa fa-angle-double-up"></span>
     </div>
     <line-items>
+        <div class="extraPayment" v-if="srvModel.status === 'new' && srvModel.txCount > 1">
+            {{$t("NotPaid_ExtraTransaction")}}
+        </div>
         <div class="line-items">
             <div class="line-items__item">
                 <div class="line-items__item__label">{{$t("Order Amount")}}</div>

BTCPayServer/wwwroot/checkout/css/normalizer.css

@@ -11202,6 +11202,16 @@ language-selector {
         opacity: 1;
     }
 
+
+.extraPayment {
+    background: #E5465A;
+    color: #fff;
+    font-weight: 500;
+    letter-spacing: .5px;
+    font-size: 12px;
+    padding: 2px 1rem;
+}
+
 line-items {
     background: #FBFBFB;
     border-top: 1px solid rgba(238, 238, 238, 0.5);
@@ -11470,10 +11480,10 @@ low-fee-timeline {
     height: 32px;
     margin-bottom: 10px;
 }
+
 .changelly-component .general__spinner bp-spinner {
     width: 50px;
     height: 50px;
-    
 }
 
     .changelly-component .general__spinner bp-spinner svg {
@@ -11505,15 +11515,22 @@ low-fee-timeline {
 #prettydropdown-DefaultLang {
     min-width: 200px;
 }
+
     #prettydropdown-DefaultLang ul {
         width: 100%;
     }
+
         #prettydropdown-DefaultLang ul li {
             width: 100% !important;
         }
 
-[v-cloak] > * { display:none }
+[v-cloak] > * {
-[v-cloak]::before { content: "" }
+    display: none
+}
+
+[v-cloak]::before {
+    content: ""
+}
 
 
 .btn-link {

BTCPayServer/wwwroot/checkout/js/core.js

@@ -107,6 +107,11 @@ function onDataCallback(jsonData) {
         jsonData.orderAmount = numberFormatted(jsonData.orderAmount * SATOSHIME);
     }
 
+    // expand line items to show details on amount due for multi-transaction payment
+    if (checkoutCtrl.srvModel.txCount === 1 && jsonData.txCount > 1) {
+        onlyExpandLineItems();
+    }
+
     // updating ui
     checkoutCtrl.srvModel = jsonData;
 }
@@ -140,10 +145,31 @@ function lndToggleNode() {
     checkoutCtrl.scanDisplayQr = checkoutCtrl.srvModel.peerInfo;
 }
 
+var lineItemsExpanded = false;
+function toggleLineItems() {
+    $("line-items").toggleClass("expanded");
+    lineItemsExpanded ? $("line-items").slideUp() : $("line-items").slideDown();
+    lineItemsExpanded = !lineItemsExpanded;
+
+    $(".buyerTotalLine").toggleClass("expanded");
+    $(".single-item-order__right__btc-price__chevron").toggleClass("expanded");
+}
+
+function onlyExpandLineItems() {
+    if (!lineItemsExpanded) {
+        toggleLineItems();
+    }
+}
+
+
 // private methods
 $(document).ready(function () {
     // initialize
     onDataCallback(srvModel);
+    // initial expand of line items to show error message if multiple payments needed
+    if (srvModel.status === "new" && srvModel.txCount > 1) {
+        onlyExpandLineItems();
+    }
 
     // check if the Document expired
     if (srvModel.expirationSeconds > 0) {
@@ -167,6 +193,11 @@ $(document).ready(function () {
 
     // eof initialize
     
+    // Expand Line-Items
+    $(".buyerTotalLine").click(function () {
+        toggleLineItems();
+    });
+
     // FUNCTIONS
     function hideEmailForm() {
         $("#emailAddressView").removeClass("active");
@@ -297,17 +328,6 @@ $(document).ready(function () {
         // function to load contents in different language should go there
     });
 
-    // Expand Line-Items
-    var lineItemsExpanded = false;
-    $(".buyerTotalLine").click(function () {
-        $("line-items").toggleClass("expanded");
-        lineItemsExpanded ? $("line-items").slideUp() : $("line-items").slideDown();
-        lineItemsExpanded = !lineItemsExpanded;
-
-        $(".buyerTotalLine").toggleClass("expanded");
-        $(".single-item-order__right__btc-price__chevron").toggleClass("expanded");
-    });
-
     // Timer Countdown && Progress bar
     function progressStart(timerMax) {
         var end = new Date(); // Setup Time Variable, should come from server

BTCPayServer/wwwroot/locales/en.json

@@ -1,3 +1,4 @@
+
 {
   "NOTICE_WARN": "THIS CODE HAS BEEN AUTOMATICALLY GENERATED FROM TRANSIFEX, IF YOU WISH TO HELP TRANSLATION COME ON THE SLACK http://slack.btcpayserver.org TO REQUEST PERMISSION TO https://www.transifex.com/btcpayserver/btcpayserver/",
   "code": "en",
@@ -46,5 +47,6 @@
   "txCount_plural": "{{count}} transactions",
   "Pay with CoinSwitch": "Pay with CoinSwitch",
   "Pay with Changelly": "Pay with Changelly",
-  "Close": "Close"
+  "Close": "Close",
+  "NotPaid_ExtraTransaction": "The invoice hasn't been paid in full. Please send another transaction to cover amount Due."
 }