Move placement to modal

[MAILPOET-2873]

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

@@ -1,10 +1,71 @@
-import React from 'react';
+import React, { useState } from 'react';
 import MailPoet from 'mailpoet';
+import ReactStringReplace from 'react-string-replace';
+import { useSelect } from '@wordpress/data';
+import { curry } from 'lodash';
+import { TextareaControl } from '@wordpress/components';
 
 import FormPlacementSettings from './form_placement_settings';
 import Icon from './icons/sidebar_icon';
 
 const Popup = () => {
+  const [copyAreaContent, setCopyAreaContent] = useState(null);
+
+  const formExports = useSelect(
+    (select) => select('mailpoet-form-editor').getFormExports(),
+    []
+  );
+
+  const addFormWidgetHint = ReactStringReplace(
+    MailPoet.I18n.t('addFormWidgetHint'),
+    /\[link](.*?)\[\/link]/g,
+    (match) => (
+      <a key="addFormWidgetHintLink" href="widgets.php" target="_blank">{match}</a>
+    )
+  );
+
+  const addFormShortcodeHint = ReactStringReplace(
+    MailPoet.I18n.t('addFormShortcodeHint'),
+    /\[shortcode]/g,
+    (match) => (<code key={match}>{formExports.shortcode}</code>)
+  );
+
+  const exportLinkClicked = curry((type, event) => {
+    event.preventDefault();
+    MailPoet.trackEvent('Forms > Embed', {
+      'Embed type': type,
+      'MailPoet Free version': (window as any).mailpoet_version,
+    });
+    if (type === 'php') {
+      return setCopyAreaContent(formExports.php);
+    }
+    return setCopyAreaContent(formExports.iframe);
+  });
+
+  const addFormPhpIframeHint = ReactStringReplace(
+    MailPoet.I18n.t('addFormPhpIframeHint'),
+    /\[link](.*?)\[\/link]/g,
+    (match) => {
+      if (match === 'PHP') {
+        return (<a key="exportPHP" href="#" onClick={exportLinkClicked('php')}>{match}</a>);
+      }
+      return (<a key="exportIframe" href="#" onClick={exportLinkClicked('iframe')}>{match}</a>);
+    }
+  );
+
+  const getCopyTextArea = () => {
+    if (!copyAreaContent) return null;
+    return (
+      <TextareaControl
+        key="copyTextArea"
+        readOnly
+        onClick={(event) => (event.target.select())}
+        rows={8}
+        value={copyAreaContent}
+      />
+    );
+  };
+
   return (
     <FormPlacementSettings
       active={false}
@@ -13,7 +74,10 @@ const Popup = () => {
       label={MailPoet.I18n.t('formPlacementOtherLabel')}
       icon={Icon}
     >
-      text text
+      <p>{addFormWidgetHint}</p>
+      <p>{addFormShortcodeHint}</p>
+      <p>{addFormPhpIframeHint}</p>
+      {getCopyTextArea()}
     </FormPlacementSettings>
   );
 };

assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx

@@ -1,13 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Panel,
   PanelBody,
-  TextareaControl,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import MailPoet from 'mailpoet';
-import ReactStringReplace from 'react-string-replace';
-import { curry } from 'lodash';
 import PropTypes from 'prop-types';
 
 import FormPlacementOptionBelowPages from './form_placement_options/below_pages';
@@ -16,105 +12,24 @@ import FormPlacementOptionFixedBar from './form_placement_options/fixed_bar';
 import FormPlacementOptionSlideIn from './form_placement_options/slide_in';
 import FormPlacementOptionOther from './form_placement_options/other';
 
-const FormPlacementPanel = ({ onToggle, isOpened }) => {
+const FormPlacementPanel = ({ onToggle, isOpened }) => (
-  const [copyAreaContent, setCopyAreaContent] = useState(null);
+  <Panel>
-
+    <PanelBody
-  const formExports = useSelect(
+      title={MailPoet.I18n.t('formPlacement')}
-    (select) => select('mailpoet-form-editor').getFormExports(),
+      opened={isOpened}
-    []
+      onToggle={onToggle}
-  );
+      className="form-sidebar-form-placement-panel"
-
+    >
-  const exportLinkClicked = curry((type, event) => {
+      <div className="form-placement-option-list">
-    event.preventDefault();
+        <FormPlacementOptionBelowPages />
-    MailPoet.trackEvent('Forms > Embed', {
+        <FormPlacementOptionFixedBar />
-      'Embed type': type,
+        <FormPlacementOptionPopup />
-      'MailPoet Free version': window.mailpoet_version,
+        <FormPlacementOptionSlideIn />
-    });
+        <FormPlacementOptionOther />
-    if (type === 'php') {
+      </div>
-      return setCopyAreaContent(formExports.php);
+    </PanelBody>
-    }
+  </Panel>
-    return setCopyAreaContent(formExports.iframe);
+);
-  });
-
-  const addFormWidgetHint = ReactStringReplace(
-    MailPoet.I18n.t('addFormWidgetHint'),
-    /\[link](.*?)\[\/link]/g,
-    (match) => (
-      <a key="addFormWidgetHintLink" href="widgets.php" target="_blank">{match}</a>
-    )
-  );
-
-  const addFormShortcodeHint = ReactStringReplace(
-    MailPoet.I18n.t('addFormShortcodeHint'),
-    /(\[link].*\[\/link])|(\[shortcode])/g,
-    (match) => {
-      if (match === '[shortcode]') {
-        return (<code key={match}>{formExports.shortcode}</code>);
-      }
-      if (typeof match === 'string' && match.includes('[link]')) {
-        const link = match.replace(/\[.?link]/g, '');
-        return (
-          <button
-            key={match}
-            className="button-link"
-            type="button"
-            data-beacon-article="5e3a166204286364bc94dda4"
-          >
-            {link}
-          </button>
-        );
-      }
-      return match;
-    }
-  );
-
-  const addFormPhpIframeHint = ReactStringReplace(
-    MailPoet.I18n.t('addFormPhpIframeHint'),
-    /\[link](.*?)\[\/link]/g,
-    (match) => {
-      if (match === 'PHP') {
-        return (<a key="exportPHP" href="#" onClick={exportLinkClicked('php')}>{match}</a>);
-      }
-      return (<a key="exportIframe" href="#" onClick={exportLinkClicked('iframe')}>{match}</a>);
-    }
-  );
-
-  const getCopyTextArea = () => {
-    if (!copyAreaContent) return null;
-    return (
-      <TextareaControl
-        key="copyTextArea"
-        readOnly
-        onClick={(event) => (event.target.select())}
-        rows={8}
-        value={copyAreaContent}
-      />
-    );
-  };
-
-  return (
-    <Panel>
-      <PanelBody
-        title={MailPoet.I18n.t('formPlacement')}
-        opened={isOpened}
-        onToggle={onToggle}
-        className="form-sidebar-form-placement-panel"
-      >
-        <div className="form-placement-option-list">
-          <FormPlacementOptionBelowPages />
-          <FormPlacementOptionFixedBar />
-          <FormPlacementOptionPopup />
-          <FormPlacementOptionSlideIn />
-          <FormPlacementOptionOther />
-        </div>
-        <p>{addFormShortcodeHint}</p>
-        <p>{addFormWidgetHint}</p>
-        <p>{addFormPhpIframeHint}</p>
-        {getCopyTextArea()}
-      </PanelBody>
-    </Panel>
-  );
-};
 
 FormPlacementPanel.propTypes = {
   onToggle: PropTypes.func.isRequired,

views/form/editor.html

@@ -88,8 +88,8 @@
   'formPlacementSave': _x('Close', 'Text on a button to save and close a form'),
   'formPlacementOther': _x('Theme widget, block, and others', 'Header in the form placement section'),
   'formPlacementOtherLabel': _x('Other', 'Label in the form placement section (Other form placements)'),
-  'addFormWidgetHint': __('Add this form to a [link]widget area[/link].'),
+  'addFormWidgetHint': __('You can add this form to a [link]widget area of your theme[/link] (new tab).'),
-  'addFormShortcodeHint': __('[link]Use Gutenberg block[/link] available on any page or post. Or use the shortcode [shortcode].'),
+  'addFormShortcodeHint': __('Or in any page or post as a block, or with this shortcode if you prefer [shortcode].'),
   'addFormPhpIframeHint': __('Use [link]PHP[/link] or [link]iFrame[/link].'),
   'settingsListLabel': __('This form adds the subscribers to these lists'),
   'settingsAfterSubmit': __('After submit…'),