UI improvements

btcpayserver · Dec 9, 2024 · 639e3ad · 639e3ad
1 parent 6316a1e
commit 639e3ad
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 31 deletions.
diff --git a/BTCPayApp.UI/Components/Alert.razor b/BTCPayApp.UI/Components/Alert.razor
@@ -1,4 +1,4 @@
-<div class="alert alert-@Type mb-@(Margin) text-break @(Dismissible ? "alert-dismissible" : null)" role="alert">
+<div role="alert" @attributes="InputAttributes" class="@CssClass">
     @ChildContent
     @if (Dismissible)
     {
@@ -20,4 +20,9 @@
 
     [Parameter]
     public int Margin { get; set; } = 4;
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? InputAttributes { get; set; }
+
+    private string CssClass => $"alert alert-{Type} mb-{Margin} text-break {(Dismissible ? "alert-dismissible " : "")}{(InputAttributes?.ContainsKey("class") is true ? InputAttributes["class"] : "")}".Trim();
 }
diff --git a/BTCPayApp.UI/Components/Keypad.razor b/BTCPayApp.UI/Components/Keypad.razor
@@ -8,7 +8,7 @@
 @inject IAuthorizationService AuthService
 @inject AuthenticationStateProvider AuthStateProvider
 
-<div class="d-flex flex-column gap-4 w-100" disabled="@IsSubmitting">
+<div disabled="@IsSubmitting" @attributes="InputAttributes" class="@CssClass">
     @{ var amount = GetAmount(); }
     <input type="hidden" name="amount" value="@GetTotal().ToString(CultureInfo.InvariantCulture)">
     <input type="hidden" name="tip" value="@GetTip()?.ToString(CultureInfo.InvariantCulture)">
@@ -279,6 +279,8 @@
     public IEnumerable<RecentTransaction>? RecentTransactions { get; set; }
     [Parameter]
     public IEnumerable<AppItem>? Items { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? InputAttributes { get; set; }
 
     const int DefaultFontSize = 64;
     static readonly char[] Keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'C', '0', '+'];
@@ -679,6 +681,7 @@
             };
             await CreateInvoice.InvokeAsync(req);
         }
+        IsSubmitting = false;
     }
 
     private async Task OnClickRecentTransaction(RecentTransaction t)
@@ -692,4 +695,6 @@
         var display = DisplayItem(item) ? "posItem--displayed" : null;
         return $"posItem p-3 {inStock} {display}".Trim();
     }
+
+    private string CssClass => $"d-flex flex-column gap-4 w-100 {(InputAttributes?.ContainsKey("class") is true ? InputAttributes["class"] : "")}".Trim();
 }
diff --git a/BTCPayApp.UI/Components/NotificationItem.razor b/BTCPayApp.UI/Components/NotificationItem.razor
@@ -1,5 +1,5 @@
 @using BTCPayServer.Client.Models
-<a href="@Notification.Link.ToString()" class="border-bottom border-light @(Notification.Seen ? null : "bg-light")" @onclick="HandleClick" @onclick:preventDefault>
+<a href="@Notification.Link" class="border-bottom border-light @(Notification.Seen ? null : "bg-light")" @onclick="HandleClick" @onclick:preventDefault>
     <div class="container d-flex align-items-center gap-3 py-3">
         <div>
             <Icon Symbol="@NotificationIcon(Notification.Identifier)"/>

diff --git a/BTCPayApp.UI/Pages/PointOfSalePage.razor b/BTCPayApp.UI/Pages/PointOfSalePage.razor
@@ -22,31 +22,33 @@
         <div class="fs-4">Loading</div>
     </section>
 }
-else if (!string.IsNullOrEmpty(Error))
-{
-    <section class="container">
-        <Alert Type="danger">@Error</Alert>
-    </section>
-}
-@if (!string.IsNullOrEmpty(StoreId) && !string.IsNullOrEmpty(AppId) && AppData != null)
+else
 {
     <section class="container py-4">
-        <Keypad
-            StoreId="@StoreId"
-            AppId="@AppId"
-            CurrencyCode="@AppData.Currency"
-            CurrencyInfo="@CurrencyInfo"
-            IsItemlistEnabled="@(AppData.ShowItems is true)"
-            IsDiscountEnabled="@(AppData.ShowDiscount is true)"
-            IsTipEnabled="@(AppData.EnableTips is true)"
-            IsSearchEnabled="@(AppData.ShowSearch is true)"
-            IsCategoriesEnabled="@(AppData.ShowCategories is true)"
-            Items="@Items"
-            Categories="@Categories"
-            CustomTipPercentages="@AppData.CustomTipPercentages"
-            RecentTransactions="@RecentTransactions"
-            LoadRecentTransactions="@LoadRecentTransactions"
-            CreateInvoice="@CreateInvoice" />
+        @if (!string.IsNullOrEmpty(Error))
+        {
+            <Alert Type="danger" Margin="2" style="margin-top:4.5rem">@Error</Alert>
+        }
+        @if (!string.IsNullOrEmpty(StoreId) && !string.IsNullOrEmpty(AppId) && AppData != null)
+        {
+            <Keypad
+                StoreId="@StoreId"
+                AppId="@AppId"
+                CurrencyCode="@AppData.Currency"
+                CurrencyInfo="@CurrencyInfo"
+                IsItemlistEnabled="@(AppData.ShowItems is true)"
+                IsDiscountEnabled="@(AppData.ShowDiscount is true)"
+                IsTipEnabled="@(AppData.EnableTips is true)"
+                IsSearchEnabled="@(AppData.ShowSearch is true)"
+                IsCategoriesEnabled="@(AppData.ShowCategories is true)"
+                Items="@Items"
+                Categories="@Categories"
+                CustomTipPercentages="@AppData.CustomTipPercentages"
+                RecentTransactions="@RecentTransactions"
+                LoadRecentTransactions="@LoadRecentTransactions"
+                CreateInvoice="@CreateInvoice"
+                class="my-auto" />
+        }
     </section>
 }
 
@@ -83,11 +85,18 @@ else if (!string.IsNullOrEmpty(Error))
     {
         _errorMessage = null;
         req.AppId = AppId;
-        var res = await AccountManager.GetClient().CreatePosInvoice(req);
-        if (res?.TryGetValue("invoiceId", out var invoiceId) is true)
-            NavigationManager.NavigateTo(Routes.CheckoutPath(invoiceId.ToString()));
-        else if (res?.TryGetValue("error", out var error) is true)
-            _errorMessage = error.ToString();
+        try
+        {
+            var res = await AccountManager.GetClient().CreatePosInvoice(req);
+            if (res?.TryGetValue("invoiceId", out var invoiceId) is true)
+                NavigationManager.NavigateTo(Routes.CheckoutPath(invoiceId.ToString()));
+            else if (res?.TryGetValue("error", out var error) is true)
+                _errorMessage = error.ToString();
+        }
+        catch (Exception ex)
+        {
+            _errorMessage = ex.Message;
+        }
     }
 
     private async Task LoadRecentTransactions()

diff --git a/BTCPayApp.UI/Pages/PointOfSalePage.razor.css b/BTCPayApp.UI/Pages/PointOfSalePage.razor.css
@@ -5,6 +5,7 @@
   position: relative;
   flex: 1 0 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
 }