Merge pull request #299 from backbonelabs/how-to-video

How to video

app/actions/app.js

@@ -4,6 +4,8 @@ import {
   HIDE_FULL_MODAL,
   SHOW_PARTIAL_MODAL,
   HIDE_PARTIAL_MODAL,
+  ONBOARDING_NEXT_STEP,
+  REMOVE_ONBOARDING_NEXT_STEP,
 } from './types';
 
 export default {
@@ -31,4 +33,10 @@ export default {
   hidePartialModal() {
     return { type: HIDE_PARTIAL_MODAL };
   },
+  nextStep() {
+    return { type: ONBOARDING_NEXT_STEP };
+  },
+  removeNextStep() {
+    return { type: REMOVE_ONBOARDING_NEXT_STEP };
+  },
 };

app/actions/types.js

@@ -5,6 +5,8 @@ export const HIDE_FULL_MODAL = 'HIDE_FULL_MODAL';
 export const SHOW_PARTIAL_MODAL = 'SHOW_PARTIAL_MODAL';
 export const HIDE_PARTIAL_MODAL = 'HIDE_PARTIAL_MODAL';
 export const UPDATE_BLUETOOTH_STATE = 'UPDATE_BLUETOOTH_STATE';
+export const ONBOARDING_NEXT_STEP = 'ONBOARDING_NEXT_STEP';
+export const REMOVE_ONBOARDING_NEXT_STEP = 'REMOVE_ONBOARDING_NEXT_STEP';
 
 // auth actions
 export const LOGIN = 'LOGIN';

app/components/HowTo.js

@@ -3,14 +3,18 @@ import {
   View,
   Image,
   ScrollView,
+  Linking,
+  Alert,
 } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import styles from '../styles/howTo';
 import HeadingText from '../components/HeadingText';
+import Button from '../components/Button';
 import howToUseBackbone from '../images/howTo/howToUseBackbone.png';
 import howToStartSession from '../images/howTo/howToStartSession.png';
 import howToGetBestResults from '../images/howTo/howToGetBestResults.png';
 import relativeDimensions from '../utils/relativeDimensions';
+import Mixpanel from '../utils/Mixpanel';
 
 const { applyWidthDifference } = relativeDimensions;
 const howToContent = [{
@@ -30,11 +34,36 @@ const howToContent = [{
   height: applyWidthDifference(517),
 }];
 
+const openHowToVideo = () => {
+  Mixpanel.track('openHowToVideo');
+
+  const url = 'https://www.youtube.com/embed/Uo27rJAjriw?rel=0&autoplay=0&showinfo=0&controls=0';
+  Linking.canOpenURL(url)
+    .then(supported => {
+      if (supported) {
+        return Linking.openURL(url);
+      }
+      throw new Error();
+    })
+    .catch(() => {
+      // This catch handler will handle rejections from Linking.openURL as well
+      // as when the user's phone doesn't have any apps to open the URL
+      Alert.alert(
+        'How to video',
+        `${'We could not launch your browser. You can watch the video' +
+        'by visiting '}https://youtu.be/Uo27rJAjriw.`,
+      );
+    });
+};
+
 const HowTo = () => (
   <ScrollView
     removeClippedSubviews={false}
     contentContainerStyle={styles.scrollView}
   >
+    <View style={styles.videoLinkContainer}>
+      <Button text="Watch Video" onPress={openHowToVideo} />
+    </View>
     {
       howToContent.map((value, key) => (
         <View

app/containers/OnBoarding.js

@@ -19,6 +19,7 @@ import onBoardingFlow from './onBoardingFlow';
 import styles from '../styles/onboarding';
 import authActions from '../actions/auth';
 import userActions from '../actions/user';
+import appActions from '../actions/app';
 import routes from '../routes';
 import Mixpanel from '../utils/Mixpanel';
 
@@ -34,6 +35,9 @@ class OnBoarding extends Component {
       hasOnboarded: PropTypes.bool,
       nickname: PropTypes.string,
     }),
+    app: PropTypes.shape({
+      nextStep: PropTypes.bool,
+    }),
     isUpdating: PropTypes.bool,
   };
 
@@ -91,6 +95,12 @@ class OnBoarding extends Component {
         Alert.alert('Error', 'Unable to save, please try again');
       }
     }
+
+    // if nextStep is truthy, go to next step
+    if (nextProps.app.nextStep) {
+      this.nextStep();
+      this.props.dispatch(appActions.removeNextStep());
+    }
   }
 
   // componentWillUnmount() {
@@ -99,16 +109,21 @@ class OnBoarding extends Component {
   // }
 
   onClose() {
-    // check if user already completed step 1
-    if (this.props.user.hasOnboarded) {
-      return this.props.navigator.replace(routes.postureDashboard);
-    }
-
-    return Alert.alert(
+    // If on step 0 (profile), return alert
+    // If on step 1 (device), return next step
+    // (default) If last step, redirect to dashboard
+    switch (this.state.step) {
+      case 0:
+        return Alert.alert(
             'Are you sure?',
             '\nExiting will log you out and can cause you to lose your information',
             [{ text: 'Cancel' }, { text: 'Logout', onPress: this.exitOnboarding }]
           );
+      case 1:
+        return this.nextStep();
+      default:
+        this.props.navigator.replace(routes.postureDashboard);
+    }
   }
 
   /**
@@ -305,8 +320,8 @@ class OnBoarding extends Component {
 }
 
 const mapStateToProps = (state) => {
-  const { user } = state;
-  return user;
+  const { user, app } = state;
+  return { ...user, app };
 };
 
 export default connect(mapStateToProps)(OnBoarding);

app/containers/device/DeviceConnect.js

@@ -13,6 +13,7 @@ import styles from '../../styles/device/deviceConnect';
 import deviceActions from '../../actions/device';
 import Spinner from '../../components/Spinner';
 import HeadingText from '../../components/HeadingText';
+import appActions from '../../actions/app';
 
 const { BluetoothService } = NativeModules;
 const { bluetoothStates, storageKeys } = constants;
@@ -122,6 +123,7 @@ class DeviceConnect extends Component {
 
   goBackToScene() {
     const routebackScenes = {
+      onboarding: 'onboarding',
       device: 'device',
       postureDashboard: 'postureDashboard',
     };
@@ -134,6 +136,9 @@ class DeviceConnect extends Component {
       // Route to the last route before DeviceScan / DeviceConnect
       // If it matches device or postureDashboard in that order
       if (routebackScenes[routeName]) {
+        if (routebackScenes[routeName] === 'onboarding') {
+          this.props.dispatch(appActions.nextStep());
+        }
         return this.props.navigator.popToRoute(routeStack[i]);
       }
     }

app/containers/onBoardingFlow/Device.js

@@ -22,7 +22,7 @@ const Device = props => (
         primary
         style={styles._button}
         text="CONNECT"
-        onPress={() => props.navigator.replace(routes.deviceScan)}
+        onPress={() => props.navigator.push(routes.deviceScan)}
       />
       <View style={{ paddingTop: 15 }}>
         <Button
@@ -38,7 +38,7 @@ const Device = props => (
 Device.propTypes = {
   key: PropTypes.number,
   navigator: PropTypes.shape({
-    replace: PropTypes.func,
+    push: PropTypes.func,
   }),
   previousStep: PropTypes.func,
 };

app/containers/onBoardingFlow/HowToVideo.js

@@ -0,0 +1,56 @@
+import React, { PropTypes } from 'react';
+import { WebView, View } from 'react-native';
+import BodyText from '../../components/BodyText';
+import Button from '../../components/Button';
+import Spinner from '../../components/Spinner';
+import styles from '../../styles/onBoarding/device';
+import HeadingText from '../../components/HeadingText';
+
+import routes from '../../routes';
+
+const showSpinner = () => <Spinner />;
+const showErrorMessage = () => (
+  <BodyText>An error has occur, Please try again later</BodyText>
+);
+
+const HowToVideo = (props) => (
+  <View key={props.key} style={styles.container}>
+    <View style={styles.headerTextContainer}>
+      <HeadingText size={2}>Tutorial</HeadingText>
+    </View>
+    {props.step === 2 ? <WebView
+      source={{
+        uri: 'https://www.youtube.com/embed/Uo27rJAjriw?rel=0&autoplay=0&showinfo=0&controls=0' }}
+      javaScriptEnabled
+      startInLoadingState
+      renderLoading={showSpinner}
+      renderError={showErrorMessage}
+    /> : null}
+    <View style={styles.buttonContainer}>
+      <Button
+        primary
+        style={styles._button}
+        text="DONE"
+        onPress={() => props.navigator.replace(routes.postureDashboard)}
+      />
+      <View style={{ paddingTop: 15 }}>
+        <Button
+          style={styles._button}
+          text="BACK"
+          onPress={props.previousStep}
+        />
+      </View>
+    </View>
+  </View>
+);
+
+HowToVideo.propTypes = {
+  key: PropTypes.number,
+  step: PropTypes.number,
+  navigator: PropTypes.shape({
+    replace: PropTypes.func,
+  }),
+  previousStep: PropTypes.func,
+};
+
+export default HowToVideo;

app/containers/onBoardingFlow/index.js

@@ -1,4 +1,5 @@
 import Profile from './Profile';
 import Device from './Device';
+import HowToVideo from './HowToVideo';
 
-export default [Profile, Device];
+export default [Profile, Device, HowToVideo];

app/reducers/app.js

@@ -6,6 +6,8 @@ import {
   HIDE_FULL_MODAL,
   SHOW_PARTIAL_MODAL,
   HIDE_PARTIAL_MODAL,
+  ONBOARDING_NEXT_STEP,
+  REMOVE_ONBOARDING_NEXT_STEP,
 } from '../actions/types';
 
 export default (state = {
@@ -17,6 +19,7 @@ export default (state = {
     content: null,
     onClose: null,
   },
+  nextStep: false,
 }, action) => {
   switch (action.type) {
     case UPDATE_BLUETOOTH_STATE: {
@@ -86,6 +89,18 @@ export default (state = {
         },
       };
     }
+    case ONBOARDING_NEXT_STEP: {
+      return {
+        ...state,
+        nextStep: true,
+      };
+    }
+    case REMOVE_ONBOARDING_NEXT_STEP: {
+      return {
+        ...state,
+        nextStep: false,
+      };
+    }
     default:
       return state;
   }

app/routes/device/deviceScan.js

@@ -1,17 +1,28 @@
 import { connect } from 'react-redux';
 import React, { PropTypes } from 'react';
 import { TouchableOpacity } from 'react-native';
+import routes from '../../routes';
 import DeviceScan from '../../containers/device/DeviceScan';
 import BodyText from '../../components/BodyText';
-import routes from '../../routes';
 import Mixpanel from '../../utils/Mixpanel';
 
 const DeviceScanSkipButton = props => (
   <TouchableOpacity
     style={{ padding: 5 }}
     onPress={() => {
       Mixpanel.track('skipScanForDevices');
-      props.navigator.replace(routes.postureDashboard);
+      // Loop through routeStack starting with the most recent route
+      const routeStack = props.navigator.getCurrentRoutes().reverse();
+
+      for (let i = 0; i < routeStack.length; i++) {
+        // if onboarding is in the stack, use pop() to redirect
+        if (routeStack[i].name === routes.onboarding.name) {
+          return props.navigator.pop();
+        }
+      }
+
+      // Else redirect to dashboard
+      return props.navigator.replace(routes.postureDashboard);
     }}
   >
     <BodyText style={{ color: '#FFFFFF' }}>Skip</BodyText>
@@ -20,7 +31,9 @@ const DeviceScanSkipButton = props => (
 
 DeviceScanSkipButton.propTypes = {
   navigator: PropTypes.shape({
+    pop: PropTypes.func,
     replace: PropTypes.func,
+    getCurrentRoutes: PropTypes.func,
   }),
 };
 

app/styles/howTo.js

@@ -24,4 +24,10 @@ export default EStyleSheet.create({
     paddingVertical: applyWidthDifference(10),
     ...absoluteCenter,
   },
+  videoLinkContainer: {
+    paddingVertical: applyWidthDifference(16),
+    ...absoluteCenter,
+    width: '100%',
+    backgroundColor: '#eee',
+  },
 });