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;
   },