Add settings for re-engagement page

[MAILPOET-3856]

assets/js/src/settings/components/pages_select.tsx

@@ -9,7 +9,7 @@ type Props = {
   automationId?: string;
   linkAutomationId?: string;
   setValue: (x: string) => void;
-  preview: 'manage' | 'unsubscribe' | 'confirm' | 'confirm_unsubscribe';
+  preview: 'manage' | 'unsubscribe' | 'confirm' | 'confirm_unsubscribe' | 're_engagement';
 }
 
 export default (props: Props) => {

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

@@ -9,6 +9,7 @@ import StatsNotifications from './stats_notifications';
 import NewSubscriberNotifications from './new_subscriber_notifications';
 import Shortcode from './shortcode';
 import GdprCompliant from './gdpr_compliant';
+import { ReEngagementPage } from './re_engagement_page';
 
 export default function Basics() {
   return (
@@ -26,6 +27,7 @@ export default function Basics() {
       />
       <ManageSubscription />
       <UnsubscribePage />
+      <ReEngagementPage />
       <StatsNotifications />
       <NewSubscriberNotifications />
       <Shortcode

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { t } from 'common/functions';
+import { useSetting } from 'settings/store/hooks';
+import { Label, Inputs, PagesSelect } from 'settings/components';
+
+export function ReEngagementPage(): JSX.Element {
+  const [reEngagementPage, setReEngagementPage] = useSetting('reEngagement', 'page');
+
+  return (
+    <>
+      <Label
+        title={t('reEngagementTitle')}
+        description={t('reEngagementDescription')}
+        htmlFor="re-engagement-page"
+      />
+      <Inputs>
+        <PagesSelect
+          value={reEngagementPage}
+          preview="re_engagement"
+          setValue={setReEngagementPage}
+          id="re-engagement-page"
+        />
+      </Inputs>
+    </>
+  );
+}

assets/js/src/settings/store/types.ts

@@ -22,6 +22,9 @@ export type Settings = {
       segments: string[];
     };
   };
+  reEngagement: {
+    page: string;
+  };
   subscription: {
     pages: {
       manage: string;