From 6fbcc9a2440c73eb969efc1dde901106a91f6f4b Mon Sep 17 00:00:00 2001
From: Andrew Camilleri <evilkukka@gmail.com>
Date: Fri, 22 Jul 2022 13:30:39 +0200
Subject: [PATCH] Fix Crowdfund + additional issues (#3994)

* Show free when invoice is fixed and 0 amount in apps
* animations on crowdfund not enabled broke JS
* Perk expansion in crowdfund was broken
---
 .../UIAppsPublic/PointOfSale/Static.cshtml    | 23 +++++++++----
 .../Views/UIAppsPublic/ViewCrowdfund.cshtml   | 33 +++++++++++--------
 BTCPayServer/wwwroot/crowdfund/app.js         |  4 ++-
 .../wwwroot/crowdfund/services/fireworks.js   |  2 +-
 4 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/BTCPayServer/Views/UIAppsPublic/PointOfSale/Static.cshtml b/BTCPayServer/Views/UIAppsPublic/PointOfSale/Static.cshtml
index 7882d96de..9c51d8d07 100644
--- a/BTCPayServer/Views/UIAppsPublic/PointOfSale/Static.cshtml
+++ b/BTCPayServer/Views/UIAppsPublic/PointOfSale/Static.cshtml
@@ -94,12 +94,23 @@
 @functions {
     private void PayFormInputContent(string buttonText,ViewPointOfSaleViewModel.Item.ItemPrice.ItemPriceType itemPriceType, decimal? minPriceValue = null, decimal? priceValue = null)
     {
-        <div class="input-group">
-            <span class="input-group-text">@Model.CurrencySymbol</span>
-            <input type="hidden" name="requiresRefundEmail" value="@Model.RequiresRefundEmail.ToString()" />
-            <input class="form-control" type="number" min="@(minPriceValue ?? 0)" step="@Model.Step" name="amount" placeholder="Amount" value="@priceValue" readonly="@(itemPriceType == ViewPointOfSaleViewModel.Item.ItemPrice.ItemPriceType.Fixed)">
-               <button class="btn btn-primary text-nowrap" type="submit">@buttonText</button>
-        </div>
+        if (itemPriceType == ViewPointOfSaleViewModel.Item.ItemPrice.ItemPriceType.Fixed && priceValue == 0)
+        {
+            <div class="input-group  ">
+                <input class="form-control" type="text" readonly  value="Free"/>
+                <button class="btn btn-primary text-nowrap" type="submit">@buttonText</button>
+            </div>
+        }
+        else
+        {
+            <div class="input-group">
+                <span class="input-group-text">@Model.CurrencySymbol</span>
+                <input type="hidden" name="requiresRefundEmail" value="@Model.RequiresRefundEmail.ToString()" />
+                <input class="form-control" type="number" min="@(minPriceValue ?? 0)" step="@Model.Step" name="amount" placeholder="Amount" value="@priceValue" readonly="@(itemPriceType == ViewPointOfSaleViewModel.Item.ItemPrice.ItemPriceType.Fixed)">
+                <button class="btn btn-primary text-nowrap" type="submit">@buttonText</button>
+            </div>
+        }
+        
     }
 
     private void CardBody(string title, string description)
diff --git a/BTCPayServer/Views/UIAppsPublic/ViewCrowdfund.cshtml b/BTCPayServer/Views/UIAppsPublic/ViewCrowdfund.cshtml
index 095665f50..64d4bed8f 100644
--- a/BTCPayServer/Views/UIAppsPublic/ViewCrowdfund.cshtml
+++ b/BTCPayServer/Views/UIAppsPublic/ViewCrowdfund.cshtml
@@ -337,7 +337,10 @@
                             {{targetCurrency}}
                             <template v-if="perk.price.type == 1">or more</template>
                         </template>
-
+                        
+                        <template v-else-if="perk.price.type === 2 && !perk.price.value">
+                            Free
+                        </template>
                         <template v-else-if="perk.price.type === 0 || (!perk.price.value && perk.price.type === 1)">
                             Any amount
                         </template>
@@ -346,19 +349,21 @@
                 <p class="card-text overflow-hidden" v-if="perk.description" v-html="perk.description"></p>
 
                
-                <div class="input-group" style="max-width:500px;" v-else-if="expanded" :id="'perk-form'+ perk.id">
-                    <input
-                        v-if="perk.price.type !== 0"
-                        :disabled="!active"
-                        :readonly="perk.price.type !== 1"
-                        class="form-control hide-number-spin"
-                        type="number"
-                        v-model="amount"
-                        :min="perk.price.value"
-                        step="any"
-                        placeholder="Contribution Amount"
-                        required>
-                    <span class="input-group-text" v-if="perk.price.type !== 0">{{targetCurrency}}</span>
+                <div class="input-group" style="max-width:500px;" v-if="expanded" :id="'perk-form'+ perk.id">
+                    <template v-if="perk.price.type !== 0 && !(perk.price.type === 2 && !perk.price.value)"> 
+                        <input
+                            
+                            :disabled="!active"
+                            :readonly="perk.price.type !== 1"
+                            class="form-control hide-number-spin"
+                            type="number"
+                            v-model="amount"
+                            :min="perk.price.value"
+                            step="any"
+                            placeholder="Contribution Amount"
+                            required>
+                        <span class="input-group-text" >{{targetCurrency}}</span>
+                    </template>
                     <button
                         class="btn btn-primary d-flex align-items-center "
                         v-bind:class="{ 'btn-disabled': loading}"
diff --git a/BTCPayServer/wwwroot/crowdfund/app.js b/BTCPayServer/wwwroot/crowdfund/app.js
index b66655c4b..31a0e7cdd 100644
--- a/BTCPayServer/wwwroot/crowdfund/app.js
+++ b/BTCPayServer/wwwroot/crowdfund/app.js
@@ -28,7 +28,9 @@ document.addEventListener("DOMContentLoaded",function (ev) {
         },
         computed: {
             canExpand: function(){
-                return !this.expanded && this.active && (this.perk.price.type !== 2 || this.perk.price.value) && (this.perk.inventory==null || this.perk.inventory > 0)
+                return !this.expanded 
+                    && this.active && 
+                    (this.perk.inventory==null || this.perk.inventory > 0)
             }
         },
         methods: {
diff --git a/BTCPayServer/wwwroot/crowdfund/services/fireworks.js b/BTCPayServer/wwwroot/crowdfund/services/fireworks.js
index 4532d9bc1..072c846d5 100644
--- a/BTCPayServer/wwwroot/crowdfund/services/fireworks.js
+++ b/BTCPayServer/wwwroot/crowdfund/services/fireworks.js
@@ -1,6 +1,6 @@
 document.addEventListener("DOMContentLoaded",function (ev) {
     var c = document.getElementById("fireworks");
-if (!c.getContext) return;
+if (!c || !c.getContext) return;
 var ctx = c.getContext("2d");
 if (!ctx) return;