From 8bd7ea5bbc9f62428033aab9b56b442d29b634d4 Mon Sep 17 00:00:00 2001
From: Kukks <evilkukka@gmail.com>
Date: Sat, 29 Dec 2018 20:21:23 +0100
Subject: [PATCH] start ux for perks

---
 .../AppsPublic/Crowdfund/VueCrowdfund.cshtml  | 48 +++++++++++++++++--
 .../crowdfund/components/contribute.js        | 41 +++++++---------
 2 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml b/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml
index ba3239e4f..4ca405edc 100644
--- a/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml
+++ b/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml
@@ -8,10 +8,10 @@
                     <span class="h6 text-muted" v-if="!started && srvModel.startDate" v-b-tooltip :title="startDate">
                         Starts {{startDateRelativeTime}}
                     </span>
-                    <span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate"  v-b-tooltip :title="endDate">
+                    <span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate" v-b-tooltip :title="endDate">
                         Ends {{endDateRelativeTime}}
                     </span>
-                    <span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate"  v-b-tooltip title="No set end date">
+                    <span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate" v-b-tooltip title="No set end date">
                         Currently Active!
                     </span>
 
@@ -106,7 +106,12 @@
                         <div class="card-text" v-html="srvModel.description"></div>
                     </div>
                     <div class="col-md-4 col-sm-12">
-                        <contribute :target-currency="srvModel.targetCurrency" :active="srvModel.info.active"></contribute>
+                        <contribute :target-currency="srvModel.targetCurrency"
+                                    :active="srvModel.info.active"
+                                    :in-modal="false"
+                                    :perks="srvModel.perks">
+                           
+                        </contribute>
                     </div>
                 </div>
 
@@ -116,7 +121,13 @@
     </div>
     <b-modal title="Contribute" v-model="contributeModalOpen" v-on:ok="submitModalContribute" :hide-header-close="true">
 
-        <contribute :target-currency="srvModel.targetCurrency" :active="srvModel.info.active" ref="modalContribute" :in-modal="true"></contribute>
+        <contribute v-if="contributeModalOpen" 
+                    :target-currency="srvModel.targetCurrency" 
+                    :active="srvModel.info.active" 
+                    ref="modalContribute" 
+                    :perks="srvModel.perks"
+                    :in-modal="true">
+        </contribute>
         <template slot="modal-ok">
             Submit
         </template>
@@ -126,3 +137,32 @@
     </b-modal>
 
 </div>
+
+<script type="text/x-template" id="perks-template">
+{{perks}}
+</script>
+
+<script type="text/x-template" id="contribute-template">
+  <div>
+    <h3 v-if="!inModal">Contribute</h3>
+    <form v-on:submit='onContributeFormSubmit'>
+        <perks-display >
+        </perks-display>
+        <div class='form-group'>
+            <label >Email</label>
+            <input type='email' class='form-control' v-model='email' placeholder='Email'/>
+        </div>
+        <div class='form-group'>
+            <label >Contribution Amount</label>
+            <div class='input-group mb-3'>
+                <input type='number' step='any' class='form-control' v-model='amount' placeholder='Contribution Amount'/>
+                <div class='input-group-append'>
+                    <span class='input-group-text'>{{targetCurrency}}</span>
+                </div>
+            </div>
+        </div>
+        <button v-if="!inModal" type='submit' class='btn btn-primary' :disabled='!active'>Contribute</button>
+    </form>
+  </div>
+</script>
+
diff --git a/BTCPayServer/wwwroot/crowdfund/components/contribute.js b/BTCPayServer/wwwroot/crowdfund/components/contribute.js
index 507652d17..0f08828fb 100644
--- a/BTCPayServer/wwwroot/crowdfund/components/contribute.js
+++ b/BTCPayServer/wwwroot/crowdfund/components/contribute.js
@@ -1,5 +1,6 @@
 Vue.component('contribute', {
-    props: ["targetCurrency", "active", "inModal"],
+    props: ["targetCurrency", "active", "perks", "inModal"],
+    template: "#contribute-template",
     data: function () {
         return {
             email: "",
@@ -17,27 +18,19 @@ Vue.component('contribute', {
             }
             eventAggregator.$emit("contribute", {email: this.email, amount: this.amount, choiceKey: this.choiceKey});
         }
-    },
-
-    template: "<div>" +
-        "<h3 v-if='!inModal'>Contribute</h3>" +
-        "" +
-        "                            <form v-on:submit=\"onContributeFormSubmit\">" +
-        "" +
-        "                                <div class=\"form-group\">" +
-        "                                    <label ></label>" +
-        "                                    <input type=\"email\" class=\"form-control\" v-model=\"email\" placeholder='Email'/>" +
-        "                                </div>" +
-        "                                <div class=\"form-group\">" +
-        "                                    <label ></label>" +
-        "                                    <div class=\"input-group mb-3\">" +
-        "                                        <input type=\"number\" step=\"any\" class=\"form-control\" v-model=\"amount\" placeholder='Contribution Amount'/>" +
-        "                                        <div class=\"input-group-append\">" +
-        "                                            <span class=\"input-group-text\">{{targetCurrency}}</span>" +
-        "                                        </div>" +
-        "                                    </div>" +
-        "                                </div>" +
-        "                                <button type=\"submit\" class=\"btn btn-primary\" :disabled='!active' v-if='!inModal'>Contribute</button>" +
-        "                            </form>" +
-        "</div>"
+    }
 });
+
+Vue.component('perks-display', {
+    props: ["perks"],
+    template: "#perks-template",
+    data: function () {
+        return {
+        }
+    },
+    methods: {
+        
+    }
+});
+
+