Updates for new payment flow

resources/views/portal/ninja2020/components/livewire/invoice-pay.blade.php

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

resources/views/portal/ninja2020/components/livewire/payment_method-flow2.blade.php

@@ -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 }} })">
+        <button 
-            {{ $method['label'] }}
+            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>

resources/views/portal/ninja2020/gateways/stripe/credit_card/livewire_pay.blade.php

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