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

This commit is contained in:
2025-12-14 11:48:01 +02:00
parent 8da37f4bb3
commit dce30fee07

View File

@@ -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>
<td>{{ hutko_transaction_ref_display }}</td>
<th>Date</th>
<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 %}
<div class="border-top mt-3 pt-3">
<h5>{{ text_hutko_refund_title }}</h5>
<div class="row g-2 align-items-center mb-2">
<!-- Refund Form Section (Hidden by default, shown when Refund clicked) -->
<div id="refund-section" class="border p-3 bg-light mt-3" style="display:none;">
<h5>{{ text_hutko_refund_title }} <span id="refund-ref-display" class="badge bg-dark"></span></h5>
<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">
<h5>{{ text_hutko_status_title }}</h5>
<button type="button" id="button-hutko-status" class="btn btn-info text-white">{{ button_hutko_status_check }}</button>
<div id="hutko-status-response" class="mt-2"></div>
</div>
<div id="status-check-output" class="mt-3"></div>
{% else %}
<p class="text-center">{{ text_no_transactions }}</p>
{% 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 }}');
$('#hutko-status-response').html('');
btn.prop('disabled', true);
$('#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) {