Add GA Events

index.js

@@ -1,3 +1,3 @@
-import Ratings from 'Ratings'
+import Ratings from './src/Ratings'
 
 export default Ratings;

src/RatingComponent.js

@@ -13,12 +13,7 @@ import {
 import PropTypes from 'prop-types'
 import Emojis from './EmojiView'
 import Stars from './StarView'
-import { setAlpha, setShowDate } from './utils'
-
-const storeLink = Platform.select({
-  ios: 'itms-apps://itunes.apple.com/in/app/apple-store/id967257660?mt=8',
-  android: 'https://play.google.com/store/apps/details?id=com.locon.housing'
-})
+import getRatingType, { setAlpha, setShowDate } from './utils'
 
 const KeyBoardAvoidView = Platform.OS === 'ios' ? KeyboardAvoidingView : View
 
@@ -41,8 +36,8 @@ const styles = StyleSheet.create({
   thanksView: {
     marginBottom: '50%',
     marginTop: '50%',
-    marginLeft: '10%',
-    marginRight: '10%',
+    marginLeft: 35,
+    marginRight: 35,
     height: 120,
     width: 260,
     backgroundColor: '#ffffff',
@@ -101,12 +96,17 @@ export default class RatingComponent extends Component {
       thanksVisible: false,
       showButton: false,
       showInputText: false,
-      rating: 1
+      rating: 1,
+      feedback: ''
     }
   }
 
+  componentDidMount(){
+    this.props.eventHandler({ type: 'ratings' })
+  }
+
   onClose = (later = false, rate = false) => {
-    const { dismiss } = this.props
+    const { dismiss, storeLink, noOfDays } = this.props
     let rating = 0
     if (later === false) {
       // eslint-disable-next-line prefer-destructuring
@@ -121,21 +121,40 @@ export default class RatingComponent extends Component {
         err => console.log(err)
       )
     }
-    setShowDate(rating)
+    setShowDate(rating, noOfDays)
     if (later === true) {
       clearTimeout(this.timer)
       this.setState({ rateVisible: false, thanksVisible: false }, dismiss)
+      this.onRemindLater()
     } else {
       this.setState({ rateVisible: false, thanksVisible: true }, this.startTimer)
+      this.onSubmit()
     }
   }
 
-  setRating = rating => this.setState({ rating })
+  setRating = rating => {
+    const ratingType = getRatingType(rating)
+    this.setState({ rating }, () => this.props.eventHandler({ type: 'click', ratingType }))
+  }
+
+  onType = (text) => {
+    this.setState({ feedback: text }, () => this.props.eventHandler({ type: 'write' }))
+  }
+
+  onSubmit = () => {
+    const { feedback, rating } = this.state
+    const ratingType =  getRatingType(rating)
+    this.props.eventHandler({ type: 'submit', ratingType, feedback })
+  }
+
+  onRemindLater = () => {
+    this.props.eventHandler({ type: 'later' })
+  }
 
   closeThankYouScreen = () => this.setState({ thanksVisible: false }, this.props.dismiss)
 
   startTimer = () => {
-    this.timer = setTimeout(this.closeThankYouScreen, 5000)
+    this.timer = setTimeout(this.closeThankYouScreen, 1000)
   }
 
   showButton = () =>
@@ -202,7 +221,7 @@ export default class RatingComponent extends Component {
                 )}
                 {showInputText && (
                   <View style={{ width: '100%', alignSelf: 'flex-start' }}>
-                    <TextInput style={styles.input} placeholder="Type your feedback here" />
+                    <TextInput style={styles.input} onChangeText={this.onType} placeholder="Type your feedback here" />
                     {Platform.OS === 'ios' && (
                       <View
                         style={[
@@ -242,10 +261,12 @@ export default class RatingComponent extends Component {
 }
 
 RatingComponent.defaultProps = {
-  type: 0
+  type: 0,
+  eventHandler: () => {}
 }
 
 RatingComponent.propTypes = {
   dismiss: PropTypes.func.isRequired,
-  type: PropTypes.number
+  type: PropTypes.number,
+  eventHandler: PropTypes.func
 }

src/Ratings.js

@@ -6,6 +6,7 @@ import React, { Component } from 'react'
 import { View, AsyncStorage } from 'react-native'
 import PropTypes from 'prop-types'
 import RatingComponent from './RatingComponent'
+import { msPerDay } from './utils'
 
 export default class Ratings extends Component {
   constructor(props) {
@@ -23,7 +24,7 @@ export default class Ratings extends Component {
     if (showDate) {
       const { nextTime, neverShow, previouslyShown } = JSON.parse(showDate)
       if (!neverShow && previouslyShown) {
-        const currentTime = new Date().getTime() / 1000
+        const currentTime = new Date().getTime() / msPerDay
         if (currentTime >= nextTime) {
           this.setState({ showRatingComponent: true })
         }
@@ -36,22 +37,24 @@ export default class Ratings extends Component {
   }
 
   render() {
-    const { type } = this.props
+    const { type, eventHandler, storeLink, noOfDays } = this.props
     const { showRatingComponent } = this.state
     return (
       <View>
         {showRatingComponent && type !== 0 && (
-          <RatingComponent dismiss={this.dismissRatingCard} type={type} />
+          <RatingComponent dismiss={this.dismissRatingCard} type={type} eventHandler={eventHandler} storeLink={storeLink} noOfDays={noOfDays}/>
         )}
       </View>
     )
   }
 }
 
 Ratings.defaultProps = {
-  type: 0
+  type: 0,
+  eventHandler: () => {}
 }
 
 Ratings.propTypes = {
-  type: PropTypes.number
+  type: PropTypes.number,
+  eventHandler: PropTypes.func
 }

src/utils.js

@@ -1,6 +1,7 @@
 import R from 'ramda'
 import { AsyncStorage } from 'react-native'
 
+export const msPerDay = 24*60*60*100
 export const imageLabels = ['Awful', 'Poor', 'Average', 'Good', 'Great']
 
 export const emojiSrc = [
@@ -42,10 +43,18 @@ export function setAlpha(color, alpha) {
   return color.substring(0, 7) + alphaValue // Format: #rrggbbaa
 }
 
-export function setShowDate(ratings = 0) {
-  const today = new Date().getTime() / 1000
-  const nextTime = today + 5
+export function setShowDate(ratings = 0, noOfDays) {
+  const today = new Date().getTime() / msPerDay
+  const nextTime = today + noOfDays
   const neverShow = ratings === 5
   const showDate = { nextTime, neverShow, previouslyShown: true }
   AsyncStorage.setItem('SHOW_DATE', JSON.stringify(showDate))
 }
+
+export default R.cond([
+  [R.equals(1), R.always('awful')],
+  [R.equals(2), R.always('poor')],
+  [R.equals(3), R.always('average')],
+  [R.equals(4), R.always('good')],
+  [R.equals(5) , R.always('great')]
+])