Files
piratepoet/assets/js/src/settings/components/save_button.tsx
Brezo Cordero 21b9ae9f2e Show re-engagement emails notice after saving
[MAILPOET-3743]
2021-11-02 09:12:02 +01:00

71 lines
2.3 KiB
TypeScript

import React from 'react';
import MailPoet from 'mailpoet';
import Button from 'common/button/button';
import { useAction, useSelector } from 'settings/store/hooks';
import { GlobalContext } from 'context';
import ReactStringReplace from 'react-string-replace';
const showReEngagementNotice = (action, showError, showSuccess) => {
if (action === 'deactivate') {
showError(<p>{MailPoet.I18n.t('re-engagementDisabledNotice')}</p>, { scroll: true });
return;
}
if (action === 'reactivate') {
const reEngagementReactivatedNotice = ReactStringReplace(
MailPoet.I18n.t('re-engagementReactivatedNotice'),
/\[link\](.*?)\[\/link\]/g,
(match) => (
<a
key="reEngagementEmailsTabLink"
href="?page=mailpoet-newsletters#/re_engagement"
rel="noopener noreferrer"
>
{match}
</a>
)
);
showSuccess(<p>{reEngagementReactivatedNotice}</p>, { scroll: true });
}
};
export default () => {
const [clicked, setClicked] = React.useState(false);
const isSaving = useSelector('isSaving')();
const hasError = useSelector('hasErrorFlag')();
const error = useSelector('getSavingError')();
const hasReEngagementNotice = useSelector('hasReEngagementNotice')();
const reEngagementAction = useSelector('getReEngagementAction')();
const save = useAction('saveSettings');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const { notices } = React.useContext<any>(GlobalContext);
const showError = notices.error;
const showSuccess = notices.success;
React.useEffect(() => {
if (clicked && !isSaving) {
if (error) showError(error.map((err) => <p>{err}</p>), { scroll: true });
else {
showSuccess(<p>{MailPoet.I18n.t('settingsSaved')}</p>, { scroll: true });
if (hasReEngagementNotice) {
showReEngagementNotice(reEngagementAction, showError, showSuccess);
}
}
}
}, [clicked, error, isSaving, showError, showSuccess, hasReEngagementNotice, reEngagementAction]);
const onClick = () => {
setClicked(true);
save();
};
return (
<div className="mailpoet-settings-save">
<Button
type="button"
automationId="settings-submit-button"
isDisabled={isSaving || hasError}
onClick={onClick}
>
{MailPoet.I18n.t('saveSettings')}
</Button>
</div>
);
};