Add days sentence to component

[MAILPOET-3224]

assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx

@@ -17,6 +17,12 @@ interface Props {
   item: EmailFormItem;
 }
 
+function replaceElementsInDaysSentence(fn): JSX.Element[] {
+  return MailPoet.I18n.t('emailActionOpensDaysSentence')
+    .split(/({days})/gim)
+    .map(fn);
+}
+
 export const EmailOpensAbsoluteCountFields: React.FunctionComponent<Props> = ({
   onChange,
   item,
@@ -76,6 +82,35 @@ export const EmailOpensAbsoluteCountFields: React.FunctionComponent<Props> = ({
           }
         )}
       </Grid.CenteredRow>
+      <Grid.CenteredRow>
+        {replaceElementsInDaysSentence(
+          (match) => {
+            if (match === '{days}') {
+              return (
+                <Input
+                  key="input"
+                  type="number"
+                  value={item.days}
+                  onChange={(e): void => compose([
+                    onChange,
+                    assign(item),
+                  ])({ days: e.target.value })}
+                  min="0"
+                  placeholder={MailPoet.I18n.t('emailActionDays')}
+                />
+              );
+            }
+            if ((typeof match === 'string') && match.trim().length > 1) {
+              return (
+                <div key={match}>
+                  {match}
+                </div>
+              );
+            }
+            return null;
+          }
+        )}
+      </Grid.CenteredRow>
     </>
   );
 };

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

@@ -43,6 +43,7 @@ export interface EmailFormItem extends FormItem {
   link_id?: string;
   operator?: string;
   opens?: string;
+  days?: string;
 }
 
 export type AnyFormItem = WordpressRoleFormItem | WooCommerceFormItem | EmailFormItem;

views/segments.html

@@ -136,7 +136,9 @@
     'emailActionOpened': _x('opened', 'Dynamic segment creation: when newsletter was opened'),
     'emailActionOpensAbsoluteCount': __('# of 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'),
     'lessThan': __('less than'),
     'emailActionNotOpened': _x('not opened', 'Dynamic segment creation: when newsletter was not opened'),