diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx index e5c19f853f..cc2a077dcf 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx @@ -5,6 +5,7 @@ import { MailPoet } from 'mailpoet'; import { Select } from 'common/form/select/select'; import { WordpressRoleFormItem } from '../../types'; +import { store } from '../../store/store'; export function validateCheckbox(item: WordpressRoleFormItem): boolean { return item.value === '1' || item.value === '0'; @@ -16,14 +17,12 @@ type Props = { export function Checkbox({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilterFromEvent, updateSegmentFilter } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilterFromEvent, updateSegmentFilter } = + useDispatch(store); useEffect(() => { if (segment.value !== '1' && segment.value !== '0') { diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx index 8444a3882d..85fa1f2ba3 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx @@ -9,6 +9,7 @@ import { Grid } from 'common/grid'; import { Datepicker } from 'common/datepicker/datepicker'; import { WordpressRoleFormItem, OnFilterChange } from '../../types'; +import { store } from '../../store/store'; interface ComponentProps { onChange: OnFilterChange; @@ -228,12 +229,11 @@ export function CustomFieldDate({ filterIndex, }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter } = useDispatch('mailpoet-dynamic-segments-form'); + const { updateSegmentFilter } = useDispatch(store); useEffect(() => { if (segment.date_type !== customField.params.date_type) { diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx index 50a2bcfb62..8cdb2f426a 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx @@ -9,6 +9,7 @@ import { SelectOption, WindowCustomFields, } from '../../types'; +import { store } from '../../store/store'; interface ParamsType { values?: { @@ -26,15 +27,14 @@ type Props = { export function RadioSelect({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter } = useDispatch('mailpoet-dynamic-segments-form'); + const { updateSegmentFilter } = useDispatch(store); const customFieldsList: WindowCustomFields = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getCustomFieldsList(), + (select) => select(store).getCustomFieldsList(), [], ); const customField = find( diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx index 1d61d168d4..0addbf4e91 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx @@ -7,6 +7,7 @@ import { Input } from 'common/form/input/input'; import { Grid } from 'common/grid'; import { WordpressRoleFormItem } from '../../types'; +import { store } from '../../store/store'; export function validateText(item: WordpressRoleFormItem): boolean { return ( @@ -26,14 +27,12 @@ type Props = { export function Text({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilterFromEvent, updateSegmentFilter } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilterFromEvent, updateSegmentFilter } = + useDispatch(store); useEffect(() => { if (segment.operator === undefined) { diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx index 40b2aa1625..b1bf76980f 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx @@ -1,50 +1,16 @@ -import { MailPoet } from 'mailpoet'; import { useSelect } from '@wordpress/data'; import { EmailActionTypes, EmailFormItem, - SegmentTypes, WordpressRoleFormItem, } from '../types'; +import { store } from '../store/store'; import { EmailOpenStatisticsFields } from './email_statistics_opens'; import { EmailClickStatisticsFields } from './email_statistics_clicks'; import { EmailOpensAbsoluteCountFields } from './email_opens_absolute_count'; -export const EmailSegmentOptions = [ - { - value: EmailActionTypes.OPENS_ABSOLUTE_COUNT, - label: MailPoet.I18n.t('emailActionOpensAbsoluteCount'), - group: SegmentTypes.Email, - }, - { - value: EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT, - label: MailPoet.I18n.t('emailActionMachineOpensAbsoluteCount'), - group: SegmentTypes.Email, - }, - { - value: EmailActionTypes.OPENED, - label: MailPoet.I18n.t('emailActionOpened'), - group: SegmentTypes.Email, - }, - { - value: EmailActionTypes.MACHINE_OPENED, - label: MailPoet.I18n.t('emailActionMachineOpened'), - group: SegmentTypes.Email, - }, - { - value: EmailActionTypes.CLICKED, - label: MailPoet.I18n.t('emailActionClicked'), - group: SegmentTypes.Email, - }, - { - value: EmailActionTypes.CLICKED_ANY, - label: MailPoet.I18n.t('emailActionClickedAnyEmail'), - group: SegmentTypes.Email, - }, -]; - export function validateEmail(formItems: EmailFormItem): boolean { // check if the action has the right type if (!Object.values(EmailActionTypes).some((v) => v === formItems.action)) @@ -87,8 +53,7 @@ type Props = { export function EmailFields({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx index 0869dc1643..08cb3bbeef 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx @@ -7,6 +7,7 @@ import { Input } from 'common/form/input/input'; import { MailPoet } from 'mailpoet'; import { EmailFormItem } from '../types'; +import { store } from '../store/store'; function replaceElementsInDaysSentence( fn: (value) => JSX.Element, @@ -32,14 +33,12 @@ export function EmailOpensAbsoluteCountFields({ filterIndex, }: Props): JSX.Element { const segment: EmailFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); useEffect(() => { if (segment.operator === undefined) { void updateSegmentFilter({ operator: 'more' }, filterIndex); diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_options.ts b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_options.ts new file mode 100644 index 0000000000..b3f3c175ba --- /dev/null +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_options.ts @@ -0,0 +1,35 @@ +import { EmailActionTypes, SegmentTypes } from 'segments/dynamic/types'; +import { MailPoet } from 'mailpoet'; + +export const EmailSegmentOptions = [ + { + value: EmailActionTypes.OPENS_ABSOLUTE_COUNT, + label: MailPoet.I18n.t('emailActionOpensAbsoluteCount'), + group: SegmentTypes.Email, + }, + { + value: EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT, + label: MailPoet.I18n.t('emailActionMachineOpensAbsoluteCount'), + group: SegmentTypes.Email, + }, + { + value: EmailActionTypes.OPENED, + label: MailPoet.I18n.t('emailActionOpened'), + group: SegmentTypes.Email, + }, + { + value: EmailActionTypes.MACHINE_OPENED, + label: MailPoet.I18n.t('emailActionMachineOpened'), + group: SegmentTypes.Email, + }, + { + value: EmailActionTypes.CLICKED, + label: MailPoet.I18n.t('emailActionClicked'), + group: SegmentTypes.Email, + }, + { + value: EmailActionTypes.CLICKED_ANY, + label: MailPoet.I18n.t('emailActionClickedAnyEmail'), + group: SegmentTypes.Email, + }, +]; diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx index c315a4308d..1f8a9d96dd 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx @@ -13,6 +13,7 @@ import { SelectOption, WindowNewslettersList, } from '../types'; +import { store } from '../store/store'; const shouldDisplayLinks = (itemNewsletterId?: string): boolean => !!itemNewsletterId; @@ -25,17 +26,15 @@ export function EmailClickStatisticsFields({ filterIndex, }: Props): JSX.Element { const segment: EmailFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); const newslettersList: WindowNewslettersList = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getNewslettersList(), + (select) => select(store).getNewslettersList(), [], ); diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx index e657fe7db8..a6528e7b65 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx @@ -13,6 +13,7 @@ import { SelectOption, WindowNewslettersList, } from '../types'; +import { store } from '../store/store'; type Props = { filterIndex: number; @@ -20,17 +21,15 @@ type Props = { export function EmailOpenStatisticsFields({ filterIndex }: Props): JSX.Element { const segment: EmailFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); const newslettersList: WindowNewslettersList = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getNewslettersList(), + (select) => select(store).getNewslettersList(), [], ); diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx index 55c5e90f27..bd318ba86d 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx @@ -1,11 +1,7 @@ -import { MailPoet } from 'mailpoet'; import { useSelect } from '@wordpress/data'; -import { - SegmentTypes, - WordpressRoleFormItem, - SubscriberActionTypes, -} from '../types'; +import { WordpressRoleFormItem, SubscriberActionTypes } from '../types'; +import { store } from '../store/store'; import { WordpressRoleFields } from './subscriber_wordpress_role'; import { SubscriberScoreFields, @@ -69,39 +65,6 @@ export function validateSubscriber(formItems: WordpressRoleFormItem): boolean { return false; } -export const SubscriberSegmentOptions = [ - { - value: SubscriberActionTypes.MAILPOET_CUSTOM_FIELD, - label: MailPoet.I18n.t('mailpoetCustomField'), - group: SegmentTypes.WordPressRole, - }, - { - value: SubscriberActionTypes.SUBSCRIBER_SCORE, - label: MailPoet.I18n.t('subscriberScore'), - group: SegmentTypes.WordPressRole, - }, - { - value: SubscriberActionTypes.SUBSCRIBED_DATE, - label: MailPoet.I18n.t('subscribedDate'), - group: SegmentTypes.WordPressRole, - }, - { - value: SubscriberActionTypes.SUBSCRIBED_TO_LIST, - label: MailPoet.I18n.t('subscribedToList'), - group: SegmentTypes.WordPressRole, - }, - { - value: SubscriberActionTypes.SUBSCRIBER_TAG, - label: MailPoet.I18n.t('subscriberTag'), - group: SegmentTypes.WordPressRole, - }, - { - value: SubscriberActionTypes.WORDPRESS_ROLE, - label: MailPoet.I18n.t('segmentsSubscriber'), - group: SegmentTypes.WordPressRole, - }, -]; - const componentsMap = { [SubscriberActionTypes.WORDPRESS_ROLE]: WordpressRoleFields, [SubscriberActionTypes.SUBSCRIBER_SCORE]: SubscriberScoreFields, @@ -117,8 +80,7 @@ type Props = { export function SubscriberFields({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx index 99503518b1..380550499d 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx @@ -14,6 +14,7 @@ import { SelectOption, WindowCustomFields, } from '../types'; +import { store } from '../store/store'; enum CustomFieldsTypes { DATE = 'date', @@ -58,15 +59,14 @@ type Props = { export function MailPoetCustomFields({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter } = useDispatch('mailpoet-dynamic-segments-form'); + const { updateSegmentFilter } = useDispatch(store); const customFieldsList: WindowCustomFields = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getCustomFieldsList(), + (select) => select(store).getCustomFieldsList(), [], ); const selectedCustomField = find( diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_opitions.ts b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_opitions.ts new file mode 100644 index 0000000000..076eb8d390 --- /dev/null +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_opitions.ts @@ -0,0 +1,35 @@ +import { SegmentTypes, SubscriberActionTypes } from 'segments/dynamic/types'; +import { MailPoet } from 'mailpoet'; + +export const SubscriberSegmentOptions = [ + { + value: SubscriberActionTypes.MAILPOET_CUSTOM_FIELD, + label: MailPoet.I18n.t('mailpoetCustomField'), + group: SegmentTypes.WordPressRole, + }, + { + value: SubscriberActionTypes.SUBSCRIBER_SCORE, + label: MailPoet.I18n.t('subscriberScore'), + group: SegmentTypes.WordPressRole, + }, + { + value: SubscriberActionTypes.SUBSCRIBED_DATE, + label: MailPoet.I18n.t('subscribedDate'), + group: SegmentTypes.WordPressRole, + }, + { + value: SubscriberActionTypes.SUBSCRIBED_TO_LIST, + label: MailPoet.I18n.t('subscribedToList'), + group: SegmentTypes.WordPressRole, + }, + { + value: SubscriberActionTypes.SUBSCRIBER_TAG, + label: MailPoet.I18n.t('subscriberTag'), + group: SegmentTypes.WordPressRole, + }, + { + value: SubscriberActionTypes.WORDPRESS_ROLE, + label: MailPoet.I18n.t('segmentsSubscriber'), + group: SegmentTypes.WordPressRole, + }, +]; diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx index ee882bde26..eef006f69f 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx @@ -7,6 +7,7 @@ import { Grid } from 'common/grid'; import { Input } from 'common/form/input/input'; import { WordpressRoleFormItem } from '../types'; +import { store } from '../store/store'; export enum SubscriberScoreOperator { HIGHER_THAN = 'higherThan', @@ -67,14 +68,12 @@ function replaceSubscriberScoreSentence( export function SubscriberScoreFields({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); useEffect(() => { if ( diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx index 508536d9d2..0b5e242bf7 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx @@ -9,6 +9,7 @@ import { Grid } from 'common/grid'; import { Input } from 'common/form/input/input'; import { WordpressRoleFormItem } from '../types'; +import { store } from '../store/store'; export enum SubscribedDateOperator { BEFORE = 'before', @@ -54,14 +55,12 @@ type Props = { export function SubscribedDateFields({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); useEffect(() => { if ( diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx index 7ca687e01c..358cec9656 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx @@ -13,6 +13,7 @@ import { StaticSegment, WordpressRoleFormItem, } from '../types'; +import { store } from '../store/store'; export function validateSubscribedToList( formItems: WordpressRoleFormItem, @@ -32,19 +33,16 @@ type Props = { export function SubscribedToList({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); const staticSegmentsList: StaticSegment[] = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getStaticSegmentsList(), + (select) => select(store).getStaticSegmentsList(), [], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); useEffect(() => { if ( diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx index 4317add9ab..a230d9337f 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx @@ -14,6 +14,7 @@ import { AnyValueTypes, SubscriberActionTypes, } from '../types'; +import { store } from '../store/store'; type Props = { filterIndex: number; @@ -21,14 +22,12 @@ type Props = { export function WordpressRoleFields({ filterIndex }: Props): JSX.Element { const segment: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); useEffect(() => { if ( @@ -42,7 +41,7 @@ export function WordpressRoleFields({ filterIndex }: Props): JSX.Element { }, [updateSegmentFilter, segment, filterIndex]); const wordpressRoles: WindowEditableRoles = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getWordpressRoles(), + (select) => select(store).getWordpressRoles(), [], ); const options = wordpressRoles.map((currentValue) => ({ diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx index d8bf00cd3b..67f965a65f 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx @@ -9,54 +9,17 @@ import { Grid } from 'common/grid'; import { Input } from 'common/form/input/input'; import { AnyValueTypes, - SegmentTypes, SelectOption, WindowProductCategories, WindowProducts, WindowWooCommerceCountries, WooCommerceFormItem, } from '../types'; - -enum WooCommerceActionTypes { - NUMBER_OF_ORDERS = 'numberOfOrders', - PURCHASED_CATEGORY = 'purchasedCategory', - PURCHASED_PRODUCT = 'purchasedProduct', - TOTAL_SPENT = 'totalSpent', - CUSTOMER_IN_COUNTRY = 'customerInCountry', -} - -export const WooCommerceOptions = [ - { - value: WooCommerceActionTypes.CUSTOMER_IN_COUNTRY, - label: MailPoet.I18n.t('wooCustomerInCountry'), - group: SegmentTypes.WooCommerce, - }, - { - value: WooCommerceActionTypes.NUMBER_OF_ORDERS, - label: MailPoet.I18n.t('wooNumberOfOrders'), - group: SegmentTypes.WooCommerce, - }, - { - value: WooCommerceActionTypes.PURCHASED_CATEGORY, - label: MailPoet.I18n.t('wooPurchasedCategory'), - group: SegmentTypes.WooCommerce, - }, - { - value: WooCommerceActionTypes.PURCHASED_PRODUCT, - label: MailPoet.I18n.t('wooPurchasedProduct'), - group: SegmentTypes.WooCommerce, - }, - { - value: WooCommerceActionTypes.TOTAL_SPENT, - label: MailPoet.I18n.t('wooTotalSpent'), - group: SegmentTypes.WooCommerce, - }, -]; - -const actionTypesWithDefaultTypeAny: Array = [ - WooCommerceActionTypes.PURCHASED_PRODUCT, - WooCommerceActionTypes.PURCHASED_CATEGORY, -]; +import { store } from '../store/store'; +import { + WooCommerceActionTypes, + actionTypesWithDefaultTypeAny, +} from './woocommerce_options'; export function validateWooCommerce(formItems: WooCommerceFormItem): boolean { if ( @@ -121,31 +84,27 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex, }) => { const segment: WooCommerceFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); const productCategories: WindowProductCategories = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getProductCategories(), + (select) => select(store).getProductCategories(), [], ); const woocommerceCountries: WindowWooCommerceCountries = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getWooCommerceCountries(), + (select) => select(store).getWooCommerceCountries(), [], ); const products: WindowProducts = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getProducts(), + (select) => select(store).getProducts(), [], ); const wooCurrencySymbol: string = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getWooCommerceCurrencySymbol(), + (select) => select(store).getWooCommerceCurrencySymbol(), [], ); const productOptions = products.map((product) => ({ diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx index 7933d1e311..f1cf6b9f90 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx @@ -9,23 +9,12 @@ import { Grid } from 'common/grid'; import { AnyValueTypes, - SegmentTypes, SelectOption, WindowMembershipPlans, WooCommerceMembershipFormItem, } from '../types'; - -enum WooCommerceMembershipsActionTypes { - MEMBER_OF = 'isMemberOf', -} - -export const WooCommerceMembershipOptions = [ - { - value: WooCommerceMembershipsActionTypes.MEMBER_OF, - label: MailPoet.I18n.t('segmentsActiveMembership'), - group: SegmentTypes.WooCommerceMembership, - }, -]; +import { store } from '../store/store'; +import { WooCommerceMembershipsActionTypes } from './woocommerce_options'; export function validateWooCommerceMembership( formItem: WooCommerceMembershipFormItem, @@ -49,17 +38,15 @@ export function WooCommerceMembershipFields({ filterIndex, }: Props): JSX.Element { const segment: WooCommerceMembershipFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); const membershipPlans: WindowMembershipPlans = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getMembershipPlans(), + (select) => select(store).getMembershipPlans(), [], ); const planOptions = membershipPlans.map((plan) => ({ diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_options.ts b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_options.ts new file mode 100644 index 0000000000..84313a6989 --- /dev/null +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_options.ts @@ -0,0 +1,70 @@ +import { MailPoet } from 'mailpoet'; +import { SegmentTypes } from 'segments/dynamic/types'; + +// WooCommerce +export enum WooCommerceActionTypes { + NUMBER_OF_ORDERS = 'numberOfOrders', + PURCHASED_CATEGORY = 'purchasedCategory', + PURCHASED_PRODUCT = 'purchasedProduct', + TOTAL_SPENT = 'totalSpent', + CUSTOMER_IN_COUNTRY = 'customerInCountry', +} + +export const WooCommerceOptions = [ + { + value: WooCommerceActionTypes.CUSTOMER_IN_COUNTRY, + label: MailPoet.I18n.t('wooCustomerInCountry'), + group: SegmentTypes.WooCommerce, + }, + { + value: WooCommerceActionTypes.NUMBER_OF_ORDERS, + label: MailPoet.I18n.t('wooNumberOfOrders'), + group: SegmentTypes.WooCommerce, + }, + { + value: WooCommerceActionTypes.PURCHASED_CATEGORY, + label: MailPoet.I18n.t('wooPurchasedCategory'), + group: SegmentTypes.WooCommerce, + }, + { + value: WooCommerceActionTypes.PURCHASED_PRODUCT, + label: MailPoet.I18n.t('wooPurchasedProduct'), + group: SegmentTypes.WooCommerce, + }, + { + value: WooCommerceActionTypes.TOTAL_SPENT, + label: MailPoet.I18n.t('wooTotalSpent'), + group: SegmentTypes.WooCommerce, + }, +]; + +export const actionTypesWithDefaultTypeAny: Array = [ + WooCommerceActionTypes.PURCHASED_PRODUCT, + WooCommerceActionTypes.PURCHASED_CATEGORY, +]; + +// WooCommerce Memberships +export enum WooCommerceMembershipsActionTypes { + MEMBER_OF = 'isMemberOf', +} + +export const WooCommerceMembershipOptions = [ + { + value: WooCommerceMembershipsActionTypes.MEMBER_OF, + label: MailPoet.I18n.t('segmentsActiveMembership'), + group: SegmentTypes.WooCommerceMembership, + }, +]; + +// WooCommerce Subscriptions +export enum WooCommerceSubscriptionsActionTypes { + ACTIVE_SUBSCRIPTIONS = 'hasActiveSubscription', +} + +export const WooCommerceSubscriptionOptions = [ + { + value: WooCommerceSubscriptionsActionTypes.ACTIVE_SUBSCRIPTIONS, + label: MailPoet.I18n.t('segmentsActiveSubscription'), + group: SegmentTypes.WooCommerceSubscription, + }, +]; diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx index 23c0f3ac91..8695252f8f 100644 --- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx @@ -9,23 +9,12 @@ import { Grid } from 'common/grid'; import { AnyValueTypes, - SegmentTypes, SelectOption, WindowSubscriptionProducts, WooCommerceSubscriptionFormItem, } from '../types'; - -enum WooCommerceSubscriptionsActionTypes { - ACTIVE_SUBSCRIPTIONS = 'hasActiveSubscription', -} - -export const WooCommerceSubscriptionOptions = [ - { - value: WooCommerceSubscriptionsActionTypes.ACTIVE_SUBSCRIPTIONS, - label: MailPoet.I18n.t('segmentsActiveSubscription'), - group: SegmentTypes.WooCommerceSubscription, - }, -]; +import { store } from '../store/store'; +import { WooCommerceSubscriptionsActionTypes } from './woocommerce_options'; export function validateWooCommerceSubscription( formItem: WooCommerceSubscriptionFormItem, @@ -50,18 +39,15 @@ export function WooCommerceSubscriptionFields({ filterIndex, }: Props): JSX.Element { const segment: WooCommerceSubscriptionFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); - const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegmentFilter, updateSegmentFilterFromEvent } = + useDispatch(store); const subscriptionProducts: WindowSubscriptionProducts = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSubscriptionProducts(), + (select) => select(store).getSubscriptionProducts(), [], ); const productOptions = subscriptionProducts.map((product) => ({ diff --git a/mailpoet/assets/js/src/segments/dynamic/editor.tsx b/mailpoet/assets/js/src/segments/dynamic/editor.tsx index d75e345fb9..68fd13f972 100644 --- a/mailpoet/assets/js/src/segments/dynamic/editor.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/editor.tsx @@ -8,14 +8,14 @@ import { Heading } from 'common/typography/heading/heading'; import { HideScreenOptions } from 'common/hide_screen_options/hide_screen_options'; import { Form } from './form'; -import { createStore } from './store/store'; +import { createStore, store } from './store/store'; export function Editor(): JSX.Element { const match = useRouteMatch<{ id: string }>(); createStore(); - const { pageLoaded } = useDispatch('mailpoet-dynamic-segments-form'); + const { pageLoaded } = useDispatch(store); useEffect(() => { void pageLoaded(match.params.id); diff --git a/mailpoet/assets/js/src/segments/dynamic/form.tsx b/mailpoet/assets/js/src/segments/dynamic/form.tsx index 5a1946d73c..ff63c061aa 100644 --- a/mailpoet/assets/js/src/segments/dynamic/form.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/form.tsx @@ -4,18 +4,19 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { Hooks } from 'wp-js-hooks'; import { MailPoet } from 'mailpoet'; import { Button } from 'common/button/button'; +import { plusIcon } from 'common/button/icon/plus'; import { Heading } from 'common/typography/heading/heading'; import { Input } from 'common/form/input/input'; import { ReactSelect } from 'common/form/react_select/react_select'; import { Textarea } from 'common/form/textarea/textarea'; import { Grid } from 'common/grid'; +import { APIErrorsNotice } from 'notices/api_errors_notice'; import { SubscribersCounter } from './subscribers_counter'; import { FormFilterFields } from './form_filter_fields'; import { isFormValid } from './validator'; -import { plusIcon } from '../../common/button/icon/plus'; -import { APIErrorsNotice } from '../../notices/api_errors_notice'; import { PrivacyProtectionNotice } from './privacy_protection_notice'; import { DynamicSegmentsPremiumBanner } from './premium_banner'; +import { store } from './store/store'; import { FilterRow, @@ -44,36 +45,28 @@ const FilterAfter = Hooks.applyFilters( export function Form({ segmentId }: Props): JSX.Element { const segment: Segment = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getSegment(), + (select) => select(store).getSegment(), [], ); const segmentFilters: GroupFilterValue[] = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getAvailableFilters(), + (select) => select(store).getAvailableFilters(), [], ); const filterRows: FilterRow[] = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').findFiltersValueForSegment( - segment, - ), + (select) => select(store).findFiltersValueForSegment(segment), [segment], ); const subscriberCount: SubscriberCount = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getSubscriberCount(), + (select) => select(store).getSubscriberCount(), [], ); - const errors: string[] = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getErrors(), - [], - ); + const errors: string[] = useSelect((select) => select(store).getErrors(), []); - const { updateSegment, updateSegmentFilter, handleSave } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSegment, updateSegmentFilter, handleSave } = useDispatch(store); const [premiumBannerVisible, setPremiumBannerVisible] = useState(false); const showPremiumBanner = (): void => { diff --git a/mailpoet/assets/js/src/segments/dynamic/form_filter_fields.tsx b/mailpoet/assets/js/src/segments/dynamic/form_filter_fields.tsx index d513638bf7..de6b91ddfd 100644 --- a/mailpoet/assets/js/src/segments/dynamic/form_filter_fields.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/form_filter_fields.tsx @@ -7,6 +7,7 @@ import { SubscriberFields } from './dynamic_segments_filters/subscriber'; import { WooCommerceFields } from './dynamic_segments_filters/woocommerce'; import { WooCommerceMembershipFields } from './dynamic_segments_filters/woocommerce_membership'; import { WooCommerceSubscriptionFields } from './dynamic_segments_filters/woocommerce_subscription'; +import { store } from './store/store'; const filterFieldsMap = { [SegmentTypes.Email]: EmailFields, @@ -22,8 +23,7 @@ type Props = { export function FormFilterFields({ filterIndex }: Props): JSX.Element { const filter: WordpressRoleFormItem = useSelect( - (select) => - select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex), + (select) => select(store).getSegmentFilter(filterIndex), [filterIndex], ); diff --git a/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx b/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx index 879d7707b8..03f8e9a4d7 100644 --- a/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx @@ -2,10 +2,11 @@ import { MailPoet } from 'mailpoet'; import { useSelect } from '@wordpress/data'; import { EmailActionTypes, Segment } from './types'; +import { store } from './store/store'; function PrivacyProtectionNotice(): JSX.Element { const segment: Segment = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getSegment(), + (select) => select(store).getSegment(), [], ); diff --git a/mailpoet/assets/js/src/segments/dynamic/store/actions.ts b/mailpoet/assets/js/src/segments/dynamic/store/actions.ts index 8b5116d260..7be4728383 100644 --- a/mailpoet/assets/js/src/segments/dynamic/store/actions.ts +++ b/mailpoet/assets/js/src/segments/dynamic/store/actions.ts @@ -1,6 +1,10 @@ import { ChangeEvent } from 'react'; import { select } from '@wordpress/data'; import { MailPoet } from 'mailpoet'; +import { + ReduxStoreConfig, + StoreDescriptor, +} from '@wordpress/data/build-types/types'; import { Actions, @@ -8,9 +12,16 @@ import { SetSegmentActionType, SetErrorsActionType, SetSegmentFilerActionType, + StateType, SubscriberCount, SetSubscriberCountActionType, } from '../types'; +import * as selectors from './selectors'; + +// workaround to avoid import cycles +const store = { name: 'mailpoet-dynamic-segments-form' } as StoreDescriptor< + ReduxStoreConfig +>; export function setSegment(segment: AnyFormItem): SetSegmentActionType { return { @@ -116,7 +127,7 @@ export function* handleSave(segmentId?: number): Generator<{ type: string; segment?: AnyFormItem; }> { - const segment = select('mailpoet-dynamic-segments-form').getSegment(); + const segment = select(store).getSegment(); yield setErrors([]); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore -- I don't know how to configure typescript to understand this diff --git a/mailpoet/assets/js/src/segments/dynamic/store/all_available_filters.ts b/mailpoet/assets/js/src/segments/dynamic/store/all_available_filters.ts index 6b3e3a312f..be3c0de33d 100644 --- a/mailpoet/assets/js/src/segments/dynamic/store/all_available_filters.ts +++ b/mailpoet/assets/js/src/segments/dynamic/store/all_available_filters.ts @@ -1,11 +1,13 @@ import { MailPoet } from 'mailpoet'; import { GroupFilterValue } from '../types'; -import { EmailSegmentOptions } from '../dynamic_segments_filters/email'; -import { SubscriberSegmentOptions } from '../dynamic_segments_filters/subscriber'; -import { WooCommerceOptions } from '../dynamic_segments_filters/woocommerce'; -import { WooCommerceMembershipOptions } from '../dynamic_segments_filters/woocommerce_membership'; -import { WooCommerceSubscriptionOptions } from '../dynamic_segments_filters/woocommerce_subscription'; +import { EmailSegmentOptions } from '../dynamic_segments_filters/email_options'; +import { SubscriberSegmentOptions } from '../dynamic_segments_filters/subscriber_opitions'; +import { + WooCommerceOptions, + WooCommerceMembershipOptions, + WooCommerceSubscriptionOptions, +} from '../dynamic_segments_filters/woocommerce_options'; export function getAvailableFilters( canUseWooSubscriptions: boolean, diff --git a/mailpoet/assets/js/src/segments/dynamic/store/initial_state.ts b/mailpoet/assets/js/src/segments/dynamic/store/initial_state.ts new file mode 100644 index 0000000000..cd2126ccf1 --- /dev/null +++ b/mailpoet/assets/js/src/segments/dynamic/store/initial_state.ts @@ -0,0 +1,44 @@ +import { + SegmentConnectTypes, + SegmentFormDataWindow, + SegmentTypes, + StateType, + SubscriberActionTypes, +} from 'segments/dynamic/types'; + +import { getAvailableFilters } from 'segments/dynamic/store/all_available_filters'; + +declare let window: SegmentFormDataWindow; + +export const getInitialState = (): StateType => ({ + products: window.mailpoet_products, + staticSegmentsList: window.mailpoet_static_segments_list, + membershipPlans: window.mailpoet_membership_plans, + subscriptionProducts: window.mailpoet_subscription_products, + productCategories: window.mailpoet_product_categories, + newslettersList: window.mailpoet_newsletters_list, + wordpressRoles: window.wordpress_editable_roles_list, + canUseWooMemberships: window.mailpoet_can_use_woocommerce_memberships, + canUseWooSubscriptions: window.mailpoet_can_use_woocommerce_subscriptions, + wooCurrencySymbol: window.mailpoet_woocommerce_currency_symbol, + wooCountries: window.mailpoet_woocommerce_countries, + customFieldsList: window.mailpoet_custom_fields, + tags: window.mailpoet_tags, + segment: { + filters_connect: SegmentConnectTypes.AND, + filters: [ + { + segmentType: SegmentTypes.WordPressRole, + action: SubscriberActionTypes.WORDPRESS_ROLE, + }, + ], + }, + subscriberCount: { + loading: false, + }, + errors: [], + allAvailableFilters: getAvailableFilters( + window.mailpoet_can_use_woocommerce_subscriptions, + window.mailpoet_can_use_woocommerce_memberships, + ), +}); diff --git a/mailpoet/assets/js/src/segments/dynamic/store/store.ts b/mailpoet/assets/js/src/segments/dynamic/store/store.ts index 7679346d1d..b7c1ba58d6 100644 --- a/mailpoet/assets/js/src/segments/dynamic/store/store.ts +++ b/mailpoet/assets/js/src/segments/dynamic/store/store.ts @@ -2,58 +2,16 @@ * The store is implemented using @wordpress/data module * @see https://developer.wordpress.org/block-editor/packages/packages-data/ */ -import { registerStore } from '@wordpress/data'; +import { createReduxStore, register } from '@wordpress/data'; import * as selectors from './selectors'; import { createReducer } from './reducer'; import * as actions from './actions'; import * as controls from './controls'; +import { getInitialState } from './initial_state'; -import { - StateType, - SegmentFormDataWindow, - SegmentTypes, - SegmentConnectTypes, - SubscriberActionTypes, -} from '../types'; -import { getAvailableFilters } from './all_available_filters'; - -declare let window: SegmentFormDataWindow; - -const STORE = 'mailpoet-dynamic-segments-form'; -export const createStore = (): void => { - const defaultState: StateType = { - products: window.mailpoet_products, - staticSegmentsList: window.mailpoet_static_segments_list, - membershipPlans: window.mailpoet_membership_plans, - subscriptionProducts: window.mailpoet_subscription_products, - productCategories: window.mailpoet_product_categories, - newslettersList: window.mailpoet_newsletters_list, - wordpressRoles: window.wordpress_editable_roles_list, - canUseWooMemberships: window.mailpoet_can_use_woocommerce_memberships, - canUseWooSubscriptions: window.mailpoet_can_use_woocommerce_subscriptions, - wooCurrencySymbol: window.mailpoet_woocommerce_currency_symbol, - wooCountries: window.mailpoet_woocommerce_countries, - customFieldsList: window.mailpoet_custom_fields, - tags: window.mailpoet_tags, - segment: { - filters_connect: SegmentConnectTypes.AND, - filters: [ - { - segmentType: SegmentTypes.WordPressRole, - action: SubscriberActionTypes.WORDPRESS_ROLE, - }, - ], - }, - subscriberCount: { - loading: false, - }, - errors: [], - allAvailableFilters: getAvailableFilters( - window.mailpoet_can_use_woocommerce_subscriptions, - window.mailpoet_can_use_woocommerce_memberships, - ), - }; - +const storeName = 'mailpoet-dynamic-segments-form'; +export const createStore = () => { + const defaultState = getInitialState(); const config = { selectors, actions, @@ -62,5 +20,12 @@ export const createStore = (): void => { resolvers: {}, }; - registerStore(STORE, config); + const store = createReduxStore(storeName, config); + register(store); + return store; +}; + +export const store: ReturnType = { + name: storeName, + instantiate: (registry) => createStore().instantiate(registry), }; diff --git a/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx b/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx index 36e3f087d1..bfcb1fe7ad 100644 --- a/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx +++ b/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx @@ -6,21 +6,20 @@ import { isFormValid } from './validator'; import { loadCount } from './subscribers_calculator'; import { Segment, SubscriberCount } from './types'; +import { store } from './store/store'; function SubscribersCounter(): JSX.Element { const segment: Segment = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getSegment(), + (select) => select(store).getSegment(), [], ); const subscribersCount: SubscriberCount = useSelect( - (select) => select('mailpoet-dynamic-segments-form').getSubscriberCount(), + (select) => select(store).getSubscriberCount(), [], ); - const { updateSubscriberCount } = useDispatch( - 'mailpoet-dynamic-segments-form', - ); + const { updateSubscriberCount } = useDispatch(store); const serializedSegment = JSON.stringify(segment); const latestRequestIdRef = useRef(1);