Skip to content

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

update design shopping cart

parent 99e83625
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 66 deletions
view/ItemShopingCart.js
View file @ 0885de3e
...@@ -30,29 +30,35 @@ class ItemShoping extends React.Component { ...@@ -30,29 +30,35 @@ class ItemShoping extends React.Component {
// console.log(this.props) // console.log(this.props)
return ( 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> */} {/* <Text style={{ fontSize: 20, color: '#c9af6d' }}>{item.name}</Text> */}
<View style={{ flexDirection: 'row' }}> <View style={{ flex: 1, flexDirection: 'row', height: 100, marginVertical:10}}>
<View > <View style={{ flex: 1, height: 100 }}>
<Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image> <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>
<View > <View style={{ flex: 2, height: 150 }}>
<Text style={{ fontSize: 15, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color: 'grey' }}>{item.name}</Text> <View style={{ marginLeft: 5, marginRight: 5 }}>
<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={''} /> <Text style={{ fontSize: 14, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color:'#838383' }}>{item.name}</Text>
<View style={{ flexDirection: 'row', flex: 1 }}> <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 style={styles.shadowEdit}> </View>
<Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5}}></Image> <View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}>
</View> <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}> <View style={styles.shadowAdd}>
<TouchableOpacity onPress={() => this.props.handleMin()}> <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleMin()}>
<Text style={{ fontSize: 20, margin: 2, color: '#CFB368' }}> - </Text> <Text style={{ fontSize: 25, alignSelf: 'center', fontFamily: 'Gotham-Light', color: '#CFB368' }}> - </Text>
</TouchableOpacity> </TouchableOpacity>
<TextInput <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'} keyboardType={'numeric'}
onChangeText={(quantity) => this.handleChangeQuantity(item, quantity)}>{item.quantity}</TextInput> onChangeText={(quantity) => this.handleChangeQuantity(item, quantity)}>{item.quantity}</TextInput>
<TouchableOpacity onPress={() => this.props.handleAdd()}> <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleAdd()}>
<Text style={{ fontSize: 20, margin: 2, color: '#CFB368' }}> + </Text> <Text style={{ fontSize: 25, alignSelf: 'center', fontFamily: 'Gotham-Light', color: '#CFB368' }}> + </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -66,7 +72,7 @@ class ItemShoping extends React.Component { ...@@ -66,7 +72,7 @@ class ItemShoping extends React.Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
shadowEdit: { shadowEdit: {
height: 30, height: 30,
width: 25, width: 40,
borderWidth: 1, borderWidth: 1,
borderRadius: 2, borderRadius: 2,
borderColor: '#ddd', borderColor: '#ddd',
...@@ -78,12 +84,11 @@ const styles = StyleSheet.create({ ...@@ -78,12 +84,11 @@ const styles = StyleSheet.create({
elevation: 1, elevation: 1,
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
marginTop: 10, marginTop: 5,
alignItems:'center'
}, },
shadowAdd: { shadowAdd: {
height: 30, height: 30,
width: 75, width: 90,
borderWidth: 1, borderWidth: 1,
borderRadius: 2, borderRadius: 2,
borderColor: '#ddd', borderColor: '#ddd',
...@@ -95,7 +100,7 @@ const styles = StyleSheet.create({ ...@@ -95,7 +100,7 @@ const styles = StyleSheet.create({
elevation: 1, elevation: 1,
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
marginTop: 10, marginTop: 5,
flexDirection: 'row' flexDirection: 'row'
}, },
shadowMin: { shadowMin: {
......
view/ShoppingCart.js
View file @ 0885de3e
...@@ -443,12 +443,12 @@ class ShoppingCart extends React.Component { ...@@ -443,12 +443,12 @@ class ShoppingCart extends React.Component {
{ {
this.props.type_pickup == true ? ( 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', 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> <Text style={{ textAlign: 'center', fontSize: 12, top: 5, fontFamily: 'Gotham-Light', color: 'grey' }}>Excelso {this.props.name_outlet}</Text>
</View> </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', 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> <Text style={{ textAlign: 'center', fontSize: 12, top: 5, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.props.address}</Text>
</View> </View>
...@@ -482,11 +482,11 @@ class ShoppingCart extends React.Component { ...@@ -482,11 +482,11 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>+ ADD VOUCHER</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>+ ADD VOUCHER</Text>
</TouchableOpacity> </TouchableOpacity>
) : ( ) : (
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View> <View style={{ flex: 0.5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>{this.props.voucher.reward.title}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: '#838383' }}>{this.props.voucher.reward.title}</Text>
</View> </View>
<View> <View style={{ flex: 0.5, alignItems: 'flex-end', marginRight: -5 }}>
<TouchableOpacity onPress={() => this.handleChangeVoucher()}> <TouchableOpacity onPress={() => this.handleChangeVoucher()}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>Change Voucher</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>Change Voucher</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -522,7 +522,7 @@ class ShoppingCart extends React.Component { ...@@ -522,7 +522,7 @@ class ShoppingCart extends React.Component {
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO BALANCE</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO BALANCE</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View>
<CheckBox <CheckBox
onClick={() => { onClick={() => {
this.checkedSelection('balance') this.checkedSelection('balance')
...@@ -546,7 +546,7 @@ class ShoppingCart extends React.Component { ...@@ -546,7 +546,7 @@ class ShoppingCart extends React.Component {
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>EXCELSO POINTS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>EXCELSO POINTS</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} /> <FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
</View> </View>
</View> </View>
...@@ -561,7 +561,7 @@ class ShoppingCart extends React.Component { ...@@ -561,7 +561,7 @@ class ShoppingCart extends React.Component {
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO POINTS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO POINTS</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View>
<CheckBox <CheckBox
onClick={() => { onClick={() => {
this.checkedSelection('point') this.checkedSelection('point')
...@@ -588,7 +588,7 @@ class ShoppingCart extends React.Component { ...@@ -588,7 +588,7 @@ class ShoppingCart extends React.Component {
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO BALANCE + POINTS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO BALANCE + POINTS</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View>
<CheckBox <CheckBox
onClick={() => { onClick={() => {
this.checkedSelection('balancepoint') this.checkedSelection('balancepoint')
...@@ -628,7 +628,7 @@ class ShoppingCart extends React.Component { ...@@ -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={''} /> <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> </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 }}> <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 Balance Used</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Your Points Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Your Points Used</Text>
...@@ -642,15 +642,15 @@ class ShoppingCart extends React.Component { ...@@ -642,15 +642,15 @@ class ShoppingCart extends React.Component {
</View> </View>
<View style={styles.paymentDetails}> <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>
<View style={{ margin: 10 }}> <View style={{ marginHorizontal: 10 }}>
{/* <Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Detail Pembayaran</Text> */} {/* <Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Detail Pembayaran</Text> */}
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 15, }}> <View style={{ paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Harga</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Harga</Text>
</View> </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={''} /> <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>
</View> </View>
...@@ -658,16 +658,16 @@ class ShoppingCart extends React.Component { ...@@ -658,16 +658,16 @@ class ShoppingCart extends React.Component {
null null
) : ( ) : (
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 10, }} > <View style={{ paddingLeft: 20, paddingTop: 5, }} >
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Ongkos Kirim</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Ongkos Kirim</Text>
</View> </View>
{this.props.order_item.length ? ( {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> */} {/* <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={''} /> <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>
) : (<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={''} /> <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>)}
</View>)} </View>)}
...@@ -676,11 +676,11 @@ class ShoppingCart extends React.Component { ...@@ -676,11 +676,11 @@ class ShoppingCart extends React.Component {
this.props.value_voucher == '' ? ( this.props.value_voucher == '' ? (
null null
) : ( ) : (
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 10, }}> <View style={{ paddingLeft: 20, paddingTop: 5, }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diskon</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diskon</Text>
</View> </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={''} /> <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>
</View> </View>
...@@ -688,22 +688,22 @@ class ShoppingCart extends React.Component { ...@@ -688,22 +688,22 @@ class ShoppingCart extends React.Component {
) )
} }
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{ marginTop: 15, paddingLeft: 20, paddingTop: 10 }}> <View style={{ marginTop: 10, paddingLeft: 20 }}>
<Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black', }}>TOTAL</Text> <Text style={{ fontSize: 20, color: '#CFB368', fontFamily: 'Gotham-Black', }}>TOTAL</Text>
</View> </View>
{this.props.type_pickup == true ? ( {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 == '' ? ( 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>
) : ( ) : (
<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 ? ( {/* {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> <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 { ...@@ -713,9 +713,9 @@ class ShoppingCart extends React.Component {
<> <>
{ {
this.props.order_item.length ? ( 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 { ...@@ -737,13 +737,20 @@ class ShoppingCart extends React.Component {
</View> </View>
{this.props.type_pickup == true ? ( {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={{ flex: 1, flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 10, flex: 0.5 }}> <View style={{ paddingLeft: 20, flex: 0.5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Tujuan</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diantar ke</Text>
</View> </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> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368', textAlign: 'right' }}>{this.props.address}</Text>
</View> </View>
</View> </View>
...@@ -754,7 +761,7 @@ class ShoppingCart extends React.Component { ...@@ -754,7 +761,7 @@ class ShoppingCart extends React.Component {
{/* </View> */} {/* </View> */}
<TouchableOpacity onPress={() => this.checkOut()}> <TouchableOpacity onPress={() => this.checkOut()}>
<View style={styles.button}> <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> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -772,11 +779,11 @@ const styles = StyleSheet.create({ ...@@ -772,11 +779,11 @@ const styles = StyleSheet.create({
header: { header: {
flex: 0.2, flex: 0.2,
margin: 10, marginHorizontal: 10,
padding: 20, padding: 20,
borderBottomWidth: 1, borderBottomWidth: 1,
borderTopWidth: 1, borderTopWidth: 1,
borderColor:'grey', borderColor: 'grey',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between' justifyContent: 'space-between'
...@@ -794,17 +801,17 @@ const styles = StyleSheet.create({ ...@@ -794,17 +801,17 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor:'grey' borderColor: 'grey'
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
}, },
voucher: { voucher: {
flex: 1, flex: 1,
margin: 10, marginHorizontal: 10,
padding: 20, padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor:'grey' borderColor: 'grey'
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
}, },
...@@ -814,15 +821,15 @@ const styles = StyleSheet.create({ ...@@ -814,15 +821,15 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor:'grey' borderColor: 'grey'
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
}, },
button: { button: {
backgroundColor: '#CFB368', backgroundColor: '#CFB368',
marginTop: 25, marginVertical: 25,
marginHorizontal: 30, marginHorizontal: 30,
borderRadius: 10, borderRadius: 10,
paddingVertical: 5, height:40,
alignItems: 'center', alignItems: 'center',
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