Add form error flag to state

[MAILPOET-2677]

assets/js/src/settings/components/save_button.tsx

@@ -6,7 +6,8 @@ import { GlobalContext } from 'context';
 export default () => {
   const [clicked, setClicked] = React.useState(false);
   const isSaving = useSelector('isSaving')();
-  const error = useSelector('getError')();
+  const hasError = useSelector('hasErrorFlag')();
+  const error = useSelector('getSavingError')();
   const save = useAction('saveSettings');
   const { notices } = React.useContext<any>(GlobalContext);
   const showError = notices.error;
@@ -23,7 +24,7 @@ export default () => {
   };
   return (
     <div>
-      <button type="button" className="button button-primary" disabled={isSaving} onClick={onClick}>{MailPoet.I18n.t('saveSettings')}</button>
+      <button type="button" className="button button-primary" disabled={isSaving || hasError} onClick={onClick}>{MailPoet.I18n.t('saveSettings')}</button>
     </div>
   );
 };

assets/js/src/settings/store/actions.ts

@@ -6,6 +6,10 @@ export function setSetting(path: string[], value: any): Action {
   return { type: 'SET_SETTING', path, value };
 }
 
+export function setErrorFlag(value: boolean): Action {
+  return { type: 'SET_ERROR_FLAG', value };
+}
+
 export function* saveSettings() {
   yield { type: 'SAVE_STARTED' };
   const data = select(STORE_NAME).getSettings();

assets/js/src/settings/store/create_reducer.ts

@@ -6,6 +6,8 @@ export default function createReducer(defaultValue: State) {
     switch (action.type) {
       case 'SET_SETTING':
         return _.setWith(_.clone(state), ['data', ...action.path], action.value, _.clone);
+      case 'SET_ERROR_FLAG':
+        return { ...state, flags: { ...state.flags, error: action.value } };
       case 'SAVE_STARTED':
         return { ...state, save: { inProgress: true, error: null } };
       case 'SAVE_DONE':

assets/js/src/settings/store/make_default_state.ts

@@ -7,6 +7,7 @@ export default function makeDefaultState(window: any): State {
       error: null,
     },
     flags: {
+      error: false,
       woocommerce: !!window.mailpoet_woocommerce_active,
       newUser: !!window.mailpoet_is_new_user,
     },

assets/js/src/settings/store/selectors.ts

@@ -13,11 +13,15 @@ export function isSaving(state: State): boolean {
   return state.save.inProgress;
 }
 
-export function hasError(state: State): boolean {
+export function hasErrorFlag(state: State): boolean {
+  return state.flags.error;
+}
+
+export function hasSavingError(state: State): boolean {
   return state.save.error !== null;
 }
 
-export function getError(state: State): any {
+export function getSavingError(state: State): any {
   return state.save.error;
 }
 

assets/js/src/settings/store/types.ts

@@ -29,12 +29,12 @@ export type Settings = {
     segments: string[]
   }
   stats_notifications: {
-    enabled: boolean
-    automated: boolean
+    enabled: '0' | '1'
+    automated: '0' | '1'
     address: string
   }
   subscriber_email_notification: {
-    enabled: boolean
+    enabled: '0' | '1'
     address: string
   }
   // ...
@@ -61,6 +61,7 @@ export type State = {
   flags: {
     woocommerce: boolean
     newUser: boolean
+    error: boolean
   }
   save: {
     inProgress: boolean
@@ -70,6 +71,7 @@ export type State = {
 
 export type Action =
   | { type: 'SET_SETTING'; value: any; path: string[] }
+  | { type: 'SET_ERROR_FLAG'; value: boolean }
   | { type: 'SAVE_STARTED' }
   | { type: 'SAVE_DONE' }
   | { type: 'SAVE_FAILED'; error: any }