diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml index 7b035e8e9..5a655f745 100644 --- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml +++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml @@ -109,6 +109,9 @@ +
+ {{$t("NotPaid_ExtraTransaction")}} +
{{$t("Order Amount")}}
diff --git a/BTCPayServer/wwwroot/checkout/css/normalizer.css b/BTCPayServer/wwwroot/checkout/css/normalizer.css index 94b9b222d..fa440f64f 100644 --- a/BTCPayServer/wwwroot/checkout/css/normalizer.css +++ b/BTCPayServer/wwwroot/checkout/css/normalizer.css @@ -9448,10 +9448,10 @@ strong { margin-bottom: 5px; } -.payment__scan svg { - width: 256px; - height: 256px; -} + .payment__scan svg { + width: 256px; + height: 256px; + } .payment__scan__checkmark-wrapper { display: flex; @@ -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,56 +11480,63 @@ 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 { - margin: 0; -} + .changelly-component .general__spinner bp-spinner svg { + margin: 0; + } .changelly-component .retry-button { border-radius: 5px; border: 1px solid #a9a9a9; background: #fff; color: #000; - min-width:100px; + min-width: 100px; padding-left: 0.8rem; padding-right: 0.8rem; min-height: 30px; word-break: break-all; } -.changelly-component .retry-button :hover{ - border-color: #7f7f7f; -} + .changelly-component .retry-button :hover { + border-color: #7f7f7f; + } .changelly-component .prettydropdown li img { - width:20px; + width: 20px; margin-right: 5px; } -#prettydropdown-DefaultLang{ - min-width:200px; -} -#prettydropdown-DefaultLang ul{ - width:100%; -} -#prettydropdown-DefaultLang ul li{ - width:100% !important; +#prettydropdown-DefaultLang { + min-width: 200px; } -[v-cloak] > * { display:none } -[v-cloak]::before { content: "" } + #prettydropdown-DefaultLang ul { + width: 100%; + } + + #prettydropdown-DefaultLang ul li { + width: 100% !important; + } + +[v-cloak] > * { + display: none +} + +[v-cloak]::before { + content: "" +} .btn-link { color: #329F80; } -.btn-link:hover { - color: #24725B; -} + .btn-link:hover { + color: #24725B; + } diff --git a/BTCPayServer/wwwroot/checkout/js/core.js b/BTCPayServer/wwwroot/checkout/js/core.js index 23cb6fcd0..01a725e02 100644 --- a/BTCPayServer/wwwroot/checkout/js/core.js +++ b/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) { @@ -166,6 +192,11 @@ $(document).ready(function () { jQuery("invoice").fadeIn(300); // eof initialize + + // Expand Line-Items + $(".buyerTotalLine").click(function () { + toggleLineItems(); + }); // FUNCTIONS function hideEmailForm() { @@ -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 diff --git a/BTCPayServer/wwwroot/locales/en.json b/BTCPayServer/wwwroot/locales/en.json index 55b0c03b9..de8574231 100644 --- a/BTCPayServer/wwwroot/locales/en.json +++ b/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" -} \ No newline at end of file + "Close": "Close", + "NotPaid_ExtraTransaction": "The invoice hasn't been paid in full. Please send another transaction to cover amount Due." +}