Add shortcodes

[MAILPOET-2677]

assets/js/src/settings/pages/basics/index.tsx

@@ -7,6 +7,7 @@ import ManageSubscription from './manage_subscription';
 import UnsubscribePage from './unsubscribe_page';
 import StatsNotifications from './stats_notifications';
 import NewSubscriberNotifications from './new_subscriber_notifications';
+import Shortcode from './shortcode';
 
 export default function Basics() {
   return (
@@ -26,6 +27,16 @@ export default function Basics() {
       <UnsubscribePage />
       <StatsNotifications />
       <NewSubscriberNotifications />
+      <Shortcode
+        name="mailpoet_archive"
+        title={t`archiveShortcodeTitle`}
+        description={t`archiveShortcodeDescription`}
+      />
+      <Shortcode
+        name="mailpoet_subscribers_count"
+        title={t`subscribersCountShortcodeTitle`}
+        description={t`subscribersCountShortcodeDescription`}
+      />
       <SaveButton />
     </div>
   );

assets/js/src/settings/pages/basics/shortcode.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { t } from 'settings/utils';
+import { Label, Inputs, SegmentsSelect } from 'settings/components';
+
+type Props = {
+  name: 'mailpoet_archive' | 'mailpoet_subscribers_count'
+  title: string
+  description: string
+}
+
+export default function Shortcode({ name, title, description }: Props) {
+  const [segments, setSegments] = React.useState([]);
+  const shortcode = `[${name}${segments.length ? ` segments="${segments.join(',')}"` : ''}]`;
+  const selectText = (event) => {
+    event.target.focus();
+    event.target.select();
+  };
+  return (
+    <>
+      <Label
+        title={title}
+        description={description}
+        htmlFor={`${name}-shortcode`}
+      />
+      <Inputs>
+        <input
+          readOnly
+          type="text"
+          value={shortcode}
+          onClick={selectText}
+          className="regular-text"
+          id={`${name}-shortcode`}
+        />
+        <br />
+        <SegmentsSelect
+          value={segments}
+          setValue={setSegments}
+          id={`${name}-shortcode-segments`}
+          placeholder={t`leaveEmptyToDisplayAll`}
+        />
+      </Inputs>
+    </>
+  );
+}

views/settings.html

@@ -76,6 +76,11 @@
     'yes': __('Yes'),
     'no': __('No'),
 
+    'archiveShortcodeTitle': __('Archive page shortcode'),
+    'archiveShortcodeDescription': __('Paste this shortcode on a page to display a list of past newsletters.'),
+    'subscribersCountShortcodeTitle': __('Shortcode to display total number of subscribers'),
+    'subscribersCountShortcodeDescription': __('Paste this shortcode on a post or page to display the total number of confirmed subscribers.'),
+
     'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).'),
     'announcementHeader': __('Get notified when someone subscribes'),
     'announcementParagraph1': __('It’s been a popular feature request from our users, we hope you get lots of emails about all your new subscribers!'),