Add description and embedded css to POS (#970)

* Add description and embedded css to POS

* wrap embedded css props in <style> before Safe.raw

BTCPayServer/Controllers/AppsController.PointOfSale.cs

@@ -78,6 +78,10 @@ public PointOfSaleSettings()
 
 
             public string CustomCSSLink { get; set; }
+
+            public string EmbeddedCSS { get; set; }
+
+            public string Description { get; set; }
             public string NotificationEmail { get; set; }
             public string NotificationUrl { get; set; }
             public bool? RedirectAutomatically { get; set; }
@@ -109,6 +113,8 @@ public async Task<IActionResult> UpdatePointOfSale(string appId)
                 CustomTipText = settings.CustomTipText ?? PointOfSaleSettings.CUSTOM_TIP_TEXT_DEF,
                 CustomTipPercentages = settings.CustomTipPercentages != null ? string.Join(",", settings.CustomTipPercentages) : string.Join(",", PointOfSaleSettings.CUSTOM_TIP_PERCENTAGES_DEF),
                 CustomCSSLink = settings.CustomCSSLink,
+                EmbeddedCSS = settings.EmbeddedCSS,
+                Description = settings.Description,
                 NotificationEmail = settings.NotificationEmail,
                 NotificationUrl = settings.NotificationUrl,
                 RedirectAutomatically = settings.RedirectAutomatically.HasValue? settings.RedirectAutomatically.Value? "true": "false" : "" 
@@ -187,6 +193,8 @@ public async Task<IActionResult> UpdatePointOfSale(string appId, UpdatePointOfSa
                 CustomCSSLink = vm.CustomCSSLink,
                 NotificationUrl = vm.NotificationUrl,
                 NotificationEmail = vm.NotificationEmail,
+                Description = vm.Description,
+                EmbeddedCSS = vm.EmbeddedCSS,
                 RedirectAutomatically = string.IsNullOrEmpty(vm.RedirectAutomatically)? (bool?) null: bool.Parse(vm.RedirectAutomatically)
 
             });

BTCPayServer/Controllers/AppsPublicController.cs

@@ -87,7 +87,9 @@ public async Task<IActionResult> ViewPointOfSale(string appId)
                 CustomTipText = settings.CustomTipText,
                 CustomTipPercentages = settings.CustomTipPercentages,
                 CustomCSSLink = settings.CustomCSSLink,
-                AppId = appId
+                AppId = appId,
+                Description = settings.Description,
+                EmbeddedCSS = settings.EmbeddedCSS
             });
         }
 

BTCPayServer/Models/AppViewModels/UpdatePointOfSaleViewModel.cs

@@ -85,5 +85,7 @@ public class UpdatePointOfSaleViewModel
             }, nameof(SelectListItem.Value), nameof(SelectListItem.Text), RedirectAutomatically);
 
         public bool NotificationEmailWarning { get; set; }
+        public string EmbeddedCSS { get; set; }
+        public string Description { get; set; }
     }
 }

BTCPayServer/Models/AppViewModels/ViewPointOfSaleViewModel.cs

@@ -50,5 +50,7 @@ public class CurrencyInfoData
         public int[] CustomTipPercentages { get; set; }
 
         public string CustomCSSLink { get; set; }
+        public string Description { get; set; }
+        public string EmbeddedCSS { get; set; }
     }
 }

BTCPayServer/Views/Apps/UpdatePointOfSale.cshtml

@@ -1,5 +1,4 @@
 @addTagHelper *, BundlerMinifier.TagHelpers
-@using System.Globalization
 @model UpdatePointOfSaleViewModel
 @{
     ViewData["Title"] = "Update Point of Sale";
@@ -132,6 +131,16 @@
                         <select asp-for="RedirectAutomatically" asp-items="Model.RedirectAutomaticallySelectList" class="form-control"></select>
                         <span asp-validation-for="RedirectAutomatically" class="text-danger"></span>
                     </div>
+                    <div class="form-group">
+                        <label asp-for="Description" class="control-label"></label>
+                        <textarea asp-for="Description" rows="10" cols="40" class="form-control richtext"></textarea>
+                        <span asp-validation-for="Description" class="text-danger"></span>
+                    </div>
+                    <div class="form-group">
+                        <label asp-for="EmbeddedCSS" class="control-label"></label>
+                        <textarea asp-for="EmbeddedCSS" rows="10" cols="40" class="form-control"></textarea>
+                        <span asp-validation-for="EmbeddedCSS" class="text-danger"></span>
+                    </div>
                     <input type="hidden" asp-for="NotificationEmailWarning" />
                     <div class="form-group">
                         <input type="submit" class="btn btn-primary" value="Save Settings" id="SaveSettings" />
@@ -265,6 +274,7 @@
             </div>
         </div>
     </script>
-    <script src="~/products/js/products.js"></script>
-    <script src="~/products/js/products.jquery.js"></script>
+
+    <bundle name="wwwroot/bundles/pos-admin-bundle.min.js"></bundle>
+    <bundle name="wwwroot/bundles/pos-admin-bundle.min.css"></bundle>
 }

BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml

@@ -32,9 +32,7 @@
     <bundle name="wwwroot/bundles/crowdfund-bundle.min.css"></bundle>
     @if (!string.IsNullOrEmpty(Model.EmbeddedCSS))
     {
-        <style>
-            @Safe.Raw(Model.EmbeddedCSS);
-        </style>
+            @Safe.Raw($"<style>{Model.EmbeddedCSS}</style>");   
     }
 
 </head>

BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml

@@ -42,11 +42,16 @@
             grid-gap: .5rem;
         }
 
-            .card-deck .card:only-of-type {
-                max-width: 320px;
-                margin: auto;
-            }
+        .card-deck .card:only-of-type {
+            max-width: 320px;
+            margin: auto;
+        }
     </style>
+    @if (!string.IsNullOrEmpty(Model.EmbeddedCSS))
+    {
+        @Safe.Raw($"<style>{Model.EmbeddedCSS}</style>");   
+    }
+
 </head>
 
 <body class="h-100">
@@ -258,8 +263,13 @@
                             </div>
                         </div>
                     </div>
+                    @if (!string.IsNullOrEmpty(Model.Description))
+                    {
+                        <div class="row">
+                            <div class="overflow-hidden col-12">@Safe.Raw(Model.Description)</div>
+                        </div>
+                    }
                 </div>
-
                 <div id="js-pos-list" class="text-center mx-auto px-4">
                     <div class="row card-deck my-3 mx-auto">
 
@@ -335,7 +345,12 @@
         <div class="container d-flex h-100">
             <div class="justify-content-center align-self-center text-center mx-auto px-2 py-3 w-100" style="margin: auto;">
                 <h1 class="mb-4">@Model.Title</h1>
-
+                @if (!string.IsNullOrEmpty(Model.Description))
+                {
+                    <div class="row">
+                        <div class="overflow-hidden col-12">@Safe.Raw(Model.Description)</div>
+                    </div>
+                }
                 <div class="row  card-deck my-3 mx-auto">
                     @for (int x = 0; x < Model.Items.Length; x++)
                     {

BTCPayServer/bundleconfig.json

@@ -116,6 +116,24 @@
             "wwwroot/vendor/summernote/summernote-bs4.css"
         ]
     },
+    {
+        "outputFileName": "wwwroot/bundles/pos-admin-bundle.min.js",
+        "inputFiles": [
+            "wwwroot/vendor/highlightjs/highlight.min.js",
+            "wwwroot/vendor/summernote/summernote-bs4.js",
+            "wwwroot/pos-admin/main.js",
+            "wwwroot/products/js/products.js",
+            "wwwroot/products/js/products.jquery.js"
+        ]
+    },
+    {
+        "outputFileName": "wwwroot/bundles/pos-admin-bundle.min.css",
+        "inputFiles": [
+            "wwwroot/vendor/highlightjs/default.min.css",
+            "wwwroot/vendor/summernote/summernote-bs4.css"
+        ]
+    },
+
     {
         "outputFileName": "wwwroot/bundles/crowdfund-bundle.min.css",
         "inputFiles": [

BTCPayServer/wwwroot/pos-admin/main.js

@@ -0,0 +1,7 @@
+hljs.initHighlightingOnLoad();
+$(document).ready(function () {
+
+    $(".richtext").summernote({
+        minHeight: 300
+    });
+});