Skip to content

N
new_excelso
Commit 3d11b3d8 authored by Trisno's avatar Trisno
Browse files
Options

update shopping cart

parent 32384956
Show whitespace changes
Inline Side-by-side
Showing with 255 additions and 149 deletions
package-lock.json
View file @ 3d11b3d8
...@@ -6695,6 +6695,14 @@ ...@@ -6695,6 +6695,14 @@
} }
} }
}, },
"react-native-check-box": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/react-native-check-box/-/react-native-check-box-2.1.7.tgz",
"integrity": "sha512-dPVOoz4jKs2je2HSHp7+XJXNyZFq8Kij7IHutigrQKzB550Dko6ZAQu/1mG1FzdUMFxxkZ2nX59KmbR0Co0T8Q==",
"requires": {
"prop-types": "^15.5.7"
}
},
"react-native-date-picker": { "react-native-date-picker": {
"version": "2.7.7", "version": "2.7.7",
"resolved": "https://registry.npmjs.org/react-native-date-picker/-/react-native-date-picker-2.7.7.tgz", "resolved": "https://registry.npmjs.org/react-native-date-picker/-/react-native-date-picker-2.7.7.tgz",
......
view/ShoppingCart.js
View file @ 3d11b3d8
...@@ -9,62 +9,6 @@ import i18n from 'i18n-js'; ...@@ -9,62 +9,6 @@ import i18n from 'i18n-js';
import CurrencyFormat from 'react-currency-format'; import CurrencyFormat from 'react-currency-format';
import Axios from 'axios' import Axios from 'axios'
class Items extends React.Component {
render() {
const { item } = this.props
// console.log('ini props nya item : ' + JSON.stringify(item))
console.log(this.props)
const { description, name, image, price, qty } = item
return (
<View style={{ flex: 1, margin: 10 }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ borderRadius: 20 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', { Foto: image, nama: name, desc: description })}>
<Image style={{ height: 100, width: 100, resizeMode: 'contain' }}
source={{
uri: image
}}
/>
</TouchableOpacity>
</View>
<View>
<View style={{ margin: 5, }}>
<Text style={{ fontWeight: 'bold', fontSize: 20 }}> Nama Menu : {name}</Text>
</View>
<Text style={{ margin: 5 }}>
Description : {description}
</Text>
<View style={{ margin: 5 }}>
<CurrencyFormat value={price} displayType={'text'}
thousandSeparator={true}
prefix={'Rp '}
renderText={value => <Text>{value}</Text>} />
</View>
<View style={{ flexDirection: 'row', margin: 5 }}>
<Text>Quantity : </Text>
<TouchableOpacity onPress={() => this.props.minusQty()}>
<AntDesign name='minuscircleo'
size={20}
color={'blue'}
/>
</TouchableOpacity>
<Text> {qty} </Text>
<TouchableOpacity onPress={() => this.props.plusQty()}>
<AntDesign name='pluscircleo'
size={20}
color={'blue'}
/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
)
}
}
class ShoppingCart extends React.Component { class ShoppingCart extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -73,7 +17,9 @@ class ShoppingCart extends React.Component { ...@@ -73,7 +17,9 @@ class ShoppingCart extends React.Component {
kasproPoint: '', kasproPoint: '',
checkedBalance: false, checkedBalance: false,
checkedPoint: false, checkedPoint: false,
checkedBalancePoint: false checkedBalancePoint: false,
balanceused: 0,
pointsused: 0,
} }
} }
...@@ -112,20 +58,30 @@ class ShoppingCart extends React.Component { ...@@ -112,20 +58,30 @@ class ShoppingCart extends React.Component {
this.setState({ this.setState({
checkedBalance: true, checkedBalance: true,
checkedPoint: false, checkedPoint: false,
checkedBalancePoint: false checkedBalancePoint: false,
balanceused: this.props.order_total,
pointsused: 0
}) })
} else if (val == 'point') { } else if (val == 'point') {
this.setState({ this.setState({
checkedBalance: false, checkedBalance: false,
checkedPoint: true, checkedPoint: true,
checkedBalancePoint: false checkedBalancePoint: false,
pointsused: this.props.order_total,
balanceused: 0
}) })
} else { } else {
this.setState({ this.setState({
checkedBalance: false, checkedBalance: false,
checkedPoint: false, checkedPoint: false,
checkedBalancePoint: true checkedBalancePoint: true,
pointsused : this.state.kasproPoint,
balanceused : this.props.order_total - this.state.kasproPoint
}) })
} }
} }
...@@ -164,7 +120,7 @@ class ShoppingCart extends React.Component { ...@@ -164,7 +120,7 @@ class ShoppingCart extends React.Component {
<Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text> <Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{margin :5}}> <View style={{ margin: 5 }}>
<Text style={{ textAlign: 'center', fontSize: 12, }}> <Text style={{ textAlign: 'center', fontSize: 12, }}>
{i18n.t('orderInfo')} {i18n.t('orderInfo')}
</Text> </Text>
...@@ -175,28 +131,61 @@ class ShoppingCart extends React.Component { ...@@ -175,28 +131,61 @@ class ShoppingCart extends React.Component {
<View style={styles.header}> <View style={styles.header}>
<Text style={{ textAlign: 'center', fontSize: 15 }}>YOUR ORDER(S)</Text> <Text style={{ textAlign: 'center', fontSize: 15 }}>YOUR ORDER(S)</Text>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}> <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Text style={{ textAlign: 'center', fontSize: 15, color:'#ccb46c' }}>+ ADD MORE</Text> <Text style={{ textAlign: 'center', fontSize: 15, color: '#ccb46c' }}>+ ADD MORE</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.order}> <View style={styles.order}>
{this.props.order_item.map((item, i) => {
return (
<View style={{ flex: 1, margin: 10 }} key={i}>
<View style={{ flexDirection: 'row' }}>
<View >
<Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
</View>
<View >
<Text style={{ fontSize: 20, margin: 5, marginRight: 10, fontWeight: 'bold' }}>{item.name}</Text>
<Text style={{ fontSize: 15, margin: 5, marginRight: 10 }}>Rp. {item.price}</Text>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.shadowEdit}></View>
<View style={styles.shadowAdd}>
<TouchableOpacity onPress={() => this.props.handleMin()}>
<Text style={{ fontSize: 20, margin: 2 }}> - </Text>
</TouchableOpacity>
<TextInput
style={{ height: 25, padding: 2, textAlign: 'center', margin: 2 }}
autoCapitalize="none">
{item.quantity}
</TextInput>
<TouchableOpacity onPress={() => this.props.handleAdd()}>
<Text style={{ fontSize: 20, margin: 2 }}> + </Text>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
)
})}
{/* <FlatList
data={this.props.route.params.DATA}
renderItem={({ item, index }) => (
<Items navigation={this.props.navigation}
item={item}
minusQty={() => this.minusQty(item, index)}
plusQty={() => this.plusQty(item, index)}
/>
)}
keyExtractor={item => item.id}
/> */}
</View> </View>
<View style={styles.payment}> <View style={styles.payment}>
<Text>PAYMENT METHODS</Text> <Text>PAYMENT METHODS</Text>
</View> </View>
<View style={{ alignItems: 'center' }}> <View style={{ alignItems: 'center' }}>
{
this.state.kasproBalance < this.props.order_total ? (
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE</Text>
</View>
<View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
</View>
</View>
</Card>
) : (
<TouchableOpacity onPress={() => { <TouchableOpacity onPress={() => {
this.checkedSelection('balance') this.checkedSelection('balance')
}}> }}>
...@@ -205,9 +194,11 @@ class ShoppingCart extends React.Component { ...@@ -205,9 +194,11 @@ class ShoppingCart extends React.Component {
<View> <View>
<Text>EXCELSO BALANCE</Text> <Text>EXCELSO BALANCE</Text>
</View> </View>
<View style={{paddingRight:10}}> <View style={{ paddingRight: 10 }}>
<CheckBox <CheckBox
onClick={{}} onClick={() => {
this.checkedSelection('balance')
}}
isChecked={this.state.checkedBalance} isChecked={this.state.checkedBalance}
checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />} checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />} unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
...@@ -216,8 +207,24 @@ class ShoppingCart extends React.Component { ...@@ -216,8 +207,24 @@ class ShoppingCart extends React.Component {
</View> </View>
</Card> </Card>
</TouchableOpacity> </TouchableOpacity>
)
}
</View> </View>
<View style={{ alignItems: 'center' }}> <View style={{ alignItems: 'center' }}>
{
this.state.kasproPoint < this.props.order_total ? (
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO POINTS</Text>
</View>
<View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
</View>
</View>
</Card>
) : (
<TouchableOpacity onPress={() => { <TouchableOpacity onPress={() => {
this.checkedSelection('point') this.checkedSelection('point')
}}> }}>
...@@ -226,9 +233,11 @@ class ShoppingCart extends React.Component { ...@@ -226,9 +233,11 @@ class ShoppingCart extends React.Component {
<View> <View>
<Text>EXCELSO POINTS</Text> <Text>EXCELSO POINTS</Text>
</View> </View>
<View style={{paddingRight:10}}> <View style={{ paddingRight: 10 }}>
<CheckBox <CheckBox
onClick={{}} onClick={() => {
this.checkedSelection('point')
}}
isChecked={this.state.checkedPoint} isChecked={this.state.checkedPoint}
checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />} checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />} unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
...@@ -237,8 +246,12 @@ class ShoppingCart extends React.Component { ...@@ -237,8 +246,12 @@ class ShoppingCart extends React.Component {
</View> </View>
</Card> </Card>
</TouchableOpacity> </TouchableOpacity>
)
}
</View> </View>
<View style={{ alignItems: 'center' }}> <View style={{ alignItems: 'center' }}>
{
this.state.kasproPoint + this.state.kasproBalance >= this.props.order_total && this.state.kasproBalance != 0 ? (
<TouchableOpacity onPress={() => { <TouchableOpacity onPress={() => {
this.checkedSelection('balancepoint') this.checkedSelection('balancepoint')
}}> }}>
...@@ -247,9 +260,11 @@ class ShoppingCart extends React.Component { ...@@ -247,9 +260,11 @@ class ShoppingCart extends React.Component {
<View> <View>
<Text>EXCELSO BALANCE + POINTS</Text> <Text>EXCELSO BALANCE + POINTS</Text>
</View> </View>
<View style={{paddingRight:10}}> <View style={{ paddingRight: 10 }}>
<CheckBox <CheckBox
onClick={{}} onClick={() => {
this.checkedSelection('balancepoint')
}}
isChecked={this.state.checkedBalancePoint} isChecked={this.state.checkedBalancePoint}
checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />} checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />} unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
...@@ -258,21 +273,49 @@ class ShoppingCart extends React.Component { ...@@ -258,21 +273,49 @@ class ShoppingCart extends React.Component {
</View> </View>
</Card> </Card>
</TouchableOpacity> </TouchableOpacity>
</View> ) : (
<View style={{ alignItems: 'center' }}> <Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<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>EXCELSO BALANCE + POINTS</Text> <Text>EXCELSO BALANCE + POINTS</Text>
</View> </View>
<View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
</View>
</View>
</Card>
)
}
</View>
<View style={{ alignItems: 'center', }}>
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 }}>
<View>
<Text>Your Balance</Text>
<Text>Your Points</Text>
</View>
<View style={{ paddingRight: 30, alignItems: 'flex-end' }}>
<Text>{this.state.kasproBalance}</Text>
<Text>{this.state.kasproPoint}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1 }}>
<View style={{ marginTop: 5 }}>
<Text>Your Balance Used</Text>
<Text>Your Points Used</Text>
</View>
<View style={{ paddingRight: 30, marginTop: 5, alignItems: 'flex-end' }}>
<Text>- {this.state.balanceused}</Text>
<Text>- {this.state.pointsused}</Text>
</View>
</View> </View>
</Card> </Card>
</View> </View>
<View style={styles.voucher}> <View style={styles.voucher}>
<TouchableOpacity> <TouchableOpacity>
<Text style={{color:'#ccb46c'}}>+ ADD VOUCHER</Text> <Text style={{ color: '#ccb46c' }}>+ ADD VOUCHER</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -280,45 +323,45 @@ class ShoppingCart extends React.Component { ...@@ -280,45 +323,45 @@ class ShoppingCart extends React.Component {
<Text>PAYMENT DETAILS</Text> <Text>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>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View> <View>
<Text style={{paddingLeft:20,paddingTop:15, color:'gray'}}>Harga</Text> <Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Harga</Text>
</View> </View>
<View> <View>
<Text style={{paddingRight:150, paddingTop:15, color:'gray'}}>undefined</Text> <Text style={{ paddingRight: 150, paddingTop: 15, color: 'gray' }}>{this.props.order_total}</Text>
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View> <View>
<Text style={{paddingLeft:20,paddingTop:10, color:'gray' }}>Ongkos Kirim</Text> <Text style={{ paddingLeft: 20, paddingTop: 10, color: 'gray' }}>Ongkos Kirim</Text>
</View> </View>
<View> <View>
<Text style={{paddingRight:150, paddingTop:10, color:'gray'}}>undefined</Text> <Text style={{ paddingRight: 150, paddingTop: 10, color: 'gray' }}>undefined</Text>
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View> <View>
<Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Diskon</Text> <Text style={{ paddingLeft: 20, paddingTop: 10, color: 'gray' }}>Diskon</Text>
</View> </View>
<View> <View>
<Text style={{paddingRight:150, paddingTop:10, color:'gray'}}>undefined</Text> <Text style={{ paddingRight: 150, paddingTop: 10, color: 'gray' }}>undefined</Text>
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ marginTop: 15, paddingLeft:20,paddingTop:10 }}> <View style={{ marginTop: 15, paddingLeft: 20, paddingTop: 10 }}>
<Text style={{ fontSize: 35, color:'#ccb46c' }}>Total</Text> <Text style={{ fontSize: 35, color: '#ccb46c' }}>Total</Text>
</View> </View>
<View style={{ marginTop: 15, paddingRight:60, paddingTop:10 }}> <View style={{ marginTop: 15, paddingRight: 60, paddingTop: 10 }}>
<Text style={{ fontSize: 35, color:'#ccb46c' }}>undefined</Text> <Text style={{ fontSize: 35, color: '#ccb46c' }}>{this.props.order_total}</Text>
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}> <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View> <View>
<Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Tujuan</Text> <Text style={{ paddingLeft: 20, paddingTop: 10, color: 'gray' }}>Tujuan</Text>
</View> </View>
<View> <View>
<Text style={{color:'#ccb46c',paddingRight:150, paddingTop:10}}>undefined</Text> <Text style={{ color: '#ccb46c', paddingRight: 150, paddingTop: 10 }}>undefined</Text>
</View> </View>
</View> </View>
<View style={{ margin: 20, }}> <View style={{ margin: 20, }}>
...@@ -352,7 +395,7 @@ const styles = StyleSheet.create({ ...@@ -352,7 +395,7 @@ const styles = StyleSheet.create({
order: { order: {
flex: 1, flex: 1,
margin: 10, margin: 10,
backgroundColor: 'gray' backgroundColor: '#fff'
}, },
payment: { payment: {
...@@ -408,6 +451,56 @@ const styles = StyleSheet.create({ ...@@ -408,6 +451,56 @@ const styles = StyleSheet.create({
// top: -20, // top: -20,
}, },
shadowEdit: {
height: 30,
width: 25,
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
},
shadowAdd: {
height: 30,
width: 75,
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
flexDirection: 'row'
},
shadowMin: {
height: 20,
width: 20,
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 1,
marginLeft: 5,
marginRight: 5,
marginTop: 10,
}
}) })
...@@ -415,7 +508,11 @@ const mapStateToProps = (state) => { ...@@ -415,7 +508,11 @@ const mapStateToProps = (state) => {
return { return {
session_id: state.session_id, session_id: state.session_id,
cart_shop: state.cart_shop outlet_id: state.outlet_id,
order_quantity: state.order_quantity,
order_total: state.order_total,
order_item: state.order_item,
quantity: state.quantity,
} }
} }
......
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