chore: Update the usage with camel case

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -58,12 +58,12 @@ const onClickViewDetails = () => {
             <span class="text-sm font-medium truncate text-n-slate-12">{{
               name
             }}</span>
-            <template v-if="additionalAttributes?.company_name">
+            <template v-if="additionalAttributes?.companyName">
               <span class="text-sm text-n-slate-11">{{
                 t('CONTACTS_LAYOUT.CARD.OF')
               }}</span>
               <span class="text-sm font-medium truncate text-n-slate-12">
-                {{ additionalAttributes.company_name }}
+                {{ additionalAttributes.companyName }}
               </span>
             </template>
           </div>

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue

@@ -76,23 +76,37 @@ const validationRules = {
 const v$ = useVuelidate(validationRules, state);
 
 const updateState = () => {
-  const [firstName = '', lastName = ''] = (props.contactData.name || '').split(
-    ' '
-  );
+  const {
+    id,
+    name = '',
+    email: emailAddress,
+    phoneNumber,
+    additionalAttributes: {
+      description,
+      companyName,
+      countryCode,
+      country,
+      city,
+      socialProfiles = {},
+    } = {},
+  } = props.contactData || {};
+
+  const [firstName = '', lastName = ''] = name.split(' ');
+
   Object.assign(state, {
-    id: props.contactData.id,
-    name: props.contactData.name,
+    id,
+    name,
     firstName,
     lastName,
-    email: props.contactData.email,
-    phone_number: props.contactData.phoneNumber,
+    email: emailAddress,
+    phone_number: phoneNumber,
     additional_attributes: {
-      ...state.additional_attributes,
-      ...props.contactData.additionalAttributes,
-      social_profiles: {
-        ...state.additional_attributes.social_profiles,
-        ...props.contactData.additionalAttributes?.social_profiles,
-      },
+      description,
+      company_name: companyName,
+      country_code: countryCode,
+      country,
+      city,
+      social_profiles: socialProfiles,
     },
   });
 };
@@ -165,7 +179,8 @@ const getFormBinding = key => {
 
       const isFormValid = await v$.value.$validate();
       if (isFormValid) {
-        emit('update', state);
+        const { firstName, lastName, ...stateWithoutNames } = state;
+        emit('update', stateWithoutNames);
       }
     },
   });

app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue

@@ -28,27 +28,18 @@ const confirmDeleteContactDialogRef = ref(null);
 const selectedContactData = computed(() => {
   if (!props.selectedContact) return {};
 
-  const {
-    phone_number: phoneNumber = {},
-    additional_attributes: additionalAttributes = {},
-  } = props.selectedContact;
-
-  return {
-    ...props.selectedContact,
-    phoneNumber,
-    additionalAttributes,
-  };
+  return props.selectedContact;
 });
 
 const createdAt = computed(() => {
-  return props.selectedContact?.created_at
-    ? dynamicTime(props.selectedContact.created_at)
+  return props.selectedContact?.createdAt
+    ? dynamicTime(props.selectedContact.createdAt)
     : '';
 });
 
 const lastActivityAt = computed(() => {
-  return props.selectedContact?.last_activity_at
-    ? dynamicTime(props.selectedContact.last_activity_at)
+  return props.selectedContact?.lastActivityAt
+    ? dynamicTime(props.selectedContact.lastActivityAt)
     : '';
 });
 

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue';
+
 import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
 
 defineProps({
@@ -26,8 +27,8 @@ const toggleExpanded = id => {
       :name="contact.name"
       :email="contact.email"
       :thumbnail="contact.thumbnail"
-      :phone-number="contact.phone_number"
-      :additional-attributes="contact.additional_attributes"
+      :phone-number="contact.phoneNumber"
+      :additional-attributes="contact.additionalAttributes"
       :is-expanded="expandedCardId === contact.id"
       @toggle="toggleExpanded(contact.id)"
     />

app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue

@@ -9,7 +9,7 @@ import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 const store = useStore();
 
-const contacts = useMapGetter('contacts/getContacts');
+const contacts = useMapGetter('contacts/getContactsList');
 const uiFlags = useMapGetter('contacts/getUIFlags');
 const meta = useMapGetter('contacts/getMeta');
 

app/javascript/dashboard/routes/dashboard/contact/pages/EditContactsPageRouteView.vue

@@ -11,15 +11,16 @@ import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import ContactNotes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue';
 import ContactHistory from 'dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue';
 import ContactMerge from 'dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue';
+// import ContactCustomAttributes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue';
 
 const store = useStore();
 const route = useRoute();
 const router = useRouter();
 
-const contact = useMapGetter('contacts/getContact');
+const contact = useMapGetter('contacts/getContactById');
 const uiFlags = useMapGetter('contacts/getUIFlags');
 
-const activeTab = ref('merge');
+const activeTab = ref('attributes');
 const contactMergeRef = ref(null);
 
 const isFetchingItem = computed(() => uiFlags.value.isFetchingItem);
@@ -77,10 +78,15 @@ const fetchContactConversations = () => {
   if (contactId) store.dispatch('contactConversations/get', contactId);
 };
 
+const fetchAttributes = () => {
+  store.dispatch('attributes/get');
+};
+
 onMounted(() => {
   fetchActiveContact();
   fetchContactNotes();
   fetchContactConversations();
+  fetchAttributes();
 });
 </script>
 
@@ -102,7 +108,7 @@ onMounted(() => {
         <Spinner />
       </div>
       <ContactDetails
-        v-else
+        v-else-if="selectedContact"
         :selected-contact="selectedContact"
         @go-to-contacts-list="goToContactsList"
       />
@@ -115,6 +121,10 @@ onMounted(() => {
             @tab-changed="handleTabChange"
           />
         </div>
+        <!-- <ContactCustomAttributes
+          v-if="activeTab === 'attributes'"
+          :selected-contact="selectedContact"
+        /> -->
         <ContactNotes v-if="activeTab === 'notes'" />
         <ContactHistory v-if="activeTab === 'history'" />
         <ContactMerge

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

@@ -1,6 +1,7 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import AttributeAPI from '../../api/attributes';
+import camelcaseKeys from 'camelcase-keys';
 
 export const state = {
   records: [],
@@ -24,6 +25,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/contacts/getters.js

@@ -4,6 +4,12 @@ export const getters = {
   getContacts($state) {
     return $state.sortOrder.map(contactId => $state.records[contactId]);
   },
+  getContactsList($state) {
+    const contacts = $state.sortOrder.map(
+      contactId => $state.records[contactId]
+    );
+    return camelcaseKeys(contacts, { deep: true });
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },
@@ -13,7 +19,7 @@ export const getters = {
   },
   getContactById: $state => id => {
     const contact = $state.records[id];
-    return camelcaseKeys(contact || {});
+    return camelcaseKeys(contact || {}, { deep: true });
   },
   getMeta: $state => {
     return $state.meta;