update

App/Components/BaseHeader.js

@@ -85,7 +85,7 @@ export default class BaseHeader extends Component {
         </View>}
         {this.props.notification && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#4cc9f0' }}>
           <TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3, flexDirection: 'row' }}>
-            <Image source={Images.icon_backwhite} style={{ width: 20, height: 15, alignSelf: 'center' }} />
+            {/* <Image source={Images.icon_backwhite} style={{ width: 20, height: 15, alignSelf: 'center' }} /> */}
             <BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16, alignSelf: 'center' }} />
           </TouchableOpacity>
           <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center', marginBottom: -3, }} onPress={this.props.notificationPress}>

App/Containers/CheckOutScreen.js

@@ -27,6 +27,8 @@ class CheckOutScreen extends Component {
       address: {},
       dataCheckout: [],
       totalCheckout: 0,
+      delivery: null,
+      paymentMethod : null
     }
   }
 
@@ -87,6 +89,38 @@ class CheckOutScreen extends Component {
     this.setState({totalCheckout})
   }
 
+  onSelect = (data) => {
+    this.setState(data)
+  }
+
+  createOrder() {
+    let payloadCart = []
+    this.state.dataCheckout.map((item, index) => {
+      payloadCart.push({
+        "cart_id": item.cart_id,
+        "varient_id": item.varient_id,
+        "product_id": item.product_id,
+        "quantity": item.quantity,
+        "price": item.price,
+        "total_price": item.total_price,
+        "cart_date": null
+      })
+    })
+    let payload = {
+      "address_id": this.state.address.address_id,
+      "payment_method": 1,
+      "delivery_charge": "1000",
+      "is_wallet": 0,
+      "coupon_id": null,
+      "coupon_discount": null,
+      "discount": 1000,
+      "lat": this.state.address.lat,
+      "long": this.state.address.long,
+      "cart": payloadCart,
+      "courier_rate_id": 1
+    }
+  }
+
   render () {
     return (
       <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
@@ -119,11 +153,8 @@ class CheckOutScreen extends Component {
               </View>
               <View style={{height: 10, width: '100%', backgroundColor: '#e0e0e0'}}/>
             </View>
-
             {/* Product */}
-            {this.state.dataCheckout.map((item,index) => {
-              return (
-                <View key={index}>
+            <View>
               <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
                 <View style={{alignItems:'center', justifyContent: 'center',}}>
                   <Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
@@ -133,7 +164,9 @@ class CheckOutScreen extends Component {
                   <BaseText text={"Dijual oleh e-CartPro"} type={"regular"} style={{opacity: .8}}/>
                 </View>
               </View>
-                  <View style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1, backgroundColor: '#f5f5f5'}}>
+              {this.state.dataCheckout.map((item,index) => {
+              return (
+              <View key={index} style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1, backgroundColor: '#f5f5f5'}}>
                 <View style={{flexDirection:'row'}}>
                   <View style={{width: '25%', alignItems:'center', justifyContent: 'center'}}>
                     <Image source={{uri: item.varient_image}} style={{width: 75, height: 75, resizeMode: 'cover', borderRadius: 10}}/>
@@ -152,39 +185,36 @@ class CheckOutScreen extends Component {
                     </View>
                   </View>
                 </View>
-                  </View>
+              </View> )
+              })}
               <View style={{borderTopColor: '#4cc9f0', borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: '#4cc9f0'}}>
-                    <TouchableOpacity onPress={() => this.props.navigation.navigate('DeliveryScreen')} style={{flexDirection: 'row', justifyContent: 'space-between', padding: 20, backgroundColor: 'rgba(76, 201, 240, .2)'}}>
+                <TouchableOpacity onPress={() => this.props.navigation.navigate('DeliveryScreen', {setProps: this.onSelect.bind(this), delivery: this.state.delivery})} style={{flexDirection: 'row', justifyContent: 'space-between', padding: 20, backgroundColor: 'rgba(76, 201, 240, .2)'}}>
                   <BaseText type={'regular'} text={'Opsi Pengiriman'}/>
                   <FontAwesome name={'angle-right'} size={20}/>
                 </TouchableOpacity>
-                    <View style={{padding: 20, borderTopColor: '#e0e0e0', borderTopWidth: 1, backgroundColor: 'rgba(76, 201, 240, .2)'}}>
+                {this.state.delivery != null && <View style={{padding: 20, borderTopColor: '#e0e0e0', borderTopWidth: 1, backgroundColor: 'rgba(76, 201, 240, .2)'}}>
                   <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',}}> 
-                        <BaseText text={'Reguler'} type={'bold'}/>
+                    <BaseText text={this.state.delivery.rate_name} type={'bold'}/>
                     <BaseText text={'Akan diterima pada tanggal 27 Mei - 30 Mei 2020'} type={'italic'} style={{fontSize: 10, color: 'gray'}}/>
                   </View>
-                      <BaseText text={'Anter Aja'} type={'regular'} style={{opacity: .6, fontSize: 12, marginTop: 5}}/>
+                  <BaseText text={this.state.delivery.courier_name} type={'regular'} style={{opacity: .6, fontSize: 12, marginTop: 5}}/>
                   <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10}}> 
                     <BaseText text={'Biaya Pengiriman'} type={'regular'} style={{opacity: .6, fontSize: 12}}/>
                     <View style={{flexDirection:'row', alignItems:'center'}}>
-                          <View>
-                            <Image source={Images.icon_freedeliv} style={{width: 60, height: 26, resizeMode: 'stretch'}}/>
-                          </View>
-                          <BaseText text={formatRp(this.state.currency, 10000)} type={'regular'} style={{fontSize: 10, color: 'gray', textDecorationLine: 'line-through', marginLeft: 5}}/>
-                        </View>
+                      {this.state.delivery.rate_value == 0 && <View>
+                        <Image source={Images.icon_freedeliv} style={{width: 60, height: 26, resizeMode: 'stretch', marginRight: 5}}/>
+                      </View>}
+                      <BaseText text={formatRp(this.state.currency, this.state.delivery.rate_value)} type={'regular'} style={{fontSize: 10, color: 'gray', textDecorationLine: this.state.delivery.rate_value == 0? 'line-through' : 'none'}}/>
                     </View>
                   </View>
+                </View>}
               </View>
               <View style={{flexDirection: 'row', justifyContent: 'space-between', padding: 20}}>
                 <BaseText text={'Total Pesanan'} type={'regular'} style={{opacity: .9}}/>
-                    <BaseText text={formatRp(this.state.currency, item.price)} type={'bold'} style={{color: '#4cc9f0'}}/>
+                <BaseText text={formatRp(this.state.currency, this.state.totalCheckout)} type={'bold'} style={{color: '#4cc9f0'}}/>
               </View>
               <View style={{height: 10, width: '100%', backgroundColor: '#e0e0e0'}}/>
             </View>
-              )
-            })}
-            
-
             {/* Kupon and Rewards */}
             <View>
               <View style={{flexDirection:'row', justifyContent: 'space-between', padding: 20}}>
@@ -222,7 +252,7 @@ class CheckOutScreen extends Component {
             {/* Metode Pembayaran */}
             <View>
               <View style={{padding: 20}}>
-                <TouchableOpacity onPress={() => this.props.navigation.navigate('PaymentMethodScreen')} style={{flexDirection:'row', justifyContent: 'space-between'}}>
+                <TouchableOpacity onPress={() => this.props.navigation.navigate('PaymentMethodScreen', {setProps: this.onSelect.bind(this), paymentMethod: this.state.paymentMethod})} style={{flexDirection:'row', justifyContent: 'space-between'}}>
                   <View style={{flexDirection: 'row',alignItems: 'center'}}>
                     <Image source={Images.icon_pembayaran} style={{width: 30, height: 20, resizeMode: 'stretch'}}/>
                     <BaseText text={'Pilih Metode Pembayaran'} style={{marginLeft: 10, fontSize: 12}}/>
@@ -231,7 +261,7 @@ class CheckOutScreen extends Component {
                     <FontAwesome name={'angle-right'} size={20}/>
                   </View>
                 </TouchableOpacity>
-                <BaseText text={'Pembayaran menggunakan metode COD'} type={'regular'} style={{opacity: .6, fontSize: 12, marginTop: 10}}/>
+                {this.state.paymentMethod != null && <BaseText text={`Pembayaran menggunakan metode ${this.state.paymentMethod.payment_method_name}`} type={'regular'} style={{opacity: .6, fontSize: 12, marginTop: 10}}/>}
               </View>
               <View style={{borderTopColor: '#e0e0e0', borderTopWidth: 1, padding: 20}}>
                 <View style={{flexDirection:'row', justifyContent: 'space-between'}}>

App/Containers/HomePageScreen.js

@@ -20,6 +20,7 @@ import { NavigationEvents } from 'react-navigation';
 import Toast from 'react-native-toast-message';
 import Api from '../Services/Api';
 import Constant from '../Lib/Constant'
+import { titleCase } from '../Lib/Utils';
 
 class HomePageScreen extends Component {
   constructor(props) {
@@ -83,9 +84,9 @@ class HomePageScreen extends Component {
             <View style={{width: '50%', paddingTop: 30}}>
                 <Image source={Images.logo_eCart} style={{width: 120, height: 35}}/>
                 <View style={{elevation: 5, width: 85, height: 85, borderRadius: 85, borderWidth: 46, borderColor: 'white', marginTop: 25, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center',}}>
-                  <Image source={Images.beautyProduct} style={{width: 85, height: 85, borderRadius: 85}}/>
+                  <Image source={{uri: this.state.user != null? 'https://apiecart.eksad.com/' + this.state.user.data.user_image : Images.beautyProduct}} style={{width: 85, height: 85, borderRadius: 85}}/>
                 </View>
-                <BaseText type={"bold"} text={'Kang Dadang'} style={{fontSize: 18, color: '#4b4b4b', marginLeft: 5, marginTop: 10}}/>
+                <BaseText type={"bold"} text={this.state.user != null? titleCase(this.state.user.data.user_name) : 'Kang Dadang'} style={{fontSize: 18, color: '#4b4b4b', marginLeft: 5, marginTop: 10}}/>
             </View>
             <View style={{width: '50%', alignItems:'flex-end'}}>
               {/* <Image source={Images.sliceCircleBlue} style={{width: '100%', height: 150}}/> */}

App/Containers/PaymentMethodScreen.js

@@ -23,7 +23,8 @@ class PaymentMethodScreen extends Component {
       loading: false,
       currency: '',
       paymentMethod: [],
-      paymentID: 0
+      paymentID: 0,
+      paymentName: ''
     }
   }
 
@@ -51,6 +52,7 @@ class PaymentMethodScreen extends Component {
     this.setState({ loading: true})
     Api.create().getPaymentMethod().then(response => {
       if (response.data.status == "success") {
+        console.log(response.data)
         this.setState({
           paymentMethod: response.data.data.reverse(),
           loading: false
@@ -72,6 +74,7 @@ class PaymentMethodScreen extends Component {
           </View>
           <View style={{ flexDirection: 'row', marginTop: 10 }}>
             <BaseText text={'Use'} type={'regular'} style={{ opacity: .7, fontSize: 12 }} />
+            <BaseText text={this.state.paymentName} type={'bold'} style={{ opacity: .7, fontSize: 12, marginLeft: 10}} />
           </View>
         </View>
         <View style={{ flex: 1, backgroundColor: '#ececec'}}>
@@ -85,23 +88,26 @@ class PaymentMethodScreen extends Component {
           }
         {this.state.paymentMethod.map((item, index) => {
           return (
-            <View style={{ flexDirection: 'row', backgroundColor: 'white', padding: 20, borderBottomWidth: 1, borderBottomColor: '#e0e0e0', justifyContent: 'space-between' }}>
-              <View style={{ flexDirection: 'row' }}>
             <TouchableOpacity 
-                  style={this.state.paymentID == item.payment_method_id ? styles.radioCircleClick : styles.radioCircle}
             onPress={() => {
+              this.props.navigation.state.params.setProps({paymentMethod: item})
               this.setState({
                 paymentID: item.payment_method_id,
+                paymentName: item.payment_method_name
               });
-                  }}>
+            }}
+            style={{ flexDirection: 'row', backgroundColor: 'white', padding: 20, borderBottomWidth: 1, borderBottomColor: '#e0e0e0', justifyContent: 'space-between' }}>
+              <View style={{ flexDirection: 'row' }}>
+                <View
+                  style={this.state.paymentID == item.payment_method_id ? styles.radioCircleClick : styles.radioCircle}>
                   {this.state.paymentID == item.payment_method_id && <View style={styles.selectedRb} />}
-                </TouchableOpacity>
+                </View>
                 <BaseText text={item.payment_method_name} type={'regular'} style={{ opacity: .7, fontSize: 12, marginLeft: 20 }} />
               </View>
               {item.value != 0 && index == 0 ?
                 <BaseText text={item.value} type={'regular'} style={{ opacity: .7, fontSize: 12, marginLeft: 20 }} /> :
                 null}
-            </View>
+            </TouchableOpacity>
           )
         })}
         </View>

App/Services/Api.js

@@ -75,7 +75,12 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   const getWallet = () => api.get('get_wallet')
   const topUpWallet = (body) => api.post('topup_wallet', body)
   const getPaymentMethod = () => api.get('get_payment_method')
+
+
+  // Courier
   const getCategoryCourier = () => api.get('get_category_courier')
+  const getEstimateCourier = (rateId) => api.get(`get_estimate_courier/${rateId}`)
+  const getEstimateDelivery = (courierId) => api.get(`get_estimate_delivery/${courierId}`)
 
   // Deal Of The Day
   const getPeriodeDeal = (body) => api.post('get_deal_product_per_periode', body)
@@ -189,7 +194,9 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
     getNotification,
     getDetailNotif,
     readNotification,
-    readAllNotification
+    readAllNotification,
+    getEstimateCourier,
+    getEstimateDelivery,
   }
 }
 

App/Themes/Images.js

@@ -52,6 +52,7 @@ const images = {
   icon_coupon: require('../Images/Icons/icon_coupon.png'),
   icon_check: require('../Images/Icons/icon_check.png'),
   icon_pembayaran: require('../Images/Icons/icon_pembayaran.png'),
+  icon_delete: require('../Images/Icons/icon_delete.png'),
   
   // big image
   letter: require('../Images/letter.png'),