Add radio input for select connect type

[MAILPOET-3469]

assets/js/src/segments/dynamic/condition_type.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import ReactStringReplace from 'react-string-replace';
+import { useDispatch, useSelect } from '@wordpress/data';
+import MailPoet from 'mailpoet';
+import {
+  Segment,
+  SegmentConnectTypes,
+} from './types';
+
+const ConditionType: React.FunctionComponent = () => {
+  const segment: Segment = useSelect(
+    (select) => select('mailpoet-dynamic-segments-form').getSegment(),
+    []
+  );
+
+  const { updateSegment } = useDispatch('mailpoet-dynamic-segments-form');
+
+  if (segment.filters.length <= 1) {
+    return null;
+  }
+
+  return (
+    <>
+      <div>
+        <label className="mailpoet-form-radio">
+          <input
+            type="radio"
+            value={SegmentConnectTypes.AND}
+            checked={segment.filters_connect === SegmentConnectTypes.AND}
+            onChange={
+              (e): void => updateSegment({ filters_connect: e.target.value })
+            }
+          />
+          <span className="mailpoet-form-radio-control" />
+          <span>
+            {ReactStringReplace(
+              MailPoet.I18n.t('allConditions'),
+              /<strong>(.*?)<\/strong>/g,
+              (match, i) => <strong key={i}>{match}</strong>
+            )}
+          </span>
+        </label>
+        <label className="mailpoet-form-radio">
+          <input
+            type="radio"
+            value={SegmentConnectTypes.OR}
+            checked={segment.filters_connect === SegmentConnectTypes.OR}
+            onChange={
+              (e): void => updateSegment({ filters_connect: e.target.value })
+            }
+          />
+          <span className="mailpoet-form-radio-control" />
+          <span>
+            {ReactStringReplace(
+              MailPoet.I18n.t('anyConditions'),
+              /<strong>(.*?)<\/strong>/g,
+              (match, i) => <strong key={i}>{match}</strong>
+            )}
+          </span>
+        </label>
+      </div>
+      <div className="mailpoet-gap" />
+    </>
+  );
+};
+
+export { ConditionType };

assets/js/src/segments/dynamic/filter_separator.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useSelect } from '@wordpress/data';
+import MailPoet from 'mailpoet';
+import {
+  Segment,
+  SegmentConnectTypes,
+} from './types';
+
+interface Props {
+  index: number;
+}
+
+const FilterSeparator: React.FunctionComponent<Props> = ({ index }) => {
+  const segment: Segment = useSelect(
+    (select) => select('mailpoet-dynamic-segments-form').getSegment(),
+    []
+  );
+
+  if (segment.filters.length <= 1 || index === segment.filters.length - 1) {
+    return <div className="mailpoet-gap" />;
+  }
+
+  return (
+    <p>
+      <span className="mailpoet-gap" />
+      <strong>
+        {segment.filters_connect === SegmentConnectTypes.AND
+          ? MailPoet.I18n.t('filterConnectAnd').toUpperCase()
+          : MailPoet.I18n.t('filterConnectOr').toUpperCase()}
+      </strong>
+    </p>
+  );
+};
+
+export { FilterSeparator };

assets/js/src/segments/dynamic/form.tsx

@@ -8,6 +8,8 @@ import Input from 'common/form/input/input';
 import Select from 'common/form/react_select/react_select';
 import Textarea from 'common/form/textarea/textarea';
 import { Grid } from 'common/grid';
+import { ConditionType } from './condition_type';
+import { FilterSeparator } from './filter_separator';
 import { SubscribersCounter } from './subscribers_counter';
 import { FormFilterFields } from './form_filter_fields';
 import { isFormValid } from './validator';
@@ -95,6 +97,7 @@ export const Form: React.FunctionComponent<Props> = ({
               {MailPoet.I18n.t('formPageTitle')}
             </label>
           </Heading>
+          <ConditionType />
           {Array.isArray(filterRows) && filterRows.map((filterRow, index) => (
             <>
               <Grid.ThreeColumns>
@@ -116,7 +119,7 @@ export const Form: React.FunctionComponent<Props> = ({
                   <FormFilterFields filterIndex={filterRow.index} />
                 )}
               </Grid.ThreeColumns>
-              <div className="mailpoet-gap" />
+              <FilterSeparator index={index} />
             </>
           ))}
           <Button

assets/js/src/segments/dynamic/store/store.ts

@@ -12,6 +12,7 @@ import {
   StateType,
   SegmentFormDataWindow,
   SegmentTypes,
+  SegmentConnectTypes,
 } from '../types';
 import { getAvailableFilters } from './all_available_filters';
 
@@ -30,6 +31,7 @@ export const createStore = (): void => {
     wooCountries: window.mailpoet_woocommerce_countries,
     customFieldsList: window.mailpoet_custom_fields,
     segment: {
+      filters_connect: SegmentConnectTypes.AND,
       filters: [
         { segmentType: SegmentTypes.WordPressRole },
       ],

assets/js/src/segments/dynamic/types.ts

@@ -21,6 +21,11 @@ export enum SubscriberActionTypes {
   SUBSCRIBED_DATE = 'subscribedDate',
 }
 
+export enum SegmentConnectTypes {
+  AND = 'and',
+  OR = 'or',
+}
+
 export type GroupFilterValue = {
   label: string;
   options: FilterValue[];
@@ -83,6 +88,7 @@ export type Segment = {
   id?: number;
   name?: string;
   description?: string;
+  filters_connect?: SegmentConnectTypes;
   filters?: AnyFormItem[];
 }