Merge pull request #170 from rockstardev/fiat

Display fiat value of invoice during checkout

BTCPayServer/Controllers/InvoiceController.UI.cs

@@ -242,8 +242,9 @@ namespace BTCPayServer.Controllers
                 CustomCSSLink = storeBlob.CustomCSS?.AbsoluteUri,
                 CustomLogoLink = storeBlob.CustomLogo?.AbsoluteUri,
                 BtcAddress = paymentMethodDetails.GetPaymentDestination(),
-                OrderAmount = (accounting.TotalDue - accounting.NetworkFee).ToString(),
                 BtcDue = accounting.Due.ToString(),
+                OrderAmount = (accounting.TotalDue - accounting.NetworkFee).ToString(),
+                OrderAmountFiat = OrderAmountFiat(invoice.ProductInformation),
                 CustomerEmail = invoice.RefundMail,
                 RequiresRefundEmail = storeBlob.RequiresRefundEmail,
                 ExpirationSeconds = Math.Max(0, (int)(invoice.ExpirationTime - DateTimeOffset.UtcNow).TotalSeconds),
@@ -315,6 +316,17 @@ namespace BTCPayServer.Controllers
             }
             return price.ToString("C", provider) + $" ({currency})";
         }
+        private string OrderAmountFiat(ProductInformation productInformation)
+        {
+            // check if invoice source currency is crypto... if it is there is no "order amount in fiat"
+            foreach (var net in _NetworkProvider.GetAll())
+            {
+                if (net.CryptoCode == productInformation.Currency)
+                    return null;
+            }
+
+            return FormatCurrency(productInformation.Price, productInformation.Currency);
+        }
 
         [HttpGet]
         [Route("i/{invoiceId}/status")]

BTCPayServer/Models/InvoicingModels/PaymentModel.cs

@@ -37,6 +37,7 @@ namespace BTCPayServer.Models.InvoicingModels
         public string TimeLeft { get; set; }
         public string Rate { get; set; }
         public string OrderAmount { get; set; }
+        public string OrderAmountFiat { get; set; }
         public string InvoiceBitcoinUrl { get; set; }
         public string InvoiceBitcoinUrlQR { get; set; }
         public int TxCount { get; set; }

BTCPayServer/Views/Invoice/Checkout-Body.cshtml

@@ -73,7 +73,7 @@
                 <span>{{ srvModel.btcDue }} {{ srvModel.cryptoCode }}</span>
             </div>
 
-            <div class="single-item-order__right__ex-rate">
+            <div class="single-item-order__right__ex-rate"  v-if="srvModel.orderAmountFiat">
                 1 {{ srvModel.cryptoCode }} = {{ srvModel.rate }}
             </div>
         </div>
@@ -87,6 +87,12 @@
                 <div class="line-items__item__label">{{$t("Order Amount")}}</div>
                 <div class="line-items__item__value">{{srvModel.orderAmount}} {{ srvModel.cryptoCode }}</div>
             </div>
+            <div class="line-items__item line-items_fiatvalue" v-if="srvModel.orderAmountFiat">
+                <div class="line-items__item__label">&nbsp;</div>
+                <div class="line-items__item__value single-item-order__right__ex-rate">
+                    {{srvModel.orderAmountFiat}}
+                </div>
+            </div>
             <div class="line-items__item">
                 <div class="line-items__item__label">
                     <span>{{$t("Network Cost")}}</span>
@@ -133,7 +139,7 @@
     </div>
 </div>
 
-<div adjust-height="" class="payment-box">
+<div class="payment-box">
     <div class="bp-view payment manual-flow enter-contact-email active" id="emailAddressView">
         <form class="manual__step-one refund-address-form contact-email-form" id="emailAddressForm" name="emailAddressForm" novalidate="">
             <div class="manual__step-one__header">

BTCPayServer/wwwroot/checkout/css/normalizer.css

@@ -10328,6 +10328,7 @@ All mobile class names should be prefixed by m- */
 .wrong-email .payment-tabs {
     pointer-events: none;
     margin-top: -2.95rem;
+    z-index: -1;
     margin-bottom: 1rem;
 }
 
@@ -10412,10 +10413,6 @@ All mobile class names should be prefixed by m- */
     transform: translateY(20px);
 }
 
-.payment-tabs {
-    z-index: 1;
-}
-
 .single-item-order {
     z-index: 2;
 }
@@ -11146,31 +11143,13 @@ language-selector {
 
 line-items {
     background: #FBFBFB;
-    height: 25px;
+    border-top: 1px solid rgba(238, 238, 238, 0.5);
-    border-top: 0;
     z-index: 2;
-    position: relative;
+    display: none;
-    display: block;
-    overflow: hidden;
-    height: 0;
-    transition: height 250ms ease;
 }
 
-    line-items.expanded {
-        height: 120px;
-        border-top: 1px solid rgba(238, 238, 238, 0.5);
-    }
-
-        line-items.expanded.paid-over {
-            height: 295px;
-        }
-
-        line-items.expanded.paid-partial-expired, line-items.expanded.paid-full {
-            height: 272px;
-        }
-
     line-items .line-items {
-        padding: 1rem;
+        padding: 10px 1rem;
         color: #565D6E;
     }
 
@@ -11198,6 +11177,10 @@ line-items {
         padding: 2px 0;
     }
 
+    line-items .line-items_fiatvalue {
+        margin-top: -5px;
+    }
+
     line-items .line-items__item__label {
         flex-grow: 1;
         display: flex;

BTCPayServer/wwwroot/checkout/js/core.js

@@ -237,8 +237,12 @@ $(document).ready(function () {
     });
 
     // 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");
     });