Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-09 03:14:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

update the payment UI with copying functionality and icons

Browse Source
This commit is contained in:
cnohall 2024-09-06 16:19:52 +09:00
parent 6f813fb907
commit 3380378ec6
1 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
resources/views/portal/ninja2020/gateways/blockonomics/pay.blade.php
View File

@ -3,15 +3,18 @@
@section('gateway_content') @section('gateway_content')
<div class="alert alert-failure mb-4" hidden id="errors"></div> <div class="alert alert-failure mb-4" hidden id="errors"></div>
<!-- @include('portal.ninja2020.gateways.includes.payment_details') -->
<div class="blockonomics-payment-wrapper"> <div class="blockonomics-payment-wrapper">
<div class="invoice-number">Invoice #{{$invoice_number}}</div> <div class="invoice-number">Invoice #{{$invoice_number}}</div>
<div>To pay, send exactly this BTC amount</div> <div>To pay, send exactly this BTC amount</div>
<div class="full-width-input" onclick='copyToClipboard("{{$btc_amount}}")'> <div class="full-width-input" onclick='copyToClipboard("{{$btc_amount}}", this)'>
{{$btc_amount}} BTC <span style="color: gray;">≈ {{$amount}} {{$currency}}</span> {{$btc_amount}} BTC <span style="color: gray;">≈ {{$amount}} {{$currency}}</span>
<img src="{{ 'data:image/svg+xml;base64,' . base64_encode('<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 1H3.5C2.4 1 1.5 1.9 1.5 3V17H3.5V3H15.5V1ZM18.5 5H7.5C6.4 5 5.5 5.9 5.5 7V21C5.5 22.1 6.4 23 7.5 23H18.5C19.6 23 20.5 22.1 20.5 21V7C20.5 5.9 19.6 5 18.5 5ZM18.5 21H7.5V7H18.5V21Z" fill="#000"/></svg>') }}" class="icon" alt="Copy Icon">
</div> </div>
<div>To this bitcoin address</div> <div>To this bitcoin address</div>
<input class="full-width-input" id="btcAddress" value="{{$btc_address}}" readonly onclick='copyToClipboard("{{$btc_address}}")'> <div class="input-wrapper" onclick='copyToClipboard("{{$btc_address}}", this)'>
<input class="full-width-input" id="btcAddress" value="{{$btc_address}}" readonly >
<img src="{{ 'data:image/svg+xml;base64,' . base64_encode('<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 1H3.5C2.4 1 1.5 1.9 1.5 3V17H3.5V3H15.5V1ZM18.5 5H7.5C6.4 5 5.5 5.9 5.5 7V21C5.5 22.1 6.4 23 7.5 23H18.5C19.6 23 20.5 22.1 20.5 21V7C20.5 5.9 19.6 5 18.5 5ZM18.5 21H7.5V7H18.5V21Z" fill="#000"/></svg>') }}" class="icon" alt="Copy Icon">
</div>
<div id="countdown"></div> <div id="countdown"></div>
</div> </div>
@ -47,14 +50,37 @@
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000); var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = document.getElementById("countdown").innerHTML = minutes + "m " + seconds + "s ";
"0" + minutes + ":" +
(seconds < 10 ? "0" : "") + seconds + " min";
} }
setInterval(updateCountdown, 1000);
</script>
<script>
function copyToClipboard(text, element) {
const tempInput = document.createElement("input");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
// Update immediately and then every second // Change the icon to the check icon
updateCountdown(); const iconElement = element.querySelector('.icon');
var x = setInterval(updateCountdown, 1000); const originalIcon = iconElement.src;
iconElement.src = 'data:image/svg+xml;base64,' + btoa(`
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.04706 14C4.04706 8.55609 8.46025 4.1429 13.9042 4.1429C19.3482 4.1429 23.7613 8.55609 23.7613 14C23.7613 19.444 19.3482 23.8572 13.9042 23.8572C8.46025 23.8572 4.04706 19.444 4.04706 14Z" stroke="#000" stroke-width="2.19048" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.52325 14L12.809 17.2858L18.2852 11.8096" stroke="#000" stroke-width="2.19048" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`);
// Change the icon back to the original after 5 seconds
setTimeout(() => {
iconElement.src = originalIcon;
}, 5000);
// Optionally, you can show a message to the user
console.log(`Copied the text: ${text}`);
}
</script> </script>
<script> <script>
@ -84,18 +110,6 @@
}; };
</script> </script>
<script>
function copyToClipboard(text) {
const tempInput = document.createElement("input");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
// TODO: Show a success message instead of an alert
alert(`Copied the text: ${text}`);
}
</script>
<style type="text/css"> <style type="text/css">
.invoice-number { .invoice-number {
@ -121,6 +135,18 @@
border-radius: 5px; border-radius: 5px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
position: relative;
}
.input-wrapper {
position: relative;
width: 100%;
}
.icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
} }
</style> </style>