From 837de61280548ffc9ee5f863f155c8a133ad817c Mon Sep 17 00:00:00 2001
From: Debora Crescenzo <dcrescenzo@sipwise.com>
Date: Wed, 9 Jul 2025 20:32:41 +0100
Subject: [PATCH] MT#63089 Match the calling/called number into the phonebook

For outgoing or incoming calls show the
name saved in the phonebook (if it exists).
Note when retrieving phonebook entries
we always return the first entry.
As a result of that:
- if there are duplicates we only show
  one name.
- if there isn't an exact match, as per
today, it won't find any entries.

Change-Id: I5c4307b8e22e6bc65f8efe159867d462d72f0d0d
---
 src/api/call.js                 |  8 +++++++
 src/boot/ngcp-call.js           |  5 ++---
 src/components/call/CscCall.vue | 40 ++++++++++++++++++++++-----------
 src/layouts/CscLayoutMain.vue   |  4 +++-
 src/store/call/actions.js       | 19 ++++++++++++++++
 src/store/call/mutations.js     |  7 ++++++
 src/store/call/state.js         |  1 +
 7 files changed, 67 insertions(+), 17 deletions(-)
 create mode 100644 src/api/call.js

diff --git a/src/api/call.js b/src/api/call.js
new file mode 100644
index 00000000..dc8d44f2
--- /dev/null
+++ b/src/api/call.js
@@ -0,0 +1,8 @@
+import { getList } from 'src/api/common'
+
+export async function fetchPhonebookEntries (number) {
+    return getList({
+        resource: 'subscriberphonebookentries',
+        params: { number }
+    })
+}
diff --git a/src/boot/ngcp-call.js b/src/boot/ngcp-call.js
index e621acbc..476283a7 100644
--- a/src/boot/ngcp-call.js
+++ b/src/boot/ngcp-call.js
@@ -53,9 +53,8 @@ export default async ({ app, store }) => {
     callEvent.on('outgoingEnded', callFailed)
     callEvent.on('incomingEnded', callFailed)
     callEvent.on('incoming', (session) => {
-        store.commit('call/incomingCall', {
-            number: _.get(session, 'remote_identity.uri.user', 'Unknown')
-        })
+        const number = _.get(session, 'remote_identity.uri.user', 'Unknown')
+        store.dispatch('call/processIncomingCall', number)
     })
     callEvent.on('localStream', (stream) => {
         if (store.state.call.microphoneEnabled) {
diff --git a/src/components/call/CscCall.vue b/src/components/call/CscCall.vue
index 641827ea..92dd9afe 100644
--- a/src/components/call/CscCall.vue
+++ b/src/components/call/CscCall.vue
@@ -47,21 +47,21 @@
                             <span
                                 v-if="isInitiating"
                             >
-                                {{ $t('Calling {number}...', {number: callNumberFormatted || callNumberQuery }) }}</span>
+                                {{ $t('Calling {number}...', { number: callDisplayName}) }}</span>
                             <span
                                 v-else-if="isRinging"
                             >
-                                {{ $t('Ringing at {number}...', {number: callNumberFormatted || callNumberQuery }) }}</span>
+                                {{ $t('Ringing at {number}...', { number: callDisplayName}) }}</span>
                             <span
                                 v-else-if="isIncoming"
                             >
-                                {{ $t('Incoming call from {number}...', {number: callNumberFormatted || callNumberQuery }) }}</span>
+                                {{ $t('Incoming call from {number}...', { number: callDisplayName}) }}</span>
                         </div>
                         <div
                             v-else-if="isEnded"
                             class="csc-call-error"
                         >
-                            {{ $filters.startCase(endedReason) }} ({{ callNumberFormatted || callNumberQuery }})
+                            {{ $filters.startCase(endedReason) }} ({{ callDisplayName }})
                         </div>
                     </div>
                 </div>
@@ -86,7 +86,7 @@
                         size="24px"
                     />
                     <div>
-                        {{ $t('In call with {number}', {number: callNumberFormatted || callNumberQuery }) }}
+                        {{ $t('In call with {number}', { number: callDisplayName}) }}
                     </div>
                     <q-btn
                         v-if="!dialpadOpened"
@@ -181,7 +181,7 @@
                         class="q-mr-sm"
                         round
                         size="large"
-                        :disable="islocalOnHold || isremoteOnHold || transferEnabled"
+                        :disable="isLocalOnHold || isRemoteOnHold || transferEnabled"
                         @click="toggleHold()"
                     />
 
@@ -193,7 +193,7 @@
                         text-color="dark"
                         round
                         size="large"
-                        :disable="islocalOnHold || isremoteOnHold"
+                        :disable="isLocalOnHold || isRemoteOnHold"
                         @click="initiateTransfer()"
                     />
                 </div>
@@ -323,7 +323,7 @@
                         <div
                             class="csc-call-info-number"
                         >
-                            {{ callNumberFormatted || callNumberQuery }}
+                            {{ callDisplayName }}
                         </div>
                     </div>
                 </div>
@@ -339,7 +339,7 @@
                     <div
                         class="csc-call-info-number"
                     >
-                        {{ callNumberFormatted || callNumberQuery }}
+                        {{ callDisplayName }}
                     </div>
                 </div>
             </div>
@@ -367,7 +367,7 @@
 <script>
 import CscCallDialpad from 'components/CscCallDialpad'
 import CscMedia from 'components/CscMedia'
-import numberFormat, { normalizeDestination } from 'src/filters/number-format'
+import { normalizeDestination } from 'src/filters/number-format'
 import { showCallNotification } from 'src/helpers/ui'
 import platformMixin from 'src/mixins/platform'
 import { CallStateTitle } from 'src/store/call/common'
@@ -391,6 +391,10 @@ export default {
             type: String,
             required: true
         },
+        phonebookEntryName: {
+            type: String,
+            required: true
+        },
         numberInput: {
             type: String,
             required: true
@@ -548,6 +552,9 @@ export default {
         callNumberQuery () {
             return normalizeDestination(this.$route.query.number)
         },
+        callDisplayName () {
+            return this.phonebookEntryName || this.callNumberFormatted || this.callNumberQuery
+        },
         iconToggleMicrophone () {
             if (this.microphoneEnabled) {
                 return 'mic'
@@ -608,10 +615,10 @@ export default {
         isNumberInputDefined () {
             return this.numberInput !== '' && this.numberInput !== null
         },
-        islocalOnHold () {
+        isLocalOnHold () {
             return this.localOnHold
         },
-        isremoteOnHold () {
+        isRemoteOnHold () {
             return this.remoteOnHold
         }
     },
@@ -620,12 +627,19 @@ export default {
             if (state === 'ringing' || state === 'incoming') {
                 this.playCallSound()
                 if (state === 'incoming') {
-                    showCallNotification(numberFormat(this.callNumber))
+                    showCallNotification(this.callDisplayName)
                 }
             } else {
                 this.stopCallSound()
             }
         },
+        phonebookEntryName (name, oldName) {
+            if (oldName !== name) {
+                this.$nextTick(() => {
+                    showCallNotification(name)
+                })
+            }
+        },
         closed (closed) {
             if (closed && this.$refs.startButton) {
                 this.$refs.startButton.hide()
diff --git a/src/layouts/CscLayoutMain.vue b/src/layouts/CscLayoutMain.vue
index 77331b45..4e1a25df 100644
--- a/src/layouts/CscLayoutMain.vue
+++ b/src/layouts/CscLayoutMain.vue
@@ -190,6 +190,7 @@
             ref="call"
             :call-state="callState"
             :call-number="number"
+            :phonebook-entry-name="phonebookEntryName"
             :number-input="numberInput"
             :ended-reason="endedReason"
             :full-view="isFullView"
@@ -313,6 +314,7 @@ export default {
             'callState',
             'number',
             'numberInput',
+            'phonebookEntryName',
             'endedReason',
             'localMediaStream',
             'remoteMediaStream',
@@ -445,7 +447,7 @@ export default {
             return ''
         },
         callNumberFormatted () {
-            return normalizeDestination(this.number)
+            return this.phonebookEntryName || normalizeDestination(this.number)
         },
         callEndedReasonFormatted () {
             return startCase(this.endedReason)
diff --git a/src/store/call/actions.js b/src/store/call/actions.js
index 3dd628d2..8f0d97c8 100644
--- a/src/store/call/actions.js
+++ b/src/store/call/actions.js
@@ -1,4 +1,5 @@
 import { i18n } from 'boot/i18n'
+import { fetchPhonebookEntries } from 'src/api/call'
 import {
     callAccept,
     callAddCamera,
@@ -26,6 +27,7 @@ let errorVisibilityTimer = null
 export default {
     async start (context, localMedia) {
         const number = context.getters.callNumberInput.replaceAll('(', '').replaceAll(')', '').replaceAll(' ', '').replaceAll('-', '')
+        context.dispatch('fetchPhonebookEntryName', number)
         context.commit('startCalling', number)
         const isStarted = await callStart({
             number,
@@ -38,6 +40,23 @@ export default {
             showGlobalError(i18n.global.t('No microphone authorized.'))
         }
     },
+    async fetchPhonebookEntryName (context, number) {
+        try {
+            const phoneBookEntryArray = await fetchPhonebookEntries(number)
+            const phoneBookEntry = phoneBookEntryArray?.items[0] || null
+            if (phoneBookEntry) {
+                context.commit('fetchPhonebookEntrySuccess', phoneBookEntry.name)
+            }
+        } catch (err) {
+            context.commit('fetchPhonebookEntryFailure')
+        }
+    },
+    async processIncomingCall (context, number) {
+        await context.dispatch('fetchPhonebookEntryName', number)
+        context.commit('incomingCall', {
+            number
+        })
+    },
     async accept (context, localMedia) {
         await callAccept({
             localMedia
diff --git a/src/store/call/mutations.js b/src/store/call/mutations.js
index 45fb22c5..80f6327b 100644
--- a/src/store/call/mutations.js
+++ b/src/store/call/mutations.js
@@ -70,6 +70,7 @@ export default {
         state.remoteVideoEnabled = false
         state.localMediaStream = null
         state.remoteMediaStream = null
+        state.newPhonebookEntryName = null
     },
     toggleMicrophone (state, enabled) {
         state.microphoneEnabled = enabled
@@ -129,5 +130,11 @@ export default {
         } else {
             state.transferEnabled = false
         }
+    },
+    fetchPhonebookEntrySuccess (state, phonebookEntryName) {
+        state.phonebookEntryName = phonebookEntryName
+    },
+    fetchPhonebookEntryFailure (state) {
+        state.phonebookEntryName = null
     }
 }
diff --git a/src/store/call/state.js b/src/store/call/state.js
index 65751f3c..8e1258a1 100644
--- a/src/store/call/state.js
+++ b/src/store/call/state.js
@@ -6,6 +6,7 @@ export default {
     endedReason: null,
     callState: CallState.input,
     number: '',
+    phonebookEntryName: null,
     numberInput: '',
     localMediaStream: null,
     remoteMediaStream: null,