From ed0e423aa74ca56f12e14aa81f8a0297be9610c6 Mon Sep 17 00:00:00 2001
From: Andrew Camilleri <evilkukka@gmail.com>
Date: Thu, 9 Apr 2020 13:44:08 +0200
Subject: [PATCH] Add payment link in checkout with payjoin indicator (#1449)

* Add payment link in checkout with payjoin indicator

* move to bottom
---
 .../Bitcoin_Lightning_LikeMethodCheckout.cshtml   | 15 ++++++++++++++-
 BTCPayServer/wwwroot/checkout/css/default.css     |  4 ++--
 .../wwwroot/checkout/css/themes/legacy.css        |  4 ++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml b/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml
index 0a915d5ac..40d519598 100644
--- a/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml
+++ b/BTCPayServer/Views/Shared/Bitcoin_Lightning_LikeMethodCheckout.cshtml
@@ -1,3 +1,4 @@
+@using BTCPayServer.Services
 @model BTCPayServer.Models.InvoicingModels.PaymentModel
 
 <script type="text/x-template" id="bitcoin-lightning-method-checkout-template">
@@ -64,13 +65,22 @@
                     </div>
                 </div>
                 <div class="separatorGem"></div>
-                <div class="copySectionBox">
+                <div class="copySectionBox bottomBorder">
                     <label>{{$t("Address")}}</label>
                     <div class="inputWithIcon _copyInput">
                         <input type="text" class="checkoutTextbox" v-bind:value="srvModel.btcAddress" readonly="readonly"/>
                         <img v-bind:src="srvModel.cryptoImage"/>
                     </div>
                 </div>
+                <div class="separatorGem"></div>
+                <div class="copySectionBox" :title="$t(hasPayjoin? 'BIP21 payment link' : 'BIP21 payment link with payjoin support') " >
+                    <label>{{$t("Payment link")}}</label>
+                    <div class="inputWithIcon _copyInput">
+                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.invoiceBitcoinUrl" readonly="readonly"/>
+                        <img v-bind:src="srvModel.cryptoImage" v-if="hasPayjoin"/>
+                        <i class="fa fa-user-secret" v-else/>
+                    </div>
+                </div>
             </nav>
         </div>
         @if (Model.ChangellyEnabled || Model.CoinSwitchEnabled)
@@ -217,6 +227,9 @@
                 }
             },
             computed: {
+                hasPayjoin: function(){
+                    return this.srvModel.invoiceBitcoinUrl.indexOf('@PayjoinClient.BIP21EndpointKey') === -1;
+                },
                 coinswitchAmountDue: function() {
                     return this.srvModel.coinSwitchAmountMarkupPercentage
                         ? this.srvModel.btcDue * (1 + (this.srvModel.coinSwitchAmountMarkupPercentage / 100))
diff --git a/BTCPayServer/wwwroot/checkout/css/default.css b/BTCPayServer/wwwroot/checkout/css/default.css
index 3667098dc..e6902028d 100644
--- a/BTCPayServer/wwwroot/checkout/css/default.css
+++ b/BTCPayServer/wwwroot/checkout/css/default.css
@@ -11448,7 +11448,7 @@ low-fee-timeline {
     position: relative;
 }
 
-    .inputWithIcon img {
+    .inputWithIcon img, .inputWithIcon i {
         position: absolute;
         left: 2px;
         top: 9px;
@@ -11458,7 +11458,7 @@ low-fee-timeline {
         border-right: 1px solid #e0e0e0;
     }
 
-    .inputWithIcon.inputIconBg img {
+    .inputWithIcon.inputIconBg img, .inputWithIcon.inputIconBg i {
         background-color: #aaa;
         color: #fff;
         padding: 9px 4px;
diff --git a/BTCPayServer/wwwroot/checkout/css/themes/legacy.css b/BTCPayServer/wwwroot/checkout/css/themes/legacy.css
index 436c93497..2988f2f5e 100644
--- a/BTCPayServer/wwwroot/checkout/css/themes/legacy.css
+++ b/BTCPayServer/wwwroot/checkout/css/themes/legacy.css
@@ -11447,7 +11447,7 @@ low-fee-timeline {
     position: relative;
 }
 
-    .inputWithIcon img {
+    .inputWithIcon img, .inputWithIcon i  {
         position: absolute;
         left: 2px;
         top: 9px;
@@ -11457,7 +11457,7 @@ low-fee-timeline {
         border-right: 1px solid #e0e0e0;
     }
 
-    .inputWithIcon.inputIconBg img {
+    .inputWithIcon.inputIconBg img, .inputWithIcon.inputIconBg i {
         background-color: #aaa;
         color: #fff;
         padding: 9px 4px;