Skip to content

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

update shopping cart

parent c4854811
Show whitespace changes
Inline Side-by-side
Showing with 111 additions and 18 deletions
view/ItemShopingCart.js
View file @ 934bb4d3
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 ActionType from '../redux/globalActionType';
import NumberFormat from 'react-number-format';
import { Icon } from 'react-native-elements'
class ItemShoping extends React.Component {
constructor(props) {
super(props)
this.state = {
value: 0,
modalVisible: false,
description: ''
}
}
handleChangeQuantity = (item, quantity) => {
console.log('CHange Quantity Shopping CHart : ' + JSON.stringify(item))
......@@ -25,6 +34,13 @@ class ItemShoping extends React.Component {
}
this.props.changeQuantity({ item: order_item, quantity: quantity })
}
handleAddDescription() {
this.setState({
modalVisible: true
})
}
render() {
const { item } = this.props
// console.log(this.props)
......@@ -32,7 +48,35 @@ class ItemShoping extends React.Component {
<View style={{ flex: 1 }} key={item.id}>
{/* <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 }}>
<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>
......@@ -40,25 +84,40 @@ class ItemShoping extends React.Component {
</View>
<View style={{ flex: 2, height: 150 }}>
<View style={{ marginLeft: 5, marginRight: 5 }}>
<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={''} />
<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: 14, margin: 5, marginRight: 10, fontFamily: 'Gotham-Light', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
<View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.handleAddDescription()}>
<TouchableOpacity style={{ justifyContent: 'center' }} 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>
<Icon
name='pencil'
type='simple-line-icon'
color='#838383'
size={18}
/>
</View>
</TouchableOpacity>
<View style={styles.shadowAdd}>
<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>
<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'}
onChangeText={(quantity) => this.handleChangeQuantity(item, quantity)}>{item.quantity}</TextInput>
<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>
</View>
</View>
......@@ -81,10 +140,11 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 1,
elevation: 0.5,
marginLeft: 5,
marginRight: 5,
marginTop: 5,
justifyContent: 'center'
},
shadowAdd: {
height: 30,
......@@ -101,7 +161,8 @@ const styles = StyleSheet.create({
marginLeft: 5,
marginRight: 5,
marginTop: 5,
flexDirection: 'row'
flexDirection: 'row',
justifyContent: 'center'
},
shadowMin: {
height: 20,
......@@ -118,7 +179,39 @@ const styles = StyleSheet.create({
marginLeft: 5,
marginRight: 5,
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) => {
......
view/ShoppingCart.js
View file @ 934bb4d3
......@@ -651,7 +651,7 @@ class ShoppingCart extends React.Component {
<View style={{ paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Harga</Text>
</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={''} />
</View>
</View>
......@@ -668,7 +668,7 @@ class ShoppingCart extends React.Component {
{/* <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={''} />
</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={''} />
</View>)}
</View>)}
......@@ -681,7 +681,7 @@ class ShoppingCart extends React.Component {
<View style={{ paddingLeft: 20, paddingTop: 5, }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diskon</Text>
</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={''} />
</View>
</View>
......@@ -694,7 +694,7 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 20, color: '#CFB368', fontFamily: 'Gotham-Black', }}>TOTAL</Text>
</View>
{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 == '' ? (
<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 {
)}
</View>
{this.props.type_pickup == true ? (
{/* {this.props.type_pickup == true ? (
<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>
......@@ -755,7 +755,7 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368', textAlign: 'right' }}>{this.props.address}</Text>
</View>
</View>
)}
)} */}
{/* <View style={{ margin: 20, }}>
{/* <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