feat: Add a pre-chat form on widget (#1769)

app/javascript/widget/store/modules/conversation/actions.js

@@ -1,14 +1,34 @@
 import {
+  createConversationAPI,
   sendMessageAPI,
   getMessagesAPI,
   sendAttachmentAPI,
   toggleTyping,
   setUserLastSeenAt,
 } from 'widget/api/conversation';
+import { refreshActionCableConnector } from '../../../helpers/actionCable';
 
 import { createTemporaryMessage, onNewMessageCreated } from './helpers';
 
 export const actions = {
+  createConversation: async ({ commit }, params) => {
+    commit('setConversationUIFlag', { isCreating: true });
+    try {
+      const { data } = await createConversationAPI(params);
+      const {
+        contact: { pubsub_token: pubsubToken },
+        messages,
+      } = data;
+      const [message = {}] = messages;
+      commit('pushMessageToConversation', message);
+      refreshActionCableConnector(pubsubToken);
+    } catch (error) {
+      console.log(error);
+      // Ignore error
+    } finally {
+      commit('setConversationUIFlag', { isCreating: false });
+    }
+  },
   sendMessage: async ({ commit }, params) => {
     const { content } = params;
     commit('pushMessageToConversation', createTemporaryMessage({ content }));

app/javascript/widget/store/modules/conversation/getters.js

@@ -5,6 +5,7 @@ import { formatUnixDate } from 'shared/helpers/DateHelper';
 
 export const getters = {
   getAllMessagesLoaded: _state => _state.uiFlags.allMessagesLoaded,
+  getIsCreating: _state => _state.uiFlags.isCreating,
   getIsAgentTyping: _state => _state.uiFlags.isAgentTyping,
   getConversation: _state => _state.conversations,
   getConversationSize: _state => Object.keys(_state.conversations).length,

app/javascript/widget/store/modules/conversation/index.js

@@ -11,6 +11,7 @@ const state = {
     allMessagesLoaded: false,
     isFetchingList: false,
     isAgentTyping: false,
+    isCreating: false,
   },
 };
 

app/javascript/widget/store/modules/conversation/mutations.js

@@ -41,6 +41,13 @@ export const mutations = {
     }
   },
 
+  setConversationUIFlag($state, uiFlags) {
+    $state.uiFlags = {
+      ...$state.uiFlags,
+      ...uiFlags,
+    };
+  },
+
   setConversationListLoading($state, status) {
     $state.uiFlags.isFetchingList = status;
   },

app/javascript/widget/store/modules/specs/conversation/actions.spec.js

@@ -28,6 +28,43 @@ describe('#actions', () => {
     });
   });
 
+  describe('#createConversation', () => {
+    it('sends correct mutations', async () => {
+      API.post.mockResolvedValue({
+        data: {
+          contact: { name: 'contact-name' },
+          messages: [{ id: 1, content: 'This is a test message' }],
+        },
+      });
+      let windowSpy = jest.spyOn(window, 'window', 'get');
+      windowSpy.mockImplementation(() => ({
+        WOOT_WIDGET: {
+          $root: {
+            $i18n: {
+              locale: 'el',
+            },
+          },
+        },
+        location: {
+          search: '?param=1',
+        },
+      }));
+      await actions.createConversation(
+        { commit },
+        { contact: {}, message: 'This is a test message' }
+      );
+      expect(commit.mock.calls).toEqual([
+        ['setConversationUIFlag', { isCreating: true }],
+        [
+          'pushMessageToConversation',
+          { id: 1, content: 'This is a test message' },
+        ],
+        ['setConversationUIFlag', { isCreating: false }],
+      ]);
+      windowSpy.mockRestore();
+    });
+  });
+
   describe('#updateMessage', () => {
     it('sends correct mutations', () => {
       actions.updateMessage({ commit }, { id: 1 });

app/javascript/widget/store/modules/specs/conversation/getters.spec.js

@@ -16,6 +16,11 @@ describe('#getters', () => {
     });
   });
 
+  it('getIsCreating', () => {
+    const state = { uiFlags: { isCreating: true } };
+    expect(getters.getIsCreating(state)).toEqual(true);
+  });
+
   it('getConversationSize', () => {
     const state = {
       conversations: {

app/javascript/widget/store/modules/specs/conversation/mutations.spec.js

@@ -73,6 +73,17 @@ describe('#mutations', () => {
     });
   });
 
+  describe('#setConversationUIFlag', () => {
+    it('set uiFlags correctly', () => {
+      const state = { uiFlags: { isFetchingList: false } };
+      mutations.setConversationUIFlag(state, { isCreating: true });
+      expect(state.uiFlags).toEqual({
+        isFetchingList: false,
+        isCreating: true,
+      });
+    });
+  });
+
   describe('#setMessagesInConversation', () => {
     it('sets allMessagesLoaded flag if payload is empty', () => {
       const state = { uiFlags: { allMessagesLoaded: false } };