Add lifetime option to days period react component
MAILPOET-4991
This commit is contained in:
committed by
Aschepikov
parent
2d3a8fadf7
commit
2d4967b64c
@ -1,6 +1,7 @@
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { Input } from 'common';
|
||||
import { MailPoet } from 'mailpoet';
|
||||
import { Select } from 'common/form/select/select';
|
||||
import { DaysPeriodItem, FilterProps } from 'segments/dynamic/types';
|
||||
import { storeName } from 'segments/dynamic/store';
|
||||
|
||||
@ -8,7 +9,7 @@ function replaceElementsInDaysSentence(
|
||||
fn: (value) => JSX.Element,
|
||||
): JSX.Element[] {
|
||||
return MailPoet.I18n.t('emailActionOpensDaysSentence')
|
||||
.split(/({days})/gim)
|
||||
.split(/({days})|({timeframe})/gim)
|
||||
.map(fn);
|
||||
}
|
||||
|
||||
@ -17,12 +18,19 @@ export function DaysPeriodField({ filterIndex }: FilterProps): JSX.Element {
|
||||
(select) => select(storeName).getSegmentFilter(filterIndex),
|
||||
[filterIndex],
|
||||
);
|
||||
const { updateSegmentFilterFromEvent } = useDispatch(storeName);
|
||||
const { updateSegmentFilterFromEvent, updateSegmentFilter } =
|
||||
useDispatch(storeName);
|
||||
|
||||
if (!['inTheLast', 'allTime'].includes(segment.timeframe)) {
|
||||
void updateSegmentFilter({ timeframe: 'inTheLast' }, filterIndex);
|
||||
}
|
||||
|
||||
const isInTheLast = segment.timeframe === 'inTheLast';
|
||||
|
||||
return (
|
||||
<>
|
||||
{replaceElementsInDaysSentence((match) => {
|
||||
if (match === '{days}') {
|
||||
if (isInTheLast && match === '{days}') {
|
||||
return (
|
||||
<Input
|
||||
key="input"
|
||||
@ -38,7 +46,25 @@ export function DaysPeriodField({ filterIndex }: FilterProps): JSX.Element {
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (typeof match === 'string' && match.trim().length > 1) {
|
||||
if (match === '{timeframe}') {
|
||||
return (
|
||||
<Select
|
||||
key="timeframe-select"
|
||||
value={segment.timeframe}
|
||||
onChange={(e) => {
|
||||
void updateSegmentFilterFromEvent('timeframe', filterIndex, e);
|
||||
}}
|
||||
>
|
||||
<option value="inTheLast">{MailPoet.I18n.t('inTheLast')}</option>
|
||||
<option value="allTime">{MailPoet.I18n.t('overAllTime')}</option>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
if (
|
||||
isInTheLast &&
|
||||
typeof match === 'string' &&
|
||||
match.trim().length > 1
|
||||
) {
|
||||
return <div key={match}>{match}</div>;
|
||||
}
|
||||
return null;
|
||||
@ -48,5 +74,8 @@ export function DaysPeriodField({ filterIndex }: FilterProps): JSX.Element {
|
||||
}
|
||||
|
||||
export function validateDaysPeriod(formItems: DaysPeriodItem): boolean {
|
||||
if (formItems.timeframe === 'allTime') {
|
||||
return true;
|
||||
}
|
||||
return !!formItems.days;
|
||||
}
|
||||
|
@ -80,6 +80,7 @@ export interface DateFormItem extends FormItem {
|
||||
|
||||
export interface DaysPeriodItem extends FormItem {
|
||||
days?: string;
|
||||
timeframe?: string;
|
||||
}
|
||||
|
||||
export interface TextFormItem extends FormItem {
|
||||
@ -156,7 +157,8 @@ export type AnyFormItem =
|
||||
| WooCommerceFormItem
|
||||
| WooCommerceSubscriptionFormItem
|
||||
| WooCommerceMembershipFormItem
|
||||
| EmailFormItem;
|
||||
| EmailFormItem
|
||||
| DaysPeriodItem;
|
||||
|
||||
export interface SubscriberCount {
|
||||
count?: number;
|
||||
|
@ -107,7 +107,7 @@
|
||||
'emailActionMachineOpensAbsoluteCount': __('number of machine-opens'),
|
||||
'emailActionOpens': __('opens'),
|
||||
'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"'),
|
||||
'emailActionOpensDaysSentence': _x('{timeframe} {days} days', 'The result will be "in the last 5 days"'),
|
||||
'moreThan': __('more than'),
|
||||
'lessThan': __('less than'),
|
||||
'higherThan': __('higher than'),
|
||||
@ -147,6 +147,7 @@
|
||||
'notOn': _x('not on', 'Meaning: "Subscriber subscribed on a date other than the given date"'),
|
||||
'inTheLast': _x('in the last', 'Meaning: "Subscriber subscribed in the last 3 days"'),
|
||||
'notInTheLast': _x('not in the last', 'Meaning: "Subscriber subscribed not in the last 3 days"'),
|
||||
'overAllTime': __('over all time'),
|
||||
|
||||
'emailActionNotOpened': _x('not opened', 'Dynamic segment creation: when newsletter was not opened'),
|
||||
'emailActionClicked': _x('clicked', 'Dynamic segment creation: when a newsletter link was clicked'),
|
||||
|
Reference in New Issue
Block a user