update

App/Containers/App.js

@@ -10,6 +10,8 @@ import BaseText from '../Components/BaseText'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import firebase from '@react-native-firebase/app'
 import messaging from '@react-native-firebase/messaging';
+import moment from 'moment';
+import momentId from 'moment/locale/id';
 
 // create our store
 const store = createStore()
@@ -81,6 +83,7 @@ class App extends Component {
   componentDidMount() {
     this.checkPermission()
     this.fetchToken()
+    moment.updateLocale('id', momentId)
   }
 
   checkPermission = async () => {

App/Containers/CartScreen.js

@@ -18,6 +18,7 @@ import Constant from '../Lib/Constant';
 import Toast from 'react-native-toast-message';
 import { BarIndicator } from 'react-native-indicators';
 import FontAwesome from 'react-native-vector-icons/FontAwesome'
+import { NavigationEvents } from 'react-navigation';
 
 class CartScreen extends Component {
   constructor(props) {
@@ -252,6 +253,10 @@ class CartScreen extends Component {
   render () {
     return (
       <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
+        <NavigationEvents onDidFocus={() => {
+          this.getCurrency()
+          this.getCart()
+        }}/>
         <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Keranjang'} />
         {this.state.loading? <View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32}}>
           <BarIndicator count={5} color='#4cc9f0' size={25}/>

App/Containers/CheckOutScreen.js

@@ -28,6 +28,7 @@ class CheckOutScreen extends Component {
       dataCheckout: [],
       totalCheckout: 0,
       delivery: null,
+      diskon: 0,
       paymentMethod : null
     }
   }
@@ -74,6 +75,7 @@ class CheckOutScreen extends Component {
   refreshScreen() {
     this.getAddress()
     this.getCurrency()
+    console.log('ini data delivery', this.state.delivery)
   }
 
   async getCurrency() {
@@ -95,6 +97,7 @@ class CheckOutScreen extends Component {
 
   createOrder() {
     let payloadCart = []
+    let diskon = 0
     this.state.dataCheckout.map((item, index) => {
       payloadCart.push({
         "cart_id": item.cart_id,
@@ -105,20 +108,31 @@ class CheckOutScreen extends Component {
         "total_price": item.total_price,
         "cart_date": null
       })
+      diskon += item.discount_price
     })
+
     let payload = {
       "address_id": this.state.address.address_id,
-      "payment_method": 1,
-      "delivery_charge": "1000",
-      "is_wallet": 0,
+      "payment_method": this.state.paymentMethod.payment_method_id,
+      "delivery_charge": this.state.delivery.rate_value,
+      "is_wallet": this.state.paymentMethod.payment_method_name == 'Wallet'? 1 : 0,
       "coupon_id": null,
       "coupon_discount": null,
-      "discount": 1000,
+      "discount": diskon,
       "lat": this.state.address.lat,
-      "long": this.state.address.long,
+      "long": this.state.address.lng,
       "cart": payloadCart,
-      "courier_rate_id": 1
+      "courier_rate_id": this.state.delivery.courier_rate_id
     }
+
+    Api.create().createOrder(payload).then((response) => {
+      if (response.data.status == 'success') {
+        this.backAction()
+      }
+      console.log('tes respon',response.data)
+    })
+
+    // console.log('ini payload', payload)
   }
 
   render () {
@@ -270,11 +284,11 @@ class CheckOutScreen extends Component {
                 </View>
                 <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
                   <BaseText text={'Subtotal Pengiriman'} type={'regular'} style={{opacity: .5, fontSize: 12}}/>
-                  <BaseText text={formatRp(this.state.currency, 0)} type={'bold'} style={{opacity: .5,fontSize: 12}}/>
+                  <BaseText text={formatRp(this.state.currency, this.state.delivery == null? 0 : this.state.delivery.rate_value)} type={'bold'} style={{opacity: .5,fontSize: 12}}/>
                 </View>
                 <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
                   <BaseText text={'Total Pembayaran'} type={'regular'} style={{opacity: .9}}/>
-                  <BaseText text={formatRp(this.state.currency, this.state.totalCheckout)} type={'bold'} style={{color: '#4cc9f0'}}/>
+                  <BaseText text={formatRp(this.state.currency, this.state.totalCheckout + (this.state.delivery == null? 0 : this.state.delivery.rate_value))} type={'bold'} style={{color: '#4cc9f0'}}/>
                 </View>
               </View>
               
@@ -286,10 +300,10 @@ class CheckOutScreen extends Component {
             <View style={{flexDirection:'row', justifyContent: 'space-between', alignItems:'center'}}>
               <View style={{width: '60%'}}>
                 <BaseText text={"Total"} type={"bold"} style={{opacity: .5, fontSize: 12}}/>
-                <BaseText text={formatRp(this.state.currency, this.state.totalCheckout)} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/>
+                <BaseText text={formatRp(this.state.currency, this.state.totalCheckout + (this.state.delivery == null? 0 : this.state.delivery.rate_value))} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/>
               </View>
               <View style={{width: '40%'}}>
-                <BaseButton text={'Buat Pesanan'} onPress={() => this.props.navigation.navigate('CheckOutScreen')} fontSizeText={14}/>
+                <BaseButton text={'Buat Pesanan'} onPress={() => this.createOrder()} fontSizeText={14}/>
               </View>
             </View>
           </View>

App/Containers/DetailOrderScreen.js

@@ -10,17 +10,25 @@ import BaseHeader from '../Components/BaseHeader'
 import BaseText from '../Components/BaseText'
 import { Images } from '../Themes'
 import BaseButton from '../Components/BaseButton'
+import Api from '../Services/Api'
+import moment from 'moment';
 
 class DetailOrderScreen extends Component {
-  
+  constructor(props) {
+    super(props)
+    this.state = {
+      orderId: this.props.navigation.state.params.orderId,
+      dataOrder: null
+    } 
+  }
+
   backAction = () => {
     this.props.navigation.goBack()
     return true;
   };
 
   componentDidMount() {
-    // alert('sadap')
-    // alert(JSON.stringify(this.props.navigation))
+    this.getDetailOrder()
     BackHandler.addEventListener("hardwareBackPress", this.backAction);
   }
 
@@ -28,16 +36,25 @@ class DetailOrderScreen extends Component {
     BackHandler.removeEventListener("hardwareBackPress", this.backAction);
   }
 
+  getDetailOrder() {
+    Api.create().getDetailOrder(this.state.orderId).then((response) => {
+      if (response.data.status == 'success') {
+        this.setState({dataOrder: response.data.data})
+      }
+      console.log('ini data nya', moment(response.data.data.order_date).format('LLL'))
+    })
+  }
+
   render () {
     return (
       <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
-        <BaseHeader leftText={'No. Order 123456'} onBackPress={this.backAction}/>
+        <BaseHeader leftText={`No. Order {}`} onBackPress={this.backAction}/>
         <ScrollView style={[styles.scrollContent]}>
 
           {/* Tanggal */}
           <View style={{padding: 15, borderRadius: 10, elevation: 5, backgroundColor: 'white', marginVertical: 20, marginHorizontal: 5}}>
             <BaseText text={"Tanggal"} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
-            <BaseText text={"18 Juli 2020, 10:38 AM"} type={"regular"} style={{fontSize: 12, opacity: .9}}/>
+            <BaseText text={this.state.dataOrder == null? '' : `${moment(String(this.state.dataOrder.order_date).substr(0,10)).format('DD MMMM YYYY')}, ${moment(String(this.state.dataOrder.order_date).substr(11,19)).format('LT')}`} type={"regular"} style={{fontSize: 12, opacity: .9}}/>
             <View style={{marginVertical: 10, height: 1, width: '100%', backgroundColor: '#d8d8d8'}}/>
             <BaseText text={"Status Pesanan"} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
             <BaseText text={"MENUNGGU KONFIRMASI"} type={"regular"} style={{fontSize: 12, opacity: .9}}/>

App/Containers/ListAddressScreen.js

@@ -45,6 +45,7 @@ class ListAddressScreen extends Component {
         this.setState({
           data: response.data.data
         })
+        console.log(response.data.data)
       } else {
         this.setState({ data: [] })
       }

App/Containers/MyOrderScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView, View, BackHandler, Image } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, View, BackHandler, Image, AsyncStorage } from 'react-native'
 import { connect } from 'react-redux'
 import { Container, Header, Tab, Tabs, ScrollableTab, TabHeading } from 'native-base';
 import FontAwesome from 'react-native-vector-icons/FontAwesome'
@@ -12,12 +12,18 @@ import BaseHeader from '../Components/BaseHeader';
 import BaseText from '../Components/BaseText';
 import { NavigationEvents } from 'react-navigation';
 import { Images } from '../Themes';
+import Api from '../Services/Api';
+import moment from 'moment';
+import Constant from '../Lib/Constant';
+import { formatRp } from '../Lib/Utils';
 
 class MyOrderScreen extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      activeTab: 0
+      activeTab: 0,
+      listOrder: [],
+      currency: ''
     }
   }
   backAction = () => {
@@ -26,13 +32,65 @@ class MyOrderScreen extends Component {
   };
 
   componentDidMount() {
+    this.getCurrency()
+    this.getListOrder()
     BackHandler.addEventListener("hardwareBackPress", this.backAction);
   }
 
+  getListOrder() {
+    Api.create().getOrder().then((response) => {
+      if (response.data.status == 'success') {
+        this.setState({listOrder: response.data.data})
+      }
+    })
+  }
+
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.backAction);
   }
   
+  async getCurrency() {
+    let currency = await AsyncStorage.getItem(Constant.GLOBAL_CURRENCY)
+    this.setState({currency})
+    console.log('yeeeeeeeee', currency)
+  }
+  
+  renderItem(item, index){
+    return (
+      <View style={{backgroundColor: 'white', paddingHorizontal: 20, marginBottom: 5}} key={index}>
+        <View style={{borderRadius: 10, width: '100%', elevation: 5, backgroundColor:'white', marginTop: 20}}>
+          <View style={{paddingHorizontal: 20, paddingVertical: 15, backgroundColor: 'rgba(76, 201, 240, .2)', borderTopLeftRadius: 10, borderTopRightRadius: 10, width: '100%', flexDirection: 'row', justifyContent: 'space-between',}}>
+            <View style={{justifyContent: 'center', width: '50%'}}>
+              <BaseText text={moment(String(item.order_date).substr(0,10)).format('DD MMMM YYYY')} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
+              <BaseText text={String(item.order_id)} type={"regular"} style={{fontSize: 12, opacity: .9}}/>
+            </View>
+            <View style={{alignItems:'flex-end', justifyContent: 'center', width: '50%'}}>
+            <BaseText text={item.order_status} type={"bold"} style={{fontSize: 12, color: 'black'}}/>
+            </View>
+          </View>
+          <View style={{padding: 20}}>
+            <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+              <View style={{width: '20%'}}>
+                <Image source={{uri: item.order_detail[0].product_image}} style={{resizeMode: 'stretch', height: 50, width: 50, borderRadius: 40}}/>
+              </View>
+              <View style={{flexGrow: 1, justifyContent: 'space-between'}}>
+              <BaseText text={item.order_detail[0].product_name} type={"bold"} style={{fontSize: 12, color: '#4b4b4b'}}/>
+              {item.order_detail.length > 1 && <BaseText text={"1 produk lainnya"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b', opacity: .5,}}/>}
+              </View>
+            </View>
+          </View>
+          <View style={{alignItems:'center', justifyContent: 'center', paddingTop: 0, paddingBottom: 20}}>
+            <BaseText onPress={() => this.props.navigation.navigate('DetailOrderScreen', {orderId: item.order_id})} text={"Detail Pesanan"} type={"bold"} style={{color: '#4cc9f0', textDecorationLine: 'underline', textDecorationColor: '#4cc9f0'}}/>
+          </View>
+          <View style={{alignItems:'flex-start', justifyContent: 'center', padding: 20, borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
+            <BaseText text={"Total Pembayaran"} type={"bold"} style={{fontSize: 11, color: '#4b4b4b', opacity: .5,}}/>
+            <BaseText text={formatRp(this.state.currency, item.total_price)} type={"bold"} style={{fontSize: 13, color: '#4cc9f0'}}/>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
   render () {
     return (
       <Container style={{backgroundColor: '#4cc9f0'}}>
@@ -54,69 +112,69 @@ class MyOrderScreen extends Component {
               <TabHeading style={{backgroundColor: 'transparent'}}>
                  <BaseText text={"Semua"} type={"bold"} style={{fontSize: 12, color: this.state.activeTab == 0? 'black' : '#4b4b4b', opacity: this.state.activeTab == 0? 1 : .6,}}/>
               </TabHeading>}>
-              <View style={{paddingHorizontal: 20, flex: 1, alignItems: 'center', backgroundColor: 'white'}}>
-                <View style={{borderRadius: 10, width: '100%', elevation: 5, backgroundColor:'white', marginTop: 20}}>
-                  <View style={{paddingHorizontal: 20, paddingVertical: 15, backgroundColor: 'rgba(76, 201, 240, .2)', borderTopLeftRadius: 10, borderTopRightRadius: 10, width: '100%', flexDirection: 'row', justifyContent: 'space-between',}}>
-                    <View style={{justifyContent: 'center', width: '50%'}}>
-                      <BaseText text={"18 Juli 2020"} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
-                      <BaseText text={"123456"} type={"regular"} style={{fontSize: 12, opacity: .9}}/>
-                    </View>
-                    <View style={{alignItems:'flex-end', justifyContent: 'center', width: '50%'}}>
-                    <BaseText text={"Menunggu Konfirmasi"} type={"bold"} style={{fontSize: 12, color: 'black'}}/>
-                    </View>
-                  </View>
-                  <View style={{padding: 20}}>
-                    <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-                      <View style={{width: '20%'}}>
-                        <Image source={Images.jaket} style={{resizeMode: 'stretch', height: 50, width: 50, borderRadius: 40}}/>
-                      </View>
-                      <View style={{flexGrow: 1, justifyContent: 'space-between'}}>
-                      <BaseText text={"88Rising x Guess Hooded Sweatshirt"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b'}}/>
-                      <BaseText text={"1 produk lainnya"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b', opacity: .5,}}/>
-                      </View>
-                    </View>
-                  </View>
-                  <View style={{alignItems:'center', justifyContent: 'center', paddingTop: 0, paddingBottom: 20}}>
-                    <BaseText onPress={() => this.props.navigation.navigate('DetailOrderScreen')} text={"Detail Pesanan"} type={"bold"} style={{color: '#4cc9f0', textDecorationLine: 'underline', textDecorationColor: '#4cc9f0'}}/>
-                  </View>
-                  <View style={{alignItems:'flex-start', justifyContent: 'center', padding: 20, borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
-                    <BaseText text={"Total Pembayaran"} type={"bold"} style={{fontSize: 11, color: '#4b4b4b', opacity: .5,}}/>
-                    <BaseText text={"Rp. 6.110.000"} type={"bold"} style={{fontSize: 13, color: '#4cc9f0'}}/>
-                  </View>
-                </View>
-              </View>
+              <ScrollView style={{flex: 1}}>
+                {this.state.listOrder.map((item,index) => {
+                  return (
+                    this.renderItem(item,index)
+                  )
+                })}
+              </ScrollView>
             </Tab>
             <Tab heading={
               <TabHeading style={{backgroundColor: 'transparent'}}>
                  <BaseText text={"Menunggu Konfirmasi"} type={"bold"} style={{fontSize: 12, color: this.state.activeTab == 1? 'black' : '#4b4b4b', opacity: this.state.activeTab == 1? 1 : .6,}}/>
               </TabHeading>}>
-              <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white'}}>
-                <BaseText text={"List Menunggu Konfirmasi"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b', opacity: .6,}}/>
-              </View>
+              <ScrollView style={{flex: 1}}>
+                {this.state.listOrder.map((item,index) => {
+                  if (item.order_status_id == 1) {
+                    return (
+                      this.renderItem(item,index)
+                    )
+                  }
+                })}
+              </ScrollView>
             </Tab>
             <Tab heading={
               <TabHeading style={{backgroundColor: 'transparent'}}>
                  <BaseText text={"Pesanan Diproses"} type={"bold"} style={{fontSize: 12, color: this.state.activeTab == 2? 'black' : '#4b4b4b', opacity: this.state.activeTab == 2? 1 : .6,}}/>
               </TabHeading>}>
-              <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white'}}>
-                <BaseText text={"List Diproses"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b', opacity: .6,}}/>
-              </View>
+              <ScrollView style={{flex: 1}}>
+                {this.state.listOrder.map((item,index) => {
+                  if (item.order_status_id == 2) {
+                    return (
+                      this.renderItem(item,index)
+                    )
+                  }
+                })}
+              </ScrollView>
             </Tab>
             <Tab heading={
               <TabHeading style={{backgroundColor: 'transparent'}}>
                  <BaseText text={"Pesanan Dikirim"} type={"bold"} style={{fontSize: 12, color: this.state.activeTab == 3? 'black' : '#4b4b4b', opacity: this.state.activeTab == 3? 1 : .6,}}/>
               </TabHeading>}>
-              <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white'}}>
-                <BaseText text={"List Dikirim"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b', opacity: .6,}}/>
-              </View>
+              <ScrollView style={{flex: 1}}>
+                {this.state.listOrder.map((item,index) => {
+                  if (item.order_status_id == 3) {
+                    return (
+                      this.renderItem(item,index)
+                    )
+                  }
+                })}
+              </ScrollView>
             </Tab>
             <Tab heading={
               <TabHeading style={{backgroundColor: 'transparent'}}>
                  <BaseText text={"Pesanan Tiba"} type={"bold"} style={{fontSize: 12, color: this.state.activeTab == 4? 'black' : '#4b4b4b', opacity: this.state.activeTab == 4? 1 : .6,}}/>
               </TabHeading>}>
-              <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white'}}>
-                <BaseText text={"List Tiba"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b', opacity: .6,}}/>
-              </View>
+              <ScrollView style={{flex: 1}}>
+                {this.state.listOrder.map((item,index) => {
+                  if (item.order_status_id == 4) {
+                    return (
+                      this.renderItem(item,index)
+                    )
+                  }
+                })}
+              </ScrollView>
             </Tab>
             <Tab heading={
               <TabHeading style={{backgroundColor: 'transparent'}}>

App/Services/Api.js

@@ -76,7 +76,14 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
   const topUpWallet = (body) => api.post('topup_wallet', body)
   const getPaymentMethod = () => api.get('get_payment_method')
 
-
+  // Order
+  const createOrder = (body) => api.post('create_order', body)
+  const getOrder = (body) => api.post('get_order', body)
+  const getDetailOrder = (orderId) => api.get(`detail_order/${orderId}`)
+  const cancelOrder = (body) => api.post('cancel_order', body)
+  const getCancelReasonOrder = () => api.get('get_cancelling_reason')
+  const getOrderStatus = () => api.get('get_order_status')
+  
   // Courier
   const getCategoryCourier = () => api.get('get_category_courier')
   const getEstimateCourier = (rateId) => api.get(`get_estimate_courier/${rateId}`)
@@ -197,6 +204,12 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
     readAllNotification,
     getEstimateCourier,
     getEstimateDelivery,
+    createOrder,
+    getOrder,
+    getDetailOrder,
+    cancelOrder,
+    getCancelReasonOrder,
+    getOrderStatus,
   }
 }