Add component with message about cache on subscriber list page

[MAILPOET-3646]

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}