Skip to content

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

update

parent e309e7c4
Hide whitespace changes
Inline Side-by-side
Showing with 236 additions and 77 deletions
view/ShoppingCart.js
View file @ 32384956
import React from 'react'; import React from 'react';
import { View, Text, TextInput, StyleSheet, Button, TouchableOpacity, ScrollView, Image,SafeAreaView } from 'react-native'; import { View, Text, TextInput, StyleSheet, Button, TouchableOpacity, ScrollView, FlatList, Image } from 'react-native';
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { CheckBox } from 'react-native-elements' // import { CheckBox } from 'react-native-elements'
import CheckBox from 'react-native-check-box'
import { Card } from 'react-native-shadow-cards'
import { Ionicons, MaterialCommunityIcons, MaterialIcons, AntDesign, FontAwesome } from '@expo/vector-icons'
import i18n from 'i18n-js'; import i18n from 'i18n-js';
// import MenuSelection from './MenuSelection' import CurrencyFormat from 'react-currency-format';
import Axios from 'axios' import Axios from 'axios'
import { FlatList } from 'react-native-gesture-handler';
function Item({ name, image, qty }) { class Items extends React.Component {
return (
<View> render() {
<Text>{name}</Text> const { item } = this.props
<Image source={{ uri: image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image> // console.log('ini props nya item : ' + JSON.stringify(item))
<Text>{qty}</Text> console.log(this.props)
</View> 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 {
...@@ -30,6 +77,35 @@ class ShoppingCart extends React.Component { ...@@ -30,6 +77,35 @@ class ShoppingCart extends React.Component {
} }
} }
minusQty(item, index) {
const listMenu = [...this.state.listMenu]
let hasil = [];
if (listMenu[index].qty !== 0) {
listMenu[index].qty -= 1
this.setState({
listMenu
})
// hasil.push(listMenu[index].qty);
// console.log("INI HASILNYA : " + JSON.stringify(hasil))
}
}
plusQty(item, index) {
this.setState({
shopingCart: item
})
const listMenu = [...this.state.listMenu]
listMenu[index].qty += 1
this.setState({
listMenu,
})
}
checkedSelection(val) { checkedSelection(val) {
// console.log(val) // console.log(val)
if (val == 'balance') { if (val == 'balance') {
...@@ -77,74 +153,126 @@ class ShoppingCart extends React.Component { ...@@ -77,74 +153,126 @@ class ShoppingCart extends React.Component {
}) })
} }
render() { render() {
return ( return (
<ScrollView style={styles.container}> <ScrollView style={styles.container}>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity style={styles.buttonDelivery} >
<Text style={{ textAlign: 'center', color: '#354175', fontWeight: 'bold' }}>{i18n.t('delivery')}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonPickup} >
<Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text>
</TouchableOpacity>
</View>
<View style={{margin :5}}>
<Text style={{ textAlign: 'center', fontSize: 12, }}> <Text style={{ textAlign: 'center', fontSize: 12, }}>
{i18n.t('orderInfo')} {i18n.t('orderInfo')}
</Text> </Text>
<Text style={{ textAlign: "center", fontSize: 12, top: 5 }}> <Text style={{ textAlign: "center", fontSize: 12, top: 5 }}>
Excelso Senayan City Excelso Senayan City
</Text> </Text>
</View>
<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> <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Text style={{ textAlign: 'center', fontSize: 15 }}>+ 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}>
<SafeAreaView style={styles.container}>
<FlatList {/* <FlatList
data={this.props.cart_shop} data={this.props.route.params.DATA}
renderItem={({ item }) => ( renderItem={({ item, index }) => (
<Item <Items navigation={this.props.navigation}
item={item}
name={item.name} minusQty={() => this.minusQty(item, index)}
image={item.image} plusQty={() => this.plusQty(item, index)}
qty = {item.qty}
/> />
)} )}
keyExtractor={item => item.id}
keyExtractor={item => item.id}/> /> */}
</SafeAreaView>
</View> </View>
<View style={styles.payment}> <View style={styles.payment}>
<Text>PAYMENT METHODS</Text> <Text>PAYMENT METHODS</Text>
</View> </View>
<CheckBox <View style={{ alignItems: 'center' }}>
title={'EXCELSO BALANCE\nYour Balance : ' + this.state.kasproBalance + ' '} <TouchableOpacity onPress={() => {
checkedIcon='check-circle-o' this.checkedSelection('balance')
uncheckedIcon='circle-o' }}>
iconRight <Card style={{ margin: 5, padding: 10 }}>
onPress={() => this.checkedSelection('balance')} <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
checked={this.state.checkedBalance} <View>
/> <Text>EXCELSO BALANCE</Text>
<CheckBox </View>
title={'EXCELSO POINTS\nYour Points : ' + this.state.kasproPoint + ' '} <View style={{paddingRight:10}}>
checkedIcon='check-circle-o' <CheckBox
uncheckedIcon='circle-o' onClick={{}}
iconRight isChecked={this.state.checkedBalance}
onPress={() => this.checkedSelection('point')} checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
checked={this.state.checkedPoint} unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
/> />
<CheckBox </View>
title={'EXCELSO BALANCE + EXCELSO POINTS\nYour Balance : ' + this.state.kasproBalance + '\nYour Points : ' + this.state.kasproPoint + ' '} </View>
checkedIcon='check-circle-o' </Card>
uncheckedIcon='circle-o' </TouchableOpacity>
iconRight </View>
onPress={() => this.checkedSelection('balancepoint')} <View style={{ alignItems: 'center' }}>
checked={this.state.checkedBalancePoint} <TouchableOpacity onPress={() => {
/> this.checkedSelection('point')
}}>
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO POINTS</Text>
</View>
<View style={{paddingRight:10}}>
<CheckBox
onClick={{}}
isChecked={this.state.checkedPoint}
checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
/>
</View>
</View>
</Card>
</TouchableOpacity>
</View>
<View style={{ alignItems: 'center' }}>
<TouchableOpacity onPress={() => {
this.checkedSelection('balancepoint')
}}>
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE + POINTS</Text>
</View>
<View style={{paddingRight:10}}>
<CheckBox
onClick={{}}
isChecked={this.state.checkedBalancePoint}
checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
/>
</View>
</View>
</Card>
</TouchableOpacity>
</View>
<View style={{ alignItems: 'center' }}>
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE + POINTS</Text>
</View>
</View>
</Card>
</View>
<View style={styles.voucher}> <View style={styles.voucher}>
<TouchableOpacity> <TouchableOpacity>
<Text>+ ADD VOUCHER</Text> <Text style={{color:'#ccb46c'}}>+ ADD VOUCHER</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -152,47 +280,50 @@ class ShoppingCart extends React.Component { ...@@ -152,47 +280,50 @@ class ShoppingCart extends React.Component {
<Text>PAYMENT DETAILS</Text> <Text>PAYMENT DETAILS</Text>
</View> </View>
<View style={{ margin: 10 }}> <View style={{ margin: 10 }}>
<Text>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>Harga</Text> <Text style={{paddingLeft:20,paddingTop:15, color:'gray'}}>Harga</Text>
</View> </View>
<View style={{ marginRight: 50 }}> <View>
<Text>undefined</Text> <Text style={{paddingRight:150, paddingTop:15, 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>Ongkos Kirim</Text> <Text style={{paddingLeft:20,paddingTop:10, color:'gray' }}>Ongkos Kirim</Text>
</View> </View>
<View style={{ marginRight: 50 }}> <View>
<Text>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>Diskon</Text> <Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Diskon</Text>
</View> </View>
<View style={{ marginRight: 50 }}> <View>
<Text>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 }}> <View style={{ marginTop: 15, paddingLeft:20,paddingTop:10 }}>
<Text style={{ fontSize: 35 }}>Total</Text> <Text style={{ fontSize: 35, color:'#ccb46c' }}>Total</Text>
</View> </View>
<View style={{ marginRight: 50, marginTop: 15 }}> <View style={{ marginTop: 15, paddingRight:60, paddingTop:10 }}>
<Text style={{ fontSize: 35 }}>undefined</Text> <Text style={{ fontSize: 35, color:'#ccb46c' }}>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>Tujuan</Text> <Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Tujuan</Text>
</View> </View>
<View style={{ marginRight: 50 }}> <View>
<Text>undefined</Text> <Text style={{color:'#ccb46c',paddingRight:150, paddingTop:10}}>undefined</Text>
</View> </View>
</View> </View>
<View style={{ margin: 20, }}>
<Button title='Checkout' color='#ccb46c' />
</View>
</View> </View>
</ScrollView> </ScrollView>
) )
...@@ -210,7 +341,7 @@ const styles = StyleSheet.create({ ...@@ -210,7 +341,7 @@ const styles = StyleSheet.create({
header: { header: {
flex: 0.2, flex: 0.2,
margin: 10, margin: 10,
// backgroundColor : '', padding: 20,
borderBottomWidth: 1, borderBottomWidth: 1,
borderTopWidth: 1, borderTopWidth: 1,
flexDirection: 'row', flexDirection: 'row',
...@@ -227,6 +358,7 @@ const styles = StyleSheet.create({ ...@@ -227,6 +358,7 @@ const styles = StyleSheet.create({
payment: { payment: {
flex: 1, flex: 1,
margin: 10, margin: 10,
padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
...@@ -235,6 +367,7 @@ const styles = StyleSheet.create({ ...@@ -235,6 +367,7 @@ const styles = StyleSheet.create({
voucher: { voucher: {
flex: 1, flex: 1,
margin: 10, margin: 10,
padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
...@@ -243,10 +376,37 @@ const styles = StyleSheet.create({ ...@@ -243,10 +376,37 @@ const styles = StyleSheet.create({
paymentDetails: { paymentDetails: {
flex: 1, flex: 1,
margin: 10, margin: 10,
padding: 20,
borderTopWidth: 1, borderTopWidth: 1,
borderBottomWidth: 1, borderBottomWidth: 1,
// backgroundColor: 'lightblue' // backgroundColor: 'lightblue'
}, },
buttonDelivery: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
marginRight: 0,
marginLeft: 0,
backgroundColor: '#cce8f0',
borderRadius: 10,
borderWidth: 0,
borderColor: '#fff',
width: '50%',
// top: -20,
},
buttonPickup: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 15,
marginRight: 0,
marginLeft: -50,
backgroundColor: '#354175',
borderRadius: 10,
borderWidth: 0,
borderColor: '#fff',
width: '40%',
// top: -20,
},
}) })
...@@ -256,7 +416,6 @@ const mapStateToProps = (state) => { ...@@ -256,7 +416,6 @@ const mapStateToProps = (state) => {
session_id: state.session_id, session_id: state.session_id,
cart_shop: state.cart_shop cart_shop: state.cart_shop
} }
} }
......
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