From 03a9d0fd197d2f4c0df476ea2495544921bf46e4 Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Thu, 21 Mar 2024 15:57:12 +0200
Subject: [PATCH] web/satellite: free trial UI updates

Rename Free Account to Free Trial.
Remove included free storage and download in upgrade modal.
Move the Storage and Download price to the description in upgrade modal.
Rename disabled button (Current) in the Free Account plan to show the days remaining in the free trial.
After trial_expiration has passed, but before "trial expiration freeze" has occurred, continue to display the "your trial is expiring soon" banner in the UI.
Update signup page to have "Start your free trial" as the call to action instead of "Create Account".

Issue:
https://github.com/storj/storj-private/issues/643

Change-Id: I792270ad3d296ca3fd1c2231a2c48d4033fa6c1c
---
 .../objectRepository/SignupPageObjects.ts     |  2 +-
 .../PricingPlanSelectionStep.vue              |  4 +--
 .../upgradeAccountFlow/UpgradeInfoStep.vue    | 29 +++++++++++++------
 .../upgradeAccountFlow/UpgradeOptionsStep.vue |  4 +--
 .../src/composables/useTrialCheck.ts          | 11 ++++---
 web/satellite/src/layouts/default/AppBar.vue  |  2 +-
 web/satellite/src/layouts/default/AuthBar.vue |  7 ++---
 web/satellite/src/types/users.ts              |  2 +-
 web/satellite/src/views/AccountSettings.vue   |  2 +-
 web/satellite/src/views/ProjectSettings.vue   |  2 +-
 web/satellite/src/views/Signup.vue            |  7 ++---
 11 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/testsuite/playwright-ui/pageFactory/objectRepository/SignupPageObjects.ts b/testsuite/playwright-ui/pageFactory/objectRepository/SignupPageObjects.ts
index 1a90a5bfc750..32d666ab8ece 100644
--- a/testsuite/playwright-ui/pageFactory/objectRepository/SignupPageObjects.ts
+++ b/testsuite/playwright-ui/pageFactory/objectRepository/SignupPageObjects.ts
@@ -7,7 +7,7 @@ export class SignupPageObjects {
     static INPUT_PASSWORD_XPATH = `//input[@id='Password']`;
     static INPUT_RETYPE_PASSWORD_XPATH = `//input[@id='Retype Password']`;
     static TOS_CHECKMARK_XPATH = `//input[@id='Terms checkbox']`;
-    static CREATE_ACCOUNT_BUTTON_XPATH = `//button[span[text()=' Create your account ']]`;
+    static CREATE_ACCOUNT_BUTTON_XPATH = `//button[span[text()=' Start your free trial ']]`;
     static HEADER_TEXT_XPATH = `//h1[.='Start using Storj today.']`;
     static SUBHEADER_TEXT_XPATH = `//p[contains(text(),'Whether migrating your data or just testing out')]`;
 
diff --git a/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue b/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue
index 9b3acc7d3f10..ee8a531eb8fc 100644
--- a/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue
+++ b/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue
@@ -65,7 +65,7 @@ const plans = ref<PricingPlanInfo[]>([
     ),
 ]);
 
-/*
+/**
  * Loads pricing plan config. Assumes that user is already eligible for a plan prior to component being mounted.
  */
 onBeforeMount(async () => {
@@ -74,7 +74,7 @@ onBeforeMount(async () => {
             ...plans.value,
             new PricingPlanInfo(
                 PricingPlanType.FREE,
-                'Free Account',
+                'Free Trial',
                 'Limited',
                 'Free usage up to 25GB storage and 25GB egress bandwidth per month.',
                 null,
diff --git a/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue b/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
index bba7cd511bff..e1e4295140f9 100644
--- a/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
+++ b/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue
@@ -4,13 +4,13 @@
 <template>
     <v-row>
         <v-col v-if="!smAndDown" cols="6">
-            <h4 class="font-weight-bold my-2">Free Account</h4>
+            <h4 class="font-weight-bold my-2">Free Trial</h4>
             <v-btn
                 block
                 disabled
                 color="default"
             >
-                Current
+                {{ freeTrialButtonLabel }}
             </v-btn>
             <v-card class="my-4">
                 <InfoBullet title="Projects" :info="freeProjects" />
@@ -68,6 +68,7 @@ import { mdiArrowRight } from '@mdi/js';
 
 import { useUsersStore } from '@/store/modules/usersStore';
 import { useNotify } from '@/utils/hooks';
+import { useTrialCheck } from '@/composables/useTrialCheck';
 import { User } from '@/types/users';
 import { Size } from '@/utils/bytesSize';
 
@@ -76,8 +77,9 @@ import InfoBullet from '@/components/dialogs/upgradeAccountFlow/InfoBullet.vue';
 const usersStore = useUsersStore();
 const notify = useNotify();
 const { smAndDown } = useDisplay();
+const { isExpired, expirationInfo } = useTrialCheck();
 
-const props = defineProps<{
+defineProps<{
     loading: boolean;
 }>();
 
@@ -85,14 +87,23 @@ const emit = defineEmits<{
     upgrade: [];
 }>();
 
-const storagePrice = ref<string>('Storage $0.004 GB / month');
-const storagePriceInfo = ref<string>('25 GB free included');
+const storagePrice = ref<string>('Storage');
+const storagePriceInfo = ref<string>('$0.004 GB / month');
 const segmentInfo = ref<string>('$0.0000088 segment per month');
 const projectsInfo = ref<string>('3 projects + more on request');
-const downloadPrice = ref<string>('Download $0.007 GB');
-const downloadInfo = ref<string>('25 GB free every month');
+const downloadPrice = ref<string>('Download');
+const downloadInfo = ref<string>('$0.007 GB');
 const downloadMoreInfo = ref<string>('');
 
+/**
+ * Returns free trial button label based on expiration status.
+ */
+const freeTrialButtonLabel = computed<string>(() => {
+    if (isExpired.value) return 'Trial Expired';
+
+    return `${expirationInfo.value.days} day${expirationInfo.value.days !== 1 ? 's' : ''} remaining`;
+});
+
 /**
  * Returns user entity from store.
  */
@@ -124,8 +135,8 @@ onBeforeMount(async () => {
         const partner = usersStore.state.user.partner;
         const config = (await import('@/configs/upgradeConfig.json')).default;
         if (partner && config[partner]) {
-            if (config[partner].storagePrice) {
-                storagePrice.value = config[partner].storagePrice;
+            if (config[partner].storagePriceInfo) {
+                storagePriceInfo.value = config[partner].storagePriceInfo;
             }
 
             if (config[partner].downloadInfo) {
diff --git a/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue b/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue
index 1836e216dfe1..4ee01f087850 100644
--- a/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue
+++ b/web/satellite/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue
@@ -48,13 +48,11 @@ import { VBtn, VCol, VIcon, VRow, VAlert } from 'vuetify/components';
 import { mdiCreditCard, mdiPlusCircle } from '@mdi/js';
 
 import { useUsersStore } from '@/store/modules/usersStore';
-import { useNotify } from '@/utils/hooks';
 import { User } from '@/types/users';
 
 const usersStore = useUsersStore();
-const notify = useNotify();
 
-const props = defineProps<{
+defineProps<{
     loading: boolean;
 }>();
 
diff --git a/web/satellite/src/composables/useTrialCheck.ts b/web/satellite/src/composables/useTrialCheck.ts
index aaf6a0569f84..ffef020b0f28 100644
--- a/web/satellite/src/composables/useTrialCheck.ts
+++ b/web/satellite/src/composables/useTrialCheck.ts
@@ -6,7 +6,7 @@ import { computed } from 'vue';
 import { useUsersStore } from '@/store/modules/usersStore';
 import { useAppStore } from '@/store/modules/appStore';
 import { useConfigStore } from '@/store/modules/configStore';
-import { User } from '@/types/users';
+import { ExpirationInfo, User } from '@/types/users';
 
 export function useTrialCheck() {
     const userStore = useUsersStore();
@@ -14,20 +14,18 @@ export function useTrialCheck() {
     const configStore = useConfigStore();
 
     const user = computed<User>(() => userStore.state.user);
+    const expirationInfo = computed<ExpirationInfo>(() => user.value.getExpirationInfo(configStore.state.config.daysBeforeTrialEndNotification));
 
     const isTrialExpirationBanner = computed<boolean>(() => {
         if (user.value.paidTier) return false;
 
-        const expirationInfo = user.value.getExpirationInfo(configStore.state.config.daysBeforeTrialEndNotification);
-
-        return user.value.freezeStatus.trialExpiredFrozen || expirationInfo.isCloseToExpiredTrial;
+        return user.value.freezeStatus.trialExpiredFrozen || expirationInfo.value.isCloseToExpiredTrial;
     });
 
     const isExpired = computed<boolean>(() => user.value.freezeStatus.trialExpiredFrozen);
 
     function withTrialCheck(callback: () => void | Promise<void>): void {
-        const user = userStore.state.user;
-        if (!user.paidTier && user.freezeStatus.trialExpiredFrozen) {
+        if (!user.value.paidTier && user.value.freezeStatus.trialExpiredFrozen) {
             appStore.toggleExpirationDialog(true);
             return;
         }
@@ -38,6 +36,7 @@ export function useTrialCheck() {
     return {
         isTrialExpirationBanner,
         isExpired,
+        expirationInfo,
         withTrialCheck,
     };
 }
diff --git a/web/satellite/src/layouts/default/AppBar.vue b/web/satellite/src/layouts/default/AppBar.vue
index fbb65cf97e84..a698162f28ff 100644
--- a/web/satellite/src/layouts/default/AppBar.vue
+++ b/web/satellite/src/layouts/default/AppBar.vue
@@ -98,7 +98,7 @@
                                 size="small"
                                 rounded
                             >
-                                {{ isPaidTier ? 'Pro Account' : 'Free Account' }}
+                                {{ isPaidTier ? 'Pro Account' : 'Free Trial' }}
                             </v-chip>
                         </v-list-item-title>
                     </v-list-item>
diff --git a/web/satellite/src/layouts/default/AuthBar.vue b/web/satellite/src/layouts/default/AuthBar.vue
index d8f4e4128d98..c06ac0861227 100644
--- a/web/satellite/src/layouts/default/AuthBar.vue
+++ b/web/satellite/src/layouts/default/AuthBar.vue
@@ -83,20 +83,19 @@
 </template>
 
 <script setup lang="ts">
-import { useTheme } from 'vuetify';
 import { onBeforeMount, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { VAppBar, VAppBarTitle, VBtn, VBtnToggle, VIcon, VImg, VMenu, VTooltip } from 'vuetify/components';
+import { useTheme } from 'vuetify';
+import { VAppBar, VBtn, VBtnToggle, VIcon, VTooltip } from 'vuetify/components';
 import { mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
 
 import { PartnerConfig } from '@/types/partners';
 import { ROUTES } from '@/router';
 
 const route = useRoute();
-
 const theme = useTheme();
+
 const activeTheme = ref(0);
-const menu = ref(false);
 const partnerConfig = ref<PartnerConfig | null>(null);
 
 function toggleTheme(newTheme: string): void {
diff --git a/web/satellite/src/types/users.ts b/web/satellite/src/types/users.ts
index d4f2c41cda64..922e8bb561ef 100644
--- a/web/satellite/src/types/users.ts
+++ b/web/satellite/src/types/users.ts
@@ -139,7 +139,7 @@ export class User {
         const daysBeforeNotifyInMilliseconds = daysBeforeNotify * millisecondsInDay;
 
         return {
-            isCloseToExpiredTrial: diff > 0 && diff < daysBeforeNotifyInMilliseconds,
+            isCloseToExpiredTrial: diff < daysBeforeNotifyInMilliseconds,
             days: Math.round(Math.abs(diff) / millisecondsInDay),
         };
     }
diff --git a/web/satellite/src/views/AccountSettings.vue b/web/satellite/src/views/AccountSettings.vue
index 046851e19585..e64864ffa7c0 100644
--- a/web/satellite/src/views/AccountSettings.vue
+++ b/web/satellite/src/views/AccountSettings.vue
@@ -56,7 +56,7 @@
                             size="small"
                             rounded
                         >
-                            {{ isPaidTier ? 'Pro Account' : 'Free Account' }}
+                            {{ isPaidTier ? 'Pro Account' : 'Free Trial' }}
                         </v-chip>
                         <v-divider class="my-4" />
                         <v-btn v-if="isPaidTier" variant="outlined" color="default" size="small" :to="ROUTES.Billing.path">
diff --git a/web/satellite/src/views/ProjectSettings.vue b/web/satellite/src/views/ProjectSettings.vue
index 8884feaf2eed..89850103cfb9 100644
--- a/web/satellite/src/views/ProjectSettings.vue
+++ b/web/satellite/src/views/ProjectSettings.vue
@@ -63,7 +63,7 @@
 
         <v-row v-if="!isPaidTier && billingEnabled">
             <v-col cols="12">
-                <v-card title="Free Account" variant="outlined" :border="true" rounded="xlg">
+                <v-card title="Free Trial" variant="outlined" border rounded="xlg">
                     <v-card-subtitle>
                         {{ storageLimitFormatted }} Storage / {{ bandwidthLimitFormatted }} Bandwidth. <br>
                         Need more? Upgrade to Pro Account.
diff --git a/web/satellite/src/views/Signup.vue b/web/satellite/src/views/Signup.vue
index b8d4385542e0..e3ff6f5cb597 100644
--- a/web/satellite/src/views/Signup.vue
+++ b/web/satellite/src/views/Signup.vue
@@ -176,7 +176,7 @@
                                 size="large"
                                 block
                             >
-                                Create your account
+                                Start your free trial
                             </v-btn>
                         </v-form>
                     </v-card-text>
@@ -292,8 +292,6 @@ import { useRoute, useRouter } from 'vue-router';
 import { mdiCheckBold } from '@mdi/js';
 
 import { useConfigStore } from '@/store/modules/configStore';
-import { useAppStore } from '@/store/modules/appStore';
-import { useUsersStore } from '@/store/modules/usersStore';
 import { EmailRule, RequiredRule, ValidationRule } from '@/types/common';
 import { MultiCaptchaConfig } from '@/types/config.gen';
 import { PartnerConfig } from '@/types/partners';
@@ -311,8 +309,7 @@ const auth = new AuthHttpApi();
 
 const analyticsStore = useAnalyticsStore();
 const configStore = useConfigStore();
-const appStore = useAppStore();
-const usersStore = useUsersStore();
+
 const router = useRouter();
 const notify = useNotify();
 const route = useRoute();