diff --git a/app/javascript/dashboard/api/macros.js b/app/javascript/dashboard/api/macros.js new file mode 100644 index 000000000..7b123c9e8 --- /dev/null +++ b/app/javascript/dashboard/api/macros.js @@ -0,0 +1,16 @@ +/* global axios */ +import ApiClient from './ApiClient'; + +class MacrosAPI extends ApiClient { + constructor() { + super('macros', { accountScoped: true }); + } + + executeMacro({ macroId, conversationIds }) { + return axios.post(`${this.url}/${macroId}/execute`, { + conversation_ids: conversationIds, + }); + } +} + +export default new MacrosAPI(); diff --git a/app/javascript/dashboard/api/specs/macros.spec.js b/app/javascript/dashboard/api/specs/macros.spec.js new file mode 100644 index 000000000..94e936521 --- /dev/null +++ b/app/javascript/dashboard/api/specs/macros.spec.js @@ -0,0 +1,14 @@ +import macros from '../macros'; +import ApiClient from '../ApiClient'; + +describe('#macrosAPI', () => { + it('creates correct instance', () => { + expect(macros).toBeInstanceOf(ApiClient); + expect(macros).toHaveProperty('get'); + expect(macros).toHaveProperty('create'); + expect(macros).toHaveProperty('update'); + expect(macros).toHaveProperty('delete'); + expect(macros).toHaveProperty('show'); + expect(macros.url).toBe('/api/v1/macros'); + }); +}); diff --git a/app/javascript/dashboard/store/modules/macros.js b/app/javascript/dashboard/store/modules/macros.js new file mode 100644 index 000000000..952f53f17 --- /dev/null +++ b/app/javascript/dashboard/store/modules/macros.js @@ -0,0 +1,117 @@ +import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers'; +import types from '../mutation-types'; +import MacrosAPI from '../../api/macros'; +import { throwErrorMessage } from '../utils/api'; + +export const state = { + records: [], + uiFlags: { + isFetchingItem: false, + isFetching: false, + isCreating: false, + isDeleting: false, + isUpdating: false, + isExecuting: false, + }, +}; + +export const getters = { + getMacros($state) { + return $state.records; + }, + getMacro: $state => id => { + return $state.records.find(record => record.id === Number(id)); + }, + getUIFlags($state) { + return $state.uiFlags; + }, +}; + +export const actions = { + get: async function getMacros({ commit }) { + commit(types.SET_MACROS_UI_FLAG, { isFetching: true }); + try { + const response = await MacrosAPI.get(); + commit(types.SET_MACROS, response.data.payload); + } catch (error) { + // Ignore error + } finally { + commit(types.SET_MACROS_UI_FLAG, { isFetching: false }); + } + }, + getSingleMacro: async function getMacroById({ commit }, macroId) { + commit(types.SET_MACROS_UI_FLAG, { isFetchingItem: true }); + try { + const response = await MacrosAPI.show(macroId); + commit(types.ADD_MACRO, response.data.payload); + } catch (error) { + // Ignore error + } finally { + commit(types.SET_MACROS_UI_FLAG, { isFetchingItem: false }); + } + }, + create: async function createMacro({ commit }, macrosObj) { + commit(types.SET_MACROS_UI_FLAG, { isCreating: true }); + try { + const response = await MacrosAPI.create(macrosObj); + commit(types.ADD_MACRO, response.data.payload); + } catch (error) { + throwErrorMessage(error); + } finally { + commit(types.SET_MACROS_UI_FLAG, { isCreating: false }); + } + }, + execute: async function executeMacro({ commit }, macrosObj) { + commit(types.SET_MACROS_UI_FLAG, { isExecuting: true }); + try { + await MacrosAPI.executeMacro(macrosObj); + } catch (error) { + throwErrorMessage(error); + } finally { + commit(types.SET_MACROS_UI_FLAG, { isExecuting: false }); + } + }, + update: async ({ commit }, { id, ...updateObj }) => { + commit(types.SET_MACROS_UI_FLAG, { isUpdating: true }); + try { + const response = await MacrosAPI.update(id, updateObj); + commit(types.EDIT_MACRO, response.data.payload); + } catch (error) { + throwErrorMessage(error); + } finally { + commit(types.SET_MACROS_UI_FLAG, { isUpdating: false }); + } + }, + delete: async ({ commit }, id) => { + commit(types.SET_MACROS_UI_FLAG, { isDeleting: true }); + try { + await MacrosAPI.delete(id); + commit(types.DELETE_MACRO, id); + } catch (error) { + throwErrorMessage(error); + } finally { + commit(types.SET_MACROS_UI_FLAG, { isDeleting: false }); + } + }, +}; + +export const mutations = { + [types.SET_MACROS_UI_FLAG]($state, data) { + $state.uiFlags = { + ...$state.uiFlags, + ...data, + }; + }, + [types.ADD_MACRO]: MutationHelpers.setSingleRecord, + [types.SET_MACROS]: MutationHelpers.set, + [types.EDIT_MACRO]: MutationHelpers.update, + [types.DELETE_MACRO]: MutationHelpers.destroy, +}; + +export default { + namespaced: true, + actions, + state, + getters, + mutations, +}; diff --git a/app/javascript/dashboard/store/modules/specs/macros/actions.spec.js b/app/javascript/dashboard/store/modules/specs/macros/actions.spec.js new file mode 100644 index 000000000..95bba8e1d --- /dev/null +++ b/app/javascript/dashboard/store/modules/specs/macros/actions.spec.js @@ -0,0 +1,151 @@ +import axios from 'axios'; +import { actions } from '../../macros'; +import * as types from '../../../mutation-types'; +import macrosList from './fixtures'; + +const commit = jest.fn(); +global.axios = axios; +jest.mock('axios'); + +describe('#actions', () => { + describe('#get', () => { + it('sends correct actions if API is success', async () => { + axios.get.mockResolvedValue({ data: { payload: macrosList } }); + await actions.get({ commit }); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isFetching: true }], + [types.default.SET_MACROS, macrosList], + [types.default.SET_MACROS_UI_FLAG, { isFetching: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.get.mockRejectedValue({ message: 'Incorrect header' }); + await actions.get({ commit }); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isFetching: true }], + [types.default.SET_MACROS_UI_FLAG, { isFetching: false }], + ]); + }); + }); + + describe('#getMacroById', () => { + it('sends correct actions if API is success', async () => { + axios.get.mockResolvedValue({ data: { payload: macrosList[0] } }); + await actions.getSingleMacro({ commit }, 22); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isFetchingItem: true }], + [types.default.ADD_MACRO, macrosList[0]], + [types.default.SET_MACROS_UI_FLAG, { isFetchingItem: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.get.mockRejectedValue({ message: 'Incorrect header' }); + await actions.getSingleMacro({ commit }, 22); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isFetchingItem: true }], + [types.default.SET_MACROS_UI_FLAG, { isFetchingItem: false }], + ]); + }); + }); + + describe('#create', () => { + it('sends correct actions if API is success', async () => { + axios.post.mockResolvedValue({ data: { payload: macrosList[0] } }); + await actions.create({ commit }, macrosList[0]); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isCreating: true }], + [types.default.ADD_MACRO, macrosList[0]], + [types.default.SET_MACROS_UI_FLAG, { isCreating: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.post.mockRejectedValue({ message: 'Incorrect header' }); + await expect(actions.create({ commit })).rejects.toThrow(Error); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isCreating: true }], + [types.default.SET_MACROS_UI_FLAG, { isCreating: false }], + ]); + }); + }); + + describe('#execute', () => { + const macroId = 12; + const conversationIds = [1]; + it('sends correct actions if API is success', async () => { + axios.post.mockResolvedValue({ data: null }); + await actions.execute( + { commit }, + { + macroId, + conversationIds, + } + ); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isExecuting: true }], + [types.default.SET_MACROS_UI_FLAG, { isExecuting: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.post.mockRejectedValue({ message: 'Incorrect header' }); + await expect( + actions.execute( + { commit }, + { + macroId, + conversationIds, + } + ) + ).rejects.toThrow(Error); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isExecuting: true }], + [types.default.SET_MACROS_UI_FLAG, { isExecuting: false }], + ]); + }); + }); + + describe('#update', () => { + it('sends correct actions if API is success', async () => { + axios.patch.mockResolvedValue({ + data: { payload: macrosList[0] }, + }); + await actions.update({ commit }, macrosList[0]); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isUpdating: true }], + [types.default.EDIT_MACRO, macrosList[0]], + [types.default.SET_MACROS_UI_FLAG, { isUpdating: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.patch.mockRejectedValue({ message: 'Incorrect header' }); + await expect(actions.update({ commit }, macrosList[0])).rejects.toThrow( + Error + ); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isUpdating: true }], + [types.default.SET_MACROS_UI_FLAG, { isUpdating: false }], + ]); + }); + }); + + describe('#delete', () => { + it('sends correct actions if API is success', async () => { + axios.delete.mockResolvedValue({ data: macrosList[0] }); + await actions.delete({ commit }, macrosList[0].id); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isDeleting: true }], + [types.default.DELETE_MACRO, macrosList[0].id], + [types.default.SET_MACROS_UI_FLAG, { isDeleting: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.delete.mockRejectedValue({ message: 'Incorrect header' }); + await expect( + actions.delete({ commit }, macrosList[0].id) + ).rejects.toThrow(Error); + expect(commit.mock.calls).toEqual([ + [types.default.SET_MACROS_UI_FLAG, { isDeleting: true }], + [types.default.SET_MACROS_UI_FLAG, { isDeleting: false }], + ]); + }); + }); +}); diff --git a/app/javascript/dashboard/store/modules/specs/macros/fixtures.js b/app/javascript/dashboard/store/modules/specs/macros/fixtures.js new file mode 100644 index 000000000..b75bd2836 --- /dev/null +++ b/app/javascript/dashboard/store/modules/specs/macros/fixtures.js @@ -0,0 +1,135 @@ +export default [ + { + id: 22, + name: 'Assign billing label and sales team and message user', + visibility: 'global', + created_by: { + id: 1, + account_id: 1, + availability_status: 'online', + auto_offline: true, + confirmed: true, + email: 'john@acme.inc', + available_name: 'Fayaz Ahmed', + name: 'Fayaz Ahmed', + role: 'administrator', + thumbnail: + 'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png', + }, + updated_by: { + id: 1, + account_id: 1, + availability_status: 'online', + auto_offline: true, + confirmed: true, + email: 'john@acme.inc', + available_name: 'Fayaz Ahmed', + name: 'Fayaz Ahmed', + role: 'administrator', + thumbnail: + 'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png', + }, + account_id: 1, + actions: [ + { + action_name: 'add_label', + action_params: ['sales', 'billing'], + }, + { + action_name: 'assign_team', + action_params: [1], + }, + { + action_name: 'send_message', + action_params: [ + "Thank you for reaching out, we're looking into this on priority and we'll get back to you asap.", + ], + }, + ], + }, + { + id: 23, + name: 'Assign label priority and send email to team', + visibility: 'global', + created_by: { + id: 1, + account_id: 1, + availability_status: 'online', + auto_offline: true, + confirmed: true, + email: 'john@acme.inc', + available_name: 'Fayaz Ahmed', + name: 'Fayaz Ahmed', + role: 'administrator', + thumbnail: + 'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png', + }, + updated_by: { + id: 1, + account_id: 1, + availability_status: 'online', + auto_offline: true, + confirmed: true, + email: 'john@acme.inc', + available_name: 'Fayaz Ahmed', + name: 'Fayaz Ahmed', + role: 'administrator', + thumbnail: + 'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png', + }, + account_id: 1, + actions: [ + { + action_name: 'add_label', + action_params: ['priority'], + }, + { + action_name: 'send_email_to_team', + action_params: [ + { + message: 'Hello team,\n\nThis looks important, please take look.', + team_ids: [1], + }, + ], + }, + ], + }, + { + id: 25, + name: 'Webhook', + visibility: 'global', + created_by: { + id: 1, + account_id: 1, + availability_status: 'online', + auto_offline: true, + confirmed: true, + email: 'john@acme.inc', + available_name: 'Fayaz Ahmed', + name: 'Fayaz Ahmed', + role: 'administrator', + thumbnail: + 'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png', + }, + updated_by: { + id: 1, + account_id: 1, + availability_status: 'online', + auto_offline: true, + confirmed: true, + email: 'john@acme.inc', + available_name: 'Fayaz Ahmed', + name: 'Fayaz Ahmed', + role: 'administrator', + thumbnail: + 'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--16c85844c93f9c139deb782137b49c87c9bc871c/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/memoji.png', + }, + account_id: 1, + actions: [ + { + action_name: 'send_webhook_event', + action_params: ['https://google.com'], + }, + ], + }, +]; diff --git a/app/javascript/dashboard/store/modules/specs/macros/getters.spec.js b/app/javascript/dashboard/store/modules/specs/macros/getters.spec.js new file mode 100644 index 000000000..d855f66ff --- /dev/null +++ b/app/javascript/dashboard/store/modules/specs/macros/getters.spec.js @@ -0,0 +1,32 @@ +import { getters } from '../../macros'; +import macros from './fixtures'; +describe('#getters', () => { + it('getMacros', () => { + const state = { records: macros }; + expect(getters.getMacros(state)).toEqual(macros); + }); + + it('getMacro', () => { + const state = { records: macros }; + expect(getters.getMacro(state)(22)).toEqual(macros[0]); + }); + + it('getUIFlags', () => { + const state = { + uiFlags: { + isFetching: true, + isCreating: false, + isUpdating: false, + isDeleting: false, + isExecuting: false, + }, + }; + expect(getters.getUIFlags(state)).toEqual({ + isFetching: true, + isCreating: false, + isUpdating: false, + isDeleting: false, + isExecuting: false, + }); + }); +}); diff --git a/app/javascript/dashboard/store/modules/specs/macros/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/macros/mutations.spec.js new file mode 100644 index 000000000..436738638 --- /dev/null +++ b/app/javascript/dashboard/store/modules/specs/macros/mutations.spec.js @@ -0,0 +1,38 @@ +import types from '../../../mutation-types'; +import { mutations } from '../../macros'; +import macros from './fixtures'; +describe('#mutations', () => { + describe('#SET_MACROS', () => { + it('set macrtos records', () => { + const state = { records: [] }; + mutations[types.SET_MACROS](state, macros); + expect(state.records).toEqual(macros); + }); + }); + + describe('#ADD_MACRO', () => { + it('push newly created macro to the store', () => { + const state = { records: [macros[0]] }; + mutations[types.ADD_MACRO](state, macros[1]); + expect(state.records).toEqual([macros[0], macros[1]]); + }); + }); + + describe('#EDIT_MACRO', () => { + it('update macro record', () => { + const state = { records: [macros[0]] }; + mutations[types.EDIT_MACRO](state, macros[0]); + expect(state.records[0].name).toEqual( + 'Assign billing label and sales team and message user' + ); + }); + }); + + describe('#DELETE_MACRO', () => { + it('delete macro record', () => { + const state = { records: [macros[0]] }; + mutations[types.DELETE_MACRO](state, 22); + expect(state.records).toEqual([]); + }); + }); +}); diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js index bf971931d..bcb6ad9a5 100755 --- a/app/javascript/dashboard/store/mutation-types.js +++ b/app/javascript/dashboard/store/mutation-types.js @@ -252,4 +252,11 @@ export default { ADD_AGENT_BOT: 'ADD_AGENT_BOT', EDIT_AGENT_BOT: 'EDIT_AGENT_BOT', DELETE_AGENT_BOT: 'DELETE_AGENT_BOT', + + // MACROS + SET_MACROS_UI_FLAG: 'SET_MACROS_UI_FLAG', + SET_MACROS: 'SET_MACROS', + ADD_MACRO: 'ADD_MACRO', + EDIT_MACRO: 'EDIT_MACRO', + DELETE_MACRO: 'DELETE_MACRO', };