CMP-42 - CR Fixes

Author: Ivan Tagil

Block/Adminhtml/System/Config/Fieldset/ApiDetails.php

@@ -14,34 +14,16 @@
 class ApiDetails extends Fieldset
 {
     /**
-     * Return extra Js
+     * Return header html for fieldset
      *
      * @param AbstractElement $element
      * @return string
      */
-    protected function _getExtraJs($element)
+    protected function _getHeaderHtml($element)
     {
-        $initialScript = parent::_getExtraJs($element);
-        $extendedScript = "require(['jquery'], function ($) {
-            $('#cm_payments_general_api_details_mode').change(function () {
-                let modeContainerId = $(this).closest('tr').attr('id'),
-                    parentTable = $(this).parents().find('table'),
-                    mode = $(this).val();
-                parentTable.find('tr').each(function () {
-                    let containerId = $(this).attr('id');
-                    if (containerId !== modeContainerId) {
-                        if (containerId.indexOf('_' + mode + '_') == -1) {
-                            $(this).hide();
-                        } else {
-                            $(this).show();
-                        }
-                    }
-                });
-            });
-            
-            $('#cm_payments_general_api_details_mode').trigger('change');
-        });";
-
-        return $initialScript . $this->_jsHelper->getScript($extendedScript);
+        return parent::_getHeaderHtml($element) .
+            '<div class="api-details-extra" ' .
+            'data-mage-init=\'{"CM_Payments/js/system/action/api-details-config":' .
+            '{"modeContainerSelector": "#cm_payments_general_api_details_mode"}}\'></div>';
     }
 }

view/adminhtml/web/js/system/action/api-details-config.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright © CM.com. All rights reserved.
+ * See LICENSE.txt for license details.
+ */
+define([
+    'uiComponent',
+    'jquery'
+], function (
+    Component,
+    $
+) {
+    'use strict';
+
+    return Component.extend({
+        modeContainerSelector: null,
+
+        /**
+         * Initialization of component
+         *
+         * @returns {Object}
+         */
+        initialize: function () {
+            this._super();
+            $(this.modeContainerSelector).change(this.changeApiDetailsMode);
+            $(this.modeContainerSelector).trigger('change');
+
+            return this;
+        },
+
+        /**
+         * Changing of API Details Mode
+         */
+        changeApiDetailsMode: function () {
+            let modeContainerId = $(this).closest('tr').attr('id'),
+                parentTable = $(this).parents().find('table'),
+                mode = $(this).val();
+            parentTable.find('tr').each(function () {
+                let containerId = $(this).attr('id');
+                if (containerId !== modeContainerId) {
+                    if (containerId.indexOf('_' + mode + '_') == -1) {
+                        $(this).hide();
+                    } else {
+                        $(this).show();
+                    }
+                }
+            });
+        }
+    });
+})

view/adminhtml/web/js/system/action/check-api-connection.js

@@ -12,16 +12,21 @@ define([
     $,
     alert
 ) {
+    'use strict';
+
     return Component.extend({
         wrapperContainerSelector: null,
         modeContainerSelector: null,
         checkApiConnectionUrl: null,
         resultContainerSelector: null,
 
+        /**
+         * Check API Connection function
+         */
         checkApiConnection: function () {
             let mode = $(this.modeContainerSelector).val(),
                 merchant_name = $('#cm_payments_general_api_details_' + mode + '_merchant_name').val(),
-                merchant_password =  $('#cm_payments_general_api_details_' + mode + '_merchant_password').val(),
+                merchant_password = $('#cm_payments_general_api_details_' + mode + '_merchant_password').val(),
                 merchant_key = $('#cm_payments_general_api_details_' + mode + '_merchant_key').val(),
                 container = $(this.wrapperContainerSelector),
                 result = $(this.resultContainerSelector),