Add component with message about cache on subscriber list page

[MAILPOET-3646]

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;
+  }
+}

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 (
+    <div className="mailpoet-subscribers-cache-notice">
+      {MailPoet.I18n.t('subscribersCountWereCalculated')}
+      &nbsp;
+      <abbr title={cacheCalculation}>{`${String(minutes)} ${String(MailPoet.I18n.t('subscribersMinutesAgo'))}`}</abbr>
+      <Button
+        className="mailpoet-subscribers-cache-notice-button"
+        type="button"
+        variant="secondary"
+        dimension="small"
+        onClick={() => {
+          setLoading(true);
+          handleRecalculate();
+        }}
+        withSpinner={loading}
+      >
+        {MailPoet.I18n.t('recalculateNow')}
+      </Button>
+      <div className="mailpoet-gap" />
+    </div>
+  );
+};
+
+export { SubscribersCacheMessage };

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}
     />
 
+    <SubscribersCacheMessage cacheCalculation="2021-06-28 18:22:00" />
+
     <SubscribersLimitNotice />
     <InvalidMssKeyNotice
       mssKeyInvalid={MailPoet.hasInvalidMssApiKey}

views/segments.html

@@ -225,5 +225,9 @@
     'anyConditions': _x('<strong>Any</strong> 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 %>