Commit e0639065 authored by Wahyu Adjie Prasetyo's avatar Wahyu Adjie Prasetyo
parents c16a11f0 0885de3e
......@@ -30,29 +30,35 @@ class ItemShoping extends React.Component {
// console.log(this.props)
return (
<View style={{ flex: 1, margin: 10 }} key={item.id}>
<View style={{ flex: 1 }} key={item.id}>
{/* <Text style={{ fontSize: 20, color: '#c9af6d' }}>{item.name}</Text> */}
<View style={{ flexDirection: 'row' }}>
<View >
<Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
<View style={{ flex: 1, flexDirection: 'row', height: 100, marginVertical:10}}>
<View style={{ flex: 1, height: 100 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', { nameMenu: item.name, desc: item.description, image: item.image })}>
<Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 10, }}></Image>
</TouchableOpacity>
</View>
<View >
<Text style={{ fontSize: 15, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color: 'grey' }}>{item.name}</Text>
<NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 12, margin: 5, marginRight: 10, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.shadowEdit}>
<Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5}}></Image>
</View>
<View style={{ flex: 2, height: 150 }}>
<View style={{ marginLeft: 5, marginRight: 5 }}>
<Text style={{ fontSize: 14, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color:'#838383' }}>{item.name}</Text>
<NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 12, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color:'#838383' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
<View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.handleAddDescription()}>
<View style={styles.shadowEdit}>
<Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5, marginRight: 5 }}></Image>
</View>
</TouchableOpacity>
<View style={styles.shadowAdd}>
<TouchableOpacity onPress={() => this.props.handleMin()}>
<Text style={{ fontSize: 20, margin: 2, color: '#CFB368' }}> - </Text>
<TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleMin()}>
<Text style={{ fontSize: 25, alignSelf: 'center', fontFamily: 'Gotham-Light', color: '#CFB368' }}> - </Text>
</TouchableOpacity>
<TextInput
style={{ height: 25, padding: 2, textAlign: 'center', margin: 2 }}
style={{ padding: 2, textAlign: 'center', fontFamily: 'Gotham-Black', color:'#838383', fontSize: 14, marginRight: 5, marginLeft: 5 }}
keyboardType={'numeric'}
onChangeText={(quantity) => this.handleChangeQuantity(item, quantity)}>{item.quantity}</TextInput>
<TouchableOpacity onPress={() => this.props.handleAdd()}>
<Text style={{ fontSize: 20, margin: 2, color: '#CFB368' }}> + </Text>
<TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleAdd()}>
<Text style={{ fontSize: 25, alignSelf: 'center', fontFamily: 'Gotham-Light', color: '#CFB368' }}> + </Text>
</TouchableOpacity>
</View>
</View>
......@@ -66,7 +72,7 @@ class ItemShoping extends React.Component {
const styles = StyleSheet.create({
shadowEdit: {
height: 30,
width: 25,
width: 40,
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
......@@ -78,12 +84,11 @@ const styles = StyleSheet.create({
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
alignItems:'center'
marginTop: 5,
},
shadowAdd: {
height: 30,
width: 75,
width: 90,
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
......@@ -95,7 +100,7 @@ const styles = StyleSheet.create({
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
marginTop: 5,
flexDirection: 'row'
},
shadowMin: {
......
......@@ -443,12 +443,12 @@ class ShoppingCart extends React.Component {
{
this.props.type_pickup == true ? (
<View style={{margin: 5, padding:10}}>
<View style={{ margin: 5, padding: 10 }}>
<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Black', fontSize: 12, color: 'grey' }}>YOU WILL PICKUP YOUR ORDER AT</Text>
<Text style={{ textAlign: 'center', fontSize: 12, top: 5, fontFamily: 'Gotham-Light', color: 'grey' }}>Excelso {this.props.name_outlet}</Text>
</View>
) : (
<View style={{margin: 5, padding:10}}>
<View style={{ margin: 5, padding: 10 }}>
<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Black', fontSize: 12, color: 'grey' }}>OUR DRIVER WILL DELIVER YOUR ORDER TO</Text>
<Text style={{ textAlign: 'center', fontSize: 12, top: 5, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.props.address}</Text>
</View>
......@@ -482,11 +482,11 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>+ ADD VOUCHER</Text>
</TouchableOpacity>
) : (
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>{this.props.voucher.reward.title}</Text>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 0.5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: '#838383' }}>{this.props.voucher.reward.title}</Text>
</View>
<View>
<View style={{ flex: 0.5, alignItems: 'flex-end', marginRight: -5 }}>
<TouchableOpacity onPress={() => this.handleChangeVoucher()}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>Change Voucher</Text>
</TouchableOpacity>
......@@ -522,7 +522,7 @@ class ShoppingCart extends React.Component {
<View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO BALANCE</Text>
</View>
<View style={{ paddingRight: 10 }}>
<View>
<CheckBox
onClick={() => {
this.checkedSelection('balance')
......@@ -546,7 +546,7 @@ class ShoppingCart extends React.Component {
<View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>EXCELSO POINTS</Text>
</View>
<View style={{ paddingRight: 10 }}>
<View>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
</View>
</View>
......@@ -561,7 +561,7 @@ class ShoppingCart extends React.Component {
<View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO POINTS</Text>
</View>
<View style={{ paddingRight: 10 }}>
<View>
<CheckBox
onClick={() => {
this.checkedSelection('point')
......@@ -588,7 +588,7 @@ class ShoppingCart extends React.Component {
<View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO BALANCE + POINTS</Text>
</View>
<View style={{ paddingRight: 10 }}>
<View>
<CheckBox
onClick={() => {
this.checkedSelection('balancepoint')
......@@ -628,7 +628,7 @@ class ShoppingCart extends React.Component {
<NumberFormat decimalScale={0} value={this.state.kasproPoint} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1, borderColor:'grey' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1, borderColor: 'grey' }}>
<View style={{ marginTop: 5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Your Balance Used</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Your Points Used</Text>
......@@ -642,15 +642,15 @@ class ShoppingCart extends React.Component {
</View>
<View style={styles.paymentDetails}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color:'grey' }}>PAYMENT DETAILS</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>PAYMENT DETAILS</Text>
</View>
<View style={{ margin: 10 }}>
<View style={{ marginHorizontal: 10 }}>
{/* <Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Detail Pembayaran</Text> */}
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 15, }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Harga</Text>
</View>
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<View style={{ paddingRight: 30, alignItems: 'flex-end' }}>
<NumberFormat decimalScale={0} value={this.props.order_total} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
......@@ -658,16 +658,16 @@ class ShoppingCart extends React.Component {
null
) : (
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 10, }} >
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 5, }} >
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Ongkos Kirim</Text>
</View>
{this.props.order_item.length ? (
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<View style={{ paddingRight: 30, paddingTop: 5, alignItems: 'flex-end' }}>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.props.grabamount}</Text> */}
<NumberFormat decimalScale={0} value={this.props.grabamount} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
) : (<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
) : (<View style={{ paddingRight: 30, paddingTop: 5, alignItems: 'flex-end' }}>
<NumberFormat decimalScale={0} value={0} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>)}
</View>)}
......@@ -676,11 +676,11 @@ class ShoppingCart extends React.Component {
this.props.value_voucher == '' ? (
null
) : (
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 10, }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 5, }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diskon</Text>
</View>
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<View style={{ paddingRight: 30, paddingTop: 5, alignItems: 'flex-end' }}>
<NumberFormat decimalScale={0} value={this.props.voucher.reward.value} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
......@@ -688,22 +688,22 @@ class ShoppingCart extends React.Component {
)
}
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ marginTop: 15, paddingLeft: 20, paddingTop: 10 }}>
<Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black', }}>TOTAL</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{ marginTop: 10, paddingLeft: 20 }}>
<Text style={{ fontSize: 20, color: '#CFB368', fontFamily: 'Gotham-Black', }}>TOTAL</Text>
</View>
{this.props.type_pickup == true ? (
<View style={{ marginTop: 15, paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<View style={{ marginTop: 10, paddingRight: 30, alignItems: 'flex-end' }}>
{
this.props.value_voucher == '' ? (
<NumberFormat decimalScale={0} value={this.props.order_total} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
<NumberFormat decimalScale={0} value={this.props.order_total} renderText={value => <Text style={{ fontSize: 20, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
) : (
<NumberFormat decimalScale={0} value={Math.max(0, this.props.order_total - this.props.voucher.reward.value)} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
<NumberFormat decimalScale={0} value={Math.max(0, this.props.order_total - this.props.voucher.reward.value)} renderText={value => <Text style={{ fontSize: 20, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
)
}
</View>
) : (
<View style={{ marginTop: 15, paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<View style={{ marginTop: 10, paddingRight: 30, alignItems: 'flex-end' }}>
{/* {this.props.order_item.length ? (
<Text style={{ fontSize: 35, color: '#ccb46c' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)}</Text>
) : (
......@@ -713,9 +713,9 @@ class ShoppingCart extends React.Component {
<>
{
this.props.order_item.length ? (
<NumberFormat decimalScale={0} value={this.props.order_total + this.props.grabamount} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
<NumberFormat decimalScale={0} value={this.props.order_total + this.props.grabamount} renderText={value => <Text style={{ fontSize: 20, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
) : (
<NumberFormat decimalScale={0} value={0} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
<NumberFormat decimalScale={0} value={0} renderText={value => <Text style={{ fontSize: 20, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
)
}
</>
......@@ -737,13 +737,20 @@ class ShoppingCart extends React.Component {
</View>
{this.props.type_pickup == true ? (
null
<View style={{ flex: 1, flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, flex: 0.5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diambil di</Text>
</View>
<View style={{ paddingRight: 30, flex: 0.5, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368', textAlign: 'right' }}>{this.props.name_outlet}</Text>
</View>
</View>
) : (
<View style={{ flex: 1, flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 10, flex: 0.5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Tujuan</Text>
<View style={{ paddingLeft: 20, flex: 0.5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diantar ke</Text>
</View>
<View style={{ paddingRight: 30, paddingTop: 10, flex: 0.5, alignItems: 'flex-end' }}>
<View style={{ paddingRight: 30, flex: 0.5, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368', textAlign: 'right' }}>{this.props.address}</Text>
</View>
</View>
......@@ -754,7 +761,7 @@ class ShoppingCart extends React.Component {
{/* </View> */}
<TouchableOpacity onPress={() => this.checkOut()}>
<View style={styles.button}>
<Text style={{ color: 'white', fontSize: 22, fontFamily: 'Gotham-Black' }}>CHECKOUT</Text>
<Text style={{ color: 'white', fontSize: 16, fontFamily: 'Gotham-Black' }}>CHECKOUT</Text>
</View>
</TouchableOpacity>
</View>
......@@ -772,11 +779,11 @@ const styles = StyleSheet.create({
header: {
flex: 0.2,
margin: 10,
marginHorizontal: 10,
padding: 20,
borderBottomWidth: 1,
borderTopWidth: 1,
borderColor:'grey',
borderColor: 'grey',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
......@@ -794,17 +801,17 @@ const styles = StyleSheet.create({
padding: 20,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor:'grey'
borderColor: 'grey'
// backgroundColor: 'lightblue'
},
voucher: {
flex: 1,
margin: 10,
marginHorizontal: 10,
padding: 20,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor:'grey'
borderColor: 'grey'
// backgroundColor: 'lightblue'
},
......@@ -814,15 +821,15 @@ const styles = StyleSheet.create({
padding: 20,
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor:'grey'
borderColor: 'grey'
// backgroundColor: 'lightblue'
},
button: {
backgroundColor: '#CFB368',
marginTop: 25,
marginVertical: 25,
marginHorizontal: 30,
borderRadius: 10,
paddingVertical: 5,
height:40,
alignItems: '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