diff --git a/mailpoet/assets/js/src/segments/dynamic/list.jsx b/mailpoet/assets/js/src/segments/dynamic/list.tsx similarity index 85% rename from mailpoet/assets/js/src/segments/dynamic/list.jsx rename to mailpoet/assets/js/src/segments/dynamic/list.tsx index 34c74c7107..fc3adea8af 100644 --- a/mailpoet/assets/js/src/segments/dynamic/list.jsx +++ b/mailpoet/assets/js/src/segments/dynamic/list.tsx @@ -1,12 +1,42 @@ import { Link, withRouter } from 'react-router-dom'; -import PropTypes from 'prop-types'; import ReactStringReplace from 'react-string-replace'; import { MailPoet } from 'mailpoet'; import { Listing } from 'listing/listing.jsx'; import { escapeHTML } from '@wordpress/escape-html'; +import { SegmentResponse } from 'segments/types'; -const columns = [ +type ColumnType = { + name: string; + label: string; + sortable: boolean; +}; + +type DynamicSegmentItem = { + id: number; + name: string; + description: string; + count_all: string; + count_subscribed: string; + created_at: string; + is_plugin_missing: boolean; + subscribers_url: string; + missing_plugin_message?: { + message: string; + link?: string; + }; +}; + +type DynamicSegmentListComponentProps = { + location: { + pathname: string; + }; + match: { + params; + }; +}; + +const columns: ColumnType[] = [ { name: 'name', label: MailPoet.I18n.t('nameColumn'), @@ -85,10 +115,10 @@ const itemActions = [ { name: 'edit', className: 'mailpoet-hide-on-mobile', - link: (item) => ( + link: (item: DynamicSegmentItem) => ( {MailPoet.I18n.t('edit')} ), - display: (item) => !item.is_plugin_missing, + display: (item: DynamicSegmentItem) => !item.is_plugin_missing, }, { name: 'duplicate_segment', @@ -103,13 +133,13 @@ const itemActions = [ id: item.id, }, }) - .done((response) => { + .done((response: SegmentResponse) => { MailPoet.Notice.success( MailPoet.I18n.t('segmentDuplicated').replace( '%1$s', escapeHTML(response.data.name), - { scroll: true }, ), + { scroll: true }, ); refresh(); }) @@ -123,10 +153,10 @@ const itemActions = [ { name: 'edit_disabled', className: 'mailpoet-hide-on-mobile mailpoet-disabled', - link: (item) => ( + link: (item: DynamicSegmentItem) => ( {MailPoet.I18n.t('edit')} ), - display: (item) => item.is_plugin_missing, + display: (item: DynamicSegmentItem) => item.is_plugin_missing, }, { name: 'view_subscribers', @@ -148,7 +178,7 @@ const bulkActions = [ }, ]; -function renderItem(item, actions) { +function renderItem(item: DynamicSegmentItem, actions) { return ( <> {item.is_plugin_missing ? ( @@ -185,7 +215,7 @@ function renderItem(item, actions) { ), ) - : item.missing_plugin_message} + : item.missing_plugin_message.message} ) : ( <> @@ -215,7 +245,9 @@ function renderItem(item, actions) { ); } -function DynamicSegmentListComponent(props) { +function DynamicSegmentListComponent( + props: DynamicSegmentListComponentProps, +): JSX.Element { return ( <> segmentDependencyValidator->getCustomErrorMessage($missingPlugin) - ?: - sprintf( - // translators: %s is the name of the missing plugin. - __('Activate the %s plugin to see the number of subscribers and enable the editing of this segment.', 'mailpoet'), - $missingPlugin - ); + + $missingPluginMessage = $this->segmentDependencyValidator->getCustomErrorMessage($missingPlugin); + + if ($missingPluginMessage) { + $data['missing_plugin_message'] = $missingPluginMessage; + } else { + $data['missing_plugin_message']['message'] = + sprintf( + // translators: %s is the name of the missing plugin. + __('Activate the %s plugin to see the number of subscribers and enable the editing of this segment.', 'mailpoet'), + $missingPlugin + ); + } } else { $data['is_plugin_missing'] = false; $data['missing_plugin_message'] = null;