From 6f57bd1628960acfa43bb62242c142a25c188708 Mon Sep 17 00:00:00 2001
From: Debora Crescenzo <dcrescenzo@sipwise.com>
Date: Fri, 23 Jan 2026 14:44:00 +0000
Subject: [PATCH] MT#64293 Migrate AppBadge components to Vue 3 Composition API

- Migrate simple badge components and parent component to use <script setup>
and composables pattern.

- Minor CSS adjustments
  - Update app badge bottom spacing in `CscLayoutMain`
  - Simplify app badge styling in `CscPageLogin`

Change-Id: I98a961ee6dc7a89e344d9387c25bdb1dc9f91f21
---
 src/components/AppBadgeApple.vue      | 15 +++++------
 src/components/AppBadgeGoogle.vue     | 15 +++++------
 src/components/AuiMobileAppBadges.vue | 37 ++++++++-------------------
 src/composables/useUser.js            |  8 +++++-
 src/layouts/CscLayoutMain.vue         |  2 +-
 src/pages/CscPageLogin.vue            |  1 -
 6 files changed, 31 insertions(+), 47 deletions(-)

diff --git a/src/components/AppBadgeApple.vue b/src/components/AppBadgeApple.vue
index 1298fc71..2e35fd10 100644
--- a/src/components/AppBadgeApple.vue
+++ b/src/components/AppBadgeApple.vue
@@ -14,14 +14,11 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'AppBadgeApple',
-    props: {
-        href: {
-            type: String,
-            required: true
-        }
+<script setup>
+defineProps({
+    href: {
+        type: String,
+        required: true
     }
-}
+})
 </script>
diff --git a/src/components/AppBadgeGoogle.vue b/src/components/AppBadgeGoogle.vue
index bd2133ed..f62bc005 100644
--- a/src/components/AppBadgeGoogle.vue
+++ b/src/components/AppBadgeGoogle.vue
@@ -14,14 +14,11 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'AppBadgeGoogle',
-    props: {
-        href: {
-            type: String,
-            required: true
-        }
+<script setup>
+defineProps({
+    href: {
+        type: String,
+        required: true
     }
-}
+})
 </script>
diff --git a/src/components/AuiMobileAppBadges.vue b/src/components/AuiMobileAppBadges.vue
index 130865f3..74d4332a 100644
--- a/src/components/AuiMobileAppBadges.vue
+++ b/src/components/AuiMobileAppBadges.vue
@@ -51,32 +51,17 @@
     </q-list>
 </template>
 
-<script>
+<script setup>
 import AppBadgeApple from 'components/AppBadgeApple'
 import AppBadgeGoogle from 'components/AppBadgeGoogle'
-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
-        }
-    }
-}
+import { useUser } from 'src/composables/useUser'
+import { computed } from 'vue'
+
+const { platformInfo } = useUser()
+
+const appNameAndroid = computed(() => platformInfo.value?.app?.android?.name)
+const appNameApple = computed(() => platformInfo.value?.app?.apple?.name)
+const appUrlAndroid = computed(() => platformInfo.value?.app?.android?.url)
+const appUrlApple = computed(() => platformInfo.value?.app?.apple?.url)
+const appName = computed(() => appNameAndroid.value || appNameApple.value)
 </script>
diff --git a/src/composables/useUser.js b/src/composables/useUser.js
index c64de829..fceac0ec 100644
--- a/src/composables/useUser.js
+++ b/src/composables/useUser.js
@@ -6,6 +6,9 @@ export function useUser () {
 
     // State
     const subscriber = computed(() => store.state.user.subscriber)
+    const platformInfo = computed(() => store.state.user.platformInfo)
+
+    // Getters
     const isLogged = computed(() => store.getters['user/isLogged'])
     const username = computed(() => store.getters['user/getUsername'])
     const isAdmin = computed(() => store.getters['user/isAdmin'])
@@ -30,6 +33,9 @@ export function useUser () {
     return {
         // State
         subscriber,
+        platformInfo,
+
+        // Getters
         isLogged,
         username,
         isAdmin,
@@ -45,7 +51,7 @@ export function useUser () {
         changeSIPPassword,
         initUser,
 
-        // Getters
+        // Getters with parameters
         hasCapability,
         hasPlatformFeature,
         hasSubscriberProfileAttribute
diff --git a/src/layouts/CscLayoutMain.vue b/src/layouts/CscLayoutMain.vue
index 77f2b75b..72203b1e 100644
--- a/src/layouts/CscLayoutMain.vue
+++ b/src/layouts/CscLayoutMain.vue
@@ -464,7 +464,7 @@ export default {
             if (copyrightIsDisplayed) {
                 return '45px'
             }
-            return '0px'
+            return '15px'
         }
     },
     watch: {
diff --git a/src/pages/CscPageLogin.vue b/src/pages/CscPageLogin.vue
index 325aeffa..3d138d41 100644
--- a/src/pages/CscPageLogin.vue
+++ b/src/pages/CscPageLogin.vue
@@ -374,6 +374,5 @@ export default {
     width: 200px
     height: 200px
 .app-badge
-    height: 50px
     object-fit: contain
 </style>