fix: adds module to store

app/javascript/widget/store/index.js

@@ -11,6 +11,11 @@ import globalConfig from 'shared/store/globalConfig';
 import message from 'widget/store/modules/message';
 import campaign from 'widget/store/modules/campaign';
 
+// New store modules
+import contactV2 from 'widget/store/modules/contactV2';
+import conversationV2 from 'widget/store/modules/conversationV2';
+import messageV2 from 'widget/store/modules/messageV2';
+
 Vue.use(Vuex);
 export default new Vuex.Store({
   modules: {
@@ -24,5 +29,8 @@ export default new Vuex.Store({
     globalConfig,
     message,
     campaign,
+    contactV2,
+    conversationV2,
+    messageV2,
   },
 });

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

@@ -0,0 +1,104 @@
+import ContactPublicAPI from 'widget/api/contacts';
+import { refreshActionCableConnector } from '../../../helpers/actionCable';
+
+const state = {
+  currentUser: {},
+  uiFlags: {
+    isFetching: false,
+    isCreating: false,
+    isUpdating: false,
+  },
+};
+
+export const getters = {
+  getCurrentUser(_state) {
+    return _state.currentUser;
+  },
+};
+
+export const actions = {
+  create: async ({ commit }, { inboxIdentifier, user: userObject }) => {
+    try {
+      commit('setUIFlag', { isCreating: true });
+      const user = {
+        email: userObject.email,
+        name: userObject.name,
+        avatar_url: userObject.avatar_url,
+        identifier_hash: userObject.identifier_hash,
+        phone_number: userObject.phone_number,
+      };
+      const { data } = await ContactPublicAPI.update(inboxIdentifier, user);
+      const { pubsub_token: pubsubToken } = data;
+
+      commit('setCurrentUser', data);
+      refreshActionCableConnector(pubsubToken);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isCreating: false });
+    }
+  },
+  get: async ({ commit }, { inboxIdentifier, contactIdentifier }) => {
+    try {
+      commit('setUIFlag', { isFetching: true });
+      const { data } = await ContactPublicAPI.get(
+        inboxIdentifier,
+        contactIdentifier
+      );
+      commit('setCurrentUser', data);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isFetching: false });
+    }
+  },
+  update: async ({ commit }, { identifier, user: userObject }) => {
+    try {
+      commit('setUIFlag', { isUpdating: false });
+      const user = {
+        email: userObject.email,
+        name: userObject.name,
+        avatar_url: userObject.avatar_url,
+        identifier_hash: userObject.identifier_hash,
+        phone_number: userObject.phone_number,
+      };
+      const {
+        data: { pubsub_token: pubsubToken },
+      } = await ContactPublicAPI.update(identifier, user);
+
+      refreshActionCableConnector(pubsubToken);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit('setUIFlag', { isUpdating: false });
+    }
+  },
+  setCustomAttributes: async (_, customAttributes = {}) => {
+    try {
+      await ContactPublicAPI.setCustomAttibutes(customAttributes);
+    } catch (error) {
+      // Ingore error
+    }
+  },
+};
+
+export const mutations = {
+  setCurrentUser($state, user) {
+    const { currentUser } = $state;
+    $state.currentUser = { ...currentUser, ...user };
+  },
+  setUIFlag($state, uiFlags) {
+    $state.uiFlags = {
+      ...$state.uiFlags,
+      ...uiFlags,
+    };
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

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

@@ -1,4 +1,4 @@
-import MessagePublicAPI from 'widget/api/messagesPublic';
+import MessagePublicAPI from 'widget/api/messagePublic';
 import { refreshActionCableConnector } from 'widget/helpers/actionCable';
 import {
   createTemporaryMessage,

app/javascript/widget/views/Conversations.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-1 items-center h-full bg-black-25 justify-center">
+    {{ JSON.stringify(allConversations) }}
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  name: 'Conversations',
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  mountd() {
+    this.$store.dispatch('contactV2/get', { inboxIdentifier: '', user: {} });
+  },
+  computed: {
+    ...mapGetters({
+      allConversations: 'conversationV2/allConversations',
+    }),
+  },
+  mounted() {},
+};
+</script>

app/javascript/widget/views/Home.vue

@@ -6,6 +6,7 @@
     <spinner size="" />
   </div>
   <div v-else class="home" @keydown.esc="closeChat">
+    <conversations />
     <div
       class="header-wrap bg-white"
       :class="{ expanded: !isHeaderCollapsed, collapsed: isHeaderCollapsed }"
@@ -73,6 +74,7 @@ import Branding from 'shared/components/Branding.vue';
 import ChatFooter from 'widget/components/ChatFooter.vue';
 import ChatHeaderExpanded from 'widget/components/ChatHeaderExpanded.vue';
 import ChatHeader from 'widget/components/ChatHeader.vue';
+import Conversations from './Conversations.vue';
 import ConversationWrap from 'widget/components/ConversationWrap.vue';
 import { IFrameHelper } from 'widget/helpers/utils';
 import configMixin from '../mixins/configMixin';
@@ -83,6 +85,7 @@ import { mapGetters } from 'vuex';
 import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import PreChatForm from '../components/PreChat/Form';
+
 export default {
   name: 'Home',
   components: {
@@ -95,6 +98,7 @@ export default {
     Spinner,
     TeamAvailability,
     Banner,
+    Conversations,
   },
   mixins: [configMixin],
   props: {

app/views/widgets/show.html.erb

@@ -11,6 +11,7 @@
         locale: '<%= @web_widget.account.locale %>',
         websiteName: '<%= @web_widget.inbox.name %>',
         websiteToken: '<%= @web_widget.website_token %>',
+        inboxIdentifier: '<%= @web_widget.inbox_identifier %>',
         welcomeTagline: '<%= @web_widget.welcome_tagline %>',
         welcomeTitle: '<%= @web_widget.welcome_title %>',
         widgetColor: '<%= @web_widget.widget_color %>',