Add Unsubscribe page

[MAILPOET-2677]

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

@@ -4,6 +4,7 @@ import { t } from 'settings/utils';
 import DefaultSender from './default_sender';
 import SubscribeOn from './subscribe_on';
 import ManageSubscription from './manage_subscription';
+import UnsubscribePage from './unsubscribe_page';
 
 export default function Basics() {
   return (
@@ -20,6 +21,7 @@ export default function Basics() {
         description={t`subscribeInRegistrationDescription`}
       />
       <ManageSubscription />
+      <UnsubscribePage />
       <SaveButton />
     </div>
   );

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { t } from 'settings/utils';
+import { useSetting } from 'settings/store/hooks';
+import { Label, Inputs, PagesSelect } from 'settings/components';
+
+export default function UnsubscribePage() {
+  const [page, setPage] = useSetting('subscription', 'pages', 'unsubscribe');
+  return (
+    <>
+      <Label
+        title={t`unsubscribeTitle`}
+        description={(
+          <>
+            {t`unsubscribeDescription1`}
+            <br />
+            {t`unsubscribeDescription2`}
+          </>
+        )}
+        htmlFor="subscription-pages-unsubscribe"
+      />
+      <Inputs>
+        <PagesSelect
+          value={page}
+          preview="unsubscribe"
+          setValue={setPage}
+          id="subscription-pages-unsubscribe"
+          linkAutomationId="unsubscribe_page_preview_link"
+        />
+      </Inputs>
+    </>
+  );
+}

views/settings.html

@@ -58,6 +58,9 @@
     'subscribersCanChooseFrom': __('Subscribers can choose from these lists:'),
     'leaveEmptyToDisplayAll': __('Leave this field empty to display all lists'),
 
+    'unsubscribeTitle': __('Unsubscribe page'),
+    'unsubscribeDescription1': __('When your subscribers click the "Unsubscribe" link, they will be directed to this page.'),
+    'unsubscribeDescription2': __('If you want to use a custom Unsubscribe page, simply paste this shortcode on to a WordPress page: [mailpoet_manage text="Manage your subscription"]'),
 
     'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).'),
     'announcementHeader': __('Get notified when someone subscribes'),