[APP-775] Add Welcome screen after account creation (#1038)

* add comments to step 1-3

* add onboarding screen

* add analytics for onboarding tracking

* fix useEffect

* change text

* change icon size

* put onboarding into bottom sheet modal instead of react navigation

* wip

* Simplify the type validation

* Fix: only trigger onboarding modal when account creation succeeds

* Add the 'session-ready' event which fires when the new session is stable

* Use the 'session-ready' event to trigger the onboarding modal

* update copy

* update copy

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

3 files changed, 26 insertions, 3 deletions

diff --git a/src/state/models/root-store.ts b/src/state/models/root-store.ts
index 5a3d102aa..389ce86d8 100644
--- a/src/state/models/root-store.ts
+++ b/src/state/models/root-store.ts
@@ -135,8 +135,9 @@ export class RootStoreModel {
     /* dont await */ this.preferences.sync()
     await this.me.load()
     if (!hadSession) {
-      resetNavigation()
+      await resetNavigation()
     }
+    this.emitSessionReady()
   }
 
   /**
@@ -195,6 +196,14 @@ export class RootStoreModel {
     DeviceEventEmitter.emit('session-loaded')
   }
 
+  // the session has completed all setup; good for post-initialization behaviors like triggering modals
+  onSessionReady(handler: () => void): EmitterSubscription {
+    return DeviceEventEmitter.addListener('session-ready', handler)
+  }
+  emitSessionReady() {
+    DeviceEventEmitter.emit('session-ready')
+  }
+
   // the session was dropped due to bad/expired refresh tokens
   onSessionDropped(handler: () => void): EmitterSubscription {
     return DeviceEventEmitter.addListener('session-dropped', handler)
diff --git a/src/state/models/ui/create-account.ts b/src/state/models/ui/create-account.ts
index d35b3557d..04e1554c6 100644
--- a/src/state/models/ui/create-account.ts
+++ b/src/state/models/ui/create-account.ts
@@ -108,6 +108,13 @@ export class CreateAccountModel {
     }
     this.setError('')
     this.setIsProcessing(true)
+
+    // open the onboarding modal after the session is created
+    const sessionReadySub = this.rootStore.onSessionReady(() => {
+      sessionReadySub.remove()
+      this.rootStore.shell.openModal({name: 'onboarding'})
+    })
+
     try {
       await this.rootStore.session.createAccount({
         service: this.serviceUrl,
@@ -116,7 +123,9 @@ export class CreateAccountModel {
         password: this.password,
         inviteCode: this.inviteCode,
       })
+      track('Create Account')
     } catch (e: any) {
+      sessionReadySub.remove()
       let errMsg = e.toString()
       if (e instanceof ComAtprotoServerCreateAccount.InvalidInviteCodeError) {
         errMsg =
@@ -126,8 +135,6 @@ export class CreateAccountModel {
       this.setIsProcessing(false)
       this.setError(cleanError(errMsg))
       throw e
-    } finally {
-      track('Create Account')
     }
   }
 
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index b6ae12fda..17740a77f 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -127,6 +127,10 @@ export interface PreferencesHomeFeed {
   name: 'preferences-home-feed'
 }
 
+export interface OnboardingModal {
+  name: 'onboarding'
+}
+
 export type Modal =
   // Account
   | AddAppPasswordModal
@@ -158,6 +162,9 @@ export type Modal =
   | WaitlistModal
   | InviteCodesModal
 
+  // Onboarding
+  | OnboardingModal
+
   // Generic
   | ConfirmModal