Disable nav items when billing not setup

Author: Joe Pavitt

frontend/src/components/SideNavigationTeamOptions.vue

@@ -6,11 +6,14 @@
                 <div v-for="route in navigation.general" :key="route.label">
                     <router-link
                         v-if="route.label"
-                        :class="{'router-link-active': atNestedRoute(route)}"
+                        :class="{'router-link-active': atNestedRoute(route), 'disabled': route.disabled}"
                         :to="'/team/' + team.slug + route.to" :data-nav="route.tag"
                         @click="$emit('option-selected')"
                     >
-                        <nav-item :label="route.label" :icon="route.icon" :featureUnavailable="route.featureUnavailable" />
+                        <nav-item
+                            :label="route.label" :icon="route.icon"
+                            :featureUnavailable="route.featureUnavailable"
+                        />
                     </router-link>
                     <div v-else class="ff-side-navigation-divider" />
                 </div>
@@ -23,6 +26,7 @@
                 <router-link
                     v-for="route in navigation.admin" :key="route.label"
                     :to="'/team/' + team.slug + route.to"
+                    :class="{'disabled': route.disabled}"
                     :data-nav="route.tag"
                 >
                     <nav-item :icon="route.icon" :label="route.label" :featureUnavailable="route.featureUnavailable" />
@@ -37,7 +41,7 @@
 
 <script>
 import { ChipIcon, CogIcon, CurrencyDollarIcon, DatabaseIcon, FolderIcon, TemplateIcon, UsersIcon } from '@heroicons/vue/solid'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 
 import permissionsMixin from '../mixins/Permissions.js'
 
@@ -65,6 +69,7 @@ export default {
     },
     computed: {
         ...mapState('account', ['user', 'team', 'teamMembership', 'features', 'notifications']),
+        ...mapGetters('account', ['noBilling']),
         nested: function () {
             return (this.$slots['nested-menu'] && this.loaded) || this.closeNested
         },
@@ -74,40 +79,46 @@ export default {
                     label: 'Applications',
                     to: '/applications',
                     tag: 'team-applications',
-                    icon: TemplateIcon
+                    icon: TemplateIcon,
+                    disabled: this.noBilling
                 },
                 {},
                 {
                     label: 'Instances',
                     to: '/instances',
                     tag: 'team-instances',
-                    icon: ProjectsIcon
+                    icon: ProjectsIcon,
+                    disabled: this.noBilling
                 },
                 {
                     label: 'Devices',
                     to: '/devices',
                     tag: 'team-devices',
-                    icon: ChipIcon
+                    icon: ChipIcon,
+                    disabled: this.noBilling
                 },
                 {},
                 {
                     label: 'Library',
                     to: '/library',
                     tag: 'shared-library',
                     icon: FolderIcon,
+                    disabled: this.noBilling,
                     featureUnavailable: !this.features?.['shared-library'] || this.team?.type.properties.features?.['shared-library'] === false
                 },
                 {
                     label: 'Members',
                     to: '/members',
                     tag: 'team-members',
-                    icon: UsersIcon
+                    icon: UsersIcon,
+                    disabled: this.noBilling
                 }],
                 admin: [{
                     label: 'Audit Log',
                     to: '/audit-log',
                     tag: 'team-audit',
-                    icon: DatabaseIcon
+                    icon: DatabaseIcon,
+                    disabled: this.noBilling
                 },
                 {
                     label: 'Team Settings',

frontend/src/pages/team/Billing.vue

@@ -62,7 +62,7 @@
                             You have <span class="font-bold" v-text="trialEndsIn" /> left of your trial.
                         </p>
                         <p>
-                            During the trial you can make full use of the features available to your team. To keep things running you will need to setup your billing details.
+                            You must add billing details in order to continue using FlowFuse.
                         </p>
                     </template>
                     <template v-else>

frontend/src/pages/team/index.vue

@@ -34,7 +34,7 @@
 
 <script>
 import { useRoute } from 'vue-router'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 
 import { Roles } from '../../../../forge/lib/roles.js'
 
@@ -67,6 +67,7 @@ export default {
     },
     computed: {
         ...mapState('account', ['user', 'team', 'teamMembership', 'pendingTeamChange', 'features']),
+        ...mapGetters('account', ['noBilling']),
         isVisitingAdmin: function () {
             return (this.teamMembership.role === Roles.Admin)
         },
@@ -104,12 +105,7 @@ export default {
         },
         checkBilling: async function () {
             // Team Billing
-            if (!this.user.admin &&
-                this.features.billing &&
-                (!this.team.billing?.unmanaged) &&
-                (!this.team.billing?.trial || this.team.billing?.trialEnded) &&
-                !this.team.billing?.active
-            ) {
+            if (this.noBilling) {
                 this.$router.push({
                     path: `/team/${this.team.slug}/billing`
                 })

frontend/src/store/account.js

@@ -73,6 +73,13 @@ const getters = {
     offline (state) {
         return state.offline
     },
+    noBilling (state) {
+        return !state.user.admin &&
+        state.features.billing &&
+        (!state.team.billing?.unmanaged) &&
+        (!state.team.billing?.trial || state.team.billing?.trialEnded) &&
+        !state.team.billing?.active
+    },
     isAdminUser: (state) => !!state.user.admin,
     defaultUserTeam: (state, getters) => {
         const defaultTeamId = state.user.defaultTeam || getters.teams[0]?.id

frontend/src/stylesheets/layouts.scss

@@ -675,6 +675,10 @@ $nav_height: 60px;
         background-color: $ff-grey-700;
         border-bottom: 1px solid $ff-grey-600;
     }
+    .disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
     .ff-notification-pill {
         padding: 2px 12px;
         background-color: $ff-red-600;