Extract the days period selector into its own component

This commit extracts the days period selector from the
EmailOpensAbsoluteCountFields component into its own component called
DaysPeriodField. In the next commit, I will change other field
components to use DaysPeriodField its of duplicating the code to
generate the days period selector.

[MAILPOET-4991]

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 = {

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 (
+            <Input
+              key="input"
+              type="number"
+              value={segment.days || ''}
+              data-automation-id="segment-number-of-days"
+              onChange={(e) => {
+                void updateSegmentFilterFromEvent('days', filterIndex, e);
+              }}
+              min={1}
+              step={1}
+              placeholder={MailPoet.I18n.t('daysPlaceholder')}
+            />
+          );
+        }
+        if (typeof match === 'string' && match.trim().length > 1) {
+          return <div key={match}>{match}</div>;
+        }
+        return null;
+      })}
+    </>
+  );
+}
+
+export function validateDaysPeriod(formItems: DaysPeriodItem): boolean {
+  return !!formItems.days;
+}

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';
-
+import { DaysPeriodField } from '../days_period_field';
-function replaceElementsInDaysSentence(
-  fn: (value) => JSX.Element,
-): JSX.Element[] {
-  return MailPoet.I18n.t('emailActionOpensDaysSentence')
-    .split(/({days})/gim)
-    .map(fn);
-}
 
 function replaceEmailActionOpensSentence(
   fn: (value) => JSX.Element,
@@ -85,27 +78,7 @@ export function EmailOpensAbsoluteCountFields({
         })}
       </Grid.CenteredRow>
       <Grid.CenteredRow>
-        {replaceElementsInDaysSentence((match) => {
+        <DaysPeriodField filterIndex={filterIndex} />
-          if (match === '{days}') {
-            return (
-              <Input
-                key="input"
-                type="number"
-                value={segment.days || ''}
-                data-automation-id="segment-number-of-days"
-                onChange={(e) => {
-                  void updateSegmentFilterFromEvent('days', filterIndex, e);
-                }}
-                min="0"
-                placeholder={MailPoet.I18n.t('emailActionDays')}
-              />
-            );
-          }
-          if (typeof match === 'string' && match.trim().length > 1) {
-            return <div key={match}>{match}</div>;
-          }
-          return null;
-        })}
       </Grid.CenteredRow>
     </>
   );

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 = {

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'),