Update billing extension to v0.0.11

e2e/goals.spec.ts

@@ -342,89 +342,6 @@ test('test that a running time entry counts towards the goal progress', async ({
     );
 });
 
-// Close to midnight UTC an entry that started a few minutes ago could fall on the previous day, so
-// the day of the goal is moved to a timezone (without daylight saving time) where it is late morning
-function timezoneAwayFromMidnight() {
-    const utcHour = new Date().getUTCHours();
-    return utcHour >= 2 && utcHour < 22 ? 'UTC' : 'Asia/Tokyo';
-}
-
-// Navigates via the sidebar, a full page load would start with an empty query cache and hide
-// a missing goals invalidation
-async function navigateViaSidebar(page: Page, name: 'Time' | 'Goals') {
-    await page.getByRole('link', { name, exact: true }).first().click();
-    await expect(page).toHaveURL(new RegExp('/' + name.toLowerCase() + '$'));
-}
-
-test('test that goal progress updates after creating a time entry without a page reload', async ({
-    page,
-    ctx,
-}) => {
-    const goal = await createGoalViaApi(ctx, {
-        name: 'Cache goal',
-        target_seconds: 3600,
-        period: 'day',
-        timezone: timezoneAwayFromMidnight(),
-    });
-
-    await goToGoalsOverview(page);
-    await expect(goalRow(page, goal.id).getByTestId('goal_tracked_time')).toHaveText('0h 00min');
-
-    await navigateViaSidebar(page, 'Time');
-    await page.getByRole('button', { name: 'Time entry actions' }).click();
-    await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
-    const durationInput = page.locator('[role="dialog"] input[name="Duration"]');
-    await durationInput.fill('15min');
-    await durationInput.press('Tab');
-    await Promise.all([
-        page.waitForResponse(
-            (response) => response.url().includes('/time-entries') && response.status() === 201
-        ),
-        page.getByRole('button', { name: 'Create Time Entry' }).click(),
-    ]);
-
-    await navigateViaSidebar(page, 'Goals');
-    await expect(goalRow(page, goal.id).getByTestId('goal_tracked_time')).toHaveText('0h 15min');
-});
-
-test('test that goal progress updates after changing the project of the running time entry without a page reload', async ({
-    page,
-    ctx,
-}) => {
-    const project = await createProjectViaApi(ctx, { name: 'Running Project', is_public: true });
-    const start = new Date(Date.now() - 30 * 60 * 1000).toISOString().replace(/\.\d{3}Z$/, 'Z');
-    await createRunningTimeEntryWithStartViaApi(ctx, 'Running work', start);
-    const goal = await createGoalViaApi(ctx, {
-        name: 'Running project goal',
-        target_seconds: 3600,
-        period: 'day',
-        timezone: timezoneAwayFromMidnight(),
-        filters: { project_ids: [project.id], time_entry_type: 'work' },
-    });
-
-    await goToGoalsOverview(page);
-    await expect(goalRow(page, goal.id).getByTestId('goal_tracked_time')).toHaveText('0h 00min');
-
-    await navigateViaSidebar(page, 'Time');
-    await page.getByRole('button', { name: 'No Project' }).click();
-    await Promise.all([
-        page.waitForResponse(
-            async (response) =>
-                response.url().includes('/time-entries') &&
-                response.request().method() === 'PUT' &&
-                response.status() === 200 &&
-                (await response.json()).data.project_id === project.id
-        ),
-        page.getByRole('option').filter({ hasText: project.name }).click(),
-    ]);
-
-    await navigateViaSidebar(page, 'Goals');
-    // The entry keeps running while the test runs
-    await expect(goalRow(page, goal.id).getByTestId('goal_tracked_time')).toHaveText(
-        /^0h 3[0-2]min$/
-    );
-});
-
 test('test that editing a goal via the modal works', async ({ page, ctx }) => {
     const goal = await createGoalViaApi(ctx, {
         name: 'Old goal name',

package.json

@@ -25,46 +25,46 @@
         "watch:api": "npm run watch --workspace=@solidtime/api"
     },
     "devDependencies": {
-        "@eslint/eslintrc": "^3.3.7",
+        "@eslint/eslintrc": "^3.3.5",
         "@eslint/js": "^9.39.4",
         "@inertiajs/vue3": "^2.3.23",
-        "@playwright/test": "^1.64.0",
+        "@playwright/test": "^1.60.0",
         "@tailwindcss/forms": "^0.5.11",
         "@tailwindcss/typography": "^0.5.19",
         "@types/chroma-js": "^3.1.2",
         "@types/node": "^22.19.19",
-        "@vitejs/plugin-vue": "^6.0.10",
-        "@vue/test-utils": "^2.5.1",
-        "@vue/tsconfig": "^0.9.1",
-        "autoprefixer": "^10.6.1",
-        "axios": "^1.20.0",
+        "@vitejs/plugin-vue": "^6.0.6",
+        "@vue/test-utils": "^2.4.6",
+        "@vue/tsconfig": "^0.8.1",
+        "autoprefixer": "^10.5.0",
+        "axios": "^1.16.0",
         "eslint-plugin-unused-imports": "^4.4.1",
         "happy-dom": "^20.8.9",
         "laravel-vite-plugin": "^2.1.0",
         "openapi-zod-client": "^1.18.3",
-        "postcss": "^8.5.29",
+        "postcss": "^8.5.14",
         "postcss-import": "^15.1.0",
         "postcss-nesting": "^12.1.5",
         "tailwindcss": "^3.4.19",
         "typescript": "^5.9.3",
         "vite": "^7.3.3",
-        "vite-plugin-checker": "^0.14.5",
+        "vite-plugin-checker": "^0.12.0",
         "vitest": "^4.1.4",
-        "vue": "^3.5.43",
-        "vue-tsc": "^3.3.13"
+        "vue": "^3.5.34",
+        "vue-tsc": "^3.2.8"
     },
     "dependencies": {
         "@floating-ui/core": "^1.7.5",
         "@floating-ui/vue": "^1.1.11",
         "@heroicons/vue": "^2.2.0",
-        "@lucide/vue": "^1.55.0",
+        "@lucide/vue": "^1.28.0",
         "@rushstack/eslint-patch": "^1.16.1",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tanstack/vue-form": "^1.33.5",
-        "@tanstack/vue-query": "^5.104.2",
+        "@tanstack/vue-form": "^1.32.0",
+        "@tanstack/vue-query": "^5.100.10",
         "@tanstack/vue-query-devtools": "^5.91.0",
         "@tanstack/vue-table": "^8.21.3",
-        "@tanstack/vue-virtual": "^3.13.41",
+        "@tanstack/vue-virtual": "^3.13.24",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.7.0",
         "@vueuse/core": "^14.4.0",
@@ -73,17 +73,17 @@
         "chroma-js": "^3.2.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "dayjs": "^1.11.23",
+        "dayjs": "^1.11.20",
         "echarts": "^6.0.0",
-        "focus-trap": "^8.2.3",
-        "parse-duration": "^2.1.9",
+        "focus-trap": "^8.2.0",
+        "parse-duration": "^2.1.6",
         "pinia": "^3.0.4",
         "radix-vue": "^1.9.17",
-        "reka-ui": "^2.11.0",
+        "reka-ui": "^2.10.1",
         "tailwind-merge": "^2.6.1",
         "tailwindcss-animate": "^1.0.7",
         "vue-draggable-plus": "^0.6.1",
-        "vue-echarts": "^8.3.2",
+        "vue-echarts": "^8.0.1",
         "zod": "^3.25.76"
     },
     "overrides": {

resources/js/Components/CommandPalette/CommandPaletteProvider.vue

@@ -29,7 +29,6 @@ import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue'
 import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
 import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
 import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
-import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
 import MemberInviteModal from '@/Components/Common/Member/MemberInviteModal.vue';
 import TimeEntryCreateModal from '@/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue';
 
@@ -54,7 +53,6 @@ const {
     showCreateTaskModal,
     showCreateTagModal,
     showCreateGoalModal,
-    showGoalUpgradeModal,
     showInviteMemberModal,
     showCreateTimeEntryModal,
     showProjectSelector,
@@ -187,7 +185,6 @@ const firstProjectId = computed(() => projects.value[0]?.id ?? '');
 
     <!-- Goal Create Modal -->
     <GoalCreateModal v-model:show="showCreateGoalModal" />
-    <UpgradeModal v-model:show="showGoalUpgradeModal" feature="goals" />
 
     <!-- Member Invite Modal -->
     <MemberInviteModal v-model:show="showInviteMemberModal" :available-roles="availableRoles" />

resources/js/Components/Common/Goal/GoalCreateButton.test.ts

@@ -1,43 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import GoalCreateButton from './GoalCreateButton.vue';
-
-function mountGoalCreateButton(canCreateMoreGoals: boolean) {
-    return mount(GoalCreateButton, {
-        props: { canCreateMoreGoals },
-        slots: { default: 'Create your first goal' },
-        global: {
-            stubs: {
-                GoalCreateModal: { name: 'GoalCreateModal', props: ['show'], template: '<div />' },
-                UpgradeModal: {
-                    name: 'UpgradeModal',
-                    props: ['show', 'feature'],
-                    template: '<div />',
-                },
-            },
-        },
-    });
-}
-
-describe('GoalCreateButton', () => {
-    it('opens the create modal while more goals can be created', async () => {
-        const wrapper = mountGoalCreateButton(true);
-
-        await wrapper.get('button').trigger('click');
-
-        expect(wrapper.getComponent({ name: 'GoalCreateModal' }).props('show')).toBe(true);
-        expect(wrapper.getComponent({ name: 'UpgradeModal' }).props('show')).toBe(false);
-    });
-
-    it('opens the upgrade modal once the goal limit is reached', async () => {
-        const wrapper = mountGoalCreateButton(false);
-
-        expect(wrapper.get('button').text()).toBe('Create your first goal');
-        await wrapper.get('button').trigger('click');
-
-        const upgradeModal = wrapper.getComponent({ name: 'UpgradeModal' });
-        expect(upgradeModal.props('show')).toBe(true);
-        expect(upgradeModal.props('feature')).toBe('goals');
-        expect(wrapper.getComponent({ name: 'GoalCreateModal' }).props('show')).toBe(false);
-    });
-});

resources/js/Components/Common/Goal/GoalCreateButton.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
-import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
-import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
-import { PlusIcon } from '@heroicons/vue/16/solid';
-import { ref } from 'vue';
-
-const props = defineProps<{
-    canCreateMoreGoals: boolean;
-}>();
-
-const showCreateGoalModal = ref(false);
-const showUpgradeModal = ref(false);
-
-// The button stays visible when the goal limit is reached and explains the limit instead
-function onClick() {
-    if (props.canCreateMoreGoals) {
-        showCreateGoalModal.value = true;
-    } else {
-        showUpgradeModal.value = true;
-    }
-}
-</script>
-
-<template>
-    <GoalCreateModal v-model:show="showCreateGoalModal"></GoalCreateModal>
-    <UpgradeModal v-model:show="showUpgradeModal" feature="goals" />
-    <SecondaryButton :icon="PlusIcon" @click="onClick">
-        <slot>Create Goal</slot>
-    </SecondaryButton>
-</template>

resources/js/Components/Common/Goal/GoalTable.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { Target } from '@lucide/vue';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import { ref } from 'vue';
 import type { Goal } from '@/packages/api/src';
 import GoalTableRow from '@/Components/Common/Goal/GoalTableRow.vue';
 import GoalTableHeading from '@/Components/Common/Goal/GoalTableHeading.vue';
-import GoalCreateButton from '@/Components/Common/Goal/GoalCreateButton.vue';
+import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
 import { canCreateGoals } from '@/utils/permissions';
 import { LoadingSpinner } from '@/packages/ui/src';
 import { isGoalsExtensionActivated } from '@/utils/billing';
@@ -15,6 +18,7 @@ const props = defineProps<{
     showingArchived: boolean;
 }>();
 
+const showCreateGoalModal = ref(false);
 const showTargetColumn = isGoalsExtensionActivated();
 // Every column gets a share of the free space so the columns are spread evenly over the table
 const gridTemplateColumns = [
@@ -29,6 +33,7 @@ const gridTemplateColumns = [
 </script>
 
 <template>
+    <GoalCreateModal v-model:show="showCreateGoalModal"></GoalCreateModal>
     <div class="flow-root max-w-[100vw] overflow-x-auto">
         <div class="inline-block min-w-full align-middle">
             <div data-testid="goal_table" class="grid min-w-full" :style="{ gridTemplateColumns }">
@@ -46,11 +51,14 @@ const gridTemplateColumns = [
                     <p v-if="canCreateGoals() && !props.showingArchived" class="pb-5">
                         Set yourself a target and track your progress every day, week or month.
                     </p>
-                    <GoalCreateButton
-                        v-if="canCreateGoals() && !props.showingArchived"
-                        :can-create-more-goals="props.canCreateMoreGoals"
+                    <SecondaryButton
+                        v-if="
+                            canCreateGoals() && !props.showingArchived && props.canCreateMoreGoals
+                        "
+                        :icon="PlusIcon"
+                        @click="showCreateGoalModal = true"
                         >Create your first goal
-                    </GoalCreateButton>
+                    </SecondaryButton>
                 </div>
                 <template v-for="goal in props.goals" :key="goal.id">
                     <GoalTableRow

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

@@ -43,7 +43,6 @@ const deleteMutation = useMutation({
     onSuccess: () => {
         close();
         queryClient.invalidateQueries({ queryKey: ['members'] });
-        queryClient.invalidateQueries({ queryKey: ['goals'] });
     },
 });
 

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

@@ -52,7 +52,6 @@ async function submit() {
             'There was an error merging the members.',
             () => {
                 queryClient.invalidateQueries({ queryKey: ['members'] });
-                queryClient.invalidateQueries({ queryKey: ['goals'] });
                 show.value = false;
             }
         );

resources/js/Pages/Goals.vue

@@ -2,15 +2,19 @@
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
 import { Target } from '@lucide/vue';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { computed, ref } from 'vue';
 import GoalTable from '@/Components/Common/Goal/GoalTable.vue';
-import GoalCreateButton from '@/Components/Common/Goal/GoalCreateButton.vue';
+import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
+import UpgradeBadge from '@/packages/ui/src/UpgradeBadge.vue';
 import { canCreateGoals } from '@/utils/permissions';
 import { canCreateMoreGoals } from '@/utils/billing';
 import { useGoalsQuery } from '@/utils/useGoalsQuery';
 import { TabBar, TabBarItem } from '@/packages/ui/src';
 
+const showCreateGoalModal = ref(false);
 const activeTab = ref('active');
 const showArchived = computed(() => activeTab.value === 'archived');
 
@@ -37,9 +41,16 @@ const canCreateMore = computed(() => canCreateMoreGoals(goals.value.length));
                     </TabBarItem>
                 </TabBar>
             </div>
-            <GoalCreateButton
-                v-if="canCreateGoals()"
-                :can-create-more-goals="canCreateMore"></GoalCreateButton>
+            <div class="flex items-center space-x-3">
+                <UpgradeBadge v-if="canCreateGoals() && !canCreateMore" feature="goals" />
+                <SecondaryButton
+                    v-if="canCreateGoals() && canCreateMore"
+                    :icon="PlusIcon"
+                    @click="showCreateGoalModal = true"
+                    >Create Goal
+                </SecondaryButton>
+            </div>
+            <GoalCreateModal v-model:show="showCreateGoalModal"></GoalCreateModal>
         </MainContainer>
         <GoalTable
             :goals="visibleGoals"

resources/js/utils/timesheet/useBreakPlacement.ts

@@ -422,7 +422,6 @@ export function useBreakPlacement(deps: BreakPlacementDeps) {
         },
         onSettled: () => {
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
         },
     });
 

resources/js/utils/timesheet/useCopyLastWeek.ts

@@ -217,7 +217,6 @@ export function useCopyLastWeek(
             }
 
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
 
             if (attempted === 0) return;
 

resources/js/utils/timesheet/useTimesheetCellMutations.ts

@@ -174,7 +174,6 @@ export function useTimesheetCellMutations(
             );
         } finally {
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
         }
     }
 

resources/js/utils/useCommandPalette.ts

@@ -22,8 +22,6 @@ import {
     canCreateInvitations,
 } from '@/utils/permissions';
 import { isBillingActivated, isInvoicingActivated } from '@/utils/billing';
-import { useQueryClient } from '@tanstack/vue-query';
-import { fetchCanCreateMoreGoals } from '@/utils/useGoalsQuery';
 import { useTimeEntriesInfiniteQuery } from '@/utils/useTimeEntriesInfiniteQuery';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import { useClientsQuery } from '@/utils/useClientsQuery';
@@ -68,7 +66,6 @@ const showCreateClientModal = ref(false);
 const showCreateTaskModal = ref(false);
 const showCreateTagModal = ref(false);
 const showCreateGoalModal = ref(false);
-const showGoalUpgradeModal = ref(false);
 const showInviteMemberModal = ref(false);
 const showCreateTimeEntryModal = ref(false);
 
@@ -106,7 +103,6 @@ const ENTITY_ICONS: Record<string, typeof FolderIcon> = {
 };
 
 export function useCommandPalette() {
-    const queryClient = useQueryClient();
     const currentTimeEntryStore = useCurrentTimeEntryStore();
     const { currentTimeEntry, isActive } = storeToRefs(currentTimeEntryStore);
     const { setActiveState, updateTimer } = currentTimeEntryStore;
@@ -244,13 +240,9 @@ export function useCommandPalette() {
         showCreateTagModal.value = true;
     }
 
-    async function openCreateGoalModal() {
+    function openCreateGoalModal() {
         closePaletteAfterAction();
-        if (await fetchCanCreateMoreGoals(queryClient)) {
-            showCreateGoalModal.value = true;
-        } else {
-            showGoalUpgradeModal.value = true;
-        }
+        showCreateGoalModal.value = true;
     }
 
     function openInviteMemberModal() {
@@ -533,7 +525,6 @@ export function useCommandPalette() {
         showCreateTaskModal,
         showCreateTagModal,
         showCreateGoalModal,
-        showGoalUpgradeModal,
         showInviteMemberModal,
         showCreateTimeEntryModal,
         showProjectSelector,

resources/js/utils/useCurrentTimeEntry.ts

@@ -261,7 +261,6 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
                     stopLiveTimer();
                 }
             }
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
         } else {
             throw new Error(
                 'Failed to fetch current time entry because organization ID is missing.'

resources/js/utils/useGoalsQuery.ts

@@ -1,10 +1,9 @@
-import { useQuery, useQueryClient, type QueryClient } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } 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';
 
@@ -20,38 +19,19 @@ export async function fetchAllGoals(
     );
 }
 
-export function goalsQueryOptions(archived: GoalArchivedFilter = 'false') {
-    return {
-        queryKey: ['goals', getCurrentOrganizationId(), archived],
+export function useGoalsQuery(archived: GoalArchivedFilter = 'false') {
+    const queryClient = useQueryClient();
+
+    const query = useQuery({
+        queryKey: computed(() => ['goals', getCurrentOrganizationId(), archived]),
         queryFn: async () => {
             const organizationId = getCurrentOrganizationId();
             if (!organizationId) throw new Error('No organization');
             const data = await fetchAllGoals(organizationId, archived);
             return { data };
         },
-        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(),
+        staleTime: 1000 * 30, // 30 seconds
         // Progress is computed server side, keep it fresh while the page is open
         refetchInterval: 1000 * 60,
     });

resources/js/utils/useTimeEntriesMutations.ts

@@ -36,7 +36,6 @@ export function useTimeEntriesMutations() {
         },
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
         },
     });
 
@@ -59,7 +58,6 @@ export function useTimeEntriesMutations() {
         },
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
         },
     });
 
@@ -107,7 +105,6 @@ export function useTimeEntriesMutations() {
         },
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
         },
     });
 
@@ -130,7 +127,6 @@ export function useTimeEntriesMutations() {
         },
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
         },
     });
 
@@ -156,7 +152,6 @@ export function useTimeEntriesMutations() {
         },
         onSuccess: () => {
             queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-            queryClient.invalidateQueries({ queryKey: ['goals'] });
         },
     });