add wait list wizard

App.js

@@ -12,6 +12,7 @@ import { getDemographicData } from "./src/store/actions/demographicData";
 
 import Main from "./src/components/Main"
 import OnBoarding from "./src/components/OnBoarding"
+import WaitList from "./src/components/WaitList"
 import Demographic from "./src/components/Demographic"
 import About from "./src/components/About"
 import DemographicForm from "./src/components/DemographicForm";
@@ -84,8 +85,9 @@ export default class App extends React.Component {
       <Provider store={store}>
         <Router>
           <Stack key="root" hideNavBar>
-            <Scene initial={!passedOnBoardingScreen} key="onBoarding" component={OnBoarding}/>
-            <Scene initial={passedOnBoardingScreen} key="home" component={Main}/>
+            <Scene initial key="waitList" component={WaitList}/>
+            {/* <Scene initial={!passedOnBoardingScreen} key="onBoarding" component={OnBoarding}/>
+            <Scene initial={passedOnBoardingScreen} key="home" component={Main}/> */}
             <Scene key="demographic" component={Demographic} />
             <Scene key="demographicForm" component={DemographicForm} />
             <Scene key="profile" component={Profile} />

package.json

@@ -7,11 +7,11 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "ex-react-native-i18n": "^0.0.5",
     "expo": "^32.0.0",
-    "react": "16.5.0",
     "lodash": "^4.17.11",
     "lodash.frompairs": "^4.0.1",
-    "ex-react-native-i18n": "^0.0.5",
+    "react": "16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
     "react-native-action-sheet-component": "^0.0.36",
     "react-native-country-picker-modal": "^0.6.2",
@@ -30,4 +30,4 @@
     "redux-logger": "^3.0.6"
   },
   "private": true
-}
+}

src/Themes/Colors.js

@@ -0,0 +1,29 @@
+const colors = {
+  background: '#1F0808',
+  clear: 'rgba(0,0,0,0)',
+  facebook: '#3b5998',
+  transparent: 'rgba(0,0,0,0)',
+  silver: '#F7F7F7',
+  steel: '#CCCCCC',
+  error: 'rgba(200, 0, 0, 0.8)',
+  ricePaper: 'rgba(255,255,255, 0.55)',
+  frost: '#D8D8D8',
+  cloud: 'rgba(200,200,200, 0.35)',
+  windowTint: 'rgba(0, 0, 0, 0.4)',
+  panther: '#161616',
+  charcoal: '#595959',
+  coal: '#2d2d2d',
+  bloodOrange: '#fb5f26',
+  snow: 'white',
+  ember: 'rgba(164, 0, 48, 0.5)',
+  darkEmber: 'rgba(164, 0, 48, 1)',
+  fire: '#e73536',
+  drawer: 'rgba(30, 30, 29, 0.95)',
+  primary: '#58BCB0',
+  secondary: '#485364',
+  border: '#a5aab2',
+  banner: '#5F3E63',
+  shadowColor: 'rgba(23, 61, 61, 0.1)'
+}
+
+export default colors

src/Themes/index.js

@@ -0,0 +1,3 @@
+import Colors from './Colors'
+
+export { Colors }

src/components/TextInput/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { View, TextInput as RNTextInput } from 'react-native'
+
+import styles from './styles'
+import { Colors } from '../../Themes'
+
+export default class TextInput extends React.Component {
+  onChangeText = e => {
+    this.props.onChange(e)
+  }
+
+  render () {
+    return (
+      <View style={[styles.container, this.props.containerStyle]}>
+        <RNTextInput
+          underlineColorAndroid='transparent'
+          {...this.props}
+          style={[styles.input, this.props.style]}
+          placeholderTextColor={Colors.snow}
+          onChangeText={this.onChangeText}
+        />
+      </View>
+    )
+  }
+}

src/components/TextInput/styles.js

@@ -0,0 +1,35 @@
+import { Colors } from '../../Themes'
+
+export default {
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 10
+  },
+  input: {
+    backgroundColor: 'white',
+    width: '50%',
+    height: 45,
+    borderRadius: 40,
+    paddingHorizontal: 20,
+    shadowColor: Colors.shadowColor,
+    shadowOffset: {
+      width: 0,
+      height: 1.5
+    },
+    shadowRadius: 2,
+    shadowOpacity: 1,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  icon: {
+    color: Colors.border,
+    marginRight: 7
+  },
+  error: {
+    fontSize: 15,
+    textAlign: 'right',
+    color: Colors.red,
+    marginRight: 10
+  }
+}

src/components/WaitList/index.js

@@ -0,0 +1,127 @@
+import React, { Fragment, Component } from 'react'
+import { View, Text, StatusBar, Image, TouchableOpacity } from 'react-native'
+import { connect } from 'react-redux'
+import { Permissions } from 'expo'
+import I18n from 'ex-react-native-i18n'
+
+import TextInput from '../TextInput'
+import Snackbar from '../SnackBar'
+import showError from '../../utils/showError'
+
+import styles from './styles'
+
+class WaitList extends Component {
+  state = {
+    email: '',
+    onWaitList: false,
+    done: false
+  }
+
+  alertIfRemoteNotificationsDisabledAsync = async () => {
+    const { status } = await Permissions.getAsync(
+      Permissions.USER_FACING_NOTIFICATIONS
+    )
+    if (status !== 'granted') {
+      alert(
+        'Tarteel Would Like To Send You Notifications! You might want to enable notifications to notify you when you are ready to start matching.'
+      )
+    } else {
+      setTimeout(() => {
+        this.setState({ done: true })
+      }, 2000)
+    }
+  }
+
+  handleChange = email => {
+    this.setState({ email })
+  }
+
+  handleSubmit = () => {
+    const { email } = this.state
+    if (this.validateEmail(email)) {
+      this.setState({ onWaitList: true })
+    } else {
+      showError('invalid email')
+    }
+  }
+
+  validateEmail (email) {
+    const filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
+    return filter.test(email)
+  }
+
+  renderForm = () => {
+    return (
+      <Fragment>
+        <TextInput
+          containerStyle={[styles.textInputContainer]}
+          style={[styles.textInput]}
+          placeholder='Please Enter Your Favoriate Email'
+          autoCapitalize='none'
+          autoCorrect={false}
+          onChange={this.handleChange}
+        />
+
+        <TouchableOpacity
+          style={styles.primaryButton}
+          onPress={this.handleSubmit}
+        >
+          <Text style={styles.buttonText}>
+            {I18n.t('waitList-submit-button')}
+          </Text>
+        </TouchableOpacity>
+      </Fragment>
+    )
+  }
+
+  renderMessage = () => {
+    const { done } = this.state
+
+    setTimeout(() => {
+      this.alertIfRemoteNotificationsDisabledAsync()
+    }, 1000)
+
+    return (
+      <View style={styles.messageContainer}>
+        <Text style={styles.subTitle}>
+          {done ? I18n.t('waitList-set') : I18n.t('waitList-congrats')}
+        </Text>
+
+        <Text style={styles.paragraph}>
+          {done ? I18n.t('waitList-notify') : I18n.t('waitList-permission')}
+        </Text>
+      </View>
+    )
+  }
+
+  render () {
+    const { onWaitList } = this.state
+
+    return (
+      <View style={styles.container}>
+        <StatusBar backgroundColor='transparent' barStyle='dark-content' />
+
+        <Image
+          style={styles.figure}
+          source={require('../../../assets/imgs/Logo.png')}
+        />
+
+        <View style={styles.innerContainer}>
+          <Text style={styles.title}>
+            {I18n.t('waitList-first-screen-title')}
+          </Text>
+
+          <Text style={styles.text}>
+            {I18n.t('waitList-first-screen-text')}
+          </Text>
+
+          {!onWaitList ? this.renderForm() : this.renderMessage()}
+        </View>
+
+        <Snackbar id={'root_app'} />
+      </View>
+    )
+  }
+}
+
+export default connect()(WaitList)

src/components/WaitList/styles.js

@@ -0,0 +1,83 @@
+import { StyleSheet } from 'react-native'
+import { Colors } from '../../Themes'
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.snow,
+    alignItems: 'center'
+  },
+  innerContainer: {
+    flex: 1,
+    padding: 25,
+    marginTop: 150
+  },
+  messageContainer: {
+    padding: 35,
+    marginTop: 60,
+    borderRadius: 40,
+    backgroundColor: Colors.primary
+  },
+  textInputContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginTop: 30,
+    marginBottom: 20
+  },
+  textInput: {
+    backgroundColor: Colors.secondary,
+    color: Colors.snow,
+    shadowRadius: 0,
+    shadowOpacity: 0,
+    width: '100%',
+    textAlign: 'center'
+  },
+  title: {
+    color: Colors.secondary,
+    fontSize: 30,
+    fontFamily: 'Proxima-Nova-Alt-Regular',
+    fontWeight: 'bold'
+  },
+  subTitle: {
+    color: Colors.secondary,
+    fontSize: 18,
+    fontFamily: 'Proxima-Nova-Alt-Regular',
+    textAlign: 'center'
+  },
+  text: {
+    color: Colors.border,
+    fontSize: 18,
+    fontWeight: 'bold',
+    fontFamily: 'Proxima-Nova-Alt-Regular',
+    marginVertical: 20,
+    marginLeft: 5
+  },
+  paragraph: {
+    color: Colors.snow,
+    fontSize: 16,
+    marginTop: 20,
+    fontFamily: 'Proxima-Nova-Alt-Regular',
+    textAlign: 'center'
+  },
+  figure: {
+    position: 'absolute',
+    height: 80,
+    alignSelf: 'center',
+    resizeMode: 'contain',
+    bottom: 50
+  },
+  primaryButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
+    backgroundColor: Colors.primary,
+    borderRadius: 40,
+    height: 45
+  },
+  buttonText: {
+    color: Colors.snow,
+    padding: 10,
+    marginHorizontal: 20
+  }
+})

src/i18n/languages/ar.js

@@ -1,4 +1,9 @@
 export const ar = {
+  "waitList-submit-button": "احصل على تسجيل مبكر",
+  "waitList-first-screen-title": "ترتيل",
+  "waitList-first-screen-text": "نستخدم الذكاء الاصطناعى لتصحيح التلاوة ، فقط أقرأ لتحديد الأخطاء في تلاوتك",
+  "waitList-congrats": "مبارك, انت الان فى قائمة الانتظار",
+  "waitList-permision": "نحتاج الى اذن تفعيل الاشعارات لتنبيهك عندما يكون التطبيق جاهز",
   "onboarding-first-screen-title": "أهلاً بك في ترتيل",
   "onboarding-first-screen-text": "شكراً لمساعدتنا في بناء أول مجموعة بيانات عامه مفتوحة المصدر لتلاوات القرآن الكريم من قبل أشخاص عاديين ، مثلك ومثلي. ترتيل هي مبادرة لتشجيع تطبيقات التعلم الآلي على أساس تلاوات القرآن (مثل تصحيح التلاوه).",
   "onboarding-first-screen-button-text": "التالي",

src/i18n/languages/en.js

@@ -2,6 +2,13 @@ import {Text} from "react-native";
 import React from "react";
 
 export const en = {
+  "waitList-submit-button": "Get Early Access",
+  "waitList-first-screen-title": "Tarteel",
+  "waitList-first-screen-text": "AI for recitation correction, just recite to identify mistakes in your recitation",
+  "waitList-congrats": "Congrats! You're on the waitlist!",
+  "waitList-set": "You're All Set",
+  "waitList-permission": "We need app permission to notify you when you're ready to start matching.",
+  "waitList-notify": "We'll Notify you once it's your turn to try Tarteel",
   "onboarding-first-screen-title": "Welcome to Tarteel",
   "onboarding-first-screen-text": "Thank you for helping us build the world's first public, open-source dataset of Quran recitations by ordinary people, like you and me. Tarteel is an initiative to encourage machine learning applications based on recitations of the Quran (such as hifz correction).",
   "onboarding-first-screen-button-text": "Next",