Commit 2de43f0a authored by Wahyu Adjie Prasetyo's avatar Wahyu Adjie Prasetyo
parents fabe3c4c 398b4176
import React from 'react'; import React from 'react';
import { View, Text, Alert, TouchableOpacity, StyleSheet, Button, ScrollView } from 'react-native'; import { View, Text, Alert, TouchableOpacity, StyleSheet, Button, ScrollView, Image } from 'react-native';
import Axios from 'axios' import Axios from 'axios'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import ActionType from '../redux/globalActionType'; import ActionType from '../redux/globalActionType';
...@@ -245,25 +245,28 @@ class MenuConfirmation extends React.Component { ...@@ -245,25 +245,28 @@ class MenuConfirmation extends React.Component {
) )
} }
</View> </View>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ marginHorizontal: 10, paddingLeft: 10 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Pesanan</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Pesanan</Text>
</View> </View>
{ {
this.props.order_item.map((item, index) => { this.props.order_item.map((item, index) => {
total = total + item.quantity * item.price total = total + item.quantity * item.price
return ( return (
<View style={{ margin: 10 }} key={index} > <View style={{ margin: 0 }} key={index} >
<View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-around' }}> <View style={{ flex: 1, margin: 10, flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={{ flex: 0.3, alignItems: 'center' }}> <View style={{ flex: 0.3, alignItems: 'center'}}>
<Image source={{ uri: item.image }} style={{ height: 50, width: 50, borderRadius: 5}}></Image>
</View>
<View style={{ flex: 0.1, alignItems: 'center', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity}</Text>
</View> </View>
<View style={{ flex: 0.1, alignItems: 'flex-start' }}> <View style={{ flex: 0.1, alignItems: 'flex-start', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>x</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>x</Text>
</View> </View>
<View style={{ flex: 0.3, alignItems: 'baseline' }}> <View style={{ flex: 0.3, alignItems: 'baseline', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.name} </Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.name} </Text>
</View> </View>
<View style={{ flex: 0.3, alignItems: 'flex-end' }}> <View style={{ flex: 0.3, alignItems: 'flex-end', justifyContent:'center', }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity * item.price} </Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.quantity * item.price} </Text>
</View> </View>
</View> </View>
...@@ -293,26 +296,26 @@ class MenuConfirmation extends React.Component { ...@@ -293,26 +296,26 @@ class MenuConfirmation extends React.Component {
</> </>
) )
} }
<View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10 }}> <View style={{ borderTopWidth: 1, marginHorizontal: 10, paddingLeft: 10, padding: 10}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Payment</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Payment</Text>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between',marginTop: -10 }}>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ flex:0.5, margin: 10, paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Balance Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Balance Used</Text>
</View> </View>
<View style={{ margin: 10, paddingRight: 5 }}> <View style={{ flex:0.5, margin: 10, alignItems:'flex-end', paddingRight:5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.balanceUsed}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.balanceUsed}</Text>
</View> </View>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10, marginTop: -10 }}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between',marginTop: -10 }}>
<View style={{ margin: 10, paddingLeft: 10 }}> <View style={{ flex:0.5, margin: 10, paddingLeft: 20 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Point Used</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Point Used</Text>
</View> </View>
<View style={{ margin: 10, paddingRight: 5 }}> <View style={{flex:0.5, margin: 10, alignItems:'flex-end', paddingRight:5}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.pointused}</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.props.route.params.pointused}</Text>
</View> </View>
</View> </View>
<View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}> <View style={{ borderTopWidth: 1, margin: 10, paddingLeft: 10, padding: 10, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1}}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Harga</Text> <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Harga</Text>
</View> </View>
...@@ -348,17 +351,17 @@ class MenuConfirmation extends React.Component { ...@@ -348,17 +351,17 @@ class MenuConfirmation extends React.Component {
</View> </View>
) )
} }
<View style={{ margin: 10, marginTop: -10, paddingLeft: 10, padding: 20, paddingBottom: -10, flexDirection: 'row', justifyContent: 'space-between', flex: 1, flexDirection: 'row' }}> <View style={{ marginHorizontal:7, paddingHorizontal:10, flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
<View style={{ flex: 0.6 }}> <View style={{ flex: 0.6 }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text> <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: '#CFB368' }}>Total</Text>
</View> </View>
{ {
this.props.value_voucher == '' ? ( this.props.value_voucher == '' ? (
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5, }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{this.props.order_total + this.props.grabamount}</Text> <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{this.props.order_total + this.props.grabamount}</Text>
</View> </View>
) : ( ) : (
<View style={{ flex: 0.4, marginRight: -5 }}> <View style={{ flex: 0.4, marginRight: -5, }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)}</Text> <Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', textAlign: 'right', color: '#CFB368' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)}</Text>
</View> </View>
) )
......
...@@ -3,6 +3,7 @@ import React from 'react'; ...@@ -3,6 +3,7 @@ import React from 'react';
import { ScrollView, StyleSheet, Text, View, Image } from 'react-native'; import { ScrollView, StyleSheet, Text, View, Image } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'; import { TouchableOpacity } from 'react-native-gesture-handler';
import HTML from 'react-native-render-html'; import HTML from 'react-native-render-html';
import { Collapse, CollapseHeader, CollapseBody, AccordionList } from 'accordion-collapse-react-native'
import { getStatusBarHeight } from 'react-native-status-bar-height'; import { getStatusBarHeight } from 'react-native-status-bar-height';
...@@ -37,19 +38,27 @@ export default class TopUpInfo extends React.Component { ...@@ -37,19 +38,27 @@ export default class TopUpInfo extends React.Component {
</View> </View>
<ScrollView> <ScrollView>
<View style={styles.content}> <View style={styles.content}>
{ {
this.state.topup_info.map((item, i) => { this.state.topup_info.map((item, i) => {
return ( return (
<View style={styles.item_container} key={i}> <View style={styles.item_container} key={i}>
<View style={{flexDirection: 'row', height: 24, marginBottom: 16}}> <Collapse>
<Text style={styles.item_title}>{item.title}</Text> <CollapseHeader>
<Image style={styles.item_image} source={item.title_thumb ? { uri: item.title_thumb } : null}/> <View style={{ flexDirection: 'row', height: 24, marginBottom: 10 }}>
</View> <Text style={styles.item_title}>{item.title}</Text>
<HTML html={item.content} tagsStyles={{ p: { fontFamily: 'Gotham-Light', marginTop: 8, marginBottom: 8, color: '#adadad' }, blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 6, color: '#adadad' }, ul: { fontFamily: 'Gotham-Light', marginLeft: 0, color: '#adadad', paddingLeft: 0 }, li: { fontFamily: 'Gotham-Light', marginLeft: 0, color: '#adadad', paddingLeft: 0 } }} /> <Image style={styles.item_image} source={item.title_thumb ? { uri: item.title_thumb } : null} />
</View>
</CollapseHeader>
<CollapseBody>
<HTML html={item.content} tagsStyles={{ p: { fontFamily: 'Gotham-Light', marginTop: 8, marginBottom: 8, color: '#adadad' }, blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 6, color: '#adadad' }, ul: { fontFamily: 'Gotham-Light', marginLeft: 0, color: '#adadad', paddingLeft: 0 }, li: { fontFamily: 'Gotham-Light', marginLeft: 0, color: '#adadad', paddingLeft: 0 } }} />
</CollapseBody>
</Collapse>
</View> </View>
) )
}) })
} }
</View> </View>
</ScrollView> </ScrollView>
</View> </View>
...@@ -114,7 +123,7 @@ const styles = StyleSheet.create({ ...@@ -114,7 +123,7 @@ const styles = StyleSheet.create({
alignSelf: 'center', alignSelf: 'center',
}, },
item_image: { item_image: {
width: 96, width: 96,
height: 24, height: 24,
alignItems: 'flex-end' alignItems: 'flex-end'
} }
......
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