1002 lines
41 KiB
JavaScript
1002 lines
41 KiB
JavaScript
import React, { Component, Fragment } from 'react'
|
|
import {
|
|
View, ScrollView, Dimensions, TouchableOpacity, StyleSheet, FlatList, RefreshControl, Animated, ActivityIndicator, Platform, Alert, Modal
|
|
} from 'react-native'
|
|
import Image from 'react-native-fast-image'
|
|
import ImageBackground from 'react-native-fast-image'
|
|
import Icon from '../../components/Icon'
|
|
import { Card, Body, Badge, ListItem, Left, Right, } from 'native-base'
|
|
import { BackgroundImage_RegisterForm } from '../../components/BackgroundImage_RegisterForm'
|
|
import LinearGradient from 'react-native-linear-gradient'
|
|
import { BackgroundImage } from '../../components/BackgroundImage'
|
|
import Text from '../../components/Text'
|
|
import { NavigationEvents } from 'react-navigation'
|
|
import {
|
|
getNews,
|
|
getNewsPage,
|
|
getUserProfile,
|
|
getNewsByProject,
|
|
login,
|
|
registerDevice,
|
|
setPaymentLater,
|
|
setFillInMeterLater,
|
|
checkPaymentMeter } from '../../api/UserApi';
|
|
import { clearToken } from '../../api/api'
|
|
import { bindActionCreators } from 'redux'
|
|
import {
|
|
appSetDevice,
|
|
appSetPushToken,
|
|
appSetToken,
|
|
appSetUser,
|
|
appCleanToken,
|
|
appCleanUser,
|
|
appSetNotification,
|
|
appSetProjectID,
|
|
appCleanProjectID
|
|
} from '../../redux/app/action'
|
|
import { connect } from 'react-redux'
|
|
import moment from 'moment'
|
|
import IndicatorLoading from '../../components/IndicatorLoading'
|
|
import { loginWithFacebook } from '../../components/FacebookUtils'
|
|
import { signinApple } from '../../components/AppleAuth'
|
|
import parseDateLocale from '../../utils/parseDateLocale'
|
|
import { from } from 'rxjs'
|
|
//import Slideshow from 'react-native-image-slider-show';
|
|
import appleAuth, {
|
|
AppleButton,
|
|
} from '@invertase/react-native-apple-authentication';
|
|
|
|
import { t, locale } from '../../utils/i18n'
|
|
import messaging from "@react-native-firebase/messaging";
|
|
import {store} from '../../redux/store';
|
|
|
|
const { height, width } = Dimensions.get('window')
|
|
console.disableYellowBox = true
|
|
|
|
function PopupNotiElectric({isVisible, onPress, onCancel, onPressLater, pending_payment, due_at_payment}) {
|
|
return <Modal visible={isVisible} transparent={true} animationType="none" key="popup-noti-electric">
|
|
<View style={styles.popupNotiContainer}>
|
|
<View style={styles.popupNoti}>
|
|
<View style={{width: '100%', alignItems: 'center'}}>
|
|
<Icon name='ic_shop_receive' color='#FF9500' size={70} style={{marginBottom: 10, width: '100%', textAlign: 'center'}}/>
|
|
<Text style={[{color: '#FF9500', marginBottom: 10, fontSize: 16}, styles.TextFont]}>{t('have_outstanding_balance')}</Text>
|
|
<View style={styles.costText}>
|
|
<Text style={[{fontSize: 25, fontWeight: '500', textAlign: 'center'}, styles.TextFont]}>{pending_payment}</Text>
|
|
<Text style={[{color: '#8A8A8F', fontSize: 18, fontWeight: '400', position: 'absolute', right: 15, bottom: 8}, styles.TextFont]}>{t('baht')}</Text>
|
|
</View>
|
|
<Text style={[{color: '#FF9500', marginBottom: 10, textAlign: 'center' , fontSize: 14}, styles.TextFont]}>{t('please_pay_within')} {moment(due_at_payment).add('543', 'y').format('DD/MM/YYYY')}</Text>
|
|
|
|
<TouchableOpacity onPress={onPress} style={{width: '100%', marginTop: 10}}>
|
|
<Badge style={styles.badgeSubmit}>
|
|
<Text style={[{color: 'white', paddingVertical: 10, fontSize: 16}, styles.TextFont]}>{t('pay_now')}</Text>
|
|
</Badge>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={onPressLater} style={{width: '100%'}}>
|
|
<Badge style={[styles.badgeCancel, {paddingTop: 5}]}>
|
|
<Text style={[{color: 'rgba(0, 0, 0, 0.5)', fontSize: 16}, styles.TextFont]}>{t('later')}</Text>
|
|
</Badge>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
}
|
|
|
|
function PopupOverDue({isVisible, onPress, onCancel, onPressLater, pending_payment}) {
|
|
return <Modal visible={isVisible} transparent={true} animationType="none">
|
|
<View style={styles.popupNotiContainer}>
|
|
<View style={styles.popupNoti}>
|
|
<View style={{width: '100%', alignItems: 'center', position: 'relative'}}>
|
|
<Icon name='ic_shop_receive' color='#FF2D55' size={70} style={{marginBottom: 10}}/>
|
|
<TouchableOpacity onPress={onPressLater} style={{position: 'absolute', right: 0, top: -10}}>
|
|
<Text style={[{color: 'rgba(0, 0, 0, 0.5)', fontSize: 20}, styles.TextFont]}>{t('close')}</Text>
|
|
</TouchableOpacity>
|
|
<Text style={[{color: '#FF2D55', marginBottom: 10, fontSize: 16}, styles.TextFont]}>{t('payment_overdue')}</Text>
|
|
<View style={styles.costText}>
|
|
<Text style={[{fontSize: 25, fontWeight: '500', textAlign: 'center'}, styles.TextFont]}>{pending_payment}</Text>
|
|
<Text style={[{color: '#8A8A8F', fontSize: 18, fontWeight: '400', position: 'absolute', right: 15, bottom: 8}, styles.TextFont]}>{t('baht')}</Text>
|
|
</View>
|
|
<Text style={[{color: '#FF2D55', fontSize: 14, textAlign: 'center'}, styles.TextFont]}>{t('outstanding_balance_past_due')}</Text>
|
|
{/*<Text style={[{color: '#FF2D55', fontSize: 14, textAlign: 'center'}, styles.TextFont]}>กรุณาดำเนินการชำระหนี้ตอนนี้</Text>*/}
|
|
<Text style={[{color: '#FF2D55', marginBottom: 15, fontSize: 14, textAlign: 'center'}, styles.TextFont]}>{t('contact_front')}</Text>
|
|
|
|
<TouchableOpacity onPress={onPress} style={{width: '100%'}}>
|
|
<Badge style={styles.badgeSubmit}>
|
|
<Text style={[{color: 'white', paddingVertical: 10, fontSize: 16}, styles.TextFont]}>{t('ok')}</Text>
|
|
</Badge>
|
|
</TouchableOpacity>
|
|
{/* <TouchableOpacity onPress={onPressLater}>
|
|
<Badge style={[styles.badgeCancel, {paddingTop: 5}]}>
|
|
<Text style={[{color: 'rgba(0, 0, 0, 0.5)', fontSize: 16}, styles.TextFont]}>ภายหลัง</Text>
|
|
</Badge>
|
|
</TouchableOpacity>*/}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
}
|
|
|
|
function PopupNotiFillInMeter({isVisible, onPress, onCancel, onPressLater, notified_meter_at}) {
|
|
return <Modal visible={isVisible} transparent={true} animationType="none" key="popup-noti-meter">
|
|
<View style={styles.popupNotiContainer}>
|
|
<View style={[styles.popupNoti, {paddingHorizontal: 15}]}>
|
|
<View style={{width: '100%', alignItems: 'center'}}>
|
|
{/*<Icon name='ic_shop_receive' color='#00420A' size={60} style={{marginBottom: 10}}/>*/}
|
|
<Image source={require('../../../assets/images/meter_noti_image.png')} style={{width: 70, height: 70 }} resizeMode={'contain'}/>
|
|
<Text style={[{color: '#00420A', marginVertical: 5, fontSize: 16}, styles.TextFont]}>{t('attach_meter')}</Text>
|
|
<Text style={[{color: '#00420A', marginVertical: 5, fontSize: 13, textAlign: 'center'}, styles.TextFont]}>{t('by_due_date')} {notified_meter_at}</Text>
|
|
<Text style={[{color: '#00420A', marginVertical: 5, fontSize: 13, textAlign: 'center', marginBottom: 15}, styles.TextFont]}>{t('sorry_send_data')}</Text>
|
|
|
|
<TouchableOpacity onPress={onPress} style={{width: '100%'}}>
|
|
<Badge style={styles.badgeSubmit}>
|
|
<Text style={[{color: 'white', paddingVertical: 10, fontSize: 16}, styles.TextFont]}>{t('enter_info')}</Text>
|
|
</Badge>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={onPressLater}>
|
|
<Badge style={[styles.badgeCancel, {paddingTop: 5}]}>
|
|
<Text style={[{color: 'rgba(0, 0, 0, 0.5)', fontSize: 16}, styles.TextFont]}>{t('later')}</Text>
|
|
</Badge>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
}
|
|
|
|
class NewsScreen extends Component {
|
|
constructor (props) {
|
|
super(props)
|
|
this.state = {
|
|
isLoading: false,
|
|
refreshing: false,
|
|
auth: null,
|
|
position: 0,
|
|
user: {
|
|
point: 0
|
|
},
|
|
interval: null,
|
|
news_head: [{
|
|
title: t('loading_news'),
|
|
content: t('loading_news'),
|
|
date: t('loading_news'),
|
|
is_new: false
|
|
}],
|
|
new_all: [{
|
|
title: t('loading_news'),
|
|
content: t('loading_news'),
|
|
date: t('loading_news'),
|
|
is_new: false
|
|
}],
|
|
due_at: '',
|
|
pending_payment: 0,
|
|
noti_count: 0,
|
|
isFirstTime: true,
|
|
user_point: 0,
|
|
user_project_id: 0,
|
|
isBilling: false,
|
|
isMeter: false,
|
|
isShipping: false,
|
|
scrollY: new Animated.Value(0),
|
|
loadMore: false,
|
|
loadPage: 1,
|
|
last_page: 1,
|
|
isLoadmore: false,
|
|
fb_is_link: false,
|
|
email: '',
|
|
visibleNotiElectric: false,
|
|
visibleNotiOverDue: false,
|
|
visibleNotiMeter: false,
|
|
payment_id: null,
|
|
is_notified_electric: false,
|
|
is_notified_before_due:false,
|
|
is_notified_overdue: false,
|
|
is_notified_meter: false,
|
|
notified_meter_at: moment().format('DD MMM YYYY'),
|
|
due_at_payment: moment().format('DD/MM/YYYY')
|
|
}
|
|
|
|
this._onCarouselScroll = this._onCarouselScroll.bind(this)
|
|
this.initData = this.initData.bind(this)
|
|
}
|
|
|
|
checkNotifiedPopup = () => {
|
|
if (this.props.user) {
|
|
checkPaymentMeter()
|
|
.then(res => {
|
|
if (res.data && res.data.success) {
|
|
this.setState({
|
|
is_notified_electric: res.data.is_notified_electric,
|
|
is_notified_meter: res.data.is_notified_meter,
|
|
is_notified_overdue: res.data.is_notified_overdue,
|
|
notified_meter_at: res.data.notified_meter_at,
|
|
payment_id: res.data.payment_id,
|
|
pending_payment: res.data.pending_payment != null ? res.data.pending_payment : 0,
|
|
due_at_payment: res.data.payment && res.data.payment.due_at ? res.data.payment.due_at : null,
|
|
}, () => {
|
|
setTimeout(() => {
|
|
console.log('pending payment >>> ', parseInt(this.state.pending_payment))
|
|
this.setState({
|
|
visibleNotiElectric: this.state.is_notified_overdue ? false : this.state.is_notified_electric && parseInt(this.state.pending_payment) > 0,
|
|
visibleNotiMeter: ((this.state.is_notified_electric && parseInt(this.state.pending_payment) > 0) || this.state.is_notified_overdue) === true ? false : this.state.is_notified_meter,
|
|
visibleNotiOverDue: this.state.is_notified_overdue,
|
|
})
|
|
}, 1000)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
async getUser () {
|
|
if (this.props.token != null) {
|
|
return await getUserProfile()
|
|
.then(async res => {
|
|
if (res.ok) {
|
|
console.log("News:: res.data:")
|
|
console.log(res.data)
|
|
console.log('project id >>>> ', res.data.project_id)
|
|
this.checkNotifiedPopup()
|
|
if(res.data.project_id){
|
|
this.setState({
|
|
loadPage: 1,
|
|
last_page: 1,
|
|
news_head: [{
|
|
title: t('loading_news'),
|
|
content: t('loading_news'),
|
|
date: t('loading_news'),
|
|
is_new: false
|
|
}],
|
|
new_all: [{
|
|
title: t('loading_news'),
|
|
content: t('loading_news'),
|
|
date: t('loading_news'),
|
|
is_new: false
|
|
}],
|
|
},async () => {
|
|
await this.getAllNewsByProject(res.data.project_id)
|
|
})
|
|
}else {
|
|
await this.getAllNewsList()
|
|
}
|
|
|
|
this.setState({
|
|
noti_count: res.data.count_noti,
|
|
user_point: res.data.point_balance,
|
|
user_project_id: res.data.project_id,
|
|
isBilling: res.data.user.enable_billing == null ? false : res.data.user.enable_billing,
|
|
isMeter: res.data.user.enable_meter == null ? false : res.data.user.enable_meter,
|
|
isShipping: res.data.user.enable_shipping == null ? false : res.data.user.enable_shipping,
|
|
fb_is_link: res.data.user.fb_is_link,
|
|
email: res.data.user.email,
|
|
}, () => {
|
|
if (res.data.message != null) {
|
|
Alert.alert('แจ้งเตือนจากระบบ', res.data.message)
|
|
}
|
|
})
|
|
} else {
|
|
// this.setState({
|
|
// isLoading: false
|
|
// }, () => {
|
|
clearToken();
|
|
|
|
setTimeout(() => {
|
|
this.props.appCleanUser();
|
|
this.props.appCleanToken();
|
|
this.props.appCleanProjectID();
|
|
|
|
this.initData()
|
|
}, 500)
|
|
// })
|
|
}
|
|
})
|
|
}else {
|
|
await this.getAllNewsList()
|
|
}
|
|
return true
|
|
}
|
|
|
|
async getAllNewsByProject(project_id) {
|
|
return getNewsByProject(project_id)
|
|
.then(res => {
|
|
console.log('res >>>>>>> ', res)
|
|
this.setNewsData(res)
|
|
})
|
|
}
|
|
|
|
async getAllNewsList () {
|
|
// return getNews()
|
|
return getNewsPage(this.state.loadPage)
|
|
.then(res => {
|
|
this.setNewsData(res)
|
|
})
|
|
}
|
|
|
|
setNewsData(res) {
|
|
if (res.data.data && (res.data.data).length > 5) {
|
|
console.log('data >>>>> ', res)
|
|
var cut = []
|
|
for (let index = 0; index < 5; index++) {
|
|
cut.push(res.data.data[index])
|
|
}
|
|
|
|
this.setState({
|
|
user: this.props.user,
|
|
news_head: cut,
|
|
new_all: res.data.data,
|
|
refreshing: false,
|
|
isLoading: false,
|
|
last_page: res.data.last_page
|
|
})
|
|
} else {
|
|
this.setState({
|
|
news_head: res.data.data,
|
|
new_all: res.data.data,
|
|
refreshing: false,
|
|
isLoading: false,
|
|
last_page: res.data.last_page
|
|
})
|
|
}
|
|
}
|
|
|
|
initData () {
|
|
console.log('initData >>> ')
|
|
this.setState({
|
|
isLoading: true,
|
|
}, () => {
|
|
Promise.all([
|
|
this.getUser(),
|
|
// this.getAllNewsList()
|
|
])
|
|
.then(() => {
|
|
let user_id = 0
|
|
let user_noti_id = 0
|
|
if (this.props.token != null) {
|
|
if (this.state.isFirstTime) {
|
|
this.props.appSetNotification(this.state.noti_count)
|
|
this.props.appSetProjectID(this.state.user_project_id)
|
|
this.setState({ isFirstTime: false })
|
|
}
|
|
}
|
|
|
|
if (this.props.user && this.props.user.id) {
|
|
user_id = this.props.user.id
|
|
user_noti_id = this.props.user.id
|
|
} else if (this.props.device && this.props.device.customer_id) {
|
|
user_noti_id = this.props.device.customer_id
|
|
}
|
|
|
|
if (this.props.token != null && this.props.user != null) {
|
|
this.setState({
|
|
auth: true,
|
|
})
|
|
} else {
|
|
this.setState({
|
|
auth: false
|
|
})
|
|
}
|
|
|
|
this.setState({ isLoading: false })
|
|
})
|
|
.catch(() => {
|
|
// console.log('catch ------------------>');
|
|
// this.setState({isLoading:false})
|
|
// this.props.appCleanUser()
|
|
// this.props.appCleanToken()
|
|
|
|
setTimeout(() => {
|
|
this.setState({
|
|
isLoading: false
|
|
}, () => {
|
|
//this.props.appCleanUser()
|
|
//this.props.appCleanToken()
|
|
})
|
|
}, 600)
|
|
// this.initData()
|
|
})
|
|
})
|
|
}
|
|
|
|
setPermission = async () => {
|
|
try {
|
|
const enabled = await messaging().hasPermission()
|
|
if (!enabled) {
|
|
await messaging().requestPermission()
|
|
}
|
|
} catch (error) {
|
|
console.log('error', error)
|
|
}
|
|
}
|
|
|
|
initNotification = async () => {
|
|
await this.setPermission()
|
|
const fcmToken = await messaging().getAPNSToken()
|
|
if (fcmToken) {
|
|
store.dispatch(appSetPushToken(fcmToken))
|
|
const resultSendDevice = await registerDevice(fcmToken)
|
|
console.log(' re sult register_device =>', resultSendDevice)
|
|
if (resultSendDevice.ok && resultSendDevice.data.success) {
|
|
store.dispatch(appSetDevice(resultSendDevice.data.device))
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
_onRefresh = () => {
|
|
this.setState({
|
|
refreshing: true, loadPage: 1, loadMore: false
|
|
}, () => {
|
|
this.initData()
|
|
this.initNotification()
|
|
// this.checkNotifiedPopup()
|
|
})
|
|
}
|
|
|
|
setPaymentLater = () => {
|
|
// setPaymentLater()
|
|
// .then(res => {
|
|
// if(res && res.data && res.data.success){
|
|
this.setState({
|
|
visibleNotiElectric: false,
|
|
visibleNotiOverDue: false
|
|
})
|
|
|
|
if(this.state.is_notified_meter === true){
|
|
this.setState({
|
|
visibleNotiMeter: true
|
|
}, () => {
|
|
setTimeout(() => {
|
|
this.forceUpdate()
|
|
}, 100)
|
|
})
|
|
}
|
|
// }
|
|
// })
|
|
}
|
|
|
|
setFillInMeterLater = () => {
|
|
// setFillInMeterLater()
|
|
// .then(res => {
|
|
// if(res && res.data && res.data.success){
|
|
this.setState({
|
|
visibleNotiMeter: false
|
|
})
|
|
// }
|
|
// })
|
|
}
|
|
|
|
renderNativeItem = ({ item }) => (
|
|
<TouchableOpacity style={{ padding: 8, backgroundColor: '#FFFFFF33', height: 85, borderWidth: 1, borderColor: 'white', borderRadius: 5, flexDirection: 'row' }}
|
|
onPress={() => {this.props.navigation.navigate('NewsDetail', { news_id: item.id })}}>
|
|
<Image source={item.url ? { uri: item.url } : require('../../../assets/images/default_small.png')} defaultSource={require('../../../assets/images/default_small.png')} style={styles.image_style} resizeMode={'contain'}/>
|
|
<View style={{ flex: 1, marginLeft: 8, justifyContent: 'space-between' }}>
|
|
<Text style={{ fontSize: 14, color: 'white', width: '100%', }} ellipsizeMode={'tail'} numberOfLines={2}>{item.title}</Text>
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<Icon name="ic_calendar_alt" size={16} color="white"/>
|
|
<Text style={{ flex: 1, fontSize: 12, color: 'white', marginLeft: 5 }}>{parseDateLocale(item.date)}</Text>
|
|
{
|
|
item.is_new == true &&
|
|
<View style={{ backgroundColor: '#FF9500', height: 20, paddingHorizontal: 10, borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ fontSize: 12, color: 'white' }}>{item.type == "promotion" ? t('latest_promotion') : t('latest_news')}</Text>
|
|
</View>
|
|
}
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)
|
|
|
|
renderNativeItemImages = (item) => {
|
|
return <TouchableOpacity onPress={() => {
|
|
this.props.navigation.navigate('NewsDetail', { news_id: item.id })
|
|
}}>
|
|
<ImageBackground source={item.url ? { uri: item.url } : require('../../../assets/images/default_big.png')} onError={(e) => { this.props.source = require('../../../assets/images/default_big.png') }} style={styles.imgBg}>
|
|
<LinearGradient colors={['rgba(0, 0, 0, 0)', '#000000']}>
|
|
<View style={{ padding: 15, }}>
|
|
{item.is_new == true ?
|
|
<View style={{ backgroundColor: '#FF9500', borderRadius: 10, height: 23,
|
|
alignSelf: 'flex-start', alignItems: 'center', justifyContent: 'center', flexWrap: 'nowrap',
|
|
paddingHorizontal: 10 }}>
|
|
<Text style={{ fontSize: 12, width: '100%', justifyContent: 'center', alignItems: 'center', color: 'white', flexWrap: 'nowrap' }}>{item.type == "promotion" ? t('latest_promotion') : t('latest_news')} </Text>
|
|
</View>
|
|
: null }
|
|
<Text style={styles.textNewsName} ellipsizeMode={'tail'} numberOfLines={2}>{item.title}</Text>
|
|
<View style={{ flexDirection: 'row', marginTop: 5 }}>
|
|
<Icon name="ic_calendar_alt" size={14} color="rgba(255, 255, 255, 0.65)"/>
|
|
<Text style={{ color: 'rgba(255, 255, 255, 0.65)', fontSize: 12, marginLeft: 5, marginTop: -1 }}>
|
|
{parseDateLocale(item.date)}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</LinearGradient>
|
|
</ImageBackground>
|
|
</TouchableOpacity>
|
|
}
|
|
|
|
_onCarouselScroll (e) {
|
|
const scrollX = e.nativeEvent.contentOffset.x
|
|
this.setState({
|
|
position: Math.ceil(scrollX / width)
|
|
})
|
|
// console.log(this.state.position)
|
|
}
|
|
|
|
isCloseToBottom = ({ layoutMeasurement, contentOffset, contentSize }) => {
|
|
const paddingToBottom = 20
|
|
return layoutMeasurement.height + contentOffset.y >=
|
|
contentSize.height - paddingToBottom
|
|
}
|
|
|
|
loadMoreData = async () => {
|
|
if(parseInt(this.state.loadPage) < parseInt(this.state.last_page)){
|
|
this.setState({
|
|
loadMore: true,
|
|
isLoadmore: true,
|
|
loadPage: this.state.loadPage + 1
|
|
}, () => {
|
|
getNewsPage(this.state.loadPage)
|
|
.then(res => {
|
|
if (res.ok) {
|
|
let resData = res.data.data
|
|
let news_all = this.state.new_all
|
|
let news_arr = news_all.concat(resData)
|
|
|
|
this.setState({
|
|
new_all: news_arr,
|
|
refreshing: false,
|
|
loadMore: false,
|
|
isLoadmore: false,
|
|
last_page: res.data.last_page
|
|
})
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
/*loading - set loadMore = false when done*/
|
|
}
|
|
|
|
_keyExtractorNewHead = (item, index) => 'new_head_' + index
|
|
_keyExtractorNewAll = (item, index) => 'new_all_' + index
|
|
|
|
render () {
|
|
return (
|
|
<LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
|
|
flex: 1,
|
|
width: null,
|
|
height: null,
|
|
resizeMode: 'cover'
|
|
}}>
|
|
<NavigationEvents
|
|
onDidFocus={() => {
|
|
this.setState({
|
|
isLoading: true
|
|
}, () => {
|
|
this.initData()
|
|
})
|
|
}}
|
|
/>
|
|
<BackgroundImage>
|
|
<ScrollView contentContainerStyle={styles.contentContainer}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={this.state.refreshing}
|
|
onRefresh={this._onRefresh}
|
|
/>
|
|
}
|
|
showsVerticalScrollIndicator={false}
|
|
scrollEventThrottle={16}
|
|
onScroll={Animated.event(
|
|
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
|
|
{useNativeDriver: false}
|
|
)}
|
|
onMomentumScrollEnd={({ nativeEvent }) => {
|
|
if (this.isCloseToBottom(nativeEvent)) {
|
|
this.loadMoreData()
|
|
}
|
|
}}
|
|
>
|
|
<View style={[styles.row]}>
|
|
<FlatList
|
|
data={this.state.news_head}
|
|
renderItem={({ item }) => this.renderNativeItemImages(item)}
|
|
horizontal={true}
|
|
showsHorizontalScrollIndicator={false}
|
|
pagingEnabled={true}
|
|
keyExtractor={this._keyExtractorNewHead}
|
|
onScroll={this._onCarouselScroll}
|
|
/>
|
|
<View style={{ position: 'absolute', bottom: 10, width: '100%', justifyContent: 'center', flexDirection: 'row' }}>
|
|
{
|
|
this.state.news_head ?
|
|
(this.state.news_head).map((item, i) => <View key={'news_heade_' + i} style={[{ width: 10, height: 10, borderRadius: 5, backgroundColor: this.state.position == i ? '#269A21' : 'rgba(255,255,255,0.3)', marginHorizontal: 4 }]}></View>)
|
|
: <View></View>
|
|
}
|
|
</View>
|
|
</View>
|
|
|
|
{
|
|
this.state.auth !== null &&
|
|
(
|
|
!this.state.auth ? (
|
|
<Card style={{ borderRadius: 5, backgroundColor: '#00420A', borderColor: 'rbga(0,0,0,0)', paddingBottom: 10 }}>
|
|
<BackgroundImage_RegisterForm>
|
|
<View style={{ flex: 1, alignItems: 'center', padding: 10 }}>
|
|
<View>
|
|
<Text style={{ color: 'white', fontSize: 16, textAlign: 'center' }}>{t('for_csa_customer')}</Text>
|
|
<Text style={{ color: 'white', fontSize: 16, textAlign: 'center' }}>{t('login')} {t('to_view_outstanding_balance')}</Text>
|
|
</View>
|
|
{/*<TouchableOpacity onPress={() => {
|
|
// this.props.navigation.navigate('Register')
|
|
this.props.navigation.navigate('Terms')
|
|
}}>
|
|
<View>
|
|
<Badge style={{ backgroundColor: '#145EB3', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', marginTop: 10, height: null, width: 150 }}>
|
|
<Text style={{ fontSize: 16, color: 'white', padding: 5, textAlign: 'center' }}>{t('create_account')}</Text>
|
|
</Badge>
|
|
</View>
|
|
</TouchableOpacity>*/}
|
|
{/* <Text style={{ color: 'white', marginTop: 10 }}>{t('or')}</Text> */}
|
|
<TouchableOpacity onPress={() => { this.props.navigation.navigate('Login') }}>
|
|
<View>
|
|
<Badge style={{ backgroundColor: '#145EB3', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', marginTop: 10, height: null, width: 150 }}>
|
|
<Text style={{ fontSize: 16, color: 'white', padding: 5, textAlign: 'center' }}>{t('login')}</Text>
|
|
</Badge>
|
|
</View>
|
|
</TouchableOpacity>
|
|
{Platform.OS == 'ios' ? <Text style={{ color: 'white', marginTop: 10 }}>{t('or')}</Text> : null}
|
|
{Platform.OS == 'ios' ? <View>
|
|
<AppleButton
|
|
buttonStyle={AppleButton.Style.WHITE}
|
|
buttonType={AppleButton.Type.SIGN_IN}
|
|
style={{
|
|
width: 150,
|
|
height: 45,
|
|
marginTop: 10,
|
|
}}
|
|
onPress={ () => {signinApple(() => {
|
|
this.initData()
|
|
})
|
|
}}
|
|
/>
|
|
</View> : null}
|
|
|
|
<Text style={{ color: 'white', marginTop: 10 }}>{t('or')}</Text>
|
|
|
|
<TouchableOpacity onPress={() => {
|
|
loginWithFacebook(() => {
|
|
this.initData()
|
|
})}}>
|
|
|
|
|
|
<View>
|
|
<Badge style={{ backgroundColor: '#145EB3', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', marginTop: 10, height: null, width: 150 }}>
|
|
<Text style={{ fontSize: 16, color: 'white', padding: 5, textAlign: 'center' }}>{t('login_facebook')}</Text>
|
|
</Badge>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</BackgroundImage_RegisterForm>
|
|
</Card>
|
|
) : (
|
|
<View style={{ padding: 5 }}>
|
|
<View style={[styles.row, { alignItems: 'stretch' }]}>
|
|
<View style={styles.custom_card}>
|
|
<Card style={{ borderRadius: 5, backgroundColor: '#00420A', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
|
|
<BackgroundImage_RegisterForm>
|
|
<View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 10, minHeight: 177 }}>
|
|
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
|
|
<Icon name='ic_shop_receive' color='white' size={24}/>
|
|
{/*<Text style={{ color: 'white', fontSize: 14, marginTop:5 }}>คุณมียอดค้างชำระ</Text>*/}
|
|
<Text style={{ color: 'white', fontSize: 14, marginTop: 5, textAlign: 'center' }}> {t('have_outstanding_balance')} </Text>
|
|
</View>
|
|
<View style={{ justifyContent: 'center', alignItems: 'center', marginBottom: 5 }}>
|
|
<Text style={{ color: 'white', fontSize: 28 }}>{this.state.isBilling ? this.state.pending_payment : 'N/A'}</Text>
|
|
{/*<Text style={{ color: 'white', fontSize: 12 }}>{parseFloat(this.state.pending_payment) > 0 ?'โปรดชำระก่อนวันที่':'ยังไม่มียอดค้างชำระ'}</Text>*/}
|
|
<Text style={{ color: 'white', fontSize: 12, textAlign: 'center' }}>{parseFloat(this.state.pending_payment) > 0 ? t('to_view_outstanding_balance') : t('no_outstanding_balance_yet')}</Text>
|
|
{this.state.due_at !== '' && <Text style={{ color: 'white', fontSize: 12 }}>{parseFloat(this.state.pending_payment) > 0 && this.state.due_at !== '' ? this.state.due_at : ''} </Text>}
|
|
</View>
|
|
<TouchableOpacity disabled={!this.state.isBilling} onPress={() => {this.props.navigation.navigate('Bill')}}>
|
|
{/*<Badge style={{ backgroundColor: this.state.isBilling ? '#145EB3' : 'gray', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', justifyContent:'center' }}><Text style={{ fontSize: 12, color: 'white' }}>ดูเพิ่มเติม</Text></Badge>*/}
|
|
<Badge style={{ backgroundColor: this.state.isBilling ? '#145EB3' : 'gray', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', justifyContent: 'center' }}><Text style={{ fontSize: 12, color: 'white' }}>{t('view_more')}</Text></Badge>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</BackgroundImage_RegisterForm>
|
|
</Card>
|
|
</View>
|
|
<View style={[styles.custom_card]}>
|
|
<Card title='' style={{ borderRadius: 5, backgroundColor: '#003114', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
|
|
<BackgroundImage_RegisterForm>
|
|
<View style={{
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
minHeight: 177,
|
|
}}>
|
|
<Icon name='ic_star' color='white' size={24}/>
|
|
<Text style={{ color: 'white', fontSize: 14, marginTop: 5 }}>{t('view_points')}</Text>
|
|
<Text style={{ color: 'white', fontSize: 28 }}>{parseFloat(this.state.user_point).toLocaleString()}</Text>
|
|
{/*<Text style={{ color: 'white', fontSize: 18 }}>พอยต์</Text>*/}
|
|
<Text style={{ color: 'white', fontSize: 14 }}>{t('point')}</Text>
|
|
<TouchableOpacity style={{ marginTop: 5 }}
|
|
onPress={() => {this.props.navigation.navigate('Redeem')}}>
|
|
<Badge style={{ backgroundColor: '#145EB3', borderRadius: 5, borderColor: 'rbga(0,0,0,0)', justifyContent: 'center' }}>
|
|
<Text style={{ fontSize: 12, color: 'white' }}>{t('redeem')}</Text>
|
|
</Badge>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</BackgroundImage_RegisterForm>
|
|
</Card>
|
|
</View>
|
|
</View>
|
|
<View style={[styles.row, { flexWrap: 'wrap', alignItems: 'stretch' }]}>
|
|
<View style={[styles.custom_card]}>
|
|
<TouchableOpacity disabled={false} onPress={() => {
|
|
this.props.navigation.navigate('Meter')
|
|
}} style={{ flex: 1 }}>
|
|
<Card title='' style={{ borderRadius: 5, backgroundColor: '#145EB3', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
|
|
<View style={{
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
justifyContent: 'center'
|
|
}}>
|
|
<View style={{ alignItems: 'center' }}>
|
|
<Icon name='ic_meter' color='white' size={24}/>
|
|
<Text style={{ color: 'white', fontSize: 14, textAlign: 'center', marginTop: 5 }}> {t('smart_meter')} </Text>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={[styles.custom_card]}>
|
|
<TouchableOpacity disabled={false} onPress={() => {
|
|
this.props.navigation.navigate('Object',{
|
|
user:this.props.user
|
|
})
|
|
}} style={{ flex: 1 }}>
|
|
<Card title='' style={{ borderRadius: 5, backgroundColor: '#145EB3', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
|
|
<View style={{
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
justifyContent: 'center'
|
|
}}>
|
|
<View style={{ alignItems: 'center' }}>
|
|
<Icon name='ic_cart' color='white' size={24}/>
|
|
<Text style={{ color: 'white', fontSize: 14, textAlign: 'center', marginTop: 5 }}>{t('mail_and_parcel')}</Text>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={[styles.custom_card]}>
|
|
<TouchableOpacity disabled={false}
|
|
/*onPress={() => { this.props.navigation.navigate('RepairService',{
|
|
user:this.props.user
|
|
}) }}*/
|
|
onPress={() => { this.props.navigation.navigate('Repair')}}
|
|
style={{ flex: 1 }}>
|
|
<Card title='' style={{ borderRadius: 5, backgroundColor: '#145EB3', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
|
|
<View style={{
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
justifyContent: 'center',
|
|
}}>
|
|
<View style={{ alignItems: 'center' }}>
|
|
<Icon name='icon_repair' color='white' size={24}/>
|
|
<Text style={{ color: 'white', fontSize: 14, textAlign: 'center', marginTop: 5 }}>{t('request_repair')}</Text>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={[styles.custom_card]}>
|
|
<TouchableOpacity disabled={false} onPress={() => {this.props.navigation.navigate('Question')}} style={{ flex: 1 }}>
|
|
<Card title='' style={{ borderRadius: 5, backgroundColor: '#145EB3', borderColor: 'rbga(0,0,0,0)', flex: 1 }}>
|
|
<View style={{
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
justifyContent: 'center',
|
|
}}>
|
|
<View style={{ alignItems: 'center' }}>
|
|
<Icon name='ic_qa' color='white' size={24}/>
|
|
<Text style={{ color: 'white', fontSize: 14, textAlign: 'center', marginTop: 5 }}>{t('inquire')}</Text>
|
|
</View>
|
|
</View>
|
|
</Card>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))
|
|
|
|
}
|
|
|
|
<View style={{ padding: 10 }}>
|
|
<FlatList
|
|
extraData={this.state}
|
|
contentContainerStyle={{
|
|
height: '100%',
|
|
width: '100%'
|
|
}}
|
|
// scrollEnabled={false}
|
|
data={this.state.new_all}
|
|
renderItem={this.renderNativeItem}
|
|
keyExtractor={this._keyExtractorNewAll}
|
|
// onEndReachedThreshold={0.01}
|
|
// onEndReached={this.loadMoreData.bind(this)}
|
|
ItemSeparatorComponent={() => {
|
|
return <View style={{ width: '100%', height: 8 }}></View>
|
|
}}
|
|
ListFooterComponent={() => {
|
|
if (!this.state.isLoadmore) return null
|
|
return (<ActivityIndicator
|
|
size="large"
|
|
color={'white'}
|
|
/>)
|
|
}}
|
|
/>
|
|
</View>
|
|
</ScrollView>
|
|
</BackgroundImage>
|
|
<IndicatorLoading loadingVisible={this.state.isLoading}/>
|
|
<PopupNotiElectric
|
|
isVisible={this.state.visibleNotiElectric}
|
|
onCancel={() => this.setState({visibleNotiElectric: false})}
|
|
onPressLater={() => this.setPaymentLater()}
|
|
pending_payment={this.state.pending_payment}
|
|
due_at_payment={this.state.due_at_payment}
|
|
onPress={() => this.setState({
|
|
visibleNotiElectric: false
|
|
}, () => {
|
|
this.props.navigation.navigate('Bill')
|
|
this.setPaymentLater()
|
|
})}/>
|
|
<PopupOverDue
|
|
isVisible={this.state.visibleNotiOverDue}
|
|
onCancel={() => this.setState({visibleNotiOverDue: false})}
|
|
onPressLater={() => this.setPaymentLater()}
|
|
pending_payment={this.state.pending_payment}
|
|
onPress={() => this.setState({
|
|
visibleNotiOverDue: false
|
|
}, () => {
|
|
// this.props.navigation.navigate('Payment', {payment_id: this.state.payment_id})
|
|
this.props.navigation.navigate('Bill')
|
|
this.setPaymentLater()
|
|
})}/>
|
|
<PopupNotiFillInMeter
|
|
isVisible={this.state.visibleNotiMeter}
|
|
onCancel={() => this.setState({visibleNotiMeter: false})}
|
|
onPressLater={() => this.setFillInMeterLater()}
|
|
notified_meter_at={this.state.notified_meter_at}
|
|
onPress={() => this.setState({
|
|
visibleNotiMeter: false
|
|
}, () => {
|
|
this.props.navigation.navigate('Meter')
|
|
this.setFillInMeterLater()
|
|
})}
|
|
/>
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
}
|
|
|
|
//export default NewsScreen
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1, flexDirection: 'column',
|
|
padding: 7
|
|
},
|
|
row: {
|
|
flex: 1, flexDirection: 'row',
|
|
},
|
|
textNews: {
|
|
backgroundColor: '#0D8890',
|
|
width: 60,
|
|
color: '#FFFFFF',
|
|
borderRadius: 5,
|
|
|
|
textAlign: 'center',
|
|
fontSize: 12
|
|
},
|
|
imgBg: {
|
|
flex: 1,
|
|
height: 200,
|
|
width: width,
|
|
justifyContent: 'flex-end'
|
|
},
|
|
textNewsName: {
|
|
color: '#FFFFFF',
|
|
fontSize: 18
|
|
},
|
|
textDate: {
|
|
color: 'white',
|
|
fontSize: 12,
|
|
marginLeft: 5,
|
|
marginTop: 10
|
|
},
|
|
contentContainer: {
|
|
paddingVertical: 0,
|
|
},
|
|
image_style: {
|
|
height: 64,
|
|
width: 64,
|
|
borderRadius: 5,
|
|
},
|
|
custom_card: {
|
|
width: '50%', paddingHorizontal: 5,
|
|
// width: '100%'
|
|
},
|
|
popupNoti: {
|
|
backgroundColor: 'white',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 5,
|
|
marginHorizontal: 50,
|
|
paddingVertical: 20,
|
|
paddingHorizontal: 30,
|
|
maxWidth: 300,
|
|
width: '100%'
|
|
},
|
|
popupNotiContainer: {
|
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
flex: 1
|
|
},
|
|
costText: {
|
|
backgroundColor: '#EFEFF4',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 5,
|
|
borderRadius: 5,
|
|
width: '100%',
|
|
marginBottom: 10
|
|
},
|
|
badgeCancel: {
|
|
backgroundColor: 'white',
|
|
alignItems: 'center',
|
|
width: '100%'
|
|
},
|
|
badgeSubmit: {
|
|
backgroundColor: '#145EB3',
|
|
borderRadius: 5,
|
|
marginBottom: 10,
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
height: 'auto'
|
|
},
|
|
TextFont: {
|
|
fontFamily: 'Prompt-Regular',
|
|
}
|
|
})
|
|
|
|
const mapDisPatchToProps = state => {
|
|
return state.app
|
|
}
|
|
|
|
const setUser = dispatch => bindActionCreators({
|
|
appSetToken,
|
|
appSetPushToken,
|
|
appSetDevice,
|
|
appSetUser,
|
|
appCleanToken,
|
|
appCleanUser,
|
|
appSetNotification,
|
|
appSetProjectID,
|
|
setPaymentLater,
|
|
appCleanProjectID
|
|
}, dispatch)
|
|
export default connect(mapDisPatchToProps, setUser)(NewsScreen)
|