diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js index 45992a63d..6958f755f 100644 --- a/app/javascript/shared/constants/busEvents.js +++ b/app/javascript/shared/constants/busEvents.js @@ -2,4 +2,5 @@ export const BUS_EVENTS = { SET_REFERRER_HOST: 'SET_REFERRER_HOST', SET_TWEET_REPLY: 'SET_TWEET_REPLY', ATTACHMENT_SIZE_CHECK_ERROR: 'ATTACHMENT_SIZE_CHECK_ERROR', + START_NEW_CONVERSATION: 'START_NEW_CONVERSATION', }; diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue index 60c02076f..fc2e9bb55 100755 --- a/app/javascript/widget/App.vue +++ b/app/javascript/widget/App.vue @@ -77,7 +77,7 @@ export default { this.registerListeners(); this.sendRNWebViewLoadedEvent(); } - this.$store.dispatch('conversationAttributes/get'); + this.$store.dispatch('conversationAttributes/getAttributes'); this.setWidgetColor(window.chatwootWebChannel); this.registerUnreadEvents(); this.registerCampaignEvents(); diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue index dbfbb5633..75d64cae2 100755 --- a/app/javascript/widget/components/ChatFooter.vue +++ b/app/javascript/widget/components/ChatFooter.vue @@ -1,19 +1,33 @@ diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json index dd114afff..bbb43acfa 100644 --- a/app/javascript/widget/i18n/locale/en.json +++ b/app/javascript/widget/i18n/locale/en.json @@ -18,6 +18,7 @@ "IN_A_DAY": "Typically replies in a day" }, "START_CONVERSATION": "Start Conversation", + "START_NEW_CONVERSATION": "Start a new conversation", "UNREAD_VIEW": { "VIEW_MESSAGES_BUTTON": "See new messages", "CLOSE_MESSAGES_BUTTON": "Close", diff --git a/app/javascript/widget/mixins/configMixin.js b/app/javascript/widget/mixins/configMixin.js index c70d9ca57..53cc26a00 100644 --- a/app/javascript/widget/mixins/configMixin.js +++ b/app/javascript/widget/mixins/configMixin.js @@ -22,10 +22,16 @@ export default { return window.chatwootWebChannel.preChatFormEnabled; }, preChatFormOptions() { + let requireEmail = false; + let preChatMessage = ''; const options = window.chatwootWebChannel.preChatFormOptions || {}; + if (!this.isOnNewConversation) { + requireEmail = options.require_email; + preChatMessage = options.pre_chat_message; + } return { - requireEmail: options.require_email, - preChatMessage: options.pre_chat_message, + requireEmail, + preChatMessage, }; }, }, diff --git a/app/javascript/widget/mixins/specs/configMixin.spec.js b/app/javascript/widget/mixins/specs/configMixin.spec.js index 663cf695d..c87d9fd71 100644 --- a/app/javascript/widget/mixins/specs/configMixin.spec.js +++ b/app/javascript/widget/mixins/specs/configMixin.spec.js @@ -6,6 +6,7 @@ global.chatwootWebChannel = { avatarUrl: 'https://test.url', hasAConnectedAgentBot: 'AgentBot', enabledFeatures: ['emoji_picker', 'attachments'], + preChatFormOptions: { require_email: false, pre_chat_message: '' }, }; global.chatwootWidgetDefaults = { @@ -31,6 +32,14 @@ describe('configMixin', () => { avatarUrl: 'https://test.url', hasAConnectedAgentBot: 'AgentBot', enabledFeatures: ['emoji_picker', 'attachments'], + preChatFormOptions: { + pre_chat_message: '', + require_email: false, + }, + }); + expect(wrapper.vm.preChatFormOptions).toEqual({ + requireEmail: false, + preChatMessage: '', }); }); }); diff --git a/app/javascript/widget/store/modules/conversation/actions.js b/app/javascript/widget/store/modules/conversation/actions.js index 3101428a0..ddae68024 100644 --- a/app/javascript/widget/store/modules/conversation/actions.js +++ b/app/javascript/widget/store/modules/conversation/actions.js @@ -11,7 +11,7 @@ import { refreshActionCableConnector } from '../../../helpers/actionCable'; import { createTemporaryMessage, onNewMessageCreated } from './helpers'; export const actions = { - createConversation: async ({ commit }, params) => { + createConversation: async ({ commit, dispatch }, params) => { commit('setConversationUIFlag', { isCreating: true }); try { const { data } = await createConversationAPI(params); @@ -22,6 +22,7 @@ export const actions = { const [message = {}] = messages; commit('pushMessageToConversation', message); refreshActionCableConnector(pubsubToken); + dispatch('conversationAttributes/getAttributes', {}, { root: true }); } catch (error) { console.log(error); // Ignore error diff --git a/app/javascript/widget/store/modules/conversationAttributes.js b/app/javascript/widget/store/modules/conversationAttributes.js index 3391b2960..ddcd8d6e0 100644 --- a/app/javascript/widget/store/modules/conversationAttributes.js +++ b/app/javascript/widget/store/modules/conversationAttributes.js @@ -1,6 +1,7 @@ import { SET_CONVERSATION_ATTRIBUTES, UPDATE_CONVERSATION_ATTRIBUTES, + CLEAR_CONVERSATION_ATTRIBUTES, } from '../types'; import { getConversationAPI } from '../../api/conversation'; @@ -14,7 +15,7 @@ export const getters = { }; export const actions = { - get: async ({ commit }) => { + getAttributes: async ({ commit }) => { try { const { data } = await getConversationAPI(); const { contact_last_seen_at: lastSeen } = data; @@ -27,6 +28,9 @@ export const actions = { update({ commit }, data) { commit(UPDATE_CONVERSATION_ATTRIBUTES, data); }, + clearConversationAttributes: ({ commit }) => { + commit('CLEAR_CONVERSATION_ATTRIBUTES'); + }, }; export const mutations = { @@ -40,6 +44,10 @@ export const mutations = { $state.status = data.status; } }, + [CLEAR_CONVERSATION_ATTRIBUTES]($state) { + $state.id = ''; + $state.status = ''; + }, }; export default { diff --git a/app/javascript/widget/store/modules/specs/conversationAttributes/actions.spec.js b/app/javascript/widget/store/modules/specs/conversationAttributes/actions.spec.js index 15a447e85..51c864ad2 100644 --- a/app/javascript/widget/store/modules/specs/conversationAttributes/actions.spec.js +++ b/app/javascript/widget/store/modules/specs/conversationAttributes/actions.spec.js @@ -5,10 +5,10 @@ const commit = jest.fn(); jest.mock('widget/helpers/axios'); describe('#actions', () => { - describe('#update', () => { + describe('#get attributes', () => { it('sends mutation if api is success', async () => { API.get.mockResolvedValue({ data: { id: 1, status: 'bot' } }); - await actions.get({ commit }); + await actions.getAttributes({ commit }); expect(commit.mock.calls).toEqual([ ['SET_CONVERSATION_ATTRIBUTES', { id: 1, status: 'bot' }], ['conversation/setMetaUserLastSeenAt', undefined, { root: true }], @@ -16,12 +16,12 @@ describe('#actions', () => { }); it('doesnot send mutation if api is error', async () => { API.get.mockRejectedValue({ message: 'Invalid Headers' }); - await actions.get({ commit }); + await actions.getAttributes({ commit }); expect(commit.mock.calls).toEqual([]); }); }); - describe('#update', () => { + describe('#update attributes', () => { it('sends correct mutations', () => { actions.update({ commit }, { id: 1, status: 'bot' }); expect(commit).toBeCalledWith('UPDATE_CONVERSATION_ATTRIBUTES', { @@ -30,4 +30,10 @@ describe('#actions', () => { }); }); }); + describe('#clear attributes', () => { + it('sends correct mutations', () => { + actions.clearConversationAttributes({ commit }); + expect(commit).toBeCalledWith('CLEAR_CONVERSATION_ATTRIBUTES'); + }); + }); }); diff --git a/app/javascript/widget/store/modules/specs/conversationAttributes/mutations.spec.js b/app/javascript/widget/store/modules/specs/conversationAttributes/mutations.spec.js index f47e29825..2b2bd62fc 100644 --- a/app/javascript/widget/store/modules/specs/conversationAttributes/mutations.spec.js +++ b/app/javascript/widget/store/modules/specs/conversationAttributes/mutations.spec.js @@ -30,4 +30,15 @@ describe('#mutations', () => { expect(state).toEqual({ id: 1, status: 'bot' }); }); }); + + describe('#CLEAR_CONVERSATION_ATTRIBUTES', () => { + it('clear status if it is same conversation', () => { + const state = { id: 1, status: 'open' }; + mutations.CLEAR_CONVERSATION_ATTRIBUTES(state, { + id: 1, + status: 'open', + }); + expect(state).toEqual({ id: '', status: '' }); + }); + }); }); diff --git a/app/javascript/widget/store/types.js b/app/javascript/widget/store/types.js index a091e7a3a..0ade84403 100644 --- a/app/javascript/widget/store/types.js +++ b/app/javascript/widget/store/types.js @@ -1,3 +1,4 @@ export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR'; export const SET_CONVERSATION_ATTRIBUTES = 'SET_CONVERSATION_ATTRIBUTES'; export const UPDATE_CONVERSATION_ATTRIBUTES = 'UPDATE_CONVERSATION_ATTRIBUTES'; +export const CLEAR_CONVERSATION_ATTRIBUTES = 'CLEAR_CONVERSATION_ATTRIBUTES'; diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue index a86c29a28..539d12922 100755 --- a/app/javascript/widget/views/Home.vue +++ b/app/javascript/widget/views/Home.vue @@ -113,7 +113,11 @@ export default { }, }, data() { - return { isOnCollapsedView: false, showAttachmentError: false }; + return { + isOnCollapsedView: false, + showAttachmentError: false, + isOnNewConversation: false, + }; }, computed: { ...mapGetters({ @@ -130,7 +134,10 @@ export default { if (this.conversationSize) { return 'messageView'; } - if (this.preChatFormEnabled && !currentUserEmail) { + if ( + this.isOnNewConversation || + (this.preChatFormEnabled && !currentUserEmail) + ) { return 'preChatFormView'; } return 'messageView'; @@ -163,6 +170,10 @@ export default { this.showAttachmentError = false; }, 3000); }); + bus.$on(BUS_EVENTS.START_NEW_CONVERSATION, () => { + this.isOnCollapsedView = true; + this.isOnNewConversation = true; + }); }, methods: { startConversation() { diff --git a/app/views/widgets/show.html.erb b/app/views/widgets/show.html.erb index c63dd08eb..04f8ac0e6 100644 --- a/app/views/widgets/show.html.erb +++ b/app/views/widgets/show.html.erb @@ -20,6 +20,7 @@ preChatFormEnabled: <%= @web_widget.pre_chat_form_enabled %>, preChatFormOptions: <%= @web_widget.pre_chat_form_options.to_json.html_safe %>, workingHoursEnabled: <%= @web_widget.inbox.working_hours_enabled %>, + csatSurveyEnabled: <%= @web_widget.inbox.csat_survey_enabled %>, workingHours: <%= @web_widget.inbox.working_hours.to_json.html_safe %>, outOfOfficeMessage: <%= @web_widget.inbox.out_of_office_message.to_json.html_safe %>, utcOffset: '<%= ActiveSupport::TimeZone[@web_widget.inbox.timezone].formatted_offset %>'