chore: Use camel case

2024-11-07 10:32:38 +05:30
parent 4b85a9045a
commit 314a33e053
9 changed files with 114 additions and 89 deletions
@@ -11,8 +11,8 @@ const route = useRoute();
 const conversations = useMapGetter(
  'contactConversations/getAllConversationsByContactId'
 );
-const contacts = useMapGetter('contacts/getContact');
-const stateInbox = useMapGetter('inboxes/getInbox');
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
 const accountLabels = useMapGetter('labels/getLabels');

 const accountLabelsValue = computed(() => accountLabels.value);
@@ -42,7 +42,7 @@ const contactConversations = computed(() =>
        v-if="conversation"
        :key="conversation.id"
        :conversation="conversation"
-        :contact="contacts(conversation.meta.sender.id)"
+        :contact="contactsById(conversation.meta.sender.id)"
        :state-inbox="stateInbox(conversation.inboxId)"
        :account-labels="accountLabelsValue"
      />
@@ -21,9 +21,9 @@ const lastNonActivityMessageContent = computed(() => {
 const assignee = computed(() => {
  const { meta: { assignee: agent = {} } = {} } = props.conversation;
  return {
-    name: agent.name ?? agent.available_name,
+    name: agent.name ?? agent.availableName,
    thumbnail: agent.thumbnail,
-    status: agent.availability_status,
+    status: agent.availabilityStatus,
  };
 });

@@ -27,9 +27,9 @@ const lastNonActivityMessageContent = computed(() => {
 const assignee = computed(() => {
  const { meta: { assignee: agent = {} } = {} } = props.conversation;
  return {
-    name: agent.name ?? agent.available_name,
+    name: agent.name ?? agent.availableName,
    thumbnail: agent.thumbnail,
-    status: agent.availability_status,
+    status: agent.availabilityStatus,
  };
 });

@@ -6,19 +6,19 @@ import ConversationCard from './ConversationCard.vue';
 const conversationWithoutMeta = {
  meta: {
    sender: {
-      additional_attributes: {},
-      availability_status: 'offline',
+      additionalAttributes: {},
+      availabilityStatus: 'offline',
      email: 'candice@chatwoot.com',
      id: 29,
      name: 'Candice Matherson',
      phone_number: '+918585858585',
      identifier: null,
      thumbnail: '',
-      custom_attributes: {
-        link_contact: 'https://apple.com',
-        list_contact: 'Not spam',
-        text_contact: 'hey',
-        checkbox_contact: true,
+      customAttributes: {
+        linkContact: 'https://apple.com',
+        listContact: 'Not spam',
+        textContact: 'hey',
+        checkboxContact: true,
      },
      last_activity_at: 1712127410,
      created_at: 1712127389,
@@ -26,47 +26,47 @@ const conversationWithoutMeta = {
    channel: 'Channel::Email',
    assignee: {
      id: 1,
-      account_id: 2,
-      availability_status: 'online',
-      auto_offline: false,
+      accountId: 2,
+      availabilityStatus: 'online',
+      autoOffline: false,
      confirmed: true,
      email: 'sivin@chatwoot.com',
-      available_name: 'Sivin',
+      availableName: 'Sivin',
      name: 'Sivin',
      role: 'administrator',
      thumbnail: '',
-      custom_role_id: null,
+      customRoleId: null,
    },
-    hmac_verified: false,
+    hmacVerified: false,
  },
  id: 38,
  messages: [
    {
      id: 3597,
      content: 'Sivin set the priority to low',
-      account_id: 2,
-      inbox_id: 7,
-      conversation_id: 38,
-      message_type: 2,
-      created_at: 1730885168,
-      updated_at: '2024-11-06T09:26:08.565Z',
+      accountId: 2,
+      inboxId: 7,
+      conversationId: 38,
+      messageType: 2,
+      createdAt: 1730885168,
+      updatedAt: '2024-11-06T09:26:08.565Z',
      private: false,
      status: 'sent',
      source_id: null,
-      content_type: 'text',
-      content_attributes: {},
-      sender_type: null,
-      sender_id: null,
-      external_source_ids: {},
-      additional_attributes: {},
-      processed_message_content: 'Sivin set the priority to low',
+      contentType: 'text',
+      contentAttributes: {},
+      senderType: null,
+      senderId: null,
+      externalSourceIds: {},
+      additionalAttributes: {},
+      processedMessageContent: 'Sivin set the priority to low',
      sentiment: {},
      conversation: {
-        assignee_id: 1,
-        unread_count: 0,
-        last_activity_at: 1730885168,
-        contact_inbox: {
-          source_id: 'candice@chatwoot.com',
+        assigneeId: 1,
+        unreadCount: 0,
+        lastActivityAt: 1730885168,
+        contactInbox: {
+          sourceId: 'candice@chatwoot.com',
        },
      },
    },
@@ -143,38 +143,38 @@ const conversationWithoutMeta = {
 const conversationWithMeta = {
  meta: {
    sender: {
-      additional_attributes: {},
-      availability_status: 'offline',
+      additionalAttributes: {},
+      availabilityStatus: 'offline',
      email: 'willy@chatwoot.com',
      id: 29,
      name: 'Willy Castelot',
-      phone_number: '+918585858585',
+      phoneNumber: '+918585858585',
      identifier: null,
      thumbnail: '',
-      custom_attributes: {
-        link_contact: 'https://apple.com',
-        list_contact: 'Not spam',
-        text_contact: 'hey',
-        checkbox_contact: true,
+      customAttributes: {
+        linkContact: 'https://apple.com',
+        listContact: 'Not spam',
+        textContact: 'hey',
+        checkboxContact: true,
      },
-      last_activity_at: 1712127410,
-      created_at: 1712127389,
+      lastActivityAt: 1712127410,
+      createdAt: 1712127389,
    },
    channel: 'Channel::Email',
    assignee: {
      id: 1,
-      account_id: 2,
-      availability_status: 'online',
-      auto_offline: false,
+      accountId: 2,
+      availabilityStatus: 'online',
+      autoOffline: false,
      confirmed: true,
      email: 'sivin@chatwoot.com',
-      available_name: 'Sivin',
+      availableName: 'Sivin',
      name: 'Sivin',
      role: 'administrator',
      thumbnail: '',
-      custom_role_id: null,
+      customRoleId: null,
    },
-    hmac_verified: false,
+    hmacVerified: false,
  },
  id: 37,
  messages: [
@@ -182,27 +182,27 @@ const conversationWithMeta = {
      id: 3599,
      content:
        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
-      account_id: 2,
-      inbox_id: 7,
-      conversation_id: 37,
-      message_type: 1,
-      created_at: 1730885428,
-      updated_at: '2024-11-06T09:30:30.619Z',
+      accountId: 2,
+      inboxId: 7,
+      conversationId: 37,
+      messageType: 1,
+      createdAt: 1730885428,
+      updatedAt: '2024-11-06T09:30:30.619Z',
      private: false,
      status: 'sent',
-      source_id:
+      sourceId:
        'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
-      content_type: 'text',
-      content_attributes: {
-        cc_emails: [],
-        bcc_emails: [],
-        to_emails: [],
+      contentType: 'text',
+      contentAttributes: {
+        ccEmails: [],
+        bccEmails: [],
+        toEmails: [],
      },
      sender_type: 'User',
-      sender_id: 1,
-      external_source_ids: {},
-      additional_attributes: {},
-      processed_message_content:
+      senderId: 1,
+      externalSourceIds: {},
+      additionalAttributes: {},
+      processedMessageContent:
        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
      sentiment: {},
      conversation: {
@@ -216,10 +216,10 @@ const conversationWithMeta = {
      sender: {
        id: 1,
        name: 'Sivin',
-        available_name: 'Sivin',
-        avatar_url: '',
+        availableName: 'Sivin',
+        avatarUrl: '',
        type: 'user',
-        availability_status: 'online',
+        availabilityStatus: 'online',
        thumbnail: '',
      },
    },
@@ -332,31 +332,31 @@ const conversationWithMeta = {
 };

 const contactForConversationWithoutMeta = computed(() => ({
-  availability_status: null,
+  availabilityStatus: null,
  email: 'candice@chatwoot.com',
  id: 29,
  name: 'Candice Matherson',
-  phone_number: '+918585858585',
+  phoneNumber: '+918585858585',
  identifier: null,
  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=George',
-  custom_attributes: {},
+  customAttributes: {},
  last_activity_at: 1712127410,
-  created_at: 1712127389,
-  contact_inboxes: [],
+  createdAt: 1712127389,
+  contactInboxes: [],
 }));

 const contactForConversationWithMeta = computed(() => ({
-  availability_status: null,
+  availabilityStatus: null,
  email: 'willy@chatwoot.com',
  id: 29,
  name: 'Willy Castelot',
-  phone_number: '+918585858585',
+  phoneNumber: '+918585858585',
  identifier: null,
  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=Liam',
-  custom_attributes: {},
-  last_activity_at: 1712127410,
-  created_at: 1712127389,
-  contact_inboxes: [],
+  customAttributes: {},
+  lastActivityAt: 1712127410,
+  createdAt: 1712127389,
+  contactInboxes: [],
 }));

 const webWidgetInbox = computed(() => ({
@@ -33,14 +33,16 @@ const currentContact = computed(() => props.contact);
 const currentContactName = computed(() => currentContact.value?.name);
 const currentContactThumbnail = computed(() => currentContact.value?.thumbnail);
 const currentContactStatus = computed(
-  () => currentContact.value?.availability_status
+  () => currentContact.value?.availabilityStatus
 );

 const inbox = computed(() => props.stateInbox);

+const inboxName = computed(() => inbox.value?.name);
+
 const inboxIcon = computed(() => {
-  const { phone_number: phoneNumber, channel_type: type } = inbox.value;
-  return getInboxIconByType(type, phoneNumber);
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
 });

 const lastActivityAt = computed(() => {
@@ -73,6 +75,7 @@ const showMessagePreviewWithoutMeta = computed(() => {
        <div class="flex items-center gap-2">
          <CardPriorityIcon :priority="conversation.priority || null" />
          <div
+            v-tooltip.left="inboxName"
            class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
          >
            <Icon
@@ -19,6 +19,15 @@ const slaStatus = ref({
  icon: null,
 });

+// TODO: Remove this once we update the helper from utils
+// https://github.com/chatwoot/utils/blob/main/src/sla.ts#L73
+const convertObjectCamelCaseToSnakeCase = object => {
+  return Object.keys(object).reduce((acc, key) => {
+    acc[key.replace(/([A-Z])/g, '_$1').toLowerCase()] = object[key];
+    return acc;
+  }, {});
+};
+
 const appliedSLA = computed(() => props.conversation?.appliedSla);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);

@@ -28,7 +37,7 @@ const slaStatusText = computed(() => {

 const updateSlaStatus = () => {
  slaStatus.value = evaluateSLAStatus({
-    appliedSla: appliedSLA.value,
+    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value),
    chat: props.conversation,
  });
 };
@@ -77,7 +77,7 @@ export const getters = {
  },
  getAllConversationsByContactId: $state => id => {
    const records = $state.records[Number(id)] || [];
-    return camelcaseKeys(records);
+    return camelcaseKeys(records, { deep: true });
  },
 };

@@ -1,3 +1,5 @@
+import camelcaseKeys from 'camelcase-keys';
+
 export const getters = {
  getContacts($state) {
    return $state.sortOrder.map(contactId => $state.records[contactId]);
@@ -9,6 +11,10 @@ export const getters = {
    const contact = $state.records[id];
    return contact || {};
  },
+  getContactById: $state => id => {
+    const contact = $state.records[id];
+    return camelcaseKeys(contact || {});
+  },
  getMeta: $state => {
    return $state.meta;
  },
@@ -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;
  },