Add hpp error message box for each hpp payment method

Enable, disable the place order button based on the payment own
validation
Stop loader when the payment failed some backend validation
Show validation result from the backend on the frontend

view/frontend/web/css/styles.css

@@ -1011,10 +1011,11 @@
     max-width: 290px;
 }
 
-#iDealContainer .adyen-checkout__dropdown--large{
-    margin-left: 21px;
-}
-
 #iDealContainer .adyen-checkout__dropdown__element{
     margin-bottom: 0;
 }
+
+.message.error.hpp-message{
+    margin-top: 10px;
+    display: none;
+}
\ No newline at end of file

view/frontend/web/js/view/payment/method-renderer/adyen-hpp-method.js

@@ -164,6 +164,12 @@ define(
                     result.value = value.brandCode;
                     result.name = value;
                     result.method = self.item.method;
+                    /**
+                     * Observable to enable and disable place order buttons for payment methods
+                     * Default value is true to be able to send the real hpp requiests that doesn't require any input
+                     * @type {observable}
+                     */
+                    result.placeOrderAllowed = ko.observable(true);
                     result.getCode = function () {
                         return self.item.method;
                     };
@@ -176,6 +182,17 @@ define(
                     result.isPlaceOrderActionAllowed = function(bool) {
                         return self.isPlaceOrderActionAllowed(bool);
                     };
+
+                    /**
+                     * Set and get if the place order action is allowed
+                     * Sets the placeOrderAllowed observable and the original isPlaceOrderActionAllowed as well
+                     * @param bool
+                     * @returns {*}
+                     */
+                    result.isPlaceOrderAllowed = function(bool) {
+                        self.isPlaceOrderActionAllowed(bool);
+                        return result.placeOrderAllowed(bool);
+                    };
                     result.afterPlaceOrder = function() {
                         return self.afterPlaceOrder();
                     };
@@ -227,7 +244,7 @@ define(
                      * sets up the callbacks for ideal components and
                      */
                     result.renderIdealComponent = function () {
-                        self.isPlaceOrderActionAllowed(false);
+                        result.isPlaceOrderAllowed(false);
 
                         var secureFieldsNode = document.getElementById('iDealContainer');
 
@@ -240,15 +257,15 @@ define(
                             onChange: function (state) {
                                 // isValid is not present on start
                                 if (typeof state.isValid !== 'undefined' && state.isValid === false) {
-                                    self.isPlaceOrderActionAllowed(false);
+                                    result.isPlaceOrderAllowed(false);
                                 }
                             },
                             onValid: function (state) {
                                 result.issuerId(state.data.issuer);
-                                self.isPlaceOrderActionAllowed(true);
+                                result.isPlaceOrderAllowed(true);
                             },
                             onError: function (state) {
-                                self.isPlaceOrderActionAllowed(false);
+                                result.isPlaceOrderAllowed(false);
                             }
                         });
 
@@ -373,18 +390,31 @@ define(
             placeRedirectOrder: function(data) {
                 // Place Order but use our own redirect url after
                 var self = this;
+                fullScreenLoader.startLoader();
 
                 var messageContainer = this.messageContainer;
                 if(brandCode()) {
                     messageContainer = self.messageComponents['messages-' + brandCode()];
                 }
 
+                $('.hpp-message').slideUp();
+
                 this.isPlaceOrderActionAllowed(false);
-                fullScreenLoader.startLoader();
                 $.when(
                     placeOrderAction(data, messageContainer)
                 ).fail(
-                    function () {
+                    function (response) {
+                        fullScreenLoader.stopLoader();
+                        //messageContainer.addErrorMessage((response['responseJSON'].message).replace('%1', response['responseJSON'].parameters[0]));
+                        if (!!response['responseJSON'].parameters) {
+                            $("#messages-" + brandCode()).text((response['responseJSON'].message).replace('%1', response['responseJSON'].parameters[0])).slideDown();
+                        } else {
+                            $("#messages-" + brandCode()).text(response['responseJSON'].message).slideDown();
+                        }
+
+                        setTimeout(function(){
+                            $("#messages-" + brandCode()).slideUp();
+                        }, 10000);
                         self.isPlaceOrderActionAllowed(true);
                     }
                 ).done(

view/frontend/web/template/payment/hpp-form.html

@@ -173,11 +173,15 @@
                     <!-- ko template: getTemplate() --><!-- /ko -->
                     <!--/ko-->
                 </div>
+                <div>
+                    <span class="message message-error error hpp-message" data-bind="attr: {id: 'messages-' + value}"></span>
+                </div>
+
                 <div class="actions-toolbar">
                     <div class="primary">
                         <button class="action primary checkout"
                                 type="submit"
-                                data-bind="click: $parent.continueToAdyenBrandCode, enable: (value == $parent.isBrandCodeChecked())"
+                                data-bind="click: $parent.continueToAdyenBrandCode, enable: placeOrderAllowed()"
                                 disabled>
                             <span data-bind="text: $t('Place Order')"></span>
                         </button>