Add all filters into request for subscribers count

[MAILPOET-3469]

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

@@ -167,7 +167,7 @@ export const Form: React.FunctionComponent<Props> = ({
               e.preventDefault();
               handleSave(segmentId);
             }}
-            isDisabled={!isFormValid(segment)}
+            isDisabled={!isFormValid(segment.filters)}
           >
             {MailPoet.I18n.t('save')}
           </Button>

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

@@ -3,6 +3,8 @@ import _ from 'lodash';
 
 import {
   AnyFormItem,
+  Segment,
+  SegmentConnectTypes,
 } from './types';
 
 export interface Result {
@@ -10,40 +12,29 @@ export interface Result {
   errors: string[];
 }
 
-let previousFormItem: AnyFormItem | undefined;
+export interface Filters {
+  filters: AnyFormItem[];
+  filters_connect: SegmentConnectTypes;
+}
+
+let previousFormItem: Filters | undefined;
 
 let previousResult: Result | undefined;
 
-// Names of keys from interface FormItem
-const allowedItemKeys: string[] = [
-  'wordpressRole',
-  'segmentType',
-  'action',
-  'newsletter_id',
-  'category_id',
-  'product_id',
-  'country_code',
-  'link_id',
-  'days',
-  'opens',
-  'operator',
-  'number_of_orders_type',
-  'number_of_orders_count',
-  'number_of_orders_days',
-  'total_spent_type',
-  'total_spent_amount',
-  'total_spent_days',
-  'value',
-];
-
-function loadCount(formItem: AnyFormItem): Promise<Result | void> {
+function loadCount(formItem: Segment): Promise<Result | void> {
   // We don't want to use properties like name and description
-  const item = _.pick(formItem, allowedItemKeys);
+  const item = {
+    filters: formItem.filters,
+    filters_connect: formItem.filters_connect,
+  };
   // When item is the same as in the previous call we return previous result
   if (_.isEqual(item, previousFormItem)) {
     return Promise.resolve(previousResult);
   }
-  previousFormItem = { ...item } as AnyFormItem;
+  previousFormItem = {
+    filters: [...formItem.filters],
+    filters_connect: formItem.filters_connect,
+  };
 
   return MailPoet.Ajax.post({
     api_version: MailPoet.apiVersion,

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

@@ -6,7 +6,7 @@ import { isFormValid } from './validator';
 import { loadCount } from './subscribers_calculator';
 
 import {
-  AnyFormItem,
+  Segment,
 } from './types';
 
 interface SubscriberCount {
@@ -22,13 +22,14 @@ const SubscribersCounter: React.FunctionComponent = () => {
     errors: undefined,
   });
 
-  const segment: AnyFormItem = useSelect(
+  const segment: Segment = useSelect(
     (select) => select('mailpoet-dynamic-segments-form').getSegment(),
     []
   );
 
+  const serializedSegment = JSON.stringify(segment);
   useEffect(() => {
-    function load(loadItem: AnyFormItem): void {
+    function load(loadItem: Segment): void {
       setSubscribersCount({
         loading: true,
         count: undefined,
@@ -53,7 +54,7 @@ const SubscribersCounter: React.FunctionComponent = () => {
       });
     }
 
-    if (isFormValid(segment)) {
+    if (isFormValid(segment.filters)) {
       load(segment);
     } else {
       setSubscribersCount({
@@ -61,7 +62,7 @@ const SubscribersCounter: React.FunctionComponent = () => {
         loading: false,
       });
     }
-  }, [segment]);
+  }, [segment, serializedSegment]);
 
   if (subscribersCount.errors) {
     return (

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

@@ -11,7 +11,12 @@ const validationMap = {
   [SegmentTypes.WooCommerceSubscription]: validateWooCommerceSubscription,
 };
 
-export function isFormValid(item: AnyFormItem): boolean {
-  if (validationMap[item.segmentType] === undefined) return false;
-  return validationMap[item.segmentType](item);
+export function isFormValid(items: AnyFormItem[]): boolean {
+  if (items.length < 1) return false;
+  const validationResults: boolean[] = items.map((item: AnyFormItem) => {
+    if (validationMap[item.segmentType] === undefined) return false;
+    return validationMap[item.segmentType](item);
+  });
+
+  return validationResults.filter((result) => result === false).length === 0;
 }