TT#83201 As a Customer, I want to see the RTCEngine related features if capability is enabled

Change-Id: Ice15447cf4b80122c0f241a884c7efcc3cc2739e

src/api/user.js

@@ -39,10 +39,10 @@ export function getUserData(id) {
             getCapabilities(id),
             getFaxServerSettingsById(id)
         ]).then((results)=>{
+            results[1].faxactive = results[2]
             resolve({
                 subscriber: results[0],
-                capabilities: results[1],
+                capabilities: results[1]
-                faxactive: results[2]
             });
         }).catch((err)=>{
             reject(err);
@@ -75,6 +75,8 @@ export function getCapabilities() {
                     capabilities[capability.name] = capability.enabled;
                 });
             }
+            // Todo: Remove if capability is available in the API
+            capabilities.csc_rtcengine_ui = true
             resolve(capabilities);
         }).catch((err)=>{
             reject(err);

src/components/layouts/Default.vue

@@ -191,7 +191,8 @@
         enableIncomingCallNotifications
     } from '../../helpers/ui'
     import {
-        mapGetters
+        mapGetters,
+        mapActions
     } from 'vuex'
     import CscCall from '../call/CscCall'
     import CscSendFax from '../CscSendFax'
@@ -315,7 +316,8 @@
                 'userDataSucceeded',
                 'changeSessionLocaleState',
                 'locale',
-                'languageLabels'
+                'languageLabels',
+                'isRtcEngineUiVisible'
             ]),
             ...mapGetters('communication', [
                 'createFaxState',
@@ -374,6 +376,9 @@
             }
         },
         methods: {
+            ...mapActions('user', [
+                'forwardHome'
+            ]),
             showSendFax() {
                 this.$refs.sendFax.showModal();
             },
@@ -480,15 +485,10 @@
                 }
             },
             isCallEnabled(value) {
-                if(value) {
+                if(value && this.isRtcEngineUiVisible) {
                     showToast(this.$i18n.t('toasts.callAvailable'));
                 }
             },
-            isConferencingEnabled(value) {
-                if(value) {
-                    // showToast(this.$i18n.t('toasts.conferencingAvailable'));
-                }
-            },
             createFaxState(state) {
                 if (state === 'requesting') {
                     startLoading();
@@ -503,7 +503,7 @@
                     this.hideSendFax();
                 }
             },
-            $route () {
+            $route (route) {
                 if(!this.isHome) {
                     this.$store.commit('call/minimize');
                 }
@@ -513,6 +513,9 @@
                     });
                 }
                 window.scrollTo(0, 0);
+                if (route.path === '/user/home') {
+                    this.forwardHome()
+                }
             },
             changeSessionLocaleState(state) {
                 if (state === 'succeeded') {

src/components/layouts/MainMenu.vue

@@ -6,6 +6,7 @@
         inset-delimiter
     >
         <q-side-link
+            v-if="isRtcEngineUiVisible"
             item
             to="/user/home"
         >
@@ -18,6 +19,7 @@
             />
         </q-side-link>
         <q-side-link
+            v-if="isRtcEngineUiVisible"
             item
             to="/conference"
         >
@@ -230,6 +232,9 @@
 </template>
 
 <script>
+    import {
+        mapGetters
+    } from 'vuex'
     import {
         QList,
         QSideLink,
@@ -256,7 +261,12 @@
             'isCallBlocking',
             'isPbxAdmin',
             'isPbxConfiguration'
-        ]
+        ],
+        computed: {
+            ...mapGetters('user', [
+                'isRtcEngineUiVisible'
+            ])
+        }
     }
 </script>
 

src/store/user.js

@@ -1,5 +1,6 @@
 'use strict';
 
+import router from '../router'
 import Vue from 'vue';
 import {
     i18n
@@ -88,6 +89,9 @@ export default {
         hasRtcEngineCapabilityEnabled(state, getters) {
             return getters.hasRtcEngineCapability && state.capabilities.rtcengine === true;
         },
+        isRtcEngineUiVisible(state) {
+            return (state.capabilities !== null && state.capabilities.csc_rtcengine_ui === true);
+        },
         getSubscriberId(state) {
             return state.subscriberId;
         },
@@ -253,37 +257,38 @@ export default {
             localStorage.removeItem('subscriberId');
             document.location.href = document.location.pathname;
         },
-        initUser(context) {
+        async initUser(context) {
             if(!context.getters.userDataSucceeded) {
-                context.commit('userDataRequesting');
+                try {
-                getUserData(localStorage.getItem('subscriberId')).then((result) => {
+                    context.commit('userDataRequesting');
-                    let capabilities = Object.assign({
+                    const userData = await getUserData(localStorage.getItem('subscriberId'))
-                            faxactive: result.faxactive
+                    context.commit('userDataSucceeded', userData);
-                        },
-                        result.capabilities
-                    );
-                    context.commit('userDataSucceeded', {
-                        subscriber: result.subscriber,
-                        capabilities: capabilities
-                    });
                     if(_.isNumber(context.getters.jwtTTL)) {
                         setTimeout(()=>{
                             context.dispatch('logout');
                         }, context.getters.jwtTTL * 1000);
                     }
-                    if(context.getters.hasRtcEngineCapabilityEnabled) {
+                    if(context.getters.hasRtcEngineCapabilityEnabled && context.getters.isRtcEngineUiVisible) {
                         context.commit('rtcEngineInitRequesting');
                         Vue.$rtcEngine.setNgcpApiJwt(localStorage.getItem('jwt'));
-                        Vue.$rtcEngine.initialize().then(()=>{
+                        try {
+                            await Vue.$rtcEngine.initialize()
                             context.commit('rtcEngineInitSucceeded');
-                        }).catch((err)=>{
+                        }
+                        catch (err) {
+                            console.debug(err);
                             context.commit('rtcEngineInitFailed', err.message);
-                        });
+                        }
                     }
-                }).catch((err)=>{
+                    await context.dispatch('forwardHome')
+                }
+                catch(err) {
                     console.debug(err);
-                    context.dispatch('logout');
+                    await context.dispatch('logout');
-                });
+                }
+            }
+            else {
+                await context.dispatch('forwardHome')
             }
         },
         changeSessionLanguage(context, locale) {
@@ -306,6 +311,11 @@ export default {
             }).catch((err)=>{
                 context.commit('userPasswordFailed', err.message);
             });
+        },
+        async forwardHome(context) {
+            if (context.rootState.route.path === '/user/home' && !context.getters.isRtcEngineUiVisible) {
+                await router.push({path:'/user/conversations'})
+            }
         }
     }
 };