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 @@
}
}
},
"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": {
"version": "2.7.7",
"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';
import CurrencyFormat from 'react-currency-format';
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 {
constructor(props) {
super(props)
......@@ -73,7 +17,9 @@ class ShoppingCart extends React.Component {
kasproPoint: '',
checkedBalance: false,
checkedPoint: false,
checkedBalancePoint: false
checkedBalancePoint: false,
balanceused: 0,
pointsused: 0,
}
}
......@@ -112,20 +58,30 @@ class ShoppingCart extends React.Component {
this.setState({
checkedBalance: true,
checkedPoint: false,
checkedBalancePoint: false
checkedBalancePoint: false,
balanceused: this.props.order_total,
pointsused: 0
})
} else if (val == 'point') {
this.setState({
checkedBalance: false,
checkedPoint: true,
checkedBalancePoint: false
checkedBalancePoint: false,
pointsused: this.props.order_total,
balanceused: 0
})
} else {
this.setState({
checkedBalance: 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 {
<Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text>
</TouchableOpacity>
</View>
<View style={{margin :5}}>
<View style={{ margin: 5 }}>
<Text style={{ textAlign: 'center', fontSize: 12, }}>
{i18n.t('orderInfo')}
</Text>
......@@ -175,28 +131,61 @@ class ShoppingCart extends React.Component {
<View style={styles.header}>
<Text style={{ textAlign: 'center', fontSize: 15 }}>YOUR ORDER(S)</Text>
<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>
</View>
<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 style={styles.payment}>
<Text>PAYMENT METHODS</Text>
</View>
<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={() => {
this.checkedSelection('balance')
}}>
......@@ -205,9 +194,11 @@ class ShoppingCart extends React.Component {
<View>
<Text>EXCELSO BALANCE</Text>
</View>
<View style={{paddingRight:10}}>
<View style={{ paddingRight: 10 }}>
<CheckBox
onClick={{}}
onClick={() => {
this.checkedSelection('balance')
}}
isChecked={this.state.checkedBalance}
checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
......@@ -216,8 +207,24 @@ class ShoppingCart extends React.Component {
</View>
</Card>
</TouchableOpacity>
)
}
</View>
<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={() => {
this.checkedSelection('point')
}}>
......@@ -226,9 +233,11 @@ class ShoppingCart extends React.Component {
<View>
<Text>EXCELSO POINTS</Text>
</View>
<View style={{paddingRight:10}}>
<View style={{ paddingRight: 10 }}>
<CheckBox
onClick={{}}
onClick={() => {
this.checkedSelection('point')
}}
isChecked={this.state.checkedPoint}
checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
......@@ -237,8 +246,12 @@ class ShoppingCart extends React.Component {
</View>
</Card>
</TouchableOpacity>
)
}
</View>
<View style={{ alignItems: 'center' }}>
{
this.state.kasproPoint + this.state.kasproBalance >= this.props.order_total && this.state.kasproBalance != 0 ? (
<TouchableOpacity onPress={() => {
this.checkedSelection('balancepoint')
}}>
......@@ -247,9 +260,11 @@ class ShoppingCart extends React.Component {
<View>
<Text>EXCELSO BALANCE + POINTS</Text>
</View>
<View style={{paddingRight:10}}>
<View style={{ paddingRight: 10 }}>
<CheckBox
onClick={{}}
onClick={() => {
this.checkedSelection('balancepoint')
}}
isChecked={this.state.checkedBalancePoint}
checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
......@@ -258,21 +273,49 @@ class ShoppingCart extends React.Component {
</View>
</Card>
</TouchableOpacity>
</View>
<View style={{ alignItems: 'center' }}>
<Card style={{ margin: 5, padding: 10 }}>
) : (
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE + POINTS</Text>
</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>
</Card>
</View>
<View style={styles.voucher}>
<TouchableOpacity>
<Text style={{color:'#ccb46c'}}>+ ADD VOUCHER</Text>
<Text style={{ color: '#ccb46c' }}>+ ADD VOUCHER</Text>
</TouchableOpacity>
</View>
......@@ -280,45 +323,45 @@ class ShoppingCart extends React.Component {
<Text>PAYMENT DETAILS</Text>
</View>
<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>
<Text style={{paddingLeft:20,paddingTop:15, color:'gray'}}>Harga</Text>
<Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Harga</Text>
</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 style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<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>
<Text style={{paddingRight:150, paddingTop:10, color:'gray'}}>undefined</Text>
<Text style={{ paddingRight: 150, paddingTop: 10, color: 'gray' }}>undefined</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Diskon</Text>
<Text style={{ paddingLeft: 20, paddingTop: 10, color: 'gray' }}>Diskon</Text>
</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 style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ marginTop: 15, paddingLeft:20,paddingTop:10 }}>
<Text style={{ fontSize: 35, color:'#ccb46c' }}>Total</Text>
<View style={{ marginTop: 15, paddingLeft: 20, paddingTop: 10 }}>
<Text style={{ fontSize: 35, color: '#ccb46c' }}>Total</Text>
</View>
<View style={{ marginTop: 15, paddingRight:60, paddingTop:10 }}>
<Text style={{ fontSize: 35, color:'#ccb46c' }}>undefined</Text>
<View style={{ marginTop: 15, paddingRight: 60, paddingTop: 10 }}>
<Text style={{ fontSize: 35, color: '#ccb46c' }}>{this.props.order_total}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Tujuan</Text>
<Text style={{ paddingLeft: 20, paddingTop: 10, color: 'gray' }}>Tujuan</Text>
</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 style={{ margin: 20, }}>
......@@ -352,7 +395,7 @@ const styles = StyleSheet.create({
order: {
flex: 1,
margin: 10,
backgroundColor: 'gray'
backgroundColor: '#fff'
},
payment: {
......@@ -408,6 +451,56 @@ const styles = StyleSheet.create({
// 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) => {
return {
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