From a6e18736d6f4b4111f90ef4077820c0cea482193 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Tue, 29 Oct 2024 15:44:37 +0100
Subject: [PATCH] Keypad updates (#6338)

* Add keypad icons

Closes #6195.

* Keypad JS fixes
---
 .../Views/Shared/PointOfSale/Public/VueLight.cshtml    |  6 +++++-
 BTCPayServer/wwwroot/img/icon-sprite.svg               |  2 ++
 BTCPayServer/wwwroot/pos/common.js                     | 10 ++++++----
 BTCPayServer/wwwroot/pos/keypad.css                    |  9 ++++-----
 BTCPayServer/wwwroot/pos/keypad.js                     |  3 ++-
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
index 7706e217a..d49358758 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
@@ -65,7 +65,11 @@
         </template>
     </div>
     <div class="keypad">
-        <button v-for="k in keys" :key="k" :disabled="k === '+' && mode !== 'amounts'" v-on:click.prevent="keyPressed(k)" v-on:dblclick.prevent="doubleClick(k)" type="button" class="btn btn-secondary btn-lg" :data-key="k">{{ k }}</button>
+        <button v-for="k in keys" :key="k" :disabled="k === '+' && mode !== 'amounts'" v-on:click.prevent="keyPressed(k)" v-on:dblclick.prevent="doubleClick(k)" type="button" class="btn btn-secondary btn-lg" :data-key="k">
+            <template v-if="k === 'C'"><vc:icon symbol="keypad-clear"/></template>
+            <template v-else-if="k === '+'"><vc:icon symbol="keypad-plus"/></template>
+            <template v-else>{{ k }}</template>
+        </button>
     </div>
     <button class="btn btn-lg btn-primary mx-3" type="submit" :disabled="payButtonLoading || totalNumeric <= 0" id="pay-button">
         <div v-if="payButtonLoading" class="spinner-border spinner-border-sm" id="pay-button-spinner" role="status">
diff --git a/BTCPayServer/wwwroot/img/icon-sprite.svg b/BTCPayServer/wwwroot/img/icon-sprite.svg
index 30973fc78..18048e667 100644
--- a/BTCPayServer/wwwroot/img/icon-sprite.svg
+++ b/BTCPayServer/wwwroot/img/icon-sprite.svg
@@ -46,6 +46,8 @@
 <symbol id="forms-text" viewBox="0 0 24 24" fill="none"><rect x="1" y="1" width="22" height="22" rx="3" stroke="currentColor" stroke-width="2"/><path d="M7 7.75H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
 <symbol id="info" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22.39c5.739 0 10.39-4.651 10.39-10.39C22.39 6.261 17.74 1.61 12 1.61 6.261 1.61 1.61 6.26 1.61 12c0 5.739 4.651 10.39 10.39 10.39zm0-2.597a7.793 7.793 0 1 0 0-15.586 7.793 7.793 0 0 0 0 15.586z" fill="currentColor"/><path d="M12 6.805a1.299 1.299 0 1 0 0 2.597 1.299 1.299 0 0 0 0-2.597zM10.701 12s0-1.299 1.299-1.299S13.299 12 13.299 12v3.897s0 1.298-1.299 1.298-1.299-1.298-1.299-1.298z" fill="currentColor"/></symbol>
 <symbol id="key" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 9.5C10.5003 8.65387 10.769 7.82965 11.2673 7.14583C11.7657 6.46202 12.468 5.95384 13.2733 5.69436C14.0787 5.43488 14.9456 5.43748 15.7494 5.70176C16.5532 5.96605 17.2525 6.47842 17.7467 7.1652C18.2409 7.85198 18.5047 8.6778 18.4999 9.52392C18.4952 10.37 18.2223 11.1929 17.7205 11.8741C17.2186 12.5553 16.5137 13.0599 15.707 13.3152C14.9003 13.5705 14.0334 13.5634 13.231 13.295C13.0989 13.2507 12.9571 13.2441 12.8214 13.2759C12.6858 13.3077 12.5617 13.3766 12.463 13.475L11.44 14.5H10.25C10.0511 14.5 9.86032 14.579 9.71967 14.7197C9.57902 14.8603 9.5 15.0511 9.5 15.25V16.44L9.44 16.5H8.25C8.05109 16.5 7.86032 16.579 7.71967 16.7197C7.57902 16.8603 7.5 17.0511 7.5 17.25V18.44L7.44 18.5H5.75C5.6837 18.5 5.62011 18.4737 5.57322 18.4268C5.52634 18.3799 5.5 18.3163 5.5 18.25V16.56L10.524 11.537C10.6226 11.4384 10.6917 11.3144 10.7237 11.1787C10.7556 11.0431 10.7492 10.9012 10.705 10.769C10.5686 10.3598 10.4994 9.93129 10.5 9.5ZM14.5 4C13.6681 3.99986 12.847 4.18843 12.0985 4.55153C11.35 4.91463 10.6937 5.44279 10.1788 6.09625C9.66398 6.74971 9.30409 7.51145 9.12623 8.32412C8.94837 9.13679 8.95718 9.97923 9.152 10.788L4.22 15.72C4.07931 15.8605 4.00018 16.0512 4 16.25V18.25C4 19.216 4.784 20 5.75 20H7.75C7.94885 19.9998 8.13948 19.9207 8.28 19.78L8.78 19.28C8.92069 19.1395 8.99983 18.9488 9 18.75V18H9.75C9.94885 17.9998 10.1395 17.9207 10.28 17.78L10.78 17.28C10.9207 17.1395 10.9998 16.9488 11 16.75V16H11.75C11.9488 15.9998 12.1395 15.9207 12.28 15.78L13.212 14.848C13.9672 15.0293 14.7523 15.0487 15.5155 14.9047C16.2787 14.7608 17.0028 14.4568 17.64 14.0128C18.2773 13.5689 18.8133 12.995 19.2128 12.3289C19.6123 11.6628 19.8662 10.9197 19.9577 10.1485C20.0493 9.37721 19.9765 8.59531 19.7441 7.85422C19.5117 7.11314 19.125 6.42968 18.6094 5.84883C18.0938 5.26798 17.461 4.80292 16.7527 4.48426C16.0444 4.16559 15.2767 4.00055 14.5 4ZM15 10C15.2652 10 15.5196 9.89464 15.7071 9.70711C15.8946 9.51957 16 9.26522 16 9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9C14 9.26522 14.1054 9.51957 14.2929 9.70711C14.4804 9.89464 14.7348 10 15 10Z" fill="currentColor"/></symbol>
+<symbol id="keypad-clear" viewBox="0 0 24 24" fill="none"><path d="M16.6858 5.54919L11.9452 10.3416L7.20314 5.49379L7.20314 5.49379L7.20167 5.4923C6.71724 5.00257 5.97108 5.00257 5.48664 5.4923L5.48664 5.4923C5.00445 5.97977 5.00445 6.72702 5.48664 7.21448L10.2344 12.0142L5.48664 16.814C5.00445 17.3014 5.00445 18.0487 5.48664 18.5361L5.48664 18.5361C5.75044 18.8028 6.0883 18.875 6.37226 18.875C6.65621 18.875 6.99412 18.8028 7.25793 18.5361L12 13.7422L16.742 18.5361C17.0058 18.8028 17.3437 18.875 17.6277 18.875C17.9116 18.875 18.2495 18.8028 18.5134 18.5361C18.9955 18.0487 18.9955 17.3014 18.5134 16.814L18.5134 16.8139L18.5089 16.8095L13.6574 12.0667L18.4008 7.27138C18.883 6.78391 18.883 6.03666 18.4008 5.54919C17.9163 5.05946 17.1702 5.05946 16.6858 5.54919Z" fill="currentColor" stroke="currentColor" stroke-width="0.75"/></symbol>
+<symbol id="keypad-plus" viewBox="0 0 24 24" fill="none"><path d="M5.253 13.255L10.7739 13.225L10.7438 18.7458C10.7418 19.1291 10.9344 19.4185 11.1245 19.6087C11.3147 19.7988 11.6041 19.9914 11.9874 19.9894C12.6676 19.9857 13.1958 19.4575 13.1995 18.7772L13.1995 18.7772L13.1994 18.7689L13.1365 13.2121L18.6599 13.1821C19.3402 13.1784 19.8684 12.6502 19.8721 11.9699C19.8758 11.2854 19.3468 10.7564 18.6622 10.7601L13.1442 10.7901L13.2054 5.23803L13.2054 5.23803L13.2054 5.23523C13.2092 4.5507 12.6802 4.02169 11.9956 4.02541L11.9956 4.02541C11.3153 4.02912 10.7872 4.55724 10.7835 5.23753L10.7534 10.7693L5.22163 10.7994C4.54134 10.8031 4.01322 11.3312 4.00952 12.0115C4.00743 12.3947 4.19999 12.6841 4.39017 12.8743C4.58032 13.0645 4.86979 13.2571 5.253 13.255Z" fill="currentColor" stroke="currentColor"/></symbol>
 <symbol id="lightning-node" viewBox="0 0 24 24" fill="none"><path d="M14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z" fill="currentColor"/><path d="M20 14C21.1046 14 22 13.1046 22 12C22 10.8954 21.1046 10 20 10C18.8954 10 18 10.8954 18 12C18 13.1046 18.8954 14 20 14Z" fill="currentColor"/><path d="M14 20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20C10 18.8954 10.8954 18 12 18C13.1046 18 14 18.8954 14 20Z" fill="currentColor"/><path d="M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z" fill="currentColor"/><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="currentColor"/></symbol>
 <symbol id="lightning" viewBox="0 0 24 24" fill="none"><path d="M17.57 10.7c-.1-.23-.27-.34-.5-.34h-4.3l.5-3.76a.48.48 0 0 0-.33-.55.52.52 0 0 0-.66.17l-5.45 6.54a.59.59 0 0 0-.05.6c.1.17.27.28.49.28h4.3l-.49 3.76c-.05.22.11.5.33.55.06.05.17.05.22.05a.5.5 0 0 0 .44-.22l5.45-6.54c.1-.17.16-.39.05-.55Z" fill="currentColor"/></symbol>
 <symbol id="lock" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.13333 8.26667V10.4H7.86667C7.3716 10.4 6.8968 10.5967 6.54673 10.9467C6.19667 11.2968 6 11.7716 6 12.2667V18.1333C6 19.1637 6.83627 20 7.86667 20H16.9333C17.4284 20 17.9032 19.8033 18.2533 19.4533C18.6033 19.1032 18.8 18.6284 18.8 18.1333V12.2667C18.8 11.7716 18.6033 11.2968 18.2533 10.9467C17.9032 10.5967 17.4284 10.4 16.9333 10.4H16.6667V8.26667C16.6667 7.13508 16.2171 6.04983 15.417 5.24968C14.6168 4.44952 13.5316 4 12.4 4C11.2684 4 10.1832 4.44952 9.38301 5.24968C8.58286 6.04983 8.13333 7.13508 8.13333 8.26667ZM15.0667 10.4V8.26667C15.0667 7.55942 14.7857 6.88115 14.2856 6.38105C13.7855 5.88095 13.1072 5.6 12.4 5.6C11.6928 5.6 11.0145 5.88095 10.5144 6.38105C10.0143 6.88115 9.73333 7.55942 9.73333 8.26667V10.4H15.0667ZM16.6667 12H16.9333C17.0041 12 17.0719 12.0281 17.1219 12.0781C17.1719 12.1281 17.2 12.1959 17.2 12.2667V18.1333C17.2 18.2041 17.1719 18.2719 17.1219 18.3219C17.0719 18.3719 17.0041 18.4 16.9333 18.4H7.86667C7.79594 18.4 7.72811 18.3719 7.6781 18.3219C7.6281 18.2719 7.6 18.2041 7.6 18.1333V12.2667C7.6 12.1959 7.6281 12.1281 7.6781 12.0781C7.72811 12.0281 7.79594 12 7.86667 12H16.6667Z" fill="currentColor"/></symbol>
diff --git a/BTCPayServer/wwwroot/pos/common.js b/BTCPayServer/wwwroot/pos/common.js
index 736f2cf5f..3cd1fdf3e 100644
--- a/BTCPayServer/wwwroot/pos/common.js
+++ b/BTCPayServer/wwwroot/pos/common.js
@@ -271,10 +271,12 @@ const posCommon = {
                 item.classList.remove('posItem--first')
                 item.classList.remove('posItem--last')
             })
-            const $displayed = this.$refs.posItems.querySelectorAll('.posItem.posItem--displayed')
-            if ($displayed.length > 0) {
-                $displayed[0].classList.add('posItem--first')
-                $displayed[$displayed.length - 1].classList.add('posItem--last')
+            if (this.$refs.posItems) {
+                const $displayed = this.$refs.posItems.querySelectorAll('.posItem.posItem--displayed')
+                if ($displayed.length > 0) {
+                    $displayed[0].classList.add('posItem--first')
+                    $displayed[$displayed.length - 1].classList.add('posItem--last')
+                }
             }
         },
         hideRecentTransactions() {
diff --git a/BTCPayServer/wwwroot/pos/keypad.css b/BTCPayServer/wwwroot/pos/keypad.css
index 34a060830..95f406b9e 100644
--- a/BTCPayServer/wwwroot/pos/keypad.css
+++ b/BTCPayServer/wwwroot/pos/keypad.css
@@ -59,6 +59,8 @@ button[data-bs-toggle] .icon {
     grid-template-columns: repeat(3, 1fr);
 }
 .keypad .btn {
+    --icon-size: 1.75rem;
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -66,16 +68,13 @@ button[data-bs-toggle] .icon {
     position: relative;
     border-radius: 0;
     border-color: transparent !important;
-    font-weight: var(--btcpay-font-weight-semibold);
-    font-size: 24px;
+    font-weight: var(--btcpay-font-weight-bold);
+    font-size: var(--icon-size);
     min-height: 3.5rem;
     height: 8vh;
     max-height: 6rem;
     color: var(--btcpay-body-text);
 }
-.keypad .btn[data-key="+"] {
-    font-size: 2.25em;
-}
 .btcpay-pills label,
 .btn-secondary.rounded-pill {
     padding-left: 1rem;
diff --git a/BTCPayServer/wwwroot/pos/keypad.js b/BTCPayServer/wwwroot/pos/keypad.js
index 8be748f4a..0dea59f49 100644
--- a/BTCPayServer/wwwroot/pos/keypad.js
+++ b/BTCPayServer/wwwroot/pos/keypad.js
@@ -84,7 +84,8 @@ document.addEventListener("DOMContentLoaded",function () {
             keyPressed (key) {
                 if (this.keypadTarget === 'amounts') {
                     const lastIndex = this.amounts.length - 1;
-                    const lastAmount = this.amounts[lastIndex];
+                    let lastAmount = this.amounts[lastIndex];
+                    if (isNaN(lastAmount)) lastAmount = null;
                     if (key === 'C') {
                         if (!lastAmount && lastIndex === 0) {
                             // clear completely