diff --git a/assets/js/src/settings/pages/basics/index.tsx b/assets/js/src/settings/pages/basics/index.tsx index 3ed2997d68..a626f2ee5f 100644 --- a/assets/js/src/settings/pages/basics/index.tsx +++ b/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() { + + ); diff --git a/assets/js/src/settings/pages/basics/shortcode.tsx b/assets/js/src/settings/pages/basics/shortcode.tsx new file mode 100644 index 0000000000..f359f80bb5 --- /dev/null +++ b/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 ( + <> +