Merge branch 'MPGS-430' into 'master'

MPGS-430: Fix the following issue: The payment was declined, but error message isn't shown

See merge request mpgs/simplify-prestashop!7

simplifycommerce.php

@@ -606,7 +606,12 @@ public function processPayment()
         }
 
         if ($payment_status != 'APPROVED') {
-            $this->failPayment('The transaction was ' . $payment_status);
+            $this->failPayment(
+                sprintf(
+                    "The payment was %s",
+                    $payment_status
+                )
+            );
         }
 
         // Log the transaction
@@ -780,8 +785,12 @@ private function failPayment($message)
 
         $controller = Configuration::get('PS_ORDER_PROCESS_TYPE') ? 'order-opc.php' : 'order.php';
         error_log($message);
-        $location = $this->context->link->getPageLink($controller) . (strpos($controller, '?') !== false ? '&' : '?') .
-            'step=3&simplify_error=There was a problem with your payment: ' . $message . '#simplify_error';
+        $location = sprintf(
+            "%s%sstep=3&simplify_error=There was a problem with your payment: %s.#simplify_error",
+            $this->context->link->getPageLink($controller),
+            strpos($controller, '?') !== false ? '&' : '?',
+            $message
+        );
         Tools::redirect($location);
         exit;
     }

views/css/style.css

@@ -755,6 +755,7 @@ i.simplifyFormContainer mg.enable {
     font-size: 0.875rem;
     background: #ffcccc;
     margin-top: 1rem;
+    display: block;
 }
 
 .simplify-form-container .simplify-payment-errors.hidden {

views/js/simplify.embedded.js

@@ -114,31 +114,31 @@ $(function () {
         })
     });
 
-    elements.deleteSavedCardAction.on('click', function(e) {
+    elements.deleteSavedCardAction.on('click', function (e) {
         e.stopPropagation();
         setState({
             isCardDeletionInProgress: true,
             isCardDeleted: false,
         })
     });
 
-    elements.savedCardDeletionUndoAction.on('click', function(e) {
+    elements.savedCardDeletionUndoAction.on('click', function (e) {
         e.stopPropagation();
         setState({
             isCardDeletionInProgress: false,
             isCardDeleted: false,
         })
     });
 
-    elements.savedCardCancelDeletionAction.on('click', function(e) {
+    elements.savedCardCancelDeletionAction.on('click', function (e) {
         e.stopPropagation();
         setState({
             isCardDeletionInProgress: false,
             isCardDeleted: false,
         })
     });
 
-    elements.savedCardConfirmDeletionAction.on('click', function(e) {
+    elements.savedCardConfirmDeletionAction.on('click', function (e) {
         e.stopPropagation();
         setState({
             isCardDeletionInProgress: true,
@@ -147,7 +147,7 @@ $(function () {
         })
     });
 
-    elements.paymentSubmitAction.on('click', function(e) {
+    elements.paymentSubmitAction.on('click', function (e) {
         e.stopPropagation();
         setState({
             isRequestSubmitted: true,
@@ -191,9 +191,14 @@ $(function () {
                 }
 
                 elements.errorsContainer.html(errorList)
+            } else if (state.paymentError.code === "gateway") {
+                elements.errorsContainer.html(state.paymentError.message);
             } else {
-                elements.errorsContainer.html("Error occurred while processing payment, please contact support.");
+                elements.errorsContainer.html(
+                    "An error occurred while processing payment. Please get in touch with support."
+                );
             }
+
             elements.errorsContainer.removeClass('hidden');
         } else {
             elements.errorsContainer.addClass('hidden');
@@ -323,6 +328,50 @@ $(function () {
         }
     }
 
+    /**
+     * Function to get url get parameter from window's location
+     * @returns {*}
+     * @param name
+     * @param url
+     */
+    function getUrlParam(name, url) {
+        var results, res;
+
+        if (!url) {
+            url = window.location.href;
+        }
+        results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
+        res = (results && results[1]) || undefined;
+        return res;
+    }
+
+    /**
+     * This function should be used in the case of error happened with Payment on Backend
+     */
+    function showSimplifyPaymentForm() {
+
+        var id = elements.paymentForm.parents(".js-payment-option-form").attr("id");
+        var match = id && id.match("pay-with-payment-option-([0-9]+)-form");
+        var number = match && match[1];
+        $("#payment-option-" + number).click();
+
+        elements.conditionApproveElement.prop('checked', true);
+        setState({
+            conditionsApproved: elements.conditionApproveElement.is(":checked")
+        })
+    }
+
+    var simplifyError = getUrlParam('simplify_error');
+    if (simplifyError) {
+        showSimplifyPaymentForm();
+        setState({
+            paymentError: {
+                code: "gateway",
+                message: decodeURI(simplifyError)
+            }
+        });
+    }
+
     /**
      * View initialization
      */

views/js/simplify.js

@@ -303,7 +303,6 @@
      * @param url
      * @returns {*}
      */
-
     function urlParam(name, url) {
         if (!url) {
             url = window.location.href;