Onboarding redesign

Nav/AppNav.js

@@ -5,7 +5,11 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {GetStoreData} from 'utils/asyncStorage';
 import FTUE from './OnBoarding/FTUE';
-import Preferences from './OnBoarding/Preferences';
+import NotificationsOptIn from './OnBoarding/NotificationsOptIn';
+import LocationOptIn from './OnBoarding/LocationOptIn';
+import LocationHistoryOptIn from './OnBoarding/LocationHistoryOptIn';
+import AnalyticsOptIn from './OnBoarding/AnalyticsOptIn';
+import ThankYou from './OnBoarding/ThankYou';
 import BottomNav from './BottomNav';
 import SymptomForm from 'SymptomTracker/SymptomForm';
 import colors from 'assets/colors';
@@ -52,30 +56,82 @@ class AppNav extends Component {
 
     return (
       <>
-        {statusFetched
-        ? <NavigationContainer>
+        {statusFetched ? (
+          <NavigationContainer>
             <Stack.Navigator>
               {enableFTUE === 'true' && (
-                <Stack.Screen
-                  name={'FTUE'}
-                  component={FTUE}
-                  options={{
-                    title: '',
-                    headerStyle: {height: 0},
-                  }}
-                />
-              )}
-              {enableFTUE === 'true' && (
-                <Stack.Screen
-                  name={'Preferences'}
-                  component={Preferences}
-                  options={{
-                    title: strings('permissions.header_text'),
-                    headerTintColor: colors.primary_theme,
-                    headerBackTitle: ' ',
-                  }}
-                />
+                <>
+                  <Stack.Screen
+                    name={'FTUE'}
+                    component={FTUE}
+                    options={{
+                      title: '',
+                      headerStyle: {height: 0},
+                    }}
+                  />
+                  <Stack.Screen
+                    name={'NotificationsOptIn'}
+                    component={NotificationsOptIn}
+                    options={{
+                      title: strings('permissions.header_text'),
+                      headerTintColor: 'black',
+                      // headerBackTitle: ' ',
+                      headerBackTitleVisible: false,
+                      //headerBackImage: require('../../assets/preference/preference_1.png'),
+                      headerTitleAlign: 'left',
+                      headerStyle: {height: 100},
+                    }}
+                  />
+                  <Stack.Screen
+                    name={'LocationOptIn'}
+                    component={LocationOptIn}
+                    options={{
+                      title: strings('permissions.header_text'),
+                      headerTintColor: 'black',
+                      // headerBackTitle: ' ',
+                      headerBackTitleVisible: false,
+                      //headerBackImage: require('../../assets/preference/preference_1.png'),
+                      headerTitleAlign: 'left',
+                      headerStyle: {height: 100},
+                    }}
+                  />
+                  <Stack.Screen
+                    name={'LocationHistoryOptIn'}
+                    component={LocationHistoryOptIn}
+                    options={{
+                      title: strings('permissions.header_text'),
+                      headerTintColor: 'black',
+                      // headerBackTitle: ' ',
+                      headerBackTitleVisible: false,
+                      //headerBackImage: require('../../assets/preference/preference_1.png'),
+                      headerTitleAlign: 'left',
+                      headerStyle: {height: 100},
+                    }}
+                  />
+                  <Stack.Screen
+                    name={'AnalyticsOptIn'}
+                    component={AnalyticsOptIn}
+                    options={{
+                      title: strings('permissions.header_text'),
+                      headerTintColor: 'black',
+                      // headerBackTitle: ' ',
+                      headerBackTitleVisible: false,
+                      //headerBackImage: require('../../assets/preference/preference_1.png'),
+                      headerTitleAlign: 'left',
+                      headerStyle: {height: 100},
+                    }}
+                  />
+                  <Stack.Screen
+                    name={'ThankYou'}
+                    component={ThankYou}
+                    options={{
+                      title: strings('permissions.header_text'),
+                      headerStyle: {height: 0},
+                    }}
+                  />
+                </>
               )}
+
               <Stack.Screen
                 name="BottomNav"
                 component={BottomNav}
@@ -96,10 +152,11 @@ class AppNav extends Component {
               />
             </Stack.Navigator>
           </NavigationContainer>
-        : <View style={styles.loading_spinner}>
+        ) : (
+          <View style={styles.loading_spinner}>
             <ActivityIndicator size={'large'} color={colors.primary_theme} />
           </View>
-        }
+        )}
       </>
     );
   }
@@ -124,9 +181,13 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => bindActionCreators({
-  updateFTUE
-}, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      updateFTUE,
+    },
+    dispatch,
+  );
 
 export default connect(
   mapStateToProps,

Nav/OnBoarding/AnalyticsOptIn.js

@@ -0,0 +1,26 @@
+import 'react-native-gesture-handler';
+import React, {Component} from 'react';
+import {strings} from '../../locales/i18n';
+import PreferenceOptIn from './PreferenceOptIn';
+
+class AnalyticsOptIn extends Component {
+  nextScreen = () => {
+    this.props.navigation.navigate('ThankYou');
+  };
+
+  render() {
+    return (
+      <PreferenceOptIn
+        image={require('../../assets/preference/preference_4.png')}
+        title={strings('global.preference4_headline')}
+        description={strings('global.preference4_description')}
+        reminder={strings('global.preference4_reminder')}
+        turnOnButtonText={strings('global.preference4_turn_on')}
+        turnedOnButtonText={strings('global.preference4_turned_on')}
+        onNextScreen={this.nextScreen}
+      />
+    );
+  }
+}
+
+export default AnalyticsOptIn;

Nav/OnBoarding/FTUE.js

@@ -37,7 +37,7 @@ class FTUE extends Component {
 
   onDone = () => {
     SetStoreData('ENABLE_FTUE', 'false');
-    this.props.navigation.navigate('Preferences');
+    this.props.navigation.navigate('NotificationsOptIn');
   };
 
   render() {

Nav/OnBoarding/LocationHistoryOptIn.js

@@ -0,0 +1,26 @@
+import 'react-native-gesture-handler';
+import React, {Component} from 'react';
+import {strings} from '../../locales/i18n';
+import PreferenceOptIn from './PreferenceOptIn';
+
+class LocationHistoryOptIn extends Component {
+  nextScreen = () => {
+    this.props.navigation.navigate('AnalyticsOptIn');
+  };
+
+  render() {
+    return (
+      <PreferenceOptIn
+        image={require('../../assets/preference/preference_3.png')}
+        title={strings('global.preference3_headline')}
+        description={strings('global.preference3_description')}
+        reminder={strings('global.preference3_reminder')}
+        turnOnButtonText={strings('global.preference3_turn_on')}
+        turnedOnButtonText={strings('global.preference3_turned_on')}
+        onNextScreen={this.nextScreen}
+      />
+    );
+  }
+}
+
+export default LocationHistoryOptIn;

Nav/OnBoarding/LocationOptIn.js

@@ -0,0 +1,68 @@
+import 'react-native-gesture-handler';
+import React, {Component} from 'react';
+import {strings} from '../../locales/i18n';
+import PreferenceOptIn from './PreferenceOptIn';
+import {GetStoreData, SetStoreData} from '../../utils/asyncStorage';
+import LocationServices from '../../services/LocationServices';
+
+class LocationOptIn extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+      notification: false,
+    };
+  }
+
+  componentDidMount() {
+    this.getSetting('ENABLE_LOCATION').then(data => {
+      this.setState({
+        location: data,
+      });
+    });
+  }
+
+  getSetting = async key => {
+    const data = await GetStoreData(key);
+    return data === 'true' ? true : false;
+  };
+
+  updateSetting = async state => {
+    if (state) {
+      await LocationServices.enable();
+      LocationServices.start();
+      if (!(await LocationServices.isEnabled())) {
+        return;
+      }
+    } else {
+      LocationServices.stop();
+    }
+
+    SetStoreData('ENABLE_LOCATION', state);
+
+    this.setState({
+      location: state,
+    });
+  };
+
+  nextScreen = () => {
+    this.props.navigation.navigate('LocationHistoryOptIn');
+  };
+
+  render() {
+    return (
+      <PreferenceOptIn
+        image={require('../../assets/preference/preference_2.png')}
+        title={strings('global.preference2_headline')}
+        description={strings('global.preference2_description')}
+        reminder={strings('global.preference2_reminder')}
+        turnOnButtonText={strings('global.preference2_turn_on')}
+        turnedOnButtonText={strings('global.preference2_turned_on')}
+        onEnable={() => this.updateSetting(!this.state.location)}
+        isEnabled={this.state.location}
+        onNextScreen={this.nextScreen}
+      />
+    );
+  }
+}
+
+export default LocationOptIn;

Nav/OnBoarding/NotificationsOptIn.js

@@ -0,0 +1,66 @@
+import 'react-native-gesture-handler';
+import React, {Component} from 'react';
+import {strings} from '../../locales/i18n';
+import PreferenceOptIn from './PreferenceOptIn';
+import {GetStoreData, SetStoreData} from '../../utils/asyncStorage';
+import NotificationServices from '../../services/NotificationServices';
+
+class NotificationsOptIn extends Component {
+  constructor(props) {
+    super();
+    this.state = {
+      notification: false,
+    };
+  }
+
+  componentDidMount() {
+    this.getSetting('ENABLE_NOTIFICATION').then(data => {
+      this.setState({
+        notification: data,
+      });
+    });
+  }
+
+  getSetting = async key => {
+    const data = await GetStoreData(key);
+    return data === 'true' ? true : false;
+  };
+
+  updateSetting = async state => {
+    if (state) {
+      await NotificationServices.enable();
+      NotificationServices.start();
+      if (!(await NotificationServices.isEnabled())) {
+        return;
+      }
+    }
+
+    SetStoreData('ENABLE_NOTIFICATION', state);
+
+    this.setState({
+      notification: state,
+    });
+  };
+
+  nextScreen = () => {
+    this.props.navigation.navigate('LocationOptIn');
+  };
+
+  render() {
+    return (
+      <PreferenceOptIn
+        image={require('../../assets/preference/preference_1.png')}
+        title={strings('global.preference1_headline')}
+        description={strings('global.preference1_description')}
+        reminder={strings('global.preference1_reminder')}
+        turnOnButtonText={strings('global.preference1_turn_on')}
+        turnedOnButtonText={strings('global.preference1_turned_on')}
+        onEnable={() => this.updateSetting(!this.state.notification)}
+        isEnabled={this.state.notification}
+        onNextScreen={this.nextScreen}
+      />
+    );
+  }
+}
+
+export default NotificationsOptIn;