Always show the create goal button and open the upgrade modal when the goal limit is reached

resources/js/utils/useGoalsQuery.ts

@@ -1,9 +1,10 @@
-import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { useQuery, useQueryClient, type QueryClient } from '@tanstack/vue-query';
 import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import type { Goal } from '@/packages/api/src';
 import { computed } from 'vue';
 import { fetchAllPages } from '@/utils/fetchAllPages';
+import { canCreateMoreGoals, goalLimit } from '@/utils/billing';
 
 export type GoalArchivedFilter = 'true' | 'false' | 'all';
 
@@ -19,19 +20,38 @@ export async function fetchAllGoals(
     );
 }
 
-export function useGoalsQuery(archived: GoalArchivedFilter = 'false') {
-    const queryClient = useQueryClient();
-
-    const query = useQuery({
-        queryKey: computed(() => ['goals', getCurrentOrganizationId(), archived]),
+export function goalsQueryOptions(archived: GoalArchivedFilter = 'false') {
+    return {
+        queryKey: ['goals', getCurrentOrganizationId(), archived],
         queryFn: async () => {
             const organizationId = getCurrentOrganizationId();
             if (!organizationId) throw new Error('No organization');
             const data = await fetchAllGoals(organizationId, archived);
             return { data };
         },
-        enabled: () => !!getCurrentOrganizationId(),
         staleTime: 1000 * 30, // 30 seconds
+    };
+}
+
+/**
+ * Checks the goal limit outside of the goals page, where the goals are not loaded yet.
+ * Archived goals count towards the limit, so all goals are counted.
+ */
+export async function fetchCanCreateMoreGoals(queryClient: QueryClient): Promise<boolean> {
+    if (goalLimit() === null) {
+        return true;
+    }
+    const { data } = await queryClient.fetchQuery(goalsQueryOptions('all'));
+    return canCreateMoreGoals(data.length);
+}
+
+export function useGoalsQuery(archived: GoalArchivedFilter = 'false') {
+    const queryClient = useQueryClient();
+
+    const query = useQuery({
+        ...goalsQueryOptions(archived),
+        queryKey: computed(() => goalsQueryOptions(archived).queryKey),
+        enabled: () => !!getCurrentOrganizationId(),
         // Progress is computed server side, keep it fresh while the page is open
         refetchInterval: 1000 * 60,
     });