fix: phone verification ends at CYA screen always

src/navigator/types.tsx

@@ -308,6 +308,7 @@ export type StackParamList = {
     registrationStep?: { step: number; totalSteps: number }
     e164Number: string
     countryCallingCode: string
+    verificationCompletionScreen: keyof StackParamList
   }
   [Screens.OnboardingSuccessScreen]: undefined
   [Screens.WalletConnectRequest]:

src/verify/VerificationCodeInputScreen.test.tsx

@@ -45,6 +45,7 @@ const renderComponent = () =>
         params={{
           countryCode: '+31',
           e164Number,
+          verificationCompletionScreen: Screens.OnboardingSuccessScreen,
         }}
       />
     </Provider>

src/verify/VerificationCodeInputScreen.tsx

@@ -4,8 +4,8 @@ import React, { useLayoutEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { PhoneVerificationEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { PhoneVerificationEvents } from 'src/analytics/Events'
 import BackButton from 'src/components/BackButton'
 import InfoBottomSheet from 'src/components/InfoBottomSheet'
 import { HeaderTitleWithSubtitle } from 'src/navigator/Headers'
@@ -21,6 +21,7 @@ function VerificationCodeInputScreen({
   route,
   navigation,
 }: NativeStackScreenProps<StackParamList, Screens.VerificationCodeInputScreen>) {
+  const nextScreen = route.params.verificationCompletionScreen
   const [showHelpDialog, setShowHelpDialog] = useState(false)
 
   const { t } = useTranslation()
@@ -82,7 +83,7 @@ function VerificationCodeInputScreen({
         setSmsCode={setSmsCode}
         onResendSms={onResendSms}
         onSuccess={() => {
-          navigate(Screens.OnboardingSuccessScreen)
+          navigate(nextScreen)
         }}
         containerStyle={{ marginTop: headerHeight }}
       />

src/verify/VerificationStartScreen.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, waitFor, within } from '@testing-library/react-native'
+import { fireEvent, render, waitFor, within } from '@testing-library/react-native'
 import React from 'react'
 import * as Keychain from 'react-native-keychain'
 import { Provider } from 'react-redux'
@@ -60,10 +60,6 @@ describe('VerificationStartScreen', () => {
     })
     const { getByText, getByTestId, queryByTestId, queryByText } = renderComponent()
 
-    await act(() => {
-      jest.advanceTimersByTime(5000)
-    })
-
     await waitFor(() => expect(getByText('phoneVerificationScreen.startButtonLabel')).toBeTruthy())
     expect(getByText('phoneVerificationScreen.title')).toBeTruthy()
     expect(getByText('phoneVerificationScreen.description')).toBeTruthy()
@@ -83,10 +79,6 @@ describe('VerificationStartScreen', () => {
     })
     const { getByText, getByTestId } = renderComponent({ hasOnboarded: false })
 
-    await act(() => {
-      jest.advanceTimersByTime(5000)
-    })
-
     await waitFor(() => expect(getByText('phoneVerificationScreen.startButtonLabel')).toBeTruthy())
     expect(getByText('phoneVerificationScreen.title')).toBeTruthy()
     expect(getByText('phoneVerificationScreen.description')).toBeTruthy()
@@ -108,10 +100,6 @@ describe('VerificationStartScreen', () => {
     })
     const { getByText, getByTestId, queryByTestId } = renderComponent({ hasOnboarded: false }, true)
 
-    await act(() => {
-      jest.advanceTimersByTime(5000)
-    })
-
     await waitFor(() => expect(getByText('phoneVerificationScreen.startButtonLabel')).toBeTruthy())
     expect(getByText('phoneVerificationScreen.title')).toBeTruthy()
     expect(getByText('phoneVerificationScreen.description')).toBeTruthy()
@@ -126,23 +114,18 @@ describe('VerificationStartScreen', () => {
     mockedKeychain.getGenericPassword.mockResolvedValue(false)
     const { queryByText, getByTestId } = renderComponent()
 
-    await act(() => {
-      jest.advanceTimersByTime(5000)
-      // enter a valid phone number
-      fireEvent.changeText(getByTestId('PhoneNumberField'), '619123456')
-    })
+    fireEvent.changeText(getByTestId('PhoneNumberField'), '619123456')
 
-    expect(getByTestId('PhoneVerificationContinue')).toBeDisabled()
+    await waitFor(() => expect(getByTestId('PhoneVerificationContinue')).toBeDisabled())
     expect(getByTestId('Button/Loading')).toBeTruthy()
     expect(queryByText('phoneVerificationScreen.startButtonLabel')).toBeFalsy()
   })
 
   it('shows the learn more dialog', async () => {
     const { getByTestId, getByText } = renderComponent()
 
-    await act(() => {
-      fireEvent.press(getByText('phoneVerificationScreen.learnMore.buttonLabel'))
-    })
+    fireEvent.press(getByText('phoneVerificationScreen.learnMore.buttonLabel'))
+
     await waitFor(() => expect(getByTestId('PhoneVerificationLearnMoreDialog')).toBeTruthy())
     const LearnMoreDialog = getByTestId('PhoneVerificationLearnMoreDialog')
     expect(
@@ -154,17 +137,17 @@ describe('VerificationStartScreen', () => {
   it('skip button works', async () => {
     const { getByText } = renderComponent({ hasOnboarded: false })
 
-    await act(() => {
-      fireEvent.press(getByText('skip'))
-    })
+    fireEvent.press(getByText('skip'))
 
-    expect(goToNextOnboardingScreen).toHaveBeenCalledWith({
-      firstScreenInCurrentStep: Screens.VerificationStartScreen,
-      onboardingProps: mockOnboardingProps,
-    })
+    await waitFor(() =>
+      expect(goToNextOnboardingScreen).toHaveBeenCalledWith({
+        firstScreenInCurrentStep: Screens.VerificationStartScreen,
+        onboardingProps: mockOnboardingProps,
+      })
+    )
   })
 
-  it('proceeds to the next verification step', async () => {
+  it('proceeds to the next verification step during onboarding', async () => {
     mockedKeychain.getGenericPassword.mockResolvedValue({
       password: 'some signed message',
       username: 'username',
@@ -173,10 +156,7 @@ describe('VerificationStartScreen', () => {
     })
     const { getByText, getByTestId } = renderComponent({ hasOnboarded: false })
 
-    await act(() => {
-      jest.advanceTimersByTime(5000)
-      fireEvent.changeText(getByTestId('PhoneNumberField'), '619123456')
-    })
+    fireEvent.changeText(getByTestId('PhoneNumberField'), '619123456')
 
     await waitFor(() => expect(getByText('phoneVerificationScreen.startButtonLabel')).toBeTruthy())
     fireEvent.press(getByText('phoneVerificationScreen.startButtonLabel'))
@@ -186,6 +166,7 @@ describe('VerificationStartScreen', () => {
       countryCallingCode: '+31',
       e164Number: '+31619123456',
       registrationStep: { step: 3, totalSteps: 3 },
+      verificationCompletionScreen: 'OnboardingSuccessScreen',
     })
   })
 
@@ -198,10 +179,30 @@ describe('VerificationStartScreen', () => {
     })
     const { getByText, getByTestId } = renderComponent({ hasOnboarded: false }, true)
 
-    await act(() => {
-      jest.advanceTimersByTime(5000)
-      fireEvent.changeText(getByTestId('PhoneNumberField'), '619123456')
+    fireEvent.changeText(getByTestId('PhoneNumberField'), '619123456')
+
+    await waitFor(() => expect(getByText('phoneVerificationScreen.startButtonLabel')).toBeTruthy())
+    fireEvent.press(getByText('phoneVerificationScreen.startButtonLabel'))
+
+    expect(navigate).toHaveBeenCalledTimes(1)
+    expect(navigate).toHaveBeenCalledWith(Screens.VerificationCodeInputScreen, {
+      countryCallingCode: '+31',
+      e164Number: '+31619123456',
+      registrationStep: undefined,
+      verificationCompletionScreen: 'OnboardingSuccessScreen',
     })
+  })
+
+  it('proceeds to the next verification step with the correct navigation props after onboarding', async () => {
+    mockedKeychain.getGenericPassword.mockResolvedValue({
+      password: 'some signed message',
+      username: 'username',
+      service: 'service',
+      storage: 'storage',
+    })
+    const { getByText, getByTestId } = renderComponent({ hasOnboarded: true }, false)
+
+    fireEvent.changeText(getByTestId('PhoneNumberField'), '619123456')
 
     await waitFor(() => expect(getByText('phoneVerificationScreen.startButtonLabel')).toBeTruthy())
     fireEvent.press(getByText('phoneVerificationScreen.startButtonLabel'))
@@ -211,6 +212,7 @@ describe('VerificationStartScreen', () => {
       countryCallingCode: '+31',
       e164Number: '+31619123456',
       registrationStep: undefined,
+      verificationCompletionScreen: 'TabHome',
     })
   })
 })

src/verify/VerificationStartScreen.tsx

@@ -82,10 +82,20 @@ function VerificationStartScreen({
       countryCallingCode: country?.countryCallingCode || '',
     })
 
+    const routes = navigation.getState().routes
+    const prevRoute = routes[routes.length - 2] // -2 because -1 is the current route
+    // Usually it makes sense to navigate the user back to where they launched
+    // the verification flow after they complete it, but during onboarding we
+    // want to navigate to the next step.
+    const verificationCompletionScreen = !route.params?.hasOnboarded
+      ? Screens.OnboardingSuccessScreen
+      : (prevRoute?.name ?? Screens.TabHome)
+
     navigate(Screens.VerificationCodeInputScreen, {
       registrationStep: showSteps ? { step, totalSteps } : undefined,
       e164Number: phoneNumberInfo.e164Number,
       countryCallingCode: country?.countryCallingCode || '',
+      verificationCompletionScreen,
     })
   }