Adding Webview component and using it in Auth

babel.config.js

@@ -11,7 +11,8 @@ module.exports = function(api) {
     plugins: [
       ["module-resolver", {
         "alias": {
-          "^react-native$": "react-native-web"
+          "^react-native$": "react-native-web",
+          "WebView": "react-native-web-webview"
         }
       }]
     ],

config/webpack.config.dev.js

@@ -143,7 +143,8 @@ module.exports = {
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web'
+      'react-native': 'react-native-web',
+      'WebView': 'react-native-web-webview',
     },
     plugins: [
       // Adds support for installing with Plug'n'Play, leading to faster installs and adding
@@ -186,6 +187,15 @@ module.exports = {
         ],
         include: paths.appSrc
       },
+      {
+        test: /postMock.html$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+          },
+        },
+      },
       {
         // "oneOf" will traverse all following loaders until one will
         // match the requirements. When no loader matches it will fall

package.json

@@ -82,6 +82,7 @@
     "react-native-recaptcha-v3": "0.0.16",
     "react-native-vector-icons": "^6.2.0",
     "react-native-web": "^0.11.x",
+    "react-native-web-webview": "^0.2.8",
     "react-navigation-stack": "^1.0.9",
     "react-navigation-tabs": "^1.0.2",
     "react-otp-input": "^0.2.2",

src/components/auth/Auth.js

@@ -1,19 +1,31 @@
 // @flow
 import React from 'react'
+import { createStackNavigator } from '../appNavigation/stackNavigation'
 import { StyleSheet, View } from 'react-native'
-import { Button, Headline, Paragraph, Text } from 'react-native-paper'
+import { Text } from 'react-native-paper'
 import { normalize } from 'react-native-elements'
 import goodWallet from '../../lib/wallet/GoodWallet'
 import logger from '../../lib/logger/pino-logger'
+import { CustomButton } from '../common'
+import { Description, LinkButton } from '../signup/components'
+import { fontStyle } from '../common/styles'
+import { TermsOfUse, PrivacyPolicy } from '../webView/webViewInstances'
 
 type Props = {
   // callback to report to parent component
-  navigation: any
+  navigation: any,
+  screenProps: {
+    push: Function
+  }
 }
 
 const log = logger.child({ from: 'Auth' })
 
 class Auth extends React.Component<Props> {
+  static navigationOptions = {
+    navigationBarHidden: true
+  }
+
   componentDidMount() {
     log.info(goodWallet)
   }
@@ -31,30 +43,35 @@ class Auth extends React.Component<Props> {
     this.props.navigation.navigate('SignIn')
   }
 
+  handleNavigateTermsOfUse = () => this.props.screenProps.push('TermsOfUse')
+  handleNavigatePrivacyPolicy = () => this.props.screenProps.push('PrivacyPolicy')
+
   render() {
     return (
       <View style={styles.wrapper}>
-        <View styles={styles.topContainer}>
-          <View style={styles.textContainer}>
-            <Headline style={[styles.fontBase, styles.headline]}>CREATE YOUR WALLET</Headline>
-            <Paragraph style={[styles.fontBase, styles.paragraph]}>
-              START EARNING MONEY & USE IT FOR PAYMENTS!
-            </Paragraph>
-          </View>
-
-          <View style={styles.buttonsContainer}>
-            <Button style={[styles.buttonLayout, styles.signUpButton]} mode="contained" onPress={this.handleSignUp}>
-              <Text style={styles.buttonText}>SIGN UP</Text>
-            </Button>
-            <Button style={styles.buttonLayout} mode="outlined" onPress={this.handleSignUpThirdParty}>
-              <Text style={[styles.buttonText, { color: '#555555' }]}>SIGN UP WITH 3rd PARTY</Text>
-            </Button>
-          </View>
+        <View style={styles.topContainer}>
+          <Description style={styles.paragraph}>
+            {
+              "Early Access Alpha's tokens will be revoked at the end of the test and they have no value until public release"
+            }
+          </Description>
         </View>
-
         <View style={styles.bottomContainer}>
+          <Text style={styles.acceptTermsText}>
+            {`By clicking the 'Create a wallet' button, you are accepting our`}
+            <LinkButton style={styles.acceptTermsLink} onPress={this.handleNavigateTermsOfUse}>
+              Terms of Service
+            </LinkButton>
+            {` and `}
+            <LinkButton style={styles.acceptTermsLink} onPress={this.handleNavigatePrivacyPolicy}>
+              Privacy Policy
+            </LinkButton>
+          </Text>
+          <CustomButton style={styles.buttonLayout} mode="contained" onPress={this.handleSignUp}>
+            Create a wallet
+          </CustomButton>
           <Text style={styles.signInLink} onPress={this.handleSignIn}>
-            Sign In (Recovery In your Wallet)
+            Already have a wallet?
           </Text>
         </View>
       </View>
@@ -70,57 +87,53 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     display: 'flex',
     flex: 1,
-    alignItems: 'center'
+    alignItems: 'stretch'
   },
   topContainer: {
     flexGrow: 1,
     display: 'flex',
     justifyContent: 'space-evenly'
   },
   bottomContainer: {
-    marginBottom: 50,
+    marginBottom: 30,
     paddingTop: 30
   },
-  textContainer: {
-    paddingTop: '50%',
-    marginTop: -30
-  },
-  buttonsContainer: {
-    marginTop: 30
-  },
-  fontBase: {
-    fontFamily: 'Helvetica, "sans-serif"',
-    color: '#555555',
-    textAlign: 'center'
-  },
-  headline: {
-    fontWeight: 'bold',
-    fontSize: normalize(24)
-  },
   paragraph: {
-    fontSize: normalize(18),
+    ...fontStyle,
+    marginLeft: normalize(20),
+    marginRight: normalize(20),
+    fontSize: normalize(20),
     lineHeight: '1.2em'
   },
   buttonLayout: {
-    marginTop: 30,
-    padding: 10
-  },
-  buttonText: {
-    fontFamily: 'Helvetica, "sans-serif"',
-    fontSize: normalize(16),
-    color: 'white',
-    fontWeight: 'bold'
-  },
-  signUpButton: {
-    backgroundColor: '#555555'
+    padding: normalize(5),
+    marginTop: normalize(20),
+    marginBottom: normalize(20),
+    fontSize: normalize(18)
   },
   signInLink: {
-    color: '#555555',
-    fontFamily: 'Helvetica, "sans-serif"',
-    fontSize: normalize(18),
+    ...fontStyle,
     textDecorationLine: 'underline',
-    textAlign: 'center'
+    fontSize: normalize(16)
+  },
+  acceptTermsText: {
+    ...fontStyle,
+    fontSize: normalize(14)
+  },
+  acceptTermsLink: {
+    ...fontStyle,
+    fontSize: normalize(14),
+    fontWeight: 'bold'
   }
 })
 
-export default Auth
+export default createStackNavigator(
+  {
+    Auth,
+    TermsOfUse,
+    PrivacyPolicy
+  },
+  {
+    backRouteName: 'Auth'
+  }
+)

src/components/common/styles.js

@@ -1,7 +1,6 @@
 import { normalize } from 'react-native-elements'
 
 export const fontStyle = {
-  fontFamily: 'Helvetica, "sans-serif"',
   color: '#555',
   fontSize: normalize(18),
   textAlign: 'center'

src/components/dashboard/__tests__/__util__/index.js

@@ -22,13 +22,7 @@ const withContainer = Component => props => (
   </Container>
 )
 
-export const getWebRouterComponentWithMocks = componentPath => {
-  const Component = getComponentWithMocks(componentPath)
-
-  const routes = {
-    Component
-  }
-
+export const getWebRouterComponentWithRoutes = routes => {
   const AppNavigator = createSwitchNavigator(routes)
   class AppNavigation extends React.Component<AppNavigationProps, AppNavigationState> {
     static router = AppNavigator.router
@@ -40,6 +34,16 @@ export const getWebRouterComponentWithMocks = componentPath => {
   return withContainer(createBrowserApp(createSwitchNavigator({ AppNavigation })))
 }
 
+export const getWebRouterComponentWithMocks = componentPath => {
+  const Component = getComponentWithMocks(componentPath)
+
+  const routes = {
+    Component
+  }
+
+  return getWebRouterComponentWithRoutes(routes)
+}
+
 export const convertDateToUTC = unixDate => {
   let date = new Date(unixDate)
   return date.getTime() + date.getTimezoneOffset() * 60000

src/components/signup/SignupCompleted.js

@@ -16,7 +16,6 @@ export default class SignupCompleted extends React.Component<Props, State> {
         valid={true}
         handleSubmit={this.handleSubmit}
         submitText="Let's start!"
-        showPrivacyPolicy={false}
         loading={this.props.screenProps.data.loading}
       >
         <Title>{`That's great,\nThanks ${this.props.screenProps.data.fullName}!`}</Title>

src/components/signup/components.js

@@ -3,6 +3,7 @@ import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Button, Text } from 'react-native-paper'
 import { normalize } from 'react-native-elements'
+import { PushButton } from '../appNavigation/stackNavigation'
 
 export const NextButton = (props: {
   valid?: boolean,
@@ -43,20 +44,12 @@ export const ActionButton = (props: {
   </Button>
 )
 
-const Footer = (props: {
-  valid?: boolean,
-  showPrivacyPolicy?: string,
-  submitText?: string,
-  handleSubmit: () => any,
-  loading?: boolean
-}) => {
-  const showPrivacyPolicy = props.showPrivacyPolicy === undefined ? true : props.showPrivacyPolicy
+const Footer = (props: { valid?: boolean, submitText?: string, handleSubmit: () => any, loading?: boolean }) => {
   return (
     <React.Fragment>
       <NextButton valid={props.valid} handleSubmit={props.handleSubmit} loading={props.loading}>
         {props.submitText || 'Next'}
       </NextButton>
-      {showPrivacyPolicy && <LinkButton onPress={() => console.log('Link button')}>Privacy Policy</LinkButton>}
     </React.Fragment>
   )
 }
@@ -74,7 +67,7 @@ export const Wrapper = (props: any) => {
 }
 
 export const LinkButton = (props: any) => (
-  <Text style={[props.styles, styles.linkButton]} onPress={props.onPress}>
+  <Text style={[styles.linkButton, props.style]} onPress={props.onPress}>
     {props.children}
   </Text>
 )
@@ -90,7 +83,6 @@ export const Error = (props: any) => (
 )
 
 const fontStyle = {
-  fontFamily: 'Helvetica, "sans-serif"',
   color: '#555',
   fontSize: normalize(18),
   textAlign: 'center'
@@ -114,7 +106,6 @@ const styles = StyleSheet.create({
   },
   linkButton: {
     color: '#555',
-    fontFamily: 'Helvetica, "sans-serif"',
     fontSize: normalize(18),
     textAlign: 'center',
     marginTop: normalize(10)

src/components/webView/WebViewScreen.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import WebView from 'WebView'
+
+const WebViewScreen = props => {
+  return <WebView source={{ uri: props.source }} style={{ flex: 1 }} />
+}
+
+export default WebViewScreen
+
+export const createWebViewScreen = (source, title) => {
+  const CurrentWebView = () => <WebViewScreen source={source} />
+  CurrentWebView.navigationOptions = {
+    title
+  }
+  return CurrentWebView
+}