ACP2E-182: Error while validating Store VAT Number

Author: pradeep1819

app/code/Magento/Config/view/adminhtml/templates/system/config/js.phtml

@@ -15,16 +15,6 @@ require([
     'prototype'
 ], function () {
 
-function inArray(arr, value)
-{
-    for (var i = 0; i < arr.length; i++) {
-        if (arr[i] === value) {
-            return true;
-        }
-    }
-    return false;
-}
-
 var freeModel = Class.create();
 freeModel.prototype = {
     initialize : function()
@@ -93,8 +83,83 @@ $scriptString .= 'this.euCountryList = ' . json_encode($euCountries);
 
 $scriptString .= <<<script
 
+        this.bindCountryVatNumberRelation();
         this.bindCountryRegionRelation();
     },
+    bindCountryVatNumberRelation : function(parentId)
+    {
+        if (parentId) {
+            // todo: fix bug in IE
+            var countryElements = $$('#'+parentId+' .countries');
+        } else {
+            var countryElements = $$('.countries');
+        }
+        for(var i=0; i<countryElements.size(); i++) {
+            Event.observe(countryElements[i], 'change', this.reloadVatNumberField.bind(this));
+            this.initVatNumberField(countryElements[i]);
+        }
+    },
+    reloadVatNumberField : function(event)
+    {
+        this.reload = true;
+        var countryElement = Event.element(event);
+        if (countryElement && countryElement.id) {
+            this.refreshVatNumberField(countryElement);
+            this.refreshValidateVatNumberButton(countryElement);
+        }
+    },
+    initVatNumberField : function(element)
+    {
+        var countryElement = element;
+        if (countryElement && countryElement.id) {
+            this.refreshVatNumberField(countryElement);
+            this.refreshValidateVatNumberButton(countryElement);
+        }
+    },
+    refreshVatNumberField : function(countryElement)
+    {
+        var vatNumberElement  = $(countryElement.id.replace(/country_id/, 'merchant_vat_number'));
+        if (vatNumberElement) {
+            this.vatNumberElement = vatNumberElement;
+            if (vatNumberElement.value.length) {
+                vatNumberElement.value = '';
+            }
+        }
+    },
+    refreshValidateVatNumberButton : function(countryElement)
+    {
+        var btnVatNumberElement  = $(countryElement.id.replace(/country_id/, 'validate_vat_number'));
+        if (btnVatNumberElement) {
+            this.btnVatNumberElement = btnVatNumberElement;
+            if (countryElement.value.length) {
+                this.btnValidateVatNumber(countryElement.value);
+            }
+        }
+    },
+    btnValidateVatNumber: function(countryCode)
+    {
+        var resultElement = document.getElementById("validation_result");
+        var isEuCountry = false;
+        const fruits = Object.values(this.euCountryList);
+
+        if ( fruits.includes(countryCode)) {
+            isEuCountry = true;
+        }
+        if (isEuCountry) {
+            this.btnVatNumberElement.classList.remove('disabled');
+            if (resultElement) {
+                resultElement.style.display = "block";
+                resultElement.innerHTML = '';
+                if ( resultElement.classList.contains('admin__field-error') )
+                resultElement.classList.remove('admin__field-error');
+            }
+        } else {
+            this.btnVatNumberElement.classList.add('disabled');
+            if (resultElement) {
+                resultElement.style.display = "none";
+            }
+        }
+    },
     bindCountryRegionRelation : function(parentId)
     {
         if (parentId) {
@@ -151,12 +216,6 @@ $scriptString .= <<<script
             if (regionElement) {
                 this.regionElement = regionElement;
                 if (countryElement.value.length) {
-                    var isEUCountry = false;
-                    if ( inArray(this.euCountryList, countryElement.value)) {
-                        isEUCountry = true;
-                    }
-                    this.validateVatNumber(isEUCountry);
-
                     var url = this.regionsUrl+'parent/'+countryElement.value;
                     this.loader.load(url, {}, this.refreshRegionField.bind(this));
                 } else {