refactor: upsell message (#88)

* chore: upsell message * fix: upgrade cta --------- Co-authored-by: Oğuzhan Koral <45078678+oguzhankoral@users.noreply.github.com> Co-authored-by: oguzhankoral <oguzhankoral@gmail.com>
2026-03-06 10:40:14 +02:00
parent 009cc77bab
commit b026659460
3 changed files with 36 additions and 131 deletions
@@ -32,33 +32,6 @@
          </FormButton>
        </div>
      </div>
-      <div
-        v-if="
-          canCreateModelResult &&
-          !canCreateModelResult.project.permissions.canCreateModel.authorized
-        "
-      >
-        <CommonAlert title="Cannot create new models" color="info" hide-icon>
-          <template #description>
-            {{ canCreateModelResult.project.permissions.canCreateModel.message }}
-
-            <FormButton
-              v-if="workspaceSlug"
-              full-width
-              color="primary"
-              size="sm"
-              class="mt-2"
-              @click="
-                $openUrl(
-                  `${account.accountInfo.serverInfo.url}/settings/workspaces/${workspaceSlug}/billing`
-                )
-              "
-            >
-              Explore Plans
-            </FormButton>
-          </template>
-        </CommonAlert>
-      </div>
      <div class="relative grid grid-cols-1 gap-2">
        <CommonLoadingBar v-if="loading" loading />

@@ -3,7 +3,6 @@
    <div class="space-y-2 relative">
      <div v-if="workspacesEnabled && workspaces" class="flex items-center space-x-2">
        <div class="flex-grow min-w-0">
-          <!-- NO WORKSPACE YET -->
          <div v-if="workspaces.length === 0">
            <FormButton
              full-width
@@ -79,13 +78,7 @@
            color="foundation"
          />
          <div class="flex justify-between items-center space-x-2">
-            <div
-              v-tippy="
-                canCreateProject
-                  ? 'Create new project'
-                  : canCreateProjectPermissionCheck?.message
-              "
-            >
+            <div v-if="canCreateProject" v-tippy="'Create new project'">
              <FormButton
                color="outline"
                :disabled="!canCreateProject"
@@ -95,6 +88,22 @@
                <PlusIcon class="w-4 -mx-2" />
              </FormButton>
            </div>
+            <div
+              v-else
+              v-tippy="
+                canCreateProject
+                  ? 'Create new project'
+                  : canCreateProjectPermissionCheck?.message
+              "
+            >
+              <FormButton
+                color="primary"
+                :class="`p-1.5 bg-foundation rounded text-foreground border`"
+                @click="upgradePlanButtonAction"
+              >
+                <ArrowUpCircleIcon class="w-4 -mx-2" />
+              </FormButton>
+            </div>
            <CommonDialog
              v-model:open="showProjectCreateDialog"
              :title="`Create new project`"
@@ -139,28 +148,6 @@
            </div>
          </div>
        </div>
-        <div
-          v-if="
-            canCreateProjectPermissionCheck &&
-            !canCreateProjectPermissionCheck.authorized &&
-            showUpgradePlanButton
-          "
-        >
-          <CommonAlert color="info" hide-icon>
-            <template #description>
-              {{ canCreateProjectPermissionCheck.message }}
-              <FormButton
-                full-width
-                class="mt-2"
-                color="primary"
-                size="sm"
-                @click="upgradePlanButtonAction()"
-              >
-                Upgrade now
-              </FormButton>
-            </template>
-          </CommonAlert>
-        </div>

        <WizardPersonalProjectsWarning v-if="isPersonalProjectsAsWorkspace" />

@@ -209,7 +196,7 @@
 <script setup lang="ts">
 import { ChevronDownIcon, ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
 import { storeToRefs } from 'pinia'
-import { PlusIcon } from '@heroicons/vue/20/solid'
+import { PlusIcon, ArrowUpCircleIcon } from '@heroicons/vue/20/solid'
 import type { DUIAccount } from '~/store/accounts'
 import { useAccountStore } from '~/store/accounts'
 import {
@@ -500,35 +487,6 @@ const canCreateProjectPermissionCheck = computed(() => {
  return null
 })

-const upgradePlanButtonAction = () => {
-  if (!canCreateProjectPermissionCheck.value) return
-  if (canCreateProjectPermissionCheck.value.code === 'WorkspaceNoEditorSeat') {
-    // open url to workspace/settings/users
-    $openUrl(
-      `${account.value.accountInfo.serverInfo.url}/settings/workspaces/${selectedWorkspace.value?.slug}/members`
-    )
-    return
-  }
-  if (canCreateProjectPermissionCheck.value.code === 'WorkspaceLimitsReached') {
-    // open url to workspace/billing
-    $openUrl(
-      `${account.value.accountInfo.serverInfo.url}/settings/workspaces/${selectedWorkspace.value?.slug}/billing`
-    )
-    return
-  }
-}
-
-const showUpgradePlanButton = computed(() => {
-  if (!canCreateProjectPermissionCheck.value) return false
-  if (
-    canCreateProjectPermissionCheck.value.code === 'WorkspaceNoEditorSeat' ||
-    canCreateProjectPermissionCheck.value.code === 'WorkspaceLimitsReached'
-  ) {
-    return true
-  }
-  return false
-})
-
 const isCreatingProject = ref(false)
 const showProjectCreateDialog = ref(false)

@@ -617,6 +575,24 @@ const createNewPersonalProject = async (name: string) => {
  isCreatingProject.value = false
 }

+const upgradePlanButtonAction = () => {
+  if (!canCreateProjectPermissionCheck.value) return
+  if (canCreateProjectPermissionCheck.value.code === 'WorkspaceNoEditorSeat') {
+    // open url to workspace/settings/users
+    $openUrl(
+      `${account.value.accountInfo.serverInfo.url}/settings/workspaces/${selectedWorkspace.value?.slug}/members`
+    )
+    return
+  }
+  if (canCreateProjectPermissionCheck.value.code === 'WorkspaceLimitsReached') {
+    // open url to workspace/billing
+    $openUrl(
+      `${account.value.accountInfo.serverInfo.url}/settings/workspaces/${selectedWorkspace.value?.slug}/billing`
+    )
+    return
+  }
+}
+
 const loadMore = () => {
  fetchMore({
    variables: { cursor: projectsResult.value?.activeUser?.projects.cursor },
@@ -1355,12 +1355,6 @@ export type CreateVersionInput = {
  totalChildrenCount?: InputMaybe<Scalars['Int']['input']>;
 };

-export type CreateWorkspaceResourceMetaInput = {
-  data: Scalars['JSON']['input'];
-  metaType: Scalars['String']['input'];
-  workspaceId: Scalars['String']['input'];
-};
-
 export enum Currency {
  Gbp = 'gbp',
  Usd = 'usd'
@@ -4186,19 +4180,6 @@ export type ProjectPermissionChecksCanUseInviteArgs = {
  type?: InputMaybe<InviteUseType>;
 };

-export type ProjectResourceMeta = {
-  __typename?: 'ProjectResourceMeta';
-  authorId?: Maybe<Scalars['ID']['output']>;
-  createdAt: Scalars['DateTime']['output'];
-  data: Scalars['JSON']['output'];
-  id: Scalars['ID']['output'];
-  metaType: Scalars['String']['output'];
-  projectId: Scalars['String']['output'];
-  resourceId: Scalars['String']['output'];
-  resourceType: ResourceMetaType;
-  updatedAt: Scalars['DateTime']['output'];
-};
-
 export type ProjectRole = {
  __typename?: 'ProjectRole';
  project: Project;
@@ -4459,8 +4440,6 @@ export type Query = {
   * Either token or workspaceId must be specified, or both
   */
  workspaceInvite?: Maybe<PendingWorkspaceCollaborator>;
-  workspaceResourceMeta: WorkspaceResourceMeta;
-  workspaceResourceMetaSearch: Array<WorkspaceResourceMeta>;
  /** Find workspaces a given user email can use SSO to sign with */
  workspaceSsoByEmail: Array<LimitedWorkspace>;
 };
@@ -4621,18 +4600,6 @@ export type QueryWorkspaceInviteArgs = {
 };


-export type QueryWorkspaceResourceMetaArgs = {
-  id: Scalars['ID']['input'];
-  workspaceId: Scalars['String']['input'];
-};
-
-
-export type QueryWorkspaceResourceMetaSearchArgs = {
-  metaType?: InputMaybe<Scalars['String']['input']>;
-  workspaceId: Scalars['String']['input'];
-};
-
-
 export type QueryWorkspaceSsoByEmailArgs = {
  email: Scalars['String']['input'];
 };
@@ -7392,17 +7359,6 @@ export type WorkspaceRequestToJoinInput = {
  workspaceId: Scalars['ID']['input'];
 };

-export type WorkspaceResourceMeta = {
-  __typename?: 'WorkspaceResourceMeta';
-  authorId?: Maybe<Scalars['ID']['output']>;
-  createdAt: Scalars['DateTime']['output'];
-  data: Scalars['JSON']['output'];
-  id: Scalars['ID']['output'];
-  metaType: Scalars['String']['output'];
-  updatedAt: Scalars['DateTime']['output'];
-  workspaceId: Scalars['String']['output'];
-};
-
 export enum WorkspaceRole {
  Admin = 'ADMIN',
  Guest = 'GUEST',