From b6f61a33eb77c7fd171f80c8e087c5e6b1cdeacf Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Wed, 11 Mar 2020 23:40:32 +0100
Subject: [PATCH] Add Unsubscribe page

[MAILPOET-2677]
---
 assets/js/src/settings/pages/basics/index.tsx |  2 ++
 .../pages/basics/unsubscribe_page.tsx         | 32 +++++++++++++++++++
 views/settings.html                           |  3 ++
 3 files changed, 37 insertions(+)
 create mode 100644 assets/js/src/settings/pages/basics/unsubscribe_page.tsx

diff --git a/assets/js/src/settings/pages/basics/index.tsx b/assets/js/src/settings/pages/basics/index.tsx
index c4bbdb7095..66b7256c21 100644
--- a/assets/js/src/settings/pages/basics/index.tsx
+++ b/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>
   );
diff --git a/assets/js/src/settings/pages/basics/unsubscribe_page.tsx b/assets/js/src/settings/pages/basics/unsubscribe_page.tsx
new file mode 100644
index 0000000000..ccf9d47cb5
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/views/settings.html b/views/settings.html
index 660a2a3145..8e154aef6e 100644
--- a/views/settings.html
+++ b/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'),