Add lifetime option to days period react component

MAILPOET-4991

mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/fields/days_period_field.tsx

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

mailpoet/assets/js/src/segments/dynamic/types.ts

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

mailpoet/views/segments/translations.html

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