Skip to content

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

update design home

parent e56e0390
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 33 deletions
view/Home.js
View file @ 696d76d2
import * as React from 'react'; import * as React from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, ActivityIndicator } from 'react-native'; import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, ActivityIndicator } from 'react-native';
import { Ionicons, MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons';
import { SliderBox } from "react-native-image-slider-box"; import { SliderBox } from "react-native-image-slider-box";
import { Card } from 'react-native-shadow-cards'; import { Card } from 'react-native-shadow-cards';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
...@@ -13,7 +14,7 @@ import * as Device from 'expo-device'; ...@@ -13,7 +14,7 @@ import * as Device from 'expo-device';
import ActionType from '../redux/globalActionType'; import ActionType from '../redux/globalActionType';
import session from '../function/session'; import session from '../function/session';
import Constants from 'expo-constants'; import Constants from 'expo-constants';
import info from '../app.json'; import info from '../app.json';
let version = info.expo.version let version = info.expo.version
...@@ -36,20 +37,20 @@ class Home extends React.Component { ...@@ -36,20 +37,20 @@ class Home extends React.Component {
} }
componentDidMount() { componentDidMount() {
console.log("INI BUILD VERSION : "+ Constants.nativeBuildVersio) console.log("INI BUILD VERSION : " + Constants.nativeBuildVersio)
this._account(); this._account();
this._getPermissions() this._getPermissions()
this._renderCarousell() this._renderCarousell()
console.log("INI LAT : " + this.props.lat) console.log("INI LAT : " + this.props.lat)
this._unsubscribe = this.props.navigation.addListener('focus', () => { this._unsubscribe = this.props.navigation.addListener('focus', () => {
this.setState({ this.setState({
indicator:true, indicator: true,
}) })
this._account(); this._account();
this._getPermissions() this._getPermissions()
this._renderCarousell() this._renderCarousell()
}); });
} }
...@@ -79,7 +80,7 @@ class Home extends React.Component { ...@@ -79,7 +80,7 @@ class Home extends React.Component {
let latitude = location.coords.latitude; let latitude = location.coords.latitude;
let longitude = location.coords.longitude; let longitude = location.coords.longitude;
this.setState({ this.setState({
my_lat: latitude, my_lat: latitude,
...@@ -132,9 +133,9 @@ class Home extends React.Component { ...@@ -132,9 +133,9 @@ class Home extends React.Component {
indicator: false indicator: false
}) })
}).catch(error => { }).catch(error => {
const {navigation} = this.props const { navigation } = this.props
let response = error.response.data let response = error.response.data
session(response,navigation) session(response, navigation)
Alert.alert(response.msg); Alert.alert(response.msg);
}) })
} }
...@@ -161,19 +162,19 @@ class Home extends React.Component { ...@@ -161,19 +162,19 @@ class Home extends React.Component {
indicator: false indicator: false
}) })
}).catch(error => { }).catch(error => {
const {navigation} = this.props const { navigation } = this.props
let response = error.response.data let response = error.response.data
session(response,navigation) session(response, navigation)
Alert.alert(response.msg); Alert.alert(response.msg);
}) })
} }
_pickup() { _pickup() {
this.props.navigation.navigate('Pickup Name', {from : 'home'}); this.props.navigation.navigate('Pickup Name', { from: 'home' });
} }
_delivery(){ _delivery() {
this.props.navigation.navigate('Delivery Address', {from : 'home'}); this.props.navigation.navigate('Delivery Address', { from: 'home' });
} }
_orderNow = () => { _orderNow = () => {
...@@ -196,6 +197,18 @@ class Home extends React.Component { ...@@ -196,6 +197,18 @@ class Home extends React.Component {
<View style={styles.container}> <View style={styles.container}>
<ScrollView> <ScrollView>
<View style={{ flex: 6 }}> <View style={{ flex: 6 }}>
<View style={styles.header}>
{/* <StatusBar barStyle='dark-content' /> */}
{/* <Text style={styles.titleText}>{i18n.t('register')}</Text> */}
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={styles.titleText}>TODAY PROMOTIONS</Text>
</View>
<View style={{ margin: 15, flex: 0.15, alignItems: 'flex-end' }}>
<TouchableOpacity>
<SimpleLineIcons name="bell" size={24} color="white" />
</TouchableOpacity>
</View>
</View>
<SliderBox <SliderBox
images={this.state.images} images={this.state.images}
autoplay autoplay
...@@ -233,15 +246,24 @@ class Home extends React.Component { ...@@ -233,15 +246,24 @@ class Home extends React.Component {
<View style={styles.card}> <View style={styles.card}>
<Card> <Card>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}> <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity style={styles.buttonDelivery} onPress={() => this._delivery() }> {/* <TouchableOpacity style={styles.buttonDelivery} onPress={() => this._delivery()}>
<Text style={{ textAlign: 'center', color: '#354175', fontWeight: 'bold' }}>{i18n.t('delivery')}</Text> <Text style={{ textAlign: 'center', color: '#354175', fontWeight: 'bold' }}>{i18n.t('delivery')}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.buttonPickup} onPress={() => this._pickup()}> <TouchableOpacity style={styles.buttonPickup} onPress={() => this._pickup()}>
<Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text> <Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text>
</TouchableOpacity> */}
<TouchableOpacity style={styles.buttonDelivery} onPress={() => this._delivery()}>
<Text style={{ textAlign: 'center', color: '#354175', fontWeight: 'bold' }}>DELIVERY</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonPickup} onPress={() => this._pickup()}>
<Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>PICK UP</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={{ textAlign: 'center', fontSize: 12, }}> {/* <Text style={{ textAlign: 'center', fontSize: 12, }}>
{i18n.t('orderInfo')} {i18n.t('orderInfo')}
</Text> */}
<Text style={{ textAlign: 'center', fontSize: 12, }}>
YOU WILL PICKUP YOUR ORDER AT
</Text> </Text>
{this.state.indicator == true ? ( {this.state.indicator == true ? (
<ActivityIndicator size="small" color="#c9af6d" /> <ActivityIndicator size="small" color="#c9af6d" />
...@@ -250,8 +272,11 @@ class Home extends React.Component { ...@@ -250,8 +272,11 @@ class Home extends React.Component {
Excelso {this.props.name_outlet} Excelso {this.props.name_outlet}
</Text> </Text>
)} )}
<TouchableOpacity style={styles.submitOrder} activeOpacity={.5} onPress={() => this._orderNow()}> {/* <TouchableOpacity style={styles.submitOrder} activeOpacity={.5} onPress={() => this._orderNow()}>
<Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>{i18n.t('orderNow')}</Text> <Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>{i18n.t('orderNow')}</Text>
</TouchableOpacity> */}
<TouchableOpacity style={styles.submitOrder} activeOpacity={.5} onPress={() => this._orderNow()}>
<Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>ORDER NOW</Text>
</TouchableOpacity> </TouchableOpacity>
</Card> </Card>
{ {
...@@ -278,21 +303,49 @@ class Home extends React.Component { ...@@ -278,21 +303,49 @@ class Home extends React.Component {
( (
<View style={styles.card}> <View style={styles.card}>
<Card style={{ padding: 10, margin: 10, alignContent: 'center' }}> <Card style={{ padding: 20, margin: 10, alignContent: 'center' }}>
<Text> {/* <Text>
{i18n.t('yourCardNumber')} | {this.state.expire_date}{'\n'} {i18n.t('yourCardNumber')} | {this.state.expire_date}{'\n'}
</Text> */}
<Text>
YOUR CARD NUMBER | {this.state.expire_date}
</Text> </Text>
<Text style={{ textAlign: "center", fontSize: 40, color: '#c9af6d' }}> <View style={{ paddingHorizontal: 10 }}>
{this.state.account_number} <Text style={{ textAlign: "center", fontSize: 30, color: '#c9af6d' }}>
</Text> {this.state.account_number}
<View style={styles.line}></View> </Text>
<Text style={{ textAlign: 'left', fontWeight: 'bold' }}> {'\n'} </View>
{i18n.t('balance')} {this.state.balance}{'\n'}
</Text>
<View style={styles.line}></View> <View style={styles.line}></View>
<Text style={{ textAlign: 'left', fontWeight: 'bold' }}>{'\n'}
{/* <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>
{i18n.t('balance')} {this.state.balance}
</Text> */}
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={{ flex: 0.3, justifyContent: 'center' }}>
{/* <Text>{i18n.t('balance')}</Text> */}
<Text style={{ fontSize: 10 }}>BALANCE</Text>
</View>
<View style={{ flex: 0.7 }}>
<Text style={{ fontSize: 20 }}>IDR. {this.state.balance}</Text>
</View>
</View>
<View style={styles.line2}></View>
{/* <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>
{i18n.t('point')} {this.state.point} {i18n.t('point')} {this.state.point}
</Text> </Text> */}
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={{ flex: 0.3, justifyContent: 'center' }}>
{/* <Text>{i18n.t('balance')}</Text> */}
<Text style={{ fontSize: 10 }}>POINTS</Text>
</View>
<View style={{ flex: 0.7 }}>
<Text style={{ fontSize: 20 }}>IDR. {this.state.point}</Text>
</View>
</View>
</Card> </Card>
</View> </View>
) )
...@@ -300,9 +353,9 @@ class Home extends React.Component { ...@@ -300,9 +353,9 @@ class Home extends React.Component {
<TouchableOpacity style={styles.submitUpgradePemium} activeOpacity={.5} onPress={this.onPress}> <TouchableOpacity style={styles.submitUpgradePemium} activeOpacity={.5} onPress={this.onPress}>
<Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>TOP BALANCE </Text> <Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>TOP BALANCE </Text>
</TouchableOpacity> </TouchableOpacity>
<Text> App version : {version} </Text> <Text> App version : {version} </Text>
<Text> Expo build version : {buildNumber} </Text> <Text> Expo build version : {buildNumber} </Text>
<View style={{ height: 60 }}></View> <View style={{ height: 60 }}></View>
</View> </View>
</View> </View>
...@@ -317,6 +370,20 @@ const styles = StyleSheet.create({ ...@@ -317,6 +370,20 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
backgroundColor: 'white', backgroundColor: 'white',
}, },
header: {
flex: 0.1,
flexDirection: 'row',
backgroundColor: '#CFB368',
// justifyContent: 'space-between',
// alignItems: 'center'
},
titleText: {
margin: 15,
fontSize: 18,
fontWeight: 'bold',
color: 'white',
// textAlign: 'center'
},
content: { content: {
flex: 1, flex: 1,
...@@ -378,7 +445,15 @@ const styles = StyleSheet.create({ ...@@ -378,7 +445,15 @@ const styles = StyleSheet.create({
line: { line: {
borderBottomColor: '#c9af6d', borderBottomColor: '#c9af6d',
borderBottomWidth: StyleSheet.hairlineWidth, borderBottomWidth: 2,
alignSelf: 'stretch',
width: "100%",
height: 10,
bottom: 5,
},
line2: {
borderBottomColor: '#c9af6d',
borderBottomWidth: 1,
alignSelf: 'stretch', alignSelf: 'stretch',
width: "100%", width: "100%",
height: 10, height: 10,
...@@ -410,7 +485,7 @@ const mapDispatchToProps = (dispacth) => { ...@@ -410,7 +485,7 @@ const mapDispatchToProps = (dispacth) => {
long: cordinate.long, long: cordinate.long,
} }
}), }),
} }
} }
......
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