Added widget to back-office

Added widget within the back-office where order payment actions are excuted.

assets/css/style.scss

@@ -1,8 +1,115 @@
 .reepay-logos {
-	display: table-cell;
-}
+  display: table-cell; }
+
 .reepay-logo {
+  float: left;
+  display: inline-block;
+  padding: 5px; }
+
+.reepay-admin-section-li-header {
+	width: 100%;
+	font-weight: bold;
+}
+
+.reepay-admin-section-li-header-small {
+	width: 100%;
+	font-weight: bold;
+	font-size: small;
+	margin-bottom: 0px;
+}
+
+.reepay-admin-section-li {
+	width: 100%;
+}
+
+.reepay-admin-section-li-small {
+	width: 100%;
+	font-size: small;
+	margin-top: 0px;
+}
+
+.reepay-full-width, .reepay-full-width .button {
+	width: 100%;
+	display: block;
+	text-align: center;
+	clear: both;
+}
+
+.reepay-balance {
+	margin-bottom: 0;
+}
+
+.reepay-balance.last {
+	margin-bottom: 5px;
+}
+
+.reepay-balance:after {
+	clear: both;
+	content: "";
+	display: table;
+}
+
+.reepay-balance__label,
+.reepay-balance__amount {
+	background-color: #f9f9f9;
+	box-sizing: border-box;
+	float: left;
+	padding: 7px 10px;
+	text-transform: uppercase;
+	font-size: 10px;
+	color: #8a8a8a;
+}
+
+.reepay-balance__label {
+	font-weight: bold;
+	width: 60%;
+	border-right: 2.5px solid #FFF;
+}
+.reepay-balance__amount {
+	border-right: 0;
+	width: 40%;
+	border-left: 2.5px solid #FFF;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+}
+
+.reepay-balance__currency {
+	margin-right: 10px;
+}
+
+.reepay-balance.last .reepay-balance__currency {
+	margin-right: 0;
+}
+
+.reepay-admin-card-logo {
+	text-align: center; 
+	margin-right: 25px;
+	max-width: 100px;
+}
+
+.reepay-partly_capture_amount {
+	background-color: #f9f9f9;
+	box-sizing: border-box;
 	float: left;
-	display: inline-block;
-	padding: 5px;
+	padding: 4px 10px;
+	text-transform: uppercase;
+	font-size: 10px;
+	color: #8a8a8a;
+
+	border-right: 0;
+	width: 40%;
+	border-left: 2.5px solid #FFF;
+	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
+	display: -ms-flexbox;  /* TWEENER - IE 10 */
+	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
+	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
 }
+
+.reepay-capture_partly_amount-field {
+	font-size: small;
+	max-height: 20px;
+	min-height: 1px !important;
+	text-align: center; 
+}

assets/js/admin.js

@@ -1,10 +1,10 @@
 jQuery(document).ready(function ($) {
 	$(document).on('click', '#reepay_capture', function (e) {
 		e.preventDefault();
-
 		var nonce = $(this).data('nonce');
 		var order_id = $(this).data('order-id');
 		var self = $(this);
+
 		$.ajax({
 			url       : Reepay_Admin.ajax_url,
 			type      : 'POST',
@@ -22,7 +22,6 @@ jQuery(document).ready(function ($) {
 				self.html(self.data('text'));
 				self.prop('disabled', false);
 				if (!response.success) {
-					alert(response.data);
 					return false;
 				}
 
@@ -62,4 +61,124 @@ jQuery(document).ready(function ($) {
 			}
 		});
 	});
+
+	$(document).on('click', '#reepay_refund', function (e) {
+		e.preventDefault();
+		var nonce = $(this).data('nonce');
+		var order_id = $(this).data('order-id');
+		var amount = $(this).data('amount');
+		var self = $(this);
+		$.ajax({
+			url       : Reepay_Admin.ajax_url,
+			type      : 'POST',
+			data      : {
+				action        : 'reepay_refund',
+				nonce         : nonce,
+				order_id      : order_id,
+				amount        : amount
+			},
+			beforeSend: function () {
+				self.data('text', self.html());
+				self.html(Reepay_Admin.text_wait);
+				self.prop('disabled', true);
+			},
+			success   : function (response) {
+				self.html(self.data('text'));
+				self.prop('disabled', false);
+				if (!response.success) {
+					alert(response.data);
+					return false;
+				}
+
+				window.location.href = location.href;
+			},
+			error	: function (response) {
+				alert(response);
+			}
+		});
+	});
+
+	$(document).on('click', '#reepay_capture_partly', function (e) {
+		e.preventDefault();
+		var nonce = $(this).data('nonce');
+		var order_id = $(this).data('order-id');
+		var amount = $("#reepay-capture_partly_amount-field").val();
+		var self = $(this);
+
+		$.ajax({
+			url       : Reepay_Admin.ajax_url,
+			type      : 'POST',
+			data      : {
+				action        : 'reepay_capture_partly',
+				nonce         : nonce,
+				order_id      : order_id,
+				amount        : amount
+			},
+			beforeSend: function () {
+				self.data('text', self.html());
+				self.html(Reepay_Admin.text_wait);
+				self.prop('disabled', true);
+			},
+			success   : function (response) {
+				self.html(self.data('text'));
+				self.prop('disabled', false);
+				if (!response.success) {
+					alert(response);
+					alert(response.data);
+					return false;
+				}
+				window.location.href = location.href;
+			},
+			error	: function (response) {
+				alert("error response: " + JSON.stringify(response));
+			}
+		});
+	});
+
+	$(document).on('click', '#reepay_refund_partly', function (e) {
+		e.preventDefault();
+		var nonce = $(this).data('nonce');
+		var order_id = $(this).data('order-id');
+		var amount = $("#reepay-refund_partly_amount-field").val();
+		var self = $(this);
+
+		$.ajax({
+			url       : Reepay_Admin.ajax_url,
+			type      : 'POST',
+			data      : {
+				action        : 'reepay_refund_partly',
+				nonce         : nonce,
+				order_id      : order_id,
+				amount        : amount
+			},
+			beforeSend: function () {
+				self.data('text', self.html());
+				self.html(Reepay_Admin.text_wait);
+				self.prop('disabled', true);
+			},
+			success   : function (response) {
+				self.html(self.data('text'));
+				self.prop('disabled', false);
+				if (!response.success) {
+					alert(response);
+					alert(response.data);
+					return false;
+				}
+				window.location.href = location.href;
+			},
+			error	: function (response) {
+				alert("error response: " + JSON.stringify(response));
+			}
+		});
+	});
+
+	$(document).on('blur', '#reepay-capture_partly_amount-field', function (e) {
+		var val = parseFloat($(this).val().replace(",", "."));
+		$(this).val(val.toFixed(2).replace(".", ","));
+	});
+
+	$(document).on('blur', '#reepay-refund_partly_amount-field', function (e) {
+		var val = parseFloat($(this).val().replace(",", "."));
+		$(this).val(val.toFixed(2).replace(".", ","));
+	});
 });