feat: adding compatibility to native woocommerce refund

assets/javascripts/admin/sales/order/view/cancel-capture.js

@@ -1,15 +1,20 @@
 /* jshint esversion: 6 */
 $ = jQuery;
-const actionsTarget = '[data-ref]:enabled';
+const captureTarget = '[data-type="capture"]:enabled';
 const modalTarget = '.modal';
 const amountTarget = '[data-element=amount]';
 
-let pagarmeCancelCapture = {
+const cancelTarget = '[data-type="cancel"]:enabled';
+const scrollTarget = '#woocommerce-order-items';
+const scrollTime = 600;
+const buttonTarget = '#woocommerce-order-items .button.refund-items';
+
+const pagarmeCapture = {
     started: false,
-    lock:false,
+    lock: false,
 
-    isStarted: function (){
-        if (!this.started){
+    isStarted: function () {
+        if (!this.started) {
             this.started = true;
             return false;
         }
@@ -29,53 +34,47 @@ let pagarmeCancelCapture = {
         $(modalTarget).iziModal({
             padding: 20,
             onOpening: function (modal) {
-                let amount = modal.$element.find( amountTarget );
+                let amount = modal.$element.find(amountTarget);
                 const options = {
-                    reverse:true,
-                    onKeyPress: function(amountValue, event, field){
-                        if (!event.originalEvent){
+                    reverse: true,
+                    onKeyPress: function (amountValue, event, field) {
+                        if (!event.originalEvent) {
                             return;
                         }
-                        amountValue = amountValue.replace(/^0+/, '')
-                        if (amountValue[0] === ','){
+                        amountValue = amountValue.replace(/^0+/, '');
+                        if (amountValue[0] === ',') {
                             amountValue = '0' + amountValue;
                         }
-                        if (amountValue && amountValue.length <= 2){
-                            amountValue = ('000'+amountValue).slice(-3);
+                        if (amountValue && amountValue.length <= 2) {
+                            amountValue = ('000' + amountValue).slice(-3);
                             field.val(amountValue);
                             field.trigger('input');
                             return;
                         }
                         field.val(amountValue);
                     }
                 };
-                amount.mask( "#.##0,00", options );
-                modal.$element.on( 'click', '[data-action=capture]', self.onClickCapture.bind(self) );
-                modal.$element.on( 'click', '[data-action=cancel]', self.onClickCancel.bind(self) );
+                amount.mask("#.##0,00", options);
+                modal.$element.on('click', '[data-action=capture]', self.onClickCapture.bind(self));
             }
         });
     },
 
     onClickCapture: function (e) {
         e.preventDefault();
-        this.handleEvents( e, 'capture' );
-    },
-
-    onClickCancel: function (e) {
-        e.preventDefault();
-        this.handleEvents( e, 'cancel' );
+        this.handleEvents(e, 'capture');
     },
 
     handleEvents: function (DOMEvent, type) {
-        let target   = $( DOMEvent.currentTarget );
-        let wrapper  = target.closest( '[data-charge]' );
-        let chargeId = wrapper.data( 'charge' );
-        let amount   = wrapper.find( '[data-element=amount]' ).val();
-        this.request( type, chargeId, amount);
+        let target = $(DOMEvent.currentTarget);
+        let wrapper = target.closest('[data-charge]');
+        let chargeId = wrapper.data('charge');
+        let amount = wrapper.find('[data-element=amount]').val();
+        this.request(type, chargeId, amount);
     },
 
     request: function (mode, chargeId, amount) {
-        if ( this.lock ) {
+        if (this.lock) {
             return;
         }
         this.lock = true;
@@ -90,8 +89,8 @@ let pagarmeCancelCapture = {
                 'amount': amount
             }
         });
-        ajax.done( this._onDone.bind(this) );
-        ajax.fail( this._onFail.bind(this) );
+        ajax.done(this._onDone.bind(this));
+        ajax.fail(this._onFail.bind(this));
     },
 
     openModal: function (e) {
@@ -110,9 +109,9 @@ let pagarmeCancelCapture = {
         swal.showLoading();
     },
 
-    _onDone: function(response) {
+    _onDone: function (response) {
         this.lock = false;
-        $( modalTarget ).iziModal('close');
+        $(modalTarget).iziModal('close');
         swal.close();
         swal.fire({
             icon: 'success',
@@ -128,11 +127,11 @@ let pagarmeCancelCapture = {
         );
     },
 
-    getAjaxUrl: function() {
+    getAjaxUrl: function () {
         return window.pagarme_settings.ajax_url;
     },
 
-    _onFail: function(xhr) {
+    _onFail: function (xhr) {
         this.lock = false;
         swal.close();
         let data = JSON.parse(xhr.responseText);
@@ -147,8 +146,49 @@ let pagarmeCancelCapture = {
     },
 
     addEventListener: function () {
-        $(actionsTarget).on('click', function (e) {
-            pagarmeCancelCapture.openModal(e);
+        $(captureTarget).on('click', function (e) {
+            pagarmeCapture.openModal(e);
+        });
+    },
+};
+
+const pagarmeCancel = {
+    started: false,
+    lock: false,
+
+    isStarted: function () {
+        if (!this.started) {
+            this.started = true;
+            return false;
+        }
+        return true;
+    },
+
+    start: function () {
+        if (this.isStarted()) {
+            return;
+        }
+        this.addEventListener();
+    },
+
+    clickRefundButton: function () {
+        setTimeout(function () {
+            $(buttonTarget).trigger('click');
+            $('#order_line_items .item:first-child .refund_order_item_qty').focus();
+        }, scrollTime + 100);
+    },
+
+    scrollToRefundBox: function () {
+        $('html, body').animate({
+            scrollTop: $(scrollTarget).offset().top - 111
+        }, scrollTime);
+        pagarmeCancel.clickRefundButton();
+    },
+
+    addEventListener: function () {
+        $(cancelTarget).on('click', function (e) {
+            e.preventDefault();
+            pagarmeCancel.scrollToRefundBox();
         });
     },
-}
+};

assets/stylesheets/admin/style.css

@@ -75,13 +75,23 @@
     background-color: #f8f8f8;
 }
 
+#woo-pagarme-capture .wrapper {
+    overflow-y: auto;
+}
+
 #woo-pagarme-capture .wrapper table {
     width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
-#woo-pagarme-capture .wrapper table thead th {
+#woo-pagarme-capture .wrapper table thead th,
+#woo-pagarme-capture .wrapper table tbody tr td {
     text-align: left;
     padding: 1em;
+}
+
+#woo-pagarme-capture .wrapper table thead th {
     font-weight: 600;
     background: #f8f8f8;
 }
@@ -90,24 +100,12 @@
     cursor: pointer;
 }
 
-#woo-pagarme-capture .wrapper table thead th:last-child {
-    padding-right: 2em;
-}
-
-#woo-pagarme-capture .wrapper table thead th:first-child {
-    padding-left: 2em;
-}
-
 #woo-pagarme-capture .wrapper table thead th .wc-arrow {
     float: right;
     position: relative;
     margin-right: -1em;
 }
 
-#woo-pagarme-capture .wrapper table tbody tr td {
-    padding-top: .6em;
-}
-
 #woo-pagarme-capture .wrapper table tbody th textarea,
 #woo-pagarme-capture .wrapper table td textarea {
     width: 100%;
@@ -122,16 +120,6 @@
     color: #555;
 }
 
-#woo-pagarme-capture .wrapper table tbody th:last-child,
-#woo-pagarme-capture .wrapper table td:last-child {
-    padding-right: 2em;
-}
-
-#woo-pagarme-capture .wrapper table tbody th:first-child,
-#woo-pagarme-capture .wrapper table td:first-child {
-    padding-left: 2em;
-}
-
 #mainform .invalid-field{
     border-color: #d63638;
     box-shadow: 0 0 2px rgba(214,54,56,.8);
@@ -144,3 +132,16 @@
 .woocommerce table.form-table textarea.wide-input.pagarme-option-text-area {
     width: 400px;
 }
+
+.pagarme-refund-message {
+    padding: 1em;
+    border: 1px solid #c3c4c7;
+    border-left: 4px solid #d63638;
+    background: #fff4f4;
+    text-align: center;
+}
+
+.pagarme-refund-message span {
+    color: #d63638;
+    font-weight: bold;
+}

languages/woo-pagarme-payments-pt_BR.po

@@ -5,7 +5,7 @@ msgstr ""
 "Project-Id-Version: WooCommerce Pagar.me Payments 1.0\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/woo-pagarme-payments\n"
 "POT-Creation-Date: 2018-06-22 13:58-0300\n"
-"PO-Revision-Date: 2024-06-06 16:01-0300\n"
+"PO-Revision-Date: 2024-05-29 16:16-0300\n"
 "Last-Translator: Pagar.me\n"
 "Language-Team: \n"
 "Language: pt_BR\n"
@@ -530,7 +530,7 @@ msgstr "Processo de Antifraude em análise manual."
 msgid "Anti-fraud process pending."
 msgstr "Processo de antifraude pendente."
 
-#: src/Model/Order.php:100
+#: src/Model/Order.php:117
 msgid "Pagar.me: Payment canceled."
 msgstr "Pagar.me: Pagamento cancelado."
 
@@ -1124,14 +1124,11 @@ msgstr "Titular"
 msgid "No records found."
 msgstr "Nenhum registro foi encontrado."
 
-msgid "Partially Reversed"
-msgstr "Parcialmente Revertido"
+msgid "Refunded"
+msgstr "Reembolsado"
 
-msgid "Partially Canceled"
-msgstr "Parcialmente Cancelado"
-
-msgid "Partially Captured"
-msgstr "Capturado Parcialmente"
+msgid "Captured"
+msgstr "Capturado"
 
 msgid "Total Amount"
 msgstr "Total"
@@ -1448,3 +1445,22 @@ msgstr "O mês de expiração do cartão deve estar entre 01 e 12."
 
 msgid "Pagar.me: Payment failed."
 msgstr "Pagar.me: Pagamento falhou."
+
+msgid ""
+"<span>Attention!</span> It is now possible to use Woocommerce's automatic refund flow. <b>Soon, this button will be "
+"dedicated to manual capture only</b>."
+msgstr ""
+"<span>Atenção!</span> Já é possível utilizar o fluxo de reembolso automático do Woocommerce. <b>Em breve, este botão "
+"será dedicado somente a captura manual</b>."
+
+msgid "There was a problem attempting to refund: %1$s"
+msgstr "Ocorreu um problema ao tentar reembolsar: %1$s"
+
+msgid "The refund amount is grater than the amount current available on Pagar.me charge."
+msgstr "O valor do reembolso é maior que o valor atualmente disponível na cobrança da Pagar.me."
+
+msgid "Charge %s was fully refunded."
+msgstr "A cobrança %s foi totalmente reembolsada."
+
+msgid "Charge %1$s was partially refunded. Amount: %2$s"
+msgstr "A cobrança %1$s foi parcialmente reembolsada. Valor: %2$s"

src/Block/Adminhtml/Sales/Order/MetaBox/ChargeActions.php

@@ -117,9 +117,8 @@ public function getHeaderGrid()
             'Charge ID',
             'Type',
             "Total Amount",
-            'Partially Captured',
-            'Partially Canceled',
-            'Partially Reversed',
+            'Captured',
+            'Refunded',
             'Status',
             'Action'
         ];
@@ -153,7 +152,6 @@ public function getTotals()
         return [
             '',
             'paid',
-            'canceled',
             'refunded'
         ];
     }

src/Controller/Charges.php

@@ -104,7 +104,6 @@ private function build_actions()
             'charge_created',
             'charge_updated',
             'charge_paid',
-            'charge_refunded',
             'charge_pending',
             'charge_payment_failed',
             'charge_chargedback',