From 9a9e31c759175cb34ff6b4e64320a17bc79eb5b7 Mon Sep 17 00:00:00 2001 From: Andrew Camilleri Date: Tue, 27 Aug 2019 04:31:15 +0200 Subject: [PATCH] Split Bitcoin/LN to partial defined in payment handler and convert checkout to Vue (#996) --- BTCPayServer/BTCPayServer.csproj | 1 - .../Models/InvoicingModels/PaymentModel.cs | 1 + .../Payments/IPaymentMethodHandler.cs | 20 +- .../Views/Invoice/Checkout-Body.cshtml | 337 +++---------- BTCPayServer/Views/Invoice/Checkout.cshtml | 223 ++++++++- .../Views/Invoice/CheckoutNoScript.cshtml | 10 +- ...itcoin_Lightning_LikeMethodCheckout.cshtml | 304 ++++++++++++ ...ightning_LikeMethodCheckoutNoScript.cshtml | 12 + BTCPayServer/wwwroot/checkout/js/core.js | 443 ------------------ BTCPayServer/wwwroot/checkout/js/vexdialog.js | 11 - 10 files changed, 596 insertions(+), 766 deletions(-) create mode 100644 BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml create mode 100644 BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckoutNoScript.cshtml delete mode 100644 BTCPayServer/wwwroot/checkout/js/core.js delete mode 100644 BTCPayServer/wwwroot/checkout/js/vexdialog.js diff --git a/BTCPayServer/BTCPayServer.csproj b/BTCPayServer/BTCPayServer.csproj index be2f2dd4e..a048d5c0c 100644 --- a/BTCPayServer/BTCPayServer.csproj +++ b/BTCPayServer/BTCPayServer.csproj @@ -79,7 +79,6 @@ - diff --git a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs index 2e55287a9..ebb105fc7 100644 --- a/BTCPayServer/Models/InvoicingModels/PaymentModel.cs +++ b/BTCPayServer/Models/InvoicingModels/PaymentModel.cs @@ -9,6 +9,7 @@ namespace BTCPayServer.Models.InvoicingModels { public string ExtensionPartial { get; set; } public string CheckoutBodyVueComponentName { get; set; } + public string CheckoutHeaderVueComponentName { get; set; } public string NoScriptPartialName { get; set; } } public class PaymentModel diff --git a/BTCPayServer/Payments/IPaymentMethodHandler.cs b/BTCPayServer/Payments/IPaymentMethodHandler.cs index 4c41bb4fe..4dba06a0d 100644 --- a/BTCPayServer/Payments/IPaymentMethodHandler.cs +++ b/BTCPayServer/Payments/IPaymentMethodHandler.cs @@ -76,6 +76,21 @@ namespace BTCPayServer.Payments Dictionary> rate, Money amount, PaymentMethodId paymentMethodId); public abstract IEnumerable GetSupportedPaymentMethods(); + public virtual CheckoutUIPaymentMethodSettings GetCheckoutUISettings() + { + return new CheckoutUIPaymentMethodSettings() + { + ExtensionPartial = "Bitcoin_Lightning_LikeMethodCheckout", + CheckoutBodyVueComponentName = "BitcoinLightningLikeMethodCheckout", + CheckoutHeaderVueComponentName = "BitcoinLightningLikeMethodCheckoutHeader", + NoScriptPartialName = "Bitcoin_Lightning_LikeMethodCheckoutNoScript" + }; + } + + public PaymentMethod GetPaymentMethodInInvoice(InvoiceEntity invoice, PaymentMethodId paymentMethodId) + { + return invoice.GetPaymentMethod(paymentMethodId); + } public virtual object PreparePayment(TSupportedPaymentMethod supportedPaymentMethod, StoreData store, BTCPayNetworkBase network) @@ -93,11 +108,6 @@ namespace BTCPayServer.Payments throw new NotSupportedException("Invalid supportedPaymentMethod"); } - - public virtual CheckoutUIPaymentMethodSettings GetCheckoutUISettings() - { - return null; - } object IPaymentMethodHandler.PreparePayment(ISupportedPaymentMethod supportedPaymentMethod, StoreData store, BTCPayNetworkBase network) diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml index d8a69c3ec..5caa78acc 100644 --- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml +++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml @@ -12,17 +12,17 @@ } -
+
✖
-
-
-
@@ -45,9 +45,9 @@
@if (Model.AvailableCryptos.Count > 1) { -
- - +
+ + {{srvModel.paymentMethodName}} ({{srvModel.cryptoCodeSrv}}) ⚡ @@ -58,8 +58,8 @@ @foreach (var crypto in Model.AvailableCryptos) {
  • - - @crypto.PaymentMethodName + + @crypto.PaymentMethodName @crypto.PaymentMethodName @(crypto.IsLightning ? Html.Raw("⚡") : null) @crypto.CryptoCode @@ -72,18 +72,18 @@ else {
    - + {{srvModel.paymentMethodName}} ({{srvModel.cryptoCodeSrv}}) ⚡
    } -
    • -
    +
    {{ srvModel.storeName }} @@ -110,7 +110,7 @@
    {{$t("NotPaid_ExtraTransaction")}}
    -
    +
    {{$t("Order Amount")}}
    {{srvModel.orderAmount}} {{ srvModel.cryptoCode }}
    @@ -146,251 +146,50 @@
    -
    -
    - {{$t("Scan")}} -
    -
    - {{$t("Copy")}} -
    - @if (Model.ChangellyEnabled || Model.CoinSwitchEnabled) - { -
    - {{$t("Conversion")}} -
    -
    - } - else - { -
    - } -
    + +
    -
    -
    -
    - {{$t("Contact and Refund Email")}} -
    -
    - - {{$t("Contact_Body")}} - - {{$t("Please enter a valid email address")}} -
    -
    - - - - -
    -
    -
    -
    - - - - -
    - -     -
    -
    - -
    -
    -
    - {{$t("This invoice has been archived")}} -
    -
    - {{$t("Archived_Body")}} -
    -
    -
    - -
    +
    diff --git a/BTCPayServer/Views/Invoice/Checkout.cshtml b/BTCPayServer/Views/Invoice/Checkout.cshtml index 0ce8f11fc..763e3aa8a 100644 --- a/BTCPayServer/Views/Invoice/Checkout.cshtml +++ b/BTCPayServer/Views/Invoice/Checkout.cshtml @@ -68,7 +68,7 @@
    -
    +
    @@ -117,7 +117,6 @@ var storeDefaultLang = @Safe.Json(@Model.DefaultLang); var fallbackLanguage = "en"; startingLanguage = computeStartingLanguage(); - // initialization i18next .use(window.i18nextXHRBackend) .init({ @@ -152,40 +151,222 @@ } var i18n = new VueI18next(i18next); - - // TODO: Move all logic from core.js to Vue controller Vue.config.ignoredElements = [ 'line-items', 'low-fee-timeline', // Ignoring custom HTML5 elements, eg: bp-spinner /^bp-/ ]; + var eventBus = new Vue(); var checkoutCtrl = new Vue({ i18n: i18n, el: '#checkoutCtrl', - components: { - qrcode: VueQrcode, - changelly: ChangellyComponent, - coinswitch: CoinSwitchComponent - }, data: { srvModel: srvModel, - lndModel: null, - scanDisplayQr: "", - expiringSoon: false, - isModal: srvModel.isModal, - lightningAmountInSatoshi: srvModel.lightningAmountInSatoshi, - selectedThirdPartyProcessor: "" + end: new Date(), + expirationPercentage: 0, + timerText: "@Model.TimeLeft", + emailAddressInput: "", + emailAddressInputDirty: false, + emailAddressInputInvalid: false, + emailAddressFormSubmitting: false, + lineItemsExpanded: false, + changingCurrencies: false, + loading: true }, computed: { - coinswitchAmountDue: function() { - return this.srvModel.coinSwitchAmountMarkupPercentage - ? this.srvModel.btcDue * (1 + (this.srvModel.coinSwitchAmountMarkupPercentage / 100)) - : this.srvModel.btcDue; + expiringSoon: function(){ + return this.expirationPercentage >= 75 && !this.invoiceUnpayable && !this.invoicePaid; }, showPaymentUI: function(){ - var disallowedStatuses = ["complete","confirmed" ,"paid", "expired", "invalid"]; - return (!this.srvModel.requiresRefundEmail || validateEmail(srvModel.customerEmail)) && disallowedStatuses.indexOf(this.srvModel.status) < 0; + return !this.showEmailForm && !this.invoiceUnpayable && !this.invoicePaid; + }, + showEmailForm: function(){ + return this.srvModel.requiresRefundEmail && (!this.srvModel.customerEmail || !this.validateEmail(this.srvModel.customerEmail)) && !this.invoiceUnpayable && !this.invoicePaid; + }, + invoiceUnpayable: function(){ + return ["expired", "invalid"].indexOf(this.srvModel.status) >= 0; + }, + invoicePaid: function(){ + return ["complete", "confirmed", "paid"].indexOf(this.srvModel.status) >= 0; + } + }, + mounted: function(){ + this.startProgressTimer(); + this.listenIn(); + this.onDataCallback(this.srvModel); + if (this.srvModel.status === "new" && this.srvModel.txCount > 1) { + this.onlyExpandLineItems(); + } + window.parent.postMessage("loaded", "*"); + jQuery("invoice").fadeOut(0).fadeIn(300); + window.closePaymentMethodDialog = this.closePaymentMethodDialog.bind(this); + this.loading = false; + }, + methods: { + onlyExpandLineItems: function() { + if (!this.lineItemsExpanded) { + this.toggleLineItems(); + }}, + toggleLineItems: function() { + this.lineItemsExpanded ? $("line-items").slideUp() : $("line-items").slideDown(); + this.lineItemsExpanded = !this.lineItemsExpanded; + }, + numberFormatted: function(x) { + var rounded = Math.round(x); + var parts = rounded.toString().split("."); + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " "); + return parts.join("."); + }, + openPaymentMethodDialog: function() { + var content = $("#vexPopupDialog").html(); + vex.open({ + unsafeContent: content + }); + }, + closePaymentMethodDialog: function(currencyId) { + vex.closeAll(); + this.changeCurrency(currencyId); + }, + changeCurrency: function (currency) { + if (currency !== null && srvModel.paymentMethodId !== currency) { + this.changingCurrencies = true; + srvModel.paymentMethodId = currency; + this.fetchData(); + this.closePaymentMethodDialog(null); + } + }, + close: function(){ + $("invoice").fadeOut(300, function () { + window.parent.postMessage("close", "*"); + }); + }, + validateEmail: function (email) { + var re = /^(([^<>()\[\]\\.,;:\s@@"]+(\.[^<>()\[\]\\.,;:\s@@"]+)*)|(".+"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + return re.test(email); + }, + startProgressTimer: function(){ + var timeLeftS = this.endDate? (this.endDate.getTime() - new Date().getTime())/1000 : this.srvModel.expirationSeconds; + this.expirationPercentage = 100 - ((timeLeftS / this.srvModel.maxTimeSeconds) * 100); + this.timerText = this.updateTimerText(timeLeftS); + if( this.expirationPercentage < 100 && (this.srvModel.status === "paidPartial" || this.srvModel.status === "new")){ + setTimeout(this.startProgressTimer, 500); + } + }, + updateTimerText: function (timer) { + if (timer >= 0) { + var minutes = parseInt(timer / 60, 10); + minutes = minutes < 10 ? "0" + minutes : minutes; + var seconds = parseInt(timer % 60, 10); + seconds = seconds < 10 ? "0" + seconds : seconds; + return minutes + ":" + seconds; + } else { + return "00:00"; + } + }, + listenIn: function(){ + var socket = null; + var supportsWebSockets = 'WebSocket' in window && window.WebSocket.CLOSING === 2; + if (supportsWebSockets) { + var loc = window.location, ws_uri; + if (loc.protocol === "https:") { + ws_uri = "wss:"; + } else { + ws_uri = "ws:"; + } + ws_uri += "//" + loc.host; + ws_uri += loc.pathname + "/status/ws?invoiceId=" + this.srvModel.invoiceId; + try { + socket = new WebSocket(ws_uri); + socket.onmessage = function (e) { + this.fetchData(); + }; + socket.onerror = function (e) { + console.error("Error while connecting to websocket for invoice notifications (callback)"); + }; + } + catch (e) { + console.error("Error while connecting to websocket for invoice notifications"); + } + } + + function watcher(){ + setTimeout(function(){ + if (socket === null || socket.readyState !== 1) { + this.fetchData(); + } + watcher(); + }, 2000); + } + watcher(); + }, + fetchData: function(){ + var self = this; + $.ajax({ + url: window.location.pathname + "/status?invoiceId=" + srvModel.invoiceId + "&paymentMethodId=" + srvModel.paymentMethodId, + type: "GET", + cache: false + }) + .done(function (data) { + self.onDataCallback.bind(self)(data); + }) + }, + onDataCallback : function(jsonData){ + if (this.srvModel.status !== jsonData.status) { + window.parent.postMessage({ "invoiceId": srvModel.invoiceId, "status": jsonData.status }, "*"); + } + if (jsonData.paymentMethodId === this.srvModel.paymentMethodId) { + this.changingCurrencies = false; + } + // displaying satoshis for lightning payments + jsonData.cryptoCodeSrv = jsonData.cryptoCode; + if (jsonData.isLightning && jsonData.lightningAmountInSatoshi && jsonData.cryptoCode === "BTC") { + var SATOSHIME = 100000000; + jsonData.cryptoCode = "Sats"; + jsonData.btcDue = numberFormatted(jsonData.btcDue * SATOSHIME); + jsonData.btcPaid = numberFormatted(jsonData.btcPaid * SATOSHIME); + jsonData.networkFee = numberFormatted(jsonData.networkFee * SATOSHIME); + jsonData.orderAmount = numberFormatted(jsonData.orderAmount * SATOSHIME); + } + // expand line items to show details on amount due for multi-transaction payment + if (this.srvModel.txCount === 1 && jsonData.txCount > 1) { + this.onlyExpandLineItems(); + } + var newEnd = new Date(); + newEnd.setSeconds(newEnd.getSeconds()+ jsonData.expirationSeconds); + this.endDate = newEnd; + // updating ui + this.srvModel = jsonData; + if (this.invoicePaid && !jsonData.isModal && jsonData.redirectAutomatically && jsonData.merchantRefLink) { + this.loading = true; + setTimeout(function () { + window.location = jsonData.merchantRefLink; + }, 2000); + } + }, + onEmailChange: function(){ + this.emailAddressInputDirty = true; + this.emailAddressInputInvalid = false; + }, + onEmailSubmit : function(){ + var self = this; + if (this.validateEmail(this.emailAddressInput)) { + this.emailAddressFormSubmitting = true; + // Push the email to a server, once the reception is confirmed move on + $.ajax({ + url: window.location.pathname + "/UpdateCustomer?invoiceId=" +this.srvModel.invoiceId, + type: "POST", + data: JSON.stringify({ Email: this.emailAddressInput }), + contentType: "application/json; charset=utf-8" + }) + .done(function () { + self.srvModel.customerEmail = self.emailAddressInput; + }).always(function () { + self.emailAddressFormSubmitting = false; + }); + } else { + this.emailAddressInputInvalid = true; + } } } }); diff --git a/BTCPayServer/Views/Invoice/CheckoutNoScript.cshtml b/BTCPayServer/Views/Invoice/CheckoutNoScript.cshtml index e89500135..b5a77e046 100644 --- a/BTCPayServer/Views/Invoice/CheckoutNoScript.cshtml +++ b/BTCPayServer/Views/Invoice/CheckoutNoScript.cshtml @@ -22,15 +22,7 @@ } else { -
    -

    To complete payment, please send @Model.BtcDue @Model.CryptoCode to @Model.BtcAddress

    -

    Time remaining: @Model.TimeLeft

    -

    @Model.InvoiceBitcoinUrl

    - @if (Model.IsLightning) - { -

    Peer Info: @Model.PeerInfo

    - } -
    +

    This payment method requires javascript.

    } @if (Model.AvailableCryptos.Count > 1) { diff --git a/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml b/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml new file mode 100644 index 000000000..1d134c41a --- /dev/null +++ b/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml @@ -0,0 +1,304 @@ +@model BTCPayServer.Models.InvoicingModels.PaymentModel + + + + + + diff --git a/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckoutNoScript.cshtml b/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckoutNoScript.cshtml new file mode 100644 index 000000000..257af8923 --- /dev/null +++ b/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckoutNoScript.cshtml @@ -0,0 +1,12 @@ +@model PaymentModel +
    +

    To complete payment, please send @Model.BtcDue @Model.CryptoCode to @Model.BtcAddress

    +

    Time remaining: @Model.TimeLeft

    +

    + @Model.InvoiceBitcoinUrl +

    + @if (Model.IsLightning) + { +

    Peer Info: @Model.PeerInfo

    + } +
    diff --git a/BTCPayServer/wwwroot/checkout/js/core.js b/BTCPayServer/wwwroot/checkout/js/core.js deleted file mode 100644 index f49b529e6..000000000 --- a/BTCPayServer/wwwroot/checkout/js/core.js +++ /dev/null @@ -1,443 +0,0 @@ -// TODO: Refactor... switch from jQuery to Vue.js -// public methods -function resetTabsSlider() { - // Scan/Copy Transitions - // Scan Tab - $("#scan-tab").off().on("click", function () { - resetTabsSlider(); - activateTab("#scan"); - }); - - // Copy tab - $("#copy-tab").off().on("click", function () { - resetTabsSlider(); - activateTab("#copy"); - - $("#tabsSlider").addClass("slide-copy"); - }); - - // Altcoins tab - $("#altcoins-tab").off().on("click", function () { - resetTabsSlider(); - activateTab("#altcoins"); - - $("#tabsSlider").addClass("slide-altcoins"); - }); - - $("#tabsSlider").removeClass("slide-copy"); - $("#tabsSlider").removeClass("slide-altcoins"); - - $("#scan-tab").removeClass("active"); - $("#copy-tab").removeClass("active"); - $("#altcoins-tab").removeClass("active"); - - $("#copy").hide(); - $("#copy").removeClass("active"); - - $("#scan").hide(); - $("#scan").removeClass("active"); - - $("#altcoins").hide(); - $("#altcoins").removeClass("active"); - - closePaymentMethodDialog(null); -} - -function changeCurrency(currency) { - if (currency !== null && srvModel.paymentMethodId !== currency) { - $(".payment__currencies").hide(); - $(".payment__spinner").show(); - checkoutCtrl.scanDisplayQr = ""; - srvModel.paymentMethodId = currency; - fetchStatus(); - setTimeout(function(){ - resetTabsSlider(); - if ($("#tabsSlider").hasClass("slide-copy")) { - activateTab("#copy"); - } else if ($("#tabsSlider").hasClass("slide-altcoins")) { - activateTab("#altcoins"); - } else { - activateTab("#scan"); - } - },50); - - } - return false; -} - -function onDataCallback(jsonData) { - var newStatus = jsonData.status; - - if (newStatus === "complete" || - newStatus === "confirmed" || - newStatus === "paid") { - if ($(".modal-dialog").hasClass("expired")) { - $(".modal-dialog").removeClass("expired"); - $("#expired").removeClass("active"); - } - - $(".modal-dialog").addClass("paid"); - - resetTabsSlider(); - $("#paid").addClass("active"); - if (!jsonData.isModal && jsonData.redirectAutomatically && jsonData.merchantRefLink) { - $(".payment__spinner").show(); - setTimeout(function () { - window.location = jsonData.merchantRefLink; - }, 2000); - } - } - - if (newStatus === "expired" || newStatus === "invalid") { //TODO: different state if the invoice is invalid (failed to confirm after timeout) - if ($(".modal-dialog").hasClass("paid")) { - $(".modal-dialog").removeClass("paid"); - $("#paid").removeClass("active"); - } - - $(".timer-row").removeClass("expiring-soon"); - $(".timer-row__spinner").html(""); - $("#emailAddressView").removeClass("active"); - $(".modal-dialog").addClass("expired"); - $("#expired").addClass("active"); - - resetTabsSlider(); - } - - if (checkoutCtrl.srvModel.status !== newStatus) { - window.parent.postMessage({ "invoiceId": srvModel.invoiceId, "status": newStatus }, "*"); - } - - // restoring qr code view only when currency is switched - if (jsonData.paymentMethodId === srvModel.paymentMethodId && - checkoutCtrl.scanDisplayQr === "") { - checkoutCtrl.scanDisplayQr = jsonData.invoiceBitcoinUrlQR; - } - - if (jsonData.paymentMethodId === srvModel.paymentMethodId) { - $(".payment__currencies").show(); - $(".payment__spinner").hide(); - } - - if (jsonData.isLightning && checkoutCtrl.lndModel === null) { - var lndModel = { - toggle: 0 - }; - - checkoutCtrl.lndModel = lndModel; - } - - if (!jsonData.isLightning) { - checkoutCtrl.lndModel = null; - } - - // displaying satoshis for lightning payments - jsonData.cryptoCodeSrv = jsonData.cryptoCode; - if (jsonData.isLightning && checkoutCtrl.lightningAmountInSatoshi && jsonData.cryptoCode === "BTC") { - var SATOSHIME = 100000000; - jsonData.cryptoCode = "Sats"; - jsonData.btcDue = numberFormatted(jsonData.btcDue * SATOSHIME); - jsonData.btcPaid = numberFormatted(jsonData.btcPaid * SATOSHIME); - jsonData.networkFee = numberFormatted(jsonData.networkFee * SATOSHIME); - jsonData.orderAmount = numberFormatted(jsonData.orderAmount * SATOSHIME); - } - - // expand line items to show details on amount due for multi-transaction payment - if (checkoutCtrl.srvModel.txCount === 1 && jsonData.txCount > 1) { - onlyExpandLineItems(); - } - - // updating ui - checkoutCtrl.srvModel = jsonData; -} - -function numberFormatted(x) { - var rounded = Math.round(x); - var parts = rounded.toString().split("."); - parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " "); - return parts.join("."); -} - -function fetchStatus() { - $.ajax({ - url: window.location.pathname + "/status?invoiceId=" + srvModel.invoiceId + "&paymentMethodId=" + srvModel.paymentMethodId, - type: "GET", - cache: false - }).done(function (data) { - onDataCallback(data); - }).fail(function (jqXHR, textStatus, errorThrown) { - - }); -} - -function lndToggleBolt11() { - checkoutCtrl.lndModel.toggle = 0; - checkoutCtrl.scanDisplayQr = checkoutCtrl.srvModel.invoiceBitcoinUrlQR; -} - -function lndToggleNode() { - checkoutCtrl.lndModel.toggle = 1; - checkoutCtrl.scanDisplayQr = checkoutCtrl.srvModel.peerInfo; -} - -var lineItemsExpanded = false; -function toggleLineItems() { - $("line-items").toggleClass("expanded"); - lineItemsExpanded ? $("line-items").slideUp() : $("line-items").slideDown(); - lineItemsExpanded = !lineItemsExpanded; - - $(".buyerTotalLine").toggleClass("expanded"); - $(".single-item-order__right__btc-price__chevron").toggleClass("expanded"); -} - -function onlyExpandLineItems() { - if (!lineItemsExpanded) { - toggleLineItems(); - } -} - - -function activateTab(senderName) { - $(senderName + "-tab").addClass("active"); - - $(senderName).show(); - $(senderName).addClass("active"); -} - - -// private methods -$(document).ready(function () { - // initialize - onDataCallback(srvModel); - // initial expand of line items to show error message if multiple payments needed - if (srvModel.status === "new" && srvModel.txCount > 1) { - onlyExpandLineItems(); - } - - // check if the Document expired - if (srvModel.expirationSeconds > 0) { - progressStart(srvModel.maxTimeSeconds); // Progress bar - - if (srvModel.requiresRefundEmail && !validateEmail(srvModel.customerEmail)) - showEmailForm(); - else - hideEmailForm(); - } - - $(".close-action").on("click", function () { - $("invoice").fadeOut(300, function () { - window.parent.postMessage("close", "*"); - }); - }); - - window.parent.postMessage("loaded", "*"); - jQuery("invoice").fadeOut(0); - jQuery("invoice").fadeIn(300); - - // eof initialize - - // Expand Line-Items - $(".buyerTotalLine").click(function () { - toggleLineItems(); - }); - - // FUNCTIONS - function hideEmailForm() { - $("#emailAddressView").removeClass("active"); - $("placeholder-refundEmail").html(srvModel.customerEmail); - - // Remove Email mode - $(".modal-dialog").removeClass("enter-purchaser-email"); - $("#scan").addClass("active"); - } - // Email Form - // Setup Email mode - function showEmailForm() { - $(".modal-dialog").addClass("enter-purchaser-email"); - - $("#emailAddressForm .action-button").click(function () { - var emailAddress = $("#emailAddressFormInput").val(); - if (validateEmail(emailAddress)) { - $("#emailAddressForm .input-wrapper bp-loading-button .action-button").addClass("loading"); - // Push the email to a server, once the reception is confirmed move on - srvModel.customerEmail = emailAddress; - $.ajax({ - url: window.location.pathname + "/UpdateCustomer?invoiceId=" + srvModel.invoiceId, - type: "POST", - data: JSON.stringify({ Email: srvModel.customerEmail }), - contentType: "application/json; charset=utf-8" - }).done(function () { - hideEmailForm(); - }).fail(function (jqXHR, textStatus, errorThrown) { - - }) - .always(function () { - $("#emailAddressForm .input-wrapper bp-loading-button .action-button").removeClass("loading"); - }); - } else { - $("#emailAddressForm").addClass("ng-touched ng-dirty ng-submitted ng-invalid"); - } - - return false; - }); - } - - - - /* =============== Even listeners =============== */ - - // Email - $("#emailAddressFormInput").change(function () { - if ($("#emailAddressForm").hasClass("ng-submitted")) { - $("#emailAddressForm").removeClass("ng-submitted"); - } - }); - - - - - - // Payment received - // Should connect using webhook ? - // If notification received - - var socket = null; - var supportsWebSockets = 'WebSocket' in window && window.WebSocket.CLOSING === 2; - if (supportsWebSockets) { - var loc = window.location, ws_uri; - if (loc.protocol === "https:") { - ws_uri = "wss:"; - } else { - ws_uri = "ws:"; - } - ws_uri += "//" + loc.host; - ws_uri += loc.pathname + "/status/ws?invoiceId=" + srvModel.invoiceId; - try { - socket = new WebSocket(ws_uri); - socket.onmessage = function (e) { - fetchStatus(); - }; - socket.onerror = function (e) { - console.error("Error while connecting to websocket for invoice notifications (callback)"); - }; - } - catch (e) { - console.error("Error while connecting to websocket for invoice notifications"); - } - } - - var watcher = setInterval(function () { - if (socket === null || socket.readyState !== 1) { - fetchStatus(); - } - }, 2000); - - $(".menu__item").click(function () { - $(".menu__scroll .menu__item").removeClass("selected"); - $(this).addClass("selected"); - language(); - $(".selector span").text($(".selected").text()); - // function to load contents in different language should go there - }); - - // Timer Countdown && Progress bar - function progressStart(timerMax) { - var end = new Date(); // Setup Time Variable, should come from server - end.setSeconds(end.getSeconds() + srvModel.expirationSeconds); - timerMax *= 1000; // Usually 15 minutes = 9000 second= 900000 ms - animateUpdate(); //Launch it - - function animateUpdate() { - var now = new Date(); - var timeDiff = end.getTime() - now.getTime(); - var perc = 100 - Math.round(timeDiff / timerMax * 100); - var status = checkoutCtrl.srvModel.status; - - updateTimer(timeDiff / 1000); - - if (perc === 75 && (status === "paidPartial" || status === "new")) { - $(".timer-row").addClass("expiring-soon"); - checkoutCtrl.expiringSoon = true; - updateProgress(perc); - } - if (perc <= 100) { - updateProgress(perc); - - var timeoutVal = 300; // Timeout calc - setTimeout(animateUpdate, timeoutVal); - } - - //if (perc >= 100 && status === "expired") { - // onDataCallback(status); - //} - } - - function updateProgress(percentage) { - $('.timer-row__progress-bar').css("width", percentage + "%"); - } - - function updateTimer(timer) { - var display = $(".timer-row__time-left"); - if (timer >= 0) { - var minutes = parseInt(timer / 60, 10); - minutes = minutes < 10 ? "0" + minutes : minutes; - - var seconds = parseInt(timer % 60, 10); - seconds = seconds < 10 ? "0" + seconds : seconds; - - display.text(minutes + ":" + seconds); - } else { - display.text("00:00"); - } - } - } - - // Clipboard Copy - var copySpan = new Clipboard('._copySpan', { - target: function (trigger) { - return copyElement(trigger, 0, 65).firstChild; - } - }); - var copyInput = new Clipboard('._copyInput', { - target: function (trigger) { - return copyElement(trigger, 4, 65).firstChild; - } - }); - - function copyElement(trigger, popupLeftModifier, popupTopModifier) { - var elm = $(trigger); - var position = elm.offset(); - position.top -= popupLeftModifier; - position.left += (elm.width() / 2) - popupTopModifier; - $(".copyLabelPopup").css(position).addClass("copied"); - - elm.removeClass("copy-cursor").addClass("clipboardCopied"); - setTimeout(clearSelection, 100); - setTimeout(function () { - elm.removeClass("clipboardCopied").addClass("copy-cursor"); - $(".copyLabelPopup").removeClass("copied"); - }, 1000); - return trigger; - } - function clearSelection() { - if (window.getSelection) { window.getSelection().removeAllRanges(); } - else if (document.selection) { document.selection.empty(); } - } - // EOF Copy - - // Disable enter key - $(document).keypress( - function (event) { - if (event.which === '13') { - event.preventDefault(); - } - } - ); - resetTabsSlider(); - -}); - -// Validate Email address -function validateEmail(email) { - var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - return re.test(email); -} diff --git a/BTCPayServer/wwwroot/checkout/js/vexdialog.js b/BTCPayServer/wwwroot/checkout/js/vexdialog.js deleted file mode 100644 index f54ff04d8..000000000 --- a/BTCPayServer/wwwroot/checkout/js/vexdialog.js +++ /dev/null @@ -1,11 +0,0 @@ -function openPaymentMethodDialog() { - var content = $("#vexPopupDialog").html(); - vex.open({ - unsafeContent: content - }); -} - -function closePaymentMethodDialog(currencyId) { - vex.closeAll(); - return changeCurrency(currencyId); -}