889 lines
29 KiB
JavaScript
889 lines
29 KiB
JavaScript
import React, {useCallback, useRef, useState} from 'react'
|
|
import {Modal, StyleSheet, TouchableOpacity, View} from 'react-native'
|
|
import Image from 'react-native-fast-image'
|
|
import {createBottomTabNavigator} from 'react-navigation-tabs'
|
|
import { createStackNavigator } from 'react-navigation-stack'
|
|
import NewsScreen from '../screens/news/News'
|
|
import RoomScreen from '../screens/room/Room'
|
|
import ProductScreen from '../screens/product/Product'
|
|
import MeterScreen from '../screens/meters/Meter'
|
|
import BillScreen from '../screens/bill/Bill'
|
|
import NotificationScreen from '../screens/notification/Notification'
|
|
import ServiceScreen from '../screens/service/Service'
|
|
import NewsDetailScreen from '../screens/news/NewsDetail'
|
|
import RoomDetailScreen from '../screens/room/RoomDetail'
|
|
import SettingsNotificationScreen from '../screens/service/SettingNotification'
|
|
import SuggestionScreen from '../screens/service/Suggestion'
|
|
import EditProfileScreen from '../screens/profile/EditProfile'
|
|
import ProfileScreen from '../screens/profile/Profile'
|
|
import Icon from 'src/components/Icon'
|
|
import PersonRoomReservationScreen from '../screens/room/PersonRoomReservation'
|
|
import CompanyRoomReservationScreen from '../screens/room/CompanyRoomReservation'
|
|
import RoomHeaderReservationScreen from '../screens/room/RoomHeaderReservation'
|
|
import Text from 'src/components/Text'
|
|
import {bindActionCreators} from 'redux'
|
|
import {appCleanUser, appSetNotification, setServerMode} from '../redux/app/action'
|
|
import {connect, useDispatch, useSelector} from 'react-redux'
|
|
import PaymentScreen from '../screens/bill/Payment'
|
|
import MessageObject from '../screens/object/MessageObject'
|
|
import MessageObjectDetail from '../screens/object/MessageObjectDetail'
|
|
import RegisterScreen from '../screens/login/Register'
|
|
import RegisterProfileScreen from '../screens/login/RegisterProfile'
|
|
import RegisterFormLoginScreen from '../screens/login/RegisterFormLogin'
|
|
import LoginScreen from '../screens/login/Login'
|
|
import SignaturePadScreen from '../screens/object/SignaturePadScreen'
|
|
import WaterMeter from '../screens/meters/WaterMeter'
|
|
import PEAMeter from '../screens/meters/PEAMeter'
|
|
import ZoneAreaScreen from '../screens/room/ZoneAreaScreen'
|
|
import RepairServiceDetail from '../screens/repair/RepairServiceDetail'
|
|
import RepairService from '../screens/repair/RepairService'
|
|
import RepairIndex from '../screens/repair/RepairIndex'
|
|
import RepairConfirm from '../screens/repair/RepairConfirm'
|
|
import RepairHistory from '../screens/repair/RepairHistory'
|
|
import RepairSuccess from '../screens/repair/RepairSuccess'
|
|
import RepairHistoryDetail from '../screens/repair/RepairHistoryDetail'
|
|
import RewardScreen from '../screens/reward/RewardScreen'
|
|
import RewardDetailScreen from '../screens/reward/RewardDetailScreen'
|
|
import QuestionScreen from '../screens/service/QuestionScreen'
|
|
import TermsAndCondition from '../screens/login/TermsAndCondition'
|
|
import MoveOutScreen from "../screens/service/MoveOutScreen";
|
|
import RoomReservation from "../screens/room/RoomReservationWebView";
|
|
import {locale, t} from 'src/utils/i18n'
|
|
import {store} from 'src/redux/store'
|
|
import RedeemScreen from "../screens/redeem/RedeemScreen";
|
|
import HistoryRedeem from "../screens/redeem/HistoryRedeem";
|
|
import AllRewards from "../screens/redeem/AllRewards";
|
|
import MyRewards from "../screens/redeem/MyRewards";
|
|
import RewardDetail from "../screens/redeem/RewardDetail";
|
|
import RewardTermCondition from "../screens/redeem/RewardTermCondition"
|
|
import ScanCoupon from "../screens/redeem/ScanCoupon";
|
|
import ForgetPasswordScreen from '../screens/forget_password/ForgetPasswordScreen'
|
|
import VerifyOTP from '../screens/forget_password/VerifyOTP'
|
|
import PasswordCode from '../screens/forget_password/PasswordCode'
|
|
import PaymentDetail from '../screens/bill/PaymentDetail'
|
|
import PaymentConfirm from '../screens/bill/PaymentConfirm'
|
|
import MembershipLevelDetail from '../screens/redeem/MembershipLeveDetail'
|
|
import MemberPoinExpire from '../screens/redeem/MemberPoinExpire'
|
|
|
|
const screenConfig = (screen, title, backgroundColor = undefined) => ({
|
|
screen,
|
|
navigationOptions: defaultNavOption(title, backgroundColor)
|
|
})
|
|
|
|
const NavWithRightIcon = (title, iconName, routeName) => ({ navigation }) => ({
|
|
title: t(title),
|
|
headerStyle: {
|
|
backgroundColor: '#00420A',
|
|
height: 75,
|
|
elevation: 0,
|
|
shadowOpacity: 0,
|
|
},
|
|
headerTintColor: '#000',
|
|
headerTitleStyle: {
|
|
fontWeight: '400',
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
textAlign: 'left',
|
|
flex: 1,
|
|
fontFamily: 'Prompt-Regular',
|
|
marginLeft: 0,
|
|
|
|
},
|
|
headerTitleContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerLeftContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '10%',
|
|
},
|
|
headerTitleAllowFontScaling: false,
|
|
|
|
headerLeft: (
|
|
<TouchableOpacity
|
|
style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', }}
|
|
onPress={() => navigation.goBack()}>
|
|
<Icon name="ic_back" size={20} color="#fff"/>
|
|
</TouchableOpacity>
|
|
),
|
|
headerRight: (
|
|
<TouchableOpacity style={{ paddingRight: 16 }} onPress={() => {navigation.navigate(routeName)}}>
|
|
<Icon name={iconName} color={'white'} size={20}/>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
|
|
const defaultNavOption = (title, backgroundColor) => ({ navigation }) => ({
|
|
title: t(title),
|
|
headerStyle: {
|
|
backgroundColor: backgroundColor || '#00420A',
|
|
height: 75,
|
|
marginTop: 0,
|
|
elevation: 0,
|
|
shadowOpacity: 0,
|
|
},
|
|
headerTintColor: '#000',
|
|
headerTitleStyle: {
|
|
fontWeight: '400',
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
textAlign: 'left',
|
|
flex: 1,
|
|
fontFamily: 'Prompt-Regular',
|
|
marginLeft: 0,
|
|
|
|
},
|
|
headerTitleContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerLeftContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '10%',
|
|
},
|
|
headerTitleAllowFontScaling: false,
|
|
|
|
headerLeft: (
|
|
<TouchableOpacity
|
|
style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', }}
|
|
onPress={() => navigation.goBack()}>
|
|
<Icon name="ic_back" size={20} color="#fff"/>
|
|
</TouchableOpacity>
|
|
),
|
|
headerRight: (
|
|
<TouchableOpacity>
|
|
{/*<Icon name="ic_back" size={20} color="#fff"/>*/}
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
|
|
const BottomTab = createBottomTabNavigator({
|
|
HomeScreen: {
|
|
screen: NewsScreen,
|
|
navigationOptions: ({ navigation }) => ({
|
|
tabBarVisible: true,
|
|
tabBarLabel: ({ focused, tintColor }) => {
|
|
if (focused) {
|
|
tintColor = '#FFCC00'
|
|
} else {
|
|
tintColor = 'rgba(255, 255, 255, 0.65)'
|
|
}
|
|
|
|
return <View style={{ justifyContent: 'center', alignItems: 'center' }}>
|
|
<Icon name={'ic_newspaper'} size={20} color={tintColor}/>
|
|
<Text style={[styles.textBottomTab, { color: tintColor }]}>{t('news')}</Text>
|
|
</View> /* 'Room' */
|
|
},
|
|
tabBarIcon: ({ focused, tintColor }) => {
|
|
if (focused) {
|
|
tintColor = '#FFCC00'
|
|
} else {
|
|
tintColor = 'rgba(255, 255, 255, 0.65)'
|
|
}
|
|
return <View></View>
|
|
}
|
|
})
|
|
},
|
|
RoomScreen: {
|
|
// screen: ZoneAreaScreen,
|
|
screen: RoomReservation,
|
|
navigationOptions: ({ navigation }) => ({
|
|
tabBarLabel: ({ focused, tintColor }) => {
|
|
if (focused) {
|
|
tintColor = '#FFCC00'
|
|
} else {
|
|
tintColor = 'rgba(255, 255, 255, 0.65)'
|
|
}
|
|
return <View style={{ justifyContent: 'center', alignItems: 'center' }}>
|
|
<Icon name={'ic_bed-outline'} size={22} color={tintColor}/>
|
|
<Text style={[styles.textBottomTab, { color: tintColor }]}>{t('room')}</Text>
|
|
</View> /* 'Room' */
|
|
},
|
|
tabBarIcon: ({ focused, tintColor }) => {
|
|
if (focused) {
|
|
tintColor = '#FFCC00'
|
|
} else {
|
|
tintColor = 'rgba(255, 255, 255, 0.65)'
|
|
}
|
|
}
|
|
})
|
|
},
|
|
FavorsScreen: {
|
|
screen: RewardScreen,
|
|
navigationOptions: ({ navigation }) => ({
|
|
tabBarLabel: ({ focused, tintColor }) => {
|
|
if (focused) {
|
|
tintColor = '#FFCC00'
|
|
} else {
|
|
tintColor = 'rgba(255, 255, 255, 0.65)'
|
|
}
|
|
return <View style={{ justifyContent: 'center', alignItems: 'center' }}>
|
|
<Icon name={'ic_star_sq'} size={20} color={tintColor}/>
|
|
<Text style={[styles.textBottomTab, { color: tintColor }]}>{t('products')}</Text>
|
|
</View> /* 'Favaors' */
|
|
},
|
|
tabBarIcon: ({ focused, tintColor }) => {
|
|
if (focused) {
|
|
tintColor = '#FFCC00'
|
|
} else {
|
|
tintColor = 'rgba(255, 255, 255, 0.65)'
|
|
}
|
|
}
|
|
})
|
|
},
|
|
ServiceScreen: {
|
|
screen: ServiceScreen/* ServiceScreen */,
|
|
navigationOptions: ({ navigation }) => ({
|
|
tabBarLabel: ({ focused, tintColor }) => {
|
|
if (focused) {
|
|
tintColor = '#FFCC00'
|
|
} else {
|
|
tintColor = 'rgba(255, 255, 255, 0.65)'
|
|
}
|
|
|
|
return <View style={{ justifyContent: 'center', alignItems: 'center' }}>
|
|
<Icon name={'ic_grid'} size={20} color={tintColor}/>
|
|
<Text style={[styles.textBottomTab, { color: tintColor }]}>{t('service')}</Text>
|
|
</View> /* 'Room' */
|
|
},
|
|
tabBarIcon: ({ focused, tintColor }) => {
|
|
if (focused) {
|
|
tintColor = '#FFCC00'
|
|
} else {
|
|
tintColor = 'rgba(255, 255, 255, 0.65)'
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
{
|
|
tabBarOptions: {
|
|
activeTintColor: '#FFCC00',
|
|
tabStyle: { backgroundColor: '#00420A', color: 'rgba(255, 255, 255, 0.65)' },
|
|
}
|
|
})
|
|
//export default LoginScreen
|
|
const mapDisPatchToProps = state => {
|
|
return state.app
|
|
}
|
|
const setNotification = dispatch => bindActionCreators({ appSetNotification }, dispatch)
|
|
const NotificationIcon = connect(mapDisPatchToProps, setNotification)(({ count_noti, user }) => {
|
|
let count = 0
|
|
if (count_noti) {
|
|
count = count_noti
|
|
}
|
|
if (count > 0) {
|
|
return <View>
|
|
<View
|
|
style={{
|
|
width: 16,
|
|
height: 16,
|
|
backgroundColor: '#FF2D55',
|
|
borderRadius: 50,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
position: 'absolute',
|
|
right: '10%',
|
|
top: '-10%',
|
|
zIndex: 1,
|
|
roomLength: 0
|
|
}}>
|
|
<Text style={{ color: 'white', fontSize: 8 }}>{count && count > 9 ? '9+' : count}</Text>
|
|
</View>
|
|
<View style={{ marginRight: 10 }}>
|
|
<Icon name={'ic_bell'} size={20} color={'white'}/>
|
|
</View>
|
|
</View>
|
|
} else {
|
|
return (
|
|
<View>
|
|
<View style={{ marginRight: 10 }}>
|
|
<Icon name={'ic_bell'} size={20} color={'white'}/>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
})
|
|
|
|
const MainTitle = connect(state => ({
|
|
user: state.app.user,
|
|
state_app: state.app,
|
|
}))((props) => {
|
|
let userText = ''
|
|
let room = ''
|
|
let roomPopup = ''
|
|
let name = ''
|
|
let projectName = ''
|
|
console.log('props.user.', props.user)
|
|
console.log('props.state_app:', props.state_app)
|
|
if (props.user && typeof props.user.room != 'undefined') {
|
|
room = ' ' + props.user.room
|
|
roomPopup = props.user.room
|
|
// console.log('room',room)
|
|
if (room.length >= 16) {
|
|
room = room.substring(0, 16) + '...'
|
|
}
|
|
}
|
|
|
|
if (props.user && typeof props.user.name != 'undefined') {
|
|
name = props.user.name.split(' ')
|
|
}
|
|
if (props.user) {
|
|
userText = `${name[0]}`;
|
|
projectName = props.user.project_name
|
|
}
|
|
return <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '89%'}}>
|
|
<View>
|
|
<Text style={{ fontSize: 16, color: '#FFFFFF', marginLeft: 10, marginTop: 3, marginBottom: 5 }}>{t('charoensin_asset')} {projectName}</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{color: 'white'}}>2.0</Text>
|
|
</View>
|
|
</View>
|
|
})
|
|
|
|
const MainHeader = ({ navigation }) => {
|
|
const lastCount = useRef(0)
|
|
const counter = useRef(0)
|
|
const [showModal, setShowModal] = useState(false)
|
|
const dispatch = useDispatch()
|
|
const server_mode = useSelector(state => state.app.server_mode)
|
|
const openSecretChamber = useCallback(() => {
|
|
const t = new Date().getTime()
|
|
if (t - lastCount.current < 500) {
|
|
if (++counter.current >= 10) {
|
|
setShowModal(true)
|
|
}
|
|
} else {
|
|
counter.current = 1
|
|
}
|
|
lastCount.current = t
|
|
}, [])
|
|
|
|
const changeServer = useCallback((mode) => {
|
|
dispatch(setServerMode(mode))
|
|
setShowModal(false)
|
|
}, [])
|
|
return <View style={[{ flex: 1, alignItems: 'center', flexDirection: 'row', marginTop: 0, paddingLeft: 10, backgroundColor: server_mode === 'develop' ? '#ff0000' : 'transparent' }]}>
|
|
<TouchableOpacity
|
|
onPress={openSecretChamber}
|
|
activeOpacity={1}>
|
|
<Image
|
|
style={{ width: 35, height: 35, }}
|
|
source={require('../../assets/images/logo_white_border.png')}
|
|
/>
|
|
</TouchableOpacity>
|
|
<MainTitle/>
|
|
<Modal transparent={true} visible={showModal}>
|
|
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
|
<View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10 }}>
|
|
<View>
|
|
<Text>ตั้งค่า Server</Text>
|
|
</View>
|
|
<View style={{ marginTop: 10 }}>
|
|
<TouchableOpacity style={{ padding: 10 }} onPress={() => changeServer('production')}>
|
|
<Text style={{ color: server_mode == 'production' ? '#004287' : '#aaa' }}>PRODUCTION</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={{ padding: 10 }} onPress={() => changeServer('develop')}>
|
|
<Text style={{ color: server_mode == 'develop' ? '#004287' : '#aaa' }}>DEVELOP</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</View>
|
|
}
|
|
|
|
const HeaderLeftComponent = (navigation, routeName = null, propsRoute = null) => {
|
|
return (
|
|
<TouchableOpacity
|
|
style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', }}
|
|
onPress={() => routeName ? navigation.navigate(routeName, propsRoute || null) : navigation.goBack()}>
|
|
<Icon name="ic_back" size={20} color="#fff"/>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const defaultHeaderStyle = () => {
|
|
return {
|
|
headerStyle: styles.defaultHeaderStyle,
|
|
headerTintColor: '#000',
|
|
headerTitleStyle: styles.defaultHeaderTitleStyle,
|
|
headerTitleContainerStyle: styles.defaultHeaderTitleContainerStyle,
|
|
headerLeftContainerStyle: styles.defaultHeaderLeftContainerStyle,
|
|
headerTitleAllowFontScaling: false,
|
|
}
|
|
}
|
|
|
|
const AppStack = createStackNavigator({
|
|
BottomTab: {
|
|
screen: BottomTab,
|
|
navigationOptions: ({navigation}) => {
|
|
let langIcon
|
|
console.log('locale >>> ', locale());
|
|
|
|
switch (locale()) {
|
|
case 'th':
|
|
langIcon = require('../../assets/images/locale_th.png')
|
|
break
|
|
case 'my':
|
|
langIcon = require('../../assets/images/locale_my.png')
|
|
break
|
|
case 'km':
|
|
langIcon = require('../../assets/images/locale_km.png')
|
|
break
|
|
default:
|
|
langIcon = require('../../assets/images/locale_en.png')
|
|
break
|
|
}
|
|
return {
|
|
// title: 'Charoensin Condo',
|
|
headerStyle: {
|
|
backgroundColor: '#00420A',
|
|
height: 75,
|
|
marginTop: 0,
|
|
elevation: 0,
|
|
shadowOpacity: 0,
|
|
},
|
|
headerTitleStyle: {
|
|
fontWeight: '200',
|
|
fontSize: 20,
|
|
color: '#fff',
|
|
textAlign: 'left',
|
|
flex: 1,
|
|
marginLeft: 30,
|
|
},
|
|
headerRight: (
|
|
<View style={{marginRight: 0, justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
|
|
<TouchableOpacity onPress={() => navigation.navigate('LanguageSelect')} style={{marginRight: 8}}>
|
|
<View style={{width: 30, height: 30, alignItems: 'center', justifyContent: 'center'}}>
|
|
<Image style={{width: 25, height: 25}} source={langIcon}/></View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={{marginRight: 6}} onPress={() => navigation.navigate('Notification')}>
|
|
<NotificationIcon/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
),
|
|
headerLeftContainerStyle: {
|
|
width: '80%',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerLeft: () => <MainHeader navigation={navigation}/>,
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
Room: screenConfig(RoomScreen, 'project'),
|
|
RoomDetail: screenConfig(RoomDetailScreen, 'room_detail'),
|
|
ZoneArea: screenConfig(ZoneAreaScreen, 'room_detail'),
|
|
PersonRoomReservation: screenConfig(PersonRoomReservationScreen, 'book_room'),
|
|
CompanyRoomReservation: screenConfig(CompanyRoomReservationScreen, 'book_room'),
|
|
RoomHeaderReservation: screenConfig(RoomHeaderReservationScreen, 'book_room'),
|
|
News: {
|
|
screen: NewsScreen,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('charoensin_asset'),
|
|
headerLeft: (
|
|
<TouchableOpacity onPress={() => navigation.goBack()}>
|
|
<Text> {'<'} </Text>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
NewsDetail: {
|
|
screen: NewsDetailScreen,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: '',
|
|
headerStyle: {
|
|
backgroundColor: '#00420A',
|
|
height: 75,
|
|
marginTop: 0,
|
|
elevation: 0,
|
|
shadowOpacity: 0,
|
|
},
|
|
headerTitleStyle: {
|
|
fontWeight: '200',
|
|
fontSize: 20,
|
|
color: '#fff',
|
|
flex: 1,
|
|
marginLeft: 10,
|
|
},
|
|
headerLeft: null,
|
|
headerRight: (
|
|
<TouchableOpacity onPress={() => navigation.goBack()}>
|
|
<Text style={{color: '#fff', fontSize: 16}}> {t('close')} </Text>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
Product: {
|
|
screen: ProductScreen,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('products'),
|
|
headerLeft: (
|
|
<TouchableOpacity onPress={() => navigation.goBack()}>
|
|
<Text> {'<'} </Text>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
Notification: screenConfig(NotificationScreen, 'notification')
|
|
// {
|
|
// screen: NotificationScreen,
|
|
// navigationOptions: ({navigation}) => ({
|
|
// title: 'Notification',
|
|
// headerLeft: (
|
|
// <TouchableOpacity onPress={() => navigation.goBack()}>
|
|
// <Text> {'<'} </Text>
|
|
// </TouchableOpacity>
|
|
// )
|
|
// })
|
|
// }
|
|
,
|
|
Meter: screenConfig(MeterScreen, 'smart_meter'),
|
|
WaterMeter: screenConfig(WaterMeter, 'save_water_meter'),
|
|
PEAMeter: screenConfig(PEAMeter, 'save_electric_meter'),
|
|
// Bill: screenConfig(BillScreen, 'รายละเอียดยอดค้างชำระ'),
|
|
Bill: screenConfig(BillScreen, 'outstanding_balance_detail'),
|
|
Payment: screenConfig(PaymentScreen, 'pay'),
|
|
PaymentDetail: screenConfig(PaymentDetail, 'payment_detail'),
|
|
PaymentConfirm: screenConfig(PaymentConfirm, 'payment_detail'),
|
|
SettingsNotification: screenConfig(SettingsNotificationScreen, 'noti_setting'),
|
|
MoveOut: screenConfig(MoveOutScreen, 'move_out'),
|
|
Suggestion: screenConfig(SuggestionScreen, 'suggestion'),
|
|
Question: {
|
|
screen: QuestionScreen,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('faqs'),
|
|
headerStyle: {
|
|
backgroundColor: '#00420A',
|
|
marginTop: 0,
|
|
height: 75
|
|
},
|
|
headerTitleStyle: {
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
fontFamily: 'Prompt-Regular',
|
|
fontWeight: undefined,
|
|
textAlign: 'left',
|
|
flex: 1,
|
|
marginLeft: 0
|
|
}, headerLeftContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '10%',
|
|
|
|
},
|
|
headerLeft: (
|
|
<TouchableOpacity onPress={() => navigation.goBack()} style={{flex: 1, alignItems: 'center'}}>
|
|
<Icon name={'ic_back'} color={'white'} size={20}/>
|
|
</TouchableOpacity>
|
|
),
|
|
headerRight: (
|
|
<TouchableOpacity onPress={() => navigation.state.params.onRefreshMessage()} style={{paddingRight: 16}}>
|
|
<Icon name={'ic_refresh'} color={'white'} size={20}/>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
Profile: screenConfig(ProfileScreen, 'profile', '#3AA40C'),
|
|
EditProfile: screenConfig(EditProfileScreen, 'edit_profile', '#3AA40C'),
|
|
Object: {
|
|
screen: MessageObject,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('mail_and_parcel'),
|
|
headerStyle: {
|
|
backgroundColor: '#00420A',
|
|
height: 75,
|
|
elevation: 0,
|
|
shadowOpacity: 0,
|
|
},
|
|
headerTintColor: '#000',
|
|
headerTitleStyle: {
|
|
fontWeight: '400',
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
textAlign: 'left',
|
|
flex: 1,
|
|
fontFamily: 'Prompt-Regular',
|
|
marginLeft: 0,
|
|
|
|
},
|
|
headerTitleContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerLeftContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '10%',
|
|
},
|
|
headerTitleAllowFontScaling: false,
|
|
|
|
headerLeft: (
|
|
<TouchableOpacity
|
|
style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', }}
|
|
onPress={() => navigation.goBack()}>
|
|
<Icon name="ic_back" size={20} color="#fff"/>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
ObjectDetail: screenConfig(MessageObjectDetail, 'mail_and_parcel'),
|
|
Signature: screenConfig(SignaturePadScreen, 'please_sign'),
|
|
Login: {
|
|
screen: LoginScreen,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('login'),
|
|
headerStyle: {
|
|
backgroundColor: '#00420A',
|
|
marginTop: 0,
|
|
height: 75
|
|
},
|
|
headerTitleStyle: {
|
|
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
fontFamily: 'Prompt-Regular',
|
|
fontWeight: undefined,
|
|
}, headerLeftContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '10%',
|
|
|
|
},
|
|
headerLeft: (
|
|
<TouchableOpacity onPress={() => navigation.navigate('HomeScreen')}>
|
|
<Icon name={'ic_back'} color={'white'} size={20}/>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
//Forget Password Screen
|
|
ForgetPassword: {
|
|
screen: ForgetPasswordScreen,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('forget_password'),
|
|
headerStyle: styles.defaultHeaderStyle,
|
|
headerTitleStyle: {
|
|
...styles.defaultHeaderTitleStyle,
|
|
fontWeight: undefined,
|
|
},
|
|
headerLeftContainerStyle: styles.defaultHeaderLeftContainerStyle,
|
|
headerLeft: (
|
|
<TouchableOpacity onPress={() => navigation.navigate('HomeScreen')}>
|
|
<Icon name={'ic_back'} color={'white'} size={20}/>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
VerifyOTP: {
|
|
screen: VerifyOTP,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('verify_otp'),
|
|
headerStyle: styles.defaultHeaderStyle,
|
|
headerTitleStyle: {
|
|
...styles.defaultHeaderTitleStyle,
|
|
fontWeight: undefined,
|
|
},
|
|
headerLeftContainerStyle: styles.defaultHeaderLeftContainerStyle,
|
|
headerLeft: (
|
|
<TouchableOpacity onPress={() => navigation.navigate('ForgetPassword')}>
|
|
<Icon name={'ic_back'} color={'white'} size={20}/>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
PasswordCode: {
|
|
screen: PasswordCode,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('new_password'),
|
|
headerStyle: styles.defaultHeaderStyle,
|
|
headerTitleStyle: {
|
|
...styles.defaultHeaderTitleStyle,
|
|
fontWeight: undefined,
|
|
},
|
|
headerLeftContainerStyle: styles.defaultHeaderLeftContainerStyle,
|
|
headerLeft: (
|
|
<TouchableOpacity onPress={() => navigation.navigate('VerifyOTP')}>
|
|
<Icon name={'ic_back'} color={'white'} size={20}/>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
//Register Screen
|
|
Register: screenConfig(RegisterScreen, 'register'),
|
|
RegisterFormLogin: screenConfig(RegisterFormLoginScreen, 'register'),
|
|
RegisterProfile: screenConfig(RegisterProfileScreen, 'register'),
|
|
//Repair Service
|
|
/*RepairService: {
|
|
screen: RepairService,
|
|
navigationOptions: NavWithRightIcon('request_repair_and_Other', 'ic_clock_history', 'RepairHistory')
|
|
},*/
|
|
Repair: screenConfig(RepairIndex, 'request_repair'),
|
|
RepairDetail: screenConfig(RepairServiceDetail, 'service_detail'),
|
|
RepairConfirm: screenConfig(RepairConfirm, 'confirm_info'),
|
|
RepairHistory: screenConfig(RepairHistory, 'repair_history'),
|
|
RepairSuccess: screenConfig(RepairSuccess, 'request_sent'),
|
|
// RepairHistoryDetail: screenConfig(RepairHistoryDetail, 'repair_history_detail'),
|
|
RepairHistoryDetail: {
|
|
screen: RepairHistoryDetail,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('repair_history_detail'),
|
|
headerStyle: {
|
|
backgroundColor: '#00420A',
|
|
height: 75,
|
|
elevation: 0,
|
|
shadowOpacity: 0,
|
|
},
|
|
headerTintColor: '#000',
|
|
headerTitleStyle: {
|
|
fontWeight: '400',
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
textAlign: 'left',
|
|
flex: 1,
|
|
fontFamily: 'Prompt-Regular',
|
|
marginLeft: 0,
|
|
|
|
},
|
|
headerTitleContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerLeftContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '10%',
|
|
},
|
|
headerTitleAllowFontScaling: false,
|
|
|
|
headerLeft: (
|
|
<TouchableOpacity
|
|
style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', }}
|
|
onPress={() => navigation.goBack()}>
|
|
<Icon name="ic_back" size={20} color="#fff"/>
|
|
</TouchableOpacity>
|
|
),
|
|
headerRight: (
|
|
navigation.state.params.statusRepair !== 'Success' && navigation.state.params.statusRepair !== 'Cancel' && navigation.state.params.type !== 'effect_repair' &&
|
|
<TouchableOpacity onPress={() => navigation.state.params.cancelRepair()} style={{marginRight: 15}}>
|
|
<Text style={{color: '#FF3B30', fontSize: 18}}>{t('cancel')}</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
},
|
|
//Reward
|
|
Reward: screenConfig(RewardScreen, 'redeem_reward'),
|
|
RewardDetailScreen: screenConfig(RewardDetailScreen, 'product_detail'),
|
|
//Redeem
|
|
Redeem: screenConfig(RedeemScreen, 'reward'),
|
|
HistoryRedeem: screenConfig(HistoryRedeem, 'history_point'),
|
|
AllRewards: screenConfig(AllRewards, 'all_reward'),
|
|
MyRewards: screenConfig(MyRewards, 'my_reward'),
|
|
RewardDetail: screenConfig(RewardDetail, 'all_reward'),
|
|
ScanCoupon: {
|
|
screen: ScanCoupon,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('coupon'),
|
|
...defaultHeaderStyle(),
|
|
headerLeft: () => {
|
|
console.log('navigation state', navigation.state)
|
|
return HeaderLeftComponent(navigation, 'MyRewards', {index: navigation.state.params.index})
|
|
}
|
|
})
|
|
},
|
|
RewardTermCondition: screenConfig(RewardTermCondition, 'term_condition'),
|
|
MembershipLevelDetail: screenConfig(MembershipLevelDetail, 'membership_detail'),
|
|
MemberPoinExpire: screenConfig(MemberPoinExpire, 'membership_detail'),
|
|
//Terms and Condition
|
|
Terms: {
|
|
screen: TermsAndCondition,
|
|
navigationOptions: ({navigation}) => ({
|
|
title: t('term_condition'),
|
|
headerStyle: {
|
|
backgroundColor: '#00420A',
|
|
height: 75,
|
|
elevation: 0,
|
|
shadowOpacity: 0,
|
|
},
|
|
headerTintColor: '#000',
|
|
headerTitleStyle: {
|
|
fontWeight: '400',
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
textAlign: 'left',
|
|
flex: 1,
|
|
fontFamily: 'Prompt-Regular',
|
|
marginLeft: 0,
|
|
|
|
},
|
|
headerTitleContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerLeftContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '10%',
|
|
},
|
|
headerTitleAllowFontScaling: false,
|
|
|
|
headerLeft: (
|
|
<TouchableOpacity
|
|
style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', }}
|
|
onPress={() => {
|
|
store.dispatch(appCleanUser());
|
|
navigation.goBack()
|
|
}}>
|
|
<Icon name="ic_back" size={20} color="#fff"/>
|
|
</TouchableOpacity>
|
|
),
|
|
headerRight: (
|
|
<TouchableOpacity>
|
|
{/*<Icon name="ic_back" size={20} color="#fff"/>*/}
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
textBottomTab: {
|
|
fontSize: 12,
|
|
textAlign: 'center',
|
|
},
|
|
defaultHeaderStyle: {
|
|
backgroundColor: '#00420A',
|
|
height: 75,
|
|
marginTop: 0,
|
|
elevation: 0,
|
|
shadowOpacity: 0,
|
|
},
|
|
defaultHeaderTitleStyle: {
|
|
fontWeight: '400',
|
|
fontSize: 18,
|
|
color: '#fff',
|
|
textAlign: 'left',
|
|
flex: 1,
|
|
fontFamily: 'Prompt-Regular',
|
|
marginLeft: 0,
|
|
|
|
},
|
|
defaultHeaderTitleContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
defaultHeaderLeftContainerStyle: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '10%',
|
|
},
|
|
})
|
|
|
|
export default AppStack
|