POS Cart: Add options for search and categories display (#5438)

2025-02-20 13:34:37 +01:00 · 2023-11-13 13:59:14 +01:00 · 2023-11-13 13:59:14 +01:00 · 96569ae4aa
commit 96569ae4aa
parent f2b1e5f93e
11 changed files with 70 additions and 11 deletions
--- a/BTCPayServer.Client/Models/CreateAppRequest.cs
+++ b/BTCPayServer.Client/Models/CreateAppRequest.cs
@ -28,6 +28,8 @@ namespace BTCPayServer.Client.Models
        public PosViewType DefaultView { get; set; }
        public bool ShowCustomAmount { get; set; } = false;
        public bool ShowDiscount { get; set; } = true;
+        public bool ShowSearch { get; set; } = true;
+        public bool ShowCategories { get; set; } = true;
        public bool EnableTips { get; set; } = true;
        public string CustomAmountPayButtonText { get; set; } = null;
        public string FixedAmountPayButtonText { get; set; } = null;
--- a/BTCPayServer.Client/Models/PointOfSaleAppData.cs
+++ b/BTCPayServer.Client/Models/PointOfSaleAppData.cs
@ -21,6 +21,8 @@ namespace BTCPayServer.Client.Models
        public string DefaultView { get; set; }
        public bool ShowCustomAmount { get; set; }
        public bool ShowDiscount { get; set; }
+        public bool ShowSearch { get; set; }
+        public bool ShowCategories { get; set; }
        public bool EnableTips { get; set; }
        public string Currency { get; set; }
        public object Items { get; set; }
--- a/BTCPayServer/Controllers/GreenField/GreenfieldAppsController.cs
+++ b/BTCPayServer/Controllers/GreenField/GreenfieldAppsController.cs
@ -270,12 +270,14 @@ namespace BTCPayServer.Controllers.Greenfield

        private PointOfSaleSettings ToPointOfSaleSettings(CreatePointOfSaleAppRequest request)
        {
-            return new PointOfSaleSettings()
+            return new PointOfSaleSettings
            {
                Title = request.Title,
                DefaultView = (PosViewType)request.DefaultView,
                ShowCustomAmount = request.ShowCustomAmount,
                ShowDiscount = request.ShowDiscount,
+                ShowSearch = request.ShowSearch,
+                ShowCategories = request.ShowCategories,
                EnableTips = request.EnableTips,
                Currency = request.Currency,
                Template = request.Template != null ? AppService.SerializeTemplate(AppService.Parse(request.Template)) : null,
@ -336,6 +338,8 @@ namespace BTCPayServer.Controllers.Greenfield
                DefaultView = settings.DefaultView.ToString(),
                ShowCustomAmount = settings.ShowCustomAmount,
                ShowDiscount = settings.ShowDiscount,
+                ShowSearch = settings.ShowSearch,
+                ShowCategories = settings.ShowCategories,
                EnableTips = settings.EnableTips,
                Currency = settings.Currency,
                Items = JsonConvert.DeserializeObject(
--- a/BTCPayServer/Plugins/PointOfSale/Controllers/UIPointOfSaleController.cs
+++ b/BTCPayServer/Plugins/PointOfSale/Controllers/UIPointOfSaleController.cs
@ -95,6 +95,8 @@ namespace BTCPayServer.Plugins.PointOfSale.Controllers
                ViewType = (PosViewType)viewType,
                ShowCustomAmount = settings.ShowCustomAmount,
                ShowDiscount = settings.ShowDiscount,
+                ShowSearch = settings.ShowSearch,
+                ShowCategories = settings.ShowCategories,
                EnableTips = settings.EnableTips,
                CurrencyCode = settings.Currency,
                CurrencySymbol = numberFormatInfo.CurrencySymbol,
@ -543,6 +545,8 @@ namespace BTCPayServer.Plugins.PointOfSale.Controllers
                DefaultView = settings.DefaultView,
                ShowCustomAmount = settings.ShowCustomAmount,
                ShowDiscount = settings.ShowDiscount,
+                ShowSearch = settings.ShowSearch,
+                ShowCategories = settings.ShowCategories,
                EnableTips = settings.EnableTips,
                Currency = settings.Currency,
                Template = settings.Template,
@ -631,6 +635,8 @@ namespace BTCPayServer.Plugins.PointOfSale.Controllers
                DefaultView = vm.DefaultView,
                ShowCustomAmount = vm.ShowCustomAmount,
                ShowDiscount = vm.ShowDiscount,
+                ShowSearch = vm.ShowSearch,
+                ShowCategories = vm.ShowCategories,
                EnableTips = vm.EnableTips,
                Currency = vm.Currency,
                Template = vm.Template,
--- a/BTCPayServer/Plugins/PointOfSale/Models/UpdatePointOfSaleViewModel.cs
+++ b/BTCPayServer/Plugins/PointOfSale/Models/UpdatePointOfSaleViewModel.cs
@ -31,6 +31,10 @@ namespace BTCPayServer.Plugins.PointOfSale.Models
        public bool ShowCustomAmount { get; set; }
        [Display(Name = "User can input discount in %")]
        public bool ShowDiscount { get; set; }
+        [Display(Name = "Display the search bar")]
+        public bool ShowSearch { get; set; }
+        [Display(Name = "Display the category list")]
+        public bool ShowCategories { get; set; }
        [Display(Name = "Enable tips")]
        public bool EnableTips { get; set; }
        public string Example1 { get; internal set; }
--- a/BTCPayServer/Plugins/PointOfSale/Models/ViewPointOfSaleViewModel.cs
+++ b/BTCPayServer/Plugins/PointOfSale/Models/ViewPointOfSaleViewModel.cs
@ -65,6 +65,8 @@ namespace BTCPayServer.Plugins.PointOfSale.Models
        public PosViewType ViewType { get; set; }
        public bool ShowCustomAmount { get; set; }
        public bool ShowDiscount { get; set; }
+        public bool ShowSearch { get; set; } = true;
+        public bool ShowCategories { get; set; } = true;
        public bool EnableTips { get; set; }
        public string Step { get; set; }
        public string Title { get; set; }
--- a/BTCPayServer/Services/Apps/PointOfSaleSettings.cs
+++ b/BTCPayServer/Services/Apps/PointOfSaleSettings.cs
@ -77,6 +77,8 @@ namespace BTCPayServer.Services.Apps
            DefaultView = PosViewType.Static;
            ShowCustomAmount = false;
            ShowDiscount = true;
+            ShowSearch = true;
+            ShowCategories = true;
            EnableTips = true;
            RequiresRefundEmail = RequiresRefundEmail.InheritFromStore;
        }
@ -87,6 +89,8 @@ namespace BTCPayServer.Services.Apps
        public PosViewType DefaultView { get; set; }
        public bool ShowCustomAmount { get; set; }
        public bool ShowDiscount { get; set; }
+        public bool ShowSearch { get; set; } = true;
+        public bool ShowCategories { get; set; } = true;
        public bool EnableTips { get; set; }
        public RequiresRefundEmail RequiresRefundEmail { get; set; }

--- a/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
@ -31,22 +31,28 @@
    <div id="content">
        <div class="public-page-wrap container-xl">
            <header class="sticky-top bg-body d-flex flex-column py-3 py-lg-4 gap-3">
-                <div class="d-flex align-items-center justify-content-center gap-3 pe-5 position-relative">
+                <div class="d-flex align-items-center justify-content-center gap-3 px-5 position-relative">
                    <h1 class="mb-0">@(string.IsNullOrEmpty(Model.Title) ? Model.StoreName : Model.Title)</h1>
                    <button id="CartToggle" class="cart-toggle-btn" type="button" v-on:click="toggleCart" aria-controls="cart" :disabled="cartCount === 0">
                        <vc:icon symbol="pos-cart" />
                        <span id="CartBadge" class="badge rounded-pill bg-danger p-1 ms-1" v-text="cartCount" v-if="cartCount !== 0"></span>
                    </button>
                </div>
-                <input id="SearchTerm" class="form-control rounded-pill" placeholder="Search…" v-model="searchTerm">
-                <div id="Categories" ref="categories" v-if="allCategories" :class="{ 'scrollable': categoriesScrollable }">
-                    <nav class="btcpay-pills d-flex align-items-center gap-3" ref="categoriesNav">
-                        <template v-for="cat in allCategories">
-                            <input :id="`Category-${cat.value}`" type="radio" name="category" autocomplete="off" v-model="displayCategory" :value="cat.value">
-                            <label :for="`Category-${cat.value}`" class="btcpay-pill text-nowrap">{{ cat.text }}</label>
-                        </template>
-                    </nav>
-                </div>
+                @if (Model.ShowSearch)
+                {
+                    <input id="SearchTerm" class="form-control rounded-pill" placeholder="Search…" v-model="searchTerm" v-if="showSearch">
+                }
+                @if (Model.ShowCategories)
+                {
+                    <div id="Categories" ref="categories" v-if="showCategories && allCategories" class="btcpay-pills d-flex flex-wrap align-items-center justify-content-center gap-3" :class="{ 'scrollable': categoriesScrollable }">
+                        <nav class="btcpay-pills d-flex align-items-center gap-3" ref="categoriesNav">
+                            <template v-for="cat in allCategories">
+                                <input :id="`Category-${cat.value}`" type="radio" name="category" autocomplete="off" v-model="displayCategory" :value="cat.value">
+                                <label :for="`Category-${cat.value}`" class="btcpay-pill text-nowrap">{{ cat.text }}</label>
+                            </template>
+                        </nav>
+                    </div>
+                }
            </header>
            <main>
                <partial name="_StatusMessage" />
--- a/BTCPayServer/Views/Shared/PointOfSale/UpdatePointOfSale.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/UpdatePointOfSale.cshtml
@ -113,6 +113,19 @@
                    <span asp-validation-for="FormId" class="text-danger"></span>
                </div>
            </fieldset>
+            <fieldset id="cart-display" class="mt-2">
+                <legend class="h5 mb-3 fw-semibold">Cart</legend>
+                <div class="form-group d-flex align-items-center pt-2">
+                    <input asp-for="ShowSearch" type="checkbox" class="btcpay-toggle me-3" />
+                    <label asp-for="ShowSearch" class="form-label mb-0"></label>
+                    <span asp-validation-for="ShowSearch" class="text-danger"></span>
+                </div>
+                <div class="form-group d-flex align-items-center">
+                    <input asp-for="ShowCategories" type="checkbox" class="btcpay-toggle me-3" />
+                    <label asp-for="ShowCategories" class="form-label mb-0"></label>
+                    <span asp-validation-for="ShowCategories" class="text-danger"></span>
+                </div>
+            </fieldset>
            <fieldset id="tips" class="mt-2">
                <legend class="h5 mb-3 fw-semibold">Tips</legend>
                <div class="form-group d-flex align-items-center pt-2">
--- a/BTCPayServer/wwwroot/pos/admin.js
+++ b/BTCPayServer/wwwroot/pos/admin.js
@ -1,6 +1,7 @@
 const description = document.getElementById('description');
 const products = document.getElementById('products');
 const tips = document.getElementById('tips');
+const cart = document.getElementById('cart-display');
 const discounts = document.getElementById('discounts');
 const buttonPriceText = document.getElementById('button-price-text');
 const customPayments = document.getElementById('custom-payments');
@ -16,6 +17,7 @@ function updateFormForDefaultView(type) {
        case 'Static':
        case 'Print':
            hide(tips);
+            hide(cart);
            hide(discounts);
            hide(buttonPriceText);
            show(description);
@ -23,6 +25,7 @@ function updateFormForDefaultView(type) {
            show(customPayments);
            break;
        case 'Cart':
+            show(cart);
            show(tips);
            show(products);
            show(discounts);
@ -33,6 +36,7 @@ function updateFormForDefaultView(type) {
        case 'Light':
            show(tips);
            show(discounts);
+            hide(cart);
            hide(products);
            hide(description);
            hide(buttonPriceText);
--- a/BTCPayServer/wwwroot/swagger/v1/swagger.template.apps.json
+++ b/BTCPayServer/wwwroot/swagger/v1/swagger.template.apps.json
@ -470,6 +470,18 @@
                                "description": "Whether the option to enter a discount is shown",
                                "example": false
                            },
+                            "showSearch": {
+                                "type": "boolean",
+                                "description": "Display the search bar",
+                                "example": false,
+                                "default": true
+                            },
+                            "showCategories": {
+                                "type": "boolean",
+                                "description": "Display the list of categories",
+                                "example": false,
+                                "default": true
+                            },
                            "enableTips": {
                                "type": "boolean",
                                "description": "Whether the option to enter a tip is shown",