Add component for subscribed date

[MAILPOET-3222]

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

@@ -1,15 +1,48 @@
+import React from 'react';
 import MailPoet from 'mailpoet';
 
 import {
-  WordpressRoleFormItem,
   SegmentTypes,
+  WordpressRoleFormItem,
+  OnFilterChange,
+  SubscriberActionTypes,
 } from '../types';
+import { WordpressRoleFields } from './subscriber_wordpress_role';
+import { SubscribedDateFields } from './subscriber_subscribed_date';
 
 export function validateSubscriber(formItems: WordpressRoleFormItem): boolean {
   return !!formItems.wordpressRole;
 }
 
 export const SubscriberSegmentOptions = [
-  { value: 'wordpressRole', label: MailPoet.I18n.t('segmentsSubscriber'), group: SegmentTypes.WordPressRole },
-  { value: 'subscribedDate', label: MailPoet.I18n.t('subscribedDate'), group: SegmentTypes.WordPressRole },
+  { value: SubscriberActionTypes.WORDPRESS_ROLE, label: MailPoet.I18n.t('segmentsSubscriber'), group: SegmentTypes.WordPressRole },
+  { value: SubscriberActionTypes.SUBSCRIBED_DATE, label: MailPoet.I18n.t('subscribedDate'), group: SegmentTypes.WordPressRole },
 ];
+
+const componentsMap = {
+  [SubscriberActionTypes.WORDPRESS_ROLE]: WordpressRoleFields,
+  [SubscriberActionTypes.SUBSCRIBED_DATE]: SubscribedDateFields,
+};
+
+interface Props {
+  onChange: OnFilterChange;
+  item: WordpressRoleFormItem;
+}
+
+export const SubscriberFields: React.FunctionComponent<Props> = ({ onChange, item }) => {
+  let Component;
+  if (!item.action) {
+    Component = WordpressRoleFields;
+  } else {
+    Component = componentsMap[item.action];
+  }
+
+  if (!Component) return null;
+
+  return (
+    <Component
+      item={item}
+      onChange={onChange}
+    />
+  );
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {
+  WordpressRoleFormItem,
+  OnFilterChange,
+} from '../types';
+
+interface Props {
+  onChange: OnFilterChange;
+  item: WordpressRoleFormItem;
+}
+
+export const SubscribedDateFields: React.FunctionComponent<Props> = ({ onChange, item }) => {
+  return (
+    <div>SubscribedDateFields</div>
+  );
+};

assets/js/src/segments/dynamic/form_filter_fields.tsx

@@ -8,7 +8,7 @@ import {
 } from './types';
 
 import { EmailFields } from './dynamic_segments_filters/email';
-import { WordpressRoleFields } from './dynamic_segments_filters/subscriber_wordpress_role';
+import { SubscriberFields } from './dynamic_segments_filters/subscriber';
 import { WooCommerceFields } from './dynamic_segments_filters/woocommerce';
 import { WooCommerceSubscriptionFields } from './dynamic_segments_filters/woocommerce_subscription';
 
@@ -21,7 +21,7 @@ export interface FilterFieldsProps {
 const filterFieldsMap = {
   [SegmentTypes.Email]: EmailFields,
   [SegmentTypes.WooCommerce]: WooCommerceFields,
-  [SegmentTypes.WordPressRole]: WordpressRoleFields,
+  [SegmentTypes.WordPressRole]: SubscriberFields,
   [SegmentTypes.WooCommerceSubscription]: WooCommerceSubscriptionFields,
 };
 

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

@@ -1,6 +1,7 @@
 export enum SegmentTypes {
   Email = 'email',
   WordPressRole = 'userRole',
+  SubscribedDate = 'subscribedDate',
   WooCommerce = 'woocommerce',
   WooCommerceSubscription = 'woocommerceSubscription'
 }
@@ -14,6 +15,11 @@ export enum EmailActionTypes {
   NOT_CLICKED = 'notClicked',
 }
 
+export enum SubscriberActionTypes {
+  WORDPRESS_ROLE = 'wordpressRole',
+  SUBSCRIBED_DATE = 'subscribedDate',
+}
+
 export interface SelectOption {
   value: string;
   label: string;
@@ -27,6 +33,7 @@ export interface FormItem {
   segmentType?: string;
   name?: string;
   description?: string;
+  action?: string;
 }
 
 export interface WordpressRoleFormItem extends FormItem {
@@ -34,7 +41,6 @@ export interface WordpressRoleFormItem extends FormItem {
 }
 
 export interface WooCommerceFormItem extends FormItem {
-  action?: string;
   category_id?: string;
   product_id?: string;
   number_of_orders_type?: string;
@@ -46,12 +52,10 @@ export interface WooCommerceFormItem extends FormItem {
 }
 
 export interface WooCommerceSubscriptionFormItem extends FormItem {
-  action?: string;
   product_id?: string;
 }
 
 export interface EmailFormItem extends FormItem {
-  action?: string;
   newsletter_id?: string;
   link_id?: string;
   operator?: string;