From 40dff0381bff7b112d73993e40c36378ea77ffa1 Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Sun, 14 Nov 2021 20:14:55 -0800
Subject: [PATCH] Fix bug with fraction amount display in crowdfund app (#3098)

* Update formatting

* Adjust formatting

* Adjust formatting

* Fix bug with BTC fraction amount display
---
 .../Views/AppsPublic/ViewCrowdfund.cshtml     | 12 ++++----
 BTCPayServer/wwwroot/crowdfund/app.js         | 28 +++++++++++++++----
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml b/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml
index a3bb2c46c..2e98cdce2 100644
--- a/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml
+++ b/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml
@@ -65,7 +65,7 @@
                     {
                         <span v-if="srvModel.targetAmount" class="mt-3" id="crowdfund-header-target">
                             <h3 class="d-inline-block">
-                                <span class="badge bg-info px-3" v-text="`${new Intl.NumberFormat().format(srvModel.targetAmount)} ${targetCurrency}`">@Math.Round(Model.TargetAmount.GetValueOrDefault(0)) @Model.TargetCurrency</span>
+                                <span class="badge bg-info px-3" v-text="`${targetAmount} ${targetCurrency}`">@Math.Round(Model.TargetAmount.GetValueOrDefault(0)) @Model.TargetCurrency</span>
                             </h3>
                             @if (Model.ResetEveryAmount > 0 && !Model.NeverReset)
                             {
@@ -123,7 +123,7 @@
                 <div class="card-body">
                     <div class="row py-2 text-center crowdfund-stats">
                         <div class="col-sm border-end p-3 text-center" id="crowdfund-body-raised-amount">
-                            <h3 v-text="`${new Intl.NumberFormat().format(raisedAmount)} ${targetCurrency}`">@Math.Round(Model.Info.CurrentAmount + Model.Info.CurrentPendingAmount) @Model.TargetCurrency</h3>
+                            <h3 v-text="`${raisedAmount} ${targetCurrency}`">@Math.Round(Model.Info.CurrentAmount + Model.Info.CurrentPendingAmount, Model.CurrencyData.Divisibility) @Model.TargetCurrency</h3>
                             <h5 class="text-muted fst-italic mb-0">Raised</h5>
                             <b-tooltip target="crowdfund-body-raised-amount" v-if="paymentStats && paymentStats.length > 0" class="only-for-js">
                                 <ul class="p-0 text-uppercase">
@@ -287,8 +287,8 @@
     
     <template id="perks-template">
         <div class="perks-container">
-            <perk v-if="!perks || perks.length ===0"
-                  :perk="{title: 'Donate Custom Amount', price: { type: 0, value: null}}"
+            <perk v-if="!perks || perks.length === 0"
+                :perk="{title: 'Donate Custom Amount', price: { type: 0, value: null}}"
                 :target-currency="targetCurrency" 
                 :active="active" 
                 :loading="loading"
@@ -324,10 +324,10 @@
                 <img v-if="perk.image && perk.image != 'null'" class="card-img-top" :src="perk.image" />
                 <div class="card-body">
                     <div class="card-title d-flex justify-content-between">
-                        <span class="h5">{{perk.title? perk.title : perk.id}}</span>
+                        <span class="h5">{{perk.title ? perk.title : perk.id}}</span>
                         <span class="text-muted"> 
                             <template v-if="perk.price && perk.price.value">
-                                {{new Intl.NumberFormat().format(perk.price.value.noExponents())}}
+                                {{formatAmount(perk.price.value.noExponents(), srvModel.currencyData.divisibility)}}
                                 {{targetCurrency}}
                                 <template v-if="perk.price.type == 1">or more</template>
                             </template>
diff --git a/BTCPayServer/wwwroot/crowdfund/app.js b/BTCPayServer/wwwroot/crowdfund/app.js
index 7c439ad99..c29d8917f 100644
--- a/BTCPayServer/wwwroot/crowdfund/app.js
+++ b/BTCPayServer/wwwroot/crowdfund/app.js
@@ -48,8 +48,6 @@ document.addEventListener("DOMContentLoaded",function (ev) {
                 this.amount = this.perk.price.type === 0? null : (amount || 0).noExponents();
                 this.expanded = false;
             }
-
-
         },
         mounted: function () {
             this.setAmount(this.perk.price.value);
@@ -63,7 +61,6 @@ document.addEventListener("DOMContentLoaded",function (ev) {
                 }
             }
         }
-        
     });
     
     app = new Vue({
@@ -82,14 +79,17 @@ document.addEventListener("DOMContentLoaded",function (ev) {
                 active: true,
                 animation: true, 
                 sound: true,
-                lastUpdated:"",
+                lastUpdated: "",
                 loading: false,
                 timeoutState: 0
             }
         },
         computed: {
             raisedAmount: function(){
-               return parseFloat(this.srvModel.info.currentAmount + this.srvModel.info.currentPendingAmount ).toFixed(this.srvModel.currencyData.divisibility) ;
+                return this.formatAmount(this.srvModel.info.currentAmount + this.srvModel.info.currentPendingAmount);
+            },
+            targetAmount: function(){
+                return this.formatAmount(this.srvModel.targetAmount);
             },
             percentageRaisedAmount: function(){
                 return parseFloat(this.srvModel.info.progressPercentage + this.srvModel.info.pendingProgressPercentage ).toFixed(2);
@@ -203,6 +203,9 @@ document.addEventListener("DOMContentLoaded",function (ev) {
                 if(this.timeoutState){
                     clearTimeout(this.timeoutState);
                 }
+            },
+            formatAmount: function(amount) {
+                return formatAmount(amount, this.srvModel.currencyData.divisibility)
             }
         },
         mounted: function () {
@@ -315,3 +318,18 @@ document.addEventListener("DOMContentLoaded",function (ev) {
     });
 });
 
+/**
+ * Formats input string as a number according to browser locale
+ * with correctly displayed fraction amount (e.g. 0.012345 for BTC instead of just 0.0123)
+ * 
+ * @param {number | string} amount Amount to format
+ * @param {number} divisibility Currency divisibility (e.g., 8 for BTC)
+ * @returns String formatted as a number according to current browser locale and correct fraction amount
+ */
+function formatAmount(amount, divisibility) {
+    var parsedAmount = parseFloat(amount).toFixed(divisibility);
+    var [wholeAmount, fractionAmount] = parsedAmount.split('.');
+    var formattedWholeAmount = new Intl.NumberFormat().format(parseInt(wholeAmount, 10));
+
+    return formattedWholeAmount + (fractionAmount ? '.' + fractionAmount : '');
+}