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

2022-06-24 23:15:46 +05:30 · 2022-06-24 23:15:46 +05:30 · c0249a1b5b
commit c0249a1b5b
parent 263b8240d3
12 changed files with 106 additions and 97 deletions
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/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",
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/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>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/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>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/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 }) {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/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,
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/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')
+        );
+      }
    },
  },
 };
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/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>
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/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, {
-      isUpdatingAutoAssignment: true,
-    });
+    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: 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, {
-        isUpdatingAutoAssignment: false,
-      });
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: false });
    } catch (error) {
-      commit(types.default.SET_INBOXES_UI_FLAG, {
-        isUpdatingAutoAssignment: false,
-      });
-      throw new Error(error);
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: false });
+      throwErrorMessage(error);
    }
  },
-  updateInboxIMAP: async (
-    { commit },
-    { id, formData = true, ...inboxParams }
-  ) => {
-    commit(types.default.SET_INBOXES_UI_FLAG, {
-      isUpdatingIMAP: true,
-    });
+  updateInboxIMAP: async ({ commit }, { id, ...inboxParams }) => {
+    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: true });
    try {
-      const response = await InboxesAPI.update(
-        id,
-        formData ? buildInboxData(inboxParams) : inboxParams
-      );
+      const response = await InboxesAPI.update(id, inboxParams);
      commit(types.default.EDIT_INBOXES, response.data);
-      commit(types.default.SET_INBOXES_UI_FLAG, {
-        isUpdatingIMAP: false,
-      });
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: false });
    } catch (error) {
-      commit(types.default.SET_INBOXES_UI_FLAG, {
-        isUpdatingIMAP: false,
-      });
-      if (error.response?.data?.message) {
-        throw new Error(error.response?.data?.message);
-      } else {
-        throw new Error(error);
-      }
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: false });
+      throwErrorMessage(error);
    }
  },
-  updateInboxSMTP: async (
-    { commit },
-    { id, formData = true, ...inboxParams }
-  ) => {
-    commit(types.default.SET_INBOXES_UI_FLAG, {
-      isUpdatingSMTP: true,
-    });
+  updateInboxSMTP: async ({ commit }, { id, ...inboxParams }) => {
+    commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: true });
    try {
-      const response = await InboxesAPI.update(
-        id,
-        formData ? buildInboxData(inboxParams) : inboxParams
-      );
+      const response = await InboxesAPI.update(id, inboxParams);
      commit(types.default.EDIT_INBOXES, response.data);
-      commit(types.default.SET_INBOXES_UI_FLAG, {
-        isUpdatingSMTP: false,
-      });
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: false });
    } catch (error) {
-      commit(types.default.SET_INBOXES_UI_FLAG, {
-        isUpdatingSMTP: false,
-      });
-      throw new Error(error);
+      commit(types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: false });
+      throwErrorMessage(error);
    }
  },
  delete: async ({ commit }, inboxId) => {
--- a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
+++ b/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,
-          { isUpdatingAutoAssignment: false },
-        ],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: 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,
-          { isUpdatingAutoAssignment: false },
-        ],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdating: false }],
      ]);
    });
  });
--- a/app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js
+++ b/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,
    });
  });
--- a/app/javascript/dashboard/store/utils/api.js
+++ b/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;
+};
--- a/app/javascript/dashboard/store/utils/specs/api.spec.js
+++ b/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'
+    );
+  });
+});