From eee64cf4bd6e9d6dbdd04d642037e56578cf9332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <lysyjan87@gmail.com>
Date: Mon, 2 Nov 2020 16:00:16 +0100
Subject: [PATCH] Hide form elements after sent a show center success message
 [MAILPOET-3195]

---
 assets/css/src/components-public/_public.scss | 12 +++++++++++
 assets/js/src/public.jsx                      | 20 +++++++++++++------
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/assets/css/src/components-public/_public.scss b/assets/css/src/components-public/_public.scss
index 476f166b1d..97014fa076 100644
--- a/assets/css/src/components-public/_public.scss
+++ b/assets/css/src/components-public/_public.scss
@@ -42,6 +42,18 @@ $form-line-height: 1.4;
     }
   }
 
+  &.mailpoet_form_successfully_send {
+    position: relative;
+
+    .mailpoet_validate_success {
+      left: 50%;
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
   .mailpoet-has-background-color {
     padding: 20px 30px;
   }
diff --git a/assets/js/src/public.jsx b/assets/js/src/public.jsx
index af220c33da..9246bf1097 100644
--- a/assets/js/src/public.jsx
+++ b/assets/js/src/public.jsx
@@ -81,6 +81,19 @@ jQuery(($) => {
     }
   }
 
+  function displaySuccessMessage(form) {
+    // hide all form elements instead of .mailpoet_message
+    form.children().not('.mailpoet_message').css('visibility', 'hidden');
+    // add class that form was successfully send
+    form.toggleClass('mailpoet_form_successfully_send');
+    // display success message
+    form.find('.mailpoet_validate_success').show();
+    // hide elements marked with a class
+    form.find('.mailpoet_form_hide_on_success').each(function hideOnSuccess() {
+      $(this).hide();
+    });
+  }
+
   function showForm(formDiv, showOverlay = false) {
     const form = formDiv.find('form');
     let delay = form.data('delay');
@@ -232,12 +245,7 @@ jQuery(($) => {
               // go to page
               window.location.href = response.meta.redirect_url;
             } else {
-              // display success message
-              form.find('.mailpoet_validate_success').show();
-              // hide elements marked with a class
-              form.find('.mailpoet_form_hide_on_success').each(function hideOnSuccess() {
-                $(this).hide();
-              });
+              displaySuccessMessage(form);
             }
 
             // reset form