Add note

[MAILPOET-3763]

assets/js/src/newsletters/types/re_engagement/re_engagement.tsx

@@ -30,6 +30,9 @@ export function NewsletterTypeReEngagement(): JSX.Element {
         <Scheduling
           afterTimeNumber={options.afterTimeNumber}
           afterTimeType={options.afterTimeType}
+          inactiveSubscribersPeriod={
+            Number(window.settings.deactivate_subscriber_after_inactive_days)
+          }
         />
 
         <Button

assets/js/src/newsletters/types/re_engagement/scheduling.tsx

@@ -7,13 +7,20 @@ import Select from 'common/form/select/select';
 interface Props {
   afterTimeNumber: string;
   afterTimeType: string;
+  inactiveSubscribersPeriod: number;
 }
 
-export function Scheduling({ afterTimeNumber, afterTimeType }: Props): JSX.Element {
+export function Scheduling({
+  afterTimeNumber,
+  afterTimeType,
+  inactiveSubscribersPeriod,
+}: Props): JSX.Element {
+  const daysInPeriod = afterTimeType === 'weeks' ? 7 : 30;
+  const daysSelected = Number(afterTimeNumber) * daysInPeriod;
   return (
     <>
       <Heading level={4}>{MailPoet.I18n.t('selectEventToSendReEngagementEmail')}</Heading>
-      <div className="mailpoet-grid-column mailpoet-flex">
+      <div className="mailpoet-grid-column mailpoet-flex mailpoet-re-engagement-scheduling">
         <p>
           {MailPoet.I18n.t('reEngagementTextPre')}
         </p>
@@ -23,11 +30,20 @@ export function Scheduling({ afterTimeNumber, afterTimeType }: Props): JSX.Eleme
           value={afterTimeNumber}
           dimension="small"
         />
-        <Select isMinWidth value={afterTimeType}>
+        <Select
+          isMinWidth
+          value={afterTimeType}
+          dimension="small"
+        >
           <option value="weeks">weeks</option>
           <option value="months">months</option>
         </Select>
       </div>
+      {
+        (inactiveSubscribersPeriod <= daysSelected) && (
+          <div>note</div>
+        )
+      }
     </>
   );
 }