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>
+    </>
+  );
+}