feat(v4): Add new contact details screen (#10504)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/store/modules/attributes.js

@@ -35,6 +35,12 @@ export const getters = {
       record => record.attribute_model === attributeModel
     );
   },
+  getAttributesByModelType: _state => attributeModel => {
+    const records = _state.records.filter(
+      record => record.attribute_model === attributeModel
+    );
+    return camelcaseKeys(records, { deep: true });
+  },
 };
 
 export const actions = {

app/javascript/dashboard/store/modules/contactConversations.js

@@ -1,6 +1,7 @@
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
 import ConversationApi from '../../api/conversations';
+import camelcaseKeys from 'camelcase-keys';
 
 export const createMessagePayload = (payload, message) => {
   const { content, cc_emails, bcc_emails } = message;
@@ -74,6 +75,10 @@ export const getters = {
   getContactConversation: $state => id => {
     return $state.records[Number(id)] || [];
   },
+  getAllConversationsByContactId: $state => id => {
+    const records = $state.records[Number(id)] || [];
+    return camelcaseKeys(records, { deep: true });
+  },
 };
 
 export const actions = {

app/javascript/dashboard/store/modules/contactNotes.js

@@ -1,5 +1,6 @@
 import types from '../mutation-types';
 import ContactNotesAPI from '../../api/contactNotes';
+import camelcaseKeys from 'camelcase-keys';
 
 export const state = {
   records: {},
@@ -18,6 +19,11 @@ export const getters = {
   getUIFlags(_state) {
     return _state.uiFlags;
   },
+  getAllNotesByContactId: _state => contactId => {
+    const records = _state.records[contactId] || [];
+    const contactNotes = records.sort((r1, r2) => r2.id - r1.id);
+    return camelcaseKeys(contactNotes);
+  },
 };
 
 export const actions = {

app/javascript/dashboard/store/modules/contacts/actions.js

@@ -34,7 +34,7 @@ const buildContactFormData = contactParams => {
   return formData;
 };
 
-export const raiseContactCreateErrors = error => {
+export const handleContactOperationErrors = error => {
   if (error.response?.status === 422) {
     throw new DuplicateContactException(error.response.data.attributes);
   } else if (error.response?.data?.message) {
@@ -91,9 +91,12 @@ export const actions = {
   },
 
   update: async ({ commit }, { id, isFormData = false, ...contactParams }) => {
-    const decamelizedContactParams = decamelizeKeys(contactParams, {
-      deep: true,
-    });
+    const { avatar, customAttributes, ...paramsToDecamelize } = contactParams;
+    const decamelizedContactParams = {
+      ...decamelizeKeys(paramsToDecamelize),
+      ...(customAttributes && { custom_attributes: customAttributes }),
+      ...(avatar && { avatar }),
+    };
     commit(types.SET_CONTACT_UI_FLAG, { isUpdating: true });
     try {
       const response = await ContactAPI.update(
@@ -106,11 +109,7 @@ export const actions = {
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
     } catch (error) {
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
-      if (error.response?.status === 422) {
-        throw new DuplicateContactException(error.response.data.attributes);
-      } else {
-        throw new Error(error);
-      }
+      handleContactOperationErrors(error);
     }
   },
 
@@ -132,7 +131,7 @@ export const actions = {
       return response.data.payload.contact;
     } catch (error) {
       commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
-      return raiseContactCreateErrors(error);
+      return handleContactOperationErrors(error);
     }
   },
 

app/javascript/dashboard/store/modules/contacts/getters.js

@@ -17,6 +17,13 @@ export const getters = {
     const contact = $state.records[id];
     return contact || {};
   },
+  getContactById: $state => id => {
+    const contact = $state.records[id];
+    return camelcaseKeys(contact || {}, {
+      deep: true,
+      stopPaths: ['custom_attributes'],
+    });
+  },
   getMeta: $state => {
     return $state.meta;
   },

app/javascript/dashboard/store/modules/inboxes.js

@@ -7,6 +7,7 @@ import FBChannel from '../../api/channel/fbChannel';
 import TwilioChannel from '../../api/channel/twilioChannel';
 import { throwErrorMessage } from '../utils/api';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
+import camelcaseKeys from 'camelcase-keys';
 import { ACCOUNT_EVENTS } from '../../helper/AnalyticsHelper/events';
 
 const buildInboxData = inboxParams => {
@@ -92,6 +93,12 @@ export const getters = {
     );
     return inbox || {};
   },
+  getInboxById: $state => inboxId => {
+    const [inbox] = $state.records.filter(
+      record => record.id === Number(inboxId)
+    );
+    return camelcaseKeys(inbox || {}, { deep: true });
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },