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

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -18,7 +18,7 @@ import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
-import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
+import UpgradeBadge from '@/packages/ui/src/UpgradeBadge.vue';
 import { formatHumanReadableDuration } from '../../../packages/ui/src/utils/time';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { canUpdateProjects, canDeleteProjects } from '@/utils/permissions';
@@ -119,7 +119,9 @@ const showEditProjectModal = ref(false);
                     <div v-else class="text-text-tertiary">--</div>
                 </div>
                 <div class="whitespace-nowrap px-3 flex items-center text-sm text-text-primary">
-                    <UpgradeBadge v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
+                    <UpgradeBadge
+                        v-if="!isAllowedToPerformPremiumAction()"
+                        feature="estimates"></UpgradeBadge>
                     <EstimatedTimeProgress
                         v-else-if="project.estimated_time"
                         :estimated="project.estimated_time"

resources/js/Components/Common/Report/ReportSaveButton.vue

@@ -4,7 +4,7 @@ import ReportCreateModal from '@/Components/Common/Report/ReportCreateModal.vue'
 import { h, ref } from 'vue';
 import type { CreateReportBodyProperties } from '@/packages/api/src';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
-import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
+import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
 import { canCreateReports } from '@/utils/permissions';
 defineProps<{
     reportProperties: CreateReportBodyProperties;
@@ -30,9 +30,7 @@ function onSaveReportClick() {
     <ReportCreateModal
         v-model:show="showCreateReportModal"
         :properties="reportProperties"></ReportCreateModal>
-    <UpgradeModal v-model:show="showPremiumModal">
-        <strong>Sharable Reports</strong> is only available in solidtime Professional.
-    </UpgradeModal>
+    <UpgradeModal v-model:show="showPremiumModal" feature="shareable-reports" />
     <SecondaryButton v-if="canCreateReports()" :icon="SaveIcon" @click="onSaveReportClick"
         >Save Report</SecondaryButton
     >

resources/js/Components/Common/Reporting/ReportingExportButton.vue

@@ -10,7 +10,7 @@ import {
 import type { ExportFormat } from '@/types/reporting';
 import { ref } from 'vue';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
-import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
+import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
 
 const props = defineProps<{
     download: (format: ExportFormat) => Promise<void>;
@@ -48,9 +48,7 @@ function triggerDownload(format: ExportFormat) {
             <DropdownMenuItem @click="triggerDownload('ods')"> Export as ODS </DropdownMenuItem>
         </DropdownMenuContent>
     </DropdownMenu>
-    <UpgradeModal v-model:show="showPremiumModal">
-        <strong>PDF Reports</strong> are only available in solidtime Professional.
-    </UpgradeModal>
+    <UpgradeModal v-model:show="showPremiumModal" feature="pdf-reports" />
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Reporting/ReportingOverview.vue

@@ -30,7 +30,8 @@ import {
     DropdownMenuTrigger,
 } from '@/packages/ui/src';
 import ReportCreateModal from '@/Components/Common/Report/ReportCreateModal.vue';
-import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
+import UpgradeModal from '@/packages/ui/src/UpgradeModal.vue';
+import type { UpgradeFeature } from '@/packages/ui/src/UpgradeModal/useUpgradeCta';
 import { canCreateReports } from '@/utils/permissions';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { computed, type ComputedRef, inject, ref, watch } from 'vue';
@@ -214,10 +215,13 @@ const showExportModal = ref(false);
 const exportUrl = ref<string | null>(null);
 const showCreateReportModal = ref(false);
 const showPremiumModal = ref(false);
+// Note: The premium modal is shared by the PDF export and saving a report
+const premiumFeature = ref<UpgradeFeature>('pdf-reports');
 const exportLoading = ref(false);
 
 function triggerExport(format: ExportFormat) {
     if (format === 'pdf' && !isAllowedToPerformPremiumAction()) {
+        premiumFeature.value = 'pdf-reports';
         showPremiumModal.value = true;
         return;
     }
@@ -231,6 +235,7 @@ function onSaveReportClick() {
     if (isAllowedToPerformPremiumAction()) {
         showCreateReportModal.value = true;
     } else {
+        premiumFeature.value = 'shareable-reports';
         showPremiumModal.value = true;
     }
 }
@@ -299,9 +304,7 @@ const tableData = computed(() => {
     <ReportCreateModal
         v-model:show="showCreateReportModal"
         :properties="reportProperties"></ReportCreateModal>
-    <UpgradeModal v-model:show="showPremiumModal">
-        This feature is only available in solidtime Professional.
-    </UpgradeModal>
+    <UpgradeModal v-model:show="showPremiumModal" :feature="premiumFeature" />
     <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/Components/Common/Task/TaskTableRow.vue

@@ -9,7 +9,7 @@ import TaskEditModal from '@/Components/Common/Task/TaskEditModal.vue';
 import { ref, inject, type ComputedRef } from 'vue';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
-import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
+import UpgradeBadge from '@/packages/ui/src/UpgradeBadge.vue';
 import { formatHumanReadableDuration } from '../../../packages/ui/src/utils/time';
 import type { Organization } from '@/packages/api/src';
 
@@ -55,7 +55,9 @@ const showTaskEditModal = ref(false);
             <span v-else> -- </span>
         </div>
         <div class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
-            <UpgradeBadge v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
+            <UpgradeBadge
+                v-if="!isAllowedToPerformPremiumAction()"
+                feature="estimates"></UpgradeBadge>
             <EstimatedTimeProgress
                 v-else-if="task.estimated_time"
                 :estimated="task.estimated_time"

resources/js/Components/Common/UpgradeBadge.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { LockClosedIcon } from '@heroicons/vue/20/solid';
-import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
-import { ref } from 'vue';
-const showUpgradeModal = ref(false);
-</script>
-
-<template>
-    <UpgradeModal v-model:show="showUpgradeModal">
-        <slot>
-            <strong>Project and Task Estimates</strong> is only available in solidtime Professional.
-        </slot>
-    </UpgradeModal>
-    <button
-        class="inline-flex bg-secondary hover:bg-tertiary px-2 py-1 rounded border border-border-secondary hover:border-border-tertiary items-center space-x-1"
-        @click.prevent="showUpgradeModal = true">
-        <LockClosedIcon class="w-3 text-text-tertiary"></LockClosedIcon>
-        <span class="text-xs text-text-secondary font-semibold"> Upgrade </span>
-    </button>
-</template>
-
-<style scoped></style>

resources/js/Components/Common/UpgradeModal.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import DialogModal from '@/packages/ui/src/DialogModal.vue';
-import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
-import { Link } from '@inertiajs/vue3';
-import { isBillingActivated } from '@/utils/billing';
-import { CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
-import { canManageBilling, canUpdateOrganization } from '@/utils/permissions';
-import { SecondaryButton } from '@/packages/ui/src';
-
-const show = defineModel('show', { default: false });
-</script>
-
-<template>
-    <DialogModal closeable :show="show" @close="show = false">
-        <template #title>
-            <div class="flex space-x-2">
-                <span> Upgrade Plan </span>
-            </div>
-        </template>
-
-        <template #content>
-            <div>
-                <div
-                    class="rounded-full flex items-center justify-center w-20 h-20 mx-auto border border-border-tertiary bg-secondary">
-                    <UserGroupIcon class="w-12"></UserGroupIcon>
-                </div>
-                <div class="max-w-sm text-center mx-auto py-4 text-base">
-                    <p class="py-1">
-                        <slot></slot>
-                    </p>
-                    <p class="py-1 text-sm">
-                        If you want to use this feature,
-                        <strong class="font-semibold text-text-primary"
-                            >please upgrade to a paid plan</strong
-                        >
-                        or
-                        <strong class="font-semibold text-text-primary"
-                            >request a free trial</strong
-                        >
-                        via
-                        <a
-                            class="text-accent-200/80 transition text-accent-300"
-                            href="mailto:hello@solidtime.io"
-                            >hello@solidtime.io</a
-                        >
-                        to try out this feature.
-                    </p>
-
-                    <Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
-                        <PrimaryButton
-                            v-if="isBillingActivated() && canUpdateOrganization()"
-                            type="button"
-                            class="mt-6"
-                            :icon="CreditCardIcon">
-                            Go to Billing
-                        </PrimaryButton>
-                    </Link>
-                </div>
-            </div>
-        </template>
-        <template #footer>
-            <SecondaryButton @click="show = false">Close</SecondaryButton>
-        </template>
-    </DialogModal>
-</template>
-
-<style scoped></style>