move upgrade modal to ui package and add trial status and cancel trial ui

This commit is contained in:
Gregor Vostrak
2026-10-13 14:58:12 +02:00
committed by Constantin Graf
parent 11dd4e174e
commit deb0c26e32
33 changed files with 1020 additions and 262 deletions

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3';
import { Head, router, usePage } from '@inertiajs/vue3';
import Banner from '@/Components/Banner.vue';
import OrganizationSwitcher from '@/Components/OrganizationSwitcher.vue';
import CurrentSidebarTimer from '@/Components/CurrentSidebarTimer.vue';
@@ -23,7 +23,7 @@ import { PanelLeft, Target } from '@lucide/vue';
import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
import MainContainer from '@/packages/ui/src/MainContainer.vue';
import { nextTick, onMounted, provide, ref } from 'vue';
import { computed, nextTick, onMounted, provide, ref } from 'vue';
import NotificationContainer from '@/Components/NotificationContainer.vue';
import { initializeStores } from '@/utils/init';
import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
@@ -39,11 +39,13 @@ import {
canViewTags,
} from '@/utils/permissions';
import { isBillingActivated, isInvoicingActivated } from '@/utils/billing';
import { upgradeCtaKey } from '@/packages/ui/src/UpgradeModal/useUpgradeCta';
import type { User } from '@/types/models';
import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
import { fetchToken, isTokenValid } from '@/utils/session';
import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
import BillingBanner from '@/Components/Billing/BillingBanner.vue';
import SidebarPlanStatus from '@/Components/Billing/SidebarPlanStatus.vue';
import UserTimezoneMismatchModal from '@/Components/Common/User/UserTimezoneMismatchModal.vue';
import { useTheme } from '@/utils/theme';
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
@@ -89,6 +91,11 @@ const { organization, isLoading: isOrganizationLoading } = useOrganizationQuery(
provide('organization', organization);
provide(upgradeCtaKey, {
canUpgrade: computed(() => isBillingActivated() && canManageBilling()),
goToBilling: () => router.visit('/billing'),
});
onMounted(async () => {
useTheme();
// make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
@@ -306,6 +313,7 @@ const page = usePage<{
</div>
<div class="justify-self-end">
<UpdateSidebarNotification></UpdateSidebarNotification>
<SidebarPlanStatus v-if="isBillingActivated() && canManageBilling()" />
<ul
class="border-t border-default-background-separator pt-3 gap-1 flex justify-between items-center">
<UserSettingsIcon></UserSettingsIcon>