From cbc16cd287fd2669b8cd17afc91167f6b46f75cf Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Mon, 25 Mar 2024 17:13:40 +0200
Subject: [PATCH] web/satellite: allow trial expired project members to make
 actions

Change-Id: I90bb851230a8ff0d56f9e54070a76175b568af9c
---
 web/satellite/src/App.vue                             |  6 +++---
 .../src/components/TrialExpirationBanner.vue          |  7 +++++--
 web/satellite/src/composables/useTrialCheck.ts        | 11 +++++++++--
 web/satellite/src/layouts/default/ProjectNav.vue      |  2 +-
 web/satellite/src/views/Access.vue                    |  4 ++--
 web/satellite/src/views/Applications.vue              |  4 ++--
 web/satellite/src/views/Buckets.vue                   |  4 ++--
 web/satellite/src/views/Dashboard.vue                 |  4 ++--
 web/satellite/src/views/ProjectSettings.vue           |  4 ++--
 web/satellite/src/views/Projects.vue                  | 10 ++++------
 web/satellite/src/views/Team.vue                      |  4 ++--
 11 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/web/satellite/src/App.vue b/web/satellite/src/App.vue
index a47878a5c20e..c06d6f5a795e 100644
--- a/web/satellite/src/App.vue
+++ b/web/satellite/src/App.vue
@@ -106,7 +106,7 @@ async function setup() {
             analyticsStore.pageVisit(ROUTES.DashboardAnalyticsLink);
             analyticsStore.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
 
-            if (usersStore.getShouldPromptPassphrase(project.ownerId === usersStore.state.user.id)) {
+            if (usersStore.getShouldPromptPassphrase(project.ownerId === usersStore.state.user.id) && !user.value.freezeStatus.trialExpiredFrozen) {
                 appStore.toggleProjectPassphraseDialog(true);
             }
         }
@@ -150,7 +150,7 @@ usersStore.$onAction(({ name, after }) => {
     if (name === 'login') {
         after((_) => {
             setup().then(() => {
-                if (user.value.paidTier) return;
+                if (user.value.paidTier || route.name !== ROUTES.Dashboard.name || projectsStore.state.selectedProject.ownerId !== user.value.id) return;
 
                 const expirationInfo = user.value.getExpirationInfo(configStore.state.config.daysBeforeTrialEndNotification);
                 if (user.value.freezeStatus.trialExpiredFrozen || expirationInfo.isCloseToExpiredTrial) {
@@ -168,7 +168,7 @@ watch(() => projectsStore.state.selectedProject, (project, oldProject) => {
     if (project.id === oldProject.id) {
         return;
     }
-    if (usersStore.getShouldPromptPassphrase(project.ownerId === usersStore.state.user.id)) {
+    if (usersStore.getShouldPromptPassphrase(project.ownerId === usersStore.state.user.id) && !user.value.freezeStatus.trialExpiredFrozen) {
         appStore.toggleProjectPassphraseDialog(true);
     }
 });
diff --git a/web/satellite/src/components/TrialExpirationBanner.vue b/web/satellite/src/components/TrialExpirationBanner.vue
index e27e5267a251..8ebadaa08f1b 100644
--- a/web/satellite/src/components/TrialExpirationBanner.vue
+++ b/web/satellite/src/components/TrialExpirationBanner.vue
@@ -3,7 +3,10 @@
 
 <template>
     <v-alert border class="my-4 pb-5" variant="outlined" :color="expired ? 'error' : 'warning'" :title="title" closable>
-        <p class="text-body-2 mt-2 mb-4">{{ info }}</p>
+        <p class="text-body-2 mt-2 mb-4">
+            {{ info }} Upgrade to continue using Storj for your own projects.<br>
+            <strong>Note:</strong> You will continue to maintain access to projects that you are a member of.
+        </p>
         <v-btn :color="expired ? 'error' : 'warning'" :prepend-icon="mdiArrowUpCircleOutline" @click="onUpgrade">
             Upgrade
         </v-btn>
@@ -41,7 +44,7 @@ const title = computed<string>(() => {
  * Returns expiration info based on expired status.
  */
 const info = computed<string>(() => {
-    return props.expired ? `Your trial expired ${expirationInfo.value.days} days ago. Upgrade to keep using Storj.` : `Only ${expirationInfo.value.days} days left in your trial. Upgrade to keep using Storj.`;
+    return props.expired ? `Your trial expired ${expirationInfo.value.days} days ago.` : `Only ${expirationInfo.value.days} days left in your trial.`;
 });
 
 /**
diff --git a/web/satellite/src/composables/useTrialCheck.ts b/web/satellite/src/composables/useTrialCheck.ts
index ffef020b0f28..c370f26921f1 100644
--- a/web/satellite/src/composables/useTrialCheck.ts
+++ b/web/satellite/src/composables/useTrialCheck.ts
@@ -7,13 +7,16 @@ import { useUsersStore } from '@/store/modules/usersStore';
 import { useAppStore } from '@/store/modules/appStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { ExpirationInfo, User } from '@/types/users';
+import { useProjectsStore } from '@/store/modules/projectsStore';
 
 export function useTrialCheck() {
     const userStore = useUsersStore();
+    const projectsStore = useProjectsStore();
     const appStore = useAppStore();
     const configStore = useConfigStore();
 
     const user = computed<User>(() => userStore.state.user);
+    const isUserProjectOwner = computed<boolean>(() => projectsStore.state.selectedProject.ownerId === user.value.id);
     const expirationInfo = computed<ExpirationInfo>(() => user.value.getExpirationInfo(configStore.state.config.daysBeforeTrialEndNotification));
 
     const isTrialExpirationBanner = computed<boolean>(() => {
@@ -24,8 +27,11 @@ export function useTrialCheck() {
 
     const isExpired = computed<boolean>(() => user.value.freezeStatus.trialExpiredFrozen);
 
-    function withTrialCheck(callback: () => void | Promise<void>): void {
-        if (!user.value.paidTier && user.value.freezeStatus.trialExpiredFrozen) {
+    function withTrialCheck(callback: () => void | Promise<void>, skipProjectOwningCheck = false): void {
+        const isTrialExpired = !user.value.paidTier && user.value.freezeStatus.trialExpiredFrozen;
+        const isEligibleForExpirationDialog = isTrialExpired && (skipProjectOwningCheck || isUserProjectOwner.value);
+
+        if (isEligibleForExpirationDialog) {
             appStore.toggleExpirationDialog(true);
             return;
         }
@@ -36,6 +42,7 @@ export function useTrialCheck() {
     return {
         isTrialExpirationBanner,
         isExpired,
+        isUserProjectOwner,
         expirationInfo,
         withTrialCheck,
     };
diff --git a/web/satellite/src/layouts/default/ProjectNav.vue b/web/satellite/src/layouts/default/ProjectNav.vue
index bce04328b106..a6dabd555b4c 100644
--- a/web/satellite/src/layouts/default/ProjectNav.vue
+++ b/web/satellite/src/layouts/default/ProjectNav.vue
@@ -402,7 +402,7 @@ function trackViewSupportEvent(link: string): void {
 function onCreateProject() {
     withTrialCheck(() => {
         isCreateProjectDialogShown.value = true;
-    });
+    }, true);
 }
 
 /**
diff --git a/web/satellite/src/views/Access.vue b/web/satellite/src/views/Access.vue
index 072dea8e0bfd..b30292cba063 100644
--- a/web/satellite/src/views/Access.vue
+++ b/web/satellite/src/views/Access.vue
@@ -3,7 +3,7 @@
 
 <template>
     <v-container>
-        <trial-expiration-banner v-if="isTrialExpirationBanner" :expired="isExpired" />
+        <trial-expiration-banner v-if="isTrialExpirationBanner && isUserProjectOwner" :expired="isExpired" />
 
         <PageTitleComponent title="Access Keys" />
         <PageSubtitleComponent subtitle="Create Access Grants, S3 Credentials, and API Keys." link="https://docs.storj.io/dcs/access" />
@@ -42,7 +42,7 @@ import TrialExpirationBanner from '@/components/TrialExpirationBanner.vue';
 
 const dialog = ref<boolean>(false);
 
-const { isTrialExpirationBanner, isExpired, withTrialCheck } = useTrialCheck();
+const { isTrialExpirationBanner, isUserProjectOwner, isExpired, withTrialCheck } = useTrialCheck();
 
 /**
  * Starts create access grant flow if user's free trial is not expired.
diff --git a/web/satellite/src/views/Applications.vue b/web/satellite/src/views/Applications.vue
index 6b586fbdfeef..f059f63be079 100644
--- a/web/satellite/src/views/Applications.vue
+++ b/web/satellite/src/views/Applications.vue
@@ -5,7 +5,7 @@
     <v-container class="pb-12">
         <v-row>
             <v-col>
-                <trial-expiration-banner v-if="isTrialExpirationBanner" :expired="isExpired" />
+                <trial-expiration-banner v-if="isTrialExpirationBanner && isUserProjectOwner" :expired="isExpired" />
 
                 <PageTitleComponent title="Applications" />
                 <PageSubtitleComponent subtitle="Connect Storj with third-party applications." link="https://www.storj.io/integrations" />
@@ -55,7 +55,7 @@ import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
 import ApplicationItem from '@/components/ApplicationItem.vue';
 import TrialExpirationBanner from '@/components/TrialExpirationBanner.vue';
 
-const { isTrialExpirationBanner, isExpired } = useTrialCheck();
+const { isTrialExpirationBanner, isUserProjectOwner, isExpired } = useTrialCheck();
 
 const selectedChips = ref<AppCategory[]>([AppCategory.All]);
 
diff --git a/web/satellite/src/views/Buckets.vue b/web/satellite/src/views/Buckets.vue
index 9d4842575e27..a526c9b92ae2 100644
--- a/web/satellite/src/views/Buckets.vue
+++ b/web/satellite/src/views/Buckets.vue
@@ -3,7 +3,7 @@
 
 <template>
     <v-container>
-        <trial-expiration-banner v-if="isTrialExpirationBanner" :expired="isExpired" />
+        <trial-expiration-banner v-if="isTrialExpirationBanner && isUserProjectOwner" :expired="isExpired" />
 
         <PageTitleComponent title="Browse Buckets" />
         <PageSubtitleComponent
@@ -44,7 +44,7 @@ import CreateBucketDialog from '@/components/dialogs/CreateBucketDialog.vue';
 import IconNew from '@/components/icons/IconNew.vue';
 import TrialExpirationBanner from '@/components/TrialExpirationBanner.vue';
 
-const { isTrialExpirationBanner, isExpired, withTrialCheck } = useTrialCheck();
+const { isTrialExpirationBanner, isUserProjectOwner, isExpired, withTrialCheck } = useTrialCheck();
 
 const isCreateBucketDialogOpen = ref<boolean>(false);
 
diff --git a/web/satellite/src/views/Dashboard.vue b/web/satellite/src/views/Dashboard.vue
index 0641460103f4..dbf08e77f73f 100644
--- a/web/satellite/src/views/Dashboard.vue
+++ b/web/satellite/src/views/Dashboard.vue
@@ -3,7 +3,7 @@
 
 <template>
     <v-container class="pb-15">
-        <trial-expiration-banner v-if="isTrialExpirationBanner" :expired="isExpired" />
+        <trial-expiration-banner v-if="isTrialExpirationBanner && isUserProjectOwner" :expired="isExpired" />
 
         <next-steps-container />
 
@@ -336,7 +336,7 @@ const notify = useNotify();
 const router = useRouter();
 const isLowBalance = useLowTokenBalance();
 const { isLoading, withLoading } = useLoading();
-const { isTrialExpirationBanner, isExpired, withTrialCheck } = useTrialCheck();
+const { isTrialExpirationBanner, isUserProjectOwner, isExpired, withTrialCheck } = useTrialCheck();
 
 const chartWidth = ref<number>(0);
 const chartContainer = ref<ComponentPublicInstance>();
diff --git a/web/satellite/src/views/ProjectSettings.vue b/web/satellite/src/views/ProjectSettings.vue
index 89850103cfb9..7547485e324e 100644
--- a/web/satellite/src/views/ProjectSettings.vue
+++ b/web/satellite/src/views/ProjectSettings.vue
@@ -5,7 +5,7 @@
     <v-container>
         <v-row>
             <v-col>
-                <trial-expiration-banner v-if="isTrialExpirationBanner" :expired="isExpired" />
+                <trial-expiration-banner v-if="isTrialExpirationBanner && isUserProjectOwner" :expired="isExpired" />
 
                 <PageTitleComponent title="Project Settings" />
                 <PageSubtitleComponent subtitle="Edit project information and set custom project limits." link="https://docs.storj.io/learn/concepts/limits" />
@@ -182,7 +182,7 @@ const usersStore = useUsersStore();
 const configStore = useConfigStore();
 
 const notify = useNotify();
-const { isTrialExpirationBanner, isExpired } = useTrialCheck();
+const { isTrialExpirationBanner, isUserProjectOwner, isExpired } = useTrialCheck();
 
 /**
  * Indicates if billing features are enabled.
diff --git a/web/satellite/src/views/Projects.vue b/web/satellite/src/views/Projects.vue
index 0daf0f481008..854e5188fb83 100644
--- a/web/satellite/src/views/Projects.vue
+++ b/web/satellite/src/views/Projects.vue
@@ -199,7 +199,7 @@ function newProjectClicked() {
     withTrialCheck(() => {
         analyticsStore.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
         isCreateProjectDialogShown.value = true;
-    });
+    }, true);
 }
 
 /**
@@ -213,10 +213,8 @@ function redirectToBilling(): void {
  * Displays the Join Project modal.
  */
 function onJoinClicked(item: ProjectItemModel): void {
-    withTrialCheck(() => {
-        joiningItem.value = item;
-        isJoinProjectDialogShown.value = true;
-    });
+    joiningItem.value = item;
+    isJoinProjectDialogShown.value = true;
 }
 
 /**
@@ -226,7 +224,7 @@ function onInviteClicked(item: ProjectItemModel): void {
     withTrialCheck(() => {
         addMemberProjectId.value = item.id;
         isAddMemberDialogShown.value = true;
-    });
+    }, true);
 }
 
 /**
diff --git a/web/satellite/src/views/Team.vue b/web/satellite/src/views/Team.vue
index 86a9116cc5e7..4a8d07d3bb4b 100644
--- a/web/satellite/src/views/Team.vue
+++ b/web/satellite/src/views/Team.vue
@@ -3,7 +3,7 @@
 
 <template>
     <v-container>
-        <trial-expiration-banner v-if="isTrialExpirationBanner" :expired="isExpired" />
+        <trial-expiration-banner v-if="isTrialExpirationBanner && isUserProjectOwner" :expired="isExpired" />
 
         <PageTitleComponent title="Team Members" />
         <PageSubtitleComponent
@@ -42,7 +42,7 @@ import TrialExpirationBanner from '@/components/TrialExpirationBanner.vue';
 
 const projectsStore = useProjectsStore();
 
-const { isTrialExpirationBanner, isExpired, withTrialCheck } = useTrialCheck();
+const { isTrialExpirationBanner, isUserProjectOwner, isExpired, withTrialCheck } = useTrialCheck();
 
 const isAddMemberDialogShown = ref<boolean>(false);