Add subscription segment support to segment form

[MAILPOET-3471]

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import { assign, compose, find } from 'lodash/fp';
+import Select from 'common/form/react_select/react_select';
+
+import {
+  OnFilterChange, SegmentTypes,
+  SelectOption,
+  WooCommerceSubscriptionFormItem,
+} from '../types';
+import { SegmentFormData } from '../segment_form_data';
+
+export const WooCommerceSubscriptionOptions = [
+  { value: 'hasActiveSubscription', label: MailPoet.I18n.t('segmentsActiveSubscription'), group: SegmentTypes.WooCommerceSubscription },
+];
+
+export function validateWooCommerceSubscription(
+  formItems: WooCommerceSubscriptionFormItem
+): boolean {
+  if (formItems.action === 'hasActiveSubscription' && !formItems.product_id) {
+    return false;
+  }
+  return true;
+}
+
+interface Props {
+  onChange: OnFilterChange;
+  item: WooCommerceSubscriptionFormItem;
+}
+
+export const WooCommerceSubscriptionFields: React.FunctionComponent<Props> = (
+  { onChange, item }
+) => {
+  const productOptions = SegmentFormData.subscriptionProducts?.map((product) => ({
+    value: product.id,
+    label: product.name,
+  }));
+
+  return (
+    <div className="mailpoet-form-field">
+      <div className="mailpoet-form-input mailpoet-form-select">
+        <Select
+          placeholder={MailPoet.I18n.t('selectWooSubscription')}
+          options={productOptions}
+          value={find(['value', item.product_id], productOptions)}
+          onChange={(option: SelectOption): void => compose([
+            onChange,
+            assign(item),
+          ])({ product_id: option.value })}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -18,6 +18,7 @@ import Textarea from 'common/form/textarea/textarea';
 import { EmailSegmentOptions } from './dynamic_segments_filters/email';
 import { WooCommerceOptions } from './dynamic_segments_filters/woocommerce';
 import { WordpressRoleSegmentOptions } from './dynamic_segments_filters/wordpress_role';
+import { WooCommerceSubscriptionOptions } from './dynamic_segments_filters/woocommerce_subscription';
 import { SubscribersCounter } from './subscribers_counter';
 import { FormFilterFields } from './form_filter_fields';
 
@@ -61,6 +62,12 @@ function getAvailableFilters(): GroupFilterValue[] {
       options: WooCommerceOptions,
     });
   }
+  if (MailPoet.isWoocommerceActive) {
+    filters.push({
+      label: MailPoet.I18n.t('woocommerceSubscriptions'),
+      options: WooCommerceSubscriptionOptions,
+    });
+  }
   return filters;
 }
 

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

@@ -10,6 +10,7 @@ import {
 import { EmailFields } from './dynamic_segments_filters/email';
 import { WordpressRoleFields } from './dynamic_segments_filters/wordpress_role';
 import { WooCommerceFields } from './dynamic_segments_filters/woocommerce';
+import { WooCommerceSubscriptionFields } from './dynamic_segments_filters/woocommerce_subscription';
 
 export interface FilterFieldsProps {
   segmentType: FilterValue;
@@ -21,6 +22,7 @@ const filterFieldsMap = {
   [SegmentTypes.Email]: EmailFields,
   [SegmentTypes.WooCommerce]: WooCommerceFields,
   [SegmentTypes.WordPressRole]: WordpressRoleFields,
+  [SegmentTypes.WooCommerceSubscription]: WooCommerceSubscriptionFields,
 };
 
 export const FormFilterFields: React.FunctionComponent<FilterFieldsProps> = ({

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

@@ -8,6 +8,12 @@ interface SegmentFormDataWindow extends Window {
     id: string;
     name: string;
   }[];
+
+  mailpoet_subscription_products: {
+    id: string;
+    name: string;
+  }[];
+
   mailpoet_product_categories: {
     id: string;
     name: string;
@@ -24,6 +30,7 @@ declare let window: SegmentFormDataWindow;
 
 export const SegmentFormData = {
   products: window.mailpoet_products,
+  subscriptionProducts: window.mailpoet_subscription_products,
   productCategories: window.mailpoet_product_categories,
   newslettersList: window.mailpoet_newsletters_list,
   wordpressRoles: window.wordpress_editable_roles_list,

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

@@ -2,6 +2,7 @@ export enum SegmentTypes {
   Email = 'email',
   WordPressRole = 'userRole',
   WooCommerce = 'woocommerce',
+  WooCommerceSubscription = 'woocommerceSubscription'
 }
 
 export enum EmailActionTypes {
@@ -40,6 +41,11 @@ export interface WooCommerceFormItem extends FormItem {
   number_of_orders_days?: number;
 }
 
+export interface WooCommerceSubscriptionFormItem extends FormItem {
+  action?: string;
+  product_id?: string;
+}
+
 export interface EmailFormItem extends FormItem {
   action?: string;
   newsletter_id?: string;

views/segments.html

@@ -150,6 +150,9 @@
     'segmentsTipText': __('segments allow you to group your subscribers by other criteria, such as events and actions.'),
     'segmentsTipLink': __('Read more.'),
     'segmentsSubscriber': __('has WordPress user role'),
+    'segmentsActiveSubscription': __('has an active subscription'),
+    'woocommerceSubscriptions': _x('WooCommerce Subscriptions', 'Dynamic segment creation: User selects this to use any WooCommerce Subscriptions filters'),
+    'selectWooSubscription': __('Search subscriptions'),
 
     'oneDynamicSegmentTrashed': __('1 segment was moved to the trash.'),
     'multipleDynamicSegmentsTrashed': __('%$1d segments were moved to the trash.'),