Update email editor mailpoet sidebar implementation

MAILPOET-6431

mailpoet/assets/js/src/mailpoet-email-editor-integration/email-sidebar-extension.tsx

@@ -1,8 +1,4 @@
-import {
-  ExternalLink,
-  __experimentalText as Text, // eslint-disable-line
-  TextareaControl,
-} from '@wordpress/components';
+import { ExternalLink } from '@wordpress/components';
 import { select, dispatch } from '@wordpress/data';
 import { store as coreDataStore, useEntityProp } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
@@ -13,7 +9,7 @@ import classnames from 'classnames';
 const previewTextMaxLength = 150;
 const previewTextRecommendedLength = 80;
 
-export function EmailSidebarExtension() {
+export function EmailSidebarExtensionBody({ RichTextWithButton }) {
   const [mailpoetEmailData] = useEntityProp(
     'postType',
     'mailpoet_email',
@@ -47,7 +43,7 @@ export function EmailSidebarExtension() {
 
   const subjectHelp = createInterpolateElement(
     __(
-      'Use shortcodes to personalize your email, or learn more about <bestPracticeLink>best practices</bestPracticeLink> and using <emojiLink>emoji in subject lines</emojiLink>.',
+      'Use personalization tags to personalize your email, or learn more about <bestPracticeLink>best practices</bestPracticeLink> and using <emojiLink>emoji in subject lines</emojiLink>.',
       'mailpoet',
     ),
     {
@@ -57,6 +53,7 @@ export function EmailSidebarExtension() {
           href="https://www.mailpoet.com/blog/17-email-subject-line-best-practices-to-boost-engagement/"
           target="_blank"
           rel="noopener noreferrer"
+          onClick={() => {}}
         />
       ),
       emojiLink: (
@@ -65,66 +62,15 @@ export function EmailSidebarExtension() {
           href="https://www.mailpoet.com/blog/tips-using-emojis-in-subject-lines/"
           target="_blank"
           rel="noopener noreferrer"
+          onClick={() => {}}
         />
       ),
     },
   );
 
-  const subjectLabel = (
-    <>
-      <span>{__('Subject', 'mailpoet')}</span>
-      <ExternalLink href="https://kb.mailpoet.com/article/215-personalize-newsletter-with-shortcodes#list">
-        {__('Shortcode guide', 'mailpoet')}
-      </ExternalLink>
-    </>
-  );
-
   const previewTextLength = mailpoetEmailData?.preheader?.length ?? 0;
 
-  const preheaderLabel = (
-    <>
-      <span>{__('Preview text', 'mailpoet')}</span>
-      <span
-        className={classnames('mailpoet-settings-panel__preview-text-length', {
-          'mailpoet-settings-panel__preview-text-length-warning':
-            previewTextLength > previewTextRecommendedLength,
-          'mailpoet-settings-panel__preview-text-length-error':
-            previewTextLength > previewTextMaxLength,
-        })}
-      >
-        {previewTextLength}/{previewTextMaxLength}
-      </span>
-    </>
-  );
-
-  return (
-    <>
-      <TextareaControl
-        className="mailpoet-settings-panel__subject"
-        label={subjectLabel}
-        placeholder={__('Eg. The summer sale is here!', 'mailpoet')}
-        value={mailpoetEmailData?.subject ?? ''}
-        onChange={(value) => updateEmailMailPoetProperty('subject', value)}
-        data-automation-id="email_subject"
-      />
-      <div className="mailpoet-settings-panel__help">
-        <Text>{subjectHelp}</Text>
-      </div>
-
-      <TextareaControl
-        className="mailpoet-settings-panel__preview-text"
-        label={preheaderLabel}
-        placeholder={__(
-          "Add a preview text to capture subscribers' attention and increase open rates.",
-          'mailpoet',
-        )}
-        value={mailpoetEmailData?.preheader ?? ''}
-        onChange={(value) => updateEmailMailPoetProperty('preheader', value)}
-        data-automation-id="email_preview_text"
-      />
-      <div className="mailpoet-settings-panel__help">
-        <Text>
-          {createInterpolateElement(
+  const preheaderHelp = createInterpolateElement(
     __(
       '<link>This text</link> will appear in the inbox, underneath the subject line.',
       'mailpoet',
@@ -140,12 +86,63 @@ export function EmailSidebarExtension() {
           key="preview-text-kb"
           target="_blank"
           rel="noopener noreferrer"
+          onClick={() => {}}
         />
       ),
     },
+  );
+
+  return (
+    <>
+      <RichTextWithButton
+        attributeName="subject"
+        attributeValue={mailpoetEmailData?.subject || 'subject'}
+        updateProperty={updateEmailMailPoetProperty}
+        label={__('Subject', 'mailpoet')}
+        labelSuffix={
+          <ExternalLink
+            href="https://kb.mailpoet.com/article/435-a-guide-to-personalisation-tags-for-tailored-newsletters#list"
+            onClick={() => {}}
+          >
+            {__('Guide', 'mailpoet')}
+          </ExternalLink>
+        }
+        help={subjectHelp}
+        placeholder={__('Eg. The summer sale is here!', 'mailpoet')}
+      />
+
+      <br />
+
+      <RichTextWithButton
+        attributeName="preheader"
+        attributeValue={mailpoetEmailData?.preheader || 'preheader'}
+        updateProperty={updateEmailMailPoetProperty}
+        label={__('Preview text', 'mailpoet')}
+        labelSuffix={
+          <span
+            className={classnames(
+              'mailpoet-settings-panel__preview-text-length',
+              {
+                'mailpoet-settings-panel__preview-text-length-warning':
+                  previewTextLength > previewTextRecommendedLength,
+                'mailpoet-settings-panel__preview-text-length-error':
+                  previewTextLength > previewTextMaxLength,
+              },
             )}
-        </Text>
-      </div>
+          >
+            {previewTextLength}/{previewTextMaxLength}
+          </span>
+        }
+        help={preheaderHelp}
+        placeholder={__(
+          "Add a preview text to capture subscribers' attention and increase open rates.",
+          'mailpoet',
+        )}
+      />
     </>
   );
 }
+
+export function EmailSidebarExtension(RichTextWithButton: JSX.Element) {
+  return <EmailSidebarExtensionBody RichTextWithButton={RichTextWithButton} />;
+}

mailpoet/assets/js/src/mailpoet-email-editor-integration/index.ts

@@ -59,5 +59,6 @@ addFilter(
 addFilter(
   'mailpoet_email_editor_setting_sidebar_extension_component',
   'mailpoet',
-  () => EmailSidebarExtension,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  (RichTextWithButton) => EmailSidebarExtension.bind(null, RichTextWithButton),
 );

packages/js/email-editor/src/components/sidebar/details-panel.tsx

@@ -9,10 +9,11 @@ import { applyFilters } from '@wordpress/hooks';
  * Internal dependencies
  */
 import { recordEvent } from '../../events';
+import { RichTextWithButton } from '../personalization-tags/rich-text-with-button';
 
 const SidebarExtensionComponent = applyFilters(
 	'mailpoet_email_editor_setting_sidebar_extension_component',
-	<br />
+	RichTextWithButton
 ) as JSX.Element;
 
 export function DetailsPanel() {

packages/js/email-editor/src/store/types.ts

@@ -210,13 +210,6 @@ export type State = {
 	};
 };
 
-export type MailPoetEmailData = {
-	id: number;
-	subject: string;
-	preheader: string;
-	preview_url: string;
-};
-
 export type EmailTemplate = {
 	id: string;
 	slug: string;