Merge branch 'hotfix/issue-11' into 'master'

Fixes #11 - Display error messages next to or below the specific fields

Closes #11

See merge request !9

app/code/Trilix/CrefoPay/Helper/Order.php

 <?php
+
 namespace Trilix\CrefoPay\Helper;
 
 use Magento\Framework\Api\SearchCriteriaBuilder;

app/code/Trilix/CrefoPay/Observer/OrderEmail.php

 <?php
+
 namespace Trilix\CrefoPay\Observer;
 
 use Magento\Framework\Event\Observer;

app/code/Trilix/CrefoPay/i18n/de_DE.csv

@@ -112,3 +112,5 @@ Sofort,"Sofort."
 "Male", "Männlich"
 "Female", "Weiblich"
 "Choose...","Wählen Sie ihr Geschlecht"
+
+"Please check entered data.","Bitte überprüfen Sie Ihre Eingaben."

app/code/Trilix/CrefoPay/i18n/es_ES.csv

@@ -8,3 +8,5 @@
 "Male", "Male"
 "Female", "Female"
 "Choose...","Choose..."
+
+"Please check entered data.","Por favor revise sus entradas."

app/code/Trilix/CrefoPay/i18n/fr_FR.csv

@@ -9,3 +9,5 @@
 "Female", "Madame"
 "Choose...","Choisissez votre genre"
 "Gender","Genre"
+
+"Please check entered data.","S'il vous plaît vérifier vos entrées."

app/code/Trilix/CrefoPay/i18n/it_IT.csv

@@ -9,3 +9,5 @@
 "Male", "Signor"
 "Female", "Signora"
 "Choose...","Scegli il tuo genere"
+
+"Please check entered data.","Si prega di controllare le voci."

app/code/Trilix/CrefoPay/i18n/nl_NL.csv

@@ -8,3 +8,5 @@
 "Male", "Male"
 "Female", "Female"
 "Choose...","Choose..."
+
+"Please check entered data.","Controleer uw invoer."

app/code/Trilix/CrefoPay/view/frontend/web/js/view/payment/adapter.js

@@ -22,16 +22,17 @@ define([
             console.log('registered');
             deferred.resolve(response);
         } else {
-            console.log('registered-error');
+            console.log(response.errorDetails);
+
+            // clear previous errors messages
+            $('.crefopay_hosted_fields_errors').text('');
 
-            let compositeErrorMessage = '';
             response.errorDetails.forEach(function(errorElement) {
-                let errorMessage = getErrorMessage(errorElement);
-                // Error during registration, check the response for more details and dynamically show a message for the customer
-                compositeErrorMessage = compositeErrorMessage + errorMessage;
+                processErrorsMessages(errorElement);
             });
 
-            globalMessageList.addErrorMessage({message: compositeErrorMessage});
+            let message = $.mage.__('Please check entered data.');
+            globalMessageList.addErrorMessage({message: message});
 
             $(window).scrollTop(0); // Scroll error message into view
         }
@@ -41,33 +42,39 @@ define([
      * @param errorElement
      * @returns {*|string}
      */
-    function getErrorMessage(errorElement) {
+    function processErrorsMessages(errorElement) {
         let message = '';
 
         switch('error.' + errorElement.field + '.' + errorElement.message) {
             case 'error.paymentInstrument.iban.field.invalid':
                 message = $.mage.__('error.paymentInstrument.iban.field.invalid');
+                $('#directDebit_iban').text(message);
                 break;
             case 'error.paymentInstrument.bic.field.invalid':
                 message = $.mage.__('error.paymentInstrument.bic.field.invalid');
+                $('#directDebit_bic').text(message);
                 break;
             case 'error.paymentInstrument.accountHolder.field.invalid':
                 message = $.mage.__('error.paymentInstrument.accountHolder.field.invalid');
+                $('#creditCard_accountHolder').text(message);
                 break;
             case 'error.paymentInstrument.validity.field.invalid':
                 message = $.mage.__('error.paymentInstrument.validity.field.invalid');
+                $('#creditCard_validity').text(message);
                 break;
             case 'error.paymentInstrument.issuer.field.invalid':
                 message = $.mage.__('error.paymentInstrument.issuer.field.invalid');
                 break;
             case 'error.paymentInstrument.number.field.invalid':
                 message = $.mage.__('error.paymentInstrument.number.field.invalid');
+                $('#creditCard_number').text(message);
                 break;
             case 'error.cvv.field.invalid':
                 message = $.mage.__('error.cvv.field.invalid');
                 break;
             case 'error.paymentInstrument.cvv.field.invalid':
                 message = $.mage.__('error.cvv.field.invalid');
+                $('#creditCard_cvv').text(message);
                 break;
             default:
                 message = $.mage.__(errorElement.message);

app/code/Trilix/CrefoPay/view/frontend/web/template/payment/credit_card.html

@@ -37,6 +37,7 @@
                 <div class="control">
                     <div style = "border: 1px solid #c2c2c2; height: 32px; width: 400px" data-crefopay-placeholder="paymentInstrument.accountHolder"
                          class="hosted-control"></div>
+                    <div generated="true" class="mage-error crefopay_hosted_fields_errors" id="creditCard_accountHolder"></div>
                 </div>
             </div>
             <div class="field number required">
@@ -47,6 +48,7 @@
                     <div style = "border: 1px solid #c2c2c2; height: 32px; width: 400px" class="hosted-date-wrap">
                         <div style="height: 32px" data-crefopay-placeholder="paymentInstrument.number"></div>
                     </div>
+                    <div generated="true" class="mage-error crefopay_hosted_fields_errors" id="creditCard_number"></div>
                 </div>
             </div>
             <div class="field number required">
@@ -57,6 +59,7 @@
                     <div style = "border: 1px solid #c2c2c2; height: 32px; width: 400px" class="hosted-date-wrap">
                         <div style="height: 32px" data-crefopay-placeholder="paymentInstrument.validity"></div>
                     </div>
+                    <div generated="true" class="mage-error crefopay_hosted_fields_errors" id="creditCard_validity"></div>
                 </div>
             </div>
             <div class="field number required">
@@ -67,6 +70,7 @@
                     <div style = "border: 1px solid #c2c2c2; height: 32px; width: 400px" class="hosted-date-wrap">
                         <div style="height: 32px" data-crefopay-placeholder="paymentInstrument.cvv"></div>
                     </div>
+                    <div generated="true" class="mage-error crefopay_hosted_fields_errors" id="creditCard_cvv"></div>
                 </div>
             </div>
         </fieldset>

app/code/Trilix/CrefoPay/view/frontend/web/template/payment/direct_debit.html

@@ -69,6 +69,7 @@
                 </label>
                 <div class="control">
                     <input style = "border: 1px solid #c2c2c2; height: 32px; width: 400px" class="hosted-date-wrap" type="text" data-crefopay="paymentInstrument.iban" />
+                    <div generated="true" class="mage-error crefopay_hosted_fields_errors" id="directDebit_iban"></div>
                 </div>
             </div>
             <div class="field required">
@@ -77,6 +78,7 @@
                 </label>
                 <div class="control">
                     <input style = "border: 1px solid #c2c2c2; height: 32px; width: 400px" class="hosted-date-wrap" type="text" data-crefopay="paymentInstrument.bic" />
+                    <div generated="true" class="mage-error crefopay_hosted_fields_errors" id="directDebit_bic"></div>
                 </div>
             </div>
         </fieldset>