Skip to content

N
new_excelso
Commit e3758eea authored by Trisno's avatar Trisno
Browse files
Options

tambah pemisah ribuan di trans detail

parent a3d9dec7
Hide whitespace changes
Inline Side-by-side
Showing with 67 additions and 53 deletions
view/OrderDetail.js
View file @ e3758eea
...@@ -5,6 +5,7 @@ import { connect } from 'react-redux'; ...@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
import Axios from 'axios'; import Axios from 'axios';
import session from '../function/session'; import session from '../function/session';
import moment from 'moment' import moment from 'moment'
import NumberFormat from 'react-number-format';
import { FontAwesome } from '@expo/vector-icons'; import { FontAwesome } from '@expo/vector-icons';
class OrderDetail extends React.Component { class OrderDetail extends React.Component {
...@@ -83,24 +84,24 @@ class OrderDetail extends React.Component { ...@@ -83,24 +84,24 @@ class OrderDetail extends React.Component {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
<Text style={{ fontSize: 16, fontFamily: 'Gotham-Light', textAlign: 'center' }}>#{this.state.numberId}</Text> <Text style={{ fontSize: 16, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>#{this.state.numberId}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center' }}>{moment(this.state.detail_trans.trans_time).format('DD MMMM YYYY HH:mm:ss')}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>{moment(this.state.detail_trans.trans_time).format('DD MMMM YYYY HH:mm:ss')}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center' }}>{this.state.detail_trans.trans_status_display}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>{this.state.detail_trans.trans_status_display}</Text>
</View> </View>
<ScrollView style={styles.body}> <ScrollView style={styles.body}>
<View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, margin: 10, paddingBottom: 30, padding: 10 }}> <View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, borderColor: 'grey', margin: 10, paddingBottom: 30, padding: 10 }}>
<View style={{ flex: 0.1, justifyContent: 'center' }}> <View style={{ flex: 0.1, justifyContent: 'center' }}>
<FontAwesome name="map-marker" size={24} color="red" /> <FontAwesome name="map-marker" size={24} color="red" />
</View> </View>
{ {
this.state.detail_trans.trans_type_display == 'Pick Up' ? ( this.state.detail_trans.trans_type_display == 'Pick Up' ? (
<View style={{ flex: 0.6, justifyContent: 'center' }}> <View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.outlet}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.outlet}</Text>
</View> </View>
) : ( ) : (
<View style={{ flex: 0.6, justifyContent: 'center' }}> <View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.recipient_address}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.recipient_address}</Text>
</View> </View>
) )
...@@ -108,18 +109,18 @@ class OrderDetail extends React.Component { ...@@ -108,18 +109,18 @@ class OrderDetail extends React.Component {
{ {
this.state.detail_trans.trans_type_display == 'Pick Up' ? ( this.state.detail_trans.trans_type_display == 'Pick Up' ? (
<View style={{ flex: 0.3, justifyContent: 'center' }}> <View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>PICKUP</Text> <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>PICKUP</Text>
</View> </View>
) : ( ) : (
<View style={{ flex: 0.3, justifyContent: 'center' }}> <View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>DELIVERY</Text> <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>DELIVERY</Text>
</View> </View>
) )
} }
</View> </View>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ margin: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>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) => {
...@@ -128,16 +129,18 @@ class OrderDetail extends React.Component { ...@@ -128,16 +129,18 @@ class OrderDetail extends React.Component {
<View style={{ margin: 10 }} key={index} > <View style={{ margin: 10 }} key={index} >
<View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-around' }}> <View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={{ flex: 0.3, alignItems: 'center' }}> <View style={{ flex: 0.3, alignItems: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_quantity}</Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_quantity}</Text> */}
<NumberFormat decimalScale={0} value={item.item_quantity} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
<View style={{ flex: 0.1, alignItems: 'flex-start' }}> <View style={{ flex: 0.1, alignItems: 'flex-start' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>x</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>x</Text>
</View> </View>
<View style={{ flex: 0.3, alignItems: 'baseline' }}> <View style={{ flex: 0.3, alignItems: 'baseline' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_name} </Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{item.item_name} </Text>
</View> </View>
<View style={{ flex: 0.3, alignItems: 'flex-end' }}> <View style={{ flex: 0.3, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_quantity * item.item_price} </Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_quantity * item.item_price} </Text> */}
<NumberFormat decimalScale={0} value={item.item_quantity * item.item_price} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
</View> </View>
...@@ -166,31 +169,34 @@ class OrderDetail extends React.Component { ...@@ -166,31 +169,34 @@ class OrderDetail extends React.Component {
</> </>
) )
} */} } */}
<View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10 }}> <View style={{ borderTopWidth: 1, borderColor: 'grey', margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Payment</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Payment</Text>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ margin: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Balance Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Balance Used</Text>
</View> </View>
<View style={{ margin: 10, paddingRight: 5 }}> <View style={{ margin: 10, paddingRight: 5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.detail_trans.trans_paid}</Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.detail_trans.trans_paid}</Text> */}
<NumberFormat decimalScale={0} value={this.state.detail_trans.trans_paid} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ margin: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Point Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Point Used</Text>
</View> </View>
<View style={{ margin: 10, paddingRight: 5 }}> <View style={{ margin: 10, paddingRight: 5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.detail_trans.point_booked}</Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.detail_trans.point_booked}</Text> */}
<NumberFormat decimalScale={0} value={this.state.detail_trans.point_booked} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
<View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}> <View style={{ borderTopWidth: 1, borderColor: 'grey', margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Harga</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Harga</Text>
</View> </View>
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>{this.state.detail_trans.trans_subtotal}</Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>{this.state.detail_trans.trans_subtotal}</Text> */}
<NumberFormat decimalScale={0} value={this.state.detail_trans.trans_subtotal} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', textAlign: 'right' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
{ {
...@@ -199,10 +205,11 @@ class OrderDetail extends React.Component { ...@@ -199,10 +205,11 @@ class OrderDetail extends React.Component {
) : ( ) : (
<View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}> <View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Voucher</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Voucher</Text>
</View> </View>
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>- {this.state.detail_trans.trans_discount}</Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>- {this.state.detail_trans.trans_discount}</Text> */}
<NumberFormat decimalScale={0} value={this.state.detail_trans.trans_discount} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', textAlign: 'right' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
) )
...@@ -223,10 +230,11 @@ class OrderDetail extends React.Component { ...@@ -223,10 +230,11 @@ class OrderDetail extends React.Component {
} */} } */}
<View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}> <View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text> <Text style={{ fontSize: 15, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text>
</View> </View>
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{this.state.detail_trans.trans_total}</Text> {/* <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{this.state.detail_trans.trans_total}</Text> */}
<NumberFormat decimalScale={0} value={this.state.detail_trans.trans_total} renderText={value => <Text style={{ fontSize: 15, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
...@@ -273,6 +281,7 @@ const styles = StyleSheet.create({ ...@@ -273,6 +281,7 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
flex: 0.2, flex: 0.2,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: 'grey',
margin: 10 margin: 10
}, },
......
view/TransactionDetail.js
View file @ e3758eea
...@@ -4,6 +4,7 @@ import { Card } from 'react-native-shadow-cards' ...@@ -4,6 +4,7 @@ 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'
import moment from 'moment' import moment from 'moment'
import NumberFormat from 'react-number-format';
import { FontAwesome } from '@expo/vector-icons'; import { FontAwesome } from '@expo/vector-icons';
class TransactionDetail extends React.Component { class TransactionDetail extends React.Component {
...@@ -64,24 +65,24 @@ class TransactionDetail extends React.Component { ...@@ -64,24 +65,24 @@ class TransactionDetail extends React.Component {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
<Text style={{ fontSize: 16, fontFamily: 'Gotham-Light', textAlign: 'center' }}>#{this.state.numberId}</Text> <Text style={{ fontSize: 16, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>#{this.state.numberId}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center' }}>{moment(this.state.detail_trans.trans_time).format('DD MMMM YYYY HH:mm:ss')}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>{moment(this.state.detail_trans.trans_time).format('DD MMMM YYYY HH:mm:ss')}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center' }}>{this.state.detail_trans.trans_status_display}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>{this.state.detail_trans.trans_status_display}</Text>
</View> </View>
<ScrollView style={styles.body}> <ScrollView style={styles.body}>
<View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, margin: 10, paddingBottom: 30, padding: 10 }}> <View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, borderColor: 'grey', margin: 10, paddingBottom: 30, padding: 10 }}>
<View style={{ flex: 0.1, justifyContent: 'center' }}> <View style={{ flex: 0.1, justifyContent: 'center' }}>
<FontAwesome name="map-marker" size={24} color="red" /> <FontAwesome name="map-marker" size={24} color="red" />
</View> </View>
{ {
this.state.detail_trans.trans_type_display == 'Pick Up' ? ( this.state.detail_trans.trans_type_display == 'Pick Up' ? (
<View style={{ flex: 0.6, justifyContent: 'center' }}> <View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.outlet}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.outlet}</Text>
</View> </View>
) : ( ) : (
<View style={{ flex: 0.6, justifyContent: 'center' }}> <View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.recipient_address}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.state.recipient_address}</Text>
</View> </View>
) )
...@@ -89,18 +90,18 @@ class TransactionDetail extends React.Component { ...@@ -89,18 +90,18 @@ class TransactionDetail extends React.Component {
{ {
this.state.detail_trans.trans_type_display == 'Pick Up' ? ( this.state.detail_trans.trans_type_display == 'Pick Up' ? (
<View style={{ flex: 0.3, justifyContent: 'center' }}> <View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>PICKUP</Text> <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>PICKUP</Text>
</View> </View>
) : ( ) : (
<View style={{ flex: 0.3, justifyContent: 'center' }}> <View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>DELIVERY</Text> <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>DELIVERY</Text>
</View> </View>
) )
} }
</View> </View>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ margin: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>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) => {
...@@ -109,16 +110,18 @@ class TransactionDetail extends React.Component { ...@@ -109,16 +110,18 @@ class TransactionDetail extends React.Component {
<View style={{ margin: 10 }} key={index} > <View style={{ margin: 10 }} key={index} >
<View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-around' }}> <View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={{ flex: 0.3, alignItems: 'center' }}> <View style={{ flex: 0.3, alignItems: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_quantity}</Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_quantity}</Text> */}
<NumberFormat decimalScale={0} value={item.item_quantity} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
<View style={{ flex: 0.1, alignItems: 'flex-start' }}> <View style={{ flex: 0.1, alignItems: 'flex-start' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>x</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>x</Text>
</View> </View>
<View style={{ flex: 0.3, alignItems: 'baseline' }}> <View style={{ flex: 0.3, alignItems: 'baseline' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_name} </Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{item.item_name} </Text>
</View> </View>
<View style={{ flex: 0.3, alignItems: 'flex-end' }}> <View style={{ flex: 0.3, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_quantity * item.item_price} </Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.item_quantity * item.item_price} </Text> */}
<NumberFormat decimalScale={0} value={item.item_quantity * item.item_price} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
</View> </View>
...@@ -147,31 +150,32 @@ class TransactionDetail extends React.Component { ...@@ -147,31 +150,32 @@ class TransactionDetail extends React.Component {
</> </>
) )
} */} } */}
<View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10 }}> <View style={{ borderTopWidth: 1, borderColor: 'grey', margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Payment</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Payment</Text>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ margin: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Balance Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Balance Used</Text>
</View> </View>
<View style={{ margin: 10, paddingRight: 5 }}> <View style={{ margin: 10, paddingRight: 5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.detail_trans.trans_paid}</Text> {/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.detail_trans.trans_paid}</Text> */}
<NumberFormat decimalScale={0} value={this.state.detail_trans.trans_paid} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ margin: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Point Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Point Used</Text>
</View> </View>
<View style={{ margin: 10, paddingRight: 5 }}> <View style={{ margin: 10, paddingRight: 5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.detail_trans.point_booked}</Text> <NumberFormat decimalScale={0} value={this.state.detail_trans.point_booked} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
<View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}> <View style={{ borderTopWidth: 1, borderColor: 'grey', margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Harga</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Harga</Text>
</View> </View>
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>{this.state.detail_trans.trans_subtotal}</Text> <NumberFormat decimalScale={0} value={this.state.detail_trans.trans_subtotal} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', textAlign: 'right' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
{ {
...@@ -180,10 +184,10 @@ class TransactionDetail extends React.Component { ...@@ -180,10 +184,10 @@ class TransactionDetail extends React.Component {
) : ( ) : (
<View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}> <View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Voucher</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Voucher</Text>
</View> </View>
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>- {this.state.detail_trans.trans_discount}</Text> <NumberFormat decimalScale={0} value={this.state.detail_trans.trans_discount} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', textAlign: 'right' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
) )
...@@ -204,10 +208,10 @@ class TransactionDetail extends React.Component { ...@@ -204,10 +208,10 @@ class TransactionDetail extends React.Component {
} */} } */}
<View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}> <View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text> <Text style={{ fontSize: 15, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text>
</View> </View>
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{this.state.detail_trans.trans_total}</Text> <NumberFormat decimalScale={0} value={this.state.detail_trans.trans_total} renderText={value => <Text style={{ fontSize: 15, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
...@@ -284,7 +288,8 @@ const styles = StyleSheet.create({ ...@@ -284,7 +288,8 @@ const styles = StyleSheet.create({
header: { header: {
justifyContent: 'center', justifyContent: 'center',
flex: 0.2, flex: 0.2,
borderBottomWidth:1 borderBottomWidth: 1,
borderColor: 'grey'
}, },
body: { body: {
......
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