Render more filters in the form

[MAILPOET-3469]

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

@@ -14,9 +14,12 @@ import { isFormValid } from './validator';
 import plusIcon from '../../common/button/icon/plus';
 
 import {
-  AnyFormItem,
+  FilterRow,
   FilterValue,
   GroupFilterValue,
+  Segment,
+  SegmentTypes,
+  SubscriberActionTypes,
 } from './types';
 
 interface Props {
@@ -26,7 +29,7 @@ interface Props {
 export const Form: React.FunctionComponent<Props> = ({
   segmentId,
 }) => {
-  const segment: AnyFormItem = useSelect(
+  const segment: Segment = useSelect(
     (select) => select('mailpoet-dynamic-segments-form').getSegment(),
     []
   );
@@ -36,12 +39,12 @@ export const Form: React.FunctionComponent<Props> = ({
     []
   );
 
-  const filterValue: FilterValue | undefined = useSelect(
+  const filterRows: FilterRow[] = useSelect(
-    (select) => select('mailpoet-dynamic-segments-form').findFilterValueForSegment(segment),
+    (select) => select('mailpoet-dynamic-segments-form').findFiltersValueForSegment(segment),
     [segment]
   );
 
-  const { updateSegment, handleSave } = useDispatch('mailpoet-dynamic-segments-form');
+  const { updateSegment, updateSegmentFilter, handleSave } = useDispatch('mailpoet-dynamic-segments-form');
 
   return (
     <form className="mailpoet_form">
@@ -92,31 +95,46 @@ export const Form: React.FunctionComponent<Props> = ({
               {MailPoet.I18n.t('formPageTitle')}
             </label>
           </Heading>
+          {Array.isArray(filterRows) && filterRows.map((filterRow, index) => (
+            <>
               <Grid.ThreeColumns>
                 <Select
                   dimension="small"
                   placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
                   options={segmentFilters}
-              value={filterValue}
+                  value={filterRow.filterValue}
                   onChange={(newValue: FilterValue): void => {
-                updateSegment({
+                    updateSegmentFilter({
                       segmentType: newValue.group,
                       action: newValue.value,
-                });
+                    }, index);
                   }}
                   automationId="select-segment-action"
                   isFullWidth
                 />
-            {segment.segmentType !== undefined && (
+                {filterRow.index !== undefined && (
-              <FormFilterFields />
+                  <FormFilterFields filterIndex={filterRow.index} />
                 )}
               </Grid.ThreeColumns>
               <div className="mailpoet-gap" />
+            </>
+          ))}
           <Button
             type="button"
             dimension="small"
             variant="link"
             iconStart={plusIcon}
+            onClick={(e): void => {
+              e.preventDefault();
+              const filters = segment.filters;
+              filters.push({
+                segmentType: SegmentTypes.WordPressRole,
+                action: SubscriberActionTypes.WORDPRESS_ROLE,
+              });
+              updateSegment({
+                filters,
+              });
+            }}
           >
             {MailPoet.I18n.t('addCondition')}
           </Button>

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

@@ -35,10 +35,14 @@ export interface FilterValue extends SelectOption {
   group: SegmentTypes;
 }
 
+export interface FilterRow {
+  filterValue: FilterValue;
+  index: number;
+}
+
 export interface FormItem {
+  id?: number;
   segmentType?: string;
-  name?: string;
-  description?: string;
   action?: string;
 }
 
@@ -75,6 +79,13 @@ export interface EmailFormItem extends FormItem {
   days?: string;
 }
 
+export type Segment = {
+  id?: number;
+  name?: string;
+  description?: string;
+  filters?: AnyFormItem[];
+}
+
 export type AnyFormItem =
   WordpressRoleFormItem |
   WooCommerceFormItem |
@@ -145,7 +156,7 @@ export interface StateType {
   wooCurrencySymbol: string;
   wooCountries: WindowWooCommerceCountries;
   customFieldsList: WindowCustomFields;
-  segment: AnyFormItem,
+  segment: Segment,
   errors: string[],
   allAvailableFilters: GroupFilterValue[],
 }