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,17 +107,19 @@
<vc:icon symbol="payment-complete"/> <vc:icon symbol="payment-complete"/>
</span> </span>
<h4 v-t="'invoice_paid'"></h4> <h4 v-t="'invoice_paid'"></h4>
<dl class="mb-0"> <div id="PaymentDetails" class="payment-details">
<div> <dl class="mb-0">
<dt v-t="'invoice_id'"></dt> <div>
<dd v-text="srvModel.invoiceId"></dd> <dt v-t="'invoice_id'"></dt>
</div> <dd v-text="srvModel.invoiceId" :data-clipboard="srvModel.invoiceId" :data-clipboard-confirm="$t('copy_confirm')"></dd>
<div v-if="srvModel.orderId"> </div>
<dt v-t="'order_id'"></dt> <div v-if="srvModel.orderId">
<dd v-text="srvModel.orderId"></dd> <dt v-t="'order_id'"></dt>
</div> <dd v-text="srvModel.orderId" :data-clipboard="srvModel.orderId" :data-clipboard-confirm="$t('copy_confirm')"></dd>
</dl> </div>
<payment-details :srv-model="srvModel" :is-active="isActive" class="mb-5"></payment-details> </dl>
<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>
@ -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>
<dl class="mb-0"> <div id="PaymentDetails" class="payment-details">
<div> <dl class="mb-0">
<dt v-t="'invoice_id'"></dt> <div>
<dd v-text="srvModel.invoiceId"></dd> <dt v-t="'invoice_id'"></dt>
</div> <dd v-text="srvModel.invoiceId" :data-clipboard="srvModel.invoiceId" :data-clipboard-confirm="$t('copy_confirm')"></dd>
<div v-if="srvModel.orderId"> </div>
<dt v-t="'order_id'"></dt> <div v-if="srvModel.orderId">
<dd v-text="srvModel.orderId"></dd> <dt v-t="'order_id'"></dt>
</div> <dd v-text="srvModel.orderId" :data-clipboard="srvModel.orderId" :data-clipboard-confirm="$t('copy_confirm')"></dd>
</dl> </div>
<div id="PaymentDetails" class="payment-details" v-collapsible="displayPaymentDetails"> </dl>
<payment-details :srv-model="srvModel" :is-active="isActive"></payment-details> <payment-details :srv-model="srvModel" :is-active="isActive" v-collapsible="displayPaymentDetails"></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,11 +28,11 @@
"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",
"copy_confirm": "Copied", "copy_confirm": "Copied",
"powered_by": "Powered by", "powered_by": "Powered by",
"conversion_body": "This service is provided by 3rd party. Please keep in mind that we have no control over how providers will forward your funds. Invoice will only be marked paid once funds are received on {{cryptoCode}} Blockchain." "conversion_body": "This service is provided by 3rd party. Please keep in mind that we have no control over how providers will forward your funds. Invoice will only be marked paid once funds are received on {{cryptoCode}} Blockchain."
} }