diff --git a/assets/css/src/components-plugin/_common.scss b/assets/css/src/components-plugin/_common.scss index 78e3d1129e..135c0b050e 100644 --- a/assets/css/src/components-plugin/_common.scss +++ b/assets/css/src/components-plugin/_common.scss @@ -82,3 +82,9 @@ p.sender_email_address_warning:first-child { margin-top: 0; } } + +.mailpoet-subscribers-cache-notice { + .mailpoet-subscribers-cache-notice-button { + margin-left: 10px; + } +} diff --git a/assets/js/src/common/subscribers_cache_message.tsx b/assets/js/src/common/subscribers_cache_message.tsx new file mode 100644 index 0000000000..91ce24fc51 --- /dev/null +++ b/assets/js/src/common/subscribers_cache_message.tsx @@ -0,0 +1,40 @@ +import React, { useState } from 'react'; +import MailPoet from 'mailpoet'; +import Button from 'common/button/button'; + +type Props = { + cacheCalculation: string; +}; + +const handleRecalculate = () => { + window.location.reload(); +}; + +const SubscribersCacheMessage = ({ cacheCalculation }: Props): JSX.Element => { + const [loading, setLoading] = useState(false); + const datetimeDiff = new Date().getTime() - new Date(cacheCalculation).getTime(); + const minutes = Math.floor((datetimeDiff / 1000) / 60); + return ( +
+ {MailPoet.I18n.t('subscribersCountWereCalculated')} +   + {`${String(minutes)} ${String(MailPoet.I18n.t('subscribersMinutesAgo'))}`} + +
+
+ ); +}; + +export { SubscribersCacheMessage }; diff --git a/assets/js/src/segments/heading.jsx b/assets/js/src/segments/heading.jsx index 0771f0c429..f81155a240 100644 --- a/assets/js/src/segments/heading.jsx +++ b/assets/js/src/segments/heading.jsx @@ -6,6 +6,7 @@ import plusIcon from 'common/button/icon/plus'; import SubscribersInPlan from 'common/subscribers_in_plan'; import SubscribersLimitNotice from 'notices/subscribers_limit_notice'; import InvalidMssKeyNotice from 'notices/invalid_mss_key_notice'; +import { SubscribersCacheMessage } from 'common/subscribers_cache_message'; const ListHeading = () => ( <> @@ -25,6 +26,8 @@ const ListHeading = () => ( subscribersInPlanLimit={MailPoet.subscribersLimit} /> + + Any of the following conditions', 'Dynamic segment creation: The user can select join between condition when he has more than one'), 'filterConnectAnd': _x('and', 'Dynamic segment creation: The user can see logical operator between condition when has more than one'), 'filterConnectOr': _x('or', 'Dynamic segment creation: The user can see logical operator between condition when has more than one'), + + 'subscribersCountWereCalculated': __('Lists and Segments subscribers counts were calculated'), + 'subscribersMinutesAgo': __('minutes ago'), + 'recalculateNow': __('Recalculate now'), }) %> <% endblock %>