Open settings modal

[MAILPOET-2738]

assets/css/src/components/formEditor/components/_sidebar.scss

@@ -118,12 +118,14 @@ $form-placement-option-oval-border: #969ca1;
   border: solid 1px $form-placement-option-base-color;
   border-radius: 4px;
   box-shadow: 0 1px 2px 0 $form-placement-option-base-color;
+  cursor: pointer;
   display: flex;
   flex-direction: column;
   height: 142px;
   justify-content: space-between;
   margin: 0 16px 16px 0;
   padding: 6px;
+  pointer-events: auto;
   position: relative;
   text-align: center;
   width: 116px;
@@ -134,6 +136,7 @@ $form-placement-option-oval-border: #969ca1;
   border-radius: 2px;
   height: 140px; // width of the parent element minus border on both sides
   left: 0;
+  pointer-events: none;
   position: absolute;
   top: 0;
   width: 114px;
@@ -156,6 +159,7 @@ $form-placement-option-oval-border: #969ca1;
   font-size: 14px;
   height: 40px;
   justify-content: center;
+  pointer-events: none;
   width: 100%;
   z-index: 2;
 
@@ -169,6 +173,7 @@ $form-placement-option-oval-border: #969ca1;
   flex-direction: row;
   height: 25px;
   justify-content: space-between;
+  pointer-events: none;
   width: 100%;
   z-index: 4;
 }
@@ -178,16 +183,19 @@ $form-placement-option-oval-border: #969ca1;
   border: solid 1px $form-placement-option-oval-border;
   border-radius: 7px;
   height: 13px;
+  pointer-events: none;
   width: 13px;
 }
 
 .form-placement-settings-icon {
+  height: 14px;
+  pointer-events: none;
+  width: 14px;
+  z-index: 4;
+
   svg {
     fill: $form-placement-option-base-color;
   }
-  height: 14px;
-  width: 14px;
-  z-index: 4;
 }
 
 .form-placement-settings-icon-hover {
@@ -197,15 +205,17 @@ $form-placement-option-oval-border: #969ca1;
 }
 
 .form-placement-option-icon {
-  svg {
-    height: 63px;
-    width: 76px;
-  }
   background-color: #fff;
   box-shadow: 0 4px 18px 0 rgba(68, 75, 102, .15);
   height: 63px;
   margin: 0 auto;
   object-fit: contain;
+  pointer-events: none;
   width: 76px;
   z-index: 2;
+
+  svg {
+    height: 63px;
+    width: 76px;
+  }
 }

assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import MailPoet from 'mailpoet';
 import { useSelect } from '@wordpress/data';
 
 import FormPlacementOption from './form_placement_option';
 import Icon from './below_pages_icon';
+import Modal from '../../../../common/modal/modal.jsx';
 
 const BelowPages = () => {
+  const [displaySettings, setDisplaySettings] = useState(false);
+
   const placeFormBellowAllPages = useSelect(
     (select) => select('mailpoet-form-editor').placeFormBellowAllPages(),
     []
@@ -17,11 +20,27 @@ const BelowPages = () => {
   );
 
   return (
-    <FormPlacementOption
+    <>
-      label={MailPoet.I18n.t('placeFormBellowPages')}
+      <FormPlacementOption
-      icon={Icon}
+        label={MailPoet.I18n.t('placeFormBellowPages')}
-      active={placeFormBellowAllPages || placeFormBellowAllPosts}
+        icon={Icon}
-    />
+        active={placeFormBellowAllPages || placeFormBellowAllPosts}
+        onClick={() => setDisplaySettings(true)}
+      />
+      {
+        displaySettings
+        && (
+          <Modal
+            title={MailPoet.I18n.t('placeFormBellowPages')}
+            onRequestClose={() => setDisplaySettings(false)}
+          >
+            <p>
+              {MailPoet.I18n.t('placeFormBellowPagesDescription')}
+            </p>
+          </Modal>
+        )
+      }
+    </>
   );
 };
 

assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx

@@ -7,9 +7,15 @@ type Props = {
   label: string,
   icon: JSX.Element,
   active: boolean,
+  onClick: () => void,
 }
 
-const FormPlacementOption = ({ label, icon, active }: Props) => {
+const FormPlacementOption = ({
+  label,
+  icon,
+  active,
+  onClick,
+}: Props) => {
   const [hover, setHover] = useState(false);
   return (
     <div
@@ -21,6 +27,16 @@ const FormPlacementOption = ({ label, icon, active }: Props) => {
       }
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
+      onClick={onClick}
+      onKeyDown={(event) => {
+        if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+        ) {
+          event.preventDefault();
+          onClick();
+        }
+      }}
+      role="button"
+      tabIndex={0}
     >
       <div>
         <div className="form-placement-option-settings">

views/form/editor.html

@@ -60,6 +60,7 @@
   'formSaved': __('Form saved.'),
   'customFieldSaved': __('Custom field saved.'),
   'placeFormBellowPages': _x('Below pages', 'This is a text on a widget that leads to settings for form placement'),
+  'placeFormBellowPagesDescription': __('This form placement allows you to add this form at the end of all the pages or posts, below the content.'),
   'placeFormBellowAllPages': _x('Below all pages', 'This is a text on a switch if a form should be displayed bellow all pages'),
   'placeFormBellowAllPosts': _x('Below all posts', 'This is a text on a switch if a form should be displayed bellow all posts'),
   'addFormWidgetHint': __('Add this form to a [link]widget area[/link].'),