web/satellite: update signup and account setup for analytics

This change updates the v2 signup and account setup forms to conform with analytics requirements. Issue: storj/storj-private#545 Change-Id: I5d4f312edbb0280f4efc59a5e1b8a38958ffe870
storj · Jan 12, 2024 · 0d47861 · 0d47861
1 parent 249c7ff
commit 0d47861
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 14 deletions.
diff --git a/web/satellite/src/types/users.ts b/web/satellite/src/types/users.ts
@@ -157,10 +157,13 @@ export class UpdatedUser {
 export interface AccountSetupData {
     fullName: string
     isProfessional: boolean
+    haveSalesContact: boolean
     position?: string
     companyName?: string
     employeeCount?: string
     storageNeeds?: string
+    storageUseCase?: string
+    functionalArea?: string
 }
 
 /**

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/BusinessStep.vue
@@ -47,11 +47,13 @@
                     />
                 </v-col>
                 <v-col cols="12" sm="5" md="4" lg="3">
-                    <v-text-field
+                    <v-select
                         id="Job Role"
                         v-model="position"
                         :rules="[RequiredRule]"
+                        :items="['Executive/C-Level', 'Director', 'Manager', 'Software Developer', 'Partner', 'Student/Professor', 'Other']"
                         label="Job Role"
+                        variant="outlined"
                         hide-details="auto"
                         required
                     />
@@ -81,7 +83,7 @@
                 <v-col cols="12" sm="5" md="4" lg="3">
                     <v-select
                         v-model="storageNeeds"
-                        :items="['Less than 150TB', '150-499TB', '500-999TB', '1PB+']"
+                        :items="['Under 25 TB', '25 TB - 50 TB', '51 TB - 150 TB', '151 TB - 250 TB', '251 TB -500 TB', '501 TB and above']"
                         label="Storage Needs"
                         variant="outlined"
                         hide-details="auto"
@@ -97,6 +99,17 @@
                     />
                 </v-col>
             </v-row>
+
+            <v-row justify="center">
+                <v-col cols="12" sm="6" md="5" lg="4">
+                    <v-checkbox id="sales" v-model="haveSalesContact" density="compact">
+                        <template #label>
+                            <p class="text-body-2">Please have the Sales Team contact me</p>
+                        </template>
+                    </v-checkbox>
+                </v-col>
+                <v-col v-if="smAndUp" cols="12" sm="4" md="3" lg="2" />
+            </v-row>
         </v-form>
 
         <v-row justify="center" class="mt-4">
@@ -130,9 +143,10 @@
 </template>
 
 <script setup lang="ts">
-import { VBtn, VCol, VContainer, VForm, VRow, VSelect, VTextField } from 'vuetify/components';
+import { VBtn, VCheckbox, VCol, VContainer, VForm, VRow, VSelect, VTextField } from 'vuetify/components';
 import { ref } from 'vue';
 import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+import { useDisplay } from 'vuetify';
 
 import { AccountSetupStep } from '@/types/users';
 import { AuthHttpApi } from '@/api/auth';
@@ -147,17 +161,19 @@ const auth = new AuthHttpApi();
 
 const notify = useNotify();
 const { isLoading, withLoading } = useLoading();
+const { smAndUp } = useDisplay();
 
 const formValid = ref(false);
 
 const firstName = ref('');
 const lastName = ref('');
 const companyName = ref('');
-const position = ref('');
+const position = ref<string>();
 const employeeCount = ref<string>();
 const storageNeeds = ref<string>();
 const useCase = ref<string>();
 const functionalArea = ref<string>();
+const haveSalesContact = ref(false);
 
 const emit = defineEmits<{
     next: [AccountSetupStep];
@@ -173,9 +189,13 @@ function setupAccount() {
             await auth.setupAccount({
                 fullName: `${firstName.value} ${lastName.value}`,
                 position: position.value,
+                companyName: companyName.value,
                 employeeCount: employeeCount.value,
                 storageNeeds: storageNeeds.value,
+                storageUseCase: useCase.value,
+                functionalArea: functionalArea.value,
                 isProfessional: true,
+                haveSalesContact: haveSalesContact.value,
             });
 
             emit('next', AccountSetupStep.Success);

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/accountSetupSteps/PersonalStep.vue
@@ -27,7 +27,7 @@
                     />
                     <v-select
                         v-model="useCase"
-                        :items="['Backup & Recovery', 'Media & Entertainment', 'Generative AI', 'Other']"
+                        :items="['Video Streaming', 'Media Sharing & Collaboration', 'Large File Distribution', 'Backup/Archive', 'Web3 Storage', 'Other']"
                         label="Use Case (optional)"
                         placeholder="Select your use case"
                         variant="outlined"
@@ -104,7 +104,8 @@ function setupAccount() {
         try {
             await auth.setupAccount({
                 fullName: name.value,
-                workingOn: useCase.value,
+                storageUseCase: useCase.value,
+                haveSalesContact: false,
                 isProfessional: false,
             });
 

diff --git a/web/satellite/vuetify-poc/src/views/Signup.vue b/web/satellite/vuetify-poc/src/views/Signup.vue
@@ -97,7 +97,6 @@
                                 id="Retype Password"
                                 ref="repPasswordField"
                                 v-model="repPassword"
-                                class="mb-2"
                                 label="Retype password"
                                 placeholder="Enter a password"
                                 color="secondary"
@@ -115,7 +114,7 @@
 
                             <v-alert
                                 v-if="isBetaSatellite"
-                                class="mb-2"
+                                class="my-2"
                                 variant="tonal"
                                 color="warning"
                                 rounded="lg"
@@ -148,6 +147,7 @@
                             <v-checkbox
                                 id="Terms checkbox"
                                 v-model="acceptedTerms"
+                                class="mb-2"
                                 :rules="[RequiredRule]"
                                 density="compact"
                                 hide-details="auto"
@@ -163,12 +163,6 @@
                                 </template>
                             </v-checkbox>
 
-                            <v-checkbox id="Newsletter checkbox" density="compact">
-                                <template #label>
-                                    <p class="text-body-2">I want to receive the Storj newsletter by email.</p>
-                                </template>
-                            </v-checkbox>
-
                             <v-btn
                                 :loading="isLoading"
                                 color="primary"