From 7ab78fff3f877bb59a1de7abaef2731b2ab0138b Mon Sep 17 00:00:00 2001
From: dstrukt <gfxdsign@gmail.com>
Date: Sun, 21 Nov 2021 20:54:42 -0800
Subject: [PATCH] Invoice View Improvements (#3092)

* view improvements

* improves label, adds section headers, re-orders

* Available payment methods as checkboxes

* adds required label

* Update default payment method label

Thanks @woutersamaey for the suggestion.

* Move POS data and notifications to additional options

* Update display names

* adds checkbox to pull payments

* updates label

* Revert "updates label"

This reverts commit 9ed320e863951534d0dd359c13ec7dbaa4e1bd56.

* Revert "adds checkbox to pull payments"

This reverts commit 28ea6bfb6ed17df8cc44117814bffdfc80c12e70.

* removes required label

* Select all supported tx currencies by default

Slight modification to the checkbox list.

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
Co-authored-by: Samuel Adams <samuel.atwood@gmail.com>
---
 .../InvoicingModels/CreateInvoiceModel.cs     |   6 +-
 .../Views/Invoice/CreateInvoice.cshtml        | 111 ++++++++++++------
 2 files changed, 80 insertions(+), 37 deletions(-)

diff --git a/BTCPayServer/Models/InvoicingModels/CreateInvoiceModel.cs b/BTCPayServer/Models/InvoicingModels/CreateInvoiceModel.cs
index 058cd2a78..8bee6a4a0 100644
--- a/BTCPayServer/Models/InvoicingModels/CreateInvoiceModel.cs
+++ b/BTCPayServer/Models/InvoicingModels/CreateInvoiceModel.cs
@@ -38,7 +38,7 @@ namespace BTCPayServer.Models.InvoicingModels
             get; set;
         }
 
-        [Display(Name = "Default payment method on checkout")]
+        [DisplayName("Default payment method on checkout")]
         public string DefaultPaymentMethod
         {
             get; set;
@@ -58,7 +58,7 @@ namespace BTCPayServer.Models.InvoicingModels
         }
 
         [Uri]
-        [DisplayName("Notification Url")]
+        [DisplayName("Notification URL")]
         public string NotificationUrl
         {
             get; set;
@@ -89,7 +89,7 @@ namespace BTCPayServer.Models.InvoicingModels
             get; set;
         }
 
-        [Display(Name = "Require Refund Email")]
+        [DisplayName("Require Refund Email")]
         public RequiresRefundEmail RequiresRefundEmail
         {
             get; set;
diff --git a/BTCPayServer/Views/Invoice/CreateInvoice.cshtml b/BTCPayServer/Views/Invoice/CreateInvoice.cshtml
index 86fd5ca90..ae04b36c1 100644
--- a/BTCPayServer/Views/Invoice/CreateInvoice.cshtml
+++ b/BTCPayServer/Views/Invoice/CreateInvoice.cshtml
@@ -1,7 +1,7 @@
 @model BTCPayServer.Models.InvoicingModels.CreateInvoiceModel
 @using BTCPayServer.Services.Apps
 @{
-    ViewData.SetActivePageAndTitle(InvoiceNavPages.Create, "Create an invoice");
+    ViewData.SetActivePageAndTitle(InvoiceNavPages.Create, "Create Invoice");
 }
 
 @section PageFootContent {
@@ -32,9 +32,15 @@
         <h2 class="mb-4">@ViewData["Title"]</h2>
 
         <div class="row">
-            <div class="col-lg-12">
+            <div class="col-lg-6">
                 <form asp-action="CreateInvoice" method="post" id="create-invoice-form">
                     <div asp-validation-summary="ModelOnly" class="text-danger"></div>
+                    <div class="form-group">
+                        <label asp-for="Stores" class="form-label"></label>
+                        <select asp-for="StoreId" asp-items="Model.Stores" class="form-select"></select>
+                        <span asp-validation-for="StoreId" class="text-danger"></span>
+                    </div>
+                    <h4 class="mt-5 mb-4">Invoice Details</h4>
                     <div class="form-group">
                         <label asp-for="Amount" class="form-label"></label>
                         <input asp-for="Amount" class="form-control" />
@@ -55,51 +61,88 @@
                         <input asp-for="ItemDesc" class="form-control" />
                         <span asp-validation-for="ItemDesc" class="text-danger"></span>
                     </div>
-                    <div class="form-group">
-                        <label asp-for="PosData" class="form-label"></label>
-                        <input asp-for="PosData" class="form-control" />
-                        <span asp-validation-for="PosData" class="text-danger"></span>
+                    <div class="form-group mb-4">
+                        <label asp-for="SupportedTransactionCurrencies" class="form-label"></label>
+                        @foreach (var item in Model.AvailablePaymentMethods)
+                        {
+                            <div class="form-check mb-2">
+                                <label class="form-check-label">
+                                    <input name="SupportedTransactionCurrencies" class="form-check-input" checked="checked" type="checkbox" value="@item.Value">
+                                    @item.Text
+                                </label>
+                            </div>
+                        }
+                        <span asp-validation-for="SupportedTransactionCurrencies" class="text-danger"></span>
                     </div>
+                    <div class="form-group">
+                        <label asp-for="DefaultPaymentMethod" class="form-label"></label>
+                        <select asp-for="DefaultPaymentMethod" asp-items="Model.AvailablePaymentMethods" class="form-select">
+                            <option value="" selected>Use the store’s default</option>
+                        </select>
+                        <span asp-validation-for="DefaultPaymentMethod" class="text-danger"></span>
+                    </div>
+                    <h4 class="mt-5 mb-4">Customer Information</h4>
                     <div class="form-group">
                         <label asp-for="BuyerEmail" class="form-label"></label>
                         <input asp-for="BuyerEmail" class="form-control" />
                         <span asp-validation-for="BuyerEmail" class="text-danger"></span>
                     </div>
                     <div class="form-group">
-                        <label asp-for="RequiresRefundEmail" class="form-check-label"></label>
+                        <label asp-for="RequiresRefundEmail" class="form-label"></label>
                         <select asp-for="RequiresRefundEmail" asp-items="@Html.GetEnumSelectList<RequiresRefundEmail>()" class="form-select"></select>
                         <span asp-validation-for="RequiresRefundEmail" class="text-danger"></span>
                     </div>
+                    
+                    <h4 class="mt-5 mb-2">Additional Options</h4>
                     <div class="form-group">
-                        <label asp-for="NotificationUrl" class="form-label"></label>
-                        <input asp-for="NotificationUrl" class="form-control" />
-                        <span asp-validation-for="NotificationUrl" class="text-danger"></span>
+                        <div class="accordion" id="additional">
+                            <div class="accordion-item">
+                                <h2 class="accordion-header" id="additional-pos-data-header">
+                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#additional-pos-data" aria-expanded="false" aria-controls="additional-pos-data">
+                                        Point Of Sale Data
+                                        <vc:icon symbol="caret-down" />
+                                    </button>
+                                </h2>
+                                <div id="additional-pos-data" class="accordion-collapse collapse" aria-labelledby="additional-pos-data-header">
+                                    <p>Custom data to correlate the invoice with an order. This data can be a simple text, number or JSON object, e.g. <code>{ "orderId": 615, "product": "Pizza" }</code></p>
+                                    <div class="form-group">
+                                        <label asp-for="PosData" class="form-label"></label>
+                                        <input asp-for="PosData" class="form-control"/>
+                                        <span asp-validation-for="PosData" class="text-danger"></span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="accordion-item">
+                                <h2 class="accordion-header" id="additional-notifications-header">
+                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#additional-notifications" aria-expanded="false" aria-controls="additional-notifications">
+                                        Invoice Notifications
+                                        <vc:icon symbol="caret-down"/>
+                                    </button>
+                                </h2>
+                                <div id="additional-notifications" class="accordion-collapse collapse" aria-labelledby="additional-notifications-header">
+                                    <div class="accordion-body">
+                                        <div class="form-group">
+                                            <label asp-for="NotificationUrl" class="form-label"></label>
+                                            <input asp-for="NotificationUrl" class="form-control"/>
+                                            <span asp-validation-for="NotificationUrl" class="text-danger"></span>
+                                        </div>
+                                        <div class="form-group">
+                                            <label asp-for="NotificationEmail" class="form-label"></label>
+                                            <input asp-for="NotificationEmail" class="form-control"/>
+                                            <span asp-validation-for="NotificationEmail" class="text-danger"></span>
+                                            <p id="InvoiceEmailHelpBlock" class="form-text text-muted">
+                                                Receive updates for this invoice.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="form-group">
-                        <label asp-for="Stores" class="form-label"></label>
-                        <select asp-for="StoreId" asp-items="Model.Stores" class="form-select"></select>
-                        <span asp-validation-for="StoreId" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="SupportedTransactionCurrencies" class="form-label"></label>
-                        <select asp-for="SupportedTransactionCurrencies" asp-items="Model.AvailablePaymentMethods" class="form-select" multiple="multiple"></select>
-                        <span asp-validation-for="SupportedTransactionCurrencies" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="DefaultPaymentMethod" class="form-label"></label>
-                        <select asp-for="DefaultPaymentMethod" asp-items="Model.AvailablePaymentMethods" class="form-select">
-                            <option value="" selected>Store's default settings</option>
-                        </select>
-                        <span asp-validation-for="DefaultPaymentMethod" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="NotificationEmail" class="form-label"></label>
-                        <input asp-for="NotificationEmail" class="form-control" />
-                        <span asp-validation-for="NotificationEmail" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
+                    
+                    <div class="form-group mt-4">
                         <input type="submit" value="Create" class="btn btn-primary" id="Create" />
-                        <a asp-action="ListInvoices" class="text-muted ms-3">Back to list</a>
+                        <a asp-action="ListInvoices" class="btn btn-link px-0 ms-3">Back to list</a>
                     </div>
                 </form>
             </div>