Merge branch 'didam' into 'master'

Didam

See merge request !45

App/Containers/CartScreen.js

@@ -28,7 +28,9 @@ class CartScreen extends Component {
       listCart: [],
       arrayDelete: [],
       currency: '',
-      loading: false
+      loading: false,
+      dataCheckout: [],
+      arrayCheck: []
     }
   }
 
@@ -200,6 +202,50 @@ class CartScreen extends Component {
     }
   }
 
+  handleDataCheckout(item) {
+    let dataCheckout = this.state.dataCheckout
+    let arrayCheck = this.state.arrayCheck
+    let indexId = this.state.arrayCheck.findIndex((val) => val == item.cart_id)
+    if (indexId == -1) {
+      dataCheckout.push(item)
+      arrayCheck.push(item.cart_id)
+    } else {
+      dataCheckout.splice(indexId,1)
+      arrayCheck.splice(indexId,1)
+    }
+    this.setState({dataCheckout, arrayCheck})
+  }
+
+  handleCheckAll() {
+    let dataCheckout = this.state.dataCheckout
+    let arrayCheck = this.state.arrayCheck
+    this.state.listCart.map((item, index) => {
+      dataCheckout.push(item)
+      arrayCheck.push(item.cart_id)
+    })
+    setTimeout(() => {
+      this.setState({dataCheckout, arrayCheck})
+    }, 1000);
+  }
+
+  handleNavigateCheckout() {
+    if (this.state.dataCheckout.length > 0) {
+      this.props.navigation.navigate('CheckOutScreen', {dataCheckout: this.state.dataCheckout})
+    } else {
+      Toast.show({
+        type: 'failed',
+        position: 'bottom',
+        text1: 'Failed',
+        text2: 'Minimal 1 Item Harus Dipilih',
+        visibilityTime: 2500,
+        autoHide: true,
+        // topOffset: 100,
+        // bottomOffset: 40,
+      })
+    }
+    
+  }
+
   render () {
     return (
       <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
@@ -212,9 +258,12 @@ class CartScreen extends Component {
             return (
               <View key={index}>
                 <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
-                  <View style={{flexDirection: 'row' , alignItems:'center'}}>
-                    <TouchableOpacity onPress={() => alert('asdsa')}>
-                      <Image source={Images.radioOff} style={{width: 15, height: 15, tintColor: 'gray'}}/>
+                  <View style={{flexDirection: 'row', alignItems: 'center',}}>
+                    <TouchableOpacity onPress={() => this.handleDataCheckout(item)}>
+                      { this.state.arrayCheck.includes(item.cart_id) ?
+                        <Image source={Images.radioOn} style={{width: 20, height: 20}}/> :
+                        <Image source={Images.radioOff} style={{width: 20, height: 20, tintColor: 'gray'}}/>
+                      }
                     </TouchableOpacity>
                     <Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
                   </View>
@@ -290,19 +339,31 @@ class CartScreen extends Component {
                   </View>}
                 </View>
                 <View style={{width: '100%', height: 10, backgroundColor: '#ececec'}}/>
-                {index == this.state.listCart.length -1 && <View style={{height: 200, backgroundColor:'transparent', width: '100%'}}/>}
+                {index == this.state.listCart.length -1 && item.default_size.length > 0 && <View style={{height: 200, backgroundColor:'transparent', width: '100%'}}/>}
               </View>
             )
           })}
         </ScrollView>}
         <View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
+          <View style={{flexDirection:'row'}}>
+            <TouchableOpacity onPress={() => {
+                this.state.arrayCheck.length > 0 && this.state.arrayCheck.length == this.state.listCart.length?
+                this.setState({arrayCheck: [], dataCheckout: []}) : this.handleCheckAll() 
+              }}>
+              {this.state.arrayCheck.length > 0 && this.state.arrayCheck.length == this.state.listCart.length?
+                <Image source={Images.radioOn} style={{width: 20, height: 20}}/>: 
+                <Image source={Images.radioOff} style={{width: 20, height: 20, tintColor: 'gray'}}/>
+              }
+            </TouchableOpacity>
+            <BaseText text={"Pilih Semua"} type={"bold"} style={{opacity: .5, fontSize: 12, marginLeft: 5, alignSelf: 'flex-end',}}/>
+          </View>
           <View style={{flexDirection:'row', justifyContent: 'space-between', alignItems:'center'}}>
             <View style={{width: '60%'}}>
-              <BaseText text={"Subtotal"} type={"bold"} style={{opacity: .5, fontSize: 12}}/>
+              <BaseText text={"Subtotal"} type={"bold"} style={{opacity: .5, fontSize: 12, marginTop: 5}}/>
               <BaseText text={this.getTotalCart()} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/>
             </View>
             <View style={{width: '40%'}}>
-              <BaseButton text={'Checkout'} onPress={() => this.props.navigation.navigate('CheckOutScreen')} fontSizeText={14}/>
+              <BaseButton text={'Checkout'} onPress={() => this.handleNavigateCheckout()} fontSizeText={14}/>
             </View>
           </View>
         </View>

App/Containers/DeliveryScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, BackHandler, View } 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/DeliveryScreenStyle'
+import { NavigationEvents } from 'react-navigation';
+import BaseHeader from '../Components/BaseHeader';
+import { BarIndicator } from 'react-native-indicators';
+import BaseButton from '../Components/BaseButton';
+
+class DeliveryScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      loading: false
+    }
+  }
+
+  componentDidMount() {
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+  
+  render () {
+    return (
+      <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
+        {/* <NavigationEvents onDidFocus={() => this.refreshScreen()}/> */}
+        <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Opsi Pengiriman'} />
+        {this.state.loading? 
+          <View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32}}>
+            <BarIndicator count={5} color='#4cc9f0' size={25}/>
+          </View> :
+          <ScrollView showsVerticalScrollIndicator={false} style={[styles.scrollContent, {zIndex: 1}]}>
+          </ScrollView>}
+        <View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
+          <BaseButton text={'Tetapkan'} onPress={() => this.props.navigation.goBack()} fontSizeText={14}/>
+        </View>
+      </View>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DeliveryScreen)

App/Containers/PaymentMethodScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, BackHandler, View, AsyncStorage } 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'
+import { NavigationEvents } from 'react-navigation';
+import BaseHeader from '../Components/BaseHeader';
+import { BarIndicator } from 'react-native-indicators';
+import BaseButton from '../Components/BaseButton';
+import BaseText from '../Components/BaseText';
+import { formatRp } from '../Lib/Utils';
+import Constant from '../Lib/Constant';
 
 class PaymentMethodScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      loading: false,
+      currency: ''
+    }
+  }
+
+  componentDidMount() {
+    this.getCurrency()
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
+  async getCurrency() {
+    let currency = await AsyncStorage.getItem(Constant.GLOBAL_CURRENCY)
+    this.setState({currency})
+  }
+
   render () {
     return (
-      <ScrollView style={styles.container}>
-        <KeyboardAvoidingView behavior='position'>
-          <Text>PaymentMethodScreen</Text>
-        </KeyboardAvoidingView>
-      </ScrollView>
+      <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
+        {/* <NavigationEvents onDidFocus={() => this.refreshScreen()}/> */}
+        <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Metode Pembayaran'} />
+        <View style={[styles.scrollContent]}>
+          <BaseText type={'bold'} text={'Payment'}/>
+          <View style={{flexDirection:'row', justifyContent: 'space-between', marginTop: 10}}>
+            <BaseText text={'Order Amount'} type={'regular'} style={{opacity: .5, fontSize: 12}}/>
+            <BaseText text={formatRp(this.state.currency, 2400000)} type={'bold'} style={{opacity: .5,fontSize: 12}}/>
+          </View>
+          <View style={{flexDirection:'row', marginTop: 10}}>
+            <BaseText text={'Use'} type={'regular'} style={{opacity: .7, fontSize: 12}}/>
+          </View>
+        </View>
+        {this.state.loading? 
+          <View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32}}>
+            <BarIndicator count={5} color='#4cc9f0' size={25}/>
+          </View> :
+          <ScrollView showsVerticalScrollIndicator={false} style={{flex:1, backgroundColor:'white'}}>
+          </ScrollView>}
+        <View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
+          <BaseButton text={'Tetapkan'} onPress={() => this.props.navigation.goBack()} fontSizeText={14}/>
+        </View>
+      </View>
     )
   }
 }

App/Containers/Styles/DeliveryScreenStyle.js

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

App/Containers/Styles/PaymentMethodScreenStyle.js

@@ -2,5 +2,14 @@ import { StyleSheet } from 'react-native'
 import { ApplicationStyles } from '../../Themes/'
 
 export default StyleSheet.create({
-  ...ApplicationStyles.screen
+  ...ApplicationStyles.screen,
+  scrollContent: {
+    paddingVertical: 20,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    paddingHorizontal: 25,
+    borderBottomWidth: 1, 
+    borderBottomColor: '#e0e0e0'
+  },
 })

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import DeliveryScreen from '../Containers/DeliveryScreen'
 import DetailProductScreen from '../Containers/DetailProductScreen'
 import ComplainOrderScreen from '../Containers/ComplainOrderScreen'
 import ForgotPasswordScreen from '../Containers/ForgotPasswordScreen'
@@ -43,6 +44,7 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  DeliveryScreen: { screen: DeliveryScreen },
   DetailProductScreen: { screen: DetailProductScreen },
   ComplainOrderScreen: { screen: ComplainOrderScreen },
   ForgotPasswordScreen: { screen: ForgotPasswordScreen },

App/Themes/Images.js

@@ -46,7 +46,11 @@ const images = {
   icon_wishlistgray: require('../Images/Icons/icon_wishlistgray.png'),
   icon_sharegray: require('../Images/Icons/icon_sharegray.png'),
   icon_chat: require('../Images/Icons/icon_chat.png'),
-
+  icon_rewardsoutline: require('../Images/Icons/icon_rewardsoutline.png'),
+  icon_info: require('../Images/Icons/icon_info.png'),
+  icon_coupon: require('../Images/Icons/icon_coupon.png'),
+  icon_check: require('../Images/Icons/icon_check.png'),
+  icon_pembayaran: require('../Images/Icons/icon_pembayaran.png'),
   
   // big image
   letter: require('../Images/letter.png'),