fix(onboarding): resume onboarding after the import-to-Astra detour

apps/mobile/__tests__/components/onboarding/onboarding-flow.test.tsx

@@ -1,4 +1,5 @@
-import { describe, expect, it } from 'vitest'
+import React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   getOnboardingDisplayStep,
   getOnboardingDisplayTotal,
@@ -8,6 +9,98 @@ import {
   shouldHideOnboardingFooter,
 } from '@orbit/shared/utils'
 
+const { routerMock, pathnameState, performQueuedApiMutationMock, captured } =
+  vi.hoisted(() => {
+    const capturedState: {
+      beginPress?: () => void
+      importPress?: () => void | Promise<void>
+      welcomeRendered: boolean
+    } = { welcomeRendered: false }
+    return {
+      routerMock: { replace: vi.fn(), push: vi.fn(), navigate: vi.fn() },
+      pathnameState: { value: '/' },
+      performQueuedApiMutationMock: vi.fn(),
+      captured: capturedState,
+    }
+  })
+
+vi.mock('expo-router', () => ({
+  useRouter: () => routerMock,
+  usePathname: () => pathnameState.value,
+}))
+
+vi.mock('@tanstack/react-query', () => ({
+  useQueryClient: () => ({ setQueryData: vi.fn() }),
+}))
+
+vi.mock('@/hooks/use-profile', () => ({
+  useHasProAccess: () => true,
+}))
+
+vi.mock('@/lib/queued-api-mutation', () => ({
+  performQueuedApiMutation: performQueuedApiMutationMock,
+}))
+
+vi.mock('@/components/ui/gradient-top', () => ({
+  GradientTop: () => null,
+}))
+
+vi.mock('@/components/ui/pill-button', () => ({
+  PillButton: ({
+    children,
+    onPress,
+  }: Readonly<{ children?: React.ReactNode; onPress?: () => void }>) => {
+    captured.beginPress = onPress
+    return React.createElement('PillButton', { onPress }, children)
+  },
+}))
+
+vi.mock('@/components/ui/keyboard-aware-scroll-view', () => ({
+  KeyboardAwareScrollView: ({
+    children,
+  }: Readonly<{ children?: React.ReactNode }>) =>
+    React.createElement('KeyboardAwareScrollView', null, children),
+}))
+
+vi.mock('@/components/onboarding/onboarding-welcome', () => ({
+  OnboardingWelcome: () => {
+    captured.welcomeRendered = true
+    return React.createElement('OnboardingWelcome')
+  },
+}))
+
+vi.mock('@/components/onboarding/onboarding-meet-astra', () => ({
+  OnboardingMeetAstra: ({
+    onImport,
+  }: Readonly<{ onImport?: () => void | Promise<void> }>) => {
+    captured.importPress = onImport
+    return React.createElement('OnboardingMeetAstra', { onImport })
+  },
+}))
+
+vi.mock('@/components/onboarding/onboarding-template-packs', () => ({
+  OnboardingTemplatePacks: () => null,
+}))
+vi.mock('@/components/onboarding/onboarding-create-habit', () => ({
+  OnboardingCreateHabit: () => null,
+}))
+vi.mock('@/components/onboarding/onboarding-complete-habit', () => ({
+  OnboardingCompleteHabit: () => null,
+}))
+vi.mock('@/components/onboarding/onboarding-create-goal', () => ({
+  OnboardingCreateGoal: () => null,
+}))
+vi.mock('@/components/onboarding/onboarding-features', () => ({
+  OnboardingFeatures: () => null,
+}))
+vi.mock('@/components/onboarding/onboarding-complete', () => ({
+  OnboardingComplete: () => null,
+}))
+
+import { OnboardingFlow } from '@/components/onboarding/onboarding-flow'
+
+const TestRenderer: typeof import('react-test-renderer') = require('react-test-renderer')
+
 describe('OnboardingFlow helpers', () => {
   it('keeps pro users on the full step sequence', () => {
     expect(getOnboardingDisplayTotal(true)).toBe(7)
@@ -33,3 +126,48 @@ describe('OnboardingFlow helpers', () => {
     expect(shouldHideOnboardingFooter(ONBOARDING_COMPLETE_STEP)).toBe(true)
   })
 })
+
+describe('OnboardingFlow import handoff + resume', () => {
+  beforeEach(() => {
+    routerMock.replace.mockClear()
+    routerMock.push.mockClear()
+    performQueuedApiMutationMock.mockClear()
+    captured.beginPress = undefined
+    captured.importPress = undefined
+    captured.welcomeRendered = false
+    pathnameState.value = '/'
+  })
+
+  it('routes into Astra on import without completing onboarding', async () => {
+    await TestRenderer.act(async () => {
+      TestRenderer.create(<OnboardingFlow />)
+    })
+
+    await TestRenderer.act(async () => {
+      captured.beginPress?.()
+    })
+
+    await TestRenderer.act(async () => {
+      await captured.importPress?.()
+    })
+
+    expect(routerMock.replace).toHaveBeenCalledWith('/chat')
+    expect(performQueuedApiMutationMock).not.toHaveBeenCalled()
+  })
+
+  it('hides the overlay while on the chat route and restores it after leaving chat', async () => {
+    pathnameState.value = '/chat'
+    let tree!: ReturnType<typeof TestRenderer.create>
+    await TestRenderer.act(async () => {
+      tree = TestRenderer.create(<OnboardingFlow />)
+    })
+    expect(captured.welcomeRendered).toBe(false)
+
+    pathnameState.value = '/'
+    captured.welcomeRendered = false
+    await TestRenderer.act(async () => {
+      tree.update(<OnboardingFlow />)
+    })
+    expect(captured.welcomeRendered).toBe(true)
+  })
+})

apps/mobile/components/onboarding/onboarding-flow.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo, useCallback } from 'react'
 import { Animated, Modal, Pressable, Text, View } from 'react-native'
-import { useRouter } from 'expo-router'
+import { usePathname, useRouter } from 'expo-router'
 import { useTranslation } from 'react-i18next'
 import { useQueryClient } from '@tanstack/react-query'
 import {
@@ -17,7 +17,6 @@ import { profileKeys } from '@orbit/shared/query'
 import { API } from '@orbit/shared/api'
 import type { Profile } from '@orbit/shared/types/profile'
 import { useHasProAccess } from '@/hooks/use-profile'
-import { useUIStore } from '@/stores/ui-store'
 import { performQueuedApiMutation } from '@/lib/queued-api-mutation'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { CHAT_DRAFT_STORAGE_KEY } from '@orbit/shared/hooks'
@@ -234,10 +233,9 @@ function OnboardingFooter({
 export function OnboardingFlow() {
   const { t } = useTranslation()
   const router = useRouter()
+  const pathname = usePathname()
   const queryClient = useQueryClient()
   const hasProAccess = useHasProAccess()
-  const onboardingHandedOff = useUIStore((s) => s.onboardingHandedOff)
-  const setOnboardingHandedOff = useUIStore((s) => s.setOnboardingHandedOff)
   const { currentScheme, currentTheme } = useAppTheme()
   const tokens = useMemo(
     () => createTokensV2(currentScheme, currentTheme),
@@ -366,7 +364,6 @@ export function OnboardingFlow() {
       CHAT_DRAFT_STORAGE_KEY,
       t('onboarding.flow.meetAstra.importPrompt'),
     )
-    setOnboardingHandedOff(true)
     router.replace('/chat')
   }
 
@@ -383,7 +380,7 @@ export function OnboardingFlow() {
     if (hasPrev) goPrev()
   }
 
-  if (onboardingHandedOff) return null
+  if (pathname.startsWith('/chat')) return null
 
   return (
     <Modal

apps/web/__tests__/components/onboarding/onboarding-flow.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 
-const mocks = vi.hoisted(() => ({ routerPush: vi.fn(), setOnboardingHandedOff: vi.fn() }))
+const mocks = vi.hoisted(() => ({ routerPush: vi.fn() }))
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string, params?: Record<string, unknown>) => {
@@ -30,19 +30,6 @@ vi.mock('@/app/actions/profile', () => ({
   completeOnboarding: vi.fn().mockResolvedValue({}),
 }))
 
-vi.mock('@/stores/ui-store', () => ({
-  useUIStore: (
-    selector: (state: {
-      onboardingHandedOff: boolean
-      setOnboardingHandedOff: (handedOff: boolean) => void
-    }) => unknown,
-  ) =>
-    selector({
-      onboardingHandedOff: false,
-      setOnboardingHandedOff: mocks.setOnboardingHandedOff,
-    }),
-}))
-
 vi.mock('@/components/onboarding/onboarding-welcome', () => ({
   OnboardingWelcome: () => <div data-testid="step-welcome">Welcome</div>,
 }))
@@ -115,7 +102,6 @@ describe('OnboardingFlow', () => {
   beforeEach(() => {
     document.body.innerHTML = ''
     mocks.routerPush.mockClear()
-    mocks.setOnboardingHandedOff.mockClear()
     vi.mocked(completeOnboarding).mockClear()
     globalThis.localStorage.clear()
   })
@@ -154,10 +140,21 @@ describe('OnboardingFlow', () => {
     expect(globalThis.localStorage.getItem('orbit-chat-draft')).toBe(
       'onboarding.flow.meetAstra.importPrompt',
     )
-    expect(mocks.setOnboardingHandedOff).toHaveBeenCalledWith(true)
     expect(completeOnboarding).not.toHaveBeenCalled()
   })
 
+  it('resumes onboarding when the user returns to the app after the import handoff', async () => {
+    const handoff = render(<OnboardingFlow />)
+    fireEvent.click(screen.getByText('onboarding.flow.begin'))
+    fireEvent.click(screen.getByText('onboarding.flow.meetAstra.import'))
+    await waitFor(() => expect(mocks.routerPush).toHaveBeenCalledWith('/chat'))
+    handoff.unmount()
+    document.body.innerHTML = ''
+
+    render(<OnboardingFlow />)
+    expect(screen.getByTestId('step-welcome')).toBeInTheDocument()
+  })
+
   it('advances through the create-my-own branch via interactions', () => {
     render(<OnboardingFlow />)
     fireEvent.click(screen.getByText('onboarding.flow.begin'))

apps/web/components/onboarding/onboarding-flow.tsx

@@ -19,7 +19,6 @@ import { profileKeys } from '@orbit/shared/query'
 import { CHAT_DRAFT_STORAGE_KEY } from '@orbit/shared/hooks'
 import type { Profile } from '@orbit/shared/types/profile'
 import { useHasProAccess } from '@/hooks/use-profile'
-import { useUIStore } from '@/stores/ui-store'
 import { completeOnboarding } from '@/app/actions/profile'
 import { GradientTop } from '@/components/ui/gradient-top'
 import { PillButton } from '@/components/ui/pill-button'
@@ -39,8 +38,6 @@ export function OnboardingFlow() {
   const router = useRouter()
   const queryClient = useQueryClient()
   const hasProAccess = useHasProAccess()
-  const onboardingHandedOff = useUIStore((s) => s.onboardingHandedOff)
-  const setOnboardingHandedOff = useUIStore((s) => s.setOnboardingHandedOff)
 
   const [sharedStep, setSharedStep] = useState(0)
   const [astraStepShown, setAstraStepShown] = useState(false)
@@ -143,7 +140,6 @@ export function OnboardingFlow() {
         t('onboarding.flow.meetAstra.importPrompt'),
       )
     }
-    setOnboardingHandedOff(true)
     router.push('/chat')
   }
 
@@ -236,7 +232,7 @@ export function OnboardingFlow() {
     return () => el.removeEventListener('keydown', handleKeyDown)
   }, [mounted, sharedStep, viewingAstra])
 
-  if (!mounted || onboardingHandedOff) return null
+  if (!mounted) return null
 
   const progressLabel = `Orbit · ${String(displayStep).padStart(2, '0')} / ${String(displayTotal).padStart(2, '0')}`
 

packages/shared/src/stores/ui-store.ts

@@ -157,9 +157,6 @@ export interface UIStoreState {
 
   setupChecklistDismissed: boolean;
   setSetupChecklistDismissed: (dismissed: boolean) => void;
-
-  onboardingHandedOff: boolean;
-  setOnboardingHandedOff: (handedOff: boolean) => void;
 }
 
 export function getPersistedUIState(state: UIStoreState): PersistedUIState {
@@ -393,9 +390,5 @@ export function createUIStoreState(
     setupChecklistDismissed: false,
     setSetupChecklistDismissed: (dismissed) =>
       set({ setupChecklistDismissed: dismissed }),
-
-    onboardingHandedOff: false,
-    setOnboardingHandedOff: (handedOff) =>
-      set({ onboardingHandedOff: handedOff }),
   };
 }