Skip to content

C
clone_excelso
Commit bcfc5399 authored by Trisno's avatar Trisno
Browse files
Options

tampilin info driver di order history

parent f22fc362
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 28 deletions
view/OrderDetail.js
View file @ bcfc5399
import React from 'react'; import React from 'react';
import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, BackHandler, Modal, Image } from 'react-native'; import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, BackHandler, Modal, Image, Linking } from 'react-native';
import { Card } from 'react-native-shadow-cards' import { Card } from 'react-native-shadow-cards'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Axios from 'axios'; import Axios from 'axios';
...@@ -8,6 +8,7 @@ import session from '../function/session'; ...@@ -8,6 +8,7 @@ import session from '../function/session';
import moment from 'moment' import moment from 'moment'
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import { FontAwesome } from '@expo/vector-icons'; import { FontAwesome } from '@expo/vector-icons';
import { Icon } from 'react-native-elements'
class OrderDetail extends React.Component { class OrderDetail extends React.Component {
...@@ -235,40 +236,133 @@ class OrderDetail extends React.Component { ...@@ -235,40 +236,133 @@ class OrderDetail extends React.Component {
</View> </View>
<ScrollView style={styles.body}> <ScrollView style={styles.body}>
<View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, borderColor: 'grey', marginHorizontal: 10, padding: 10 }}>
<View style={{ flex: 0.1, justifyContent: 'center' }}> {
<FontAwesome name="map-marker" size={24} color="#d34343" /> this.state.detail_trans.trans_type_display == 'Pick Up' ? (
</View> <View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, borderColor: 'grey', marginHorizontal: 10, padding: 10 }}>
{ <View style={{ flex: 0.1, justifyContent: 'center' }}>
this.state.detail_trans.trans_type_display == 'Pick Up' ? ( <FontAwesome name="map-marker" size={24} color="#d34343" />
<View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>{this.state.detail_trans.outlet}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.detail_trans.outlet_address}</Text>
</View> </View>
) : ( {
<View style={{ flex: 0.6, justifyContent: 'center' }}> this.state.detail_trans.trans_type_display == 'Pick Up' ? (
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>{this.state.detail_trans.recipient_address_name}</Text> <View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.detail_trans.recipient_address}</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>{this.state.detail_trans.outlet}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.detail_trans.outlet_address}</Text>
</View>
) : (
<View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>{this.state.detail_trans.recipient_address_name}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.detail_trans.recipient_address}</Text>
</View>
)
}
{
this.state.detail_trans.trans_type_display == 'Pick Up' ? (
<View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>PICKUP</Text>
</View>
) : (
<View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>DELIVERY</Text>
</View>
)
}
</View>
) : (
<View style={{ flex: 2 }}>
<View style={{ flex: 1, flexDirection: 'row', borderColor: 'grey', marginHorizontal: 10, padding: 10 }}>
<View style={{ flex: 0.1, justifyContent: 'center', alignItems: 'center' }}>
<FontAwesome name="map-marker" size={24} color="#d34343" />
</View>
{
this.state.detail_trans.trans_type_display == 'Pick Up' ? (
<View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>{this.state.detail_trans.outlet}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.detail_trans.outlet_address}</Text>
</View>
) : (
<View style={{ flex: 0.6, justifyContent: 'center', paddingLeft: 10 }}>
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>{this.state.detail_trans.recipient_address_name}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.detail_trans.recipient_address}</Text>
</View>
)
}
{
this.state.detail_trans.trans_type_display == 'Pick Up' ? (
<View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>PICKUP</Text>
</View>
) : (
<View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>DELIVERY</Text>
</View>
)
}
</View> </View>
<View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, borderColor: 'grey', marginHorizontal: 10, padding: 10 }}>
<View style={{ flex: 0.1, justifyContent: 'center' }}>
<Image source={require('../assets/grab-logo.png')} style={{ height: 32, width: 32, borderRadius: 5, }} />
</View>
{
this.state.detail_trans.grab_driver_name == '' ? (
<View style={{ flex: 0.6, justifyContent: 'center', paddingLeft: 10 }}>
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>Name</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Phone</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>License Plate</Text>
</View>
) : (
<View style={{ flex: 0.6, justifyContent: 'center', paddingLeft: 10 }}>
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>{this.state.detail_trans.grab_driver_name}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.detail_trans.grab_driver_phone}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.detail_trans.grab_driver_license_plate}</Text>
</View>
) )
} }
{ {
this.state.detail_trans.trans_type_display == 'Pick Up' ? ( this.state.detail_trans.grab_driver_name == '' ? (
<View style={{ flex: 0.3, justifyContent: 'center' }}> null
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>PICKUP</Text> ) : (
</View> <View style={{ flex: 0.3, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row' }}>
) : ( <View style={{ paddingLeft: 30 }}>
<View style={{ flex: 0.3, justifyContent: 'center' }}> <TouchableOpacity onPress={() => { Linking.openURL('tel:' + this.state.detail_trans.grab_driver_phone) }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>DELIVERY</Text> <Icon
name='ios-call'
type='ionicon'
color='#838383'
size={30}
/>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() => { Linking.openURL('whatsapp://send?text=say something&phone=' + this.state.detail_trans.grab_driver_phone) }}>
<Icon
name='whatsapp'
type='font-awesome'
color='green'
size={30}
/>
</TouchableOpacity>
</View>
</View>
)
}
</View> </View>
</View>
)
}
)
}
</View>
<View style={{ marginLeft: 10, marginTop: 10, paddingLeft: 10 }}> <View style={{ marginLeft: 10, marginTop: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>PESANAN</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>PESANAN</Text>
</View> </View>
{ {
this.state.transaction_detail.map((item, index) => { this.state.transaction_detail.map((item, index) => {
// total = total + item.quantity * item.price // total = total + item.quantity * item.price
...@@ -386,7 +480,7 @@ class OrderDetail extends React.Component { ...@@ -386,7 +480,7 @@ class OrderDetail extends React.Component {
this.state.detail_trans.trans_type == 2 ? ( this.state.detail_trans.trans_type == 2 ? (
<View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1, marginHorizontal: 10 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1, marginHorizontal: 10 }}>
<View style={{ flex: 0.5, marginLeft: 10, marginVertical: 5 }}> <View style={{ flex: 0.5, marginLeft: 10, marginVertical: 5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Ongkis kirim</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Ongkos kirim</Text>
</View> </View>
<View style={{ flex: 0.5, marginVertical: 5, alignItems: 'flex-end', marginRight: 10 }}> <View style={{ flex: 0.5, marginVertical: 5, alignItems: 'flex-end', marginRight: 10 }}>
{ {
...@@ -414,6 +508,27 @@ class OrderDetail extends React.Component { ...@@ -414,6 +508,27 @@ class OrderDetail extends React.Component {
<NumberFormat decimalScale={0} value={this.state.detail_trans.point_reduce} renderText={value => <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <NumberFormat decimalScale={0} value={this.state.detail_trans.point_reduce} renderText={value => <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
{
this.state.trans_status < 4 && this.state.trans_status !== -1 ? (<TouchableOpacity onPress={() => { Linking.openURL('whatsapp://send?text=say something&phone=' + this.state.detail_trans.call_center_phone) }}>
<View style={styles.button3}>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<View style={{ marginRight: 10 }}>
<Icon
name='whatsapp'
type='font-awesome'
color='green'
size={24}
/>
</View>
<View style={{ paddingRight: 25 }}>
<Text style={{ color: 'white', fontSize: 16, fontFamily: 'Gotham-Black' }}>Bantuan</Text>
</View>
</View>
</View>
</TouchableOpacity>) : (null)
}
{ {
this.state.trans_status == 0 ? (<TouchableOpacity onPress={() => this.handleCancel()}> this.state.trans_status == 0 ? (<TouchableOpacity onPress={() => this.handleCancel()}>
<View style={styles.button}> <View style={styles.button}>
...@@ -485,6 +600,16 @@ const styles = StyleSheet.create({ ...@@ -485,6 +600,16 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
}, },
button3: {
backgroundColor: '#CFB368',
height: 40,
marginTop: 25,
marginHorizontal: 20,
borderRadius: 10,
paddingVertical: 5,
alignItems: 'center',
justifyContent: 'center'
},
centerViewModal: { centerViewModal: {
flex: 1, flex: 1,
justifyContent: "center", justifyContent: "center",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment