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]
This commit is contained in:
Rodrigo Primo
2023-07-10 15:41:08 -03:00
committed by Aschepikov
parent 408f0e35dd
commit c0df921998
5 changed files with 62 additions and 32 deletions

View File

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

View File

@@ -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;
}

View File

@@ -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({
})}
</Grid.CenteredRow>
<Grid.CenteredRow>
{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="0"
placeholder={MailPoet.I18n.t('emailActionDays')}
/>
);
}
if (typeof match === 'string' && match.trim().length > 1) {
return <div key={match}>{match}</div>;
}
return null;
})}
<DaysPeriodField filterIndex={filterIndex} />
</Grid.CenteredRow>
</>
);

View File

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

View File

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