btcpayserver/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout.cshtml

@using BTCPayServer.BIP78.Sender
@using NBitcoin
@model BTCPayServer.Models.InvoicingModels.PaymentModel
@inject BTCPayNetworkProvider BTCPayNetworkProvider

<script type="text/x-template" id="bitcoin-method-checkout-template">
    <div>
        <div class="bp-views">
            <div class="bp-view payment scan" id="scan" v-bind:class="{ 'active': currentTab == 'scan'}">
                <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" v-if="!srvModel.isUnsetTopUp">
                    <span v-html="$t('CompletePay_Body', srvModel)"></span>
                </div>
                <div class="copyLabelPopup">
                    <span>{{$t("Copied")}}</span>
                </div>
                <nav class="copyBox">
                    <div class="copySectionBox bottomBorder" v-if="!srvModel.isUnsetTopUp">
                        <label>{{$t("Amount")}}</label>
                        <div class="copyAmountText copy-cursor _copySpan">
                            <span>{{srvModel.btcDue}}</span> {{ srvModel.cryptoCode }}
                        </div>
                    </div>
                    <div class="separatorGem"></div>
                    <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" v-if="srvModel.invoiceBitcoinUrl"></div>
                    <div class="copySectionBox" v-if="srvModel.invoiceBitcoinUrl" :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>
            @await Component.InvokeAsync("UiExtensionPoint" ,  new { location="checkout-bitcoin-post-content", model = Model})
        </div>
        @if (Model.ShowRecommendedFee) {
            <div id="recommended-fee" class="recommended-fee" v-bind:class="{ hide: !srvModel.feeRate }">
                <span v-html="$t('Recommended_Fee', srvModel)"></span>
            </div>
        }
    </div>          
</script>

<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>
        </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>
        @await Component.InvokeAsync("UiExtensionPoint" ,  new { location="checkout-bitcoin-post-tabs", model = Model})
    </div>
</script>

<script type="text/javascript">
    Vue.component('BitcoinLikeMethodCheckout',
        {
            props: ["srvModel"],
            template: "#bitcoin-method-checkout-template",
            components: {
                qrcode: VueQrcode
            },
            data: function() {
                return {
                    currentTab: "scan"
                }
            },
            computed: {
                hasPayjoin: function(){
                    return this.srvModel.invoiceBitcoinUrl.indexOf('@PayjoinClient.BIP21EndpointKey=') === -1;
                },
                scanDisplayQr: function() {
                    return this.srvModel.invoiceBitcoinUrlQR;
                }
            },
            mounted: function() {
                var self = this;
                eventBus.$on("tab-switched",
                    function(tab) {
                        self.currentTab = tab;
            });
        }
    });

    Vue.component('BitcoinLikeMethodCheckoutHeader', {
        props: ["srvModel"],
        template: "#bitcoin-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>