TT#127757 If mobile app badge configs has the same name, then show the name once

Change-Id: I7d7a2786089f51e265975fc9abb81bb1620d4b26

src/components/AppBadgeApple.vue

@@ -9,7 +9,7 @@
             <img
                 style="width: 100%"
                 src="apple-store-badge.svg"
-            />
+            >
         </a>
     </div>
 </template>

src/components/AppBadgeGoogle.vue

@@ -9,7 +9,7 @@
             <img
                 style="width: 100%"
                 src="google-play-badge.png"
-            />
+            >
         </a>
     </div>
 </template>

src/components/AuiMobileAppBadges.vue

@@ -0,0 +1,81 @@
+<template>
+    <q-list
+        v-if="appUrlAndroid || appUrlApple"
+        dense
+    >
+        <q-item-label
+            v-if="appUrlAndroid && appUrlApple && appNameAndroid !== appNameApple"
+            header
+        >
+            {{ $t('Apps') }}
+        </q-item-label>
+        <q-item-label
+            v-else
+            header
+        >
+            {{ appName }}
+        </q-item-label>
+        <q-item
+            v-if="appUrlApple"
+        >
+            <q-item-section>
+                <q-item-label
+                    v-if="appUrlAndroid && appUrlApple && appNameAndroid !== appNameApple"
+                    class="q-pa-sm"
+                >
+                    {{ appNameApple }}
+                </q-item-label>
+                <app-badge-apple
+                    class="app-badge"
+                    :href="appUrlApple"
+                />
+            </q-item-section>
+        </q-item>
+        <q-item
+            v-if="appUrlAndroid"
+        >
+            <q-item-section>
+                <q-item-label
+                    v-if="appUrlAndroid && appUrlApple && appNameAndroid !== appNameApple"
+                    class="q-pa-sm"
+                >
+                    {{ appNameAndroid }}
+                </q-item-label>
+                <app-badge-google
+                    class="app-badge"
+                    :href="appUrlAndroid"
+                />
+            </q-item-section>
+        </q-item>
+    </q-list>
+</template>
+
+<script>
+import AppBadgeGoogle from 'components/AppBadgeGoogle'
+import AppBadgeApple from 'components/AppBadgeApple'
+import { mapState } from 'vuex'
+export default {
+    name: 'AuiMobileAppBadges',
+    components: { AppBadgeApple, AppBadgeGoogle },
+    computed: {
+        ...mapState('user', [
+            'platformInfo'
+        ]),
+        appNameAndroid () {
+            return this.platformInfo?.app?.android?.name
+        },
+        appNameApple () {
+            return this.platformInfo?.app?.apple?.name
+        },
+        appUrlAndroid () {
+            return this.platformInfo?.app?.android?.url
+        },
+        appUrlApple () {
+            return this.platformInfo?.app?.apple?.url
+        },
+        appName () {
+            return this.appNameAndroid || this.appNameApple
+        }
+    }
+}
+</script>

src/layouts/CscLayoutMain.vue

@@ -153,46 +153,7 @@
                 :is-pbx-admin="isPbxAdmin"
                 :is-pbx-configuration="isPbxConfiguration"
             />
-            <q-list
+            <aui-mobile-app-badges />
-                v-if="platformInfo.app.apple || platformInfo.app.android"
-                dense
-            >
-                <q-item-label
-                    header
-                >
-                    {{ $t('Apps') }}
-                </q-item-label>
-                <q-item
-                    v-if="platformInfo.app.apple"
-                >
-                    <q-item-section>
-                        <q-item-label
-                            class="q-pa-sm"
-                        >
-                            {{ platformInfo.app.apple.name }}
-                        </q-item-label>
-                        <app-badge-apple
-                            class="app-badge"
-                            :href="platformInfo.app.apple.url"
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item
-                    v-if="platformInfo.app.android"
-                >
-                    <q-item-section>
-                        <q-item-label
-                            class="q-pa-sm"
-                        >
-                            {{ platformInfo.app.android.name }}
-                        </q-item-label>
-                        <app-badge-google
-                            class="app-badge"
-                            :href="platformInfo.app.android.url"
-                        />
-                    </q-item-section>
-                </q-item>
-            </q-list>
         </q-drawer>
         <q-page-container
             id="csc-page-main"
@@ -264,14 +225,12 @@ import {
 import CscMainMenuTop from 'components/CscMainMenuTop'
 import CscPopupMenu from 'components/CscPopupMenu'
 import CscPopupMenuItem from 'components/CscPopupMenuItem'
-import AppBadgeApple from 'components/AppBadgeApple'
+import AuiMobileAppBadges from 'components/AuiMobileAppBadges'
-import AppBadgeGoogle from 'components/AppBadgeGoogle'
 
 export default {
     name: 'CscMainLayout',
     components: {
-        AppBadgeGoogle,
+        AuiMobileAppBadges,
-        AppBadgeApple,
         CscPopupMenuItem,
         CscPopupMenu,
         CscMainMenuTop,
@@ -356,8 +315,7 @@ export default {
         ]),
         ...mapState('user', [
             'resellerBranding',
-            'defaultBranding',
+            'defaultBranding'
-            'platformInfo'
         ]),
         ...mapGetters('communication', [
             'createFaxState',