diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx index 7b238e1cbc..9698414510 100644 --- a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx +++ b/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 = ({ onChange, item }) => { + let Component; + if (!item.action) { + Component = WordpressRoleFields; + } else { + Component = componentsMap[item.action]; + } + + if (!Component) return null; + + return ( + + ); +}; diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx new file mode 100644 index 0000000000..141ca3fc65 --- /dev/null +++ b/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 = ({ onChange, item }) => { + return ( +
SubscribedDateFields
+ ); +}; diff --git a/assets/js/src/segments/dynamic/form_filter_fields.tsx b/assets/js/src/segments/dynamic/form_filter_fields.tsx index 0e3b47eeb6..9af68a8032 100644 --- a/assets/js/src/segments/dynamic/form_filter_fields.tsx +++ b/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, }; diff --git a/assets/js/src/segments/dynamic/types.ts b/assets/js/src/segments/dynamic/types.ts index ae817f7079..126e7e6d2c 100644 --- a/assets/js/src/segments/dynamic/types.ts +++ b/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;