Add third onboarding step after initial startup for macOS and firs fo…

…r windows
HASEL-UZH · Feb 26, 2024 · 6930859 · 6930859
1 parent 19ca26d
commit 6930859
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/src/electron/electron/main/entities/Settings.ts b/src/electron/electron/main/entities/Settings.ts
@@ -31,6 +31,9 @@ export class Settings extends BaseEntity {
   @Column({ type: 'boolean', nullable: false, default: false })
   onboardingShown: boolean;
 
+  @Column({ type: 'boolean', nullable: false, default: false })
+  studyAndTrackersStartedShown: boolean;
+
   @CreateDateColumn({ name: 'created_at' })
   createdAt: Date;
 

diff --git a/src/electron/electron/main/index.ts b/src/electron/electron/main/index.ts
@@ -99,11 +99,21 @@ app.whenReady().then(async () => {
       LOG.debug(
         `Onboarding shown: ${settings.onboardingShown}, hasAccessibilityAndScreenRecordingPermission: ${macOSHasAccessibilityAndScreenRecordingPermission()}, creating onboarding window...`
       );
-      await windowService.createOnboardingWindow();
+      await windowService.createOnboardingWindow(!is.macOS ? 'study-trackers-started' : undefined);
       settings.onboardingShown = true;
       await settings.save();
     }
 
+    if (
+      is.macOS &&
+      settings.onboardingShown === true &&
+      settings.studyAndTrackersStartedShown === false
+    ) {
+      await windowService.createOnboardingWindow('study-trackers-started');
+      settings.studyAndTrackersStartedShown = true;
+      await settings.save();
+    }
+
     if (!is.macOS || macOSHasAccessibilityAndScreenRecordingPermission()) {
       LOG.debug(
         `Onboarding shown: ${settings.onboardingShown}, hasAccessibilityAndScreenRecordingPermission: ${macOSHasAccessibilityAndScreenRecordingPermission()}, starting all trackers...`

diff --git a/src/electron/electron/main/services/WindowService.ts b/src/electron/electron/main/services/WindowService.ts
@@ -154,7 +154,7 @@ export class WindowService {
     }
   }
 
-  public async createOnboardingWindow() {
+  public async createOnboardingWindow(goToStep?: string) {
     this.closeOnboardingWindow();
 
     const __filename = fileURLToPath(import.meta.url);
@@ -176,11 +176,12 @@ export class WindowService {
 
     if (process.env.VITE_DEV_SERVER_URL) {
       await this.onboardingWindow.loadURL(
-        process.env.VITE_DEV_SERVER_URL + `#onboarding?isMacOS=${process.platform === 'darwin'}`
+        process.env.VITE_DEV_SERVER_URL +
+          `#onboarding?isMacOS=${is.macOS}&goToStep=${goToStep ?? 'welcome'}`
       );
     } else {
       await this.onboardingWindow.loadFile(path.join(process.env.DIST, 'index.html'), {
-        hash: `onboarding?isMacOS=${process.platform === 'darwin'}`
+        hash: `onboarding?isMacOS=${is.macOS}&goToStep=${goToStep ?? 'welcome'}`
       });
     }
 

diff --git a/src/electron/src/views/OnboardingView.vue b/src/electron/src/views/OnboardingView.vue
@@ -19,13 +19,19 @@ const isScreenRecordingPermissionLoading = ref(false);
 
 const route = useRoute();
 const isMacOS: string | null | LocationQueryValue[] = route.query.isMacOS;
+const goToStep: string | null | LocationQueryValue[] = route.query.goToStep;
 
 const availableSteps = ['welcome'];
 
 if (isMacOS === 'true') {
   availableSteps.push('data-collection');
 }
 
+if (goToStep === 'study-trackers-started') {
+  availableSteps.push('study-trackers-started');
+  currentStep.value = availableSteps.indexOf('study-trackers-started');
+}
+
 const maxSteps = computed(() => {
   return availableSteps.length;
 });
@@ -219,6 +225,24 @@ function startAllTrackers() {
             </p>
           </div>
         </div>
+        <div v-else-if="currentNamedStep === 'study-trackers-started'" key="2" class="absolute">
+          <h1 class="mb-8 text-4xl font-medium text-neutral-300">Data Collection</h1>
+          <div class="text-md">
+            <p v-if="isMacOS">
+              PersonalAnalytics now has the necessary permissions to collect data and is collecting
+              data in the background. You can manually open the application or view the collected
+              data at any time by right-clicking the icon in the menu bar.
+            </p>
+            <p v-else>
+              PersonalAnalytics is now collecting data. You can manually open the application or
+              view the collected data at any time by right-clicking the icon in the menu bar.
+            </p>
+            <p>
+              The following trackers are currently running:
+              {{ studyInfo.currentlyActiveTrackers.join(', ') }}
+            </p>
+          </div>
+        </div>
       </transition-group>
 
       <div class="flex-grow" />