[Reduced Onboarding] Fix forward/backward nav with profile step (#3997)

* WIP

* Fix forward-backward to profile step

* [Reduced Onboarding] Add avatar metric (#3999)

* Add prop to finished event

* Fix type

* Use separate event

src/lib/statsig/events.ts

@@ -53,6 +53,9 @@ export type LogEvents = {
   'onboarding:moderation:nextPressed': {}
   'onboarding:profile:nextPressed': {}
   'onboarding:finished:nextPressed': {}
+  'onboarding:finished:avatarResult': {
+    avatarResult: 'default' | 'created' | 'uploaded'
+  }
   'home:feedDisplayed': {
     feedUrl: string
     feedType: string

src/screens/Onboarding/StepFinished.tsx

@@ -134,6 +134,14 @@ export function StepFinished() {
               return existing
             })
           }
+
+          logEvent('onboarding:finished:avatarResult', {
+            avatarResult: profileStepResults.isCreatedAvatar
+              ? 'created'
+              : profileStepResults.image
+              ? 'uploaded'
+              : 'default',
+          })
         })(),
       ])
     } catch (e: any) {

src/screens/Onboarding/StepProfile/index.tsx

@@ -79,9 +79,10 @@ export function StepProfile() {
   const {state, dispatch} = React.useContext(Context)
   const [avatar, setAvatar] = React.useState<Avatar>({
     image: state.profileStepResults?.image,
-    placeholder: emojiItems.at,
-    backgroundColor: randomColor,
-    useCreatedAvatar: false,
+    placeholder: state.profileStepResults.creatorState?.emoji || emojiItems.at,
+    backgroundColor:
+      state.profileStepResults.creatorState?.backgroundColor || randomColor,
+    useCreatedAvatar: state.profileStepResults.isCreatedAvatar,
   })
 
   const canvasRef = React.useRef<PlaceholderCanvasRef>(null)
@@ -144,17 +145,23 @@ export function StepProfile() {
         image: avatar.image,
         imageUri,
         imageMime: avatar.image?.mime ?? 'image/jpeg',
+        isCreatedAvatar: avatar.useCreatedAvatar,
+        creatorState: {
+          emoji: avatar.placeholder,
+          backgroundColor: avatar.backgroundColor,
+        },
       })
     }
 
     dispatch({type: 'next'})
     track('OnboardingV2:StepProfile:End')
     logEvent('onboarding:profile:nextPressed', {})
-  }, [avatar.image, avatar.useCreatedAvatar, dispatch, track])
+  }, [avatar, dispatch, track])
 
   const onDoneCreating = React.useCallback(() => {
     setAvatar(prev => ({
       ...prev,
+      image: undefined,
       useCreatedAvatar: true,
     }))
     creatorControl.close()

src/screens/Onboarding/state.ts

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import {logger} from '#/logger'
+import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types'
 
 export type OnboardingState = {
   hasPrev: boolean
@@ -31,6 +32,7 @@ export type OnboardingState = {
     feedUris: string[]
   }
   profileStepResults: {
+    isCreatedAvatar: boolean
     image?: {
       path: string
       mime: string
@@ -40,6 +42,10 @@ export type OnboardingState = {
     }
     imageUri?: string
     imageMime?: string
+    creatorState?: {
+      emoji: Emoji
+      backgroundColor: AvatarColor
+    }
   }
 }
 
@@ -72,9 +78,14 @@ export type OnboardingAction =
     }
   | {
       type: 'setProfileStepResults'
+      isCreatedAvatar: boolean
       image?: OnboardingState['profileStepResults']['image']
       imageUri: string
       imageMime: string
+      creatorState?: {
+        emoji: Emoji
+        backgroundColor: AvatarColor
+      }
     }
 
 export type ApiResponseMap = {
@@ -111,6 +122,7 @@ export const initialState: OnboardingState = {
     feedUris: [],
   },
   profileStepResults: {
+    isCreatedAvatar: false,
     image: undefined,
     imageUri: '',
     imageMime: '',
@@ -286,6 +298,7 @@ export const initialStateReduced: OnboardingState = {
     feedUris: [],
   },
   profileStepResults: {
+    isCreatedAvatar: false,
     image: undefined,
     imageUri: '',
     imageMime: '',
@@ -341,9 +354,11 @@ export function reducerReduced(
     }
     case 'setProfileStepResults': {
       next.profileStepResults = {
+        isCreatedAvatar: a.isCreatedAvatar,
         image: a.image,
         imageUri: a.imageUri,
         imageMime: a.imageMime,
+        creatorState: a.creatorState,
       }
       break
     }