Skip to content

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

update

parent e309e7c4
Show whitespace changes
Inline Side-by-side
Showing with 236 additions and 77 deletions
view/ShoppingCart.js
View file @ 32384956
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 { 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 MenuSelection from './MenuSelection'
import CurrencyFormat from 'react-currency-format';
import Axios from 'axios'
import { FlatList } from 'react-native-gesture-handler';
function Item({ name, image, qty }) {
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>
<Text>{name}</Text>
<Image source={{ uri: image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
<Text>{qty}</Text>
<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 {
......@@ -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) {
// console.log(val)
if (val == 'balance') {
......@@ -77,74 +153,126 @@ class ShoppingCart extends React.Component {
})
}
render() {
return (
<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, }}>
{i18n.t('orderInfo')}
</Text>
<Text style={{ textAlign: "center", fontSize: 12, top: 5 }}>
Excelso Senayan City
</Text>
</View>
<View style={styles.header}>
<Text style={{ textAlign: 'center', fontSize: 15 }}>YOUR ORDER(S)</Text>
<TouchableOpacity>
<Text style={{ textAlign: 'center', fontSize: 15 }}>+ ADD MORE</Text>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Text style={{ textAlign: 'center', fontSize: 15, color:'#ccb46c' }}>+ ADD MORE</Text>
</TouchableOpacity>
</View>
<View style={styles.order}>
<SafeAreaView style={styles.container}>
<FlatList
data={this.props.cart_shop}
renderItem={({ item }) => (
<Item
name={item.name}
image={item.image}
qty = {item.qty}
{/* <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}
/> */}
keyExtractor={item => item.id}/>
</SafeAreaView>
</View>
<View style={styles.payment}>
<Text>PAYMENT METHODS</Text>
</View>
<View style={{ alignItems: 'center' }}>
<TouchableOpacity onPress={() => {
this.checkedSelection('balance')
}}>
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE</Text>
</View>
<View style={{paddingRight:10}}>
<CheckBox
title={'EXCELSO BALANCE\nYour Balance : ' + this.state.kasproBalance + ' '}
checkedIcon='check-circle-o'
uncheckedIcon='circle-o'
iconRight
onPress={() => this.checkedSelection('balance')}
checked={this.state.checkedBalance}
onClick={{}}
isChecked={this.state.checkedBalance}
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('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
title={'EXCELSO POINTS\nYour Points : ' + this.state.kasproPoint + ' '}
checkedIcon='check-circle-o'
uncheckedIcon='circle-o'
iconRight
onPress={() => this.checkedSelection('point')}
checked={this.state.checkedPoint}
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
title={'EXCELSO BALANCE + EXCELSO POINTS\nYour Balance : ' + this.state.kasproBalance + '\nYour Points : ' + this.state.kasproPoint + ' '}
checkedIcon='check-circle-o'
uncheckedIcon='circle-o'
iconRight
onPress={() => this.checkedSelection('balancepoint')}
checked={this.state.checkedBalancePoint}
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}>
<TouchableOpacity>
<Text>+ ADD VOUCHER</Text>
<Text style={{color:'#ccb46c'}}>+ ADD VOUCHER</Text>
</TouchableOpacity>
</View>
......@@ -152,47 +280,50 @@ class ShoppingCart extends React.Component {
<Text>PAYMENT DETAILS</Text>
</View>
<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>
<Text>Harga</Text>
<Text style={{paddingLeft:20,paddingTop:15, color:'gray'}}>Harga</Text>
</View>
<View style={{ marginRight: 50 }}>
<Text>undefined</Text>
<View>
<Text style={{paddingRight:150, paddingTop:15, color:'gray'}}>undefined</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text>Ongkos Kirim</Text>
<Text style={{paddingLeft:20,paddingTop:10, color:'gray' }}>Ongkos Kirim</Text>
</View>
<View style={{ marginRight: 50 }}>
<Text>undefined</Text>
<View>
<Text style={{paddingRight:150, paddingTop:10, color:'gray'}}>undefined</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text>Diskon</Text>
<Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Diskon</Text>
</View>
<View style={{ marginRight: 50 }}>
<Text>undefined</Text>
<View>
<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 }}>
<Text style={{ fontSize: 35 }}>Total</Text>
<View style={{ marginTop: 15, paddingLeft:20,paddingTop:10 }}>
<Text style={{ fontSize: 35, color:'#ccb46c' }}>Total</Text>
</View>
<View style={{ marginRight: 50, marginTop: 15 }}>
<Text style={{ fontSize: 35 }}>undefined</Text>
<View style={{ marginTop: 15, paddingRight:60, paddingTop:10 }}>
<Text style={{ fontSize: 35, color:'#ccb46c' }}>undefined</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text>Tujuan</Text>
<Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Tujuan</Text>
</View>
<View style={{ marginRight: 50 }}>
<Text>undefined</Text>
<View>
<Text style={{color:'#ccb46c',paddingRight:150, paddingTop:10}}>undefined</Text>
</View>
</View>
<View style={{ margin: 20, }}>
<Button title='Checkout' color='#ccb46c' />
</View>
</View>
</ScrollView>
)
......@@ -210,7 +341,7 @@ const styles = StyleSheet.create({
header: {
flex: 0.2,
margin: 10,
// backgroundColor : '',
padding: 20,
borderBottomWidth: 1,
borderTopWidth: 1,
flexDirection: 'row',
......@@ -227,6 +358,7 @@ const styles = StyleSheet.create({
payment: {
flex: 1,
margin: 10,
padding: 20,
borderTopWidth: 1,
borderBottomWidth: 1,
// backgroundColor: 'lightblue'
......@@ -235,6 +367,7 @@ const styles = StyleSheet.create({
voucher: {
flex: 1,
margin: 10,
padding: 20,
borderTopWidth: 1,
borderBottomWidth: 1,
// backgroundColor: 'lightblue'
......@@ -243,10 +376,37 @@ const styles = StyleSheet.create({
paymentDetails: {
flex: 1,
margin: 10,
padding: 20,
borderTopWidth: 1,
borderBottomWidth: 1,
// 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) => {
session_id: state.session_id,
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