Checkout v2: Minor UI updates (#4734)

* Checkout v2: Minor copy change

* Allow copying of invoice ID and order ID on results page

* Add copy icons for payment details on results view

* Add missing powered by class to store footers
This commit is contained in:
d11n 2023-03-08 13:39:03 +01:00 committed by GitHub
parent d6e5ee2851
commit 397ca6ef0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 36 additions and 34 deletions

View file

@ -270,7 +270,7 @@
</b-modal> </b-modal>
<footer class="store-footer"> <footer class="store-footer">
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -320,7 +320,7 @@
</button> </button>
<footer class="store-footer"> <footer class="store-footer">
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -125,7 +125,7 @@
<partial name="PointOfSale/Public/VueLight" model="Model" /> <partial name="PointOfSale/Public/VueLight" model="Model" />
} }
<footer class="store-footer"> <footer class="store-footer">
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -128,7 +128,7 @@ else
</div> </div>
</main> </main>
<footer class="store-footer"> <footer class="store-footer">
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -84,7 +84,7 @@
</div> </div>
</main> </main>
<footer class="store-footer"> <footer class="store-footer">
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -47,7 +47,7 @@
</div> </div>
</main> </main>
<footer class="store-footer"> <footer class="store-footer">
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -107,18 +107,20 @@
<vc:icon symbol="payment-complete"/> <vc:icon symbol="payment-complete"/>
</span> </span>
<h4 v-t="'invoice_paid'"></h4> <h4 v-t="'invoice_paid'"></h4>
<div id="PaymentDetails" class="payment-details">
<dl class="mb-0"> <dl class="mb-0">
<div> <div>
<dt v-t="'invoice_id'"></dt> <dt v-t="'invoice_id'"></dt>
<dd v-text="srvModel.invoiceId"></dd> <dd v-text="srvModel.invoiceId" :data-clipboard="srvModel.invoiceId" :data-clipboard-confirm="$t('copy_confirm')"></dd>
</div> </div>
<div v-if="srvModel.orderId"> <div v-if="srvModel.orderId">
<dt v-t="'order_id'"></dt> <dt v-t="'order_id'"></dt>
<dd v-text="srvModel.orderId"></dd> <dd v-text="srvModel.orderId" :data-clipboard="srvModel.orderId" :data-clipboard-confirm="$t('copy_confirm')"></dd>
</div> </div>
</dl> </dl>
<payment-details :srv-model="srvModel" :is-active="isActive" class="mb-5"></payment-details> <payment-details :srv-model="srvModel" :is-active="isActive" class="mb-5"></payment-details>
</div> </div>
</div>
<div class="buttons"> <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="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-html="$t('return_to_store', { 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>
@ -131,18 +133,18 @@
<vc:icon symbol="invoice-expired"/> <vc:icon symbol="invoice-expired"/>
</span> </span>
<h4 v-t="'invoice_expired'"></h4> <h4 v-t="'invoice_expired'"></h4>
<div id="PaymentDetails" class="payment-details">
<dl class="mb-0"> <dl class="mb-0">
<div> <div>
<dt v-t="'invoice_id'"></dt> <dt v-t="'invoice_id'"></dt>
<dd v-text="srvModel.invoiceId"></dd> <dd v-text="srvModel.invoiceId" :data-clipboard="srvModel.invoiceId" :data-clipboard-confirm="$t('copy_confirm')"></dd>
</div> </div>
<div v-if="srvModel.orderId"> <div v-if="srvModel.orderId">
<dt v-t="'order_id'"></dt> <dt v-t="'order_id'"></dt>
<dd v-text="srvModel.orderId"></dd> <dd v-text="srvModel.orderId" :data-clipboard="srvModel.orderId" :data-clipboard-confirm="$t('copy_confirm')"></dd>
</div> </div>
</dl> </dl>
<div id="PaymentDetails" class="payment-details" v-collapsible="displayPaymentDetails"> <payment-details :srv-model="srvModel" :is-active="isActive" v-collapsible="displayPaymentDetails"></payment-details>
<payment-details :srv-model="srvModel" :is-active="isActive"></payment-details>
</div> </div>
<button class="d-flex align-items-center gap-1 btn btn-link payment-details-button" type="button" :aria-expanded="displayPaymentDetails ? 'true' : 'false'" v-on:click="displayPaymentDetails = !displayPaymentDetails"> <button class="d-flex align-items-center gap-1 btn btn-link payment-details-button" type="button" :aria-expanded="displayPaymentDetails ? 'true' : 'false'" v-on:click="displayPaymentDetails = !displayPaymentDetails">
<span class="fw-semibold" v-t="'view_details'"></span> <span class="fw-semibold" v-t="'view_details'"></span>

View file

@ -168,7 +168,7 @@
Admin details Admin details
</a> </a>
</p> </p>
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -375,7 +375,7 @@
Edit payment request Edit payment request
</a> </a>
</p> </p>
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -215,7 +215,7 @@
Edit pull payment Edit pull payment
</a> </a>
</p> </p>
<a href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener"> <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
Powered by <partial name="_StoreFooterLogo" /> Powered by <partial name="_StoreFooterLogo" />
</a> </a>
</footer> </footer>

View file

@ -28,7 +28,7 @@
"payment_link": "Payment Link", "payment_link": "Payment Link",
"invoice_paid": "Invoice Paid", "invoice_paid": "Invoice Paid",
"invoice_expired": "Invoice Expired", "invoice_expired": "Invoice Expired",
"invoice_expired_body": "An invoice is only valid for {{minutes}} minutes.\n\nReturn to {{storeName}} if you like to resubmit a payment.", "invoice_expired_body": "An invoice is only valid for {{minutes}} minutes.\n\nReturn to {{storeName}} if you would like to resubmit a payment.",
"view_receipt": "View receipt", "view_receipt": "View receipt",
"return_to_store": "Return to {{storeName}}", "return_to_store": "Return to {{storeName}}",
"copy": "Copy", "copy": "Copy",