feat(voice): Call button on Contacts with inbox picker (#12218)

## Description
This introduces a reusable Call button used in the Contacts details
header (between Block contact and Send message) and
in the conversation contact panel. The button shows only when the
account has at least one Voice inbox and the contact
has a phone number. If multiple Voice inboxes are present, clicking
opens a picker modal; otherwise, a “Calling is under
development” toast is shown

> Actual wiring to functionality will available in follow up PRs

references: #11602 , #11481 

## Screens 

<img width="250" alt="Screenshot 2025-08-18 at 8 33 02 PM"
src="https://github.com/user-attachments/assets/d7a09a9d-8eff-4461-a75f-27854540c2a0"
/>
<img width="250" alt="Screenshot 2025-08-18 at 8 32 31 PM"
src="https://github.com/user-attachments/assets/682ae66e-dd5f-4750-9c30-0a210e120250"
/>
<img width="250" alt="Screenshot 2025-08-18 at 8 32 40 PM"
src="https://github.com/user-attachments/assets/7de0d753-eefc-4b7f-942b-ecca1964fcd7"
/>


## Test Cases

- Enable voice feature and create inboxes and test the cases for both
contact details view and contact card view in conversation
  - Details: 0 Voice inboxes → no Call button.
- Details: 1+ Voice inboxes, no phone number for contact → no Call
button.
- Details: 1 Voice inbox + phone number for contact → button visible;
click → toast.
- Details: >1 Voice inboxes + phone number for contact → click → modal →
choose → toast.

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

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

@@ -7,6 +7,7 @@ import { vOnClickOutside } from '@vueuse/components';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
+import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
 
 const props = defineProps({
   selectedContact: {
@@ -99,6 +100,11 @@ const closeMobileSidebar = () => {
                 :disabled="isUpdating"
                 @click="toggleBlock"
               />
+              <VoiceCallButton
+                :phone="selectedContact?.phoneNumber"
+                :label="$t('CONTACT_PANEL.CALL')"
+                size="sm"
+              />
               <ComposeConversation :contact-id="contactId">
                 <template #trigger="{ toggle }">
                   <Button

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

@@ -0,0 +1,91 @@
+<script setup>
+import { computed, ref, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { useAlert } from 'dashboard/composables';
+
+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: '' },
+  label: { type: String, default: '' },
+  icon: { type: [String, Object, Function], default: '' },
+  size: { type: String, default: 'sm' },
+  tooltipLabel: { type: String, default: '' },
+});
+
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+
+const { t } = useI18n();
+
+const inboxesList = useMapGetter('inboxes/getInboxes');
+const voiceInboxes = computed(() =>
+  (inboxesList.value || []).filter(
+    inbox => inbox.channel_type === INBOX_TYPES.VOICE
+  )
+);
+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 onClick = () => {
+  if (voiceInboxes.value.length > 1) {
+    dialogRef.value?.open();
+    return;
+  }
+  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
+};
+
+const onPickInbox = () => {
+  // Placeholder until actual call wiring happens
+  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
+  dialogRef.value?.close();
+};
+</script>
+
+<template>
+  <span class="contents">
+    <Button
+      v-if="shouldRender"
+      v-tooltip.top-end="tooltipLabel || null"
+      v-bind="attrs"
+      :label="label"
+      :icon="icon"
+      :size="size"
+      @click="onClick"
+    />
+
+    <Dialog
+      v-if="shouldRender && voiceInboxes.length > 1"
+      ref="dialogRef"
+      :title="$t('CONTACT_PANEL.VOICE_INBOX_PICKER.TITLE')"
+      show-cancel-button
+      :show-confirm-button="false"
+      width="md"
+    >
+      <div class="flex flex-col gap-2">
+        <button
+          v-for="inbox in voiceInboxes"
+          :key="inbox.id"
+          type="button"
+          class="flex items-center justify-between w-full px-4 py-2 text-left rounded-lg hover:bg-n-alpha-2"
+          @click="onPickInbox(inbox)"
+        >
+          <div class="flex items-center gap-2">
+            <span class="i-ri-phone-fill text-n-slate-10" />
+            <span class="text-sm text-n-slate-12">{{ inbox.name }}</span>
+          </div>
+          <span v-if="inbox.phone_number" class="text-xs text-n-slate-10">
+            {{ inbox.phone_number }}
+          </span>
+        </button>
+      </div>
+    </Dialog>
+  </span>
+</template>

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

@@ -17,6 +17,11 @@
     "IP_ADDRESS": "IP Address",
     "CREATED_AT_LABEL": "Created",
     "NEW_MESSAGE": "New message",
+    "CALL": "Call",
+    "CALL_UNDER_DEVELOPMENT": "Calling is under development",
+    "VOICE_INBOX_PICKER": {
+      "TITLE": "Choose a voice inbox"
+    },
     "CONVERSATIONS": {
       "NO_RECORDS_FOUND": "There are no previous conversations associated to this contact.",
       "TITLE": "Previous Conversations"

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

@@ -11,6 +11,7 @@ import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
 
 import {
   isAConversationRoute,
@@ -28,6 +29,7 @@ export default {
     ComposeConversation,
     SocialIcons,
     ContactMergeModal,
+    VoiceCallButton,
   },
   props: {
     contact: {
@@ -278,6 +280,14 @@ export default {
             />
           </template>
         </ComposeConversation>
+        <VoiceCallButton
+          :phone="contact.phone_number"
+          icon="i-ri-phone-fill"
+          size="sm"
+          :tooltip-label="$t('CONTACT_PANEL.CALL')"
+          slate
+          faded
+        />
         <NextButton
           v-tooltip.top-end="$t('EDIT_CONTACT.BUTTON_LABEL')"
           icon="i-ph-pencil-simple"