Update admin/view/template/payment/hutko_order_info_panel.twig

admin/view/template/payment/hutko_order_info_panel.twig

@@ -3,17 +3,57 @@
     <i class="fa-solid fa-credit-card"></i> {{ text_payment_information }} (Hutko)
   </div>
   <div class="card-body">
-    <table class="table table-bordered">
+    {% if transactions %}
+    <div class="table-responsive">
+        <table class="table table-bordered table-hover">
+            <thead>
                 <tr>
-        <td style="width: 200px;"><strong>{{ text_hutko_transaction_ref_label }}</strong></td>
+                    <th>Date</th>
-        <td>{{ hutko_transaction_ref_display }}</td>
+                    <th>Ref</th>
+                    <th>Type</th>
+                    <th>Status</th>
+                    <th>Amount</th>
+                    <th class="text-end">Action</th>
                 </tr>
+            </thead>
+            <tbody>
+            {% for t in transactions %}
+                <tr>
+                    <td>{{ t.date }}</td>
+                    <td>{{ t.ref }}</td>
+                    <td><span class="badge bg-secondary">{{ t.type }}</span></td>
+                    <td>
+                        {% if t.status == 'success' or t.status == 'approved' %}
+                            <span class="badge bg-success">{{ t.status }}</span>
+                        {% elseif t.status == 'failed' or t.status == 'declined' %}
+                            <span class="badge bg-danger">{{ t.status }}</span>
+                        {% else %}
+                            <span class="badge bg-warning">{{ t.status }}</span>
+                        {% endif %}
+                    </td>
+                    <td>{{ t.amount }}</td>
+                    <td class="text-end">
+                        <button type="button" class="btn btn-info btn-sm" data-bs-toggle="collapse" data-bs-target="#payload-{{ loop.index }}"><i class="fa-solid fa-code"></i></button>
+                        {% if t.can_refund %}
+                            <button type="button" class="btn btn-warning btn-sm btn-refund-modal" data-ref="{{ t.ref }}" data-amount="{{ t.amount }}"><i class="fa-solid fa-undo"></i></button>
+                        {% endif %}
+                        <button type="button" class="btn btn-primary btn-sm btn-check-status" data-ref="{{ t.ref }}"><i class="fa-solid fa-sync"></i></button>
+                    </td>
+                </tr>
+                <tr id="payload-{{ loop.index }}" class="collapse">
+                    <td colspan="6" class="bg-light">
+                        <pre style="max-height: 200px; overflow: auto; font-size: 11px;">{{ t.payload }}</pre>
+                    </td>
+                </tr>
+            {% endfor %}
+            </tbody>
         </table>
+    </div>
 
-    {% if hutko_transaction_ref_display != text_not_available %}
+    <!-- Refund Form Section (Hidden by default, shown when Refund clicked) -->
-      <div class="border-top mt-3 pt-3">
+    <div id="refund-section" class="border p-3 bg-light mt-3" style="display:none;">
-        <h5>{{ text_hutko_refund_title }}</h5>
+        <h5>{{ text_hutko_refund_title }} <span id="refund-ref-display" class="badge bg-dark"></span></h5>
-        <div class="row g-2 align-items-center mb-2">
+        <div class="row g-2 align-items-center">
             <div class="col-auto">
                  <input type="text" id="input-refund-amount" class="form-control" placeholder="{{ entry_refund_amount }}">
             </div>
@@ -21,23 +61,36 @@
                  <input type="text" id="input-refund-comment" class="form-control" placeholder="{{ entry_refund_comment }}">
             </div>
             <div class="col-auto">
-             <button type="button" id="button-hutko-refund" class="btn btn-warning">{{ button_hutko_refund }}</button>
+                 <input type="hidden" id="input-refund-ref">
+                 <button type="button" id="button-execute-refund" class="btn btn-danger">{{ button_hutko_refund }}</button>
+                 <button type="button" onclick="$('#refund-section').slideUp();" class="btn btn-secondary">Cancel</button>
             </div>
         </div>
-        <div id="hutko-refund-response"></div>
+        <div id="hutko-refund-response" class="mt-2"></div>
     </div>
     
-      <div class="border-top mt-3 pt-3">
+    <div id="status-check-output" class="mt-3"></div>
-        <h5>{{ text_hutko_status_title }}</h5>
+
-        <button type="button" id="button-hutko-status" class="btn btn-info text-white">{{ button_hutko_status_check }}</button>
+    {% else %}
-        <div id="hutko-status-response" class="mt-2"></div>
+        <p class="text-center">{{ text_no_transactions }}</p>
-      </div>
     {% endif %}
   </div>
 </div>
 
 <script type="text/javascript">
-$('#button-hutko-refund').on('click', function () {
+// Show Refund Section
+$('.btn-refund-modal').on('click', function() {
+    var ref = $(this).data('ref');
+    var amt = parseFloat($(this).data('amount')); // simplistic parsing
+    $('#refund-ref-display').text(ref);
+    $('#input-refund-ref').val(ref);
+    $('#input-refund-amount').val(amt); // Pre-fill amount
+    $('#refund-section').slideDown();
+    $('#hutko-refund-response').html('');
+});
+
+// Execute Refund
+$('#button-execute-refund').on('click', function () {
     if (!confirm('{{ text_confirm_refund }}')) return;
     
     var btn = $(this);
@@ -48,6 +101,7 @@ $('#button-hutko-refund').on('click', function () {
         data: {
             'refund_amount': $('#input-refund-amount').val(),
             'refund_comment': $('#input-refund-comment').val(),
+            'hutko_ref': $('#input-refund-ref').val(),
             'order_id': {{ order_id }}
         },
         beforeSend: function () {
@@ -63,7 +117,6 @@ $('#button-hutko-refund').on('click', function () {
             }
             if (json['success']) {
                 $('#hutko-refund-response').html('<div class="alert alert-success">' + json['success'] + '</div>');
-                // Reload history if possible, or reload page
                 setTimeout(function(){ location.reload(); }, 2000);
             }
         },
@@ -73,27 +126,30 @@ $('#button-hutko-refund').on('click', function () {
     });
 });
 
-$('#button-hutko-status').on('click', function () {
+// Check Status
+$('.btn-check-status').on('click', function () {
     var btn = $(this);
+    var ref = $(this).data('ref');
+    
     $.ajax({
         url: '{{ status_url|raw }}',
         type: 'post',
         dataType: 'json',
-        data: {'hutko_transaction_ref': '{{ hutko_transaction_ref_display }}'}, 
+        data: {'hutko_transaction_ref': ref}, 
         beforeSend: function () {
-            btn.prop('disabled', true).text('{{ text_loading }}');
+            btn.prop('disabled', true);
-            $('#hutko-status-response').html('');
+            $('#status-check-output').html('<div class="text-center"><i class="fa-solid fa-spinner fa-spin"></i> {{ text_loading }}</div>');
         },
         complete: function () {
-             btn.prop('disabled', false).text('{{ button_hutko_status_check }}');
+             btn.prop('disabled', false);
         },
         success: function (json) {
             if (json['error']) {
-                $('#hutko-status-response').html('<div class="alert alert-danger">' + json['error'] + '</div>');
+                $('#status-check-output').html('<div class="alert alert-danger">' + json['error'] + '</div>');
             }
             if (json['success']) {
                 let data = json['data'] ? JSON.stringify(json['data'], null, 2) : '';
-                $('#hutko-status-response').html('<div class="alert alert-success">' + json['success'] + '<pre class="mt-2 bg-light p-2" style="max-height:200px;overflow:auto;">' + data + '</pre></div>');
+                $('#status-check-output').html('<div class="alert alert-success">' + json['success'] + '<pre class="mt-2 bg-light p-2" style="max-height:200px;overflow:auto;">' + data + '</pre></div>');
             }
         },
         error: function (xhr, ajaxOptions, thrownError) {