Add lifetime option to days period react component

MAILPOET-4991
This commit is contained in:
John Oleksowicz
2023-07-17 14:21:48 -05:00
committed by Aschepikov
parent 2d3a8fadf7
commit 2d4967b64c
3 changed files with 38 additions and 6 deletions

View File

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

View File

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

View File

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