[6943] Pinia Task 14 - account-settings

frontend/src/App.vue

@@ -63,7 +63,6 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import Loading from './components/Loading.vue'
 import Offline from './components/Offline.vue'
@@ -79,6 +78,7 @@ import TermsAndConditions from './pages/TermsAndConditions.vue'
 import UnverifiedEmail from './pages/UnverifiedEmail.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
@@ -104,7 +104,7 @@ export default {
         ...mapState(useUxDrawersStore, ['hiddenLeftDrawer']),
         ...mapState(useAccountAuthStore, ['user']),
         ...mapState(useUxLoadingStore, ['appLoader', 'offline']),
-        ...mapVuexState('account', ['settings']),
+        ...mapState(useAccountSettingsStore, ['settings']),
         loginRequired () {
             return this.$route.meta.requiresLogin !== false
         },

frontend/src/components/DevicesBrowser.vue

@@ -348,7 +348,6 @@ import { CogIcon, PlusSmIcon } from '@heroicons/vue/solid'
 
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters } from 'vuex'
 
 import deviceApi from '../api/devices.js'
 import teamApi from '../api/team.js'
@@ -386,6 +385,7 @@ import DevicesStatusBar from './charts/DeviceStatusBar.vue'
 import AddDeviceToGroupDialog from './dialogs/device-group-management/AddDeviceToGroupDialog.vue'
 import RemoveDeviceFromGroupDialog from './dialogs/device-group-management/RemoveDeviceFromGroupDialog.vue'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
@@ -463,7 +463,7 @@ export default {
     },
     computed: {
         ...mapState(useContextStore, ['team']),
-        ...mapGetters('account', ['featuresCheck']),
+        ...mapState(useAccountSettingsStore, ['featuresCheck']),
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxToursStore, ['tours']),
         columns () {

frontend/src/components/PageHeader.vue

@@ -104,7 +104,6 @@
 import { AcademicCapIcon, AdjustmentsIcon, CogIcon, CursorClickIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, XIcon } from '@heroicons/vue/solid'
 import { mapActions, mapState } from 'pinia'
 import { ref } from 'vue'
-import { mapGetters } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
@@ -120,6 +119,7 @@ import TeamSelection from './TeamSelection.vue'
 import GlobalSearch from './global-search/GlobalSearch.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
@@ -136,7 +136,7 @@ export default {
         ...mapState(useAccountAuthStore, ['user']),
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountStore, ['teams', 'notifications', 'hasAvailableTeams', 'defaultUserTeam']),
-        ...mapGetters('account', ['canCreateTeam', 'featuresCheck']),
+        ...mapState(useAccountSettingsStore, ['canCreateTeam', 'featuresCheck']),
         navigationOptions () {
             return [
                 {

frontend/src/components/TeamSelection.vue

@@ -43,12 +43,12 @@ import {
 } from '@headlessui/vue'
 import { PlusIcon, UserAddIcon } from '@heroicons/vue/solid'
 import { mapState } from 'pinia'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
 import NavItem from './NavItem.vue'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 
@@ -67,8 +67,7 @@ export default {
     computed: {
         ...mapState(useContextStore, ['team']),
         ...mapState(useAccountStore, ['teams', 'hasAvailableTeams']),
-        ...mapVuexState('account', ['settings']),
-        ...mapGetters('account', ['canCreateTeam']),
+        ...mapState(useAccountSettingsStore, ['canCreateTeam']),
         teamOptions () {
             return [
                 ...this.teams.map(team => {

frontend/src/components/TeamTypeSelection.vue

@@ -20,12 +20,14 @@
 
 <script>
 
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import teamTypesApi from '../api/teamTypes.js'
 
 import TeamTypeTile from './TeamTypeTile.vue'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
+
 export default {
     name: 'TeamTypeSelection',
     components: {
@@ -39,7 +41,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['isBillingEnabled'])
+        ...mapState(useAccountSettingsStore, ['isBillingEnabled'])
     },
     async created () {
         const { types } = await teamTypesApi.getTeamTypes()

frontend/src/components/banners/LicenseBanner.vue

@@ -18,9 +18,9 @@
 import { ChevronRightIcon, ExclamationCircleIcon } from '@heroicons/vue/outline'
 
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 
 export default {
     name: 'LicenseBanner',
@@ -29,7 +29,7 @@ export default {
         ChevronRightIcon
     },
     computed: {
-        ...mapVuexState('account', ['settings']),
+        ...mapState(useAccountSettingsStore, ['settings']),
         ...mapState(useAccountAuthStore, ['user']),
         license () {
             return this.settings.license || {}

frontend/src/components/drawers/expert/ExpertDrawer.vue

@@ -43,11 +43,11 @@
 import { LockClosedIcon, LockOpenIcon, XIcon } from '@heroicons/vue/solid'
 
 import { mapActions, mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import ToggleButtonGroup from '../../elements/ToggleButtonGroup.vue'
 import ExpertPanel from '../../expert/Expert.vue'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
@@ -64,7 +64,7 @@ export default {
     computed: {
         ...mapState(useUxDrawersStore, ['rightDrawer']),
         ...mapState(useProductExpertStore, ['agentMode']),
-        ...mapVuexState('account', ['features']),
+        ...mapState(useAccountSettingsStore, ['features']),
         agentModeButtons () {
             return [
                 { title: 'Support', value: 'support-agent' },

frontend/src/components/drawers/navigation/MainNav.vue

@@ -30,7 +30,6 @@
 <script>
 import { ChevronLeftIcon } from '@heroicons/vue/outline'
 import { mapActions, mapState } from 'pinia'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import NavItem from '../../NavItem.vue'
 
@@ -45,8 +44,6 @@ export default {
     computed: {
         ...mapState(useUxNavigationStore, ['mainNav', 'mainNavContext']),
         ...mapState(useContextStore, ['team']),
-        ...mapVuexState('account', ['features']),
-        ...mapGetters('account', ['requiresBilling']),
         nearestMetaMenu () {
             if (this.$route?.meta?.menu) {
                 return this.$route.meta.menu

frontend/src/components/expert/Expert.vue

@@ -24,14 +24,14 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import ExpertChatInput from './components/ExpertChatInput.vue'
 import ExpertMessages from './components/ExpertMessages.vue'
 import ExpertModeSwitcher from './components/ExpertModeSwitcher.vue'
 import InfoBanner from './components/InfoBanner.vue'
 import UpdateBanner from './components/UpdateBanner.vue'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useProductExpertInsightsAgentStore } from '@/stores/product-expert-insights-agent.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
@@ -80,7 +80,7 @@ export default {
         ...mapState(useUxDrawersStore, {
             isPinned: state => state.rightDrawer.fixed
         }),
-        ...mapVuexState('account', ['features']),
+        ...mapState(useAccountSettingsStore, ['features']),
         isEditorContext () {
             // In editor context, the route name includes 'editor'
             return this.$route?.name?.includes('editor') || false

frontend/src/components/multi-step-forms/instance/steps/DuplicationStep.vue

@@ -100,7 +100,6 @@
 <script>
 import { PencilIcon, RefreshIcon } from '@heroicons/vue/outline'
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import billingApi from '../../../../api/billing.js'
 import instanceTypesApi from '../../../../api/instanceTypes.js'
@@ -118,6 +117,7 @@ import NameGenerator from '../../../../utils/name-generator/index.js'
 
 import FfLoading from '../../../Loading.vue'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
 export default {
@@ -178,7 +178,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['features']),
+        ...mapState(useAccountSettingsStore, ['features']),
         ...mapState(useContextStore, ['team']),
         isTrialProjectSelected () {
             //  - Team is in trial mode, and

frontend/src/components/multi-step-forms/instance/steps/InstanceStep.vue

@@ -127,7 +127,6 @@
 <script>
 import { CheckCircleIcon, RefreshIcon } from '@heroicons/vue/outline'
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import billingApi from '../../../../api/billing.js'
 import instanceTypesApi from '../../../../api/instanceTypes.js'
@@ -147,6 +146,7 @@ import NameGenerator from '../../../../utils/name-generator/index.js'
 import Loading from '../../../Loading.vue'
 import FeatureUnavailableToTeam from '../../../banners/FeatureUnavailableToTeam.vue'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
 export default {
@@ -211,7 +211,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['features']),
+        ...mapState(useAccountSettingsStore, ['features']),
         ...mapState(useContextStore, ['team']),
         activeInstanceTypeCount () {
             return this.decoratedInstanceTypes.filter(instance => !instance.disabled).length

frontend/src/composables/Components/multi-step-forms/instance/InstanceFormHelper.js

@@ -1,16 +1,11 @@
-import { storeToRefs } from 'pinia'
-
-import store from '../../../../store/index.js'
 import { getTeamProperty } from '../../../TeamProperties.js'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useContextStore } from '@/stores/context.js'
 
 export function useInstanceFormHelper () {
-    const _store = store
-
     const teamRuntimeLimitReached = () => {
-        const { team: teamRef } = storeToRefs(useContextStore())
-        const team = teamRef.value
+        const team = useContextStore().team
         let teamTypeRuntimeLimit = getTeamProperty(team, 'runtimes.limit')
         const currentRuntimeCount = (team?.deviceCount ?? 0) + (team?.instanceCount ?? 0)
         if (team?.billing?.trial && !team?.billing?.active && getTeamProperty(team, 'trial.runtimesLimit')) {
@@ -20,8 +15,8 @@ export function useInstanceFormHelper () {
     }
 
     const decorateInstanceTypes = (instanceTypes) => {
-        const { team: teamRef } = storeToRefs(useContextStore())
-        const team = teamRef.value
+        const team = useContextStore().team
+        const features = useAccountSettingsStore().features
         // Do a first pass of the instance types to disable any not allowed for this team
         instanceTypes = instanceTypes.map(instanceType => {
             // Need to combine the projectType billing info with any overrides
@@ -51,8 +46,7 @@ export function useInstanceFormHelper () {
 
             return instanceType
         })
-
-        if (_store.state.account.features.billing) {
+        if (features.billing) {
         // With billing enabled, do a second pass through the instance types
         // to populate their billing info
             instanceTypes = instanceTypes.map(instanceType => {

frontend/src/layouts/Platform.vue

@@ -63,7 +63,6 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
-import { mapGetters } from 'vuex'
 
 import InterviewPopup from '../components/InterviewPopup.vue'
 import PageHeader from '../components/PageHeader.vue'
@@ -73,6 +72,7 @@ import NoticeBanner from '../components/notices/NoticeBanner.vue'
 import AlertsMixin from '../mixins/Alerts.js'
 import dialogService from '../services/dialog.js'
 
+import { useAccountSettingsStore } from '@/stores/account-settings.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
 import { useUxStore } from '@/stores/ux.js'
@@ -91,7 +91,7 @@ export default {
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxStore, ['overlay']),
         ...mapState(useProductBrokersStore, ['interview']),
-        ...mapGetters('account', ['hasAvailableTeams'])
+        ...mapState(useAccountSettingsStore, ['hasAvailableTeams'])
     },
     watch: {
         $route: function () {