From a2d506c0db3c06001b81691e96af71d7c167cf5d Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Thu, 13 Apr 2023 01:40:21 +0200
Subject: [PATCH] Checkout v2: Confetti for processing payments (#4872)

Let's not spoil the fun for those paying on-chain.
---
 BTCPayServer.Tests/Checkoutv2Tests.cs          | 5 ++++-
 BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml | 1 +
 BTCPayServer/wwwroot/checkout-v2/checkout.js   | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/BTCPayServer.Tests/Checkoutv2Tests.cs b/BTCPayServer.Tests/Checkoutv2Tests.cs
index 126f33d2e..ac09e627c 100644
--- a/BTCPayServer.Tests/Checkoutv2Tests.cs
+++ b/BTCPayServer.Tests/Checkoutv2Tests.cs
@@ -188,8 +188,10 @@ namespace BTCPayServer.Tests
             });
 
             s.Driver.Navigate().Refresh();
+
             // Pay full amount
             s.PayInvoice();
+
             // Processing
             TestUtils.Eventually(() =>
             {
@@ -197,8 +199,9 @@ namespace BTCPayServer.Tests
                 Assert.True(processingSection.Displayed);
                 Assert.Contains("Payment Received", processingSection.Text);
                 Assert.Contains("Your payment has been received and is now processing", processingSection.Text);
-                Assert.True(s.Driver.ElementDoesNotExist(By.Id("confetti")));
             });
+            s.Driver.FindElement(By.Id("confetti"));
+
             // Mine
             s.MineBlockOnInvoiceCheckout();
             TestUtils.Eventually(() =>
diff --git a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
index c7a4c3b4f..0f22c353a 100644
--- a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
+++ b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
@@ -112,6 +112,7 @@
                 <div v-if="isProcessing" id="processing" key="processing">
                     <div class="top">
                         <span class="icn">
+                            <div id="confetti" v-if="srvModel.celebratePayment" v-on:click="celebratePayment(5000)"></div>
                             <vc:icon symbol="payment-sent" />
                         </span>
                         <h4 v-t="'payment_received'"></h4>
diff --git a/BTCPayServer/wwwroot/checkout-v2/checkout.js b/BTCPayServer/wwwroot/checkout-v2/checkout.js
index 7f98a3e99..5b22926cb 100644
--- a/BTCPayServer/wwwroot/checkout-v2/checkout.js
+++ b/BTCPayServer/wwwroot/checkout-v2/checkout.js
@@ -192,6 +192,11 @@ function initApp() {
                 if (newValue === true && oldValue === false) {
                     // poll from here on
                     this.listenForConfirmations();
+                    // celebration!
+                    const self = this;
+                    Vue.nextTick(function () {
+                        self.celebratePayment(5000);
+                    });
                 }
             },
             isSettled: function (newValue, oldValue) {