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

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

@@ -98,7 +98,10 @@
           "LABEL": "Widget Color",
           "PLACEHOLDER": "Update the widget color used in widget"
         },
-        "SUBMIT_BUTTON": "Create inbox"
+        "SUBMIT_BUTTON": "Create inbox",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to create a website channel, please try again"
+        }
       },
       "TWILIO": {
         "TITLE": "Twilio SMS/WhatsApp Channel",
@@ -339,7 +342,7 @@
       "API": {
         "SUCCESS_MESSAGE": "Inbox settings updated successfully",
         "AUTO_ASSIGNMENT_SUCCESS_MESSAGE": "Auto assignment updated successfully",
-        "ERROR_MESSAGE": "Could not update widget color. Please try again later."
+        "ERROR_MESSAGE": "We couldn't update inbox settings. Please try again later."
       },
       "EMAIL_COLLECT_BOX": {
         "ENABLED": "Enabled",

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,6 +166,7 @@ export default {
   },
   methods: {
     async createChannel() {
+      try {
         const website = await this.$store.dispatch(
           'inboxes/createWebsiteChannel',
           {
@@ -186,6 +189,12 @@ export default {
             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>

app/javascript/dashboard/store/modules/inboxes.js

@@ -5,6 +5,7 @@ import InboxesAPI from '../../api/inboxes';
 import WebChannel from '../../api/channel/webChannel';
 import FBChannel from '../../api/channel/fbChannel';
 import TwilioChannel from '../../api/channel/twilioChannel';
+import { parseAPIErrorResponse } from '../utils/api';
 
 const buildInboxData = inboxParams => {
   const formData = new FormData();
@@ -36,13 +37,17 @@ export const state = {
     isFetchingItem: false,
     isCreating: false,
     isUpdating: false,
-    isUpdatingAutoAssignment: false,
     isDeleting: false,
     isUpdatingIMAP: false,
     isUpdatingSMTP: false,
   },
 };
 
+const throwErrorMessage = error => {
+  const errorMessage = parseAPIErrorResponse(error);
+  throw new Error(errorMessage);
+};
+
 export const getters = {
   getInboxes($state) {
     return $state.records;
@@ -149,7 +154,7 @@ export const actions = {
       return response.data;
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
-      throw new Error(error);
+      return throwErrorMessage(error);
     }
   },
   createTwilioChannel: async ({ commit }, params) => {
@@ -177,73 +182,39 @@ export const actions = {
     }
   },
   updateInbox: async ({ commit }, { id, formData = true, ...inboxParams }) => {
-    commit(types.default.SET_INBOXES_UI_FLAG, {
+    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: true });
-      isUpdatingAutoAssignment: true,
-    });
     try {
       const response = await InboxesAPI.update(
         id,
         formData ? buildInboxData(inboxParams) : inboxParams
       );
       commit(types.default.EDIT_INBOXES, response.data);
-      commit(types.default.SET_INBOXES_UI_FLAG, {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: false });
-        isUpdatingAutoAssignment: false,
-      });
     } catch (error) {
-      commit(types.default.SET_INBOXES_UI_FLAG, {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: false });
-        isUpdatingAutoAssignment: false,
+      throwErrorMessage(error);
-      });
-      throw new Error(error);
     }
   },
-  updateInboxIMAP: async (
+  updateInboxIMAP: async ({ commit }, { id, ...inboxParams }) => {
-    { commit },
+    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: true });
-    { id, formData = true, ...inboxParams }
-  ) => {
-    commit(types.default.SET_INBOXES_UI_FLAG, {
-      isUpdatingIMAP: true,
-    });
     try {
-      const response = await InboxesAPI.update(
+      const response = await InboxesAPI.update(id, inboxParams);
-        id,
-        formData ? buildInboxData(inboxParams) : inboxParams
-      );
       commit(types.default.EDIT_INBOXES, response.data);
-      commit(types.default.SET_INBOXES_UI_FLAG, {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: false });
-        isUpdatingIMAP: false,
-      });
     } catch (error) {
-      commit(types.default.SET_INBOXES_UI_FLAG, {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: false });
-        isUpdatingIMAP: false,
+      throwErrorMessage(error);
-      });
-      if (error.response?.data?.message) {
-        throw new Error(error.response?.data?.message);
-      } else {
-        throw new Error(error);
-      }
     }
   },
-  updateInboxSMTP: async (
+  updateInboxSMTP: async ({ commit }, { id, ...inboxParams }) => {
-    { commit },
+    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: true });
-    { id, formData = true, ...inboxParams }
-  ) => {
-    commit(types.default.SET_INBOXES_UI_FLAG, {
-      isUpdatingSMTP: true,
-    });
     try {
-      const response = await InboxesAPI.update(
+      const response = await InboxesAPI.update(id, inboxParams);
-        id,
-        formData ? buildInboxData(inboxParams) : inboxParams
-      );
       commit(types.default.EDIT_INBOXES, response.data);
-      commit(types.default.SET_INBOXES_UI_FLAG, {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: false });
-        isUpdatingSMTP: false,
-      });
     } catch (error) {
-      commit(types.default.SET_INBOXES_UI_FLAG, {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: false });
-        isUpdatingSMTP: false,
+      throwErrorMessage(error);
-      });
-      throw new Error(error);
     }
   },
   delete: async ({ commit }, inboxId) => {

app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js

@@ -81,12 +81,9 @@ describe('#actions', () => {
         { id: updatedInbox.id, inbox: { enable_auto_assignment: false } }
       );
       expect(commit.mock.calls).toEqual([
-        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: true }],
         [types.default.EDIT_INBOXES, updatedInbox],
-        [
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: false }],
-          types.default.SET_INBOXES_UI_FLAG,
-          { isUpdatingAutoAssignment: false },
-        ],
       ]);
     });
     it('sends correct actions if API is error', async () => {
@@ -98,11 +95,8 @@ describe('#actions', () => {
         )
       ).rejects.toThrow(Error);
       expect(commit.mock.calls).toEqual([
-        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingAutoAssignment: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: true }],
-        [
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: false }],
-          types.default.SET_INBOXES_UI_FLAG,
-          { isUpdatingAutoAssignment: false },
-        ],
       ]);
     });
   });

app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js

@@ -53,7 +53,6 @@ describe('#getters', () => {
         isFetchingItem: false,
         isCreating: false,
         isUpdating: false,
-        isUpdatingAutoAssignment: false,
         isDeleting: false,
       },
     };
@@ -62,7 +61,6 @@ describe('#getters', () => {
       isFetchingItem: false,
       isCreating: false,
       isUpdating: false,
-      isUpdatingAutoAssignment: false,
       isDeleting: false,
     });
   });

app/javascript/dashboard/store/utils/api.js

@@ -45,3 +45,13 @@ export const clearCookiesOnLogout = () => {
   const logoutRedirectLink = globalConfig.LOGOUT_REDIRECT_LINK || '/';
   window.location = logoutRedirectLink;
 };
+
+export const parseAPIErrorResponse = error => {
+  if (error?.response?.data?.message) {
+    return error?.response?.data?.message;
+  }
+  if (error?.response?.data?.error) {
+    return error?.response?.data?.error;
+  }
+  return error;
+};

app/javascript/dashboard/store/utils/specs/api.spec.js

@@ -1,4 +1,8 @@
-import { getLoadingStatus, setLoadingStatus } from '../api';
+import {
+  getLoadingStatus,
+  parseAPIErrorResponse,
+  setLoadingStatus,
+} from '../api';
 
 describe('#getLoadingStatus', () => {
   it('returns correct status', () => {
@@ -13,3 +17,23 @@ describe('#setLoadingStatus', () => {
     expect(state.fetchAPIloadingStatus).toBe(false);
   });
 });
+
+describe('#parseAPIErrorResponse', () => {
+  it('returns correct values', () => {
+    expect(
+      parseAPIErrorResponse({
+        response: { data: { message: 'Error Message [message]' } },
+      })
+    ).toBe('Error Message [message]');
+
+    expect(
+      parseAPIErrorResponse({
+        response: { data: { error: 'Error Message [error]' } },
+      })
+    ).toBe('Error Message [error]');
+
+    expect(parseAPIErrorResponse('Error: 422 Failed')).toBe(
+      'Error: 422 Failed'
+    );
+  });
+});