MT#59232 add blind transfer feature

Change-Id: Ieeaed08c6b442ada054a6bb4b6fbaa09cabe4a89

src/api/ngcp-call.js

@@ -158,6 +158,9 @@ export function callRegister ({ instanceId }) {
                     $incomingRtcSession.on('unhold', (unholdEvent) => {
                         callEvent.emit('incomingUnHold', unholdEvent)
                     })
+                    $incomingRtcSession.on('refer', (event) => {
+                        callEvent.emit('incomingRefer', event)
+                    })
                 }
             }
         })
@@ -209,7 +212,11 @@ export async function callStart ({ number }) {
                     } else {
                         callEvent.emit('outgoingUnHolded', event)
                     }
+                },
+                refer (event) {
+                    callEvent.emit('outgoingRefer', event)
                 }
+
             },
             mediaStream: $localMediaStream
         })
@@ -438,3 +445,28 @@ export function callToggleHold () {
         }
     }
 }
+/**
+ * Blind Transfer.
+ */
+export function callBlindTransfer (numberToTransfer) {
+    return new Promise((resolve, reject) => {
+        const rtcSession = callGetRtcSession()
+        const eventHandlers = {
+            requestFailed: function (e) {
+                console.log('Transfer failed')
+                reject(new Error('Transfer failed'))
+            },
+            requestSucceeded: function (e) {
+                console.log('Success', e)
+                resolve(true)
+            }
+        }
+        try {
+            rtcSession.refer(numberToTransfer, {
+                eventHandlers
+            })
+        } catch (err) {
+            reject(err)
+        }
+    })
+}

src/boot/ngcp-call.js

@@ -9,7 +9,8 @@ import {
     callMute,
     callMuteRemote,
     callUnMute,
-    callUnMuteRemote
+    callUnMuteRemote,
+    callStart
 } from 'src/api/ngcp-call'
 import { i18n } from 'boot/i18n'
 
@@ -109,4 +110,18 @@ export default async ({ app, store }) => {
         store.commit('call/toggleHold')
         store.commit('call/setLocalOnHold', false)
     })
+    callEvent.on('outgoingRefer', (event) => {
+        const number = event.request.refer_to._uri._user
+        store.commit('call/startCalling', number)
+        callStart({
+            number
+        })
+    })
+    callEvent.on('incomingRefer', (event) => {
+        const number = event.request.refer_to._uri._user
+        store.commit('call/startCalling', number)
+        callStart({
+            number
+        })
+    })
 }

src/components/CscCallDialpad.vue

@@ -32,8 +32,11 @@
                     />
                 </div>
             </div>
+            <div class="number-display">
+                {{ dialedNumber }}
+            </div>
             <div
-                v-for="(keyRow, rowIndex) in keys"
+                v-for="(keyRow, rowIndex) in transferCall ? keysTransfer : keys"
                 :key="rowIndex"
                 class="csc-dialpad-btn-group"
             >
@@ -46,9 +49,18 @@
                         color="default"
                         round
                         small
-                        @click="click(key)"
+                        @click="transferCall ? clickTransfer(key) : click(key)"
                     >
+                        <template v-if="typeof key === 'object'">
+                            <q-icon
+                                :name="key.icon"
+                                :color="key.icon === 'call' ? 'green' : ''"
+                                :size="key.icon === 'call' ? '40px' : ''"
+                            />
+                        </template>
+                        <template v-else>
                             {{ key }}
+                        </template>
                     </q-btn>
                 </div>
             </div>
@@ -58,6 +70,9 @@
 
 <script>
 import platformMixin from '../mixins/platform'
+import {
+    mapActions
+} from 'vuex'
 export default {
     name: 'CscCallDialpad',
     mixins: [
@@ -71,11 +86,17 @@ export default {
         showClearButton: {
             type: Boolean,
             default: false
+        },
+        transferCall: {
+            type: Boolean,
+            default: false
         }
     },
     emits: ['click', 'remove', 'remove-all'],
     data () {
-        return {}
+        return {
+            dialedNumber: ''
+        }
     },
     computed: {
         keys () {
@@ -86,17 +107,50 @@ export default {
                 ['*', '0', '#'],
                 ['+']
             ]
+        },
+        keysTransfer () {
+            return [
+                ['1', '2', '3'],
+                ['4', '5', '6'],
+                ['7', '8', '9'],
+                ['*', '0', '#'],
+                ['+'],
+                [{ icon: 'backspace' }, { icon: 'call' }, { icon: 'cancel' }]
+            ]
         }
     },
     methods: {
+        ...mapActions('call', [
+            'toggleTransfer'
+        ]),
         click (value) {
             this.$emit('click', value)
         },
+        clickTransfer (value) {
+            if (value.icon === 'call') {
+                this.transferCallMethod()
+            } else if (value.icon === 'cancel') {
+                this.dialedNumber = ''
+            } else if (value.icon === 'backspace') {
+                this.removeLastDigit()
+            } else {
+                this.dialedNumber += value 
+            }
+        },
         remove () {
             this.$emit('remove')
         },
         removeAll () {
             this.$emit('remove-all')
+        },
+        transferCallMethod () {
+            this.toggleTransfer(this.dialedNumber)
+            // this.$store.dispatch('call/end')
+        },
+        removeLastDigit () {
+            if (this.dialedNumber.length > 0) {
+                this.dialedNumber = this.dialedNumber.slice(0, -1)
+            }
         }
     }
 }
@@ -139,4 +193,11 @@ export default {
 
 .csc-dialpad-btn-group:last-child
     margin-bottom: 0
+
+.number-display
+    font-size: 24px
+    color: white
+    margin-bottom: 16px
+    text-align: center
+
 </style>

src/components/call/CscCall.vue

@@ -111,6 +111,7 @@
                     v-if="dialpadOpened"
                     :show-backspace-button="false"
                     :show-clear-button="false"
+                    :transfer-call="transferEnabled"
                     @click="dialpadClick"
                 />
             </div>
@@ -180,9 +181,21 @@
                         class="q-mr-sm"
                         round
                         size="large"
-                        :disable="islocalOnHold || isremoteOnHold"
+                        :disable="islocalOnHold || isremoteOnHold || transferEnabled"
                         @click="toggleHold()"
                     />
+                
+                    <q-btn
+                        v-if="isEstablished || isHolded && !(isMobile && minimized)"
+                        :color="colorTransfer"
+                        icon="phone_forwarded"
+                        class="q-mr-sm"
+                        text-color="dark"
+                        round
+                        size="large"
+                        :disable="islocalOnHold || isremoteOnHold"
+                        @click="initiateTransfer()"
+                    />
                 </div>
                 <q-btn
                     v-if="isHolded || isEstablished && !(isMobile && minimized)"
@@ -439,6 +452,10 @@ export default {
             type: Boolean,
             default: false
         },
+        transferEnabled: {
+            type: Boolean,
+            default: false
+        },
         localOnHold: {
             type: Boolean,
             default: false
@@ -464,7 +481,7 @@ export default {
             default: false
         }
     },
-    emits: ['toggle-screen', 'toggle-camera', 'minimize-call', 'maximize-call', 'click-dialpad', 'toggle-remote-volume', 'toggle-microphone', 'toggle-holdon', 'toggle-dialpad', 'close-call', 'end-call', 'accept-call', 'start-call'],
+    emits: ['toggle-screen', 'toggle-camera', 'minimize-call', 'maximize-call', 'click-dialpad', 'toggle-remote-volume', 'toggle-microphone', 'toggle-holdon', 'toggle-state-transfer', 'toggle-dialpad', 'close-call', 'end-call', 'accept-call', 'start-call'],
     data () {
         return {
             localMediaWrapperWidth: 0,
@@ -578,6 +595,13 @@ export default {
                 return 'grey-1'
             }
         },
+        colorTransfer () {
+            if (this.transferEnabled) {
+                return 'primary'
+            } else {
+                return 'grey-1'
+            }
+        },
         iconToggleRemoteVolume () {
             if (this.remoteVolumeEnabled) {
                 return 'volume_up'
@@ -586,7 +610,6 @@ export default {
             }
         },
         colorToggleRemoteVolume () {
-            console.log(this.platformInfo)
             if (this.remoteVolumeEnabled) {
                 return 'primary'
             } else {
@@ -730,6 +753,11 @@ export default {
         },
         toggleScreen () {
             this.$emit('toggle-screen')
+        },
+        initiateTransfer () {
+            this.$emit('toggle-state-transfer')
+            this.toggleDialpad()
+            this.toggleHold()
         }
     }
 }

src/layouts/CscLayoutMain.vue

@@ -179,6 +179,7 @@
             :camera-enabled="cameraEnabled"
             :screen-enabled="screenEnabled"
             :hold-enabled="holdEnabled"
+            :transfer-enabled="transferEnabled"
             :local-on-hold="localOnHold"
             :remote-on-hold="remoteOnHold"
             :remote-volume-enabled="remoteAudioEnabled"
@@ -190,6 +191,7 @@
             @close-call="closeCall"
             @toggle-microphone="toggleMicrophone"
             @toggle-holdon="toggleHoldon"
+            @toggle-state-transfer="toggleStateTransfer"
             @toggle-camera="toggleCamera"
             @toggle-screen="toggleScreen"
             @toggle-remote-volume="toggleRemoteAudio"
@@ -294,6 +296,7 @@ export default {
             'cameraEnabled',
             'screenEnabled',
             'holdEnabled',
+            'transferEnabled',
             'microphoneEnabled',
             'remoteAudioEnabled',
             'maximized',
@@ -537,6 +540,7 @@ export default {
             'toggleScreen',
             'toggleMicrophone',
             'toggleHoldon',
+            'toggleStateTransfer',
             'toggleRemoteAudio'
         ]),
         layoutResized () {

src/store/call/actions.js

@@ -9,6 +9,7 @@ import {
     callHasLocalVideo,
     callToggleMicrophone,
     callToggleHold,
+    callBlindTransfer,
     callIsMuted,
     callSendDTMF,
     callToggleRemoteAudio,
@@ -58,6 +59,19 @@ export default {
         callToggleHold()
         context.commit('toggleHold')
     },
+    async toggleTransfer (context, number) {
+        try {
+            const result = await callBlindTransfer(number)
+            if (result) {
+                context.dispatch('end')
+            }
+        } catch (error) {
+            console.error(error.message)
+        }
+    },    
+    async toggleStateTransfer (context) {
+        context.commit('toggleTransfer')
+    },
     toggleRemoteAudio (context) {
         callToggleRemoteAudio()
         context.commit('toggleRemoteAudio', !callIsRemoteMuted())

src/store/call/mutations.js

@@ -61,6 +61,7 @@ export default {
             state.holdEnabled = false
             state.remoteOnHold = false
             state.localOnHold = false
+            state.transferEnabled = false
             state.endedReason = reason
         }
         state.dialpadOpened = false
@@ -123,6 +124,14 @@ export default {
     
     setRemoteOnHold (state, value) {
         state.remoteOnHold = value
+    },
+    toggleTransfer (state) {
+        state.transferEnabled = !state.transferEnabled
+        if (state.transferEnabled) {
+            state.transferEnabled = true
+        } else {
+            state.transferEnabled = false
+        }
     }
     
 }

src/store/call/state.js

@@ -16,6 +16,7 @@ export default {
     callee: false,
     microphoneEnabled: true,
     holdEnabled: false,
+    transferEnabled: false,
     cameraEnabled: false,
     screenEnabled: false,
     remoteAudioEnabled: true,