Crowdfund: Improve no perks case (#5378)

If there are no perks configured, do not display the perks sidebar and contribute custom amount directly, when the main CTA "Contribute" is clicked.

Before it opened a mopdal, where one had to select the only option (custom amount) manually — so this gets rid of the extra step.

Closes #5376.

BTCPayServer.Tests/SeleniumTests.cs

@@ -1107,7 +1107,7 @@ namespace BTCPayServer.Tests
             s.Driver.FindElement(By.Id("Title")).SendKeys("Kukkstarter");
             s.Driver.FindElement(By.CssSelector("div.note-editable.card-block")).SendKeys("1BTC = 1BTC");
             s.Driver.FindElement(By.Id("TargetCurrency")).Clear();
-            s.Driver.FindElement(By.Id("TargetCurrency")).SendKeys("JPY");
+            s.Driver.FindElement(By.Id("TargetCurrency")).SendKeys("EUR");
             s.Driver.FindElement(By.Id("TargetAmount")).SendKeys("700");
 
             // test wrong dates
@@ -1122,7 +1122,8 @@ namespace BTCPayServer.Tests
             s.Driver.FindElement(By.Id("SaveSettings")).Click();
             Assert.Contains("App updated", s.FindAlertMessage().Text);
             var appId = s.Driver.Url.Split('/')[4];
-
+            
+            // CHeck public page
             s.Driver.FindElement(By.Id("ViewApp")).Click();
             var windows = s.Driver.WindowHandles;
             Assert.Equal(2, windows.Count);
@@ -1132,6 +1133,26 @@ namespace BTCPayServer.Tests
             Assert.Equal("Currently active!",
                 s.Driver.FindElement(By.CssSelector("[data-test='time-state']")).Text);
 
+            // Contribute
+            s.Driver.FindElement(By.Id("crowdfund-body-header-cta")).Click();
+            Thread.Sleep(1000);
+            s.Driver.WaitUntilAvailable(By.Name("btcpay"));
+
+            var frameElement = s.Driver.FindElement(By.Name("btcpay"));
+            Assert.True(frameElement.Displayed);
+            var iframe = s.Driver.SwitchTo().Frame(frameElement);
+            iframe.WaitUntilAvailable(By.Id("Checkout-v2"));
+
+            IWebElement closebutton = null;
+            TestUtils.Eventually(() =>
+            {
+                closebutton = iframe.FindElement(By.Id("close"));
+                Assert.True(closebutton.Displayed);
+            });
+            closebutton.Click();
+            s.Driver.AssertElementNotFound(By.Name("btcpay"));
+            
+            // Back to admin view
             s.Driver.Close();
             s.Driver.SwitchTo().Window(windows[0]);
             

BTCPayServer/Views/Shared/Crowdfund/Public/ViewCrowdfund.cshtml

@@ -211,11 +211,11 @@
     </div>
 
     <div class="text-center mb-4" id="crowdfund-body-header">
-        <button v-if="active" id="crowdfund-body-header-cta" class="btn btn-lg btn-primary py-2 px-5 only-for-js" v-on:click="contributeModalOpen = true">Contribute</button>
+        <button v-if="active" id="crowdfund-body-header-cta" class="btn btn-lg btn-primary py-2 px-5 only-for-js" v-on:click="contribute">Contribute</button>
     </div>
 
     <div class="row mt-4 justify-content-between gap-5">
-        <div class="col-lg-7 col-sm-12" id="crowdfund-body-description-container">
+        <div :class="{ 'col-lg-7 col-sm-12': hasPerks, 'col-12': !hasPerks }" id="crowdfund-body-description-container">
             <template v-if="srvModel.disqusEnabled && srvModel.disqusShortname">
                 <b-tabs>
                     <b-tab title="Details" active>
@@ -232,7 +232,7 @@
                 </div>
             </template>
         </div>
-        <div class="col-lg-4 col-sm-12" id="crowdfund-body-contribution-container">
+        <div class="col-lg-4 col-sm-12" id="crowdfund-body-contribution-container" v-if="hasPerks">
             <contribute :target-currency="srvModel.targetCurrency"
                         :loading="loading"
                         :display-perks-ranking="srvModel.displayPerksRanking"
@@ -266,7 +266,6 @@
                     :in-modal="true">
         </contribute>
     </b-modal>
-
     <footer class="store-footer">
         <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
             Powered by <partial name="_StoreFooterLogo" />

BTCPayServer/wwwroot/crowdfund/app.js

@@ -38,7 +38,7 @@ document.addEventListener("DOMContentLoaded",function (ev) {
                 if (e) {
                     e.preventDefault();
                 }
-                if(!this.active || this.loading){
+                if (!this.active || this.loading){
                     return;
                 }
                 
@@ -162,6 +162,9 @@ document.addEventListener("DOMContentLoaded",function (ev) {
                     result.push(currentPerk);
                 }
                 return result;
+            },
+            hasPerks() {
+                return this.srvModel.perks && this.srvModel.perks.length > 0;
             }
         },
         methods: {
@@ -214,6 +217,15 @@ document.addEventListener("DOMContentLoaded",function (ev) {
             },
             formatAmount: function(amount) {
                 return formatAmount(amount, this.srvModel.currencyData.divisibility)
+            },
+            contribute() {
+                if (!this.active || this.loading) return;
+                
+                if (this.hasPerks){
+                    this.contributeModalOpen = true
+                } else {
+                    eventAggregator.$emit("contribute", {amount: null, choiceKey: null});
+                }
             }
         },
         mounted: function () {