diff --git a/assets/css/src/components-plugin/_newsletter-types.scss b/assets/css/src/components-plugin/_newsletter-types.scss index 45ce68c737..bb8d6d1fc2 100644 --- a/assets/css/src/components-plugin/_newsletter-types.scss +++ b/assets/css/src/components-plugin/_newsletter-types.scss @@ -85,6 +85,10 @@ } } +.mailpoet-re-engagement-scheduling-note { + color: $color-input-error; +} + .mailpoet-re-engagement-scheduling .mailpoet-form-input-small { width: 100px; } diff --git a/assets/js/src/newsletters/types/re_engagement/scheduling.tsx b/assets/js/src/newsletters/types/re_engagement/scheduling.tsx index af8ce37093..5bb2f76acc 100644 --- a/assets/js/src/newsletters/types/re_engagement/scheduling.tsx +++ b/assets/js/src/newsletters/types/re_engagement/scheduling.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import ReactStringReplace from 'react-string-replace'; + import MailPoet from 'mailpoet'; import Heading from 'common/typography/heading/heading'; import Input from 'common/form/input/input'; @@ -46,7 +48,26 @@ export function Scheduling({ { (inactiveSubscribersPeriod <= daysSelected) && ( -
+ { + ReactStringReplace( + MailPoet.I18n.t('reEngagementEmailWarning') + .replace('{$months}', inactiveSubscribersPeriod / 30), + /\[link\](.*?)\[\/link\]/g, + (match) => ( + + {match} + + ) + ) + } +
) } > diff --git a/views/newsletters.html b/views/newsletters.html index 0cba86560b..179e0292e8 100644 --- a/views/newsletters.html +++ b/views/newsletters.html @@ -105,6 +105,7 @@ 'reEngagementTextPre': __('After no activity for'), 'reEngagementAterTimeNumberPlaceholder': __('count'), + 'reEngagementEmailWarning': __('Disengaged subscribers will [link]become inactive[/link] after {$months} months and won’t receive this email. Please select a shorter period.'), 'searchLabel': __('Search'), 'loadingItems': __('Loading emails...'),