Updates Pull Payment Payment Method (#3107)

* adds checkbox to pull payment

* adds label improvement

* removes "back to list"

* Remove superfluous style block

Seems to be a copy and paste remainder

* Make custom CSS additional options

* Fix input name and test

* Improve display for case with only one payment method

* Fix test

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>

BTCPayServer.Tests/SeleniumTests.cs

@@ -1028,7 +1028,6 @@ namespace BTCPayServer.Tests
             s.Driver.FindElement(By.Id("Name")).SendKeys("PP1");
             s.Driver.FindElement(By.Id("Amount")).Clear();
             s.Driver.FindElement(By.Id("Amount")).SendKeys("99.0");
-            ;
             s.Driver.FindElement(By.Id("Create")).Click();
             s.Driver.FindElement(By.LinkText("View")).Click();
 
@@ -1178,7 +1177,7 @@ namespace BTCPayServer.Tests
 
             s.Driver.FindElement(By.Id("NewPullPayment")).Click();
 
-            var paymentMethodOptions = s.Driver.FindElements(By.CssSelector("#PaymentMethods option"));
+            var paymentMethodOptions = s.Driver.FindElements(By.CssSelector("input[name='PaymentMethods']"));
             Assert.Equal(2, paymentMethodOptions.Count);
             
             s.Driver.FindElement(By.Id("Name")).SendKeys("Lightning Test");
@@ -1393,10 +1392,7 @@ namespace BTCPayServer.Tests
             Assert.Equal(new LightMoney(0.0000001m, LightMoneyUnit.BTC),
                 lnurlResponse2.GetPaymentRequest(network).MinimumAmount);
             
-
+            s.GoToLightningSettings(s.StoreId, cryptoCode);
-
-            s.GoToStore(s.StoreId);
-            s.Driver.FindElement(By.Id($"Modify-Lightning{cryptoCode}")).Click();
             // LNURL is enabled and settings are expanded
             Assert.True(s.Driver.FindElement(By.Id("LNURLEnabled")).Selected);
             Assert.Contains("show", s.Driver.FindElement(By.Id("LNURLSettings")).GetAttribute("class"));
@@ -1413,8 +1409,7 @@ namespace BTCPayServer.Tests
             s.GoToInvoiceCheckout(i);
             s.Driver.FindElement(By.ClassName("payment__currencies_noborder"));
 
-            s.GoToStore(s.StoreId);
+            s.GoToLightningSettings(s.StoreId, cryptoCode);
-            s.Driver.FindElement(By.Id($"Modify-Lightning{cryptoCode}")).Click();
             s.Driver.SetCheckbox(By.Id("LNURLBech32Mode"), false);
             s.Driver.SetCheckbox(By.Id("LNURLStandardInvoiceEnabled"), false);
             s.Driver.SetCheckbox(By.Id("DisableBolt11PaymentMethod"), true);
@@ -1422,7 +1417,7 @@ namespace BTCPayServer.Tests
             Assert.Contains($"{cryptoCode} Lightning settings successfully updated", s.FindAlertMessage().Text);
             
             // Ensure the toggles are set correctly
-            s.Driver.FindElement(By.Id($"Modify-Lightning{cryptoCode}")).Click();
+            s.GoToLightningSettings(s.StoreId, cryptoCode);
 
             //TODO: DisableBolt11PaymentMethod is actually disabled because LNURLStandardInvoiceEnabled is disabled
             // checkboxes is not good choice here, in next release we should have multi choice instead
@@ -1442,7 +1437,7 @@ namespace BTCPayServer.Tests
             s.GoToHome();
             var newStore = s.CreateNewStore(false);
             s.AddLightningNode(cryptoCode, LightningConnectionType.LndREST, false);
-            s.Driver.FindElement(By.Id($"Modify-Lightning{cryptoCode}")).Click();
+            s.GoToLightningSettings(newStore.storeId, cryptoCode);
             s.Driver.SetCheckbox(By.Id("LNURLEnabled"), true);
             s.Driver.SetCheckbox(By.Id("DisableBolt11PaymentMethod"), true);
             s.Driver.FindElement(By.Id("save")).Click();
@@ -1456,11 +1451,10 @@ namespace BTCPayServer.Tests
             // Check that pull payment has lightning option
             s.GoToStore(s.StoreId, StoreNavPages.PullPayments);
             s.Driver.FindElement(By.Id("NewPullPayment")).Click();
-            Assert.Equal(new PaymentMethodId(cryptoCode, PaymentTypes.LightningLike),PaymentMethodId.Parse(Assert.Single(s.Driver.FindElement(By.Id("PaymentMethods")).FindElements(By.TagName("option"))).GetAttribute("value")));
+            Assert.Equal(new PaymentMethodId(cryptoCode, PaymentTypes.LightningLike),PaymentMethodId.Parse(Assert.Single(s.Driver.FindElements(By.CssSelector("input[name='PaymentMethods']"))).GetAttribute("value")));
             s.Driver.FindElement(By.Id("Name")).SendKeys("PP1");
             s.Driver.FindElement(By.Id("Amount")).Clear();
             s.Driver.FindElement(By.Id("Amount")).SendKeys("0.0000001");
-            ;
             s.Driver.FindElement(By.Id("Create")).Click();
             s.Driver.FindElement(By.LinkText("View")).Click();
             s.Driver.FindElement(By.Id("Destination")).SendKeys(lnurl);

BTCPayServer/Models/WalletViewModels/PullPaymentsModel.cs

@@ -49,6 +49,7 @@ namespace BTCPayServer.Models.WalletViewModels
         [Display(Name = "Custom CSS Code")]
         public string EmbeddedCSS { get; set; }
 
+        [Display(Name = "Payment Methods")]
         public IEnumerable<string> PaymentMethods { get; set; }
         public IEnumerable<SelectListItem> PaymentMethodItems { get; set; }
     }

BTCPayServer/Views/PullPayment/ViewPullPayment.cshtml

@@ -57,7 +57,15 @@
                             <div class="col-12 mb-3 col-lg-6 mb-lg-0">
                                 <div class="input-group">
                                     <input class="form-control form-control-lg font-monospace" asp-for="Destination" placeholder="Enter destination to claim funds" required style="font-size:.9rem;height:42px;">
-                                    <select class="form-select w-auto" asp-for="SelectedPaymentMethod" asp-items="Model.PaymentMethods.Select(id => new SelectListItem(id.ToPrettyString(), id.ToString()))"></select>
+                                    @if (Model.PaymentMethods.Length == 1)
+                                    {
+                                        <input type="hidden" asp-for="SelectedPaymentMethod">
+                                        <span class="input-group-text">@Model.PaymentMethods.First().ToPrettyString()</span>
+                                    }
+                                    else
+                                    {
+                                        <select class="form-select w-auto" asp-for="SelectedPaymentMethod" asp-items="Model.PaymentMethods.Select(id => new SelectListItem(id.ToPrettyString(), id.ToString()))"></select>
+                                    }
                                 </div>
                             </div>
 

BTCPayServer/Views/StorePullPayments/NewPullPayment.cshtml

@@ -7,50 +7,6 @@
     ViewData.SetActivePageAndTitle(StoreNavPages.PullPayments, "New pull payment", Context.GetStoreData().StoreName);
 }
 
-<style type="text/css">
-    .smMaxWidth {
-        max-width: 200px;
-    }
-
-    @@media (min-width: 768px) {
-        .smMaxWidth {
-            max-width: 400px;
-        }
-    }
-
-    .unconf > * {
-        opacity: 0.5;
-    }
-
-    .switchTimeFormat {
-        display: block;
-        max-width: 150px;
-        width: 150px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    .transactionLabel:not(:last-child) {
-        margin-bottom: 4px;
-    }
-
-    .removeTransactionLabelForm {
-        display: inline;
-        position: absolute;
-        right: 4px;
-    }
-
-        .removeTransactionLabelForm button {
-            color: #212529;
-            cursor: pointer;
-            display: inline;
-            padding: 0;
-            background-color: transparent;
-            border: 0;
-        }
-</style>
-
 <div class="row">
     <div class="col-md-6">
         <h4 class="mb-3">@ViewData["Title"]</h4>
@@ -75,26 +31,52 @@
                     <span asp-validation-for="Currency" class="text-danger"></span>
                 </div>
             </div>
-            <div class="form-group">
+            <div class="form-group mb-4">
-                <label asp-for="PaymentMethods"></label>
+                <label asp-for="PaymentMethods" class="form-label"></label>
-                <select asp-for="PaymentMethods" asp-items="Model.PaymentMethodItems" class="form-select" multiple></select>
+                @foreach (var item in Model.PaymentMethodItems)
+                {
+                    <div class="form-check mb-2">
+                        <label class="form-label">
+                            <input name="PaymentMethods" class="form-check-input" type="checkbox" value="@item.Value" @(item.Selected ? "checked" : "")>
+                            @item.Text
+                        </label>
+                    </div>
+                }
             </div>
+
+            <h5 class="mt-4 mb-2">Additional Options</h5>
             <div class="form-group">
-                <label asp-for="CustomCSSLink" class="form-label"></label>
+                <div class="accordion" id="additional">
-                <a href="https://docs.btcpayserver.org/Development/Theme/#2-bootstrap-themes" target="_blank" rel="noreferrer noopener">
+                    <div class="accordion-item">
-                    <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
+                        <h2 class="accordion-header" id="additional-custom-css-header">
-                </a>
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#additional-custom-css" aria-expanded="false" aria-controls="additional-custom-css">
-                <input asp-for="CustomCSSLink" class="form-control" />
+                                Custom CSS
-                <span asp-validation-for="CustomCSSLink" class="text-danger"></span>
+                                <vc:icon symbol="caret-down" />
-            </div>
+                            </button>
-            <div class="form-group">
+                        </h2>
-                <label asp-for="EmbeddedCSS" class="form-label"></label>
+                        <div id="additional-custom-css" class="accordion-collapse collapse" aria-labelledby="additional-custom-css-header">
-                <textarea asp-for="EmbeddedCSS" rows="10" cols="40" class="form-control"></textarea>
+                            <div class="accordion-body">
-                <span asp-validation-for="EmbeddedCSS" class="text-danger"></span>
+                                <div class="form-group">
+                                    <label asp-for="CustomCSSLink" class="form-label"></label>
+                                    <a href="https://docs.btcpayserver.org/Development/Theme/#2-bootstrap-themes" target="_blank" rel="noreferrer noopener">
+                                        <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
+                                    </a>
+                                    <input asp-for="CustomCSSLink" class="form-control" />
+                                    <span asp-validation-for="CustomCSSLink" class="text-danger"></span>
+                                </div>
+                                <div class="form-group">
+                                    <label asp-for="EmbeddedCSS" class="form-label"></label>
+                                    <textarea asp-for="EmbeddedCSS" rows="10" cols="40" class="form-control"></textarea>
+                                    <span asp-validation-for="EmbeddedCSS" class="text-danger"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
+            
             <div class="form-group">
                 <input type="submit" value="Create" class="btn btn-primary" id="Create" />
-                <a asp-action="PullPayments" asp-route-walletId="@Context.GetRouteValue("walletId")" class="text-muted ms-3">Back to list</a>
             </div>
         </form>
     </div>