fix: SMTP shouldn't be configurable without IMAP enabled (#4428)

* fix: Configure SMTP only if IMAP is enabled

app/javascript/dashboard/components/SettingsSection.vue

@@ -7,6 +7,10 @@
       <p class="sub-head">
         {{ subTitle }}
       </p>
+      <p v-if="note">
+        <span class="note">{{ $t('INBOX_MGMT.NOTE') }}</span>
+        {{ note }}
+      </p>
     </div>
     <div class="medium-6 small-12">
       <slot></slot>
@@ -25,6 +29,10 @@ export default {
       type: String,
       required: true,
     },
+    note: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>
@@ -46,5 +54,9 @@ export default {
   .title--section {
     padding-right: var(--space-large);
   }
+
+  .note {
+    font-weight: var(--font-weight-bold);
+  }
 }
 </style>

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -470,6 +470,7 @@
     "IMAP": {
       "TITLE": "IMAP",
       "SUBTITLE": "Set your IMAP details",
+      "NOTE_TEXT": "To enable SMTP, please configure IMAP.",
       "UPDATE": "Update IMAP settings",
       "TOGGLE_AVAILABILITY": "Enable IMAP configuration for this inbox",
       "TOGGLE_HELP": "Enabling IMAP will help the user to recieve email",
@@ -529,6 +530,7 @@
       "SSL_TLS": "SSL/TLS",
       "START_TLS": "STARTTLS",
       "OPEN_SSL_VERIFY_MODE": "Open SSL Verify Mode"
-    }
+    },
+    "NOTE": "Note: "
   }
 }

app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue

@@ -3,6 +3,7 @@
     <settings-section
       :title="$t('INBOX_MGMT.IMAP.TITLE')"
       :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
+      :note="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
     >
       <form @submit.prevent="updateInbox">
         <label for="toggle-imap-enable">
@@ -132,7 +133,7 @@ export default {
     async updateInbox() {
       try {
         this.loading = true;
-        const payload = {
+        let payload = {
           id: this.inbox.id,
           formData: false,
           channel: {
@@ -147,6 +148,11 @@ export default {
               : undefined,
           },
         };
+
+        if (!this.isIMAPEnabled) {
+          payload.channel.smtp_enabled = false;
+        }
+
         await this.$store.dispatch('inboxes/updateInboxIMAP', payload);
         this.showAlert(this.$t('INBOX_MGMT.IMAP.EDIT.SUCCESS_MESSAGE'));
       } catch (error) {

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -422,7 +422,7 @@
           </settings-section>
         </div>
         <imap-settings :inbox="inbox" />
-        <smtp-settings :inbox="inbox" />
+        <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
       </div>
     </div>
     <div v-if="selectedTabKey === 'preChatForm'">