From 4233c0432c8c76067528cc2f32380f9df4504de4 Mon Sep 17 00:00:00 2001
From: Debora Crescenzo <dcrescenzo@sipwise.com>
Date: Mon, 11 May 2026 14:31:59 +0100
Subject: [PATCH] MT#65003 Use composable helpers instead of direct Vuex store
 access

- Replace direct `useStore` usage with composable helpers
  (useActions, useState, useGetters)
- Add `setPopupShow` action to wrap `popupShow` mutation
  and eliminate mutations in favor of `setPopupShow` action
- Remove `usePbx` and `useUser` composables
- Update documentation

This prepares the codebase for eventual Pinia migration by:
- Avoiding mutations (Pinia has no mutations)
- Centralizing store access through helpers
- Enabling future migration with minimal component changes

Change-Id: Iddc63b8c3c39fe1a06bb6a78ef322f01fe77a9af
(cherry picked from commit e64887e492e6d107fa4f2082c9d111e6fe4978b4)
---
 doc/architectural-overview.md                 |   9 +-
 doc/composables.md                            | 219 ++++++++++++++----
 doc/data-layer.md                             |  50 ++--
 doc/migration-guide.md                        |  75 +++++-
 doc/router-navigation-guard.md                |  14 +-
 src/components/AuiMobileAppBadges.vue         |   4 +-
 src/components/CscPopupMenu.vue               |   6 +-
 src/components/CscPopupMenuRingTimeout.vue    |   5 +-
 .../call-forwarding/CscCfAddForm.vue          |   8 +-
 .../CscCfDestinationCustomAnnouncement.vue    |   4 +-
 .../CscCfDestinationNumber.vue                |   6 +-
 .../call-forwarding/CscCfGroupItem.vue        |   5 +-
 src/composables/usePbx.js                     |  52 -----
 src/composables/useUser.js                    |  61 -----
 src/pages/CscPagePbxSettingsConference.vue    |  18 +-
 src/store/call-forwarding/actions.js          |   4 +
 16 files changed, 312 insertions(+), 228 deletions(-)
 delete mode 100644 src/composables/usePbx.js
 delete mode 100644 src/composables/useUser.js

diff --git a/doc/architectural-overview.md b/doc/architectural-overview.md
index e8933930..a2b47f2e 100644
--- a/doc/architectural-overview.md
+++ b/doc/architectural-overview.md
@@ -33,8 +33,8 @@ This document describes the architecture of the ngcp-csc-ui project (Customer Se
 	- `router/`: route definitions and meta configuration in `src/router/routes.js`.
 	- `components/`, `pages/`, `layouts/`: UI building blocks and pages organized by feature.
 	- `assets/`, `helpers/`, `mixins/`, `validators/`: supporting libraries and utilities.
-	- `composables/`: Reusable composition functions that encapsulate state management logic and provide reactive access to Vuex store. Notable files:
-		- `src/composables/useUser.js` — provides reactive access to user state, authentication actions, and permission checks (capabilities, platform features, profile attributes).
+	- `composables/`: Reusable composition functions that encapsulate logic and provide reactive access to Vuex store. Notable files:
+		- `src/composables/useStore.js` — provides helpers (`useState`, `useGetters`, `useActions`) for accessing Vuex store modules in Composition API components. **Note: `useMutations` is available but should be avoided. Use `useActions` instead for Pinia migration compatibility.**
 
 ## HTTP API layer (src/api/common.js)
 
@@ -98,10 +98,11 @@ VoIP notes and constraints:
 
 ## Composables Layer
 
-Starting with Vue 3 migration, the application introduces composables (`src/composables/`) as an optional layer for accessing Vuex store in Composition API components:
+Starting with Vue 3 migration, the application uses composables (`src/composables/`) for accessing Vuex store in Composition API components:
 
 - **Purpose**: Provide reactive, encapsulated access to store state and actions
-- **Available composables**: `useStore.js` (generic), `useUser.js` (authentication), `usePbx.js` (PBX features), `useGlobals.js` (global properties), `useWait.js` (loading states)
+- **Available composables**: `useStore.js` (generic helpers), `useWait.js` (loading states)
+- **Recommended pattern**: Use `useState`, `useGetters`, and `useActions` helpers. Avoid `useMutations` and instead wrap mutations in actions for Pinia migration compatibility (Pinia has no mutations).
 - **Coexistence**: Options API components continue using `mapState`/`mapGetters`/`mapActions`; composables are used when converting to Composition API
 - **Details**: See `migration-guide.md` for usage patterns and `composables.md` for API reference
 
diff --git a/doc/composables.md b/doc/composables.md
index 4c4779b4..67ea998d 100644
--- a/doc/composables.md
+++ b/doc/composables.md
@@ -16,6 +16,8 @@ Generic helpers for accessing Vuex store. It's a wrapper around Vuex that makes
 *Problem it solves*:
 In Composition API, you can't use `mapState`, `mapGetters`, `mapActions` like in Options API. You need a different approach to access store state, getters, and actions reactively.
 
+> ⚠️ Use `useState`, `useGetters`, and `useActions` helpers. **Avoid `useMutations` if possible** — wrap mutations in actions instead. Pinia has no mutations, so using `useActions` now makes future migration easier.
+
 ### Functions
 
 #### `useStore()`
@@ -85,10 +87,11 @@ await login({ username: 'test', password: 'pass' })
 </script>
 ```
 
-#### `useMutations(moduleName, keys)`
+#### `useMutations(moduleName, keys)` **Avoid unless it's absolutely necessary**
 
 Map mutations from a module to functions.
-*Use when*: You need to commit store mutations (rarely needed - prefer actions).
+
+Remember, Pinia has no mutations. Create an action in your store that calls the mutation, then use `useActions` to access it.This helper remains in case the mutation needs to be accessed directly for some reason.
 
 ```vue
 <script setup>
@@ -212,81 +215,203 @@ const formatPhone = (number) => filters.numberFormat(number)
 
 ## Creating New Composables
 
-Template for creating module-specific composables:
+### When to Create a Composable
 
-```javascript
-import { computed } from 'vue'
-import { useStore } from './useStore'
+**Create composables for:**
+- Feature-specific logic that doesn't need global state (phonebook, NCOS, registrations)
+- Reusable business logic across components
+- Local state management with associated operations
+- API operations that don't affect global app state
 
-export function useMyModule() {
-  const store = useStore()
+### Template for Feature Composables
 
-  // Map state
-  const myData = computed(() => store.state.myModule.data)
-  const loading = computed(() => store.state.myModule.loading)
+Create composables that manage their own local state and business logic:
 
-  // Map getters
-  const isValid = computed(() => store.getters['myModule/isValid'])
+```javascript
+import { ref, computed } from 'vue'
+import { getNcosLevels, getNcosSet, setPreference } from 'src/api/subscriber'
+import { getSubscriberId } from 'src/auth'
+
+/**
+ * Composable for managing NCOS (Network Class of Service) levels and sets.
+ * Manages local state and provides API operations.
+ */
+export function useNcos() {
+  // Local reactive state
+  const levels = ref([])
+  const sets = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  // Computed properties
+  const hasLevels = computed(() => levels.value.length > 0)
+  const hasSets = computed(() => sets.value.length > 0)
+
+  // Business logic functions
+  const loadLevels = async () => {
+    loading.value = true
+    error.value = null
+    try {
+      const list = await getNcosLevels()
+      levels.value = list.items.map(ncos => ({
+        label: ncos.level,
+        value: ncos.id
+      }))
+    } catch (err) {
+      error.value = err.message
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
 
-  // Map actions
-  const loadData = (payload) => store.dispatch('myModule/loadData', payload)
-  const saveData = (payload) => store.dispatch('myModule/saveData', payload)
+  const loadSets = async () => {
+    loading.value = true
+    error.value = null
+    try {
+      const list = await getNcosSet()
+      sets.value = list.map(setNcos => ({
+        label: setNcos.name,
+        value: setNcos.id
+      }))
+    } catch (err) {
+      error.value = err.message
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
 
-  // Map mutations
-  const reset = () => store.commit('myModule/reset')
+  const updateLevel = async (value) => {
+    loading.value = true
+    error.value = null
+    try {
+      await setPreference(getSubscriberId(), 'ncos', value)
+    } catch (err) {
+      error.value = err.message
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const reset = () => {
+    levels.value = []
+    sets.value = []
+    error.value = null
+  }
 
   return {
     // State
-    myData,
+    levels,
+    sets,
     loading,
+    error,
 
-    // Getters
-    isValid,
+    // Computed
+    hasLevels,
+    hasSets,
 
     // Actions
-    loadData,
-    saveData,
-
-    // Mutations
+    loadLevels,
+    loadSets,
+    updateLevel,
     reset
   }
 }
 ```
 
-### Using the Custom Composable
+### Using the Feature Composable
 
 ```vue
 <script setup>
-import { useMyModule } from 'src/composables/useMyModule'
+import { onMounted } from 'vue'
+import { useNcos } from 'src/composables/useNcos'
 
 const {
-  myData,
+  levels,
+  sets,
   loading,
-  isValid,
-  loadData,
-  saveData,
-  reset
-} = useMyModule()
-
-// Use the composable
-const handleLoad = async () => {
-  await loadData({ id: 1 })
-  if (isValid.value) {
-    console.log('Data loaded:', myData.value)
+  error,
+  hasLevels,
+  loadLevels,
+  loadSets,
+  updateLevel
+} = useNcos()
+
+// Load data on mount
+onMounted(async () => {
+  await loadLevels()
+  await loadSets()
+})
+
+const handleUpdateLevel = async (levelId) => {
+  try {
+    await updateLevel(levelId)
+    // Show success message
+  } catch (err) {
+    // Error already set in composable
+    console.error('Failed to update level:', error.value)
   }
 }
-
-const handleSave = async () => {
-  await saveData({ ...myData.value, updated: true })
-}
 </script>
 
 <template>
   <div>
-    <button @click="handleLoad" :disabled="loading">Load Data</button>
-    <button @click="handleSave" :disabled="!isValid">Save Data</button>
-    <button @click="reset">Reset</button>
-    <div v-if="myData">{{ myData }}</div>
+    <div v-if="loading">Loading...</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else>
+      <select
+        @change="handleUpdateLevel($event.target.value)"
+        :disabled="!hasLevels"
+      >
+        <option value="">Select NCOS Level</option>
+        <option
+          v-for="level in levels"
+          :key="level.value"
+          :value="level.value"
+        >
+          {{ level.label }}
+        </option>
+      </select>
+    </div>
   </div>
 </template>
 ```
+
+### Accessing Store Within a Composable
+
+If your composable needs global store state, use `useGetters` or `useActions`:
+
+```javascript
+import { ref } from 'vue'
+import { useGetters } from 'src/composables/useStore'
+import { getCustomerPhonebook } from 'src/api/subscriber'
+
+export function useCustomerPhonebook() {
+  // Access global state
+  const { getCustomerId } = useGetters('user', ['getCustomerId'])
+
+  // Local state
+  const phonebook = ref([])
+  const loading = ref(false)
+
+  const loadPhonebook = async () => {
+    loading.value = true
+    try {
+      const list = await getCustomerPhonebook({
+        customerId: getCustomerId.value
+      })
+      phonebook.value = list.data
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    phonebook,
+    loading,
+    loadPhonebook
+  }
+}
+```
diff --git a/doc/data-layer.md b/doc/data-layer.md
index f7d53eef..c23f479e 100644
--- a/doc/data-layer.md
+++ b/doc/data-layer.md
@@ -152,27 +152,25 @@ if (apiIsCanceledRequest(err)) {
 
 ## Composables for State Access
 
-Starting with the migration to Vue 3 Composition API, the application introduces composables as a layer between components and Vuex store:
+Starting with the migration to Vue 3 Composition API, the application uses composables for accessing Vuex store:
 
-1. **Purpose**: Composables provide reactive access to store state and actions without direct store coupling in components.
+1. **Purpose**: Composables provide reactive access to store state, getters, and actions in Composition API components.
 
-2. **Pattern** (based on `src/composables/useUser.js`):
-   - Import store and computed from Vue
-   - Define reactive refs using `computed(() => store.state/getters.xxx)`
-   - Wrap store actions in simple functions
-   - Return an object with all reactive properties and methods
+2. **Pattern** (using `src/composables/useStore.js` helpers):
+   - Import the store helpers (`useState`, `useGetters`, `useActions`)
+   - Map state, getters, or actions from specific store modules
+   - All returned values are reactive computed refs
 
 3. **Example**:
    ```javascript
-   import { computed } from 'vue'
-   import { store } from 'src/boot/store'
+   import { useGetters, useActions } from 'src/composables/useStore'
 
-   export function useUser() {
-       const isAdmin = computed(() => store.getters['user/isAdmin'])
-       const login = (credentials) => store.dispatch('user/login', credentials)
+   // In your component setup
+   const { isAdmin, isLogged } = useGetters('user', ['isAdmin', 'isLogged'])
+   const { login, logout } = useActions('user', ['login', 'logout'])
 
-       return { isAdmin, login }
-   }
+   // isAdmin and isLogged are computed refs
+   // login and logout are action functions
    ```
 
 ## Store Access Patterns
@@ -195,19 +193,15 @@ export default {
 
 ### Composition API with `<script setup>` (Recommended)
 
-For components using `<script setup>`, use store composables:
+For components using `<script setup>`, use store helpers:
 
 ```vue
 <script setup>
-import { useUser } from 'src/composables/useUser'
+import { useState, useGetters, useActions } from 'src/composables/useStore'
 
-const {
-  subscriber,      // reactive state (computed ref)
-  isLogged,        // reactive getter (computed ref)
-  isAdmin,         // reactive getter (computed ref)
-  login,           // action function
-  logout           // action function
-} = useUser()
+const { subscriber } = useState('user', ['subscriber'])
+const { isLogged, isAdmin } = useGetters('user', ['isLogged', 'isAdmin'])
+const { login, logout } = useActions('user', ['login', 'logout'])
 
 // Use them directly
 const handleLogin = async () => {
@@ -226,7 +220,7 @@ const handleLogin = async () => {
 </template>
 ```
 
-**Note**: Composables return computed refs, so access values with `.value` in script, but not in template.
+**Note**: Store helpers return computed refs, so access values with `.value` in script, but not in template.
 
 ### Direct Store Access (Services/Utilities)
 
@@ -324,11 +318,11 @@ const actions = {
 ```vue
 <script setup>
 import { ref, computed } from 'vue'
-import { useUser } from 'src/composables/useUser'
-import { useActions } from 'src/composables/useStore'
+import { useState, useGetters, useActions } from 'src/composables/useStore'
 
-// Get user state and actions
-const { subscriber, isLogged, isAdmin } = useUser()
+// Get user state and getters
+const { subscriber } = useState('user', ['subscriber'])
+const { isLogged, isAdmin } = useGetters('user', ['isLogged', 'isAdmin'])
 
 // Get profile actions
 const { loadProfile, updateProfile } = useActions('profile', [
diff --git a/doc/migration-guide.md b/doc/migration-guide.md
index f1f8046c..f5e0c57e 100644
--- a/doc/migration-guide.md
+++ b/doc/migration-guide.md
@@ -21,7 +21,7 @@
 | **Boot Files** | `event-bus.js`, `filters.js`, `constants.js`, `appConfig.js`, `vuelidate.js` | Enhanced | None - new features available |
 | **API Layer** | `api/common.js` | Fixed | None - transparent fix |
 | **Store** | `store/common.js`, `store/apiHelper.js` | New helpers | Optional - use in new code |
-| **Composables** | `useStore.js`, `useUser.js`, `usePbx.js`, `useGlobals.js` | New patterns | Use when converting to Composition API |
+| **Composables** | `useStore.js`, `useGlobals.js` | Store access helpers | Use when converting to Composition API |
 
 ---
 
@@ -59,11 +59,11 @@ export default {
 }
 
 // New Composition API
-import { useUser } from 'src/composables/useUser'
+import { useGetters } from 'src/composables/useStore'
 
 export default {
   setup() {
-    const { isLogged, username } = useUser()
+    const { isLogged, username } = useGetters('user', ['isLogged', 'getUsername'])
     return { isLogged, username }
   }
 }
@@ -95,9 +95,9 @@ When converting components to Composition API:
 
 | Composable | Purpose | Use When |
 |------------|---------|----------|
-| `useUser()` | User auth, permissions | Checking login, admin, capabilities |
-| `usePbx()` | PBX configuration | Managing seats, groups, devices |
-| `useStore()` | Generic store access | Need custom store logic |
+| `useGetters(module, keys)` | Access store getters | Need reactive computed state |
+| `useActions(module, keys)` | Access store actions | Need to dispatch actions |
+| `useState(module, keys)` | Access store state | Need raw state values |
 | `useFilters()` | Formatting functions | Dates, numbers, currencies |
 | `useAppConfig()` | App configuration | Need API URLs, settings |
 | `useValidationErrors()` | Form validation | Vuelidate error messages |
@@ -116,7 +116,7 @@ computed: {
 }
 
 // After (Composition API)
-const { subscriber } = useUser()
+const { subscriber } = useState('user', ['subscriber'])
 ```
 
 ### Pattern 2: Actions with Loading State
@@ -130,7 +130,8 @@ methods: {
 }
 
 // After
-const { loginRequesting, login } = useUser()
+const { loginRequesting } = useGetters('user', ['loginRequesting'])
+const { login } = useActions('user', ['login'])
 ```
 
 ### Pattern 3: Filters
@@ -149,6 +150,61 @@ const formatted = filters.readableDate(new Date())
 
 ---
 
+## Future-Proofing: Pinia Migration
+
+The composable helper pattern is designed to make eventual Pinia migration as easy as possible.
+
+### Why Avoid `useMutations`
+
+**Pinia has no mutations!** In Pinia, actions can directly modify state:
+
+```javascript
+// ❌ AVOID: useMutations (won't work with Pinia)
+import { useMutations } from 'src/composables/useStore'
+const { setProfile } = useMutations('user', ['setProfile'])
+
+// ✅ USE: useActions instead (works with both Vuex & Pinia)
+import { useActions } from 'src/composables/useStore'
+const { setProfile } = useActions('user', ['setProfile'])
+```
+
+### Vuex Store Pattern (Transition-Ready)
+
+Wrap mutations in actions, even for simple setters:
+
+```javascript
+// Vuex store (current)
+export default {
+  state: { profile: null },
+  mutations: {
+    setProfile(state, data) {
+      state.profile = data
+    }
+  },
+  actions: {
+    setProfile({ commit }, data) {
+      commit('setProfile', data)  // Action wraps mutation
+    }
+  }
+}
+```
+
+When migrating to Pinia later, only the store changes and components stay identical:
+
+```javascript
+// Pinia store (future)
+export const useUserStore = defineStore('user', {
+  state: () => ({ profile: null }),
+  actions: {
+    setProfile(data) {
+      this.profile = data  // Direct assignment
+    }
+  }
+})
+```
+
+---
+
 ## Migration Checklist
 
 When converting a component to Composition API:
@@ -156,6 +212,7 @@ When converting a component to Composition API:
 - [ ] Replace `mapState` with composable state access
 - [ ] Replace `mapGetters` with composable getters
 - [ ] Replace `mapActions` with composable actions
+- [ ] **Avoid `useMutations`** - use `useActions` instead (Pinia-ready pattern)
 - [ ] Replace `this.$filters` with direct imports or `useFilters()`
 - [ ] Replace `this.$appConfig` with `useAppConfig()` or direct import
 - [ ] Replace `this.emitter.$emit` with `eventBus.$emit` or direct import
@@ -169,7 +226,7 @@ When converting a component to Composition API:
 ## Next Steps
 
 1. **Read this guide**
-2. **Review example composables**: `src/composables/useUser.js`, `src/composables/usePbx.js`
+2. **Review composables documentation**: `doc/composables.md`
 3. **Try converting one simple component** to get familiar with patterns
 4. **Ask questions** if stuck
 
diff --git a/doc/router-navigation-guard.md b/doc/router-navigation-guard.md
index e5a809a5..3bd1a629 100644
--- a/doc/router-navigation-guard.md
+++ b/doc/router-navigation-guard.md
@@ -163,14 +163,18 @@ export default {
 ```vue
 <script setup>
 import { computed } from 'vue'
-import { useUser } from 'src/composables/useUser'
+import { useGetters } from 'src/composables/useStore'
 import { PROFILE_ATTRIBUTE_MAP, LICENSES } from 'src/constants'
 
 const {
   hasSubscriberProfileAttribute,
   hasLicenses,
   isSpCe
-} = useUser()
+} = useGetters('user', [
+  'hasSubscriberProfileAttribute',
+  'hasLicenses',
+  'isSpCe'
+])
 
 const menuItems = [
   {
@@ -178,8 +182,8 @@ const menuItems = [
     icon: 'call',
     label: 'Calls',
     visible: computed(() =>
-      hasSubscriberProfileAttribute(PROFILE_ATTRIBUTE_MAP.cscCalls) &&
-      (isSpCe.value || hasLicenses([LICENSES.csc_calls]))
+      hasSubscriberProfileAttribute.value(PROFILE_ATTRIBUTE_MAP.cscCalls) &&
+      (isSpCe.value || hasLicenses.value([LICENSES.csc_calls]))
     )
   },
   ...
@@ -187,7 +191,7 @@ const menuItems = [
 </script>
 ```
 
-**Note**: When using composables, getters return `computed` refs, so access the value with `.value` when needed in computed expressions.
+**Note**: When using store helpers, getters return `computed` refs, so access the value with `.value` when needed in computed expressions.
 
 ### Menu Hierarchy and Nested Items
 
diff --git a/src/components/AuiMobileAppBadges.vue b/src/components/AuiMobileAppBadges.vue
index 2bfc71d4..9d73a2f4 100644
--- a/src/components/AuiMobileAppBadges.vue
+++ b/src/components/AuiMobileAppBadges.vue
@@ -54,12 +54,12 @@
 <script setup>
 import AppBadgeApple from 'components/AppBadgeApple'
 import AppBadgeGoogle from 'components/AppBadgeGoogle'
-import { useUser } from 'src/composables/useUser'
+import { useState } from 'src/composables/useStore'
 import { computed } from 'vue'
 
 defineOptions({ name: 'AuiMobileAppBadges' })
 
-const { platformInfo } = useUser()
+const { platformInfo } = useState('user', ['platformInfo'])
 
 const appNameAndroid = computed(() => platformInfo.value?.app?.android?.name)
 const appNameApple = computed(() => platformInfo.value?.app?.apple?.name)
diff --git a/src/components/CscPopupMenu.vue b/src/components/CscPopupMenu.vue
index 862fe1cc..39a2a9c9 100644
--- a/src/components/CscPopupMenu.vue
+++ b/src/components/CscPopupMenu.vue
@@ -1,6 +1,6 @@
 <template>
     <q-popup-proxy
-        @before-show="$store.commit('callForwarding/popupShow', null)"
+        @before-show="setPopupShow(null)"
     >
         <q-list
             v-if="!gridView"
@@ -39,6 +39,7 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 export default {
     name: 'CscPopupMenu',
     props: {
@@ -46,6 +47,9 @@ export default {
             type: Boolean,
             default: false
         }
+    },
+    methods: {
+        ...mapActions('callForwarding', ['setPopupShow'])
     }
 }
 </script>
diff --git a/src/components/CscPopupMenuRingTimeout.vue b/src/components/CscPopupMenuRingTimeout.vue
index b0817527..d01c242d 100644
--- a/src/components/CscPopupMenuRingTimeout.vue
+++ b/src/components/CscPopupMenuRingTimeout.vue
@@ -20,7 +20,7 @@
                             v-model="timeout"
                             buttons
                             data-cy="csc-forwarding-ring-timeout-global-editbox"
-                            @before-show="$store.commit('callForwarding/popupShow','after-ring-timeout')"
+                            @before-show="setPopupShow('after-ring-timeout')"
                             @save="updateRingTimeoutEvent($event)"
                         >
                             <csc-input
@@ -70,7 +70,8 @@ export default {
     },
     methods: {
         ...mapActions('callForwarding', [
-            'updateRingTimeout'
+            'updateRingTimeout',
+            'setPopupShow'
         ]),
         async updateRingTimeoutEvent (event) {
             this.$wait.start('csc-cf-mappings-full')
diff --git a/src/components/call-forwarding/CscCfAddForm.vue b/src/components/call-forwarding/CscCfAddForm.vue
index c2bc1f1f..64d8de68 100644
--- a/src/components/call-forwarding/CscCfAddForm.vue
+++ b/src/components/call-forwarding/CscCfAddForm.vue
@@ -97,11 +97,10 @@
 import { useVuelidate } from '@vuelidate/core'
 import { required, requiredIf } from '@vuelidate/validators'
 import CscInput from 'src/components/form/CscInput'
-import { useUser } from 'src/composables/useUser'
+import { useGetters, useState } from 'src/composables/useStore'
 import { DestinationType, getDestinationIcon } from 'src/helpers/destination'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from 'vuex'
 
 defineOptions({ name: 'CscCfAddForm' })
 
@@ -115,16 +114,15 @@ defineProps({
 const emit = defineEmits(['save', 'cancel'])
 
 const { t } = useI18n()
-const store = useStore()
 
 const cfType = ref('cfu')
 const destinationType = ref(null)
 const destinationNumber = ref(null)
 const customAnnouncement = ref(null)
 
-const announcements = computed(() => store.state.callForwarding.announcements)
+const { announcements } = useState('callForwarding', ['announcements'])
 
-const { isSpCe, isPbxEnabled } = useUser()
+const { isSpCe, isPbxEnabled } = useGetters('user', ['isSpCe', 'isPbxEnabled'])
 const isDestinationNumber = computed(() => destinationType.value === 'number')
 const isDestinationCustomAnnouncement = computed(() => destinationType.value === 'customhours')
 
diff --git a/src/components/call-forwarding/CscCfDestinationCustomAnnouncement.vue b/src/components/call-forwarding/CscCfDestinationCustomAnnouncement.vue
index 733e396a..398ad325 100644
--- a/src/components/call-forwarding/CscCfDestinationCustomAnnouncement.vue
+++ b/src/components/call-forwarding/CscCfDestinationCustomAnnouncement.vue
@@ -9,7 +9,7 @@
             v-model="announcement"
             buttons
             anchor="top left"
-            @before-show="$store.commit('callForwarding/popupShow', null)"
+            @before-show="setPopupShow(null)"
             @save="$emit('input', $event)"
         >
             <q-select
@@ -26,6 +26,7 @@
 <script>
 import CscCfDestination from 'components/call-forwarding/CscCfDestination'
 import { showGlobalError } from 'src/helpers/ui'
+import { mapActions } from 'vuex'
 export default {
     name: 'CscCfDestinationCustomAnnouncement',
     components: { CscCfDestination },
@@ -51,6 +52,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions('callForwarding', ['setPopupShow']),
         checkAnnouncement () {
             const fieldFilled = this.announcement
             if (!fieldFilled) {
diff --git a/src/components/call-forwarding/CscCfDestinationNumber.vue b/src/components/call-forwarding/CscCfDestinationNumber.vue
index 9dea256a..f983aa76 100644
--- a/src/components/call-forwarding/CscCfDestinationNumber.vue
+++ b/src/components/call-forwarding/CscCfDestinationNumber.vue
@@ -8,7 +8,7 @@
             v-slot="scope"
             v-model="number"
             buttons
-            @before-show="$store.commit('callForwarding/popupShow', null)"
+            @before-show="setPopupShow(null)"
             @save="$emit('input', $event)"
         >
             <csc-input
@@ -30,6 +30,7 @@
 <script>
 import CscCfDestination from 'components/call-forwarding/CscCfDestination'
 import CscInput from 'components/form/CscInput'
+import { mapActions } from 'vuex'
 export default {
     name: 'CscCfDestinationNumber',
     components: { CscInput, CscCfDestination },
@@ -45,6 +46,9 @@ export default {
             number: this.$attrs.value
         }
     },
+    methods: {
+        ...mapActions('callForwarding', ['setPopupShow'])
+    },
     watch: {
         '$attrs.value' (value) {
             this.number = value
diff --git a/src/components/call-forwarding/CscCfGroupItem.vue b/src/components/call-forwarding/CscCfGroupItem.vue
index c5748577..6aab6ad1 100644
--- a/src/components/call-forwarding/CscCfGroupItem.vue
+++ b/src/components/call-forwarding/CscCfGroupItem.vue
@@ -54,7 +54,7 @@
                             v-slot="scope"
                             v-model="changedDestinationTimeout"
                             buttons
-                            @before-show="$store.commit('callForwarding/popupShow', null)"
+                            @before-show="setPopupShow(null)"
                             @save="updateDestinationTimeoutEvent({
                                 destinationTimeout: $event,
                                 destinationIndex: destinationIndex,
@@ -222,7 +222,8 @@ export default {
             'moveDestination',
             'updateDestinationTimeout',
             'rewriteDestination',
-            'updateAnnouncement'
+            'updateAnnouncement',
+            'setPopupShow'
         ]),
         async moveDestinationEvent (direction) {
             const targetIndex = direction === 'up' ? this.destinationIndex - 1 : this.destinationIndex + 1
diff --git a/src/composables/usePbx.js b/src/composables/usePbx.js
deleted file mode 100644
index 8d6e0023..00000000
--- a/src/composables/usePbx.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useStore } from 'src/composables/useStore'
-import { computed } from 'vue'
-
-export function usePbx () {
-    const store = useStore()
-
-    // State
-    const numbers = computed(() => store.getters['pbx/numbers'])
-    const seatList = computed(() => store.state.pbx.seatList)
-    const groupList = computed(() => store.state.pbx.groupList)
-    const deviceProfileList = computed(() => store.state.pbx.deviceProfileList)
-
-    // Getters
-    const numberOptions = computed(() => store.getters['pbx/getNumberOptions'])
-    const seatOptions = computed(() => store.getters['pbx/getSeatOptions'])
-    const groupOptions = computed(() => store.getters['pbx/getGroupOptions'])
-    const subscriberOptions = computed(() => store.getters['pbx/getSubscriberOptions'])
-
-    // Loading states
-    const isNumbersRequesting = computed(() => store.getters['pbx/isNumbersRequesting'])
-    const isSubscribersRequesting = computed(() => store.getters['pbx/isSubscribersRequesting'])
-
-    // Actions
-    const loadNumbers = () => store.dispatch('pbx/loadNumbers')
-    const loadSubscribers = () => store.dispatch('pbx/loadSubscribers')
-    const loadProfiles = () => store.dispatch('pbx/loadProfiles')
-    const loadDeviceModel = (payload) => store.dispatch('pbx/loadDeviceModel', payload)
-
-    return {
-        // State
-        numbers,
-        seatList,
-        groupList,
-        deviceProfileList,
-
-        // Getters
-        numberOptions,
-        seatOptions,
-        groupOptions,
-        subscriberOptions,
-
-        // Loading states
-        isNumbersRequesting,
-        isSubscribersRequesting,
-
-        // Actions
-        loadNumbers,
-        loadSubscribers,
-        loadProfiles,
-        loadDeviceModel
-    }
-}
diff --git a/src/composables/useUser.js b/src/composables/useUser.js
deleted file mode 100644
index 060284bb..00000000
--- a/src/composables/useUser.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useStore } from 'src/composables/useStore'
-import { computed } from 'vue'
-
-export function useUser () {
-    const store = useStore()
-
-    // 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'])
-    const isPbxAdmin = computed(() => store.getters['user/isPbxAdmin'])
-    const isPbxEnabled = computed(() => store.getters['user/isPbxEnabled'])
-    const isSpCe = computed(() => store.getters['user/isSpCe'])
-    const loginRequesting = computed(() => store.getters['user/loginRequesting'])
-    const isPasswordChanging = computed(() => store.getters['user/isPasswordChanging'])
-
-    // Actions
-    const login = (credentials) => store.dispatch('user/login', credentials)
-    const logout = () => store.dispatch('user/logout')
-    const changePassword = (newPassword) => store.dispatch('user/changePassword', newPassword)
-    const changeSIPPassword = (newPassword) => store.dispatch('user/changeSIPPassword', newPassword)
-    const initUser = () => store.dispatch('user/initUser')
-
-    // Getters with parameters
-    const hasCapability = (capability) => store.getters['user/hasCapability'](capability)
-    const hasPlatformFeature = (feature) => store.getters['user/hasPlatformFeature'](feature)
-    const hasSubscriberProfileAttribute = (attribute) =>
-        store.getters['user/hasSubscriberProfileAttribute'](attribute)
-
-    return {
-        // State
-        subscriber,
-        platformInfo,
-
-        // Getters
-        isLogged,
-        username,
-        isAdmin,
-        isPbxAdmin,
-        isPbxEnabled,
-        isSpCe,
-        loginRequesting,
-        isPasswordChanging,
-
-        // Actions
-        login,
-        logout,
-        changePassword,
-        changeSIPPassword,
-        initUser,
-
-        // Getters with parameters
-        hasCapability,
-        hasPlatformFeature,
-        hasSubscriberProfileAttribute
-    }
-}
diff --git a/src/pages/CscPagePbxSettingsConference.vue b/src/pages/CscPagePbxSettingsConference.vue
index 4c11ebbb..d168fc2a 100644
--- a/src/pages/CscPagePbxSettingsConference.vue
+++ b/src/pages/CscPagePbxSettingsConference.vue
@@ -55,6 +55,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { helpers, numeric } from '@vuelidate/validators'
 import CscPage from 'components/CscPage'
 import CscInputSaveable from 'components/form/CscInputSaveable'
+import { useActions, useGetters, useState } from 'src/composables/useStore'
 import { useWait } from 'src/composables/useWait'
 import { PROFILE_ATTRIBUTE_MAP } from 'src/constants'
 import { showToast } from 'src/helpers/ui'
@@ -65,7 +66,6 @@ import {
     ref
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from 'vuex'
 
 defineOptions({ name: 'CscPagePbxSettingsConference' })
 
@@ -79,7 +79,12 @@ const WAITERS = {
     updateConferencePin: 'csc-pbx-call-settings-update-conference-pin'
 }
 
-const store = useStore()
+const { subscriberPreferences } = useState('callSettings', ['subscriberPreferences'])
+const { hasSubscriberProfileAttribute } = useGetters('user', ['hasSubscriberProfileAttribute'])
+const { loadSubscriberPreferencesAction, fieldUpdateAction } = useActions('callSettings', [
+    'loadSubscriberPreferencesAction',
+    'fieldUpdateAction'
+])
 const wait = useWait()
 const { t } = useI18n()
 
@@ -89,9 +94,6 @@ const changes = reactive({
     conferencePin: ''
 })
 
-const subscriberPreferences = computed(() => store.state.callSettings.subscriberPreferences)
-const hasSubscriberProfileAttribute = computed(() => store.getters['user/hasSubscriberProfileAttribute'])
-
 const rules = computed(() => ({
     conferenceMaxParticipants: {
         numeric: helpers.withMessage(
@@ -138,7 +140,7 @@ async function saveConferenceMaxParticipants () {
     if (hasConferenceMaxParticipantsChanged.value && v$.value.conferenceMaxParticipants.$errors.length <= 0) {
         wait.start(WAITERS.updateConferenceMaxParticipants)
         try {
-            await store.dispatch('callSettings/fieldUpdateAction', {
+            await fieldUpdateAction({
                 field: 'conference_max_participants',
                 value: changes.conferenceMaxParticipants
             })
@@ -156,7 +158,7 @@ async function saveConferencePin () {
     if (hasConferencePinChanged.value && v$.value.conferencePin.$errors.length <= 0) {
         wait.start(WAITERS.updateConferencePin)
         try {
-            await store.dispatch('callSettings/fieldUpdateAction', {
+            await fieldUpdateAction({
                 field: 'conference_pin',
                 value: changes.conferencePin
             })
@@ -173,7 +175,7 @@ async function saveConferencePin () {
 onMounted(async () => {
     wait.start(WAITERS.loadPreferences)
     try {
-        await store.dispatch('callSettings/loadSubscriberPreferencesAction')
+        await loadSubscriberPreferencesAction()
         applyDefaultData()
         isInitialized.value = true
     } finally {
diff --git a/src/store/call-forwarding/actions.js b/src/store/call-forwarding/actions.js
index f247f1ac..ab06800e 100644
--- a/src/store/call-forwarding/actions.js
+++ b/src/store/call-forwarding/actions.js
@@ -901,3 +901,7 @@ export async function updateAnnouncement ({ dispatch, commit, state }, payload)
 export function resetCallForwardingState ({ commit }) {
         commit('resetState')
 }
+
+export function setPopupShow ({ commit }, popupId) {
+    commit('popupShow', popupId)
+}