Skip to content

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

update shopping cart

parent c4854811
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 18 deletions
view/ItemShopingCart.js
View file @ 934bb4d3
import React from 'react'; import React from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput } from 'react-native'; import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput, Modal } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ActionType from '../redux/globalActionType'; import ActionType from '../redux/globalActionType';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import { Icon } from 'react-native-elements'
class ItemShoping extends React.Component { class ItemShoping extends React.Component {
constructor(props) {
super(props)
this.state = {
value: 0,
modalVisible: false,
description: ''
}
}
handleChangeQuantity = (item, quantity) => { handleChangeQuantity = (item, quantity) => {
console.log('CHange Quantity Shopping CHart : ' + JSON.stringify(item)) console.log('CHange Quantity Shopping CHart : ' + JSON.stringify(item))
...@@ -25,6 +34,13 @@ class ItemShoping extends React.Component { ...@@ -25,6 +34,13 @@ class ItemShoping extends React.Component {
} }
this.props.changeQuantity({ item: order_item, quantity: quantity }) this.props.changeQuantity({ item: order_item, quantity: quantity })
} }
handleAddDescription() {
this.setState({
modalVisible: true
})
}
render() { render() {
const { item } = this.props const { item } = this.props
// console.log(this.props) // console.log(this.props)
...@@ -32,7 +48,35 @@ class ItemShoping extends React.Component { ...@@ -32,7 +48,35 @@ class ItemShoping extends React.Component {
<View style={{ flex: 1 }} 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={{ flex: 1, flexDirection: 'row', height: 100, marginVertical:10}}> <Modal animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
this.setState({
modalVisible: false
})
}}>
<View style={styles.centerViewModal}>
<View style={styles.modalView}>
<Text style={{ fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Add Description</Text>
<View style={{ margin: 10 }}>
<TextInput
style={styles.textInput}
onChangeText={(description) => this.setState({ description })}
value={this.state.description}
textAlign='center'
/>
</View>
<TouchableOpacity onPress={() => this.setState({ modalVisible: false })}>
<View style={styles.button}>
<Text style={{ color: 'white', fontWeight: 'bold', fontSize: 16 }}>CONFIRM</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Modal>
<View style={{ flex: 1, flexDirection: 'row', height: 100 }}>
<View style={{ flex: 1, height: 100 }}> <View style={{ flex: 1, height: 100 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', { nameMenu: item.name, desc: item.description, image: item.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> <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 10, }}></Image>
...@@ -40,25 +84,40 @@ class ItemShoping extends React.Component { ...@@ -40,25 +84,40 @@ class ItemShoping extends React.Component {
</View> </View>
<View style={{ flex: 2, height: 150 }}> <View style={{ flex: 2, height: 150 }}>
<View style={{ marginLeft: 5, marginRight: 5 }}> <View style={{ marginLeft: 5, marginRight: 5 }}>
<Text style={{ fontSize: 14, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color:'#838383' }}>{item.name}</Text> <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={''} /> <NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 14, margin: 5, marginRight: 10, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
<View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}> <View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.handleAddDescription()}> <TouchableOpacity style={{ justifyContent: 'center' }} onPress={() => this.handleAddDescription()}>
<View style={styles.shadowEdit}> <View style={styles.shadowEdit}>
<Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5, marginRight: 5 }}></Image> <Icon
name='pencil'
type='simple-line-icon'
color='#838383'
size={18}
/>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.shadowAdd}> <View style={styles.shadowAdd}>
<TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleMin()}> <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleMin()}>
<Text style={{ fontSize: 25, alignSelf: 'center', fontFamily: 'Gotham-Light', color: '#CFB368' }}> - </Text> <Icon
name='minus'
type='font-awesome'
color='#CFB368'
size={18}
/>
</TouchableOpacity> </TouchableOpacity>
<TextInput <TextInput
style={{ padding: 2, textAlign: 'center', fontFamily: 'Gotham-Black', color:'#838383', fontSize: 14, marginRight: 5, marginLeft: 5 }} 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 style={{ alignSelf: 'center' }} onPress={() => this.props.handleAdd()}> <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleAdd()}>
<Text style={{ fontSize: 25, alignSelf: 'center', fontFamily: 'Gotham-Light', color: '#CFB368' }}> + </Text> <Icon
name='plus'
type='font-awesome'
color='#CFB368'
size={18}
/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -81,10 +140,11 @@ const styles = StyleSheet.create({ ...@@ -81,10 +140,11 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8, shadowOpacity: 0.8,
shadowRadius: 2, shadowRadius: 2,
elevation: 1, elevation: 0.5,
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
marginTop: 5, marginTop: 5,
justifyContent: 'center'
}, },
shadowAdd: { shadowAdd: {
height: 30, height: 30,
...@@ -101,7 +161,8 @@ const styles = StyleSheet.create({ ...@@ -101,7 +161,8 @@ const styles = StyleSheet.create({
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
marginTop: 5, marginTop: 5,
flexDirection: 'row' flexDirection: 'row',
justifyContent: 'center'
}, },
shadowMin: { shadowMin: {
height: 20, height: 20,
...@@ -118,7 +179,39 @@ const styles = StyleSheet.create({ ...@@ -118,7 +179,39 @@ const styles = StyleSheet.create({
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
marginTop: 10, marginTop: 10,
} },
centerViewModal: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
modalView: {
backgroundColor: "white",
borderRadius: 10,
borderWidth: 1,
borderColor: 'grey',
padding: 20,
alignItems: "center",
},
textInput: {
height: 40,
width: 250,
fontFamily: 'Gotham-Light',
fontSize: 14,
color: '#838383',
borderColor: 'gray',
borderWidth: 1,
marginHorizontal: 30,
borderRadius: 10
},
button: {
backgroundColor: '#CFB368',
height: 40,
paddingHorizontal:20,
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center'
},
}) })
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
......
view/ShoppingCart.js
View file @ 934bb4d3
...@@ -651,7 +651,7 @@ class ShoppingCart extends React.Component { ...@@ -651,7 +651,7 @@ class ShoppingCart extends React.Component {
<View style={{ paddingLeft: 20 }}> <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, alignItems: 'flex-end' }}> <View style={{ alignItems: 'flex-end', paddingRight:20 }}>
<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>
...@@ -668,7 +668,7 @@ class ShoppingCart extends React.Component { ...@@ -668,7 +668,7 @@ class ShoppingCart extends React.Component {
{/* <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: 5, alignItems: 'flex-end' }}> ) : (<View style={{ paddingRight:20, 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>)}
...@@ -681,7 +681,7 @@ class ShoppingCart extends React.Component { ...@@ -681,7 +681,7 @@ class ShoppingCart extends React.Component {
<View style={{ paddingLeft: 20, paddingTop: 5, }}> <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: 5, alignItems: 'flex-end' }}> <View style={{ paddingRight:20, 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>
...@@ -694,7 +694,7 @@ class ShoppingCart extends React.Component { ...@@ -694,7 +694,7 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 20, 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: 10, paddingRight: 30, alignItems: 'flex-end' }}> <View style={{ marginTop: 10, paddingRight:20, alignItems: 'flex-end' }}>
{ {
this.props.value_voucher == '' ? ( this.props.value_voucher == '' ? (
<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={this.props.order_total} renderText={value => <Text style={{ fontSize: 20, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
...@@ -737,7 +737,7 @@ class ShoppingCart extends React.Component { ...@@ -737,7 +737,7 @@ class ShoppingCart extends React.Component {
)} )}
</View> </View>
{this.props.type_pickup == true ? ( {/* {this.props.type_pickup == true ? (
<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, flex: 0.5 }}> <View style={{ paddingLeft: 20, flex: 0.5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diambil di</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diambil di</Text>
...@@ -755,7 +755,7 @@ class ShoppingCart extends React.Component { ...@@ -755,7 +755,7 @@ class ShoppingCart extends React.Component {
<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>
)} )} */}
{/* <View style={{ margin: 20, }}> {/* <View style={{ margin: 20, }}>
{/* <Button title='Checkout' color='#CFB368' onPress={() => this.checkOut()} /> */} {/* <Button title='Checkout' color='#CFB368' onPress={() => this.checkOut()} /> */}
......
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