From bc97c076707e5982fe8dc7ec1f37c5d4d29d1bb0 Mon Sep 17 00:00:00 2001
From: Ludovic <dolu89@gmail.com>
Date: Thu, 4 Apr 2019 21:32:16 +0200
Subject: [PATCH] Add currency select in Pay Button

---
 BTCPayServer/Controllers/StoresController.cs |  2 +-
 BTCPayServer/Views/Stores/PayButton.cshtml   |  2 +-
 BTCPayServer/wwwroot/paybutton/paybutton.js  | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/BTCPayServer/Controllers/StoresController.cs b/BTCPayServer/Controllers/StoresController.cs
index a42c51102..831045d58 100644
--- a/BTCPayServer/Controllers/StoresController.cs
+++ b/BTCPayServer/Controllers/StoresController.cs
@@ -892,7 +892,7 @@ namespace BTCPayServer.Controllers
                 UrlRoot = appUrl,
                 PayButtonImageUrl = appUrl + "img/paybutton/pay.png",
                 StoreId = store.Id,
-                ButtonType = 2,
+                ButtonType = 0,
                 Min = 1,
                 Max = 20,
                 Step = 1
diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index 992df92d4..946fb016c 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -18,7 +18,7 @@
                 </div>
                 <div class="form-group col-md-4">
                     <label>&nbsp;</label>
-                    <input name="price" type="text" class="form-control"
+                    <input name="currency" type="text" class="form-control"
                            v-model="srvModel.currency" v-on:change="inputChanges"
                            :class="{'is-invalid': errors.has('currency') }">
                 </div>
diff --git a/BTCPayServer/wwwroot/paybutton/paybutton.js b/BTCPayServer/wwwroot/paybutton/paybutton.js
index 91e39d3af..047aaae90 100644
--- a/BTCPayServer/wwwroot/paybutton/paybutton.js
+++ b/BTCPayServer/wwwroot/paybutton/paybutton.js
@@ -62,17 +62,20 @@ function inputChanges(event, buttonSize) {
     }
     else if (srvModel.buttonType == 1) {
         html += '\n    <div style="text-align:center;width:' + width + '">';
+        html += '<div>';
         html += addPlusMinusButton("-");
         html += addInputPrice(srvModel.price, widthInput, "");
         html += addPlusMinusButton("+");
         html += '</div>';
+        html += addSelectCurrency();
+        html += '</div>';
     }
     else if (srvModel.buttonType == 2) {
         html += '\n    <div style="text-align:center;width:' + width + '">';
 
         // Input price
         html += addInputPrice(srvModel.price, width, 'onchange="document.querySelector(\'#btcpay-input-range\').value = document.querySelector(\'#btcpay-input-price\').value"');
-
+        html += addSelectCurrency();
         // Slider
         html += '<input class="btcpay-input-range" id="btcpay-input-range" value="' + srvModel.price + '" type="range" min="' + srvModel.min + '" max="' + srvModel.max + '" step="' + srvModel.step + '" style="width:' + width + ';margin-bottom:15px;"' +
             'oninput="document.querySelector(\'#btcpay-input-price\').value = document.querySelector(\'#btcpay-input-range\').value" />';
@@ -134,10 +137,19 @@ function addPlusMinusButton(type) {
 function addInputPrice(price, widthInput, customFn) {
     var input = '<input type="text" id="btcpay-input-price" name="price" value="' + price + '" style="' +
         'border:none;background-image:none;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;-webkit-appearance: none;' + // Reset css
-        'width:' + widthInput + ';text-align:center;font-size:25px;margin:auto;border-radius:5px;line-height:50px;background:#fff;"' + // Custom css
+        'width:' + widthInput + ';text-align:center;font-size:25px;margin:auto;border-radius:5px;line-height:35px;background:#fff;"' + // Custom css
         'oninput="event.preventDefault();isNaN(event.target.value) ? document.querySelector(\'#btcpay-input-price\').value = ' + price + ' : event.target.value" CUSTOM />';
     if (customFn) {
         return input.replace("CUSTOM", customFn);
     }
     return input.replace("CUSTOM", "");
 }
+
+function addSelectCurrency() {
+    return '<select onchange="document.querySelector(\'input[type = hidden][name = currency]\').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;">' +
+        '<option value="USD">USD</option>' +
+        '<option value="GBP">GBP</option>' +
+        '<option value="EUR">EUR</option>' +
+        '<option value="BTC">BTC</option>' +
+        '</select>';
+}