diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx new file mode 100644 index 0000000000..3b8afc8a7f --- /dev/null +++ b/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 = ( + { onChange, item } +) => { + const productOptions = SegmentFormData.subscriptionProducts?.map((product) => ({ + value: product.id, + label: product.name, + })); + + return ( +
+
+