respect billing permission in frontend, fix hiding of billing banners

resources/js/Components/Billing/BillingBanner.vue

@@ -7,9 +7,15 @@ import {
 } from '@heroicons/vue/16/solid';
 import { Link } from '@inertiajs/vue3';
 import { computed } from 'vue';
-import { isBlocked, isFreePlan, isInTrial } from '@/utils/billing';
+import {
+    isBillingActivated,
+    isBlocked,
+    isFreePlan,
+    isInTrial,
+} from '@/utils/billing';
 import { useSessionStorage } from '@vueuse/core';
 import { getCurrentOrganizationId } from '@/utils/useUser';
+import { canManageBilling } from '@/utils/permissions';
 
 const hideTrialBanner = useSessionStorage(
     'showTrialBanner-' + getCurrentOrganizationId(),
@@ -46,13 +52,13 @@ const showFreeUpgradeBanner = computed(
                 </span>
             </div>
             <div class="flex items-center space-x-2">
-                <Link href="/billing">
+                <Link v-if="canManageBilling()" href="/billing">
                     <div
                         class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>
-                <button @click="showTrialBanner = false" class="p-1">
+                <button @click="hideTrialBanner = true" class="p-1">
                     <XMarkIcon
                         class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
@@ -74,13 +80,15 @@ const showFreeUpgradeBanner = computed(
                 </span>
             </div>
             <div class="flex items-center space-x-2">
-                <Link href="/billing">
+                <Link
+                    v-if="isBillingActivated() && canManageBilling()"
+                    href="/billing">
                     <div
                         class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>
-                <button @click="showBlockedBanner = false" class="p-1">
+                <button @click="hideBlockedBanner = true" class="p-1">
                     <XMarkIcon
                         class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
@@ -102,13 +110,15 @@ const showFreeUpgradeBanner = computed(
                 >
             </div>
             <div class="flex items-center space-x-2">
-                <Link href="/billing">
+                <Link
+                    v-if="isBillingActivated() && canManageBilling()"
+                    href="/billing">
                     <div
                         class="text-white font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>
-                <button @click="showFreeUpgradeBanner = false" class="p-1">
+                <button @click="hideTrialBanner = true" class="p-1">
                     <XMarkIcon
                         class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>

resources/js/Components/Common/Member/MemberInviteModal.vue

@@ -17,7 +17,7 @@ import {
     isInTrial,
 } from '@/utils/billing';
 import { CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
-import { canUpdateOrganization } from '@/utils/permissions';
+import { canManageBilling, canUpdateOrganization } from '@/utils/permissions';
 import { api } from '@/packages/api/src';
 import type { MemberRole } from '@/packages/api/src';
 import { z } from 'zod';
@@ -117,7 +117,9 @@ const inviteMembersIsAllowed = computed(() => {
                         <strong>please upgrade to a paid plan</strong>.
                     </p>
 
-                    <Link href="/billing">
+                    <Link
+                        v-if="isBillingActivated() && canManageBilling()"
+                        href="/billing">
                         <PrimaryButton
                             type="button"
                             class="mt-6"

resources/js/Components/NotificationContainer.vue

@@ -38,11 +38,10 @@
                     or remove all users except the owner.
                 </p>
 
-                <Link href="/billing">
-                    <PrimaryButton
-                        type="button"
-                        class="mt-6"
-                        v-if="isBillingActivated() && canUpdateOrganization()">
+                <Link
+                    v-if="isBillingActivated() && canManageBilling()"
+                    href="/billing">
+                    <PrimaryButton type="button" class="mt-6">
                         <CreditCardIcon class="w-5 h-5 me-2" />
                         Go to Billing
                     </PrimaryButton>
@@ -63,7 +62,7 @@ import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/utils/notification';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { isBillingActivated } from '@/utils/billing';
-import { canUpdateOrganization } from '@/utils/permissions';
+import { canManageBilling } from '@/utils/permissions';
 import { CreditCardIcon, XCircleIcon } from '@heroicons/vue/20/solid';
 import { Link } from '@inertiajs/vue3';
 import PrimaryButton from '../packages/ui/src/Buttons/PrimaryButton.vue';

resources/js/Components/OrganizationSwitcher.vue

@@ -5,7 +5,7 @@ import DropdownLink from '@/Components/DropdownLink.vue';
 import { usePage } from '@inertiajs/vue3';
 import type { Organization, User } from '@/types/models';
 import { isBillingActivated } from '@/utils/billing';
-import { canUpdateOrganization } from '@/utils/permissions';
+import { canManageBilling } from '@/utils/permissions';
 import { switchOrganization } from '@/utils/useOrganization';
 
 const page = usePage<{
@@ -79,7 +79,7 @@ const switchToTeam = (organization: Organization) => {
                 </DropdownLink>
 
                 <DropdownLink
-                    v-if="canUpdateOrganization() && isBillingActivated()"
+                    v-if="canManageBilling() && isBillingActivated()"
                     href="/billing">
                     Billing
                 </DropdownLink>

resources/js/Layouts/AppLayout.vue

@@ -23,6 +23,7 @@ import { onMounted, ref } from 'vue';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores, refreshStores } from '@/utils/init';
 import {
+    canManageBilling,
     canUpdateOrganization,
     canViewClients,
     canViewMembers,
@@ -160,9 +161,7 @@ const page = usePage<{
                 <nav>
                     <ul>
                         <NavigationSidebarItem
-                            v-if="
-                                canUpdateOrganization() && isBillingActivated()
-                            "
+                            v-if="canManageBilling() && isBillingActivated()"
                             title="Billing"
                             :icon="CreditCardIcon"
                             href="/billing"></NavigationSidebarItem>

resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue

@@ -10,7 +10,7 @@ import type { Organization } from '@/types/models';
 import type { Permissions } from '@/types/jetstream';
 import { CreditCardIcon } from '@heroicons/vue/20/solid';
 import { isBillingActivated } from '@/utils/billing';
-import { canUpdateOrganization } from '@/utils/permissions';
+import { canManageBilling } from '@/utils/permissions';
 
 const props = defineProps<{
     team: Organization;
@@ -61,12 +61,10 @@ const updateTeamName = () => {
                     </div>
                 </div>
                 <div>
-                    <Link href="/billing">
-                        <PrimaryButton
-                            type="button"
-                            v-if="
-                                isBillingActivated() && canUpdateOrganization()
-                            ">
+                    <Link
+                        v-if="isBillingActivated() && canManageBilling()"
+                        href="/billing">
+                        <PrimaryButton type="button">
                             <CreditCardIcon class="w-5 h-5 me-2" />
                             Go to Billing
                         </PrimaryButton>

resources/js/utils/permissions.ts

@@ -96,3 +96,7 @@ export function canCreateTags() {
 export function canDeleteTags() {
     return currentUserHasPermission('tags:delete');
 }
+
+export function canManageBilling() {
+    return currentUserHasPermission('billing');
+}