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:
committed by
Aschepikov
parent
408f0e35dd
commit
c0df921998
@@ -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 = {
|
||||
|
@@ -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;
|
||||
}
|
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
@@ -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 = {
|
||||
|
@@ -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'),
|
||||
|
Reference in New Issue
Block a user