Display form on mouse exit

[MAILPOET-3057]

assets/js/src/public.jsx

@@ -70,6 +70,15 @@ jQuery(($) => {
     });
   }
 
+  function doDisplayForm(formDiv, showOverlay) {
+    formDiv.addClass('active');
+    checkFormContainer(formDiv);
+
+    if (showOverlay) {
+      formDiv.prev('.mailpoet_form_popup_overlay').addClass('active');
+    }
+  }
+
   function showForm(formDiv, showOverlay = false) {
     const form = formDiv.find('form');
     const position = form.data('position');
@@ -82,13 +91,16 @@ jQuery(($) => {
       delay = 0;
     }
     setTimeout(() => {
-      formDiv.addClass('active');
+      doDisplayForm(formDiv, showOverlay);
-      checkFormContainer(formDiv);
-
-      if (showOverlay) {
-        formDiv.prev('.mailpoet_form_popup_overlay').addClass('active');
-      }
     }, delay * 1000);
+
+    const exitIntentEnabled = form.data('exit-intent-enabled');
+    if (exitIntentEnabled) {
+      $(document).on('mouseleave', () => {
+        doDisplayForm(formDiv, showOverlay);
+        $(document).off('mouseleave');
+      });
+    }
   }
 
   const closeForm = (formDiv) => {

lib/Form/DisplayFormInWPContent.php

@@ -157,6 +157,13 @@ class DisplayFormInWPContent {
     $templateData['position'] = $formSettings['form_placement'][$displayType]['position'] ?? '';
     $templateData['backgroundColor'] = $formSettings['backgroundColor'] ?? '';
     $templateData['fontFamily'] = $formSettings['font_family'] ?? '';
+    $templateData['enableExitIntent'] = false;
+    if (
+      isset($formSettings['form_placement'][$displayType]['exit_intent_enabled'])
+      && ($formSettings['form_placement'][$displayType]['exit_intent_enabled'] === '1')
+    ) {
+      $templateData['enableExitIntent'] = true;
+    }
 
     // generate security token
     $templateData['token'] = Security::generateToken();

views/form/front_end_form.html

@@ -34,6 +34,7 @@
       novalidate
       data-delay="<%= delay %>"
       data-position="<%= position %>"
+      data-exit-intent-enabled="<%= enableExitIntent %>"
       data-background-color="<%= backgroundColor %>"
       data-font-family="<%= fontFamily %>"
     >