TT#33412 Call: As a Customer, I want to get a installation hint if chrome extension in not installed

Change-Id: I817ecd34208e961ed6b943b02131dc3c7303f952

src/components/CscCall.vue

@@ -29,6 +29,11 @@
             </q-card-title>
             <q-card-main>
 
+                <q-alert v-if="desktopSharingInstall" v-model="desktopSharingInstall"
+                         color="warning" :actions="desktopSharingAlertActions">
+                    {{ $t('call.desktopSharingNotInstalled') }}
+                </q-alert>
+
                 <div class="csc-call-info">
                     <q-field v-show="isPreparing" :helper="$t('call.inputNumber')" :count="64" dark
                              :error="validationEnabled && phoneNumberError" :error-label="$t('call.inputValidNumber')">
@@ -78,7 +83,7 @@
     import { mapState, mapGetters } from 'vuex'
     import CscMedia from './CscMedia'
     import { QLayout, QCard, QCardTitle, QCardSeparator, QCardMain, QField, QInput,
-        QCardActions, QBtn, QIcon, Loading, Alert, QSpinnerRings, Dialog, Platform } from 'quasar-framework'
+        QCardActions, QBtn, QIcon, Loading, Alert, QSpinnerRings, Dialog, Platform, QAlert } from 'quasar-framework'
     import { normalizeNumber, rawNumber } from '../filters/number-format'
     import numberFormat from '../filters/number-format'
     import { showCallNotification } from '../helpers/ui'
@@ -106,7 +111,8 @@
             QIcon,
             QSpinnerRings,
             CscMedia,
-            Dialog
+            Dialog,
+            QAlert
         },
         methods: {
             focusNumberInput() {
@@ -280,10 +286,29 @@
                 'remoteMediaType',
                 'isCaller',
                 'isCallee',
-                'callState'
+                'callState',
+                'desktopSharingInstall'
             ]),
             isMobile() {
                 return Platform.is.mobile;
+            },
+            desktopSharingAlertActions() {
+                var self = this;
+                return [
+                    {
+                        label: 'Install',
+                        handler () {
+                            self.$store.commit('call/desktopSharingInstallReset');
+                            window.open('https://chrome.google.com/webstore/detail/sipwise-desktop-sharing/pijbeibohoabifpookfeljlmkpedpcne');
+                        }
+                    },
+                    {
+                        label: 'Cancel',
+                        handler () {
+                            self.$store.commit('call/desktopSharingInstallReset');
+                        }
+                    }
+                ]
             }
         },
         watch: {
@@ -370,4 +395,8 @@
         z-index: 10;
     }
 
+    .csc-call .q-alert-container {
+        margin-bottom: 16px;
+    }
+
 </style>

src/components/pages/Home.vue

@@ -146,7 +146,7 @@
     }
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 @import '~variables'
     .q-card-actions
         font-size 22px

src/locales/en.json

@@ -206,7 +206,8 @@
         "notificationTitle": "Incoming call from {number}",
         "notificationBlocked": "You have blocked incoming call notifications.",
         "notificationFailed": "Could not enable incoming call notifications.",
-        "notificationNotSupported": "Incoming call notifications are not supported."
+        "notificationNotSupported": "Incoming call notifications are not supported.",
+        "desktopSharingNotInstalled": "Desktop sharing extension for chrome is not installed."
     },
     "pbxConfig": {
         "seat": "Seat",

src/store/call.js

@@ -32,7 +32,8 @@ export default {
         videoEnabled: true,
         muted: false,
         caller: false,
-        callee: false
+        callee: false,
+        desktopSharingInstall: false
     },
     getters: {
         getNumber(state, getters) {
@@ -127,6 +128,9 @@ export default {
         },
         callState(state) {
             return state.callState;
+        },
+        desktopSharingInstall(state) {
+            return state.desktopSharingInstall;
         }
     },
     mutations: {
@@ -209,6 +213,12 @@ export default {
         },
         unmute(state) {
             state.muted = false;
+        },
+        desktopSharingInstallReset(state)  {
+            state.desktopSharingInstall = false;
+        },
+        desktopSharingInstall(state)  {
+            state.desktopSharingInstall = true;
         }
     },
     actions: {
@@ -242,6 +252,7 @@ export default {
             });
         },
         start(context, options) {
+            context.commit('desktopSharingInstallReset');
             context.commit('layout/showRight', null, { root: true });
             context.commit('startCalling', { number: options.number });
             Promise.resolve().then(()=>{
@@ -254,18 +265,28 @@ export default {
                     context.commit('stopRinging');
                 }).start(options.number, localMediaStream);
             }).catch((err)=>{
-                context.commit('endCall', err.name);
-                console.error(err);
                 Vue.call.end();
+                if(err.message === 'plugin not detected') {
+                    context.commit('desktopSharingInstall');
+                    context.commit('endCall', 'missingDesktopSharingExtension');
+                } else {
+                    context.commit('endCall', err.name);
+                }
             });
         },
         accept(context, localMedia) {
+            context.commit('desktopSharingInstallReset');
             Vue.call.createLocalMedia(localMedia).then((localMediaStream)=>{
                 Vue.call.accept(localMediaStream);
                 context.commit('localMediaSuccess', localMediaStream);
             }).catch((err)=>{
                 Vue.call.end();
-                context.commit('endCall', 'localMediaError');
+                if(err.message === 'plugin not detected') {
+                    context.commit('desktopSharingInstall');
+                    context.commit('endCall', 'missingDesktopSharingExtension');
+                } else {
+                    context.commit('endCall', err.name);
+                }
             });
         },
         hangUp(context) {