mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-07 16:04:32 -04:00
Updates for new payment flow
This commit is contained in:
parent
f242bddcb4
commit
5aede4e36f
@ -1,9 +1,9 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||||
<div>
|
||||
<div class="p-2">
|
||||
@livewire('invoice-summary',['context' => $context])
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="p-2">
|
||||
@livewire($this->component,['context' => $context], key($this->componentUniqueId()))
|
||||
</div>
|
||||
|
||||
|
@ -1,10 +1,50 @@
|
||||
<div class="flex flex-col space-y-4 p-4">
|
||||
@foreach($methods as $index => $method)
|
||||
|
||||
<button class="button button-primary bg-primary" @click="$wire.dispatch('payment-method-selected', { company_gateway_id: {{ $method['company_gateway_id'] }}, gateway_type_id: {{ $method['gateway_type_id'] }}, amount: {{ $amount }} })">
|
||||
{{ $method['label'] }}
|
||||
<button
|
||||
class="button button-primary bg-primary payment-method flex items-center justify-center relative py-4"
|
||||
@click="$wire.dispatch('payment-method-selected', { company_gateway_id: {{ $method['company_gateway_id'] }}, gateway_type_id: {{ $method['gateway_type_id'] }}, amount: {{ $amount }} })">
|
||||
<svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>{{ $method['label'] }}</span>
|
||||
</button>
|
||||
|
||||
@endforeach
|
||||
|
||||
|
||||
@script
|
||||
<script>
|
||||
|
||||
const buttons = document.querySelectorAll('.payment-method');
|
||||
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', (event) => {
|
||||
// Hide all buttons except the clicked one
|
||||
buttons.forEach(btn => {
|
||||
if (btn !== event.currentTarget) {
|
||||
btn.style.display = 'none';
|
||||
} else {
|
||||
// Disable the clicked button
|
||||
btn.disabled = true;
|
||||
|
||||
// Show the spinner by removing the 'hidden' class
|
||||
const spinner = btn.querySelector('svg');
|
||||
if (spinner) {
|
||||
spinner.classList.remove('hidden');
|
||||
}
|
||||
|
||||
const span = btn.querySelector('span');
|
||||
if (span) {
|
||||
span.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@endscript
|
||||
</div>
|
@ -33,10 +33,10 @@
|
||||
@include('portal.ninja2020.gateways.includes.payment_details')
|
||||
|
||||
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
|
||||
<ul class="list-none hover:list-disc">
|
||||
<ul class="list-none">
|
||||
@if(count($tokens) > 0)
|
||||
@foreach($tokens as $token)
|
||||
<li class="py-2 hover:text-blue hover:bg-blue-600">
|
||||
<li class="py-2 hover:text-white hover:bg-blue-600">
|
||||
<label class="mr-4">
|
||||
<input
|
||||
type="radio"
|
||||
@ -49,7 +49,7 @@
|
||||
@endforeach
|
||||
@endisset
|
||||
|
||||
<li class="py-2 hover:text-blue hover:bg-blue-600">
|
||||
<li class="py-2 hover:text-white hover:bg-blue-600">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
@ -193,6 +193,8 @@
|
||||
}
|
||||
|
||||
function handleFailure(message) {
|
||||
let payNowButton = document.getElementById('pay-now');
|
||||
|
||||
let errors = document.getElementById('errors');
|
||||
|
||||
errors.textContent = '';
|
||||
|
Loading…
x
Reference in New Issue
Block a user