mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2024-11-19 01:43:50 +01:00
Checkout v2 fixes (#4705)
* Prevent duplicate titles on invoice view * Fix text display of escaped values Fixes #4696. * Fix payment details re-rendering Closes #4683. Closes #4684. * Cleanup
This commit is contained in:
d11n
GitHub
parent
ff58301729
commit
4ef19e19cc
@ -38,7 +38,7 @@
|
||||
<partial name="LayoutHeadStoreBranding" model="@(Model.BrandColor, Model.CssFileId, "", "")" />
|
||||
</head>
|
||||
<body class="min-vh-100">
|
||||
<div id="Checkout-v2" class="public-page-wrap" v-cloak v-waitForT>
|
||||
<div id="Checkout-v2" class="public-page-wrap" v-cloak>
|
||||
<partial name="_StoreHeader" model="(Model.StoreName, Model.LogoFileId)" />
|
||||
<main class="shadow-lg">
|
||||
<nav v-if="isModal">
|
||||
@ -47,14 +47,17 @@
|
||||
</button>
|
||||
</nav>
|
||||
<section id="payment" v-if="isActive">
|
||||
<h5 class="text-center mt-1 mb-3 fw-semibold" v-if="srvModel.itemDesc" v-text="srvModel.itemDesc">@Model.ItemDesc</h5>
|
||||
@if (!string.IsNullOrEmpty(Model.ItemDesc) && Model.ItemDesc != Model.StoreName)
|
||||
{
|
||||
<h5 class="text-center mt-1 mb-3 fw-semibold" v-if="srvModel.itemDesc" v-text="srvModel.itemDesc">@Model.ItemDesc</h5>
|
||||
}
|
||||
@if (Model.IsUnsetTopUp)
|
||||
{
|
||||
<h2 id="AmountDue" class="text-center" v-t="'any_amount'"></h2>
|
||||
<h2 id="AmountDue" class="mt-1 text-center" v-t="'any_amount'"></h2>
|
||||
}
|
||||
else
|
||||
{
|
||||
<h2 id="AmountDue" class="text-center" v-text="`${srvModel.btcDue} ${srvModel.cryptoCode}`" :data-clipboard="srvModel.btcDue" :data-clipboard-confirm="$t('copy_confirm')" :data-amount-due="srvModel.btcDue">@Model.BtcDue @Model.CryptoCode</h2>
|
||||
<h2 id="AmountDue" class="mt-1 text-center" v-text="`${srvModel.btcDue} ${srvModel.cryptoCode}`" :data-clipboard="srvModel.btcDue" :data-clipboard-confirm="$t('copy_confirm')" :data-amount-due="srvModel.btcDue">@Model.BtcDue @Model.CryptoCode</h2>
|
||||
}
|
||||
<div id="PaymentInfo" class="info mt-3 mb-2" v-collapsible="showInfo">
|
||||
<div>
|
||||
@ -117,7 +120,7 @@
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a v-if="srvModel.receiptLink" class="btn btn-primary rounded-pill w-100" :href="srvModel.receiptLink" :target="isModal ? '_top' : null" v-t="'view_receipt'" id="ReceiptLink"></a>
|
||||
<a v-if="storeLink" class="btn btn-secondary rounded-pill w-100" :href="storeLink" :target="isModal ? '_top' : null" v-t="{ path: 'return_to_store', args: { storeName: srvModel.storeName }}" id="StoreLink"></a>
|
||||
<a v-if="storeLink" class="btn btn-secondary rounded-pill w-100" :href="storeLink" :target="isModal ? '_top' : null" v-html="$t('return_to_store', { storeName: srvModel.storeName })" id="StoreLink"></a>
|
||||
<button v-else-if="isModal" class="btn btn-secondary rounded-pill w-100" v-on:click="close" v-t="'Close'"></button>
|
||||
</div>
|
||||
</div>
|
||||
@ -147,7 +150,7 @@
|
||||
<p class="text-center mt-3" v-html="replaceNewlines($t('invoice_expired_body', { storeName: srvModel.storeName, minutes: @Model.MaxTimeMinutes }))"></p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a v-if="storeLink" class="btn btn-primary rounded-pill w-100" :href="storeLink" :target="isModal ? '_top' : null" v-t="{ path: 'return_to_store', args: { storeName: srvModel.storeName }}" id="StoreLink"></a>
|
||||
<a v-if="storeLink" class="btn btn-primary rounded-pill w-100" :href="storeLink" :target="isModal ? '_top' : null" v-html="$t('return_to_store', { storeName: srvModel.storeName })" id="StoreLink"></a>
|
||||
<button v-else-if="isModal" class="btn btn-primary rounded-pill w-100" v-on:click="close" v-t="'Close'"></button>
|
||||
</div>
|
||||
</div>
|
||||
@ -176,42 +179,44 @@
|
||||
</p>
|
||||
</div>
|
||||
</noscript>
|
||||
<dl id="payment-details" v-cloak>
|
||||
<div v-if="orderAmount > 0">
|
||||
<dt v-t="'total_price'"></dt>
|
||||
<dd :data-clipboard="srvModel.orderAmount" :data-clipboard-confirm="$t('copy_confirm')">{{srvModel.orderAmount}} {{ srvModel.cryptoCode }}</dd>
|
||||
</div>
|
||||
<div v-if="orderAmount > 0 && srvModel.orderAmountFiat">
|
||||
<dt v-t="'total_fiat'"></dt>
|
||||
<dd :data-clipboard="srvModel.orderAmountFiat" :data-clipboard-confirm="$t('copy_confirm')">{{srvModel.orderAmountFiat}}</dd>
|
||||
</div>
|
||||
<div v-if="srvModel.rate && srvModel.cryptoCode">
|
||||
<dt v-t="'exchange_rate'"></dt>
|
||||
<dd :data-clipboard="srvModel.rate" :data-clipboard-confirm="$t('copy_confirm')">
|
||||
<template v-if="srvModel.cryptoCodeSrv === 'Sats'">1 Sat = {{ srvModel.rate }}</template>
|
||||
<template v-else>1 {{ srvModel.cryptoCodeSrv }} = {{ srvModel.rate }}</template>
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="srvModel.networkFee">
|
||||
<dt v-t="'network_cost'"></dt>
|
||||
<dd :data-clipboard="srvModel.networkFee" :data-clipboard-confirm="$t('copy_confirm')">
|
||||
<div v-if="srvModel.txCountForFee > 0" v-t="{ path: 'tx_count', args: { count: srvModel.txCount } }"></div>
|
||||
<div v-text="`${srvModel.networkFee} ${srvModel.cryptoCode}`"></div>
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="btcPaid > 0">
|
||||
<dt v-t="'amount_paid'"></dt>
|
||||
<dd :data-clipboard="srvModel.btcPaid" :data-clipboard-confirm="$t('copy_confirm')" v-text="`${srvModel.btcPaid} ${srvModel.cryptoCode}`"></dd>
|
||||
</div>
|
||||
<div v-if="btcDue > 0">
|
||||
<dt v-t="'amount_due'"></dt>
|
||||
<dd :data-clipboard="srvModel.btcDue" :data-clipboard-confirm="$t('copy_confirm')" v-text="`${srvModel.btcDue} ${srvModel.cryptoCode}`"></dd>
|
||||
</div>
|
||||
<div v-if="showRecommendedFee">
|
||||
<dt v-t="'recommended_fee'"></dt>
|
||||
<dd :data-clipboard="srvModel.feeRate" :data-clipboard-confirm="$t('copy_confirm')" v-t="{ path: 'fee_rate', args: { feeRate: srvModel.feeRate } }"></dd>
|
||||
</div>
|
||||
</dl>
|
||||
<script type="text/x-template" id="payment-details">
|
||||
<dl>
|
||||
<div v-if="orderAmount > 0">
|
||||
<dt v-t="'total_price'"></dt>
|
||||
<dd :data-clipboard="srvModel.orderAmount" :data-clipboard-confirm="$t('copy_confirm')">{{srvModel.orderAmount}} {{ srvModel.cryptoCode }}</dd>
|
||||
</div>
|
||||
<div v-if="orderAmount > 0 && srvModel.orderAmountFiat">
|
||||
<dt v-t="'total_fiat'"></dt>
|
||||
<dd :data-clipboard="srvModel.orderAmountFiat" :data-clipboard-confirm="$t('copy_confirm')">{{srvModel.orderAmountFiat}}</dd>
|
||||
</div>
|
||||
<div v-if="srvModel.rate && srvModel.cryptoCode">
|
||||
<dt v-t="'exchange_rate'"></dt>
|
||||
<dd :data-clipboard="srvModel.rate" :data-clipboard-confirm="$t('copy_confirm')">
|
||||
<template v-if="srvModel.cryptoCodeSrv === 'Sats'">1 Sat = {{ srvModel.rate }}</template>
|
||||
<template v-else>1 {{ srvModel.cryptoCodeSrv }} = {{ srvModel.rate }}</template>
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="srvModel.networkFee">
|
||||
<dt v-t="'network_cost'"></dt>
|
||||
<dd :data-clipboard="srvModel.networkFee" :data-clipboard-confirm="$t('copy_confirm')">
|
||||
<div v-if="srvModel.txCountForFee > 0" v-t="{ path: 'tx_count', args: { count: srvModel.txCount } }"></div>
|
||||
<div v-text="`${srvModel.networkFee} ${srvModel.cryptoCode}`"></div>
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="btcPaid > 0">
|
||||
<dt v-t="'amount_paid'"></dt>
|
||||
<dd :data-clipboard="srvModel.btcPaid" :data-clipboard-confirm="$t('copy_confirm')" v-text="`${srvModel.btcPaid} ${srvModel.cryptoCode}`"></dd>
|
||||
</div>
|
||||
<div v-if="btcDue > 0">
|
||||
<dt v-t="'amount_due'"></dt>
|
||||
<dd :data-clipboard="srvModel.btcDue" :data-clipboard-confirm="$t('copy_confirm')" v-text="`${srvModel.btcDue} ${srvModel.cryptoCode}`"></dd>
|
||||
</div>
|
||||
<div v-if="showRecommendedFee">
|
||||
<dt v-t="'recommended_fee'"></dt>
|
||||
<dd :data-clipboard="srvModel.feeRate" :data-clipboard-confirm="$t('copy_confirm')" v-t="{ path: 'fee_rate', args: { feeRate: srvModel.feeRate } }"></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</script>
|
||||
<script>
|
||||
const i18nUrl = @Safe.Json($"{Model.RootPath}locales/checkout/{{{{lng}}}}.json?v={Env.Version}");
|
||||
const statusUrl = @Safe.Json(Url.Action("GetStatus", new { invoiceId = Model.InvoiceId }));
|
||||
|
||||
@ -78,6 +78,7 @@ section dl > div dd {
|
||||
text-align: right;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
max-width: 62.5%;
|
||||
}
|
||||
.info {
|
||||
color: var(--btcpay-neutral-700);
|
||||
|
||||
@ -55,8 +55,8 @@ Vue.use(VueI18next);
|
||||
const i18n = new VueI18next(i18next);
|
||||
const eventBus = new Vue();
|
||||
|
||||
const PaymentDetails = Vue.component('payment-details', {
|
||||
el: '#payment-details',
|
||||
const PaymentDetails = {
|
||||
template: '#payment-details',
|
||||
props: {
|
||||
srvModel: Object,
|
||||
isActive: Boolean
|
||||
@ -75,14 +75,14 @@ const PaymentDetails = Vue.component('payment-details', {
|
||||
return this.isActive && this.srvModel.showRecommendedFee && this.srvModel.feeRate;
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initApp() {
|
||||
return new Vue({
|
||||
i18n,
|
||||
el: '#Checkout-v2',
|
||||
components: {
|
||||
PaymentDetails
|
||||
'payment-details': PaymentDetails,
|
||||
},
|
||||
data () {
|
||||
const srvModel = initialSrvModel;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user