From f2870caed264be4d4eb8e2b16249a3a105408c45 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Tue, 13 Oct 2020 09:58:46 +0200 Subject: [PATCH] Payment redesign (#1967) * Payment redesign Guess who's back! This reverts commit 4174fa648d994e098d8555bca0a5b3a255541cb5. * Refactor PullPayment state string Compatible with this one: https://github.com/btcpayserver/btcpayserver/pull/1834/files#diff-a9136096252382b110b9a7ac7747b95aR41 * Use unified copy to clipboard function * Refactor status text class to helper function --- BTCPayServer.Data/Data/PullPaymentData.cs | 19 + BTCPayServer.Tests/SeleniumTests.cs | 5 +- .../Controllers/PullPaymentController.cs | 5 +- BTCPayServer/Views/Account/Login.cshtml | 4 +- BTCPayServer/Views/Account/Register.cshtml | 4 +- .../MinimalPaymentRequest.cshtml | 175 ------- .../PaymentRequest/ViewPaymentRequest.cshtml | 465 +++++++++++------- .../Views/PullPayment/ViewPullPayment.cshtml | 284 ++++++----- BTCPayServer/Views/Shared/Header.cshtml | 7 + BTCPayServer/Views/Shared/_Layout.cshtml | 19 +- .../Views/Shared/_StatusMessage.cshtml | 4 +- BTCPayServer/bundleconfig.json | 13 +- BTCPayServer/wwwroot/js/copy-to-clipboard.js | 22 + BTCPayServer/wwwroot/main/site.css | 61 ++- BTCPayServer/wwwroot/main/site.js | 11 +- .../wwwroot/payment-request-admin/main.js | 7 +- BTCPayServer/wwwroot/payment-request/app.js | 16 +- .../wwwroot/payment-request/styles/main.css | 7 - 18 files changed, 570 insertions(+), 558 deletions(-) delete mode 100644 BTCPayServer/Views/PaymentRequest/MinimalPaymentRequest.cshtml create mode 100644 BTCPayServer/wwwroot/js/copy-to-clipboard.js delete mode 100644 BTCPayServer/wwwroot/payment-request/styles/main.css diff --git a/BTCPayServer.Data/Data/PullPaymentData.cs b/BTCPayServer.Data/Data/PullPaymentData.cs index ab2fce1b0..374b4e6c0 100644 --- a/BTCPayServer.Data/Data/PullPaymentData.cs +++ b/BTCPayServer.Data/Data/PullPaymentData.cs @@ -35,6 +35,25 @@ namespace BTCPayServer.Data return request.Where(p => false); } } + + public static string GetStateString(this PayoutState state) + { + switch (state) + { + case PayoutState.AwaitingApproval: + return "Awaiting Approval"; + case PayoutState.AwaitingPayment: + return "Awaiting Payment"; + case PayoutState.InProgress: + return "In Progress"; + case PayoutState.Completed: + return "Completed"; + case PayoutState.Cancelled: + return "Cancelled"; + default: + throw new ArgumentOutOfRangeException(nameof(state), state, null); + } + } } public class PullPaymentData { diff --git a/BTCPayServer.Tests/SeleniumTests.cs b/BTCPayServer.Tests/SeleniumTests.cs index b57efba9d..971d1fede 100644 --- a/BTCPayServer.Tests/SeleniumTests.cs +++ b/BTCPayServer.Tests/SeleniumTests.cs @@ -806,7 +806,7 @@ namespace BTCPayServer.Tests s.Driver.FindElement(By.Id("ClaimedAmount")).Clear(); s.Driver.FindElement(By.Id("ClaimedAmount")).SendKeys("20" + Keys.Enter); s.AssertHappyMessage(); - Assert.Contains("AwaitingApproval", s.Driver.PageSource); + Assert.Contains("Awaiting Approval", s.Driver.PageSource); var viewPullPaymentUrl = s.Driver.Url; // This one should have nothing @@ -848,8 +848,7 @@ namespace BTCPayServer.Tests s.Driver.Navigate().GoToUrl(viewPullPaymentUrl); txs = s.Driver.FindElements(By.ClassName("transaction-link")); Assert.Equal(2, txs.Count); - Assert.Contains("InProgress", s.Driver.PageSource); - + Assert.Contains("In Progress", s.Driver.PageSource); await s.Server.ExplorerNode.GenerateAsync(1); diff --git a/BTCPayServer/Controllers/PullPaymentController.cs b/BTCPayServer/Controllers/PullPaymentController.cs index fe8bebd5c..aeca1988b 100644 --- a/BTCPayServer/Controllers/PullPaymentController.cs +++ b/BTCPayServer/Controllers/PullPaymentController.cs @@ -1,6 +1,7 @@ using System; using System.Globalization; using System.Linq; +using System.Text.RegularExpressions; using System.Threading.Tasks; using BTCPayServer; using BTCPayServer.Data; @@ -69,13 +70,13 @@ namespace BTCPayServer.Controllers CurrencyData = cd, LastUpdated = DateTime.Now, Payouts = payouts - .Select(entity => new ViewPullPaymentModel.PayoutLine() + .Select(entity => new ViewPullPaymentModel.PayoutLine { Id = entity.Entity.Id, Amount = entity.Blob.Amount, AmountFormatted = _currencyNameTable.FormatCurrency(entity.Blob.Amount, blob.Currency), Currency = blob.Currency, - Status = entity.Entity.State.ToString(), + Status = entity.Entity.State.GetStateString(), Destination = entity.Blob.Destination.Address.ToString(), Link = GetTransactionLink(_networkProvider.GetNetwork(entity.Entity.GetPaymentMethodId().CryptoCode), entity.TransactionId), TransactionId = entity.TransactionId diff --git a/BTCPayServer/Views/Account/Login.cshtml b/BTCPayServer/Views/Account/Login.cshtml index 61d30087f..ab81fd112 100644 --- a/BTCPayServer/Views/Account/Login.cshtml +++ b/BTCPayServer/Views/Account/Login.cshtml @@ -29,9 +29,9 @@ @if (env.OnionUrl != null) {
- + - Copy Tor URL + Copy Tor URL
} diff --git a/BTCPayServer/Views/Account/Register.cshtml b/BTCPayServer/Views/Account/Register.cshtml index 6016cf658..495e48e37 100644 --- a/BTCPayServer/Views/Account/Register.cshtml +++ b/BTCPayServer/Views/Account/Register.cshtml @@ -33,9 +33,9 @@ @if (env.OnionUrl != null) {
- + - Copy Tor URL + Copy Tor URL
} diff --git a/BTCPayServer/Views/PaymentRequest/MinimalPaymentRequest.cshtml b/BTCPayServer/Views/PaymentRequest/MinimalPaymentRequest.cshtml deleted file mode 100644 index 152b7262b..000000000 --- a/BTCPayServer/Views/PaymentRequest/MinimalPaymentRequest.cshtml +++ /dev/null @@ -1,175 +0,0 @@ -@model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel - -
-
-
-
-

- @Model.Title - @Model.Status -

-
-
-
- - - - - - - - - - - - - - - -
Request amount:@Model.AmountFormatted
Paid so far:@Model.AmountCollectedFormatted
Amount due:@Model.AmountDueFormatted
- @if (Model.Description != null && Model.Description != "" && Model.Description != "
") - { -
@Safe.Raw(Model.Description)
- } -
-
-
- - - - - - - - - - - @if (Model.Invoices == null && !Model.Invoices.Any()) - { - - - - } - else - { - foreach (var invoice in Model.Invoices) - { - - - - - - - if (invoice.Payments != null && invoice.Payments.Any()) - { - - - - } - } - } - @if (Model.IsPending && !Model.Archived) - { - - - - }else if (Model.Archived) - { - - - - } - -
Invoice #PriceExpiryStatus
No payments made yet
@invoice.Id@invoice.Amount @invoice.Currency@invoice.ExpiryDate.ToString("g")@invoice.Status
- -
- - - - - - - - @foreach (var payment in invoice.Payments) - { - - - - - - - - - } -
Tx IdPayment MethodAmountLink
-
@payment.Id
- 		- @payment.Id - @payment.PaymentMethod@payment.Amount - @if (!string.IsNullOrEmpty(payment.Link)) - { - Link - } - - @payment.Link -
-
-
- @if (Model.AllowCustomPaymentAmounts && !Model.AnyPendingInvoice) - { -
- -
- -
- @Model.Currency.ToUpper() - -
-
-
- } - else - { - - Pay now - - if (Model.AnyPendingInvoice && !Model.PendingInvoiceHasPayments) - { -
- -
- } - } -
- -
-
-
-
- -
-
- -
Updated @Model.LastUpdated.ToString("g")
-
- Powered by BTCPay Server -
-
-
-
-
-
diff --git a/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml b/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml index 1cddd13dc..c9003d9d3 100644 --- a/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml +++ b/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml @@ -1,6 +1,7 @@ @model BTCPayServer.Models.PaymentRequestViewModels.ViewPaymentRequestViewModel @addTagHelper *, BundlerMinifier.TagHelpers +@inject BTCPayServer.Services.BTCPayServerEnvironment env @inject BTCPayServer.HostedServices.CssThemeManager themeManager @{ ViewData["Title"] = Model.Title; @@ -8,221 +9,313 @@ } - + @Model.Title - - + + + @if (Model.CustomCSSLink != null) { } - @if (!Context.Request.Query.ContainsKey("simple")) - { - - - - @*We need to make sure btcpay.js is not bundled, else it will not work if there is a RootPath*@ - - } - - - + + + @*We need to make sure btcpay.js is not bundled, else it will not work if there is a RootPath*@ + @Safe.Raw(Model.EmbeddedCSS) - - - - -@if (Context.Request.Query.ContainsKey("simple")) -{ - @await Html.PartialAsync("MinimalPaymentRequest", Model) -} -else -{ - -
-
-
-
-

- {{srvModel.title}} - - - - - -

-
+ + +
+ + } + +
+
+ @await Html.PartialAsync("_StatusMessage", new ViewDataDictionary(ViewData){ { "Margin", "mb-4" } }) + @if (!ViewContext.ModelState.IsValid) + { + @Html.ValidationSummary(string.Empty, new { @class = "alert alert-danger mb-4 pb-0 text-center" }) } -
-
-
-
Pull payment details
- - - - - - - - - - - - - - @if (Model.ResetIn != String.Empty) - { - - - - - } -
Claim limit:@Model.AmountFormatted
Already claimed:@Model.AmountCollectedFormatted
Available claim:@Model.AmountDueFormatted
Reset in:@Model.ResetIn
- @if (Model.Description != null && Model.Description != "" && Model.Description != "
") +
+
+
+ @if (!Model.Title.IsNullOrWhiteSpace()) { -
@Safe.Raw(Model.Description)
+

@Model.Title

+ } +
+ Last Updated +   + @Model.LastUpdated.ToString("g") + +
+ @if (!string.IsNullOrEmpty(Model.ResetIn)) + { +

+ Reset in +   + @Model.ResetIn +

+ } + @if (!string.IsNullOrEmpty(Model.Description) && Model.Description != "
") + { +
@Safe.Raw(Model.Description)
}
-
-
Awaiting claims
- @if (Model.Payouts.Any()) - { - foreach (var invoice in Model.Payouts) - { - - - - - - - - - - - - - - @if (!String.IsNullOrEmpty(invoice.Link)) - { - - - - - } -
Status@invoice.Status
Amount claimed@invoice.AmountFormatted
Destination - @invoice.Destination -
Transaction@invoice.TransactionId
- } - } - else - { -

No claim made yet

- } +
+
+
+

Payment Details

+
+
+
@Model.AmountDueFormatted
+
Available claim
+
+
+
+
+
+
@Model.AmountCollectedFormatted
+
Already claimed
+
+
+
@Model.AmountFormatted
+
Claim limit
+
+
-
-
-
- Updated @Model.LastUpdated.ToString("g") -
-
- Powered by BTCPay Server +
+
+
+

Awaiting Claims

+
+ @if (Model.Payouts.Any()) + { + + + + + + + + + + @foreach (var invoice in Model.Payouts) + { + + + + + + } + +
DestinationAmount requestedStatus
+ @invoice.Destination + @invoice.AmountFormatted + @if (!string.IsNullOrEmpty(invoice.Link)) + { + @invoice.Status + } + else + { + @invoice.Status + } +
+ } + else + { +

No claim made yet.

+ } +
-
+
+
-
- + diff --git a/BTCPayServer/Views/Shared/Header.cshtml b/BTCPayServer/Views/Shared/Header.cshtml index 1eef7bc0c..103c74e32 100644 --- a/BTCPayServer/Views/Shared/Header.cshtml +++ b/BTCPayServer/Views/Shared/Header.cshtml @@ -21,3 +21,10 @@ @* JS *@ +@* Non-JS *@ + diff --git a/BTCPayServer/Views/Shared/_Layout.cshtml b/BTCPayServer/Views/Shared/_Layout.cshtml index a4d039543..1e955e07c 100644 --- a/BTCPayServer/Views/Shared/_Layout.cshtml +++ b/BTCPayServer/Views/Shared/_Layout.cshtml @@ -5,30 +5,13 @@ @inject BTCPayServer.HostedServices.CssThemeManager themeManager - + @RenderSection("HeadScripts", required: false) @RenderSection("HeaderContent", false) - - - diff --git a/BTCPayServer/Views/Shared/_StatusMessage.cshtml b/BTCPayServer/Views/Shared/_StatusMessage.cshtml index 0b1ffef26..45674dc38 100644 --- a/BTCPayServer/Views/Shared/_StatusMessage.cshtml +++ b/BTCPayServer/Views/Shared/_StatusMessage.cshtml @@ -4,10 +4,10 @@ @if (parsedModel != null) { -