diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index c705b2b41..b1da92e2d 100644
--- 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",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
index 072fc20f3..98ae8e534 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -61,7 +61,7 @@
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index 0e6891910..9862c053c 100644
--- 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 @@
-
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index f044f0d80..5f539c3e3 100644
--- 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"
/>
@@ -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 }) {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index 553be1821..bb3d8b75f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -79,7 +79,7 @@
@@ -215,7 +215,6 @@ export default {
try {
const payload = {
id: this.inbox.id,
- formData: false,
channel: {
smtp_enabled: this.isSMTPEnabled,
smtp_address: this.address,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
index 9e9b95aed..3703cd21e 100644
--- 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')
+ );
+ }
},
},
};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index 4107c5151..ecad7814b 100644
--- 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 @@
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index 668107ef7..7821e6c36 100644
--- 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) => {
diff --git a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
index 80cf92f25..381c785e4 100644
--- 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 }],
]);
});
});
diff --git a/app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js b/app/javascript/dashboard/store/modules/specs/inboxes/getters.spec.js
index e8af7dd58..a22f5ebe9 100644
--- 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,
});
});
diff --git a/app/javascript/dashboard/store/utils/api.js b/app/javascript/dashboard/store/utils/api.js
index 54974e233..55e43fe2f 100644
--- 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;
+};
diff --git a/app/javascript/dashboard/store/utils/specs/api.spec.js b/app/javascript/dashboard/store/utils/specs/api.spec.js
index 50c82b7d9..b076b7be3 100644
--- 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'
+ );
+ });
+});