Updates for new payment flow

This commit is contained in:
David Bomba 2024-07-01 15:13:58 +10:00 committed by Benjamin Beganović
parent f242bddcb4
commit 5aede4e36f
3 changed files with 49 additions and 7 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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 = '';