Skip to content

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

update design order confirmation

parent 15e98619
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 52 deletions
view/Auth.js
View file @ 282acae7
......@@ -500,7 +500,7 @@ class Auth extends React.Component {
{/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}
<Stack.Screen name="News Detail" component={NewsDetail} options={{ headerShown: false }} />
<Stack.Screen name="Confirm Your Order" component={MenuConfirmation}
<Stack.Screen name="CONFIRM YOUR ORDER" component={MenuConfirmation}
options={{
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
......@@ -509,9 +509,9 @@ class Auth extends React.Component {
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 18,
fontSize: 20,
},
title: 'Confirm Your Order'
title: 'CONFIRM YOUR ORDER'
}} />
<Stack.Screen name="Date Time" component={DateTime} />
<Stack.Screen name="New Register" component={NewRegister}
......
view/MenuConfirmation.js
View file @ 282acae7
......@@ -7,6 +7,7 @@ import Spinner from 'react-native-loading-spinner-overlay';
import session from '../function/session';
import moment from 'moment'
import { FontAwesome } from '@expo/vector-icons';
import NumberFormat from 'react-number-format';
class MenuConfirmation extends React.Component {
constructor(props) {
super(props)
......@@ -214,21 +215,21 @@ class MenuConfirmation extends React.Component {
textContent={'Sedang Proses...'}
textStyle={styles.spinnerTextStyle}
/>
<View style={{ margin: 10, padding: 20, borderBottomWidth: 1 }}>
{/* <View style={{ margin: 10, padding: 20, borderBottomWidth: 1 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'center' }}>{moment().utcOffset('+07:00').format('DD MMMM YYYY HH:mm:ss')}</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, margin: 10, paddingBottom: 30, padding: 10 }}>
</View> */}
<View style={{ flex: 1, flexDirection: 'row', borderBottomWidth: 1, borderColor:'#838383', margin: 10, paddingBottom: 30, padding: 10 }}>
<View style={{ flex: 0.1, justifyContent: 'center' }}>
<FontAwesome name="map-marker" size={24} color="red" />
</View>
{
this.props.type_pickup == true ? (
<View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.name_outlet}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#838383' }}>{this.props.name_outlet}</Text>
</View>
) : (
<View style={{ flex: 0.6, justifyContent: 'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.address}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#838383' }}>{this.props.address}</Text>
</View>
)
......@@ -236,18 +237,18 @@ class MenuConfirmation extends React.Component {
{
this.props.type_pickup == true ? (
<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: '#838383' }}>PICKUP</Text>
</View>
) : (
<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: '#838383' }}>DELIVERY</Text>
</View>
)
}
</View>
<View style={{ marginHorizontal: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Pesanan</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>PESANAN</Text>
</View>
{
this.props.order_item.map((item, index) => {
......@@ -255,20 +256,21 @@ class MenuConfirmation extends React.Component {
return (
<View style={{ margin: 0 }} key={index} >
<View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={{ flex: 0.3, alignItems: 'center'}}>
<Image source={{ uri: item.image }} style={{ height: 50, width: 50, borderRadius: 5}}></Image>
<View style={{ flex: 0.1, alignItems: 'center', justifyContent:'center', alignItems:'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>{item.quantity}</Text>
</View>
<View style={{ flex: 0.1, alignItems: 'center', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity}</Text>
<View style={{ flex: 0.2, alignItems: 'flex-end'}}>
<Image source={{ uri: item.image }} style={{ height: 50, width: 50, borderRadius: 5}}></Image>
</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' }}>x</Text>
</View> */}
<View style={{ flex: 0.4, alignItems: 'baseline', justifyContent:'center', alignItems:'center'}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>{item.name} </Text>
</View>
<View style={{ flex: 0.3, alignItems: 'baseline', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.name} </Text>
</View>
<View style={{ flex: 0.3, alignItems: 'flex-end', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity * item.price} </Text>
<View style={{ flex: 0.3, alignItems: 'flex-end', justifyContent:'center'}}>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>{item.quantity * item.price} </Text> */}
<NumberFormat decimalScale={0} value={item.quantity * item.price} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
</View>
......@@ -280,16 +282,16 @@ class MenuConfirmation extends React.Component {
null
) : (
<>
<View style={{ borderTopWidth: 1, margin: 10, padding: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Voucher</Text>
<View style={{ borderTopWidth: 1, borderColor:'#838383', margin: 10, padding: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>VOUCHER</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}>
<View style={{ margin: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.voucher.reward.title}</Text>
<View style={{ flex:1, flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -20 }}>
<View style={{ flex:0.8, margin: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>{this.props.voucher.reward.title}</Text>
</View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: this.props.voucher.id })}>
<View style={{ margin: 10, paddingRight: 5 }}>
<View style={{ flex:0.2, marginVertical:10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>View Detail</Text>
</View>
</TouchableOpacity>
......@@ -297,43 +299,47 @@ class MenuConfirmation extends React.Component {
</>
)
}
<View style={{ borderTopWidth: 1, marginHorizontal: 10, paddingLeft: 10, padding: 10}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Payment</Text>
<View style={{ borderTopWidth: 1, borderColor:'#838383', marginHorizontal: 10, paddingLeft: 10, padding: 10}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>PAYMENT</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between',marginTop: -10 }}>
<View style={{ flex:0.5, margin: 10, paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Balance Used</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>Balance Used</Text>
</View>
<View style={{ flex:0.5, margin: 10, alignItems:'flex-end', paddingRight:5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.balanceUsed}</Text>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.balanceUsed}</Text> */}
<NumberFormat decimalScale={0} value={this.props.route.params.balanceUsed} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#838383' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between',marginTop: -10 }}>
<View style={{ flex:0.5, margin: 10, paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Point Used</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>Point Used</Text>
</View>
<View style={{flex:0.5, margin: 10, alignItems:'flex-end', paddingRight:5}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.pointused}</Text>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.pointused}</Text> */}
<NumberFormat decimalScale={0} value={this.props.route.params.pointused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#838383' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
<View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 10, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1}}>
<View style={{ borderTopWidth: 1, borderColor:'#838383', margin: 10, paddingLeft: 10, padding: 10, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1}}>
<View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Harga</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>Harga</Text>
</View>
<View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>{total}</Text>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right', color:'#838383' }}>{total}</Text> */}
<NumberFormat decimalScale={0} value={total} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right', color:'#838383' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
{
this.props.value_voucher == '' ? (
null
) : (
<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: 10, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1}}>
<View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Voucher</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>Voucher</Text>
</View>
<View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>- {this.props.voucher.reward.value}</Text>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right', color:'#838383' }}>- {this.props.voucher.reward.value}</Text> */}
<NumberFormat decimalScale={0} value={this.props.voucher.reward.value} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right', color:'#838383' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
)
......@@ -342,28 +348,31 @@ class MenuConfirmation extends React.Component {
this.props.type_pickup == true ? (
null
) : (
<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: 10, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1}}>
<View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Ongkos Kirim</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color:'#838383' }}>Ongkos Kirim</Text>
</View>
<View style={{ flex: 0.4, marginRight: -5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>{this.props.grabamount}</Text>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right' }}>{this.props.grabamount}</Text> */}
<NumberFormat decimalScale={0} value={this.props.grabamount} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', textAlign: 'right', color:'#838383' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
)
}
<View style={{ marginHorizontal:7, paddingHorizontal:10, flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
<View style={{ marginVertical:10, marginHorizontal:7, paddingHorizontal:10, flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
<View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text>
</View>
{
this.props.value_voucher == '' ? (
<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 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>
)
}
......@@ -447,7 +456,7 @@ class MenuConfirmation extends React.Component {
</View> */}
<TouchableOpacity onPress={() => this.setOrder(this.props.type_pickup)}>
<View style={styles.button}>
<Text style={{ color: 'white', fontSize: 22, fontFamily: 'Gotham-Black' }}>Proses Pesanan</Text>
<Text style={{ color: 'white', fontSize: 16, fontFamily: 'Gotham-Black' }}>Proses Pesanan</Text>
</View>
</TouchableOpacity>
<View style={{ height: 30 }} />
......@@ -480,11 +489,11 @@ const styles = StyleSheet.create({
button: {
backgroundColor: '#CFB368',
marginTop: 25,
marginHorizontal: 30,
marginHorizontal: 40,
borderRadius: 10,
paddingVertical: 5,
height:40,
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
},
})
......
view/ShoppingCart.js
View file @ 282acae7
......@@ -393,7 +393,7 @@ class ShoppingCart extends React.Component {
} else if (this.state.checkedBalance == false && this.state.checkedPoint == false && this.state.checkedBalancePoint == false) {
Alert.alert('Error', 'Please insert payment methods')
} else {
this.props.navigation.navigate('Confirm Your Order', { balanceUsed: this.state.balanceused, pointused: this.state.pointsused })
this.props.navigation.navigate('CONFIRM YOUR ORDER', { balanceUsed: this.state.balanceused, pointused: this.state.pointsused })
}
}
......
view/WelcomeLog.js
View file @ 282acae7
......@@ -47,8 +47,8 @@ export default class WelcomeLog extends React.Component {
},
],
})}>
<View style={{ height: 50, borderRadius: 20, backgroundColor: '#CFB368' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'black', fontSize: 20, textAlign: 'center', margin: 15 }}>NEXT</Text>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center', margin:11}}>NEXT</Text>
</View>
</TouchableOpacity>
</View>
......
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