feat: improve information for transaction status

plugin/css/tbk.css

@@ -1,3 +1,12 @@
+:root {
+    --tbk-red: #D5006C;
+    --tbk-red-2: #C00063;
+    --tbk-success: #28a745;
+    --tbk-info: #007bff;
+    --tbk-warning: #fd7e14;
+    --tbk-error: #dc3545;
+    --tbk-default: #6c757d:
+}
 
 .tbk_table_info {
     width: 600px;
@@ -221,8 +230,6 @@
 }
 
 .tbk-box {
-    --tbk-red: #D5006C;
-    --tbk-red-2: #C00063;
     background: #fff;
     border-radius: 10px;
     padding: 15px;
@@ -413,3 +420,95 @@
     font-size: 18px;
     font-weight: 500;
 }
+
+.tbk-field {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.tbk-field-name {
+    font-weight: bold;
+    margin-right: 8px;
+}
+
+.tbk-field-value {
+    text-align: right;
+    word-break: break-word;
+}
+
+.tbk-badge {
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: bold;
+    color: white
+}
+
+.tbk-badge-success {
+    background-color: var(--tbk-success);
+}
+
+.tbk-badge-info {
+    background-color: var(--tbk-info);
+}
+
+.tbk-badge-warning {
+    background-color: var(--tbk-warning);
+}
+
+.tbk-badge-error {
+    background-color: var(--tbk-error);
+}
+
+.tbk-badge-default {
+    background-color: var(--tbk-default);
+}
+
+.tbk-status {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.tbk-status i {
+    width: 100px;
+    max-width: 24px;
+    text-align: center;
+    font-size: x-large;
+}
+
+.tbk-status p {
+    padding-left: 10px;
+    margin: 0px;
+}
+
+.tbk-status.tbk-status-info i {
+    color: var(--tbk-info);
+}
+
+.tbk-status.tbk-status-error i, .tbk-status.tbk-status-error p {
+    color: var(--tbk-error);
+    font-weight: bold;
+}
+
+.tbk-status-button {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+}
+
+.tbk-status-button .tbk-button-primary {
+    width: 100%;
+    text-align: center;
+}
+
+.tbk-separator {
+    width: 100%;
+    height: 1px;
+    background-color: #ccc;
+    margin: 10px 0;
+}

plugin/js/admin.js

@@ -13,7 +13,9 @@ jQuery(function($) {
         if ($(`.${btnName}`).data('sending') === true) {
             return false;
         }
-        $(`.${btnName}`).data('sending', true).html(msg);
+        const btn = $(`.${btnName}`);
+        btn.data('sending', true).html(`${msg} <i class="fa fa-spinner fa-spin"></i>`);
+
         e.preventDefault();
         return true;
     }
@@ -72,40 +74,113 @@ jQuery(function($) {
     });
 
     $('.get-transaction-status').on("click",function(e) {
-        if (!blockButton(e, 'get-transaction-status', 'Consultando al API REST...')){
+        e.preventDefault();
+        if (!blockButton(e, 'get-transaction-status', 'Consultando estado')){
             return;
         }
+
+        const container = document.getElementById('transaction_status_admin');
+        container.innerHTML = '';
+
+        const separator = document.createElement('div');
+        separator.className = 'tbk-separator';
+        separator.style.display = 'none';
+        container.appendChild(separator);
+
         post('get_transaction_status', {
             order_id: $('.get-transaction-status').data('order-id'),
             buy_order: $('.get-transaction-status').data('buy-order'),
             token: $('.get-transaction-status').data('token')
         }, (resp) => {
-            let $table = $('.transaction-status-response');
-            let statusData = resp.status;
-            if(resp.product == "webpay_plus"){
-                $("#tbk_wpp_vci").removeClass("tbk-hide");
-                $("#tbk_wpp_session_id").removeClass("tbk-hide");
-            }else{
-                $("#tbk_wpoc_commerce_code").removeClass("tbk-hide");
+            for (const [key, value] of Object.entries(resp)) {
+                const fieldName = document.createElement('span');
+                fieldName.className = 'tbk-field-name';
+                fieldName.textContent = getFieldName(key);
+
+                const fieldValue = document.createElement('span');
+                fieldValue.className = 'tbk-field-value';
+                fieldValue.textContent = value.toString();
+
+                if(key == 'status') {
+                    fieldValue.classList.add('tbk-badge');
+                    fieldValue.classList.add(getBadgeColorFromStatus(value.toString()));
+                }
+
+                if(key == 'cardNumber') {
+                    fieldValue.style.width = '100%';
+                }
+
+                const field = document.createElement('div');
+                field.className = 'tbk-field';
+                field.appendChild(fieldName);
+                field.appendChild(fieldValue);
+
+                container.appendChild(field);
             }
-            const statusDataKeys = Object.keys(statusData);
-            statusDataKeys.forEach(key => {
-                let value = statusData[key] ? statusData[key] : '-';
-                const tableRow = $table.find('.status-' + key);
-                tableRow.html(value);
-            });
-            $table.find('.status-product').html(resp.product);
-            let niceJson = JSON.stringify(resp.raw, null, 2)
-            $table.find('.status-raw').html(`<pre>${niceJson}</pre>`);
-            $table.show();
-            releaseButton('get-transaction-status','Consultar estado de la transacción');
+            separator.style.removeProperty('display');
+
+            releaseButton('get-transaction-status','Consultar Estado');
         }, (error) => {
-            $('.error-status-raw').html(`<p>${error.responseJSON.message}</p>`);
-            $('.error-transaction-status-response').show();
-            releaseButton('get-transaction-status','Consultar estado de la transacción');
+            const errorContainer = createErrorContainer(error.responseJSON.message);
+            container.appendChild(errorContainer);
+            separator.style.removeProperty('display');
+
+            releaseButton('get-transaction-status','Consultar Estado');
         });
     });
 
+    function getBadgeColorFromStatus(status) {
+        const statusColorsDictionary = {
+            'Inicializada': 'tbk-badge-warning',
+            'Capturada': 'tbk-badge-success',
+            'Autorizada': 'tbk-badge-success',
+            'Fallida': 'tbk-badge-error',
+            'Anulada': 'tbk-badge-info',
+            'Parcialmente anulada': 'tbk-badge-info'
+        };
+
+        return statusColorsDictionary[status] ?? 'tbk-badge-default';
+    }
+
+    function getFieldName(fieldKey) {
+        const fieldNameDictionary = {
+            vci: 'VCI',
+            status: 'Estado',
+            responseCode: 'Código de respuesta',
+            amount: 'Monto',
+            authorizationCode: 'Código de autorización',
+            accountingDate: 'Fecha contable',
+            paymentType: 'Tipo de pago',
+            installmentType: 'Tipo de cuota',
+            installmentNumber: 'Número de cuotas',
+            installmentAmount: 'Monto cuota',
+            sessionId: 'ID de sesión',
+            buyOrder: 'Orden de compra',
+            buyOrderMall: 'Orden de compra mall',
+            buyOrderStore: 'Orden de compra tienda',
+            cardNumber: 'Número de tarjeta',
+            transactionDate: 'Fecha transacción',
+            transactionTime: 'Hora transacción',
+            balance: 'Balance'
+        };
+
+        return fieldNameDictionary[fieldKey] ?? fieldKey;
+    }
+
+    function createErrorContainer(errorMessage)
+    {
+        const errorContainer = document.createElement('div');
+        errorContainer.classList.add('tbk-status', 'tbk-status-error');
+        const icon = document.createElement('i');
+        icon.classList.add('fa', 'fa-times');
+        const paragraph = document.createElement('p');
+        paragraph.textContent = errorMessage;
+
+        errorContainer.appendChild(icon);
+        errorContainer.appendChild(paragraph);
+        return errorContainer;
+    }
+
     $('#mainform').on('click', '.notice-dismiss', function() {
         let noticeId = $(this).closest('.notice').attr('id');
 
@@ -169,7 +244,4 @@ jQuery(function($) {
 
         });
     });
-
-
-
 })