Refactor Notice component to Typescript

[MAILPOET-2658]

assets/js/src/notices/api_errors_notice.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Notice from 'notices/notice.jsx';
+import Notice from 'notices/notice.tsx';
 
 const APIErrorsNotice = ({ errors }) => {
   if (errors.length < 1) return null;

assets/js/src/notices/mailer_status_notice.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Notice from 'notices/notice.jsx';
+import Notice from 'notices/notice.tsx';
 
 const MailerStatusNotice = ({ error }) => {
   if (!error || error.operation !== 'authorization') return null;

assets/js/src/notices/notice.tsx

@@ -1,9 +1,24 @@
-import React from 'react';
+import React, { FC } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
+import PropTypes, { InferProps } from 'prop-types';
 import MailPoet from 'mailpoet';
 
-const Notice = ({
+const propTypes = {
+  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired,
+  scroll: PropTypes.bool,
+  closable: PropTypes.bool,
+  renderInPlace: PropTypes.bool,
+  onDisplay: PropTypes.func,
+  onClose: PropTypes.func,
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]).isRequired,
+};
+
+const Notice: FC<InferProps<typeof propTypes>> = ({
   onClose,
   onDisplay,
   renderInPlace,
@@ -24,7 +39,7 @@ const Notice = ({
 
   React.useEffect(() => {
     if (timeout) {
-      timeoutRef.current = setTimeout(close, timeout);
+      timeoutRef.current = setTimeout(close, timeout as number);
     }
     return () => (timeoutRef.current ? clearTimeout(timeoutRef.current) : null);
   }, [close, timeout]);
@@ -61,20 +76,7 @@ const Notice = ({
     document.getElementById('mailpoet_notices')
   );
 };
-Notice.propTypes = {
+Notice.propTypes = propTypes;
-  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']).isRequired,
-  scroll: PropTypes.bool,
-  closable: PropTypes.bool,
-  renderInPlace: PropTypes.bool,
-  onDisplay: PropTypes.func,
-  onClose: PropTypes.func,
-  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-  ]).isRequired,
-};
 Notice.defaultProps = {
   timeout: 10000,
   scroll: false,

assets/js/src/notices/notices.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GlobalContext } from 'context/index.jsx';
-import Notice from './notice.jsx';
+import Notice from './notice.tsx';
 
 export default () => {
   const { notices } = React.useContext(GlobalContext);

assets/js/src/notices/subscribers_limit_notice.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
-import Notice from 'notices/notice.jsx';
+import Notice from 'notices/notice.tsx';
 
 const SubscribersLimitNotice = () => {
   if (!window.mailpoet_subscribers_limit_reached) return null;