feat: add keyless backup into onboarding flow (#5591)

### Description

Adds the keyless backup flow into onboarding with a redesigned
`SignInWithEmail.tsx` screen specifically for onboarding. Note the
onboarding background colors are fixed in #5592 and the below videos use
a throwaway number and seed phrase.

| iOS CAB | iOS Recovery Phrase | iOS Skip |
| ----- | ----- | ----- |
| <video
src="https://github.com/valora-inc/wallet/assets/26950305/d7f2a3bb-315f-4962-8db1-114e2c686d6b"
/> | <video
src="https://github.com/valora-inc/wallet/assets/26950305/86beca60-4d9f-49f8-ac2c-ebd3c84712b7"
/> | <video
src="https://github.com/valora-inc/wallet/assets/26950305/1672d93a-008d-47e8-b149-13943f98e6fa"
/> |


| Android CAB | Android Recovery Phrase | Android Skip |
| ------ | ----- | ----- |
| <video
src="https://github.com/valora-inc/wallet/assets/26950305/3ef7826d-ec10-4a76-8605-e4b1413bf9ff"
/> | <video
src="https://github.com/valora-inc/wallet/assets/26950305/37e929c8-f0b3-487d-9a4d-f63e18f412ab"
/> | <video
src="https://github.com/valora-inc/wallet/assets/26950305/d5d494a8-a343-45cb-9a5e-29b3b2b69e5c"
/> |

### Test plan

- [x] Tested locally on iOS
- [x] Tested locally on Android
- [x] Unit tests updated

### Related issues

- Fixes ACT-1219

### Backwards compatibility

Yes

### Network scalability

N/A

locales/base/translation.json

@@ -29,6 +29,7 @@
   "dataSaver": "Data Saver",
   "enableDataSaver": "Enable Data Saver",
   "dataSaverDetail": "Data Saver mode allows you to communicate with the the network through a trusted node. You can always change this mode in app settings.",
+  "keylessBackupSetupTitle": "Create Login",
   "keylessBackupSettingsTitle": "Email & Phone Backup",
   "keylessBackupSettingsDeleteError": "Your backup was not able to be deleted, please wait & try again later.",
   "setup": "Set Up",
@@ -102,9 +103,16 @@
   },
   "signInWithEmail": {
     "title": "Sign in with email",
-    "subtitle": "Sign in with your email to set it up as a backup.\n\nYou will be prompted to sign in again if you ever lose your wallet.",
+    "subtitle": "Sign in with your email to set it up as a backup. You will be prompted to sign in again if you ever lose your wallet.",
     "subtitleRestore": "Sign in with the email you used to set up your wallet backup.",
-    "google": "Sign in with Google"
+    "google": "Sign in with Google",
+    "signInAnotherWay": "Sign in another way",
+    "bottomSheet": {
+      "title": "Save your recovery phrase to create a wallet",
+      "description": "We’re going to be supporting other email providers soon, but in the meanwhile you’ll have to save your recovery phrase to finish creating a wallet.",
+      "continue": "Continue",
+      "skip": "Skip (not recommended)"
+    }
   },
   "keylessBackupPhoneInput": {
     "setup": {

src/account/AccountKeyEducation.tsx

@@ -17,7 +17,9 @@ type Props = NativeStackScreenProps<StackParamList, Screens.AccountKeyEducation>
 export default function AccountKeyEducation(props: Props) {
   function onComplete() {
     ValoraAnalytics.track(OnboardingEvents.backup_education_complete)
-    if (props.route.params?.nextScreen) {
+    if (props.route.params?.origin === 'cabOnboarding') {
+      navigate(Screens.OnboardingRecoveryPhrase, { origin: 'cabOnboarding' })
+    } else if (props.route.params?.nextScreen) {
       navigate(props.route.params?.nextScreen)
     } else {
       navigate(Screens.BackupPhrase)

src/analytics/Events.tsx

@@ -95,9 +95,11 @@ export enum SettingsEvents {
 export enum KeylessBackupEvents {
   wallet_security_primer_get_started = 'wallet_security_primer_get_started',
   cab_setup_recovery_phrase = 'cab_setup_recovery_phrase',
+  cab_sign_in_another_way = 'cab_sign_in_another_way',
   cab_sign_in_with_google = 'cab_sign_in_with_google',
   cab_sign_in_with_google_success = 'cab_sign_in_with_google_success',
   cab_sign_in_with_email_screen_cancel = 'cab_sign_in_with_email_screen_cancel',
+  cab_sign_in_with_email_screen_skip = 'cab_sign_in_with_email_screen_skip',
   cab_get_torus_keyshare_failed = 'cab_get_torus_keyshare_failed',
   cab_enter_phone_number_continue = 'cab_enter_phone_number_continue',
   cab_enter_phone_number_cancel = 'cab_enter_phone_number_cancel',

src/analytics/Properties.tsx

@@ -253,9 +253,11 @@ interface CommonKeylessBackupProps {
 interface KeylessBackupEventsProperties {
   [KeylessBackupEvents.wallet_security_primer_get_started]: undefined
   [KeylessBackupEvents.cab_setup_recovery_phrase]: undefined
+  [KeylessBackupEvents.cab_sign_in_another_way]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_sign_in_with_google]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_sign_in_with_google_success]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_sign_in_with_email_screen_cancel]: CommonKeylessBackupProps
+  [KeylessBackupEvents.cab_sign_in_with_email_screen_skip]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_enter_phone_number_continue]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_enter_phone_number_cancel]: CommonKeylessBackupProps
   [KeylessBackupEvents.cab_intro_continue]: CommonKeylessBackupProps

src/analytics/docs.ts

@@ -126,9 +126,11 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [SettingsEvents.settings_delete_keyless_backup]: ``,
   [KeylessBackupEvents.wallet_security_primer_get_started]: ``,
   [KeylessBackupEvents.cab_setup_recovery_phrase]: `When the recovery phrase link is pressed in the setup wallet backup screen`,
+  [KeylessBackupEvents.cab_sign_in_another_way]: `When the sign in another way button is pressed in the setup wallet backup screen`,
   [KeylessBackupEvents.cab_sign_in_with_google]: ``,
   [KeylessBackupEvents.cab_sign_in_with_google_success]: ``,
   [KeylessBackupEvents.cab_sign_in_with_email_screen_cancel]: ``,
+  [KeylessBackupEvents.cab_sign_in_with_email_screen_skip]: `When the skip button is pressed on the sign in with email bottom sheet`,
   [KeylessBackupEvents.cab_get_torus_keyshare_failed]: ``,
   [KeylessBackupEvents.cab_enter_phone_number_continue]: ``,
   [KeylessBackupEvents.cab_enter_phone_number_cancel]: `When the cancel button is pressed on the phone input screen`,

src/images/Images.ts

@@ -20,6 +20,7 @@ export const dappListLogo = require('src/images/dapp-list-logo.png')
 export const earn1 = require('src/images/earn1.png')
 export const earn2 = require('src/images/earn2.png')
 export const earn3 = require('src/images/earn3.png')
+export const email = require('src/images/email.png')
 export const fiatExchange = require('src/images/fiat-exchange.png')
 export const getVerified = require('src/images/get-verified.png')
 export const inviteFriends = require('src/images/invite-friends.png')

src/keylessBackup/SignInWithEmail.test.tsx

@@ -1,10 +1,12 @@
 import { fireEvent, render, waitFor } from '@testing-library/react-native'
 import React from 'react'
 import { Provider } from 'react-redux'
+import { KeylessBackupEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import SignInWithEmail from 'src/keylessBackup/SignInWithEmail'
 import { googleSignInCompleted } from 'src/keylessBackup/slice'
 import { KeylessBackupFlow, KeylessBackupOrigin } from 'src/keylessBackup/types'
+import { noHeader } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import Logger from 'src/utils/Logger'
@@ -36,7 +38,7 @@ const renderComponent = (
           keylessBackupFlow,
           origin,
         }}
-        options={SignInWithEmail.navigationOptions}
+        options={noHeader}
       />
     </Provider>
   )
@@ -175,4 +177,50 @@ describe('SignInWithEmail', () => {
     expect(logWarnSpy).not.toHaveBeenCalled()
     expect(queryByTestId('Button/Loading')).toBeNull()
   })
+
+  it("pressing 'Sign in another way' then 'continue' navigates to recovery phrase education", () => {
+    const { getByTestId, getByText } = renderComponent(
+      KeylessBackupFlow.Setup,
+      KeylessBackupOrigin.Onboarding
+    )
+    expect(getByText('signInWithEmail.title')).toBeTruthy()
+    expect(getByText('signInWithEmail.subtitle')).toBeTruthy()
+    expect(getByTestId('SignInWithEmail/Google')).toBeTruthy()
+    expect(getByTestId('SignInWithEmail/SignInAnotherWay')).toBeTruthy()
+
+    fireEvent.press(getByTestId('SignInWithEmail/SignInAnotherWay'))
+    expect(getByTestId('KeylessBackupSignInWithEmail/BottomSheet')).toBeTruthy()
+
+    fireEvent.press(getByText('signInWithEmail.bottomSheet.continue'))
+    expect(navigate).toHaveBeenCalledWith(Screens.AccountKeyEducation, {
+      origin: 'cabOnboarding',
+    })
+    expect(ValoraAnalytics.track).toHaveBeenCalledWith(
+      KeylessBackupEvents.cab_setup_recovery_phrase
+    )
+  })
+
+  it("pressing 'Sign in another way' then 'Skip (not recommended)' navigates to next onboarding screen", () => {
+    const { getByTestId, getByText } = renderComponent(
+      KeylessBackupFlow.Setup,
+      KeylessBackupOrigin.Onboarding
+    )
+    expect(getByText('signInWithEmail.title')).toBeTruthy()
+    expect(getByText('signInWithEmail.subtitle')).toBeTruthy()
+    expect(getByTestId('SignInWithEmail/Google')).toBeTruthy()
+    expect(getByTestId('SignInWithEmail/SignInAnotherWay')).toBeTruthy()
+
+    fireEvent.press(getByTestId('SignInWithEmail/SignInAnotherWay'))
+    expect(getByTestId('KeylessBackupSignInWithEmail/BottomSheet')).toBeTruthy()
+
+    fireEvent.press(getByText('signInWithEmail.bottomSheet.skip'))
+    expect(navigate).toHaveBeenCalledWith(Screens.VerificationStartScreen)
+    expect(ValoraAnalytics.track).toHaveBeenCalledWith(
+      KeylessBackupEvents.cab_sign_in_with_email_screen_skip,
+      {
+        keylessBackupFlow: KeylessBackupFlow.Setup,
+        origin: KeylessBackupOrigin.Onboarding,
+      }
+    )
+  })
 })