From 4ef19e19cc411dd7bde848a0918ff292bcd1ec87 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Sat, 25 Feb 2023 14:28:02 +0100
Subject: [PATCH] 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
---
 .../Views/UIInvoice/CheckoutV2.cshtml         | 89 ++++++++++---------
 BTCPayServer/wwwroot/checkout-v2/checkout.css |  1 +
 BTCPayServer/wwwroot/checkout-v2/checkout.js  |  8 +-
 3 files changed, 52 insertions(+), 46 deletions(-)
diff --git a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
index ca67f7f68..89e3b58f9 100644
--- a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
+++ b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
@@ -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 }));
diff --git a/BTCPayServer/wwwroot/checkout-v2/checkout.css b/BTCPayServer/wwwroot/checkout-v2/checkout.css
index a6b2a05d9..e18695901 100644
--- a/BTCPayServer/wwwroot/checkout-v2/checkout.css
+++ b/BTCPayServer/wwwroot/checkout-v2/checkout.css
@@ -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);
diff --git a/BTCPayServer/wwwroot/checkout-v2/checkout.js b/BTCPayServer/wwwroot/checkout-v2/checkout.js
index cb323a7c3..226332826 100644
--- a/BTCPayServer/wwwroot/checkout-v2/checkout.js
+++ b/BTCPayServer/wwwroot/checkout-v2/checkout.js
@@ -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;
