diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx index 3f0c354edf..20c7b94a1a 100644 --- a/assets/js/src/segments/dynamic/form.tsx +++ b/assets/js/src/segments/dynamic/form.tsx @@ -167,7 +167,7 @@ export const Form: React.FunctionComponent = ({ e.preventDefault(); handleSave(segmentId); }} - isDisabled={!isFormValid(segment)} + isDisabled={!isFormValid(segment.filters)} > {MailPoet.I18n.t('save')} diff --git a/assets/js/src/segments/dynamic/subscribers_calculator.ts b/assets/js/src/segments/dynamic/subscribers_calculator.ts index 80798eaae3..3d2da5ad93 100644 --- a/assets/js/src/segments/dynamic/subscribers_calculator.ts +++ b/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 { +function loadCount(formItem: Segment): Promise { // 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, diff --git a/assets/js/src/segments/dynamic/subscribers_counter.tsx b/assets/js/src/segments/dynamic/subscribers_counter.tsx index f2a8ded748..057292644a 100644 --- a/assets/js/src/segments/dynamic/subscribers_counter.tsx +++ b/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 ( diff --git a/assets/js/src/segments/dynamic/validator.ts b/assets/js/src/segments/dynamic/validator.ts index 313f845343..783020f027 100644 --- a/assets/js/src/segments/dynamic/validator.ts +++ b/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; }