update

App/Containers/ChangePasswordScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, BackHandler, Alert, View, TouchableOpacity, Image, NativeModules, Platform, TextInput, AsyncStorage} from 'react-native'
 import { connect } from 'react-redux'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+import Toast from 'react-native-toast-message'
+import R from 'ramda'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
+const { StatusBarManager } = NativeModules; 
 
+const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20: StatusBarManager.HEIGHT;
 // Styles
-import styles from './Styles/ChangePasswordScreenStyle'
+import styles from './Styles/LoginScreenStyle'
+import { NavigationEvents } from 'react-navigation';
+import BaseHeader from '../Components/BaseHeader';
+import BaseButton from '../Components/BaseButton'
+import BaseInput from '../Components/BaseInput'
+import { titleCase } from '../Lib/Utils'
+import Api from '../Services/Api'
 
 class ChangePasswordScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      auth: this.props.auth,
+      opacity: 1,
+      visibleOldPassword: true,
+      visibleNewPassword: true,
+      visibleNewPasswordConfirm: true,
+      oldPassword: '',
+      newPassword: '',
+      newPasswordConfirm: '',
+      errorOldPassword: '',
+      errorNewPassword: '',
+      errorNewPasswordConfirm: '',
+    }
+    this.focusNextField = this.focusNextField.bind(this);
+    this.inputs = {};
+  }
+
+  focusNextField(id) {
+    if (id == 'phone') {
+      this.phone.focus()
+    } else {
+      this.inputs[id].focus();
+    }
+  }
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
+  refreshValidasi() {
+    this.setState({
+      errorOldPassword: '',
+      errorNewPassword: '',
+      errorNewPasswordConfirm: '',
+    })
+  }
+  
+  validasi() {
+    if (R.isEmpty(this.state.oldPassword)) {
+      this.setState({errorOldPassword: 'Kata sandi lama tidak boleh kosong'})
+    } else if (R.isEmpty(this.state.newPassword)) {
+      this.setState({errorNewPassword: 'Kata sandi baru tidak boleh kosong'})
+    } else if (R.isEmpty(this.state.newPasswordConfirm)) {
+      this.setState({errorNewPasswordConfirm: 'Konfirmasi kata sandi tidak boleh kosong'})
+    } else if (this.state.newPassword.length < 5) {
+      this.setState({errorNewPassword: 'Kata sandi minimal 5 karakter'})
+    } else if (this.state.newPasswordConfirm.length < 5) {
+      this.setState({errorNewPasswordConfirm: 'Konfirmasi kata sandi minimal 5 karakter'})
+    } else if (!R.equals(this.state.newPasswordConfirm, this.state.newPassword)) {
+      this.setState({errorNewPasswordConfirm: 'Konfirmasi kata sandi tidak sama dengan kata sandi'})
+    } else {
+      this.changePassword()
+    }
+  }
+
+  changePassword() {
+    let payload = {    
+      old_password: this.state.oldPassword,
+      user_password: this.state.newPassword
+    }
+
+    Api.create().changePassword(payload).then((response) => {
+      if (response.data.status == 'success') {
+        Toast.show({
+          type: 'success',
+          position: 'bottom',
+          text1: 'Success',
+          text2: `Perubahan kata sandi berhasil 👋`,
+          visibilityTime: 2500,
+          autoHide: true,
+          // topOffset: 100,
+          // bottomOffset: 40,
+        })
+        this.props.navigation.goBack()
+      } else {
+        this.setState({errorOldPassword: titleCase(response.data.message)})
+      }
+    })
+  }
+
   render () {
     return (
-      <ScrollView style={styles.container}>
-        <KeyboardAvoidingView behavior='position'>
-          <Text>ChangePasswordScreen</Text>
-        </KeyboardAvoidingView>
-      </ScrollView>
+      <View style={{flex: 1, backgroundColor:'#4cc9f0'}}>
+        <NavigationEvents onDidFocus={() => {this.refreshValidasi()}}/>
+        <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Kata Sandi'}/>
+        <ScrollView showsVerticalScrollIndicator={false} style={styles.scrollContent}>
+          <View style={{width: '100%'}}>
+            <View >
+              <BaseInput 
+                withIcon={true}
+                rightIcon={<Ionicons name={this.state.visibleOldPassword? 'ios-eye-off' : 'ios-eye'} size={25} style={{color: '#4b4b4b', opacity: .5}}/>}
+                title={"Kata Sandi Lama"} 
+                visible={this.state.visibleOldPassword} 
+                multine={true} 
+                placeholder={"Masukan Kata Sandi Anda"}
+                onPressIcon={() => this.setState({visibleOldPassword: !this.state.visibleOldPassword})}
+                value={this.state.oldPassword}
+                onChangeText={(oldPassword) => this.setState({oldPassword}, () => this.refreshValidasi())}
+                onRef={(ref) => {
+                  this.inputs['oldPassword'] = ref;
+                }}
+                onSubmitEditing={() => {
+                    this.focusNextField('newPassword');
+                }}
+                lineColor={this.state.errorOldPassword? 'red' : '#d8d8d8' }
+                notes={this.state.errorOldPassword? this.state.errorOldPassword : ''}
+                notesColor={this.state.errorOldPassword? 'red' : '#4b4b4b'}
+                blurOnSubmit={false}
+              />
+            </View>
+            <View style={{marginTop: 30}}>
+              <BaseInput 
+                withIcon={true}
+                rightIcon={<Ionicons name={this.state.visibleNewPassword? 'ios-eye-off' : 'ios-eye'} size={25} style={{color: '#4b4b4b', opacity: .5}}/>}
+                title={"Kata Sandi Baru"} 
+                visible={this.state.visibleNewPassword} 
+                multine={true} 
+                placeholder={"Masukan Kata Sandi Baru Anda"}
+                onPressIcon={() => this.setState({visibleNewPassword: !this.state.visibleNewPassword})}
+                value={this.state.newPassword}
+                onChangeText={(newPassword) => this.setState({newPassword}, () => this.refreshValidasi())}
+                onRef={(ref) => {
+                  this.inputs['newPassword'] = ref;
+                }}
+                onSubmitEditing={() => {
+                    this.focusNextField('newPasswordConfirm');
+                }}
+                lineColor={this.state.errorNewPassword? 'red' : '#d8d8d8' }
+                notes={this.state.errorNewPassword? this.state.errorNewPassword : 'Minimal 5 Karakter'}
+                notesColor={this.state.errorNewPassword? 'red' : '#4b4b4b'}
+                blurOnSubmit={false}
+              />
+            </View>
+            <View style={{marginTop: 30}}>
+              <BaseInput 
+                withIcon={true}
+                rightIcon={<Ionicons name={this.state.visibleNewPasswordConfirm? 'ios-eye-off' : 'ios-eye'} size={25} style={{color: '#4b4b4b', opacity: .5}}/>}
+                title={"Konfirmasi Kata Sandi Baru"} 
+                visible={this.state.visibleNewPasswordConfirm} 
+                multine={true} 
+                placeholder={"Konfirmasi Kata Sandi Baru Anda"}
+                onPressIcon={() => this.setState({visibleNewPasswordConfirm: !this.state.visibleNewPasswordConfirm})}
+                value={this.state.newPasswordConfirm}
+                onChangeText={(newPasswordConfirm) => this.setState({newPasswordConfirm}, () => this.refreshValidasi())}
+                onRef={(ref) => {
+                  this.inputs['newPasswordConfirm'] = ref;
+                }}
+                lineColor={this.state.errorNewPasswordConfirm? 'red' : '#d8d8d8' }
+                notes={this.state.errorNewPasswordConfirm? this.state.errorNewPasswordConfirm : ''}
+                notesColor={this.state.errorNewPasswordConfirm? 'red' : '#4b4b4b'}
+              />
+            </View>
+            <View style={{marginTop: 50}}>
+              <BaseButton text={'Change Password'} onPress={() => this.validasi()}/>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
     )
   }
 }
 
 const mapStateToProps = (state) => {
   return {
+    auth: state.auth
   }
 }
 

App/Containers/CheckOutScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/CheckOutScreenStyle'
+
+class CheckOutScreen extends Component {
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>CheckOutScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CheckOutScreen)

App/Containers/ForgotPasswordScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, View, Platform } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/ForgotPasswordScreenStyle'
+import { NavigationEvents } from 'react-navigation'
+import BaseHeader from '../Components/BaseHeader'
+import BaseInput from '../Components/BaseInput'
+import BaseButton from '../Components/BaseButton'
+import R from 'ramda'
+import Toast from 'react-native-toast-message'
+
+class ForgotPasswordScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      email: '',
+      errorEmail: ''
+    }
+  }
+
+  validasi() {
+    if (R.isEmpty(this.state.email)) {
+      this.setState({errorEmail: 'Email tidak boleh kosong'})
+    } else if (R.equals(this.checkEmail(),'salah')) {
+      this.setState({errorEmail: 'Format email salah'})
+    } else {
+      this.resetPassword()
+    }
+  }
+
+  checkEmail() {
+    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+    if (reg.test(this.state.email) === false) {
+        return 'salah'
+    }
+    else {
+        return 'benar'
+    }
+  }
+
+  resetPassword() {
+    Toast.show({
+      type: 'success',
+      position: 'bottom',
+      text1: 'Success',
+      text2: `Cek inbox/spam pada email ${this.state.email} 👋`,
+      visibilityTime: 2500,
+      autoHide: true,
+      // topOffset: 100,
+      // bottomOffset: 40,
+    })
+    this.props.navigation.goBack()
+  }
+
+  render () {
+    return (
+      <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
+        {/* <NavigationEvents onDidFocus={() => {this.refreshValidasi()}}/> */}
+        <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Lupa Kata Sandi'}/>
+        <ScrollView showsVerticalScrollIndicator={false} style={styles.scrollContent}>
+          <View style={{width: '100%'}}>
+            <View>
+              <BaseInput
+                title={"Email"} 
+                placeholder={"Masukan Email Anda"}
+                value={this.state.email}
+                keyboardType={Platform.OS === 'android' ? 'email-address' : 'ascii-capable'}
+                blurOnSubmit={false}
+                onChangeText={(email) => this.setState({email, errorEmail: ''})}
+                lineColor={this.state.errorEmail? 'red' : '#d8d8d8' }
+                notes={this.state.errorEmail? this.state.errorEmail : 'Contoh: test@gmail.com'}
+                notesColor={this.state.errorEmail? 'red' : '#4b4b4b'}
+              />
+            </View>
+            <View style={{marginTop: 40}}>
+              <BaseButton text={'Reset Password'} onPress={() => this.validasi()}/>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ForgotPasswordScreen)

App/Containers/HomePageScreen.js

@@ -146,18 +146,12 @@ class HomePageScreen extends Component {
   };
 
   componentDidMount() {
-    // alert(JSON.stringify(this.props))
-    // alert(JSON.stringify(this.props.activeIndex))
     if (this.state.user == null) {
       this.setState({authView: true})
     }
     BackHandler.addEventListener("hardwareBackPress", this.backAction);
   }
 
-  // componentDidUpdate() {
-  //   alert(JSON.stringify(this.props.activeIndex))
-  // }
-
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.backAction);
   }
@@ -189,7 +183,9 @@ class HomePageScreen extends Component {
                   <Image source={Images.logo_eCart} style={{width: 75, height: 22, marginLeft: 15, resizeMode:'stretch'}}/>
                 </TouchableOpacity>
                 <View style={{width: '15%'}}>
-                  <Image source={Images.icon_chart} style={{width: 25, height: 20, marginLeft: 20, tintColor: this.state.opacity  >= .5? '#e3e3e3' : '#FFF'}}/>
+                  <TouchableOpacity onPress={() => this.props.navigation.navigate('CartScreen')}>
+                    <Image source={Images.icon_chart} style={{width: 25, height: 20, marginLeft: 20, tintColor: this.state.opacity  >= .5? '#e3e3e3' : '#FFF'}}/>
+                  </TouchableOpacity>
                 </View>
               </View>
               <View>

App/Containers/LoginScreen.js

@@ -20,6 +20,7 @@ import { NavigationEvents } from 'react-navigation';
 import BaseHeader from '../Components/BaseHeader';
 import BaseButton from '../Components/BaseButton'
 import BaseInput from '../Components/BaseInput'
+import { titleCase } from '../Lib/Utils'
 
 class LoginScreen extends Component {
   constructor(props) {
@@ -74,17 +75,17 @@ class LoginScreen extends Component {
               type: 'failed',
               position: 'bottom',
               text1: 'Failed',
-              text2: typeError,
+              text2: titleCase(typeError),
               visibilityTime: 2500,
               autoHide: true,
               // topOffset: 100,
               // bottomOffset: 40,
             })
             this.props.navigation.navigate('OtpVerificationScreen')
-          } else if (typeError.includes('email')) {
-            this.setState({errorEmail: typeError})
+          } else if (typeError.includes('terdaftar')) {
+            this.setState({errorEmail: titleCase(typeError)})
           } else if (typeError.includes('password')) {
-            this.setState({errorPassword: typeError})
+            this.setState({errorPassword: titleCase(typeError)})
           }
         }
 
@@ -201,7 +202,7 @@ class LoginScreen extends Component {
               />
             </View>
             <View style={{marginTop: 30, alignItems: 'center',}}>
-              <BaseText text={"Lupa Kata Sandi"} type={"bold"} style={{fontSize: 16, color: '#4cc9f0'}}/>
+              <BaseText onPress={() => this.props.navigation.navigate('ForgotPasswordScreen')} text={"Lupa Kata Sandi"} type={"bold"} style={{fontSize: 16, color: '#4cc9f0'}}/>
             </View>
             <View style={{marginTop: 30}}>
               <BaseButton text={'Masuk'} onPress={() => this.validasi()}/>

App/Containers/MyAccountScreen.js

@@ -47,36 +47,23 @@ class MyAccountScreen extends Component {
   }
 
   handleNav(type) {
-    if (type == 'Data Diri') {
-      if (this.props.auth.data != null) {
-        this.props.navigation.navigate('ProfileScreen'); 
-      } else {
-        Toast.show({
-          type: 'failed',
-          position: 'bottom',
-          text1: 'Failed',
-          text2: `Silahkan Login Terlebih Dahulu👋`,
-          visibilityTime: 2500,
-          autoHide: true,
-          // topOffset: 100,
-          // bottomOffset: 40,
-        })
-      }
+    if (this.props.auth.user == null) {
+      Toast.show({
+        type: 'failed',
+        position: 'bottom',
+        text1: 'Failed',
+        text2: `Silahkan Login Terlebih Dahulu👋`,
+        visibilityTime: 2500,
+        autoHide: true,
+        // topOffset: 100,
+        // bottomOffset: 40,
+      })
+    } else if (type == 'Data Diri') {
+      this.props.navigation.navigate('ProfileScreen'); 
     } else if (type == 'Daftar Alamat') {
-      if (this.props.auth.data != null) {
-        this.props.navigation.navigate('ListAddressScreen');
-      } else {
-        Toast.show({
-          type: 'failed',
-          position: 'bottom',
-          text1: 'Failed',
-          text2: `Silahkan Login Terlebih Dahulu👋`,
-          visibilityTime: 2500,
-          autoHide: true,
-          // topOffset: 100,
-          // bottomOffset: 40,
-        })
-      }
+      this.props.navigation.navigate('ListAddressScreen');
+    } else if (type == 'Kata Sandi') {
+      this.props.navigation.navigate('ChangePasswordScreen');
     } else if (type == 'Keluar') {
       this.props.authClearData()
       const resetAction = StackActions.reset({

App/Containers/PaymentMethodScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/PaymentMethodScreenStyle'
+
+class PaymentMethodScreen extends Component {
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>PaymentMethodScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PaymentMethodScreen)

App/Containers/RegisterScreen.js

@@ -15,7 +15,7 @@ import BaseHeader from '../Components/BaseHeader';
 import BaseInput from '../Components/BaseInput';
 import BaseButton from '../Components/BaseButton'
 import BaseText from '../Components/BaseText'
-import { handlePhone } from '../Lib/Utils'
+import { handlePhone, titleCase } from '../Lib/Utils'
 import { NavigationEvents } from 'react-navigation'
 
 class RegisterScreen extends Component {
@@ -73,7 +73,7 @@ class RegisterScreen extends Component {
               type: 'failed',
               position: 'bottom',
               text1: 'Failed',
-              text2: typeError,
+              text2: titleCase(typeError),
               visibilityTime: 2500,
               autoHide: true,
               // topOffset: 100,
@@ -81,11 +81,11 @@ class RegisterScreen extends Component {
             })
             this.props.navigation.navigate('OtpVerificationScreen')
           } else if (typeError.includes('phone')) {
-            this.setState({errorPhone: typeError})
+            this.setState({errorPhone: titleCase(typeError)})
           } else if (typeError.includes('email')) {
-            this.setState({errorEmail: typeError})
+            this.setState({errorEmail: titleCase(typeError)})
           } else if (typeError.includes('password')) {
-            this.setState({errorPassword: typeError})
+            this.setState({errorPassword: titleCase(typeError)})
           }
         }
         
@@ -146,13 +146,13 @@ class RegisterScreen extends Component {
     } else if (this.state.phone.length < 10) {
       this.setState({errorPhone: 'No. Handphone minimal 10 digit'})
     } else if (R.isEmpty(this.state.password)) {
-      this.setState({errorPassword: 'Password tidak boleh kosong'})
+      this.setState({errorPassword: 'Kata sandi tidak boleh kosong'})
     } else if (this.state.password.length < 5) {
-      this.setState({errorPassword: 'Password minimal 5 karakter'})
+      this.setState({errorPassword: 'Kata sandi minimal 5 karakter'})
     } else if (R.isEmpty(this.state.passwordConfirm)) {
       this.setState({errorPasswordConfirm: 'Konfirmasi kata sandi tidak boleh kosong'})
     } else if (this.state.passwordConfirm.length < 5) {
-      this.setState({errorPassword: 'Password minimal 5 karakter'})
+      this.setState({errorPassword: 'Konfirmasi kata sandi minimal 5 karakter'})
     } else if (!R.equals(this.state.passwordConfirm, this.state.password)) {
       this.setState({errorPasswordConfirm: 'Konfirmasi kata sandi tidak sama dengan kata sandi'})
     } else {

App/Containers/ShippingScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/ShippingScreenStyle'
+
+class ShippingScreen extends Component {
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>ShippingScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ShippingScreen)

App/Containers/Styles/CartScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen,
+  scrollContent: {
+    flex: 1,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    // paddingHorizontal: 25,
+    // paddingTop: 50,
+  },
+})

App/Containers/Styles/CheckOutScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/Styles/ForgotPasswordScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/Styles/PaymentMethodScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/Styles/ShippingScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/Styles/TransactionResultScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/TermsConditionScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView, View, Dimensions } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, View, Dimensions, BackHandler } from 'react-native'
 import HTML from 'react-native-render-html';
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
@@ -25,20 +25,30 @@ class TermsConditionScreen extends Component {
     }
   }
 
+  backAction = () => {
+    // alert('asdkladsjkl')
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
   componentDidMount() {
     this.getView()
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
   }
 
   getView() {
-    Api.create().termsCondition().then((response) => {
-      this.setState({data: response.data.data.description})
-      console.log(response.data.data.description)
+    Api.create().contactUs().then((response) => {
+      this.setState({data: response.data})
     })
   }
 
   render () {
     return (
-      <View style={{flex: 1, padding: 20}}>
+      <View style={{flex: 1, padding: 20, alignItems:'center', justifyContent: 'center'}}>
         {/* <WebView style={{width: '50%', height: '50%'}} source={{ uri: this.state.data }} /> */}
         <HTML html={`${this.state.data}`} imagesMaxWidth={Dimensions.get('window').width} />
       </View>

App/Containers/TransactionResultScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/TransactionResultScreenStyle'
+
+class TransactionResultScreen extends Component {
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>TransactionResultScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TransactionResultScreen)

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import ForgotPasswordScreen from '../Containers/ForgotPasswordScreen'
+import TransactionResultScreen from '../Containers/TransactionResultScreen'
+import ShippingScreen from '../Containers/ShippingScreen'
+import PaymentMethodScreen from '../Containers/PaymentMethodScreen'
+import CheckOutScreen from '../Containers/CheckOutScreen'
+import CartScreen from '../Containers/CartScreen'
 import MapViewScreen from '../Containers/MapViewScreen'
 import CreateAddressScreen from '../Containers/CreateAddressScreen'
 import TermsConditionScreen from '../Containers/TermsConditionScreen'
@@ -35,6 +41,12 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  ForgotPasswordScreen: { screen: ForgotPasswordScreen },
+  TransactionResultScreen: { screen: TransactionResultScreen },
+  ShippingScreen: { screen: ShippingScreen },
+  PaymentMethodScreen: { screen: PaymentMethodScreen },
+  CheckOutScreen: { screen: CheckOutScreen },
+  CartScreen: { screen: CartScreen },
   MapViewScreen: { screen: MapViewScreen },
   CreateAddressScreen: { screen: CreateAddressScreen },
   TermsConditionScreen: { screen: TermsConditionScreen },

App/Services/Api.js

@@ -64,6 +64,8 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   const getUser = (username) => api.get('search/users', { q: username })
   const login = (body) => api.post('login', body)
   const registerUser = (body) => api.post('register', body)
+  const changePassword = (body) => api.post('change_password', body)
+  const forgotPassword = (body) => api.post('forgot_password', body)
   const resendOtpEmail = (email) => api.post('resend_otp_email', email)
   const verifikasiOtpEmail = (otp) => api.post('verify_otp_signup_email', otp)
   const editProfile = (body) => api.post('edit_profile', body)
@@ -82,9 +84,10 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
 
   // About App
   const appInfo = () => api.get('app_info')
-  const aboutUs = () => api.get('about_us')
-  const termsCondition = () => api.get('terms')
-  const contactUs = () => api.get('contact_us')
+  const aboutUs = () => api.get('about_us_mobile')
+  const termsCondition = () => api.get('terms_mobile')
+  const contactUs = () => api.get('contact_us_mobile')
+
 
   // ------
   // STEP 3
@@ -109,6 +112,8 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
     getUser,
     login,
     registerUser,
+    changePassword,
+    forgotPassword,
     resendOtpEmail,
     verifikasiOtpEmail,
     editProfile,

App/Themes/Images.js

@@ -35,6 +35,8 @@ const images = {
   berhasil: require('../Images/Icons/berhasil.png'),
   add: require('../Images/Icons/add.png'),
   map: require('../Images/Icons/map.png'),
+  icon_pesanansaya_gray: require('../Images/Icons/icon_pesanansaya_gray.png'),
+  icon_close: require('../Images/Icons/icon_close.png'),
 
   // big image
   letter: require('../Images/letter.png'),