Add Manage subscription page

[MAILPOET-2677]

assets/js/src/settings/components/index.ts

@@ -3,3 +3,4 @@ export { default as Label } from './label';
 export { default as Inputs } from './inputs';
 export { default as SaveButton } from './save_button';
 export { default as SegmentsSelect } from './segments_select';
+export { default as PagesSelect } from './pages_select';

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 type Props = {
   title: string
-  description: string
+  description: ReactNode
   htmlFor: string
 }
 

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { onChange, t } from 'settings/utils';
+import { useSelector } from 'settings/store/hooks';
+
+type Props = {
+  id?: string
+  value: string
+  linkAutomationId?: string
+  setValue: (x: string) => any
+  preview: 'manage' | 'unsubscribe' | 'confirm'
+}
+
+export default (props: Props) => {
+  const pages = useSelector('getPages')();
+  const selectedPage = props.value
+    ? pages.find((x) => x.id === parseInt(props.value, 10))
+    : pages[0];
+  return (
+    <>
+      <select id={props.id} value={props.value} onChange={onChange(props.setValue)}>
+        {pages.map((page) => (
+          <option key={page.id} value={page.id}>
+            {`${page.title}`}
+          </option>
+        ))}
+      </select>
+      {' '}
+      <a
+        target="_blank"
+        title={t`previewPage`}
+        rel="noopener noreferrer"
+        href={selectedPage.url[props.preview]}
+        data-automation-id={props.linkAutomationId}
+      >
+        {t`preview`}
+      </a>
+    </>
+  );
+};

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

@@ -4,7 +4,7 @@ import 'select2';
 import { useSelector } from 'settings/store/hooks';
 
 type Props = {
-  id?: string
+  id: string
   value: string[]
   placeholder?: string
   setValue: (x: string[]) => any

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

@@ -3,6 +3,7 @@ import { SaveButton } from 'settings/components';
 import { t } from 'settings/utils';
 import DefaultSender from './default_sender';
 import SubscribeOn from './subscribe_on';
+import ManageSubscription from './manage_subscription';
 
 export default function Basics() {
   return (
@@ -18,6 +19,7 @@ export default function Basics() {
         title={t`subscribeInRegistrationTitle`}
         description={t`subscribeInRegistrationDescription`}
       />
+      <ManageSubscription />
       <SaveButton />
     </div>
   );

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { t } from 'settings/utils';
+import { useSetting } from 'settings/store/hooks';
+import {
+  Label, Inputs, SegmentsSelect, PagesSelect,
+} from 'settings/components';
+
+export default function ManageSubscription() {
+  const [page, setPage] = useSetting('subscription', 'pages', 'manage');
+  const [segments, setSegments] = useSetting('subscription', 'segments');
+  return (
+    <>
+      <Label
+        title={t`manageSubTitle`}
+        description={(
+          <>
+            {t`manageSubDescription1`}
+            <br />
+            {t`manageSubDescription2`}
+          </>
+        )}
+        htmlFor="subscription-pages-manage"
+      />
+      <Inputs>
+        <PagesSelect
+          value={page}
+          preview="manage"
+          setValue={setPage}
+          id="subscription-pages-manage"
+          linkAutomationId="preview_manage_subscription_page_link"
+        />
+        <br />
+        <label htmlFor="subscription-segments">{t`subscribersCanChooseFrom`}</label>
+        <br />
+        <SegmentsSelect
+          id="subscription-segments"
+          value={segments}
+          setValue={setSegments}
+          placeholder={t`leaveEmptyToDisplayAll`}
+        />
+      </Inputs>
+    </>
+  );
+}

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

@@ -12,5 +12,6 @@ export default function makeDefaultState(window: any): State {
     },
     data: window.mailpoet_settings,
     segments: window.mailpoet_segments,
+    pages: window.mailpoet_pages,
   };
 }

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

@@ -36,3 +36,7 @@ export function isMssActive(state: State) {
 export function getSegments(state: State) {
   return state.segments;
 }
+
+export function getPages(state: State) {
+  return state.pages;
+}

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

@@ -45,10 +45,19 @@ type Segment = {
   name: string
   subscribers: string
 }
-
+type Page = {
+  id: number
+  title: string
+  url: {
+    unsubscribe: string
+    manage: string
+    confirm: string
+  }
+}
 export type State = {
   data: Settings
   segments: Segment[]
+  pages: Page[]
   flags: {
     woocommerce: boolean
     newUser: boolean