Redo the form placement page according the spec

[MAILPOET-2639]

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

@@ -35,7 +35,7 @@ const FormPlacementPanel = ({ onToggle, isOpened }) => {
 
   const addFormWidgetHint = ReactStringReplace(
     MailPoet.I18n.t('addFormWidgetHint'),
-    /\[link\](.*?)\[\/link\]/g,
+    /\[link](.*?)\[\/link]/g,
     (match) => (
       <a key="addFormWidgetHintLink" href="widgets.php" target="_blank">{match}</a>
     )
@@ -43,15 +43,22 @@ const FormPlacementPanel = ({ onToggle, isOpened }) => {
 
   const addFormShortcodeHint = ReactStringReplace(
     MailPoet.I18n.t('addFormShortcodeHint'),
-    /\[link\](.*?)\[\/link\]/g,
+    /(\[link].*\[\/link])|(\[shortcode])/g,
-    (match) => (
+    (match) => {
-      <a key="exportShortcode" href="#" onClick={exportLinkClicked('shortcode')}>{match}</a>
+      if (match === '[shortcode]') {
-    )
+        return (<code key={match}>{formExports.shortcode}</code>);
+      }
+      if (typeof match === 'string' && match.includes('[link]')) {
+        const link = match.replace(/\[.?link]/g, '');
+        return (<a key={match} href="TODO KB link" target="_blank">{link}</a>);
+      }
+      return match;
+    }
   );
 
   const addFormPhpIframeHint = ReactStringReplace(
     MailPoet.I18n.t('addFormPhpIframeHint'),
-    /\[link\](.*?)\[\/link\]/g,
+    /\[link](.*?)\[\/link]/g,
     (match) => {
       if (match === 'PHP') {
         return (<a key="exportPHP" href="#" onClick={exportLinkClicked('php')}>{match}</a>);
@@ -76,8 +83,8 @@ const FormPlacementPanel = ({ onToggle, isOpened }) => {
   return (
     <Panel>
       <PanelBody title={MailPoet.I18n.t('formPlacement')} opened={isOpened} onToggle={onToggle}>
-        <p>{addFormWidgetHint}</p>
         <p>{addFormShortcodeHint}</p>
+        <p>{addFormWidgetHint}</p>
         <p>{addFormPhpIframeHint}</p>
         {getCopyTextArea()}
       </PanelBody>

views/form/editor.html

@@ -40,9 +40,9 @@
   'customCss': _x('Custom CSS', 'A settings section heading'),
   'formSaved': __('Form saved.'),
   'customFieldSaved': __('Custom field saved.'),
-  'addFormWidgetHint': __('Add this form to your sidebar or footer on the [link]Widgets page[/link].'),
+  'addFormWidgetHint': __('Add this form to a [link]widget area[/link].'),
-  'addFormShortcodeHint': __('Copy and paste this [link]shortcode[/link] on to a post or page.'),
+  'addFormShortcodeHint': __('[link]Use Gutenberg block[/link] available on any page or post. Or use the shortcode [shortcode].'),
-  'addFormPhpIframeHint': __('[link]PHP[/link] and [link]iFrame[/link] versions are also available.'),
+  'addFormPhpIframeHint': __('Use [link]PHP[/link] or [link]iFrame[/link].'),
   'settingsListLabel': __('This form adds the subscribers to these lists'),
   'settingsAfterSubmit': __('After submit…'),
   'settingsShowMessage': __('Show message'),