From 7fe94dc1a2c79c0201530dfefbf8a1336a31337a Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 19 Aug 2025 12:12:01 +0200
Subject: [PATCH] feat(voice): Call button on Contacts with inbox picker
 (#12218)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../Contacts/ContactsDetailsLayout.vue        |  6 ++
 .../Contacts/VoiceCallButton.vue              | 91 +++++++++++++++++++
 .../dashboard/i18n/locale/en/contact.json     |  5 +
 .../conversation/contact/ContactInfo.vue      | 10 ++
 4 files changed, 112 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
index 51d306311..4c7b9249e 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/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
diff --git a/app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue b/app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue
new file mode 100644
index 000000000..98e56ff8f
--- /dev/null
+++ b/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>
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 4f0a27cae..a5c9549f1 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 327bc95ae..bfdb5d68a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/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"