[Wallet] Set up new verification screen skeletons

packages/mobile/src/components/DevSkipButton.tsx

@@ -24,7 +24,7 @@ const mapStateToProps = (state: RootState): StateProps => {
   }
 }
 
-export class DevSkipButton extends React.Component<Props> {
+class DevSkipButton extends React.Component<Props> {
   skip = () => {
     if (this.props.onSkip) {
       this.props.onSkip()

packages/mobile/src/navigator/Navigator.tsx

@@ -62,7 +62,11 @@ import SendAmount from 'src/send/SendAmount'
 import SendConfirmation from 'src/send/SendConfirmation'
 import SetClock from 'src/set-clock/SetClock'
 import TransactionReviewScreen from 'src/transactions/TransactionReviewScreen'
+import VerificationInputScreen from 'src/verify/VerificationInputScreen'
+import VerificationInterstitialScreen from 'src/verify/VerificationInterstitialScreen'
+import VerificationLearnMoreScreen from 'src/verify/VerificationLearnMoreScreen'
 import VerificationLoadingScreen from 'src/verify/VerificationLoadingScreen'
+import VerificationSuccessScreen from 'src/verify/VerificationSuccessScreen'
 import VerifyVerified from 'src/verify/Verified'
 import VerifyVerifying from 'src/verify/Verifying'
 import VerifyEducation from 'src/verify/VerifyPhoneEducation'
@@ -113,9 +117,14 @@ const NuxStack = createStackNavigator(
     [Screens.ImportWalletEmpty]: { screen: ImportWalletEmpty },
     [Screens.ImportContacts]: { screen: ImportContacts },
     [Screens.VerifyEducation]: { screen: VerifyEducation },
-    [Screens.VerificationLoadingScreen]: { screen: VerificationLoadingScreen },
     [Screens.VerifyVerifying]: { screen: VerifyVerifying },
     [Screens.VerifyVerified]: { screen: VerifyVerified },
+    [Screens.VerificationEducationScreen]: { screen: VerificationLoadingScreen },
+    [Screens.VerificationLearnMoreScreen]: { screen: VerificationLearnMoreScreen },
+    [Screens.VerificationLoadingScreen]: { screen: VerificationLoadingScreen },
+    [Screens.VerificationInterstitialScreen]: { screen: VerificationInterstitialScreen },
+    [Screens.VerificationInputScreen]: { screen: VerificationInputScreen },
+    [Screens.VerificationSuccessScreen]: { screen: VerificationSuccessScreen },
     ...commonScreens,
   },
   {

packages/mobile/src/navigator/Screens.tsx

@@ -64,9 +64,15 @@ export enum Screens {
   TabNavigator = 'TabNavigator',
   TransactionReview = 'TransactionReview',
   UpgradeScreen = 'UpgradeScreen',
+  // TODO(Rossy) Remove these next 3
   VerifyEducation = 'VerifyEducation',
   VerifyVerified = 'VerifyVerified',
   VerifyVerifying = 'VerifyVerifying',
+  VerificationEducationScreen = 'VerificationEducationScreen',
+  VerificationLearnMoreScreen = 'VerificationLearnMoreScreen',
   VerificationLoadingScreen = 'VerificationLoadingScreen',
+  VerificationInterstitialScreen = 'VerificationInterstitialScreen',
+  VerificationInputScreen = 'VerificationInputScreen',
+  VerificationSuccessScreen = 'VerificationSuccessScreen',
   WalletHome = 'WalletHome',
 }

packages/mobile/src/verify/VerificationEducationScreen.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import VerificationEducationScreen from 'src/verify/VerificationEducationScreen'
+import { createMockStore } from 'test/utils'
+
+describe('VerificationEducationScreen', () => {
+  const store = createMockStore({})
+
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={store}>
+        <VerificationEducationScreen />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/mobile/src/verify/VerificationEducationScreen.tsx

@@ -0,0 +1,41 @@
+import colors from '@celo/react-components/styles/colors'
+import * as React from 'react'
+import { withNamespaces, WithNamespaces } from 'react-i18next'
+import { ScrollView, StyleSheet, Text } from 'react-native'
+import SafeAreaView from 'react-native-safe-area-view'
+import componentWithAnalytics from 'src/analytics/wrapper'
+import { Namespaces } from 'src/i18n'
+
+class VerificationEducationScreen extends React.Component<WithNamespaces> {
+  static navigationOptions = null
+
+  render() {
+    // const { t } = this.props
+    return (
+      <SafeAreaView style={styles.container}>
+        <ScrollView contentContainerStyle={styles.scrollContainer}>
+          <Text>Verify your phone</Text>
+        </ScrollView>
+      </SafeAreaView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: colors.background,
+  },
+  scrollContainer: {
+    flex: 1,
+    padding: 30,
+    paddingTop: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export default componentWithAnalytics(
+  withNamespaces(Namespaces.nuxVerification2)(VerificationEducationScreen)
+)

packages/mobile/src/verify/VerificationInputScreen.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import VerificationInputScreen from 'src/verify/VerificationInputScreen'
+import { createMockStore } from 'test/utils'
+
+describe('VerificationInputScreen', () => {
+  const store = createMockStore({})
+
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={store}>
+        <VerificationInputScreen />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('enables button after timer', () => {
+    // TODO
+  })
+
+  it('shows tip when typing', () => {
+    // TODO
+  })
+})

packages/mobile/src/verify/VerificationInputScreen.tsx

@@ -0,0 +1,43 @@
+import colors from '@celo/react-components/styles/colors'
+import * as React from 'react'
+import { withNamespaces, WithNamespaces } from 'react-i18next'
+import { ScrollView, StyleSheet } from 'react-native'
+import SafeAreaView from 'react-native-safe-area-view'
+import componentWithAnalytics from 'src/analytics/wrapper'
+import DevSkipButton from 'src/components/DevSkipButton'
+import { Namespaces } from 'src/i18n'
+import { Screens } from 'src/navigator/Screens'
+
+class VerificationInputScreen extends React.Component<WithNamespaces> {
+  static navigationOptions = null
+
+  render() {
+    // const { t } = this.props
+    return (
+      <SafeAreaView style={styles.container}>
+        <ScrollView contentContainerStyle={styles.scrollContainer}>
+          <DevSkipButton nextScreen={Screens.WalletHome} />
+        </ScrollView>
+      </SafeAreaView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: colors.background,
+  },
+  scrollContainer: {
+    flex: 1,
+    padding: 30,
+    paddingTop: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export default componentWithAnalytics(
+  withNamespaces(Namespaces.nuxVerification2)(VerificationInputScreen)
+)

packages/mobile/src/verify/VerificationInterstitialScreen.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import VerificationInterstitialScreen from 'src/verify/VerificationInterstitialScreen'
+import { createMockStore } from 'test/utils'
+
+describe('VerificationInterstitialScreen', () => {
+  const store = createMockStore({})
+
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={store}>
+        <VerificationInterstitialScreen />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/mobile/src/verify/VerificationInterstitialScreen.tsx

@@ -0,0 +1,38 @@
+import colors from '@celo/react-components/styles/colors'
+import * as React from 'react'
+import { withNamespaces, WithNamespaces } from 'react-i18next'
+import { ScrollView, StyleSheet, Text } from 'react-native'
+import SafeAreaView from 'react-native-safe-area-view'
+import { Namespaces } from 'src/i18n'
+
+class VerificationInterstitialScreen extends React.Component<WithNamespaces> {
+  static navigationOptions = null
+
+  render() {
+    // const { t } = this.props
+    return (
+      <SafeAreaView style={styles.container}>
+        <ScrollView contentContainerStyle={styles.scrollContainer}>
+          <Text>Almost Done</Text>
+        </ScrollView>
+      </SafeAreaView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: colors.background,
+  },
+  scrollContainer: {
+    flex: 1,
+    padding: 30,
+    paddingTop: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export default withNamespaces(Namespaces.nuxVerification2)(VerificationInterstitialScreen)

packages/mobile/src/verify/VerificationLearnMoreScreen.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import VerificationLearnMoreScreen from 'src/verify/VerificationLearnMoreScreen'
+import { createMockStore } from 'test/utils'
+
+describe('VerificationLearnMoreScreen', () => {
+  const store = createMockStore({})
+
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={store}>
+        <VerificationLearnMoreScreen />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/mobile/src/verify/VerificationLearnMoreScreen.tsx

@@ -0,0 +1,41 @@
+import colors from '@celo/react-components/styles/colors'
+import * as React from 'react'
+import { withNamespaces, WithNamespaces } from 'react-i18next'
+import { ScrollView, StyleSheet, Text } from 'react-native'
+import SafeAreaView from 'react-native-safe-area-view'
+import componentWithAnalytics from 'src/analytics/wrapper'
+import { Namespaces } from 'src/i18n'
+
+class VerificationLearnMoreScreen extends React.Component<WithNamespaces> {
+  static navigationOptions = null
+
+  render() {
+    // const { t } = this.props
+    return (
+      <SafeAreaView style={styles.container}>
+        <ScrollView contentContainerStyle={styles.scrollContainer}>
+          <Text>Learn more stuff</Text>
+        </ScrollView>
+      </SafeAreaView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    backgroundColor: colors.background,
+  },
+  scrollContainer: {
+    flex: 1,
+    padding: 30,
+    paddingTop: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export default componentWithAnalytics(
+  withNamespaces(Namespaces.nuxVerification2)(VerificationLearnMoreScreen)
+)

packages/mobile/src/verify/VerificationLoadingScreen.test.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import VerificationLoadingScreen from 'src/verify/VerificationLoadingScreen'
+import { createMockStore } from 'test/utils'
+
+describe('VerificationLoadingScreen', () => {
+  const store = createMockStore({})
+
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={store}>
+        <VerificationLoadingScreen />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('updates progress bar', () => {
+    // TODO
+  })
+})

packages/mobile/src/verify/VerificationLoadingScreen.tsx

@@ -5,11 +5,12 @@ import { ScrollView, StyleSheet } from 'react-native'
 import SafeAreaView from 'react-native-safe-area-view'
 import componentWithAnalytics from 'src/analytics/wrapper'
 import Carousel, { CarouselItem } from 'src/components/Carousel'
+import DevSkipButton from 'src/components/DevSkipButton'
 import { Namespaces } from 'src/i18n'
-import { headerWithCancelButton } from 'src/navigator/Headers'
+import { Screens } from 'src/navigator/Screens'
 
-export class VerificationLoadingScreen extends React.Component<WithNamespaces> {
-  static navigationOptions = headerWithCancelButton
+class VerificationLoadingScreen extends React.Component<WithNamespaces> {
+  static navigationOptions = null
 
   render() {
     // const { t } = this.props
@@ -27,7 +28,7 @@ export class VerificationLoadingScreen extends React.Component<WithNamespaces> {
     return (
       <SafeAreaView style={styles.container}>
         <ScrollView contentContainerStyle={styles.scrollContainer}>
-          {/* <DevSkipButton nextScreen={Screens.WalletHome} /> */}
+          <DevSkipButton nextScreen={Screens.WalletHome} />
           <Carousel containerStyle={styles.carouselContainer} items={items} />
         </ScrollView>
       </SafeAreaView>

packages/mobile/src/verify/VerificationSuccessScreen.test.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import * as renderer from 'react-test-renderer'
+import VerificationSuccessScreen from 'src/verify/VerificationSuccessScreen'
+import { createMockStore } from 'test/utils'
+
+describe('VerificationSuccessScreen', () => {
+  const store = createMockStore({})
+
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <Provider store={store}>
+        <VerificationSuccessScreen />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})