Merge pull request #2050 from Kukks/separate-btc-ln-checkout

Separate views of Bitcoin and LN

BTCPayServer/BTCPayServer.csproj

@@ -21,10 +21,6 @@
     <None Remove="Build\**" />
     <None Remove="wwwroot\bundles\jqueryvalidate\**" />
     <None Remove="wwwroot\vendor\jquery-nice-select\**" />
-    <Content Update="Views\Shared\NBXSyncSummary.cshtml">
-      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </Content>
   </ItemGroup>
   <ItemGroup>
     <None Remove="Currencies.txt" />

BTCPayServer/Payments/IPaymentMethodHandler.cs

@@ -76,10 +76,10 @@ namespace BTCPayServer.Payments
         {
             return new CheckoutUIPaymentMethodSettings()
             {
-                ExtensionPartial = "Bitcoin_Lightning_LikeMethodCheckout",
-                CheckoutBodyVueComponentName = "BitcoinLightningLikeMethodCheckout",
-                CheckoutHeaderVueComponentName = "BitcoinLightningLikeMethodCheckoutHeader",
-                NoScriptPartialName = "Bitcoin_Lightning_LikeMethodCheckoutNoScript"
+                ExtensionPartial = "Bitcoin/BitcoinLikeMethodCheckout",
+                CheckoutBodyVueComponentName = "BitcoinLikeMethodCheckout",
+                CheckoutHeaderVueComponentName = "BitcoinLikeMethodCheckoutHeader",
+                NoScriptPartialName = "Bitcoin/BitcoinLikeMethodCheckoutNoScript"
             };
         }
 

BTCPayServer/Payments/Lightning/LightningLikePaymentHandler.cs

@@ -199,6 +199,17 @@ namespace BTCPayServer.Payments.Lightning
             return GetPaymentMethodName(network);
         }
 
+        public override CheckoutUIPaymentMethodSettings GetCheckoutUISettings()
+        {
+            return new CheckoutUIPaymentMethodSettings()
+            {
+                ExtensionPartial = "Lightning/LightningLikeMethodCheckout",
+                CheckoutBodyVueComponentName = "LightningLikeMethodCheckout",
+                CheckoutHeaderVueComponentName = "LightningLikeMethodCheckoutHeader",
+                NoScriptPartialName = "Lightning/LightningLikeMethodCheckoutNoScript"
+            };
+        }
+
         private string GetPaymentMethodName(BTCPayNetworkBase network)
         {
             return $"{network.DisplayName} (Lightning)";

BTCPayServer/Payments/PaymentTypes.Bitcoin.cs

@@ -79,6 +79,6 @@ namespace BTCPayServer.Payments
             return bip21;
         }
 
-        public override string InvoiceViewPaymentPartialName { get; } = "ViewBitcoinLikePaymentData";
+        public override string InvoiceViewPaymentPartialName { get; } = "Bitcoin/ViewBitcoinLikePaymentData";
     }
 }

BTCPayServer/Payments/PaymentTypes.Lightning.cs

@@ -58,6 +58,6 @@ namespace BTCPayServer.Payments
             return $"lightning:{lnInvoiceTrimmedOfScheme}";
         }
 
-        public override string InvoiceViewPaymentPartialName { get; } = "ViewLightningLikePaymentData";
+        public override string InvoiceViewPaymentPartialName { get; } = "Lightning/ViewLightningLikePaymentData";
     }
 }

BTCPayServer/Services/Altcoins/Ethereum/Payments/EthereumLikePaymentMethodHandler.cs

@@ -108,7 +108,7 @@ namespace BTCPayServer.Services.Altcoins.Ethereum.Payments
                 ExtensionPartial = "Ethereum/EthereumLikeMethodCheckout",
                 CheckoutBodyVueComponentName = "EthereumLikeMethodCheckout",
                 CheckoutHeaderVueComponentName = "EthereumLikeMethodCheckoutHeader",
-                NoScriptPartialName = "Bitcoin_Lightning_LikeMethodCheckoutNoScript"
+                NoScriptPartialName = "Bitcoin/BitcoinLikeMethodCheckoutNoScript"
             };
         }
 

BTCPayServer/Services/NBXSyncSummaryProvider.cs

@@ -17,6 +17,6 @@ namespace BTCPayServer.Services
             return _nbXplorerDashboard.IsFullySynched();
         }
 
-        public string Partial { get; } = "NBXSyncSummary";
+        public string Partial { get; } = "Bitcoin/NBXSyncSummary";
     }
 }

BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml

@@ -1,25 +1,9 @@
 @using BTCPayServer.Services
 @model BTCPayServer.Models.InvoicingModels.PaymentModel
 
-<script type="text/x-template" id="bitcoin-lightning-method-checkout-template">
+<script type="text/x-template" id="bitcoin-method-checkout-template">
     <div>
         <div class="bp-view payment scan" id="scan" v-bind:class="{ 'active': currentTab == 'scan'}">
-            <div class="wrapBtnGroup" v-bind:class="{ invisible: !srvModel.isLightning || !scanDisplayQr }">
-                <div class="btnGroupLnd">
-                    <button 
-                            v-on:click="toggleLightningData('bolt11')" 
-                            v-bind:class="{ active: currentLightningDisplay === 'bolt11' }"
-                            v-bind:title="$t('BOLT 11 Invoice')">
-                            {{$t("BOLT 11 Invoice")}}
-                    </button>
-                    <button 
-                        v-on:click="toggleLightningData('node')" 
-                        v-bind:class="{ active: currentLightningDisplay === 'node' }"
-                        v-bind:title="$t('Node Info')">
-                        {{$t("Node Info")}}
-                    </button>
-                </div>
-            </div>
             <div class="payment__scan">
                 <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" v-if="scanDisplayQr"/>
                 <qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg" v-if="scanDisplayQr"></qrcode>
@@ -40,24 +24,7 @@
             <div class="copyLabelPopup">
                 <span>{{$t("Copied")}}</span>
             </div>
-            <nav v-if="srvModel.isLightning" class="copyBox">
-                <div class="copySectionBox bottomBorder">
-                    <label>{{$t("BOLT 11 Invoice")}}</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">
-                    <label>{{$t("Node Info")}}</label>
-                    <div class="inputWithIcon _copyInput">
-                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly"/>
-                        <img v-bind:src="srvModel.cryptoImage"/>
-                    </div>
-                </div>
-            </nav>
-            <nav v-else class="copyBox">
+            <nav class="copyBox">
                 <div class="copySectionBox bottomBorder">
                     <label>{{$t("Amount")}}</label>
                     <div class="copyAmountText copy-cursor _copySpan">
@@ -86,14 +53,7 @@
         @if (Model.CoinSwitchEnabled)
         {
             <div id="altcoins" class="bp-view payment manual-flow" v-bind:class="{ 'active': currentTab == 'altcoins'}">
-                <nav v-if="srvModel.isLightning">
-                    <div class="manual__step-two__instructions">
-                        <span>
-                            {{$t("ConversionTab_Lightning")}}
-                        </span>
-                    </div>
-                </nav>
-                <nav v-else>
+                <nav>
                     <div class="manual__step-two__instructions">
                         <span>
                             {{$t("ConversionTab_BodyTop", srvModel)}}
@@ -143,7 +103,7 @@
     </div>          
 </script>
 
-<script type="text/x-template" id="bitcoin-lightning-method-checkout-header-template">
+<script type="text/x-template" id="bitcoin-method-checkout-header-template">
     <div class="payment-tabs">
         <div class="payment-tabs__tab " id="scan-tab" v-on:click="switchTab('scan')"  v-bind:class="{ 'active': currentTab == 'scan'}" >
             <span>{{$t("Scan")}}</span>
@@ -166,17 +126,16 @@
 </script>
 
 <script type="text/javascript">
-    Vue.component('BitcoinLightningLikeMethodCheckout',
+    Vue.component('BitcoinLikeMethodCheckout',
         {
             props: ["srvModel"],
-            template: "#bitcoin-lightning-method-checkout-template",
+            template: "#bitcoin-method-checkout-template",
             components: {
                 qrcode: VueQrcode,
                 coinswitch: CoinSwitchComponent
             },
             data: function() {
                 return {
-                    currentLightningDisplay: "bolt11",
                     selectedThirdPartyProcessor: "",
                     currentTab: "scan"
                 }
@@ -191,20 +150,9 @@
                         : this.srvModel.btcDue;
                 },
                 scanDisplayQr: function() {
-                    if (this.srvModel.isLightning && this.currentLightningDisplay === "node") {
-                        return this.srvModel.peerInfo;
-                    }
                     return this.srvModel.invoiceBitcoinUrlQR;
                 }
             },
-            methods: {
-                toggleLightningData: function(display) {
-                    if (!this.srvModel.isLightning) {
-                        return;
-                    }
-                    this.currentLightningDisplay = display;
-                }
-            },
             mounted: function() {
                 var self = this;
                 eventBus.$on("tab-switched",
@@ -214,9 +162,9 @@
         }
     });
 
-    Vue.component('BitcoinLightningLikeMethodCheckoutHeader', {
+    Vue.component('BitcoinLikeMethodCheckoutHeader', {
         props: ["srvModel"],
-        template: "#bitcoin-lightning-method-checkout-header-template",
+        template: "#bitcoin-method-checkout-header-template",
         data: function() {
             return {
                 currentTab: "scan"

BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckoutNoScript.cshtml

@@ -5,8 +5,4 @@
     <p>
         <a href="@Model.InvoiceBitcoinUrl" style="word-break: break-word;">@Model.InvoiceBitcoinUrl</a>
     </p>
-    @if (Model.IsLightning)
-    {
-        <p>Peer Info: <b>@Model.PeerInfo</b></p>
-    }
 </div>

BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckout.cshtml

@@ -0,0 +1,174 @@
+@using BTCPayServer.Services
+@model BTCPayServer.Models.InvoicingModels.PaymentModel
+
+<script type="text/x-template" id="lightning-method-checkout-template">
+    <div>
+        <div class="bp-view payment scan" id="scan" v-bind:class="{ 'active': currentTab == 'scan'}">
+            <div class="wrapBtnGroup" v-bind:class="{ invisible: !scanDisplayQr }">
+                <div class="btnGroupLnd">
+                    <button 
+                            v-on:click="toggleLightningData('bolt11')" 
+                            v-bind:class="{ active: currentLightningDisplay === 'bolt11' }"
+                            v-bind:title="$t('BOLT 11 Invoice')">
+                            {{$t("BOLT 11 Invoice")}}
+                    </button>
+                    <button 
+                        v-on:click="toggleLightningData('node')" 
+                        v-bind:class="{ active: currentLightningDisplay === 'node' }"
+                        v-bind:title="$t('Node Info')">
+                        {{$t("Node Info")}}
+                    </button>
+                </div>
+            </div>
+            <div class="payment__scan">
+                <img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" v-if="scanDisplayQr"/>
+                <qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }" tag="svg" v-if="scanDisplayQr"></qrcode>
+                <div class="payment__spinner qr_currency_icon" style="padding-right: 20px;">
+                    <partial name="Checkout-Spinner"/>
+                </div>
+            </div>
+            <div class="payment__details__instruction__open-wallet" v-if="srvModel.invoiceBitcoinUrl">
+                <a class="payment__details__instruction__open-wallet__btn action-button" target="_top" v-bind:href="srvModel.invoiceBitcoinUrl">
+                    <span>{{$t("Open in wallet")}}</span>
+                </a>
+            </div>
+        </div>
+        <div class="bp-view payment manual-flow" id="copy" v-bind:class="{ 'active': currentTab == 'copy'}">
+            <div class="manual__step-two__instructions">
+                <span v-html="$t('CompletePay_Body', srvModel)"></span>
+            </div>
+            <div class="copyLabelPopup">
+                <span>{{$t("Copied")}}</span>
+            </div>
+            <nav  class="copyBox">
+                <div class="copySectionBox bottomBorder">
+                    <label>{{$t("BOLT 11 Invoice")}}</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">
+                    <label>{{$t("Node Info")}}</label>
+                    <div class="inputWithIcon _copyInput">
+                        <input type="text" class="checkoutTextbox" v-bind:value="srvModel.peerInfo" readonly="readonly"/>
+                        <img v-bind:src="srvModel.cryptoImage"/>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>          
+</script>
+
+<script type="text/x-template" id="lightning-method-checkout-header-template">
+    <div class="payment-tabs">
+        <div class="payment-tabs__tab " id="scan-tab" v-on:click="switchTab('scan')"  v-bind:class="{ 'active': currentTab == 'scan'}" >
+            <span>{{$t("Scan")}}</span>
+        </div>
+        <div class="payment-tabs__tab" id="copy-tab" v-on:click="switchTab('copy')"  v-bind:class="{ 'active': currentTab == 'copy'}" >
+            <span>{{$t("Copy")}}</span>
+        </div>
+        <div id="tabsSlider" class="payment-tabs__slider"  v-bind:class="['slide-'+currentTab]"></div>
+    </div>
+</script>
+
+<script type="text/javascript">
+    Vue.component('LightningLikeMethodCheckout',
+        {
+            props: ["srvModel"],
+            template: "#lightning-method-checkout-template",
+            components: {
+                qrcode: VueQrcode
+            },
+            data: function() {
+                return {
+                    currentLightningDisplay: "bolt11",
+                    selectedThirdPartyProcessor: "",
+                    currentTab: "scan"
+                }
+            },
+            computed: {
+                scanDisplayQr: function() {
+                    if (this.currentLightningDisplay === "node") {
+                        return this.srvModel.peerInfo;
+                    }
+                    return this.srvModel.invoiceBitcoinUrlQR;
+                }
+            },
+            methods: {
+                toggleLightningData: function(display) {
+                    this.currentLightningDisplay = display;
+                }
+            },
+            mounted: function() {
+                var self = this;
+                eventBus.$on("tab-switched",
+                    function(tab) {
+                        self.currentTab = tab;
+            });
+        }
+    });
+
+    Vue.component('LightningLikeMethodCheckoutHeader', {
+        props: ["srvModel"],
+        template: "#lightning-method-checkout-header-template",
+        data: function() {
+            return {
+                currentTab: "scan"
+            };
+        },
+        methods: {
+            switchTab: function(tab) {
+                this.currentTab = tab;
+                eventBus.$emit("tab-switched", tab);
+            }
+        }
+    });
+
+    $(document).ready(function() {
+        // 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 + $(window).scrollTop();
+            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();
+            }
+        }
+        // Disable enter key
+        $(document).keypress(
+            function(event) {
+                if (event.which === '13') {
+                    event.preventDefault();
+                }
+            }
+        );
+    });
+</script>

BTCPayServer/Views/Shared/Lightning/LightningLikeMethodCheckoutNoScript.cshtml

@@ -0,0 +1,9 @@
+@model PaymentModel
+<div>
+    <p>To complete payment, please send <b>@Model.BtcDue @Model.CryptoCode</b> to <b style="word-break: break-word;">@Model.BtcAddress</b></p>
+    <p>Time remaining: @Model.TimeLeft</p>
+    <p>
+        <a href="@Model.InvoiceBitcoinUrl" style="word-break: break-word;">@Model.InvoiceBitcoinUrl</a>
+    </p>
+    <p>Peer Info: <b>@Model.PeerInfo</b></p>
+</div>