chore: Fix loading state in the inbox settings page (#4926)

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

@@ -61,7 +61,7 @@
         </div>
         <woot-submit-button
           :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
-          :loading="uiFlags.isUpdatingInbox"
+          :loading="uiFlags.isUpdatingIMAP"
           :disabled="($v.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
         />
       </form>

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

@@ -64,10 +64,9 @@
           </table>
         </div>
       </div>
-
       <woot-submit-button
         :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :loading="uiFlags.isUpdatingInbox"
+        :loading="uiFlags.isUpdating"
       />
     </form>
   </div>

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

@@ -294,7 +294,7 @@
           type="submit"
           :disabled="$v.webhookUrl.$invalid"
           :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdatingInbox"
+          :loading="uiFlags.isUpdating"
           @click="updateInbox"
         />
         <woot-submit-button
@@ -302,7 +302,7 @@
           type="submit"
           :disabled="$v.$invalid"
           :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdatingInbox"
+          :loading="uiFlags.isUpdating"
           @click="updateInbox"
         />
       </settings-section>
@@ -542,7 +542,9 @@ export default {
         await this.$store.dispatch('inboxes/updateInbox', payload);
         this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        this.showAlert(
+          error.message || this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE')
+        );
       }
     },
     handleImageUpload({ file, url }) {

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

@@ -79,7 +79,7 @@
         </div>
         <woot-submit-button
           :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
-          :loading="uiFlags.isUpdatingInbox"
+          :loading="uiFlags.isUpdatingSMTP"
           :disabled="($v.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
         />
       </form>
@@ -215,7 +215,6 @@ export default {
       try {
         const payload = {
           id: this.inbox.id,
-          formData: false,
           channel: {
             smtp_enabled: this.isSMTPEnabled,
             smtp_address: this.address,

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue

@@ -131,12 +131,14 @@ import { mapGetters } from 'vuex';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';
 import GreetingsEditor from 'shared/components/GreetingsEditor';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     PageHeader,
     GreetingsEditor,
   },
+  mixins: [alertMixin],
   data() {
     return {
       inboxName: '',
@@ -164,28 +166,35 @@ export default {
   },
   methods: {
     async createChannel() {
-      const website = await this.$store.dispatch(
-        'inboxes/createWebsiteChannel',
-        {
-          name: this.inboxName,
-          greeting_enabled: this.greetingEnabled,
-          greeting_message: this.greetingMessage,
-          channel: {
-            type: 'web_widget',
-            website_url: this.channelWebsiteUrl,
-            widget_color: this.channelWidgetColor,
-            welcome_title: this.channelWelcomeTitle,
-            welcome_tagline: this.channelWelcomeTagline,
+      try {
+        const website = await this.$store.dispatch(
+          'inboxes/createWebsiteChannel',
+          {
+            name: this.inboxName,
+            greeting_enabled: this.greetingEnabled,
+            greeting_message: this.greetingMessage,
+            channel: {
+              type: 'web_widget',
+              website_url: this.channelWebsiteUrl,
+              widget_color: this.channelWidgetColor,
+              welcome_title: this.channelWelcomeTitle,
+              welcome_tagline: this.channelWelcomeTagline,
+            },
+          }
+        );
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: website.id,
           },
-        }
-      );
-      router.replace({
-        name: 'settings_inboxes_add_agents',
-        params: {
-          page: 'new',
-          inbox_id: website.id,
-        },
-      });
+        });
+      } catch (error) {
+        this.showAlert(
+          error.message ||
+            this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.API.ERROR_MESSAGE')
+        );
+      }
     },
   },
 };

app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue

@@ -50,7 +50,7 @@
         </div>
         <woot-submit-button
           :button-text="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
-          :loading="uiFlags.isUpdatingInbox"
+          :loading="uiFlags.isUpdating"
           :disabled="hasError"
         />
       </form>