UI: Unify payment request list with invoices (#4294)

Some quick win updates to the payment requests list that unify the display with the invoices list:

- Status is displayed as badge
- Amount is properly formatted
- Expiry date format and ability to switch to relative date

BTCPayServer/Controllers/UIPaymentRequestController.cs

@@ -74,7 +74,15 @@ namespace BTCPayServer.Controllers
                 IncludeArchived = includeArchived
             });
 
-            model.Items = result.Select(data => new ViewPaymentRequestViewModel(data)).ToList();
+            model.Items = result.Select(data =>
+            {
+                var blob = data.GetBlob();
+                return new ViewPaymentRequestViewModel(data)
+                {
+                    AmountFormatted = _Currencies.FormatCurrency(blob.Amount, blob.Currency)
+                };
+            }).ToList();
+            
             return View(model);
         }
 

BTCPayServer/Models/PaymentRequestViewModels/ListPaymentRequestsViewModel.cs

@@ -101,7 +101,7 @@ namespace BTCPayServer.Models.PaymentRequestViewModels
             switch (data.Status)
             {
                 case Client.Models.PaymentRequestData.PaymentRequestStatus.Pending:
-                    Status = ExpiryDate.HasValue ? $"Expires on {ExpiryDate.Value:g}" : "Pending";
+                    Status = "Pending";
                     IsPending = true;
                     break;
                 case Client.Models.PaymentRequestData.PaymentRequestStatus.Completed:

BTCPayServer/Views/UIInvoice/ListInvoices.cshtml

@@ -285,7 +285,7 @@
                         <th class="w-150px">
                             <div class="d-flex align-items-center gap-1">
                                 Date
-                                <button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format" title="Switch date format"></button>
+                                <button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format only-for-js" title="Switch date format"></button>
                             </div>
                         </th>
                         <th class="text-nowrap">Order Id</th>

BTCPayServer/Views/UIPaymentRequest/GetPaymentRequests.cshtml

@@ -1,4 +1,7 @@
 @using BTCPayServer.Services.PaymentRequests
+@using Microsoft.AspNetCore.Html
+@using Microsoft.AspNetCore.Mvc.TagHelpers
+@using BTCPayServer.Components
 @model BTCPayServer.Models.PaymentRequestViewModels.ListPaymentRequestsViewModel
 @{
     Layout = "_Layout";
@@ -55,9 +58,14 @@
                 <thead>
                     <tr>
                         <th>Title</th>
-                        <th>Expiry</th>
+                        <th class="w-150px">
-                        <th class="text-end">Price</th>
+                            <div class="d-flex align-items-center gap-1">
-                        <th class="text-end">Status</th>
+                                Expiry
+                                <button type="button" class="btn btn-link p-0 fa fa-clock-o switch-time-format only-for-js" title="Switch date format"></button>
+                            </div>
+                        </th>
+                        <th>Status</th>
+                        <th class="text-end">Amount</th>
                         <th class="text-end">Actions</th>
                     </tr>
                 </thead>
@@ -68,9 +76,13 @@
                             <td>
                                 <a asp-action="EditPaymentRequest" asp-route-storeId="@item.StoreId" asp-route-payReqId="@item.Id" id="Edit-@item.Id">@item.Title</a>
                             </td>
-                            <td>@(item.ExpiryDate?.ToString("g") ?? "No Expiry")</td>
+                            <td>
-                            <td class="text-end">@item.Amount @item.Currency</td>
+                                @(item.ExpiryDate?.ToBrowserDate() ?? new HtmlString($"<span class=\"text-muted\">No Expiry</span>"))
-                            <td class="text-end">@item.Status</td>
+                            </td>
+                            <td>
+                                <span class="badge badge-@item.Status.ToLower()">@item.Status</span>
+                            </td>
+                            <td class="text-end">@item.AmountFormatted</td>
                             <td class="text-end">
                                 <a asp-controller="UIInvoice" asp-action="ListInvoices" asp-route-storeId="@item.StoreId" asp-route-searchterm="@($"orderid:{PaymentRequestRepository.GetOrderIdForPaymentRequest(item.Id)}")">Invoices</a>
                                 <span> - </span>

BTCPayServer/wwwroot/main/site.css

@@ -97,6 +97,7 @@ a.unobtrusive-link {
 }
 
 /* Badges */
+.badge-pending,
 .badge-new {
     background: #d4edda;
     color: #000;