Skip to content

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

update design transaction history

parent 38f08cff
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 20 deletions
view/Auth.js
View file @ 89fd58ac
......@@ -410,7 +410,19 @@ class Auth extends React.Component {
<Stack.Screen name="Confirm Mobile" component={ConfirmMobile} />
<Stack.Screen name="Balance" component={Balance} />
<Stack.Screen name="Redeem Code" component={RedeemCode} />
<Stack.Screen name="Transaction History" component={TransactionHistory} />
<Stack.Screen name="Transaction History" component={TransactionHistory}
options={{
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 18,
},
title: 'TRANSACTION HISTORY'
}} />
<Stack.Screen name="Transaction Detail" component={TransactionDetail} />
{/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}
......@@ -430,7 +442,7 @@ class Auth extends React.Component {
},
title: 'REGISTER'
}} />
<Stack.Screen name="TopUpInfo" component={TopUpInfo} options={{ headerShown: false }}/>
<Stack.Screen name="TopUpInfo" component={TopUpInfo} options={{ headerShown: false }} />
<Stack.Screen name="Reward Detail" component={RewardDetail} />
<Stack.Screen name="Reward Select" component={RewardSelect}
options={{
......
view/OrderHistory.js
View file @ 89fd58ac
......@@ -4,6 +4,7 @@ import { Card } from 'react-native-shadow-cards'
import { connect } from 'react-redux';
import Axios from 'axios';
import session from '../function/session';
import moment from 'moment'
import { Divider } from 'react-native-elements';
class OrderHistory extends React.Component {
......@@ -43,7 +44,7 @@ class OrderHistory extends React.Component {
}
Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/transaction/list', params).then(res => {
let data = res.data.data
console.log("ini data : " + JSON.stringify(data))
console.log(data)
this.setState({
order_list: data,
indicator: false,
......@@ -63,24 +64,29 @@ class OrderHistory extends React.Component {
// console.log(this.state.order_list)
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={{ color: 'white', textAlign: 'center', fontSize: 18, fontFamily: 'Gotham-Black' }}>ORDER HISTORY</Text>
</View>
<ScrollView style={styles.body}>
{this.state.indicator == true ? (<ActivityIndicator style={{ justifyContent: "center" }} size="large" color="#c9af6d" />) :
this.state.order_list.map((item, key) => (
<TouchableOpacity key={key} onPress={() => this.props.navigation.navigate('Order Detail', { idTrans: item.id })}>
<View style={{ marginTop: 10 }} key={key}>
<View style={{ flex: 2, height: 150, margin: 10, borderRadius: 5, borderWidth: 1, flexDirection:'row' }}>
<View style={{ marginTop: 5 }} key={key}>
<View style={{ flex: 2, height: 120, margin: 5, borderRadius: 5, borderWidth: 1, flexDirection: 'row' }}>
<View style={{ justifyContent: 'center', margin: 10 }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'grey', fontSize: 20,margin:2 }}>{item.outlet}</Text>
<Text style={{ fontFamily: 'Gotham-Light', color: 'grey', fontSize: 20,margin:2 }}>{item.trans_date}</Text>
<Text style={{ fontFamily: 'Gotham-Black', color: '#c9af6d', fontSize: 20,margin:2 }}>{item.trans_status_display}</Text>
<TouchableOpacity onPress={() => this.handleLoggin()}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368',justifyContent:'center'}}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center', margin: 15 }}>Lihat Detail Pemesanan</Text>
<Text style={{ fontFamily: 'Gotham-Black', color: 'grey', fontSize: 12, margin: 2 }}>{item.outlet}</Text>
<Text style={{ fontFamily: 'Gotham-Light', color: 'grey', fontSize: 12, margin: 2 }}>{moment(item.trans_time).format("DD MMMM YYYY, hh:mm A")}</Text>
<Text style={{ fontFamily: 'Gotham-Black', color: '#c9af6d', fontSize: 12, margin: 2 }}>{item.trans_type_display}</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Order Detail', { idTrans: item.id })}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 12, textAlign: 'center', margin: 15 }}>Lihat Detail Pemesanan</Text>
</View>
</TouchableOpacity>
</View>
<View style={{ justifyContent: 'center', marginTop: 5 }}>
<View style={{ justifyContent: 'center', marginVertical: 5, marginLeft:20, borderLeftWidth: 1, borderColor: 'grey' }}>
<View style={{margin:30}}>
<Text style={{ fontFamily: 'Gotham-Black', color: '#c9af6d', fontSize: 12, margin: 2 }}>{item.trans_status_display}</Text>
</View>
</View>
</View>
</View>
......@@ -99,8 +105,9 @@ const styles = StyleSheet.create({
backgroundColor: 'white',
},
header: {
flex: 0.2,
flex: 0.1,
backgroundColor: '#ccb46c',
justifyContent: 'center'
},
body: {
......
view/TransactionHistory.js
View file @ 89fd58ac
......@@ -3,6 +3,7 @@ import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity
import { Card } from 'react-native-shadow-cards'
import { connect } from 'react-redux';
import Axios from 'axios';
import moment from 'moment'
class TransactionHistory extends React.Component {
constructor(props) {
......@@ -42,11 +43,25 @@ class TransactionHistory extends React.Component {
item.transactions.map((i, k) => (
<TouchableOpacity key={k} onPress={() => this.props.navigation.navigate('Transaction Detail', {idTrans:i.id})}>
<Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
<Text>TANGGAL : {i.trans_date}</Text>
<Text>TOTAL : {i.trans_total}</Text>
<Text>TRANSAKSI : {i.trans_type_display}</Text>
</Card>
<View style={{ marginTop: 5 }} key={k}>
<View style={{ flex: 2, height: 120, margin: 5, borderRadius: 5, borderWidth: 1, flexDirection: 'row' }}>
<View style={{ justifyContent: 'center', margin: 10 }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'grey', fontSize: 12, margin: 2 }}>{i.outlet}</Text>
<Text style={{ fontFamily: 'Gotham-Light', color: 'grey', fontSize: 12, margin: 2 }}>{moment(i.trans_time).format("DD MMMM YYYY, hh:mm A")}</Text>
<Text style={{ fontFamily: 'Gotham-Black', color: '#c9af6d', fontSize: 12, margin: 2 }}>{i.trans_type_display}</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Transaction Detail', { idTrans: i.id })}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 12, textAlign: 'center', margin: 15 }}>Lihat Detail Transaksi</Text>
</View>
</TouchableOpacity>
</View>
<View style={{ justifyContent: 'center', marginVertical: 5, marginLeft:20, borderLeftWidth: 1, borderColor: 'grey' }}>
<View style={{margin:30}}>
<Text style={{ fontFamily: 'Gotham-Black', color: '#c9af6d', fontSize: 12, margin: 2 }}>{i.trans_status_display}</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
))
))
......
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