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>
-          <Grid.ThreeColumns>
+          {Array.isArray(filterRows) && filterRows.map((filterRow, index) => (
-            <Select
+            <>
-              dimension="small"
+              <Grid.ThreeColumns>
-              placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
+                <Select
-              options={segmentFilters}
+                  dimension="small"
-              value={filterValue}
+                  placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
-              onChange={(newValue: FilterValue): void => {
+                  options={segmentFilters}
-                updateSegment({
+                  value={filterRow.filterValue}
-                  segmentType: newValue.group,
+                  onChange={(newValue: FilterValue): void => {
-                  action: newValue.value,
+                    updateSegmentFilter({
-                });
+                      segmentType: newValue.group,
-              }}
+                      action: newValue.value,
-              automationId="select-segment-action"
+                    }, index);
-              isFullWidth
+                  }}
-            />
+                  automationId="select-segment-action"
-            {segment.segmentType !== undefined && (
+                  isFullWidth
-              <FormFilterFields />
+                />
-            )}
+                {filterRow.index !== undefined && (
-          </Grid.ThreeColumns>
+                  <FormFilterFields filterIndex={filterRow.index} />
-          <div className="mailpoet-gap" />
+                )}
+              </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[],
 }