Web: PortalSettings: Moved errors to the store.

packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/ButtonContainer.js

@@ -26,7 +26,7 @@ const ButtonContainer = (props) => {
   const {
     t,
     isEmailValid,
-    onSetValidationError,
+    isPortValid,
     settings,
     setSMTPSettingsLoading,
     updateSMTPSettings,
@@ -34,6 +34,7 @@ const ButtonContainer = (props) => {
     isLoading,
     isDefaultSettings,
     isSMTPInitialSettings,
+    setSMTPErrors,
   } = props;
 
   const [buttonOperation, setButtonOperation] = useState({
@@ -43,10 +44,13 @@ const ButtonContainer = (props) => {
   });
 
   const isValidForm = () => {
+    const authInvalid =
+      settings[AUTHENTICATION] &&
+      (settings[HOST_PASSWORD]?.trim() === "" ||
+        settings[HOST_LOGIN]?.trim() === "");
+
     if (
-      (settings[AUTHENTICATION] &&
-        (settings[HOST_PASSWORD]?.trim() === "" ||
-          settings[HOST_LOGIN]?.trim() === "")) ||
+      authInvalid ||
       settings[HOST]?.trim() === "" ||
       settings[PORT]?.toString()?.trim() === "" ||
       settings[SENDER_EMAIL_ADDRESS]?.trim() === ""
@@ -55,10 +59,21 @@ const ButtonContainer = (props) => {
 
     return true;
   };
-  const onClick = async () => {
-    onSetValidationError(!isEmailValid);
 
-    if (!isEmailValid) return;
+  const setErrors = () => {
+    const array = [
+      { name: SENDER_EMAIL_ADDRESS, hasError: !isEmailValid },
+      { name: PORT, hasError: !isPortValid },
+    ];
+
+    setSMTPErrors(array);
+  };
+  const onClick = async () => {
+    if (!isEmailValid || !isPortValid) {
+      setErrors();
+
+      return;
+    }
 
     timerId = setTimeout(() => {
       setSMTPSettingsLoading(true);
@@ -199,6 +214,7 @@ export default inject(({ setup }) => {
     updateSMTPSettings,
     resetSMTPSettings,
     isSMTPInitialSettings,
+    setSMTPErrors,
   } = setup;
   const { smtpSettings } = integration;
   const { settings, isLoading, isDefaultSettings } = smtpSettings;
@@ -210,5 +226,6 @@ export default inject(({ setup }) => {
     updateSMTPSettings,
     resetSMTPSettings,
     isLoading,
+    setSMTPErrors,
   };
 })(observer(ButtonContainer));

packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/sub-components/CustomSettings.js

@@ -25,7 +25,7 @@ const {
 } = SMTPSettingsFields;
 
 const CustomSettings = (props) => {
-  const { t, settings, setSMTPSettings, isLoading, theme } = props;
+  const { t, settings, setSMTPSettings, isLoading, theme, errors } = props;
   const [emailError, setEmailError] = useState({
     hasError: false,
     isValid: true,
@@ -69,13 +69,6 @@ const CustomSettings = (props) => {
     });
   };
 
-  const onSetValidationError = (hasError) => {
-    setEmailError({
-      ...emailError,
-      hasError,
-    });
-  };
-
   const commonTextProps = {
     fontWeight: 600,
   };
@@ -167,6 +160,7 @@ const CustomSettings = (props) => {
         onChange={onChange}
         value={settings[PORT].toString()}
         scale
+        hasError={errors[PORT]}
       />
       {enableAuthComponent}
 
@@ -191,7 +185,7 @@ const CustomSettings = (props) => {
         className="smtp-settings_input"
         isVertical
         place="top"
-        hasError={emailError.hasError}
+        hasError={errors[SENDER_EMAIL_ADDRESS]}
         errorMessage={t("Common:IncorrectEmail")}
       >
         <EmailInput
@@ -200,7 +194,7 @@ const CustomSettings = (props) => {
           value={settings[SENDER_EMAIL_ADDRESS]}
           onChange={onChange}
           onValidateInput={onValidateEmailInput}
-          hasError={emailError.hasError}
+          hasError={errors[SENDER_EMAIL_ADDRESS] ?? false}
           placeholder={t("EnterEmail")}
           scale
         />
@@ -215,8 +209,8 @@ const CustomSettings = (props) => {
       />
       <ButtonContainer
         t={t}
-        onSetValidationError={onSetValidationError}
         isEmailValid={emailError.isValid}
+        isPortValid={settings[PORT] !== 0 && settings[PORT] !== "0"}
       />
     </StyledComponent>
   );
@@ -225,9 +219,9 @@ const CustomSettings = (props) => {
 export default inject(({ auth, setup }) => {
   const { settingsStore } = auth;
   const { theme } = settingsStore;
-  const { integration, setSMTPSettings } = setup;
+  const { integration, setSMTPSettings, setSMTPErrors } = setup;
   const { smtpSettings } = integration;
-  const { settings, isLoading } = smtpSettings;
+  const { settings, isLoading, errors } = smtpSettings;
 
-  return { theme, settings, setSMTPSettings, isLoading };
+  return { theme, settings, setSMTPSettings, isLoading, setSMTPErrors, errors };
 })(observer(CustomSettings));

packages/client/src/store/SettingsSetupStore.js

@@ -66,6 +66,7 @@ class SettingsSetupStore {
       },
       isLoading: false,
       isDefaultSettings: false,
+      errors: {},
     },
   };
 
@@ -161,6 +162,7 @@ class SettingsSetupStore {
       storeSettings[key] = settings[key];
     }
 
+    this.integration.smtpSettings.errors = {};
     this.integration.smtpSettings.initialSettings = { ...storeSettings };
   };
   setInitSMTPSettings = async () => {
@@ -195,6 +197,18 @@ class SettingsSetupStore {
     this.integration.smtpSettings.isLoading = loading;
   };
 
+  setSMTPErrors = (errorsArray) => {
+    let errors = {};
+    errorsArray.forEach((elem) => {
+      errors = {
+        ...errors,
+        [elem.name]: elem.hasError,
+      };
+    });
+
+    this.integration.smtpSettings.errors = { ...errors };
+  };
+
   setAddUsers = (func) => {
     this.headerAction.addUsers = func;
   };