btcpayserver/BTCPayServer/Views/Invoice/Checkout-Body.cshtml

@model PaymentModel

<div class="top-header">
    <div class="header">
        <div class="header__icon">
            @if (Model.CustomLogoLink != null)
            {
                <img class="header__icon__img" src="@Model.CustomLogoLink" height="40">
            }
            else
            {
                <img class="header__icon__img" src="~/img/logo-white.png" height="40">
            }
        </div>
        <div class="close-icon close-action">
            &#10006;
        </div>
    </div>
    <div class="timer-row">
        <div class="timer-row__progress-bar" style="width: 0%;"></div>
        <div class="timer-row__spinner">
            <partial name="Checkout-Spinner" />
        </div>
        <div class="timer-row__message">
            <span v-if="srvModel.status === 'expired' || srvModel.status === 'invalid'">
                {{$t("Invoice expired")}}
            </span>
            <span v-else-if="expiringSoon">
                {{$t("Invoice expiring soon...")}}
            </span>
            <span v-else>
                {{$t("Awaiting Payment...")}}
            </span>
        </div>
        <div class="timer-row__time-left">@Model.TimeLeft</div>
    </div>
</div>
<div class="order-details">
    <div class="currency-selection">
        <div class="single-item-order__left">
            <div style="font-weight: 600;">
                {{$t("Pay with")}}
            </div>
        </div>
        <div class="single-item-order__right">
            @if (Model.AvailableCryptos.Count > 1)
            {
                <div class="paywithRowRight cursorPointer" onclick="openPaymentMethodDialog()">
                    <span class="payment__currencies ">
                        <img v-bind:src="srvModel.cryptoImage" />
                        <span>{{srvModel.paymentMethodName}} ({{srvModel.cryptoCodeSrv}})</span>
                        <span v-show="srvModel.isLightning">&#9889;</span>
                        <span class="clickable_indicator fa fa-angle-right"></span>
                    </span>
                </div>
                <div id="vexPopupDialog">
                    <ul class="vexmenu">
                        @foreach (var crypto in Model.AvailableCryptos)
                        {
                            <li class="vexmenuitem">
                                <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
                                    <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
                                    @crypto.PaymentMethodName
                                    @(crypto.IsLightning ? Html.Raw("&#9889;") : null)
                                    <span>@crypto.CryptoCode</span>
                                </a>
                            </li>
                        }
                    </ul>
                </div>
            }
            else
            {
                <div class="payment__currencies_noborder">
                    <img v-bind:src="srvModel.cryptoImage" />
                    <span>{{srvModel.paymentMethodName}} ({{srvModel.cryptoCodeSrv}})</span>
                    <span v-show="srvModel.isLightning">&#9889;</span>
                </div>
            }
            <div class="payment__spinner">
                <partial name="Checkout-Spinner" />
            </div>
        </div>
    </div>

    <div class="single-item-order buyerTotalLine">
        <div class="single-item-order__left">
            <div class="single-item-order__left__name">
                {{ srvModel.storeName }}
            </div>
            <div class="single-item-order__left__description">
                {{ srvModel.itemDesc }}
            </div>
        </div>
        <div class="single-item-order__right">
            <div class="single-item-order__right__btc-price" v-if="srvModel.status === 'paid'">
                <span>{{ srvModel.btcPaid }} {{ srvModel.cryptoCode }}</span>
            </div>
            <div class="single-item-order__right__btc-price" v-else>
                <span>{{ srvModel.btcDue }} {{ srvModel.cryptoCode }}</span>
            </div>

            <div class="single-item-order__right__ex-rate" v-if="srvModel.orderAmountFiat">
                1 {{ srvModel.cryptoCodeSrv }} = {{ srvModel.rate }}
            </div>
        </div>

        <span class="fa fa-angle-double-down"></span>
        <span class="fa fa-angle-double-up"></span>
    </div>
    <line-items>
        <div class="extraPayment" v-if="srvModel.status === 'new' && srvModel.txCount > 1">
            {{$t("NotPaid_ExtraTransaction")}}
        </div>
        <div class="line-items">
            <div class="line-items__item">
                <div class="line-items__item__label">{{$t("Order Amount")}}</div>
                <div class="line-items__item__value">{{srvModel.orderAmount}} {{ srvModel.cryptoCode }}</div>
            </div>
            <div class="line-items__item line-items_fiatvalue" v-if="srvModel.orderAmountFiat">
                <div class="line-items__item__label">&nbsp;</div>
                <div class="line-items__item__value single-item-order__right__ex-rate">
                    {{srvModel.orderAmountFiat}}
                </div>
            </div>
            <div class="line-items__item" v-show="srvModel.networkFee > 0">
                <div class="line-items__item__label">
                    <span>{{$t("Network Cost")}}</span>
                </div>
                <div class="line-items__item__value">
                    <span v-if="srvModel.IsMultiCurrency">
                        {{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
                    </span>
                    <span v-else>
                        {{$t("txCount", {count: srvModel.txCount})}} x {{ srvModel.networkFee }} {{ srvModel.cryptoCode }}
                    </span>
                </div>
            </div>
            <div class="line-items__item">
                <div class="line-items__item__label">
                    <span>{{$t("Already Paid")}}</span>
                </div>
                <div class="line-items__item__value">-{{srvModel.btcPaid }} {{ srvModel.cryptoCode }}</div>
            </div>
            <div class="line-items__item line-items__item--total">
                <div class="line-items__item__label">{{$t("Due")}}</div>
                <div class="line-items__item__value">{{srvModel.btcDue}} {{ srvModel.cryptoCode }}</div>
            </div>
        </div>
    </line-items>
    <div class="payment-tabs">
        <div class="payment-tabs__tab active" id="scan-tab">
            <span>{{$t("Scan")}}</span>
        </div>
        <div class="payment-tabs__tab" id="copy-tab">
            <span>{{$t("Copy")}}</span>
        </div>
        @if (Model.ChangellyEnabled || Model.CoinSwitchEnabled)
        {
            <div class="payment-tabs__tab" id="altcoins-tab">
                <span>{{$t("Conversion")}}</span>
            </div>
            <div id="tabsSlider" class="payment-tabs__slider three-tabs"></div>
        }
        else
        {
            <div id="tabsSlider" class="payment-tabs__slider"></div>
        }
    </div>
</div>

<div class="payment-box">
    <div class="bp-view payment manual-flow enter-contact-email active" id="emailAddressView">
        <form class="manual__step-one refund-address-form contact-email-form" id="emailAddressForm" name="emailAddressForm" novalidate="">
            <div class="manual__step-one__header">
                <span>{{$t("Contact and Refund Email")}}</span>
            </div>
            <div class="manual__step-one__instructions">
                <span class="initial-label">
                    <span>{{$t("Contact_Body")}}</span>
                </span>
                <span class="submission-error-label">{{$t("Please enter a valid email address")}}</span>
            </div>
            <div class="input-wrapper">
                <input class="bp-input email-input ng-pristine ng-invalid ng-touched" id="emailAddressFormInput" v-bind:placeholder="$t('Your email')" type="email">
                <bp-loading-button>
                    <button type="submit" class="action-button" style="margin-top: 15px;">
                        <span class="button-text">{{$t("Continue")}}</span>
                        <div class="loader-wrapper">
                            <partial name="Checkout-Spinner" />
                        </div>
                    </button>
                </bp-loading-button>
            </div>
        </form>
    </div>
    <div class="bp-view payment scan" id="scan">
        <div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null || !scanDisplayQr }">
            <div class="btnGroupLnd">
                <button onclick="lndToggleBolt11()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 0 }"
                        v-bind:title="$t('BOLT 11 Invoice')">
                    {{$t("BOLT 11 Invoice")}}
                </button>
                <button onclick="lndToggleNode()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 1 }"
                        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: 0, 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="scanDisplayQr">
            <a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">
                <span>{{$t("Open in wallet")}}</span>
            </a>
        </div>
    </div>

    <div class="bp-view payment manual-flow" id="copy">
        <div class="manual__step-two__instructions">
            <span i18n="">{{$t("CompletePay_Body", srvModel)}}</span>
        </div>
        <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">
            <div class="copySectionBox bottomBorder">
                <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">
                <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>
        </nav>
    </div>
    @if (Model.ChangellyEnabled || Model.CoinSwitchEnabled)
    {
        <div id="altcoins" class="bp-view payment manual-flow">
            <nav v-if="srvModel.isLightning">
                <div class="manual__step-two__instructions">
                    <span>
                        {{$t("ConversionTab_Lightning")}}
                    </span>
                </div>
            </nav>
            <nav v-else>
                <div class="manual__step-two__instructions">
                    <span>
                        {{$t("ConversionTab_BodyTop", srvModel)}}
                        <br /><br />
                        {{$t("ConversionTab_BodyDesc", srvModel)}}
                    </span>
                </div>
                <center>        
                    
                    @if (Model.CoinSwitchEnabled && Model.ChangellyEnabled)
                    {
                        <template v-if="!selectedThirdPartyProcessor">
                            <button v-on:click="selectedThirdPartyProcessor = 'coinswitch'" class="action-button">
                                {{$t("Pay with CoinSwitch")}}
                            </button>
                            <button v-on:click="selectedThirdPartyProcessor = 'changelly'" class="action-button">
                                {{$t("Pay with Changelly")}}
                            </button>
                        </template>
                    }
                    
                    @if (Model.CoinSwitchEnabled)
                    {
                        <coinswitch inline-template
                                    v-if="!srvModel.changellyEnabled || selectedThirdPartyProcessor === 'coinswitch'"
                                    :mode="srvModel.coinSwitchMode"
                                    :merchant-id="srvModel.coinSwitchMerchantId"
                                    :to-currency="srvModel.paymentMethodId"
                                    :to-currency-due="coinswitchAmountDue"
                                    :autoload="selectedThirdPartyProcessor === 'coinswitch'"
                                    :to-currency-address="srvModel.btcAddress">
                            <div>
                                <a v-on:click="openDialog($event)" :href="url" class="action-button" v-show="url && !opened">
                                    {{$t("Pay with CoinSwitch")}}
                                </a>
                                
                            @if (Model.ChangellyEnabled)
                            {
                                <button v-show="!opened" v-on:click="$parent.selectedThirdPartyProcessor = 'changelly'" class="btn-link mt-2">
                                    {{$t("Pay with Changelly")}}
                                </button>
                            }
                            
                                <iframe  
                                    v-if="showInlineIFrame"
                                    v-on:load="onLoadIframe"
                                style="height: 100%; position: fixed; top: 0; width: 100%; left: 0;"
                                sandbox="allow-scripts allow-forms allow-popups allow-same-origin"
                                :src="url"></iframe>

                            </div>

                        </coinswitch>
                    }
                    
                    @if(Model.ChangellyEnabled){
                    
                        <changelly inline-template
                                   v-if="!srvModel.coinSwitchEnabled || selectedThirdPartyProcessor === 'changelly'"
                                   :merchant-id="srvModel.changellyMerchantId"
                                   :store-id="srvModel.storeId"
                                   :to-currency="srvModel.paymentMethodId"
                                   :to-currency-due="srvModel.changellyAmountDue"
                                   :to-currency-address="srvModel.btcAddress">
                            <div class="changelly-component">
                                <div class="changelly-component-dropdown-holder" v-show="prettyDropdownInstance">
                                    <select 
                                        v-model="selectedFromCurrency"
                                        :disabled="isLoading"
                                        v-on:change="onCurrencyChange($event)"
                                        ref="changellyCurrenciesDropdown">
                                        <option value="">{{$t("ConversionTab_CurrencyList_Select_Option")}}</option>
                                        <option v-for="currency of currencies" 
                                                :data-prefix="'<img src=\''+currency.image+'\'/>'"
                                                :value="currency.name">
                                            {{currency.fullName}}
                                        </option>
                                    </select>
                                </div>
                                <a  v-on:click="openDialog($event)" :href="url" class="action-button"  v-show="url">
                                    {{$t("Pay with Changelly")}}
                                </a>
                                @if (Model.CoinSwitchEnabled)
                                {
                                    <button v-on:click="$parent.selectedThirdPartyProcessor = 'coinswitch'" class="btn-link mt-2">
                                        {{$t("Pay with CoinSwitch")}}
                                    </button>
                                }
                                <button class="retry-button" v-if="calculateError" v-on:click="retry('calculateAmount')">
                                    {{$t("ConversionTab_CalculateAmount_Error")}}
                                </button>
                                <button class="retry-button" v-if="currenciesError" v-on:click="retry('loadCurrencies')">
                                    {{$t("ConversionTab_LoadCurrencies_Error")}}
                                </button>
                                <div v-show="isLoading" class="general__spinner">
                                    <partial name="Checkout-Spinner"/>
                                </div>
                            </div>
                        </changelly>
                    }
                </center>
            </nav>
        </div>
    }

    <div class="bp-view" id="paid">
        <div class="status-block">
            <div class="success-block">
                <div class="status-icon">
                    <div class="status-icon__wrapper">
                        <div class="inner-wrapper">
                            <div class="status-icon__wrapper__icon">
                                <img src="~/imlegacy/checkmark.svg">
                            </div>
                            <div class="status-icon__wrapper__outline"></div>
                        </div>
                    </div>
                </div>
                <div class="success-message">{{$t("This invoice has been paid")}}</div>
                <a class="action-button" :href="srvModel.merchantRefLink" v-show="!isModal">
                    <span v-html="$t('Return to StoreName', srvModel)"></span>
                </a>
                <button class="action-button close-action" v-show="isModal">
                    <span v-html="$t('Close')">{{$t("Return to StoreName", srvModel)}}</span>
                </button>
            </div>
        </div>
        <div class="button-wrapper refund-address-form-container" id="refund-overpayment-button">
        </div>
    </div>

    <div class="bp-view expired" id="archived">
        <div class="expired-icon">
            <img src="~/imlegacy/archived.svg">
        </div>
        <div class="archived__message">
            <div class="archived__message__header">
                <span>{{$t("This invoice has been archived")}}</span>
            </div>
            <div>
                <span>{{$t("Archived_Body")}}</span>
            </div>
        </div>
    </div>

    <div class="bp-view expired" id="expired">
        <div>
            <div class="expired__body" style="margin-bottom: 20px;">
                <div class="expired__header">{{$t("What happened?")}}</div>
                <div class="expired__text" i18n="">
                    {{$t("InvoiceExpired_Body_1", {storeName: srvModel.storeName, maxTimeMinutes: @Model.MaxTimeMinutes})}}
                </div>
                <div class="expired__text">
                    {{$t("InvoiceExpired_Body_2")}}
                </div>
                <div class="expired__text">
                    {{$t("InvoiceExpired_Body_3")}}
                </div>
                <div class="expired__text expired__text__smaller">
                    <span class="expired__text__bullet">{{$t("Invoice ID")}}</span>:
                    {{srvModel.invoiceId}}
                    <br />
                    <span class="expired__text__bullet">{{$t("Order ID")}}</span>:
                    {{srvModel.orderId}}
                </div>
            </div>
            <a class="action-button" :href="srvModel.merchantRefLink" v-show="!isModal">
                <span>{{$t("Return to StoreName", srvModel)}}</span>
            </a>
            <button class="action-button close-action" v-show="isModal">
                <span>{{$t("Return to StoreName", srvModel)}}</span>
            </button>
        </div>
    </div>
</div>