restructure onboarding to better support dynamic screens

src/lib/statsig/gates.ts

@@ -3,6 +3,7 @@ export type Gate =
   | 'alt_share_icon'
   | 'debug_show_feedcontext'
   | 'debug_subscriptions'
+  | 'disable_onboarding_find_contacts'
   | 'explore_show_suggested_feeds'
   | 'feed_reply_button_open_thread'
   | 'old_postonboarding'

src/screens/Onboarding/Layout.tsx

@@ -7,7 +7,7 @@ import {useLingui} from '@lingui/react'
 
 import {isAndroid, isWeb} from '#/platform/detection'
 import {useOnboardingDispatch} from '#/state/shell'
-import {Context} from '#/screens/Onboarding/state'
+import {useOnboardingInternalState} from '#/screens/Onboarding/state'
 import {
   atoms as a,
   native,
@@ -34,7 +34,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
   const insets = useSafeAreaInsets()
   const {gtMobile} = useBreakpoints()
   const onboardDispatch = useOnboardingDispatch()
-  const {state, dispatch} = React.useContext(Context)
+  const {state, dispatch} = useOnboardingInternalState()
   const scrollview = React.useRef<ScrollView>(null)
   const prevActiveStep = React.useRef<string>(state.activeStep)
 
@@ -104,7 +104,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
               a.justify_between,
               {maxWidth: ONBOARDING_COL_WIDTH},
             ]}>
-            {state.hasPrev ? (
+            {state.canGoBack ? (
               <Button
                 key={state.activeStep} // remove focus state on nav
                 color="secondary"
@@ -157,7 +157,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
                         t.atoms.bg_contrast_50,
                         {
                           backgroundColor:
-                            i + 1 <= state.activeStepIndex
+                            i <= state.activeStepIndex
                               ? t.palette.primary_500
                               : t.palette.contrast_100,
                         },
@@ -200,7 +200,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) {
             gtMobile && [a.flex_row, a.justify_between, a.align_center],
           ]}>
           {gtMobile &&
-            (state.hasPrev ? (
+            (state.canGoBack ? (
               <Button
                 key={state.activeStep} // remove focus state on nav
                 color="secondary"

src/screens/Onboarding/StepFinished/index.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useContext, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {
   type AppBskyActorDefs,
@@ -35,28 +35,23 @@ import {
   useSetActiveStarterPack,
 } from '#/state/shell/starter-pack'
 import {
-  DescriptionText,
   OnboardingControls,
   OnboardingHeaderSlot,
-  TitleText,
 } from '#/screens/Onboarding/Layout'
-import {Context, type OnboardingState} from '#/screens/Onboarding/state'
+import {
+  type OnboardingState,
+  useOnboardingInternalState,
+} from '#/screens/Onboarding/state'
 import {bulkWriteFollows} from '#/screens/Onboarding/util'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {IconCircle} from '#/components/IconCircle'
 import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRight} from '#/components/icons/Arrow'
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
-import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
-import {News2_Stroke2_Corner0_Rounded as News} from '#/components/icons/News2'
-import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending'
 import {Loader} from '#/components/Loader'
-import {Text} from '#/components/Typography'
 import * as bsky from '#/types/bsky'
 import {ValuePropositionPager} from './ValuePropositionPager'
 
 export function StepFinished() {
-  const {state, dispatch} = useContext(Context)
+  const {state, dispatch} = useOnboardingInternalState()
   const onboardDispatch = useOnboardingDispatch()
   const [saving, setSaving] = useState(false)
   const queryClient = useQueryClient()
@@ -247,18 +242,12 @@ export function StepFinished() {
     gate,
   ])
 
-  return state.experiments?.onboarding_value_prop ? (
+  return (
     <ValueProposition
       finishOnboarding={finishOnboarding}
       saving={saving}
       state={state}
     />
-  ) : (
-    <LegacyFinalStep
-      finishOnboarding={finishOnboarding}
-      saving={saving}
-      state={state}
-    />
   )
 }
 
@@ -359,90 +348,3 @@ function ValueProposition({
     </>
   )
 }
-
-function LegacyFinalStep({
-  finishOnboarding,
-  saving,
-  state,
-}: {
-  finishOnboarding: () => void
-  saving: boolean
-  state: OnboardingState
-}) {
-  const t = useTheme()
-  const {_} = useLingui()
-
-  return (
-    <View style={[a.align_start]}>
-      <IconCircle icon={Check} style={[a.mb_2xl]} />
-
-      <TitleText>
-        <Trans>You're ready to go!</Trans>
-      </TitleText>
-      <DescriptionText>
-        <Trans>We hope you have a wonderful time. Remember, Bluesky is:</Trans>
-      </DescriptionText>
-
-      <View style={[a.pt_5xl, a.gap_3xl]}>
-        <View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
-          <IconCircle icon={Growth} size="lg" style={{width: 48, height: 48}} />
-          <View style={[a.flex_1, a.gap_xs]}>
-            <Text style={[a.font_semi_bold, a.text_lg]}>
-              <Trans>Public</Trans>
-            </Text>
-            <Text
-              style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
-              <Trans>
-                Your posts, likes, and blocks are public. Mutes are private.
-              </Trans>
-            </Text>
-          </View>
-        </View>
-        <View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
-          <IconCircle icon={News} size="lg" style={{width: 48, height: 48}} />
-          <View style={[a.flex_1, a.gap_xs]}>
-            <Text style={[a.font_semi_bold, a.text_lg]}>
-              <Trans>Open</Trans>
-            </Text>
-            <Text
-              style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
-              <Trans>Never lose access to your followers or data.</Trans>
-            </Text>
-          </View>
-        </View>
-        <View style={[a.flex_row, a.align_center, a.w_full, a.gap_lg]}>
-          <IconCircle
-            icon={Trending}
-            size="lg"
-            style={{width: 48, height: 48}}
-          />
-          <View style={[a.flex_1, a.gap_xs]}>
-            <Text style={[a.font_semi_bold, a.text_lg]}>
-              <Trans>Flexible</Trans>
-            </Text>
-            <Text
-              style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}>
-              <Trans>Choose the algorithms that power your custom feeds.</Trans>
-            </Text>
-          </View>
-        </View>
-      </View>
-
-      <OnboardingControls.Portal>
-        <Button
-          testID="onboardingFinish"
-          disabled={saving}
-          key={state.activeStep} // remove focus state on nav
-          color="primary"
-          size="large"
-          label={_(msg`Complete onboarding and start using your account`)}
-          onPress={finishOnboarding}>
-          <ButtonText>
-            {saving ? <Trans>Finalizing</Trans> : <Trans>Let's go!</Trans>}
-          </ButtonText>
-          {saving && <ButtonIcon icon={Loader} position="right" />}
-        </Button>
-      </OnboardingControls.Portal>
-    </View>
-  )
-}

src/screens/Onboarding/StepInterests/index.tsx

@@ -12,7 +12,7 @@ import {
   OnboardingControls,
   TitleText,
 } from '#/screens/Onboarding/Layout'
-import {Context} from '#/screens/Onboarding/state'
+import {useOnboardingInternalState} from '#/screens/Onboarding/state'
 import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -26,7 +26,7 @@ export function StepInterests() {
   const {_} = useLingui()
   const interestsDisplayNames = useInterestsDisplayNames()
 
-  const {state, dispatch} = React.useContext(Context)
+  const {state, dispatch} = useOnboardingInternalState()
   const [saving, setSaving] = React.useState(false)
   const [selectedInterests, setSelectedInterests] = React.useState<string[]>(
     state.interestsStepResults.selectedInterests.map(i => i),

src/screens/Onboarding/StepProfile/index.tsx

@@ -23,7 +23,7 @@ import {
   OnboardingControls,
   TitleText,
 } from '#/screens/Onboarding/Layout'
-import {Context} from '#/screens/Onboarding/state'
+import {useOnboardingInternalState} from '#/screens/Onboarding/state'
 import {AvatarCircle} from '#/screens/Onboarding/StepProfile/AvatarCircle'
 import {AvatarCreatorCircle} from '#/screens/Onboarding/StepProfile/AvatarCreatorCircle'
 import {AvatarCreatorItems} from '#/screens/Onboarding/StepProfile/AvatarCreatorItems'
@@ -78,7 +78,7 @@ export function StepProfile() {
   const creatorControl = Dialog.useDialogControl()
   const [error, setError] = React.useState('')
 
-  const {state, dispatch} = React.useContext(Context)
+  const {state, dispatch} = useOnboardingInternalState()
   const [avatar, setAvatar] = React.useState<Avatar>({
     image: state.profileStepResults?.image,
     placeholder: state.profileStepResults.creatorState?.emoji || emojiItems.at,

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -1,11 +1,4 @@
-import {
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
 import {View} from 'react-native'
 import {type ModerationOpts} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -23,7 +16,7 @@ import {useLanguagePrefs} from '#/state/preferences'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useAgent, useSession} from '#/state/session'
 import {OnboardingControls} from '#/screens/Onboarding/Layout'
-import {Context} from '#/screens/Onboarding/state'
+import {useOnboardingInternalState} from '#/screens/Onboarding/state'
 import {useSuggestedUsers} from '#/screens/Search/util/useSuggestedUsers'
 import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
 import {Admonition} from '#/components/Admonition'
@@ -47,7 +40,7 @@ export function StepSuggestedAccounts() {
   const {currentAccount} = useSession()
   const queryClient = useQueryClient()
 
-  const {state, dispatch} = useContext(Context)
+  const {state, dispatch} = useOnboardingInternalState()
 
   const [selectedInterest, setSelectedInterest] = useState<string | null>(null)
   // keeping track of who was followed via the follow all button

src/screens/Onboarding/StepSuggestedStarterpacks/index.tsx

@@ -1,4 +1,3 @@
-import {useContext} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -6,7 +5,7 @@ import {useLingui} from '@lingui/react'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useOnboardingSuggestedStarterPacksQuery} from '#/state/queries/useOnboardingSuggestedStarterPacksQuery'
 import {OnboardingControls} from '#/screens/Onboarding/Layout'
-import {Context} from '#/screens/Onboarding/state'
+import {useOnboardingInternalState} from '#/screens/Onboarding/state'
 import {atoms as a, useBreakpoints} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -20,7 +19,7 @@ export function StepSuggestedStarterpacks() {
   const {gtMobile} = useBreakpoints()
   const moderationOpts = useModerationOpts()
 
-  const {state, dispatch} = useContext(Context)
+  const {state, dispatch} = useOnboardingInternalState()
 
   const {
     data: suggestedStarterPacks,

src/screens/Onboarding/index.tsx

@@ -4,13 +4,18 @@ import {useLingui} from '@lingui/react'
 import * as bcp47Match from 'bcp-47-match'
 
 import {useGate} from '#/lib/statsig/statsig'
+import {isNative} from '#/platform/detection'
 import {useLanguagePrefs} from '#/state/preferences'
 import {
   Layout,
   OnboardingControls,
   OnboardingHeaderSlot,
 } from '#/screens/Onboarding/Layout'
-import {Context, initialState, reducer} from '#/screens/Onboarding/state'
+import {
+  Context,
+  createInitialOnboardingState,
+  reducer,
+} from '#/screens/Onboarding/state'
 import {StepFinished} from '#/screens/Onboarding/StepFinished'
 import {StepInterests} from '#/screens/Onboarding/StepInterests'
 import {StepProfile} from '#/screens/Onboarding/StepProfile'
@@ -36,15 +41,16 @@ export function Onboarding() {
     probablySpeaksEnglish &&
     gate('onboarding_suggested_starterpacks')
 
-  const [state, dispatch] = useReducer(reducer, {
+  const showFindContacts = isNative && !gate('disable_onboarding_find_contacts')
-    ...initialState,
+
-    totalSteps: 4 + (showSuggestedStarterpacks ? 1 : 0),
+  const [state, dispatch] = useReducer(
-    experiments: {
+    reducer,
-      onboarding_suggested_accounts: true,
+    {
-      onboarding_value_prop: true,
+      starterPacksStepEnabled: showSuggestedStarterpacks,
-      onboarding_suggested_starterpacks: showSuggestedStarterpacks,
+      findContactsStepEnabled: showFindContacts,
     },
-  })
+    createInitialOnboardingState,
+  )
 
   const interestsDisplayNames = useMemo(() => {
     return {
@@ -94,6 +100,7 @@ export function Onboarding() {
                 {state.activeStep === 'suggested-starterpacks' && (
                   <StepSuggestedStarterpacks />
                 )}
+                {state.activeStep === 'find-contacts' && null}
                 {state.activeStep === 'finished' && <StepFinished />}
               </ScreenTransition>
             </Layout>

src/screens/Onboarding/state.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext, useContext, useMemo} from 'react'
 
 import {logger} from '#/logger'
 import {
@@ -6,16 +6,17 @@ import {
   type Emoji,
 } from '#/screens/Onboarding/StepProfile/types'
 
+type OnboardingScreen =
+  | 'profile'
+  | 'interests'
+  | 'suggested-accounts'
+  | 'suggested-starterpacks'
+  | 'find-contacts'
+  | 'finished'
+
 export type OnboardingState = {
-  hasPrev: boolean
+  screens: Record<OnboardingScreen, boolean>
-  totalSteps: number
+  activeStep: OnboardingScreen
-  activeStep:
-    | 'profile'
-    | 'interests'
-    | 'suggested-accounts'
-    | 'suggested-starterpacks'
-    | 'finished'
-  activeStepIndex: number
   stepTransitionDirection: 'Forward' | 'Backward'
 
   interestsStepResults: {
@@ -37,12 +38,6 @@ export type OnboardingState = {
       backgroundColor: AvatarColor
     }
   }
-
-  experiments?: {
-    onboarding_suggested_accounts?: boolean
-    onboarding_value_prop?: boolean
-    onboarding_suggested_starterpacks?: boolean
-  }
 }
 
 export type OnboardingAction =
@@ -73,31 +68,44 @@ export type OnboardingAction =
         | undefined
     }
 
-export const initialState: OnboardingState = {
+export function createInitialOnboardingState(
-  hasPrev: false,
+  {
-  totalSteps: 3,
+    starterPacksStepEnabled,
-  activeStep: 'profile',
+    findContactsStepEnabled,
-  activeStepIndex: 1,
+  }: {
-  stepTransitionDirection: 'Forward',
+    starterPacksStepEnabled: boolean
+    findContactsStepEnabled: boolean
+  } = {starterPacksStepEnabled: true, findContactsStepEnabled: false},
+): OnboardingState {
+  const screens: OnboardingState['screens'] = {
+    profile: true,
+    interests: true,
+    'suggested-accounts': true,
+    'suggested-starterpacks': starterPacksStepEnabled,
+    'find-contacts': findContactsStepEnabled,
+    finished: true,
+  }
 
-  interestsStepResults: {
+  return {
-    selectedInterests: [],
+    screens,
-  },
+    activeStep: 'profile',
-  profileStepResults: {
+    stepTransitionDirection: 'Forward',
-    isCreatedAvatar: false,
+    interestsStepResults: {
-    image: undefined,
+      selectedInterests: [],
-    imageUri: '',
+    },
-    imageMime: '',
+    profileStepResults: {
-  },
+      isCreatedAvatar: false,
+      image: undefined,
+      imageUri: '',
+      imageMime: '',
+    },
+  }
 }
 
-export const Context = React.createContext<{
+export const Context = createContext<{
   state: OnboardingState
   dispatch: React.Dispatch<OnboardingAction>
-}>({
+} | null>(null)
-  state: {...initialState},
-  dispatch: () => {},
-})
 Context.displayName = 'OnboardingContext'
 
 export function reducer(
@@ -106,42 +114,32 @@ export function reducer(
 ): OnboardingState {
   let next = {...s}
 
-  const stepOrder: OnboardingState['activeStep'][] = [
+  const stepOrder = getStepOrder(s)
-    'profile',
-    'interests',
-    ...(s.experiments?.onboarding_suggested_accounts
-      ? (['suggested-accounts'] as const)
-      : []),
-    ...(s.experiments?.onboarding_suggested_starterpacks
-      ? (['suggested-starterpacks'] as const)
-      : []),
-    'finished',
-  ]
 
   switch (a.type) {
     case 'next': {
-      // 1-indexed for some reason
+      const nextIndex = stepOrder.indexOf(next.activeStep) + 1
-      const nextIndex = s.activeStepIndex
       const nextStep = stepOrder[nextIndex]
       if (nextStep) {
         next.activeStep = nextStep
-        next.activeStepIndex = nextIndex + 1
       }
       next.stepTransitionDirection = 'Forward'
       break
     }
     case 'prev': {
-      const prevIndex = s.activeStepIndex - 2
+      const prevIndex = stepOrder.indexOf(next.activeStep) - 1
       const prevStep = stepOrder[prevIndex]
       if (prevStep) {
         next.activeStep = prevStep
-        next.activeStepIndex = prevIndex + 1
       }
       next.stepTransitionDirection = 'Backward'
       break
     }
     case 'finish': {
-      next = initialState
+      next = createInitialOnboardingState({
+        starterPacksStepEnabled: s.screens['suggested-starterpacks'],
+        findContactsStepEnabled: s.screens['find-contacts'],
+      })
       break
     }
     case 'setInterestsStepResults': {
@@ -170,7 +168,6 @@ export function reducer(
   logger.debug(`onboarding`, {
     hasPrev: state.hasPrev,
     activeStep: state.activeStep,
-    activeStepIndex: state.activeStepIndex,
     interestsStepResults: {
       selectedInterests: state.interestsStepResults.selectedInterests,
     },
@@ -183,3 +180,46 @@ export function reducer(
 
   return state
 }
+
+function getStepOrder(s: OnboardingState): OnboardingScreen[] {
+  return [
+    s.screens.profile && ('profile' as const),
+    s.screens.interests && ('interests' as const),
+    s.screens['suggested-accounts'] && ('suggested-accounts' as const),
+    s.screens['suggested-starterpacks'] && ('suggested-starterpacks' as const),
+    s.screens['find-contacts'] && ('find-contacts' as const),
+    s.screens.finished && ('finished' as const),
+  ].filter(x => !!x)
+}
+
+/**
+ * Note: not to be confused with `useOnboardingState`, which just determines if onboarding is active.
+ * This hook is for internal state of the onboarding flow (i.e. active step etc).
+ *
+ * This adds additional derived state to the onboarding context reducer.
+ */
+export function useOnboardingInternalState() {
+  const ctx = useContext(Context)
+
+  if (!ctx) {
+    throw new Error(
+      'useOnboardingInternalState must be used within OnboardingContext',
+    )
+  }
+
+  const {state, dispatch} = ctx
+
+  return {
+    state: useMemo(() => {
+      const stepOrder = getStepOrder(state)
+      const canGoBack = state.activeStep !== stepOrder[0]
+      return {
+        ...state,
+        canGoBack,
+        totalSteps: stepOrder.length,
+        activeStepIndex: stepOrder.indexOf(state.activeStep),
+      }
+    }, [state]),
+    dispatch,
+  }
+}