diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx index 8a3341b4e1..1abc2edc9f 100644 --- a/assets/js/src/segments/dynamic/form.tsx +++ b/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 = ({ 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 = ({ [] ); - const filterValue: FilterValue | undefined = useSelect( - (select) => select('mailpoet-dynamic-segments-form').findFilterValueForSegment(segment), + const filterRows: FilterRow[] = useSelect( + (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 (
@@ -92,31 +95,46 @@ export const Form: React.FunctionComponent = ({ {MailPoet.I18n.t('formPageTitle')} - - { + updateSegmentFilter({ + segmentType: newValue.group, + action: newValue.value, + }, index); + }} + automationId="select-segment-action" + isFullWidth + /> + {filterRow.index !== undefined && ( + + )} + +
+ + ))} diff --git a/assets/js/src/segments/dynamic/types.ts b/assets/js/src/segments/dynamic/types.ts index 3f2e8d4391..c2833865b9 100644 --- a/assets/js/src/segments/dynamic/types.ts +++ b/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[], }