feat(onboarding): remove steps on phone verification screen when impo…

…rting (#4834) ### Description Removes steps on phone verification screen when importing. Refactored the screen to accept a property `isOnboarding` instead of `hideOnboardingStep` which was used to identify whether the user is in the onboarding flow and whether to show steps or not. Also fixed a bug where iOS gestures where disabled when not in onboarding instead of onboarding ### Test plan Unit tests, manual | Phone Input (onboarding) | Verification Code input (onboarding) | Phone Input (Settings) |--------|--------|--------| | <img src="https://github.com/valora-inc/wallet/assets/5062591/c7afde21-6db0-4f3e-a689-ca6018a43571" width="250" /> | <img src="https://github.com/valora-inc/wallet/assets/5062591/7a3df4e7-a4d1-4157-86ac-b4864380299a" width="250" /> | <img src="https://github.com/valora-inc/wallet/assets/5062591/5ede6003-3c37-4075-8040-34fd8fbfc6cf" width="250" /> | ### Related issues - Part of ACT-863 ### Backwards compatibility Yes
valora-inc · Feb 2, 2024 · 5548c88 · 5548c88
1 parent 36e6e66
commit 5548c88
Show file tree

Hide file tree

Showing 15 changed files with 163 additions and 80 deletions.
diff --git a/src/RevokePhoneNumber.tsx b/src/RevokePhoneNumber.tsx
@@ -51,9 +51,7 @@ export const RevokePhoneNumber = ({ forwardedRef }: Props) => {
   }, [revokeNumberAsync.status])
 
   const handleNavigateToVerifiedNumber = () => {
-    navigate(Screens.VerificationStartScreen, {
-      hideOnboardingStep: true,
-    })
+    navigate(Screens.VerificationStartScreen)
   }
 
   const handleRevokePhoneNumber = async () => {

diff --git a/src/account/Settings.tsx b/src/account/Settings.tsx
@@ -116,9 +116,7 @@ export const Account = ({ navigation, route }: Props) => {
 
   const goToConfirmNumber = () => {
     ValoraAnalytics.track(SettingsEvents.settings_verify_number)
-    navigate(Screens.VerificationStartScreen, {
-      hideOnboardingStep: true,
-    })
+    navigate(Screens.VerificationStartScreen)
   }
 
   const goToLanguageSetting = () => {

diff --git a/src/consumerIncentives/ConsumerIncentivesHomeScreen.test.tsx b/src/consumerIncentives/ConsumerIncentivesHomeScreen.test.tsx
@@ -228,9 +228,7 @@ describe('ConsumerIncentivesHomeScreen', () => {
 
     fireEvent.press(getByTestId('ConsumerIncentives/CTA'))
 
-    expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen, {
-      hideOnboardingStep: true,
-    })
+    expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen)
   })
 
   it('opens a WebView when Learn More is tapped', () => {

diff --git a/src/consumerIncentives/ConsumerIncentivesHomeScreen.tsx b/src/consumerIncentives/ConsumerIncentivesHomeScreen.tsx
@@ -262,7 +262,7 @@ export default function ConsumerIncentivesHomeScreen() {
         buttonPressed: RewardsScreenCta.CashIn,
       })
     } else {
-      navigate(Screens.VerificationStartScreen, { hideOnboardingStep: true })
+      navigate(Screens.VerificationStartScreen)
       ValoraAnalytics.track(RewardsEvents.rewards_screen_cta_pressed, {
         buttonPressed: RewardsScreenCta.VerifyPhone,
       })

diff --git a/src/home/NotificationBox.test.tsx b/src/home/NotificationBox.test.tsx
@@ -162,9 +162,7 @@ describe('NotificationBox', () => {
     expect(getByText('reverifyUsingCPVHomecard.description')).toBeTruthy()
 
     fireEvent.press(getByText('reverifyUsingCPVHomecard.buttonLabel'))
-    expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen, {
-      hideOnboardingStep: true,
-    })
+    expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen)
   })
 
   it('renders educations when not complete yet', () => {

diff --git a/src/home/NotificationBox.tsx b/src/home/NotificationBox.tsx
@@ -149,7 +149,7 @@ export function useSimpleActions() {
               notificationId: NotificationType.reverify_using_CPV,
               notificationPositionInList: params?.index,
             })
-            navigate(Screens.VerificationStartScreen, { hideOnboardingStep: true })
+            navigate(Screens.VerificationStartScreen)
           },
         },
       ],
@@ -282,9 +282,7 @@ export function useSimpleActions() {
               notificationId: NotificationType.verification_prompt,
               notificationPositionInList: params?.index,
             })
-            navigate(Screens.VerificationStartScreen, {
-              hideOnboardingStep: true,
-            })
+            navigate(Screens.VerificationStartScreen)
           },
         },
         {

diff --git a/src/home/NotificationCenter.test.tsx b/src/home/NotificationCenter.test.tsx
@@ -294,9 +294,7 @@ describe('NotificationCenter', () => {
       expect(getByText('reverifyUsingCPVHomecard.description')).toBeTruthy()
 
       fireEvent.press(getByText('reverifyUsingCPVHomecard.buttonLabel'))
-      expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen, {
-        hideOnboardingStep: true,
-      })
+      expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen)
     })
 
     it('emits correct analytics event when CTA button is pressed', () => {

diff --git a/src/navigator/types.tsx b/src/navigator/types.tsx
@@ -292,9 +292,8 @@ export type StackParamList = {
   [Screens.ValidateRecipientAccount]: ValidateRecipientParams
   [Screens.VerificationStartScreen]:
     | {
-        hideOnboardingStep?: boolean
+        isOnboarding?: boolean
         selectedCountryCodeAlpha2?: string
-        choseToRestoreAccount?: boolean
       }
     | undefined
   [Screens.VerificationCodeInputScreen]: {

diff --git a/src/onboarding/steps.test.ts b/src/onboarding/steps.test.ts
@@ -27,11 +27,11 @@ describe('onboarding steps', () => {
       chooseAdventureEnabled: false,
     },
     screens: [
-      Screens.NameAndPicture,
-      Screens.PincodeSet,
-      Screens.EnableBiometry,
-      Screens.ProtectWallet,
-      Screens.VerificationStartScreen,
+      { screen: Screens.NameAndPicture, props: undefined },
+      { screen: Screens.PincodeSet, props: undefined },
+      { screen: Screens.EnableBiometry, props: undefined },
+      { screen: Screens.ProtectWallet, props: undefined },
+      { screen: Screens.VerificationStartScreen, props: { isOnboarding: true } },
     ],
     name: 'newUserFlowWithEverythingEnabled',
     finalScreen: Screens.WalletHome,
@@ -47,10 +47,10 @@ describe('onboarding steps', () => {
       onboardingNameScreenEnabled: false,
     },
     screens: [
-      Screens.PincodeSet,
-      Screens.EnableBiometry,
-      Screens.ProtectWallet,
-      Screens.VerificationStartScreen,
+      { screen: Screens.PincodeSet, props: undefined },
+      { screen: Screens.EnableBiometry, props: undefined },
+      { screen: Screens.ProtectWallet, props: undefined },
+      { screen: Screens.VerificationStartScreen, props: { isOnboarding: true } },
     ],
     name: 'newUserChooseAdventure',
     finalScreen: Screens.ChooseYourAdventure,
@@ -64,7 +64,11 @@ describe('onboarding steps', () => {
       recoveringFromStoreWipe: false,
       chooseAdventureEnabled: false,
     },
-    screens: [Screens.NameAndPicture, Screens.PincodeSet, Screens.ProtectWallet],
+    screens: [
+      { screen: Screens.NameAndPicture, props: undefined },
+      { screen: Screens.PincodeSet, props: undefined },
+      { screen: Screens.ProtectWallet, props: undefined },
+    ],
     name: 'newUserFlowWithEverythingDisabled',
     finalScreen: Screens.WalletHome,
   }
@@ -79,26 +83,30 @@ describe('onboarding steps', () => {
       chooseAdventureEnabled: false,
     },
     screens: [
-      Screens.NameAndPicture,
-      Screens.PincodeSet,
-      Screens.EnableBiometry,
-      Screens.ImportWallet,
-      Screens.VerificationStartScreen,
+      { screen: Screens.NameAndPicture, props: undefined },
+      { screen: Screens.PincodeSet, props: undefined },
+      { screen: Screens.EnableBiometry, props: undefined },
+      { screen: Screens.ImportWallet, props: undefined },
+      { screen: Screens.VerificationStartScreen, props: { isOnboarding: true } },
     ],
     name: 'importWalletFlowEverythingEnabled',
     finalScreen: Screens.WalletHome,
   }
 
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it.each([
     newUserFlowWithEverythingEnabled,
     newUserChooseAdventure,
     newUserFlowWithEverythingDisabled,
     importWalletFlowEverythingEnabled,
   ])(
-    'goToNextOnboardingScreen and getOnboardingStepValues work as expected',
+    'goToNextOnboardingScreen and getOnboardingStepValues work as expected for $name',
     ({ onboardingProps, screens, name, finalScreen }) => {
       const expectedTotalSteps = screens.length
-      screens.forEach((screen, index) => {
+      screens.forEach(({ screen, props }, index) => {
         const { totalSteps, step } = getOnboardingStepValues(screen, onboardingProps)
         // Checking that the step number is correct
         try {
@@ -122,12 +130,16 @@ describe('onboarding steps', () => {
             updateStatsigAndNavigate(finalScreen as keyof StackParamList)
           )
         } else {
+          const args: any[] = [screens[index + 1].screen]
+          if (screens[index + 1].props) {
+            args.push(screens[index + 1].props)
+          }
           try {
             // eslint-disable-next-line jest/no-conditional-expect
-            expect(navigate).toHaveBeenCalledWith(screens[index + 1])
+            expect(navigate).toHaveBeenCalledWith(...args)
           } catch {
             // eslint-disable-next-line jest/no-conditional-expect
-            expect(navigateClearingStack).toHaveBeenCalledWith(screens[index + 1])
+            expect(navigateClearingStack).toHaveBeenCalledWith(...args)
           }
         }
       })
@@ -286,7 +298,9 @@ describe('onboarding steps', () => {
           },
         })
         expect(mockStore.dispatch).not.toHaveBeenCalled()
-        expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen)
+        expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen, {
+          isOnboarding: true,
+        })
       })
     })
     describe('Screens.VerificationStartScreen', () => {
@@ -330,7 +344,9 @@ describe('onboarding steps', () => {
           },
         })
         expect(mockStore.dispatch).not.toHaveBeenCalled()
-        expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen)
+        expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen, {
+          isOnboarding: true,
+        })
       })
     })
   })

diff --git a/src/onboarding/steps.ts b/src/onboarding/steps.ts
@@ -23,12 +23,10 @@ import { StatsigExperiments } from 'src/statsig/types'
 export const END_OF_ONBOARDING_SCREENS = [Screens.WalletHome, Screens.ChooseYourAdventure]
 
 interface NavigatorFunctions {
-  navigate: typeof NavigationService.navigate | ((screen: Screens) => void)
-  popToScreen: typeof NavigationService.popToScreen | ((screen: Screens) => void)
+  navigate: typeof NavigationService.navigate
+  popToScreen: typeof NavigationService.popToScreen
   finishOnboarding: (screen: keyof StackParamList) => void
-  navigateClearingStack:
-    | typeof NavigationService.navigateClearingStack
-    | ((screen: Screens) => void)
+  navigateClearingStack: typeof NavigationService.navigateClearingStack
 }
 
 interface GetStepInfoProps {
@@ -110,8 +108,9 @@ export function getOnboardingStepValues(screen: Screens, onboardingProps: Onboar
   let reachedStep = false // tracks whether we have reached the step the user is on in onboarding, and we can stop incrementing stepCounter
   let currentScreen: Screens = firstScreen // pointer that we will update when simulating navigation through the onboarding screens to calculate "step" and "totalSteps"
 
-  const nextStepAndCount = (nextScreen: Screens) => {
+  const nextStepAndCount: typeof NavigationService.navigate = (...args) => {
     // dummy navigation function to help determine what onboarding step the user is on, without triggering side effects like actually cycling them back through the first few onboarding screens
+    const [nextScreen] = args
     if (!END_OF_ONBOARDING_SCREENS.includes(nextScreen)) {
       totalCounter++
       if (currentScreen === screen) {
@@ -252,7 +251,7 @@ export function _getStepInfo({ firstScreenInStep, navigator, dispatch, props }:
             navigateHomeOrChooseAdventure()
           } else {
             // DO NOT CLEAR NAVIGATION STACK HERE - breaks restore flow on initial app open in native-stack v6
-            navigate(Screens.VerificationStartScreen)
+            navigate(Screens.VerificationStartScreen, { isOnboarding: true })
           }
         },
       }
@@ -271,7 +270,7 @@ export function _getStepInfo({ firstScreenInStep, navigator, dispatch, props }:
             dispatch(setHasSeenVerificationNux(true))
             finishOnboarding(Screens.WalletHome)
           } else {
-            navigate(Screens.VerificationStartScreen)
+            navigate(Screens.VerificationStartScreen, { isOnboarding: true })
           }
         },
       }

diff --git a/src/send/SelectRecipientButtons.test.tsx b/src/send/SelectRecipientButtons.test.tsx
@@ -105,9 +105,7 @@ describe('SelectRecipientButtons', () => {
       expect(getByTestId('SelectRecipient/PhoneNumberModal')).not.toBeVisible()
     })
     await waitFor(() => {
-      expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen, {
-        hideOnboardingStep: true,
-      })
+      expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen)
     })
   })
 

diff --git a/src/send/SelectRecipientButtons.tsx b/src/send/SelectRecipientButtons.tsx
@@ -130,7 +130,7 @@ export default function SelectRecipientButtons({ onContactsPermissionGranted }:
       // reset state so the next time the modal is dismissed, this doesn't end
       // up navigating
       setNavigateToPhoneVerification(false)
-      navigate(Screens.VerificationStartScreen, { hideOnboardingStep: true })
+      navigate(Screens.VerificationStartScreen)
     }
   }
 

diff --git a/src/send/Send.tsx b/src/send/Send.tsx
@@ -192,9 +192,7 @@ function Send({ route }: Props) {
   }
 
   const onPressStartVerification = () => {
-    navigate(Screens.VerificationStartScreen, {
-      hideOnboardingStep: true,
-    })
+    navigate(Screens.VerificationStartScreen)
   }
 
   const onPressContactsSettings = () => {