feat: outbound voice call essentials (#12782)

- Enables outbound voice calls in voice channel . We are only caring
about wiring the logic to trigger outgoing calls to the call button
introduced in previous PRs. We will connect it to call component in
subsequent PRs

ref: #11602 

## Screens

<img width="2304" height="1202" alt="image"
src="https://github.com/user-attachments/assets/b91543a8-8d4e-4229-bd80-9727b42c7b0f"
/>

<img width="2304" height="1200" alt="image"
src="https://github.com/user-attachments/assets/1a1dad2a-8cb2-4aa2-9702-c062416556a7"
/>

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>

app/javascript/dashboard/api/contacts.js

@@ -47,6 +47,12 @@ class ContactAPI extends ApiClient {
     return axios.get(`${this.url}/${contactId}/labels`);
   }
 
+  initiateCall(contactId, inboxId) {
+    return axios.post(`${this.url}/${contactId}/call`, {
+      inbox_id: inboxId,
+    });
+  }
+
   updateContactLabels(contactId, labels) {
     return axios.post(`${this.url}/${contactId}/labels`, { labels });
   }

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

@@ -102,6 +102,7 @@ const closeMobileSidebar = () => {
               />
               <VoiceCallButton
                 :phone="selectedContact?.phoneNumber"
+                :contact-id="contactId"
                 :label="$t('CONTACT_PANEL.CALL')"
                 size="sm"
               />

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

@@ -1,15 +1,18 @@
 <script setup>
 import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 
 const props = defineProps({
   phone: { type: String, default: '' },
+  contactId: { type: [String, Number], required: true },
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
   size: { type: String, default: 'sm' },
@@ -18,10 +21,17 @@ const props = defineProps({
 
 defineOptions({ inheritAttrs: false });
 const attrs = useAttrs();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
 
 const { t } = useI18n();
 
+const dialogRef = ref(null);
+
 const inboxesList = useMapGetter('inboxes/getInboxes');
+const contactsUiFlags = useMapGetter('contacts/getUIFlags');
+
 const voiceInboxes = computed(() =>
   (inboxesList.value || []).filter(
     inbox => inbox.channel_type === INBOX_TYPES.VOICE
@@ -32,20 +42,51 @@ const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
 // Unified behavior: hide when no phone
 const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
 
-const dialogRef = ref(null);
+const isInitiatingCall = computed(() => {
+  return contactsUiFlags.value?.isInitiatingCall || false;
+});
 
-const onClick = () => {
+const navigateToConversation = conversationId => {
+  const accountId = route.params.accountId;
+  if (conversationId && accountId) {
+    const path = frontendURL(
+      conversationUrl({
+        accountId,
+        id: conversationId,
+      })
+    );
+    router.push({ path });
+  }
+};
+
+const startCall = async inboxId => {
+  if (isInitiatingCall.value) return;
+
+  try {
+    const response = await store.dispatch('contacts/initiateCall', {
+      contactId: props.contactId,
+      inboxId,
+    });
+    useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
+    navigateToConversation(response?.conversation_id);
+  } catch (error) {
+    const apiError = error?.message;
+    useAlert(apiError || t('CONTACT_PANEL.CALL_FAILED'));
+  }
+};
+
+const onClick = async () => {
   if (voiceInboxes.value.length > 1) {
     dialogRef.value?.open();
     return;
   }
-  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
+  const [inbox] = voiceInboxes.value;
+  await startCall(inbox.id);
 };
 
-const onPickInbox = () => {
-  // Placeholder until actual call wiring happens
-  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
+const onPickInbox = async inbox => {
   dialogRef.value?.close();
+  await startCall(inbox.id);
 };
 </script>
 
@@ -55,6 +96,8 @@ const onPickInbox = () => {
       v-if="shouldRender"
       v-tooltip.top-end="tooltipLabel || null"
       v-bind="attrs"
+      :disabled="isInitiatingCall"
+      :is-loading="isInitiatingCall"
       :label="label"
       :icon="icon"
       :size="size"

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue

@@ -1,41 +1,102 @@
 <script setup>
 import { computed } from 'vue';
-import BaseBubble from 'next/message/bubbles/Base.vue';
 import { useMessageContext } from '../provider.js';
-import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
+import { MESSAGE_TYPES, VOICE_CALL_STATUS } from '../constants';
 
-const { contentAttributes } = useMessageContext();
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+
+const LABEL_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
+  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
+};
+
+const SUBTEXT_MAP = {
+  [VOICE_CALL_STATUS.RINGING]: 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET',
+  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
+};
+
+const ICON_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
+};
+
+const BG_COLOR_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'bg-n-teal-9',
+  [VOICE_CALL_STATUS.RINGING]: 'bg-n-teal-9 animate-pulse',
+  [VOICE_CALL_STATUS.COMPLETED]: 'bg-n-slate-11',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'bg-n-ruby-9',
+  [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
+};
+
+const { contentAttributes, messageType } = useMessageContext();
 
 const data = computed(() => contentAttributes.value?.data);
+const status = computed(() => data.value?.status?.toString());
 
-const status = computed(() => data.value?.status);
-const direction = computed(() => data.value?.call_direction);
+const isOutbound = computed(() => messageType.value === MESSAGE_TYPES.OUTGOING);
+const isFailed = computed(() =>
+  [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
+);
 
-const { labelKey, subtextKey, bubbleIconBg, bubbleIconName } =
-  useVoiceCallStatus(status, direction);
-
-const containerRingClass = computed(() => {
-  return status.value === 'ringing' ? 'ring-1 ring-emerald-300' : '';
+const labelKey = computed(() => {
+  if (LABEL_MAP[status.value]) return LABEL_MAP[status.value];
+  if (status.value === VOICE_CALL_STATUS.RINGING) {
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  }
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
+    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });
+
+const subtextKey = computed(() => {
+  if (SUBTEXT_MAP[status.value]) return SUBTEXT_MAP[status.value];
+  if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.THEY_ANSWERED'
+      : 'CONVERSATION.VOICE_CALL.YOU_ANSWERED';
+  }
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.NO_ANSWER'
+    : 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
+});
+
+const iconName = computed(() => {
+  if (ICON_MAP[status.value]) return ICON_MAP[status.value];
+  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
+});
+
+const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
 </script>
 
 <template>
   <BaseBubble class="p-0 border-none" hide-meta>
-    <div
-      class="flex overflow-hidden flex-col w-full max-w-xs bg-white rounded-lg border border-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
-      :class="containerRingClass"
-    >
+    <div class="flex overflow-hidden flex-col w-full max-w-xs">
       <div class="flex gap-3 items-center p-3 w-full">
         <div
           class="flex justify-center items-center rounded-full size-10 shrink-0"
-          :class="bubbleIconBg"
+          :class="bgColor"
         >
-          <span class="text-xl" :class="bubbleIconName" />
+          <Icon
+            class="size-5"
+            :icon="iconName"
+            :class="{
+              'text-n-slate-1': status === VOICE_CALL_STATUS.COMPLETED,
+              'text-white': status !== VOICE_CALL_STATUS.COMPLETED,
+            }"
+          />
         </div>
 
         <div class="flex overflow-hidden flex-col flex-grow">
-          <span class="text-base font-medium truncate">{{ $t(labelKey) }}</span>
-          <span class="text-xs text-slate-500">{{ $t(subtextKey) }}</span>
+          <span class="text-sm font-medium truncate text-n-slate-12">
+            {{ $t(labelKey) }}
+          </span>
+          <span class="text-xs text-n-slate-11">
+            {{ $t(subtextKey) }}
+          </span>
         </div>
       </div>
     </div>

app/javascript/dashboard/components-next/message/constants.js

@@ -73,3 +73,16 @@ export const MEDIA_TYPES = [
   ATTACHMENT_TYPES.AUDIO,
   ATTACHMENT_TYPES.IG_REEL,
 ];
+
+export const VOICE_CALL_STATUS = {
+  IN_PROGRESS: 'in-progress',
+  RINGING: 'ringing',
+  COMPLETED: 'completed',
+  NO_ANSWER: 'no-answer',
+  FAILED: 'failed',
+};
+
+export const VOICE_CALL_DIRECTION = {
+  INBOUND: 'inbound',
+  OUTBOUND: 'outbound',
+};

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -3,7 +3,6 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
-import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
@@ -14,6 +13,7 @@ import CardLabels from './conversationCardComponents/CardLabels.vue';
 import PriorityMark from './PriorityMark.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
+import VoiceCallStatus from './VoiceCallStatus.vue';
 
 const props = defineProps({
   activeLabel: { type: String, default: '' },
@@ -83,15 +83,10 @@ const isInboxNameVisible = computed(() => !activeInbox.value);
 
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
-const callStatus = computed(
-  () => props.chat.additional_attributes?.call_status
-);
-const callDirection = computed(
-  () => props.chat.additional_attributes?.call_direction
-);
-
-const { labelKey: voiceLabelKey, listIconColor: voiceIconColor } =
-  useVoiceCallStatus(callStatus, callDirection);
+const voiceCallData = computed(() => ({
+  status: props.chat.additional_attributes?.call_status,
+  direction: props.chat.additional_attributes?.call_direction,
+}));
 
 const inboxId = computed(() => props.chat.inbox_id);
 
@@ -317,20 +312,13 @@ const deleteConversation = () => {
       >
         {{ currentContact.name }}
       </h4>
-      <div
-        v-if="callStatus"
+      <VoiceCallStatus
+        v-if="voiceCallData.status"
         key="voice-status-row"
-        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
-        :class="messagePreviewClass"
-      >
-        <span
-          class="inline-block -mt-0.5 align-middle text-[16px] i-ph-phone-incoming"
-          :class="[voiceIconColor]"
-        />
-        <span class="mx-1">
-          {{ $t(voiceLabelKey) }}
-        </span>
-      </div>
+        :status="voiceCallData.status"
+        :direction="voiceCallData.direction"
+        :message-preview-class="messagePreviewClass"
+      />
       <MessagePreview
         v-else-if="lastMessageInChat"
         key="message-preview"

app/javascript/dashboard/components/widgets/conversation/VoiceCallStatus.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import {
+  VOICE_CALL_STATUS,
+  VOICE_CALL_DIRECTION,
+} from 'dashboard/components-next/message/constants';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  status: { type: String, default: '' },
+  direction: { type: String, default: '' },
+  messagePreviewClass: { type: [String, Array, Object], default: '' },
+});
+
+const LABEL_KEYS = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
+  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
+};
+
+const ICON_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
+};
+
+const COLOR_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'text-n-teal-9',
+  [VOICE_CALL_STATUS.RINGING]: 'text-n-teal-9',
+  [VOICE_CALL_STATUS.COMPLETED]: 'text-n-slate-11',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'text-n-ruby-9',
+  [VOICE_CALL_STATUS.FAILED]: 'text-n-ruby-9',
+};
+
+const isOutbound = computed(
+  () => props.direction === VOICE_CALL_DIRECTION.OUTBOUND
+);
+const isFailed = computed(() =>
+  [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(props.status)
+);
+
+const labelKey = computed(() => {
+  if (LABEL_KEYS[props.status]) return LABEL_KEYS[props.status];
+  if (props.status === VOICE_CALL_STATUS.RINGING) {
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  }
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
+    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+});
+
+const iconName = computed(() => {
+  if (ICON_MAP[props.status]) return ICON_MAP[props.status];
+  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
+});
+
+const statusColor = computed(
+  () => COLOR_MAP[props.status] || 'text-n-slate-11'
+);
+</script>
+
+<template>
+  <div
+    class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+    :class="messagePreviewClass"
+  >
+    <Icon
+      class="inline-block -mt-0.5 align-middle size-4"
+      :icon="iconName"
+      :class="statusColor"
+    />
+    <span class="mx-1" :class="statusColor">
+      {{ $t(labelKey) }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/composables/useVoiceCallStatus.js

@@ -1,161 +0,0 @@
-import { computed, unref } from 'vue';
-
-const CALL_STATUSES = {
-  IN_PROGRESS: 'in-progress',
-  RINGING: 'ringing',
-  NO_ANSWER: 'no-answer',
-  BUSY: 'busy',
-  FAILED: 'failed',
-  COMPLETED: 'completed',
-  CANCELED: 'canceled',
-};
-
-const CALL_DIRECTIONS = {
-  INBOUND: 'inbound',
-  OUTBOUND: 'outbound',
-};
-
-/**
- * Composable for handling voice call status display logic
- * @param {Ref|string} statusRef - Call status (ringing, in-progress, etc.)
- * @param {Ref|string} directionRef - Call direction (inbound, outbound)
- * @returns {Object} UI properties for displaying call status
- */
-export function useVoiceCallStatus(statusRef, directionRef) {
-  const status = computed(() => unref(statusRef)?.toString());
-  const direction = computed(() => unref(directionRef)?.toString());
-
-  // Status group helpers
-  const isFailedStatus = computed(() =>
-    [
-      CALL_STATUSES.NO_ANSWER,
-      CALL_STATUSES.BUSY,
-      CALL_STATUSES.FAILED,
-    ].includes(status.value)
-  );
-  const isEndedStatus = computed(() =>
-    [CALL_STATUSES.COMPLETED, CALL_STATUSES.CANCELED].includes(status.value)
-  );
-  const isOutbound = computed(
-    () => direction.value === CALL_DIRECTIONS.OUTBOUND
-  );
-
-  const labelKey = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.IN_PROGRESS) {
-      return isOutbound.value
-        ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
-        : 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS';
-    }
-
-    if (s === CALL_STATUSES.RINGING) {
-      return isOutbound.value
-        ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
-        : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
-    }
-
-    if (s === CALL_STATUSES.NO_ANSWER) {
-      return 'CONVERSATION.VOICE_CALL.MISSED_CALL';
-    }
-
-    if (isFailedStatus.value) {
-      return 'CONVERSATION.VOICE_CALL.NO_ANSWER';
-    }
-
-    if (isEndedStatus.value) {
-      return 'CONVERSATION.VOICE_CALL.CALL_ENDED';
-    }
-
-    return 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
-  });
-
-  const subtextKey = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.RINGING) {
-      return 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
-    }
-
-    if (s === CALL_STATUSES.IN_PROGRESS) {
-      return isOutbound.value
-        ? 'CONVERSATION.VOICE_CALL.THEY_ANSWERED'
-        : 'CONVERSATION.VOICE_CALL.YOU_ANSWERED';
-    }
-
-    if (isFailedStatus.value) {
-      return 'CONVERSATION.VOICE_CALL.NO_ANSWER';
-    }
-
-    if (isEndedStatus.value) {
-      return 'CONVERSATION.VOICE_CALL.CALL_ENDED';
-    }
-
-    return 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
-  });
-
-  const bubbleIconName = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.IN_PROGRESS) {
-      return isOutbound.value
-        ? 'i-ph-phone-outgoing-fill'
-        : 'i-ph-phone-incoming-fill';
-    }
-
-    if (isFailedStatus.value) {
-      return 'i-ph-phone-x-fill';
-    }
-
-    // For ringing/completed/canceled show direction when possible
-    return isOutbound.value
-      ? 'i-ph-phone-outgoing-fill'
-      : 'i-ph-phone-incoming-fill';
-  });
-
-  const bubbleIconBg = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.IN_PROGRESS) {
-      return 'bg-n-teal-9';
-    }
-
-    if (isFailedStatus.value) {
-      return 'bg-n-ruby-9';
-    }
-
-    if (isEndedStatus.value) {
-      return 'bg-n-slate-11';
-    }
-
-    // default (e.g., ringing)
-    return 'bg-n-teal-9 animate-pulse';
-  });
-
-  const listIconColor = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.IN_PROGRESS || s === CALL_STATUSES.RINGING) {
-      return 'text-n-teal-9';
-    }
-
-    if (isFailedStatus.value) {
-      return 'text-n-ruby-9';
-    }
-
-    if (isEndedStatus.value) {
-      return 'text-n-slate-11';
-    }
-
-    return 'text-n-teal-9';
-  });
-
-  return {
-    status,
-    labelKey,
-    subtextKey,
-    bubbleIconName,
-    bubbleIconBg,
-    listIconColor,
-  };
-}

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -18,7 +18,8 @@
     "CREATED_AT_LABEL": "Created",
     "NEW_MESSAGE": "New message",
     "CALL": "Call",
-    "CALL_UNDER_DEVELOPMENT": "Calling is under development",
+    "CALL_INITIATED": "Calling the contact…",
+    "CALL_FAILED": "Unable to start the call. Please try again.",
     "VOICE_INBOX_PICKER": {
       "TITLE": "Choose a voice inbox"
     },

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -282,6 +282,7 @@ export default {
         </ComposeConversation>
         <VoiceCallButton
           :phone="contact.phone_number"
+          :contact-id="contact.id"
           icon="i-ri-phone-fill"
           size="sm"
           :tooltip-label="$t('CONTACT_PANEL.CALL')"

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

@@ -302,4 +302,22 @@ export const actions = {
   clearContactFilters({ commit }) {
     commit(types.CLEAR_CONTACT_FILTERS);
   },
+
+  initiateCall: async ({ commit }, { contactId, inboxId }) => {
+    commit(types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true });
+    try {
+      const response = await ContactAPI.initiateCall(contactId, inboxId);
+      commit(types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false });
+      return response.data;
+    } catch (error) {
+      commit(types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false });
+      if (error.response?.data?.message) {
+        throw new ExceptionWithMessage(error.response.data.message);
+      } else if (error.response?.data?.error) {
+        throw new ExceptionWithMessage(error.response.data.error);
+      } else {
+        throw new Error(error);
+      }
+    }
+  },
 };

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

@@ -17,6 +17,7 @@ const state = {
     isDeleting: false,
     isExporting: false,
     isImporting: false,
+    isInitiatingCall: false,
   },
   sortOrder: [],
   appliedFilters: [],

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

@@ -359,4 +359,83 @@ describe('#actions', () => {
       ).rejects.toThrow(Error);
     });
   });
+
+  describe('#initiateCall', () => {
+    const contactId = 123;
+    const inboxId = 456;
+
+    it('sends correct mutations if API is success', async () => {
+      const mockResponse = {
+        data: {
+          conversation_id: 789,
+          status: 'initiated',
+        },
+      };
+      axios.post.mockResolvedValue(mockResponse);
+
+      const result = await actions.initiateCall(
+        { commit },
+        { contactId, inboxId }
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true }],
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false }],
+      ]);
+      expect(result).toEqual(mockResponse.data);
+    });
+
+    it('sends correct actions if API returns error with message', async () => {
+      const errorMessage = 'Failed to initiate call';
+      axios.post.mockRejectedValue({
+        response: {
+          data: {
+            message: errorMessage,
+          },
+        },
+      });
+
+      await expect(
+        actions.initiateCall({ commit }, { contactId, inboxId })
+      ).rejects.toThrow(ExceptionWithMessage);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true }],
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false }],
+      ]);
+    });
+
+    it('sends correct actions if API returns error with error field', async () => {
+      const errorMessage = 'Call initiation error';
+      axios.post.mockRejectedValue({
+        response: {
+          data: {
+            error: errorMessage,
+          },
+        },
+      });
+
+      await expect(
+        actions.initiateCall({ commit }, { contactId, inboxId })
+      ).rejects.toThrow(ExceptionWithMessage);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true }],
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false }],
+      ]);
+    });
+
+    it('sends correct actions if API returns generic error', async () => {
+      axios.post.mockRejectedValue({ message: 'Network error' });
+
+      await expect(
+        actions.initiateCall({ commit }, { contactId, inboxId })
+      ).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: true }],
+        [types.SET_CONTACT_UI_FLAG, { isInitiatingCall: false }],
+      ]);
+    });
+  });
 });