Add subscribe in comments and registration

[MAILPOET-2677]

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

@@ -3,12 +3,15 @@ import $ from 'jquery';
 import 'select2';
 
 type Props = {
-  id: string
+  id?: string
   value: string[]
+  placeholder?: string
   setValue: (x: string[]) => any
 }
 
-export default ({ id, value, setValue }: Props) => {
+export default ({
+  id, value, placeholder, setValue,
+}: Props) => {
   React.useLayoutEffect(() => {
     const idSelector = `#${id}`;
     $(idSelector).select2();
@@ -19,7 +22,7 @@ export default ({ id, value, setValue }: Props) => {
   }, [id, setValue]);
   const segments: any[] = (window as any).mailpoet_segments;
   return (
-    <select id={id} defaultValue={value} multiple>
+    <select id={id} data-placeholder={placeholder} defaultValue={value} multiple>
       {segments.map((seg) => (
         <option key={seg.id} value={seg.id}>
           {`${seg.name} (${seg.subscribers})`}

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

@@ -1,11 +1,23 @@
 import React from 'react';
 import { SaveButton } from 'settings/components';
+import { t } from 'settings/utils';
 import DefaultSender from './default_sender';
+import SubscribeOn from './subscribe_on';
 
 export default function Basics() {
   return (
     <div className="mailpoet-settings-grid">
       <DefaultSender />
+      <SubscribeOn
+        event="on_comment"
+        title={t`subscribeInCommentsTitle`}
+        description={t`subscribeInCommentsDescription`}
+      />
+      <SubscribeOn
+        event="on_register"
+        title={t`subscribeInRegistrationTitle`}
+        description={t`subscribeInRegistrationDescription`}
+      />
       <SaveButton />
     </div>
   );

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { t, onChange, onToggle } from 'settings/utils';
+import { useSetting } from 'settings/store/hooks';
+import { Label, Inputs, SegmentsSelect } from 'settings/components';
+
+type Props = {
+  title: string
+  description: string
+  event: 'on_comment' | 'on_register'
+}
+
+export default function SubscribeOn({ title, description, event }: Props) {
+  const [enabled, setEnabled] = useSetting('subscribe', event, 'enabled');
+  const [label, setLabel] = useSetting('subscribe', event, 'label');
+  const [segments, setSegments] = useSetting('subscribe', event, 'segments');
+  return (
+    <>
+      <Label
+        title={title}
+        description={description}
+        htmlFor={`subscribe-${event}-enabled`}
+      />
+      <Inputs>
+        <input
+          type="checkbox"
+          id={`subscribe-${event}-enabled`}
+          checked={enabled === '1'}
+          onChange={onToggle(setEnabled)}
+        />
+        {enabled === '1' && (
+          <>
+            <br />
+            <input
+              type="text"
+              className="regular-text"
+              value={label || t`yesAddMe`}
+              onChange={onChange(setLabel)}
+            />
+            <br />
+            <label htmlFor={`subscribe-${event}-segments`}>{t`usersWillBeSubscribedTo`}</label>
+            <br />
+            <SegmentsSelect id={`subscribe-${event}-segments`} placeholder={t`chooseList`} value={segments} setValue={setSegments} />
+          </>
+        )}
+      </Inputs>
+    </>
+  );
+}

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

@@ -9,12 +9,12 @@ export type Settings = {
   }
   subscribe: {
     on_comment: {
-      enabled: boolean
+      enabled: '1' | '0'
       label: string
       segments: string[]
     }
     on_register: {
-      enabled: boolean
+      enabled: '1' | '0'
       label: string
       segments: string[]
     }

assets/js/src/settings/utils.ts

@@ -2,7 +2,10 @@ import MailPoet from 'mailpoet';
 import { ChangeEvent } from 'react';
 
 type Setter = (value: string) => any
-type Event = ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+type Event = ChangeEvent<any>
+
 export const onChange = (setter: Setter) => (e: Event) => setter(e.target.value);
 
+export const onToggle = (setter: Setter) => (e: Event) => setter(e.target.checked ? '1' : '0');
+
 export const t = ([word]: TemplateStringsArray) => MailPoet.I18n.t(word);