Merge pull request #14 from Vendic/feature/add-loading-message

Add loading message, improve feedback speed

Model/Form/Modifier/AddressFormModifiers.php

@@ -81,7 +81,10 @@ public function applyTriggerEventOnVatIdChange(EntityFormInterface $form): void
             return;
         }
 
-        $vatIdField->setAttribute('@keydown', '$dispatch(\'close-vat-message\')');
+        $vatIdField->setAttribute(
+            '@keydown.debounce.300ms',
+            '$dispatch(\'close-vat-message\'); $dispatch(\'vat-id-changed\', $event.target.value)'
+        );
         $vatIdField->setAttribute('@change.debounce', '$dispatch(\'vat-id-changed\', $event.target.value)');
     }
 

i18n/de_DE.csv

@@ -1 +1,2 @@
 "The country code from the VAT number does not match the selected country.","Die Länderkennung der USt-IdNr. stimmt nicht mit dem ausgewählten Land überein."
+"Validating VAT number...","USt-IdNr. wird überprüft..."

i18n/en_US.csv

@@ -1 +1,2 @@
 "The country code from the VAT number does not match the selected country.","The country code from the VAT number does not match the selected country."
+"Validating VAT number...","Validating VAT number..."

i18n/fr_FR.csv

@@ -1 +1,2 @@
 "The country code from the VAT number does not match the selected country.","Le code pays du numéro de TVA ne correspond pas au pays sélectionné."
+"Validating VAT number...", "Validation du numéro de TVA..."

i18n/nl_BE.csv

@@ -1 +1,2 @@
 "The country code from the VAT number does not match the selected country.","De landcode van het BTW-nummer komt niet overeen met het geselecteerde land."
+"Validating VAT number...","BTW-nummer valideren..."

i18n/nl_NL.csv

@@ -1 +1,2 @@
 "The country code from the VAT number does not match the selected country.","De landcode van het BTW-nummer komt niet overeen met het geselecteerde land."
+"Validating VAT number...","BTW-nummer valideren..."

view/frontend/templates/vat-id/validation-status-js.phtml

@@ -13,6 +13,7 @@
                 requestMessage: '',
                 vatIsValid: false,
                 showFrontendMessage: false,
+                isLoading: false,
 
                 get isVatNumberFilled() {
                     return this.vatNumber.length > 0;
@@ -37,6 +38,7 @@
                     this.showFrontendMessage = false;
                     this.requestMessage = '';
                     this.vatIsValid = false;
+                    this.isLoading = false;
                     this.refreshPrices();
                 },
 
@@ -47,6 +49,7 @@
                  */
                 closeMessage() {
                     this.showFrontendMessage = false;
+                    this.isLoading = false;
                     this.requestMessage = '';
                 },
 
@@ -63,6 +66,7 @@
                     //Trigger update order total summary
                     setTimeout(() => {
                         Magewire.emitTo('price-summary.total-segments', 'refresh');
+                        this.isLoading = false;
                     }, this.autoSaveTime);
                 },
 
@@ -79,7 +83,9 @@
                         return;
                     }
 
-                    console.debug(`Start VAT validation ${this.vatNumber} for country ${this.countryId}`);
+                    this.isLoading = true;
+                    this.showFrontendMessage = true;
+                    this.requestMessage = '<?= $escaper->escapeJs(__('Validating VAT number...')) ?>';
 
                     const requestUrl = `${BASE_URL}euvat/vatnumber/validation`;
                     const params = new URLSearchParams({
@@ -99,7 +105,6 @@
                             return response.json();
                         })
                         .then(data => {
-                            console.debug(data);
                             if (data.request_message !== undefined) {
                                 this.requestMessage = data.request_message;
                             }
@@ -113,6 +118,7 @@
                         .finally(() => {
                             this.showFrontendMessage = true;
                             this.refreshPrices();
+                            this.isLoading = false;
                         });
                 }
             };

view/frontend/templates/vat-id/validation-status.phtml

@@ -15,35 +15,39 @@ $heroIcons = $viewModels->require(\Hyva\Theme\ViewModel\HeroiconsOutline::class)
 // The reason thay are seperated is because this component gets hidden by magewire based on conditions (see
 // ShippingAdddressModifiers). By placing the JS in a seperate file, that's always loaded we avoid any errors.
 
+$autoSaveTimeout = $block->getData('auto_save_timeout') ?? $magewire->getAutoSaveTimeout();
 ?>
 <div id="vat-request-status"
      x-data="initVatButton()"
      x-init="
         vatNumber = '<?= $escaper->escapeJs($magewire->address['vat_id'] ?? '')?>';
         countryId = '<?= $escaper->escapeJs($magewire->address['country_id'] ?? '')?>';
-        autoSaveTime = '<?= $escaper->escapeJs($magewire->getAutoSaveTimeout())?>';
+        autoSaveTime = '<?= $escaper->escapeJs($autoSaveTimeout)?>';
      "
      @country-id-changed.window="countryId = $event.detail; resetValidation()"
      @vat-id-changed.window="validate($event.detail)"
      @close-vat-message.window="closeMessage()"
 >
-    <div class="rounded-md p-4 my-2"
-         :class="{'bg-green-50': vatIsValid, 'bg-red-50': ! vatIsValid}"
+    <div class="rounded-sm p-4 my-2 border-gray-200 border"
+         :class="{'bg-green-50': vatIsValid && !isLoading, 'bg-red-50': ! vatIsValid && !isLoading, 'bg-blue-50': isLoading}"
          x-show="showFrontendMessage"
          x-transition
     >
         <div class="flex">
             <div class="flex-shrink-0">
-                <div x-show="vatIsValid" class="text-green-400">
+                <div x-show="!isLoading && vatIsValid" class="text-green-400">
                     <?= /* @noEscape */ $heroIcons->checkCircleHtml('h-5 w-5 stroke-green-400') ?>
                 </div>
-                <div x-show="!vatIsValid" class="text-red-400">
+                <div x-show="!isLoading && !vatIsValid" class="text-red-400">
                     <?= /* @noEscape */ $heroIcons->exclamationCircleHtml('h-5 w-5 stroke-red-400') ?>
                 </div>
+                <div x-show="isLoading" class="text-blue-400">
+                    <?= /* @noEscape */ $heroIcons->refreshHtml('h-5 w-5 animate-spin') ?>
+                </div>
             </div>
             <div class="ml-3">
                 <p x-text="requestMessage"
-                   :class="{'text-green-800': vatIsValid, 'text-red-800': ! vatIsValid}"
+                   :class="{'text-green-800': vatIsValid && !isLoading, 'text-red-800': ! vatIsValid && !isLoading, 'text-blue-800': isLoading}"
                    class="text-sm font-medium"></p>
             </div>
             <div class="ml-auto cursor-pointer" @click="closeMessage()">