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)"
     />