Add Disqus & fix ux

BTCPayServer/Controllers/AppsController.Crowdsale.cs

@@ -32,6 +32,11 @@ namespace BTCPayServer.Controllers
             public string Tagline { get; set; }
             public string EmbeddedCSS { get; set; }
             public string PerksTemplate { get; set; }
+            public bool DisqusEnabled { get; set; }
+            public bool SoundsEnabled { get; set; }
+            public string DisqusShortname { get; set; }
+            public bool AnimationsEnabled { get; set; }
+            public string DisqusAPIKey { get; set; }
         }
         
         
@@ -58,7 +63,12 @@ namespace BTCPayServer.Controllers
                 CustomCSSLink = settings.CustomCSSLink,
                 NotificationUrl = settings.NotificationUrl,
                 Tagline = settings.Tagline,
-                PerksTemplate = settings.PerksTemplate
+                PerksTemplate = settings.PerksTemplate,
+                DisqusEnabled = settings.DisqusEnabled,
+                SoundsEnabled = settings.SoundsEnabled,
+                DisqusShortname = settings.DisqusShortname,
+                AnimationsEnabled = settings.AnimationsEnabled,
+                DisqusAPIKey = settings.DisqusAPIKey,
             };
             return View(vm);
         }
@@ -101,7 +111,12 @@ namespace BTCPayServer.Controllers
                 EmbeddedCSS = vm.EmbeddedCSS,
                 NotificationUrl = vm.NotificationUrl,
                 Tagline = vm.Tagline,
-                PerksTemplate = vm.PerksTemplate
+                PerksTemplate = vm.PerksTemplate,
+                DisqusEnabled = vm.DisqusEnabled,
+                SoundsEnabled = vm.SoundsEnabled,
+                DisqusShortname = vm.DisqusShortname,
+                AnimationsEnabled = vm.AnimationsEnabled,
+                DisqusAPIKey = vm.DisqusAPIKey,
             });
             await UpdateAppSettings(app);
             _EventAggregator.Publish(new CrowdfundAppUpdated()

BTCPayServer/Hubs/CrowdfundHub.cs

@@ -228,6 +228,11 @@ namespace BTCPayServer.Hubs
                 EnforceTargetAmount = settings.EnforceTargetAmount,
                 StatusMessage = statusMessage,
                 Perks = _AppsHelper.Parse(settings.PerksTemplate, settings.TargetCurrency),
+                DisqusEnabled = settings.DisqusEnabled,
+                SoundsEnabled = settings.SoundsEnabled,
+                DisqusShortname = settings.DisqusShortname,
+                AnimationsEnabled = settings.AnimationsEnabled,
+                DisqusAPIKey = settings.DisqusAPIKey,
                 Info = new ViewCrowdfundViewModel.CrowdfundInfo()
                 {
                     TotalContributors = invoices.Length,

BTCPayServer/Models/AppViewModels/UpdateCrowdfundViewModel.cs

@@ -19,15 +19,34 @@ namespace BTCPayServer.Models.AppViewModels
         public string NotificationUrl { get; set; }
         
         [Required]
+        
+        [Display(Name = "Enabled, Allow crowdfund to be publicly visible( still visible to you)")]
         public bool Enabled { get; set; } = false;
         
+        [Required]
+        [Display(Name = "Enable background animations on new payments")]
+        public bool AnimationsEnabled { get; set; } = true;
+                
+        [Required]
+        [Display(Name = "Enable sounds on new payments")]
+        public bool SoundsEnabled { get; set; } = true;
+        
+        [Required]
+        [Display(Name = "Enable Disqus Comments")]
+        public bool DisqusEnabled { get; set; } = true;
+        
+        [Display(Name = "Disqus Shortname")]
+        public string DisqusShortname { get; set; }
+        [Display(Name = "Disqus Api Key")]
+        public string DisqusAPIKey { get; set; }
+        
         public DateTime? StartDate { get; set; }
         public DateTime? EndDate { get; set; }
-        
+
         [Required]
         [MaxLength(5)]
         [Display(Name = "The primary currency used for targets and stats")]
-        public string TargetCurrency { get; set; }
+        public string TargetCurrency { get; set; } = "BTC";
         
         [Display(Name = "Set a Target amount ")]
         public decimal? TargetAmount { get; set; }
@@ -44,5 +63,6 @@ namespace BTCPayServer.Models.AppViewModels
         public string CustomCSSLink { get; set; }
 
         public string EmbeddedCSS { get; set; }
+        
     }
 }

BTCPayServer/Models/AppViewModels/ViewCrowdfundViewModel.cs

@@ -23,6 +23,11 @@ namespace BTCPayServer.Models.AppViewModels
         public CrowdfundInfo Info { get; set; }
         public string Tagline { get; set; }
         public ViewPointOfSaleViewModel.Item[] Perks { get; set; }
+        public bool DisqusEnabled { get; set; }
+        public bool SoundsEnabled { get; set; }
+        public string DisqusShortname { get; set; }
+        public bool AnimationsEnabled { get; set; }
+        public string DisqusAPIKey { get; set; }
 
 
         public class CrowdfundInfo

BTCPayServer/Views/Apps/UpdateCrowdfund.cshtml

@@ -121,6 +121,31 @@
                         <input asp-for="Enabled" type="checkbox" class="form-check"/>
                         <span asp-validation-for="Enabled" class="text-danger"></span>
                     </div>
+                    <div class="form-group">
+                        <label asp-for="SoundsEnabled"></label>
+                        <input asp-for="SoundsEnabled" type="checkbox" class="form-check"/>
+                        <span asp-validation-for="SoundsEnabled" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="AnimationsEnabled"></label>
+                        <input asp-for="AnimationsEnabled" type="checkbox" class="form-check"/>
+                        <span asp-validation-for="AnimationsEnabled" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="DisqusEnabled"></label>
+                        <input asp-for="DisqusEnabled" type="checkbox" class="form-check"/>
+                        <span asp-validation-for="DisqusEnabled" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="DisqusShortname" class="control-label"></label>
+                        <input asp-for="DisqusShortname" class="form-control" />
+                        <span asp-validation-for="DisqusShortname" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="DisqusAPIKey" class="control-label"></label>
+                        <input asp-for="DisqusAPIKey" class="form-control" />
+                        <span asp-validation-for="DisqusAPIKey" class="text-danger"></span>
+                    </div>
                     <div class="form-group">
                         <input type="submit" class="btn btn-primary" value="Save Settings" />
                     </div>

BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml

@@ -88,38 +88,61 @@
                 <div class="card-title">
 
                     <div class="row">
-                        <div class="col-sm-12 col-md-9 col-lg-10">
+                        <div class="col-sm-12 col-md-8 col-lg-9">
 
 
                             <h2 class="text-muted" v-if="srvModel.tagline">{{srvModel.tagline}}</h2>
                         </div>
-                        <div class="col-sm-12 col-md-3 col-lg-2">
+                        <div class="col-sm-12 col-md-4 col-lg-3">
-                            <button v-if="srvModel.info.active" class="btn btn-lg btn-primary w-100" v-on:click="contributeModalOpen = true">Contribute</button>
+                            <button v-if="srvModel.info.active" class="btn btn-lg btn-primary w-100 font-weight-bold" v-on:click="contributeModalOpen = true">Contribute</button>
 
 
                         </div>
                     </div>
                 </div>
-                <hr/>
+                <template v-if="srvModel.disqusEnabled">
-                <div class="row">
+                    <b-tabs>
-                    <div class="col-md-8 col-sm-12">
+                        <b-tab title="Details"active>
-                        <div class="card-text" v-html="srvModel.description"></div>
+                            <div class="row">
+                                <div class="col-md-8 col-sm-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"
+                                                :in-modal="false"
+                                                :perks="srvModel.perks">
+    
+                                    </contribute>
+                                </div>
+                            </div>
+                        </b-tab>
+                        <b-tab title="Discussion" >
+                            <div id="disqus_thread"></div>
+                        </b-tab>
+                    </b-tabs>
+                    
+                </template>
+                <template v-else>
+                    <hr/>
+                    <div class="row">
+                        <div class="col-md-8 col-sm-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"
+                                        :in-modal="false"
+                                        :perks="srvModel.perks">
+    
+                            </contribute>
+                        </div>
                     </div>
-                    <div class="col-md-4 col-sm-12">
+                </template>
-                        <contribute :target-currency="srvModel.targetCurrency"
-                                    :active="srvModel.info.active"
-                                    :in-modal="false"
-                                    :perks="srvModel.perks">
-
-                        </contribute>
-                    </div>
-                </div>
-
-
             </div>
         </div>
     </div>
-    <b-modal title="Contribute" v-model="contributeModalOpen" size="lg" ok-only="true" ok-title="Close" ref="modalContribute">
+    <b-modal title="Contribute" v-model="contributeModalOpen" size="lg" ok-only="true" ok-variant="secondary" ok-title="Close" ref="modalContribute">
 
         <contribute v-if="contributeModalOpen"
                     :target-currency="srvModel.targetCurrency"
@@ -133,7 +156,7 @@
 
 <script type="text/x-template" id="perks-template">
 <div >
-    <perk :perk="{title: 'Donate Custom Amount', price: { value: 0}}" :target-currency="targetCurrency" :active="active" 
+    <perk :perk="{title: 'Donate Custom Amount', price: { value: null}, custom: true}" :target-currency="targetCurrency" :active="active" 
         :in-modal="inModal">
     </perk>
     <perk v-for="(perk, index) in perks" :perk="perk" :target-currency="targetCurrency" :active="active" 
@@ -144,16 +167,34 @@
 
 <script type="text/x-template" id="perk-template"> 
 <div class="card mb-4 perk"  v-bind:class="{ 'expanded': expanded, 'unexpanded': !expanded }" v-on:click="expanded = true">
-    <div class="perk-zoom text-white" v-if="!expanded"> ZZZ</div>
+    <div class="perk-zoom " v-if="!expanded">
+        <div class="perk-zoom-bg bg-primary"> </div>
+        <div class="perk-zoom-text w-100 text-center text-white font-weight-bold">
+            Select this contribution perk
+        </div>
+    </div>
     <form v-on:submit='onContributeFormSubmit'>
         <input type="hidden" :value="perk.id" id="choiceKey"/> 
         <img v-if="perk.image && perk.image != 'null' "  class="card-img-top" :src="perk.image" />
         <div class="card-body">
-            <h5 class="card-title" >{{perk.title? perk.title : perk.id}}</h5>
+            <div class="card-title d-flex justify-content-between" >
+                <span class="h5">{{perk.title? perk.title : perk.id}} </span>
+                <span class="text-muted" > 
+                    <template v-if="perk.price.value">{{perk.price.value}} 
+                        {{targetCurrency}} 
+                        <template v-if="perk.custom">or more</template>
+                    </template>
+                    <template v-else-if="!perk.price.value && perk.custom">
+                        Any amount
+                    </template>
+                </span>
+            </div>
             <p  class="card-text" v-if="perk.description" v-html="perk.description"></p>
+            
             <div class="input-group" style="max-width: 500px;" v-if="expanded">
                 <input 
                     :disabled="!active"
+                    :readonly="!perk.custom"
                     class="form-control" 
                     type="number" 
                     v-model="amount"
@@ -167,7 +208,7 @@
                         class="btn btn-primary" 
                         :disabled="!active" 
                         type="submit">
-                        Contribute
+                        Continue
                     </button>
                 </div>
             </div>

BTCPayServer/wwwroot/crowdfund/app.js

@@ -74,8 +74,12 @@ addLoadEvent(function (ev) {
             });
             eventAggregator.$on("payment-received", function (amount, cryptoCode, type) {
                 var onChain = type.toLowerCase() === "btclike";
-                playRandomQuakeSound();
+                if(this.srvModel.soundsEnabled) {
-                fireworks();
+                    playRandomQuakeSound();
+                }
+                if(this.srvModel.animationsEnabled) {
+                    fireworks();
+                }
                 if(onChain){
                     Vue.toasted.show('New payment of ' + amount+ " "+ cryptoCode + " " + (onChain? "On Chain": "LN "), {
                         iconPack: "fontawesome",
@@ -90,7 +94,33 @@ addLoadEvent(function (ev) {
                     } );
                 }
                 
+                
             });
+            if(srvModel.disqusEnabled){
+                window.disqus_config = function () {
+                    // Replace PAGE_URL with your page's canonical URL variable
+                    this.page.url = window.location.href;
+
+                    // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+                    this.page.identifier = self.srvModel.appId;
+                };
+
+                (function() {  // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
+                    var d = document, s = d.createElement('script');
+
+                    // IMPORTANT: Replace EXAMPLE with your forum shortname!
+                    s.src = "https://"+self.srvModel.disqusShortname+".disqus.com/embed.js";
+                    s.async= true;
+                    s.setAttribute('data-timestamp', +new Date());
+                    (d.head || d.body).appendChild(s);
+                    
+                    var s2 = d.createElement('script');
+                    s2.src="//"+self.srvModel.disqusShortname+".disqus.com/count.js";
+                    s2.async= true;
+                    s.setAttribute('data-timestamp', +new Date());
+                    (d.head || d.body).appendChild(s);
+                })();
+            }
             eventAggregator.$on("info-updated", function (model) {
                 console.warn("UPDATED", self.srvModel, arguments);
                 self.srvModel = model;

BTCPayServer/wwwroot/crowdfund/components/contribute.js

@@ -26,11 +26,18 @@ Vue.component('perk', {
                 return;
             }
             eventAggregator.$emit("contribute", {amount: this.amount, choiceKey: this.choiceKey});
+        },
+        expand: function(){
+            this.expanded = true;   
         }
+        
+        
     },
     mounted: function(){
         this.amount = this.perk.price.value;
+        
     }
 });
 
 
+

BTCPayServer/wwwroot/crowdfund/styles/main.css

@@ -11,10 +11,24 @@ canvas#fireworks{
     display: none;
     opacity: 0;
 }
+.perk-zoom-bg{
+    position: absolute;
+    width:100%;
+    height:100%;
+    left:0;
+    top:0;
+    opacity: 0.9;
+}
+.perk-zoom-text{
+    left: 50%;
+    top: 50%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    position: absolute;
+}
 .perk:hover .perk-zoom{
     opacity:1;
     display: block;
-    background-color: rgba(0,158,116,0.9);
     position: absolute;
     width:100%;
     height:100%;