Skip to content

C
clone_excelso
Commit df2e2f9f authored by Trisno's avatar Trisno
Browse files
Options

update design shopping cart

parent 44a3a512
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 59 deletions
view/ItemShopingCart.js
View file @ df2e2f9f
...@@ -22,40 +22,42 @@ class ItemShoping extends React.Component { ...@@ -22,40 +22,42 @@ class ItemShoping extends React.Component {
note: 'jangan garing', note: 'jangan garing',
image: item.image, image: item.image,
price: parseInt(item.price), price: parseInt(item.price),
} }
this.props.changeQuantity({item: order_item, quantity: quantity}) this.props.changeQuantity({ item: order_item, quantity: quantity })
} }
render() { render() {
const { item } = this.props const { item } = this.props
// console.log(this.props) // console.log(this.props)
return ( return (
<View style={{ flex: 1, margin: 10 }} key={item.id}> <View style={{ flex: 1, margin: 10 }} 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={{ flexDirection: 'row' }}>
<View > <View >
<Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image> <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
</View> </View>
<View > <View >
<Text style={{ fontSize: 15, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black' }}>{item.name}</Text> <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-Black', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <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={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.shadowEdit}></View> <View style={styles.shadowEdit}>
<View style={styles.shadowAdd}> <Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5}}></Image>
<TouchableOpacity onPress={() => this.props.handleMin()}> </View>
<Text style={{ fontSize: 20, margin: 2, color:'#CFB368' }}> - </Text> <View style={styles.shadowAdd}>
</TouchableOpacity> <TouchableOpacity onPress={() => this.props.handleMin()}>
<TextInput <Text style={{ fontSize: 20, margin: 2, color: '#CFB368' }}> - </Text>
style={{ height: 25, padding: 2, textAlign: 'center', margin: 2 }} </TouchableOpacity>
keyboardType={'numeric'} <TextInput
onChangeText={(quantity) => this.handleChangeQuantity(item, quantity)}>{item.quantity}</TextInput> style={{ height: 25, padding: 2, textAlign: 'center', margin: 2 }}
<TouchableOpacity onPress={() => this.props.handleAdd()}> keyboardType={'numeric'}
<Text style={{ fontSize: 20, margin: 2, color:'#CFB368'}}> + </Text> onChangeText={(quantity) => this.handleChangeQuantity(item, quantity)}>{item.quantity}</TextInput>
</TouchableOpacity> <TouchableOpacity onPress={() => this.props.handleAdd()}>
</View> <Text style={{ fontSize: 20, margin: 2, color: '#CFB368' }}> + </Text>
</TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
</View>
</View> </View>
) )
} }
...@@ -77,6 +79,7 @@ const styles = StyleSheet.create({ ...@@ -77,6 +79,7 @@ const styles = StyleSheet.create({
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
marginTop: 10, marginTop: 10,
alignItems:'center'
}, },
shadowAdd: { shadowAdd: {
height: 30, height: 30,
...@@ -126,14 +129,14 @@ const mapStateToProps = (state) => { ...@@ -126,14 +129,14 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = (dispacth) => { const mapDispatchToProps = (dispacth) => {
return { return {
changeQuantity: (params) => dispacth({ changeQuantity: (params) => dispacth({
type: ActionType.CHANGE_QUANTITY, type: ActionType.CHANGE_QUANTITY,
data: { data: {
item: params.item, item: params.item,
new_quantity: params.quantity new_quantity: params.quantity
} }
}), }),
} }
} }
export default connect(mapStateToProps, mapDispatchToProps)(ItemShoping) export default connect(mapStateToProps, mapDispatchToProps)(ItemShoping)
view/ShoppingCart.js
View file @ df2e2f9f
...@@ -443,20 +443,20 @@ class ShoppingCart extends React.Component { ...@@ -443,20 +443,20 @@ class ShoppingCart extends React.Component {
{ {
this.props.type_pickup == true ? ( this.props.type_pickup == true ? (
<Card style={{ margin: 5, padding: 10 }}> <View style={{margin: 5, padding:10}}>
<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Black', fontSize: 12 }}>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' }}>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>
</Card> </View>
) : ( ) : (
<Card style={{ margin: 5, padding: 10 }}> <View style={{margin: 5, padding:10}}>
<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Black', fontSize: 12 }}>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' }}>{this.props.address}</Text> <Text style={{ textAlign: 'center', fontSize: 12, top: 5, fontFamily: 'Gotham-Light', color: 'grey' }}>{this.props.address}</Text>
</Card> </View>
) )
} }
</View> </View>
<View style={styles.header}> <View style={styles.header}>
<Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black' }}>YOUR ORDER(S)</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>YOUR ORDER(S)</Text>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}> <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Text style={{ textAlign: 'center', fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Light' }}>+ ADD MORE</Text> <Text style={{ textAlign: 'center', fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Light' }}>+ ADD MORE</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -496,7 +496,7 @@ class ShoppingCart extends React.Component { ...@@ -496,7 +496,7 @@ class ShoppingCart extends React.Component {
} }
</View> </View>
<View style={styles.payment}> <View style={styles.payment}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>PAYMENT METHODS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>PAYMENT METHODS</Text>
</View> </View>
<View style={{ alignItems: 'center' }}> <View style={{ alignItems: 'center' }}>
...@@ -506,7 +506,7 @@ class ShoppingCart extends React.Component { ...@@ -506,7 +506,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}> <Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO BALANCE</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>EXCELSO BALANCE</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} /> <FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
...@@ -520,7 +520,7 @@ class ShoppingCart extends React.Component { ...@@ -520,7 +520,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10 }}> <Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO BALANCE</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO BALANCE</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View style={{ paddingRight: 10 }}>
<CheckBox <CheckBox
...@@ -544,7 +544,7 @@ class ShoppingCart extends React.Component { ...@@ -544,7 +544,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}> <Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO POINTS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>EXCELSO POINTS</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} /> <FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
...@@ -559,7 +559,7 @@ class ShoppingCart extends React.Component { ...@@ -559,7 +559,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10 }}> <Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO POINTS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO POINTS</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View style={{ paddingRight: 10 }}>
<CheckBox <CheckBox
...@@ -586,7 +586,7 @@ class ShoppingCart extends React.Component { ...@@ -586,7 +586,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10 }}> <Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO BALANCE + POINTS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'grey' }}>EXCELSO BALANCE + POINTS</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View style={{ paddingRight: 10 }}>
<CheckBox <CheckBox
...@@ -605,7 +605,7 @@ class ShoppingCart extends React.Component { ...@@ -605,7 +605,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}> <Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO BALANCE + POINTS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color: 'white' }}>EXCELSO BALANCE + POINTS</Text>
</View> </View>
<View style={{ paddingRight: 10 }}> <View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} /> <FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
...@@ -620,29 +620,29 @@ class ShoppingCart extends React.Component { ...@@ -620,29 +620,29 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10 }}> <Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 }}>
<View> <View>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Balance</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Your Balance</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Points</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Your Points</Text>
</View> </View>
<View style={{ alignItems: 'flex-end' }}> <View style={{ alignItems: 'flex-end' }}>
<NumberFormat decimalScale={0} value={this.state.kasproBalance} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <NumberFormat decimalScale={0} value={this.state.kasproBalance} 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' }}>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 }}> <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' }}>Your Balance Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Your Balance Used</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Points Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>Your Points Used</Text>
</View> </View>
<View style={{ marginTop: 5, alignItems: 'flex-end' }}> <View style={{ marginTop: 5, alignItems: 'flex-end' }}>
<NumberFormat decimalScale={0} value={this.state.balanceused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <NumberFormat decimalScale={0} value={this.state.balanceused} 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.pointsused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <NumberFormat decimalScale={0} value={this.state.pointsused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
</View> </View>
</Card> </Card>
</View> </View>
<View style={styles.paymentDetails}> <View style={styles.paymentDetails}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>PAYMENT DETAILS</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color:'grey' }}>PAYMENT DETAILS</Text>
</View> </View>
<View style={{ margin: 10 }}> <View style={{ margin: 10 }}>
{/* <Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Detail Pembayaran</Text> */} {/* <Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Detail Pembayaran</Text> */}
...@@ -776,6 +776,7 @@ const styles = StyleSheet.create({ ...@@ -776,6 +776,7 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
borderBottomWidth: 1, borderBottomWidth: 1,
borderTopWidth: 1, borderTopWidth: 1,
borderColor:'grey',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between' justifyContent: 'space-between'
...@@ -793,6 +794,7 @@ const styles = StyleSheet.create({ ...@@ -793,6 +794,7 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor:'grey'
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
}, },
...@@ -802,6 +804,7 @@ const styles = StyleSheet.create({ ...@@ -802,6 +804,7 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor:'grey'
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
}, },
...@@ -811,6 +814,7 @@ const styles = StyleSheet.create({ ...@@ -811,6 +814,7 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor:'grey'
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
}, },
button: { button: {
......
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