diff --git a/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx b/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx index b4e6320504..9dbcc2be01 100644 --- a/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx +++ b/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')} diff --git a/assets/js/src/newsletters/types/re_engagement/scheduling.tsx b/assets/js/src/newsletters/types/re_engagement/scheduling.tsx index 983bae67b5..340fd1ca12 100644 --- a/assets/js/src/newsletters/types/re_engagement/scheduling.tsx +++ b/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;