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

resources/js/Pages/Goals.vue

@@ -8,9 +8,9 @@ import { computed, ref } from 'vue';
 import GoalTable from '@/Components/Common/Goal/GoalTable.vue';
 import GoalCreateModal from '@/Components/Common/Goal/GoalCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
-import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
+import UpgradeBadge from '@/packages/ui/src/UpgradeBadge.vue';
 import { canCreateGoals } from '@/utils/permissions';
-import { canCreateMoreGoals, goalLimit } from '@/utils/billing';
+import { canCreateMoreGoals } from '@/utils/billing';
 import { useGoalsQuery } from '@/utils/useGoalsQuery';
 import { TabBar, TabBarItem } from '@/packages/ui/src';
 
@@ -25,7 +25,6 @@ const visibleGoals = computed(() =>
 );
 const archivedCount = computed(() => goals.value.filter((goal) => goal.is_archived).length);
 const canCreateMore = computed(() => canCreateMoreGoals(goals.value.length));
-const limit = goalLimit();
 </script>
 
 <template>
@@ -43,10 +42,7 @@ const limit = goalLimit();
                 </TabBar>
             </div>
             <div class="flex items-center space-x-3">
-                <UpgradeBadge v-if="canCreateGoals() && !canCreateMore">
-                    <strong>More than {{ limit }} goal{{ limit === 1 ? '' : 's' }}</strong> is only
-                    available in solidtime Professional.
-                </UpgradeBadge>
+                <UpgradeBadge v-if="canCreateGoals() && !canCreateMore" feature="goals" />
                 <SecondaryButton
                     v-if="canCreateGoals() && canCreateMore"
                     :icon="PlusIcon"

resources/js/Pages/ReportingDetailed.vue

@@ -43,7 +43,7 @@ import { useMembersQuery } from '@/utils/useMembersQuery';
 import { useQueryClient } from '@tanstack/vue-query';
 import { getCurrentOrganizationId, getCurrentMembershipId } from '@/utils/useUser';
 import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
-import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
+import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
 import type { ExportFormat } from '@/types/reporting';
 import { useNotificationsStore } from '@/utils/notification';
 import TimeEntryMassActionRow from '@/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue';
@@ -253,9 +253,7 @@ async function downloadExport(format: ExportFormat) {
         <ReportingExportModal
             v-model:show="showExportModal"
             :export-url="exportUrl"></ReportingExportModal>
-        <UpgradeModal v-model:show="showPremiumModal">
-            <strong>PDF Reports</strong> are only available in solidtime Professional.
-        </UpgradeModal>
+        <UpgradeModal v-model:show="showPremiumModal" feature="pdf-reports" />
         <MainContainer
             class="h-14 sm:h-16 border-b border-default-background-separator flex flex-wrap gap-y-3 justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, inject, ref, type ComputedRef } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import ActionSection from '@/Components/ActionSection.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import CancelTrialModal from '@/Components/Billing/CancelTrialModal.vue';
+import { daysLeftInTrial } from '@/utils/billing';
+import { formatDateLocalized } from '@/packages/ui/src/utils/time';
+import type { Organization } from '@/packages/api/src';
+
+const showCancelTrialModal = ref(false);
+
+const organization = inject<ComputedRef<Organization | undefined>>('organization');
+const page = usePage<{ billing: { trial_until: string | null } | null }>();
+const trialUntil = computed(() =>
+    page.props.billing?.trial_until
+        ? formatDateLocalized(page.props.billing.trial_until, organization?.value?.date_format)
+        : null
+);
+const daysLeftLabel = computed(() => {
+    const days = daysLeftInTrial();
+    return days === 1 ? '1 day' : `${days} days`;
+});
+</script>
+
+<template>
+    <ActionSection>
+        <template #title>Trial</template>
+
+        <template #description>Your organization is trying out solidtime Professional.</template>
+
+        <template #content>
+            <div class="max-w-xl text-sm text-text-secondary">
+                Your trial ends in
+                <span class="font-medium text-text-primary">{{ daysLeftLabel }}</span>
+                <template v-if="trialUntil"> ({{ trialUntil }})</template>. If you don't need the
+                Professional features, you can switch to the Free plan right away.
+            </div>
+
+            <div class="mt-5">
+                <SecondaryButton
+                    data-testid="cancel_trial_button"
+                    @click="showCancelTrialModal = true">
+                    Cancel trial
+                </SecondaryButton>
+            </div>
+
+            <CancelTrialModal v-model:show="showCancelTrialModal" />
+        </template>
+    </ActionSection>
+</template>

resources/js/Pages/Teams/Show.vue

@@ -8,6 +8,9 @@ import type { Permissions } from '@/types/jetstream';
 import OrganizationBillableRate from '@/Pages/Teams/Partials/OrganizationBillableRate.vue';
 import OrganizationFormatSettings from '@/Pages/Teams/Partials/OrganizationFormatSettings.vue';
 import OrganizationTimeEntrySettings from '@/Pages/Teams/Partials/OrganizationTimeEntrySettings.vue';
+import OrganizationTrial from '@/Pages/Teams/Partials/OrganizationTrial.vue';
+import { isBillingActivated, isInTrial } from '@/utils/billing';
+import { canManageBilling } from '@/utils/permissions';
 import { onMounted, ref } from 'vue';
 import { useOrganizationStore } from '@/utils/useOrganization';
 import { storeToRefs } from 'pinia';
@@ -52,6 +55,11 @@ onMounted(async () => {
                     <SectionBorder v-if="permissions.canUpdateTeam" />
                     <OrganizationTimeEntrySettings v-if="permissions.canUpdateTeam" />
 
+                    <template v-if="isBillingActivated() && isInTrial() && canManageBilling()">
+                        <SectionBorder />
+                        <OrganizationTrial />
+                    </template>
+
                     <template v-if="permissions.canDeleteTeam">
                         <SectionBorder />
                         <DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />