diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx index 7fb4d6a721..dfd95ecf3f 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx @@ -11,6 +11,7 @@ import { storeName } from '../store'; import { EmailOpenStatisticsFields } from './fields/email/email_statistics_opens'; import { EmailClickStatisticsFields } from './fields/email/email_statistics_clicks'; import { EmailOpensAbsoluteCountFields } from './fields/email/email_opens_absolute_count'; +import { validateDaysPeriod } from './fields/days_period_field'; export function validateEmail(formItems: EmailFormItem): boolean { // check if the action has the right type @@ -35,7 +36,9 @@ export function validateEmail(formItems: EmailFormItem): boolean { ); } - return !!formItems.days && !!formItems.opens && !!formItems.operator; + return ( + validateDaysPeriod(formItems) && !!formItems.opens && !!formItems.operator + ); } const componentsMap = { diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/fields/days_period_field.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/fields/days_period_field.tsx new file mode 100644 index 0000000000..10e81e39cb --- /dev/null +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/fields/days_period_field.tsx @@ -0,0 +1,52 @@ +import { useDispatch, useSelect } from '@wordpress/data'; +import { Input } from 'common'; +import { MailPoet } from 'mailpoet'; +import { DaysPeriodItem, FilterProps } from 'segments/dynamic/types'; +import { storeName } from 'segments/dynamic/store'; + +function replaceElementsInDaysSentence( + fn: (value) => JSX.Element, +): JSX.Element[] { + return MailPoet.I18n.t('emailActionOpensDaysSentence') + .split(/({days})/gim) + .map(fn); +} + +export function DaysPeriodField({ filterIndex }: FilterProps): JSX.Element { + const segment: DaysPeriodItem = useSelect( + (select) => select(storeName).getSegmentFilter(filterIndex), + [filterIndex], + ); + const { updateSegmentFilterFromEvent } = useDispatch(storeName); + + return ( + <> + {replaceElementsInDaysSentence((match) => { + if (match === '{days}') { + return ( + { + void updateSegmentFilterFromEvent('days', filterIndex, e); + }} + min={1} + step={1} + placeholder={MailPoet.I18n.t('daysPlaceholder')} + /> + ); + } + if (typeof match === 'string' && match.trim().length > 1) { + return
{match}
; + } + return null; + })} + + ); +} + +export function validateDaysPeriod(formItems: DaysPeriodItem): boolean { + return !!formItems.days; +} diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/fields/email/email_opens_absolute_count.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/fields/email/email_opens_absolute_count.tsx index 8a5c01910b..412da2ef08 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/fields/email/email_opens_absolute_count.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/fields/email/email_opens_absolute_count.tsx @@ -8,14 +8,7 @@ import { MailPoet } from 'mailpoet'; import { EmailFormItem, FilterProps } from '../../../types'; import { storeName } from '../../../store'; - -function replaceElementsInDaysSentence( - fn: (value) => JSX.Element, -): JSX.Element[] { - return MailPoet.I18n.t('emailActionOpensDaysSentence') - .split(/({days})/gim) - .map(fn); -} +import { DaysPeriodField } from '../days_period_field'; function replaceEmailActionOpensSentence( fn: (value) => JSX.Element, @@ -85,27 +78,7 @@ export function EmailOpensAbsoluteCountFields({ })} - {replaceElementsInDaysSentence((match) => { - if (match === '{days}') { - return ( - { - void updateSegmentFilterFromEvent('days', filterIndex, e); - }} - min="0" - placeholder={MailPoet.I18n.t('emailActionDays')} - /> - ); - } - if (typeof match === 'string' && match.trim().length > 1) { - return
{match}
; - } - return null; - })} +
); diff --git a/mailpoet/assets/js/src/segments/dynamic/types.ts b/mailpoet/assets/js/src/segments/dynamic/types.ts index bf7cffbaa3..4694a06008 100644 --- a/mailpoet/assets/js/src/segments/dynamic/types.ts +++ b/mailpoet/assets/js/src/segments/dynamic/types.ts @@ -72,6 +72,10 @@ export interface DateFormItem extends FormItem { value?: string; } +export interface DaysPeriodItem extends FormItem { + days?: string; +} + export interface TextFormItem extends FormItem { operator?: string; value?: string; @@ -133,7 +137,6 @@ export interface EmailFormItem extends FormItem { link_ids?: string[]; operator?: string; opens?: string; - days?: string; } export type Segment = { diff --git a/mailpoet/views/segments/translations.html b/mailpoet/views/segments/translations.html index 84fe3a73be..ffdffb7c29 100644 --- a/mailpoet/views/segments/translations.html +++ b/mailpoet/views/segments/translations.html @@ -106,7 +106,6 @@ 'emailActionOpensAbsoluteCount': __('number of opens'), 'emailActionMachineOpensAbsoluteCount': __('number of machine-opens'), 'emailActionOpens': __('opens'), - 'emailActionDays': __('days'), 'emailActionOpensSentence': _x('{condition} {opens} opens', 'The result will be "more than 20 opens"'), 'emailActionOpensDaysSentence': _x('in the last {days} days', 'The result will be "in the last 5 days"'), 'moreThan': __('more than'),