Improve the UX

[MAILPOET-3763]

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

@@ -16,24 +16,26 @@ import APIErrorsNotice from 'notices/api_errors_notice';
 import { Scheduling } from './scheduling';
 import ListingHeadingStepsRoute from '../../listings/heading_steps_route';
 
-let defaultAfterTime;
-if (!isEmpty(MailPoet.settings.deactivate_subscriber_after_inactive_days)) {
-  defaultAfterTime = (
-    Math.floor(
-      Number(
-        MailPoet.settings.deactivate_subscriber_after_inactive_days
-      ) / 30
-    )
-  ) - 1;
-  defaultAfterTime = defaultAfterTime.toString()
-}
-
 export function NewsletterTypeReEngagement(): JSX.Element {
+  let defaultAfterTime = '';
+  if (!isEmpty(MailPoet.settings.deactivate_subscriber_after_inactive_days)) {
+    defaultAfterTime = (
+      (
+        Math.floor(
+          Number(
+            MailPoet.settings.deactivate_subscriber_after_inactive_days
+          ) / 30
+        )
+      ) - 1
+    ).toString();
+  }
+
   const [options, setOptions] = useState({
     afterTimeNumber: defaultAfterTime,
     afterTimeType: 'months',
   });
   const [errors, setErrors] = useState([]);
+  const [loading, setLoading] = useState(false);
   const history = useHistory();
 
   function showTemplateSelection(newsletterId: string) {
@@ -42,6 +44,7 @@ export function NewsletterTypeReEngagement(): JSX.Element {
 
   function handleNext() {
     setErrors([]);
+    setLoading(true);
     MailPoet.Ajax.post({
       api_version: MailPoet.apiVersion,
       endpoint: 'newsletters',
@@ -54,6 +57,7 @@ export function NewsletterTypeReEngagement(): JSX.Element {
     }).done((response) => {
       showTemplateSelection(response.data.id);
     }).fail((response) => {
+      setLoading(false);
       if (response.errors) {
         setErrors(response.errors);
       }
@@ -83,6 +87,8 @@ export function NewsletterTypeReEngagement(): JSX.Element {
           isFullWidth
           onClick={handleNext}
           type="button"
+          isDisabled={isEmpty(options.afterTimeNumber) || loading}
+          withSpinner={loading}
         >
           {MailPoet.I18n.t('next')}
         </Button>

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

@@ -10,7 +10,7 @@ import { Grid } from 'common/grid';
 import { onChange } from 'common/functions';
 
 interface Props {
-  afterTimeNumber: string | undefined;
+  afterTimeNumber: string;
   afterTimeType: string;
   inactiveSubscribersPeriod: number | undefined;
   updateAfterTimeNumber: (arg: string) => void;