Skip to content

N
new_excelso
Commit 31c3d6f6 authored by Wahyu Adjie Prasetyo's avatar Wahyu Adjie Prasetyo
Browse files
Options

ss

parent 58168b2a
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 50 deletions
view/MenuConfirmation.js
View file @ 31c3d6f6
...@@ -6,7 +6,6 @@ import ActionType from '../redux/globalActionType'; ...@@ -6,7 +6,6 @@ import ActionType from '../redux/globalActionType';
import Spinner from 'react-native-loading-spinner-overlay'; import Spinner from 'react-native-loading-spinner-overlay';
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 MenuConfirmation extends React.Component { class MenuConfirmation extends React.Component {
constructor(props) { constructor(props) {
...@@ -115,7 +114,7 @@ class MenuConfirmation extends React.Component { ...@@ -115,7 +114,7 @@ class MenuConfirmation extends React.Component {
}).catch(error => { }).catch(error => {
console.log(" INI ERROR : " + error) console.log(" INI ERROR : " + error)
Alert.alert('error', error.response.msg); Alert.alert(response.msg);
this.setState({ this.setState({
spinner: false, spinner: false,
}) })
...@@ -213,21 +212,21 @@ class MenuConfirmation extends React.Component { ...@@ -213,21 +212,21 @@ class MenuConfirmation extends React.Component {
textContent={'Sedang Proses...'} textContent={'Sedang Proses...'}
textStyle={styles.spinnerTextStyle} textStyle={styles.spinnerTextStyle}
/> />
<View style={{ margin: 10, padding: 20, borderBottomWidth: 1, borderColor: 'grey' }}> <View style={{ margin: 10, padding: 20, borderBottomWidth: 1 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center', color: 'grey' }}>{moment().utcOffset('+07:00').format('DD MMMM YYYY HH:mm:ss')}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center' }}>{moment().utcOffset('+07:00').format('DD MMMM YYYY HH:mm:ss')}</Text>
</View> </View>
<View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, borderColor: 'grey', margin: 10, paddingBottom: 30, padding: 10 }}> <View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, 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.props.type_pickup == true ? ( this.props.type_pickup == true ? (
<View style={{ flex: 0.6, justifyContent: 'center' }}> <View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.props.name_outlet}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.name_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', color: 'grey' }}>{this.props.address}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.address}</Text>
</View> </View>
) )
...@@ -235,18 +234,18 @@ class MenuConfirmation extends React.Component { ...@@ -235,18 +234,18 @@ class MenuConfirmation extends React.Component {
{ {
this.props.type_pickup == true ? ( this.props.type_pickup == true ? (
<View style={{ flex: 0.3, justifyContent: 'center' }}> <View style={{ flex: 0.3, justifyContent: 'center' }}>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>PICKUP</Text> <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>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', color: 'grey' }}>DELIVERY</Text> <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>DELIVERY</Text>
</View> </View>
) )
} }
</View> </View>
<View style={{ marginHorizontal: 10, paddingLeft: 10 }}> <View style={{ marginHorizontal: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Pesanan</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Pesanan</Text>
</View> </View>
{ {
this.props.order_item.map((item, index) => { this.props.order_item.map((item, index) => {
...@@ -254,21 +253,20 @@ class MenuConfirmation extends React.Component { ...@@ -254,21 +253,20 @@ class MenuConfirmation extends React.Component {
return ( return (
<View style={{ margin: 0 }} key={index} > <View style={{ margin: 0 }} 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'}}>
<Image source={{ uri: item.image }} style={{ height: 50, width: 50, borderRadius: 5 }}></Image> <Image source={{ uri: item.image }} style={{ height: 50, width: 50, borderRadius: 5}}></Image>
</View> </View>
<View style={{ flex: 0.1, alignItems: 'center', justifyContent: 'center', }}> <View style={{ flex: 0.1, alignItems: 'center', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{item.quantity}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity}</Text>
</View> </View>
<View style={{ flex: 0.1, alignItems: 'flex-start', justifyContent: 'center', }}> <View style={{ flex: 0.1, alignItems: 'flex-start', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>x</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>x</Text>
</View> </View>
<View style={{ flex: 0.3, alignItems: 'baseline', justifyContent: 'center', }}> <View style={{ flex: 0.3, alignItems: 'baseline', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{item.name} </Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.name} </Text>
</View> </View>
<View style={{ flex: 0.3, alignItems: 'flex-end', justifyContent: 'center', }}> <View style={{ flex: 0.3, alignItems: 'flex-end', justifyContent:'center', }}>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity * item.price} </Text> */} <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity * item.price} </Text>
<NumberFormat decimalScale={0} value={item.quantity * 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>
...@@ -280,13 +278,13 @@ class MenuConfirmation extends React.Component { ...@@ -280,13 +278,13 @@ class MenuConfirmation extends React.Component {
null null
) : ( ) : (
<> <>
<View style={{ borderTopWidth: 1, borderColor: 'grey', margin: 10, padding: 10 }}> <View style={{ borderTopWidth: 1, margin: 10, padding: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Voucher</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Voucher</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', color: 'grey' }}>{this.props.voucher.reward.title}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.voucher.reward.title}</Text>
</View> </View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: this.props.voucher.id })}> <TouchableOpacity onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: this.props.voucher.id })}>
<View style={{ margin: 10, paddingRight: 5 }}> <View style={{ margin: 10, paddingRight: 5 }}>
...@@ -297,32 +295,31 @@ class MenuConfirmation extends React.Component { ...@@ -297,32 +295,31 @@ class MenuConfirmation extends React.Component {
</> </>
) )
} }
<View style={{ borderTopWidth: 1, borderColor: 'grey', marginHorizontal: 10, paddingLeft: 10, padding: 10 }}> <View style={{ borderTopWidth: 1, marginHorizontal: 10, paddingLeft: 10, padding: 10}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Payment</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Payment</Text>
</View> </View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: -10 }}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between',marginTop: -10 }}>
<View style={{ flex: 0.5, margin: 10, paddingLeft: 20 }}> <View style={{ flex:0.5, margin: 10, paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Balance Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Balance Used</Text>
</View> </View>
<View style={{ flex: 0.5, margin: 10, alignItems: 'flex-end', paddingRight: 5 }}> <View style={{ flex:0.5, margin: 10, alignItems:'flex-end', paddingRight:5 }}>
<NumberFormat decimalScale={0} value={this.props.route.params.balanceUsed} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.balanceUsed}</Text>
</View> </View>
</View> </View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: -10 }}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between',marginTop: -10 }}>
<View style={{ flex: 0.5, margin: 10, paddingLeft: 20 }}> <View style={{ flex:0.5, margin: 10, paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Point Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Point Used</Text>
</View> </View>
<View style={{ flex: 0.5, margin: 10, alignItems: 'flex-end', paddingRight: 5 }}> <View style={{flex:0.5, margin: 10, alignItems:'flex-end', paddingRight:5}}>
<NumberFormat decimalScale={0} value={this.props.route.params.pointused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.pointused}</Text>
</View> </View>
</View> </View>
<View style={{ borderTopWidth: 1, borderColor: 'grey', margin: 10, paddingLeft: 10, padding: 10, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}> <View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 10, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1}}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Harga</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>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', color:'grey', textAlign: 'right' }}>{total}</Text> */} <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>{total}</Text>
<NumberFormat decimalScale={0} value={total} 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>
{ {
...@@ -331,10 +328,10 @@ class MenuConfirmation extends React.Component { ...@@ -331,10 +328,10 @@ class MenuConfirmation 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', color: 'grey' }}>Voucher</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Voucher</Text>
</View> </View>
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5 }}>
<NumberFormat decimalScale={0} value={this.props.voucher.reward.value} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', textAlign: 'right' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>- {this.props.voucher.reward.value}</Text>
</View> </View>
</View> </View>
) )
...@@ -345,33 +342,107 @@ class MenuConfirmation extends React.Component { ...@@ -345,33 +342,107 @@ class MenuConfirmation 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', color: 'grey' }}>Ongkos Kirim</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Ongkos Kirim</Text>
</View> </View>
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5 }}>
<NumberFormat decimalScale={0} value={this.props.grabamount} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey', textAlign: 'right' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>{this.props.grabamount}</Text>
</View> </View>
</View> </View>
) )
} }
<View style={{ marginHorizontal: 7, paddingHorizontal: 10, flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}> <View style={{ marginHorizontal:7, paddingHorizontal:10, flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text> <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text>
</View> </View>
{ {
this.props.value_voucher == '' ? ( this.props.value_voucher == '' ? (
<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.props.order_total + this.props.grabamount}</Text> */} <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{this.props.order_total + this.props.grabamount}</Text>
<NumberFormat decimalScale={0} value={this.props.order_total + this.props.grabamount} renderText={value => <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</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' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)}</Text> */} <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)}</Text>
<NumberFormat decimalScale={0} value={Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)} 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>
{/* <View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between' }}>
<View style={{ margin: 10 }}>
<Text>Voucher Discount</Text>
</View>
<View style={{ margin: 10 }}>
{
this.props.value_voucher == '' ? (
<Text>0</Text>
) : (
<Text>{this.props.voucher.reward.value}</Text>
)
}
</View>
</View>
<View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between' }}>
{this.props.type_pickup == true ? (
null
) : (
<View>
<View style={{ margin: 10 }}>
<Text>Delivery Charge</Text>
</View>
<View style={{ margin: 10 }}>
<Text>{this.props.grabamount}</Text>
</View>
</View>
)}
</View>
<View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between', borderTopWidth: 1 }}>
<View style={{ margin: 10 }}>
<Text>Total</Text>
</View>
{this.props.type_pickup == true ? (
<View style={{ margin: 10 }}>
{
this.props.value_voucher == '' ? (
<Text>{this.props.order_total}</Text>
) : (
<Text>{Math.max(0, this.props.order_total - this.props.voucher.reward.value)}</Text>
)
}
</View>
) : (
<View style={{ margin: 10 }}>
{
this.props.value_voucher == '' ? (
<Text>{this.props.order_total + this.props.grabamount + this.state.diskon}</Text>
) : (
<Text>{Math.max(this.props.order_total + this.props.grabamount - this.props.voucher.reward.value)}</Text>
)
}
</View>
)}
</View>
{this.props.type_pickup == true ? (
null
) : (
<View style={{ flexDirection: 'row', margin: 10, justifyContent: 'space-between' }}>
<View style={{ margin: 10 }}>
<Text>Delivery to</Text>
</View>
<View style={{ margin: 10 }}>
<Text>{this.props.address}</Text>
</View>
</View>
)} */}
{/* <View style={{ margin: 10 }}>
<Button title='order' onPress={() => this.setOrder(this.props.type_pickup)} />
</View> */}
<TouchableOpacity onPress={() => this.setOrder(this.props.type_pickup)}> <TouchableOpacity onPress={() => this.setOrder(this.props.type_pickup)}>
<View style={styles.button}> <View style={styles.button}>
<Text style={{ color: 'white', fontSize: 22, fontFamily: 'Gotham-Black' }}>Proses Pesanan</Text> <Text style={{ color: 'white', fontSize: 22, fontFamily: 'Gotham-Black' }}>Proses Pesanan</Text>
......
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