Add loader icon

vatchecker.php

@@ -173,6 +173,7 @@ public function uninstall()
 	public function hookDisplayHeader( $params )
 	{
 		$this->context->controller->addJS( $this->_path . 'views/js/front.js' );
+		$this->context->controller->addCSS( $this->_path . 'views/css/front.css' );
 	}
 
 	/**

views/css/front.css

@@ -0,0 +1,60 @@
+/**
+* 2007-2020 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to [email protected] so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author    PrestaShop SA <[email protected]>
+*  @copyright 2007-2020 PrestaShop SA
+*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*
+* Don't forget to prefix your containers with your own identifier
+* to avoid any conflicts with others containers.
+*/
+
+.vatchecker-reload {
+	position: relative;
+	float: right;
+	margin: .2em;
+	width: 1em;
+	height: 1em;
+	display: inline-block;
+	border: 3px solid;
+	border-color: currentColor #0000  currentColor #0000;
+	border-radius: 50%;
+	box-sizing: border-box;
+	cursor: pointer;
+}
+.vatchecker-reload:before , .vatchecker-reload:after{
+	content: '';
+	top: 0;
+	left: 0;
+	position: absolute;
+	border: 0.25em solid transparent;
+	border-bottom-color: currentColor;
+	transform: translate(-0.33em,.17em) rotate(-35deg);
+}
+.vatchecker-reload:after {
+	border-color:  currentColor #0000 #0000 #0000 ;
+	transform: translate(.47em,-0.02em) rotate(-35deg);
+}
+.vatchecker-reload.rotate {
+	animation: 1s rotate linear infinite;
+}
+@keyframes rotate {
+	100%{ transform: rotate(360deg) }
+}

views/js/front.js

@@ -32,19 +32,34 @@ jQuery( function( $ ) {
 	var $document = $(document),
 		checked   = {};
 
-	vatchecker.validate = function( vat_number, id_country, $elem ) {
+	vatchecker.validate = function( vat_number, id_country, $elem, $reloader ) {
 		$elem.removeClass( 'validated error text-danger text-success' );
-		$elem.next( '.vat-result' ).remove();
-		$elem.after( '<div class="vat-result small"></div>' );
-		$result = $elem.next( '.vat-result' );
+		$elem.siblings( '.vatchecker-result' ).remove();
+
+		// Remove invalid characters.
+		vat_number = vat_number.toUpperCase().replace( /[^A-Z0-9]/gi, '' );
+		$elem.val( vat_number );
 
 		// Minimal VAT number length is 8 digits.
 		// https://en.wikipedia.org/wiki/VAT_identification_number
 		if ( ! vat_number || vat_number.length < 8 ) {
 			return;
 		}
 
-		var $result          = $elem.next( '.vat-result' ),
+		if ( ! $reloader || ! $reloader.length ) {
+			$reloader = addReload( $elem );
+		} else {
+			// Enfore recheck.
+			delete checked[ vat_number ];
+		}
+
+		if ( $reloader ) {
+			$reloader.after( '<div class="vatchecker-result small"></div>' );
+		} else {
+			$elem.after( '<div class="vatchecker-result small"></div>' );
+		}
+
+		var $result          = $elem.siblings( '.vatchecker-result' ),
 			loading          = '. . . ',
 			loading_interval = setInterval( function() {
 			if ( 20 < loading.length ) {
@@ -60,6 +75,7 @@ jQuery( function( $ ) {
 		}
 
 		$elem.css( { 'opacity': '0.5' } );
+		$reloader.addClass( 'rotate' );
 
 		$.ajax( {
 			type: 'POST',
@@ -88,12 +104,14 @@ jQuery( function( $ ) {
 
 			clearInterval( loading_interval );
 			$result.html('');
+			$reloader.removeClass( 'rotate' );
 			if ( resp.hasOwnProperty( 'valid' ) ) {
 				// Check successful.
 				if ( resp.valid ) {
 					// Valid VAT
 					$elem.addClass( 'validated text-success' );
 					$result.remove();
+					$reloader.remove();
 
 					checked[ vat_number ] = resp;
 				} else if ( resp.error ) {
@@ -112,16 +130,33 @@ jQuery( function( $ ) {
 		}
 	};
 
+	function addReload( input ) {
+		var $vat    = $( input ),
+			$reloader = $vat.siblings( '.vatchecker-reload' );
+
+		if ( $reloader.length ) {
+			return $reloader;
+		}
+
+		$vat.after( '<span class="vatchecker-reload"></span>' );
+		$reloader = $vat.siblings( '.vatchecker-reload' );
+
+		$reloader.on( 'click touchend', function() {
+			var $form    = $vat.parents( 'form' ),
+				$country = $form.find('[name="id_country"]');
+
+			vatchecker.validate( $vat.val(), $country.val(), $vat, $reloader );
+		} );
+
+		return $reloader;
+	}
+
 	$document.on( 'blur', '[name="vat_number"]', function () {
 		var $vat     = $( this ),
 			$form    = $vat.parents( 'form' ),
-			$country = $form.find('[name="id_country"]'),
-
-			// Remove invalid characters.
-			val = $vat.val().toUpperCase().replace( /[^A-Z0-9]/gi, '' );
+			$country = $form.find('[name="id_country"]');
 
-		$vat.val( val );
-		vatchecker.validate( $( this ).val(), $country.val(), $vat );
+		vatchecker.validate( $vat.val(), $country.val(), $vat );
 	} );
 
 	$document.on( 'change', '[name="id_country"]', function() {