Skip to content

Commit

Permalink
web/satellite: allow trial expired project members to make actions
Browse files Browse the repository at this point in the history 
Change-Id: I90bb851230a8ff0d56f9e54070a76175b568af9c
  • Loading branch information
@VitaliiShpital @mobyvb
VitaliiShpital authored and mobyvb committed Mar 25, 2024
1 parent 1718988 commit cbc16cd
Show file tree
Hide file tree
Showing 11 changed files with 34 additions and 26 deletions.
6 changes: 3 additions & 3 deletions web/satellite/src/App.vue
View file
Expand Up @@ -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);
}
}
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}
});
Expand Down
7 changes: 5 additions & 2 deletions web/satellite/src/components/TrialExpirationBanner.vue
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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.`;
});
/**
Expand Down
11 changes: 9 additions & 2 deletions web/satellite/src/composables/useTrialCheck.ts
View file
Expand Up @@ -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>(() => {
Expand All @@ -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;
}
Expand All @@ -36,6 +42,7 @@ export function useTrialCheck() {
return {
isTrialExpirationBanner,
isExpired,
isUserProjectOwner,
expirationInfo,
withTrialCheck,
};
Expand Down
2 changes: 1 addition & 1 deletion web/satellite/src/layouts/default/ProjectNav.vue
View file
Expand Up @@ -402,7 +402,7 @@ function trackViewSupportEvent(link: string): void {
function onCreateProject() {
withTrialCheck(() => {
isCreateProjectDialogShown.value = true;
});
}, true);
}
/**
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/src/views/Access.vue
View file
Expand Up @@ -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" />
Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/src/views/Applications.vue
View file
Expand Up @@ -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" />
Expand Down Expand Up @@ -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]);
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/src/views/Buckets.vue
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/src/views/Dashboard.vue
View file
Expand Up @@ -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 />

Expand Down Expand Up @@ -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>();
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/src/views/ProjectSettings.vue
View file
Expand Up @@ -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" />
Expand Down Expand Up @@ -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.
Expand Down
10 changes: 4 additions & 6 deletions web/satellite/src/views/Projects.vue
View file
Expand Up @@ -199,7 +199,7 @@ function newProjectClicked() {
withTrialCheck(() => {
analyticsStore.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
isCreateProjectDialogShown.value = true;
});
}, true);
}
/**
Expand All @@ -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;
}
/**
Expand All @@ -226,7 +224,7 @@ function onInviteClicked(item: ProjectItemModel): void {
withTrialCheck(() => {
addMemberProjectId.value = item.id;
isAddMemberDialogShown.value = true;
});
}, true);
}
/**
Expand Down
4 changes: 2 additions & 2 deletions web/satellite/src/views/Team.vue
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit cbc16cd

Please sign in to comment.