Skip to content

N
new_excelso
Commit 27c51e81 authored by Trisno's avatar Trisno
Browse files
Options

Add Inbox

parent 4dfd8979
Hide whitespace changes
Inline Side-by-side
Showing with 377 additions and 17 deletions
lib/en.json
View file @ 27c51e81
......@@ -134,5 +134,8 @@
"headerOrderDetail":"ORDER DETAIL",
"headerDeliveryAddress":"DELIVERY ADDRESS",
"headerPickupStore":"PICKUP STORE",
"noAddressSaved":"No address saved"
"noAddressSaved":"No address saved",
"headerInboxList":"INBOX",
"noInboxData":"No incoming message",
"headerInboxDetail":"INBOX DETAIL"
}
\ No newline at end of file
lib/id.json
View file @ 27c51e81
......@@ -136,5 +136,8 @@
"headerOrderDetail": "DETAIL ORDER",
"headerDeliveryAddress": "DELIVERY ADDRESS@",
"headerPickupStore": "PICKUP STORE@",
"noAddressSaved":"Tidak ada alamat tersimpan"
"noAddressSaved":"Tidak ada alamat tersimpan",
"headerInboxList":"KOTAK MASUK",
"noInboxData":"Tidak ada pesan masuk",
"headerInboxDetail":"DETAIL KOTAK MASUK"
}
\ No newline at end of file
view/Auth.js
View file @ 27c51e81
......@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import { View, Text, Image, Alert, TouchableOpacity } from 'react-native';
import ActionType from '../redux/globalActionType';
import MenuSelection from './MenuSelection';
import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
import Home from './Home';
import Login from './Login';
import Register from './Register';
......@@ -57,6 +57,8 @@ import UseBalance from './UseBalance';
import PaymentCode from './PaymentCode';
import UpdateVersion from './UpdateVersion';
import SettingUrl from './setBaseUrl';
import InboxList from './InboxList';
import InboxDetail from './InboxDetail';
enableScreens();
......@@ -218,6 +220,7 @@ class Auth extends React.Component {
i18n.locale = this.props.language;
}
render() {
return (
<Stack.Navigator>
......@@ -226,16 +229,18 @@ class Auth extends React.Component {
<>
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Setting" component={SettingUrl} options={{headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 20,
},
title: 'SETTING URL'}}/>
<Stack.Screen name="Setting" component={SettingUrl} options={{
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 20,
},
title: 'SETTING URL'
}} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={ProfilePage} options={{
headerStyle: { backgroundColor: '#CFB368' },
......@@ -250,7 +255,7 @@ class Auth extends React.Component {
}, title: 'PROFILE'
}} />
<Stack.Screen name="UpdateVersion" component={UpdateVersion}
options={{ headerShown: false }}
options={{ headerShown: false }}
/>
<Stack.Screen name="Change Profil" component={ChangeProfile} options={{
headerStyle: { backgroundColor: '#CFB368' },
......@@ -392,7 +397,8 @@ class Auth extends React.Component {
}, title: 'RENEWAL'
}} />
<Stack.Screen name="Account" component={Account} />
<Stack.Screen name="Setting" component={SettingUrl} options={{headerStyle: { backgroundColor: "#CFB368" },
<Stack.Screen name="Setting" component={SettingUrl} options={{
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
......@@ -401,7 +407,8 @@ class Auth extends React.Component {
color: 'white',
fontSize: 20,
},
title: 'SETTING URL'}}/>
title: 'SETTING URL'
}} />
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Transfer Balance" component={TransferBalance} options={{
headerStyle: { backgroundColor: "#CFB368" },
......@@ -670,6 +677,22 @@ class Auth extends React.Component {
headerLeft: props => <HeaderBackButton {...props} onPress={() => navigation.navigate('Home', { screen: 'HOME' })} />,
})} />
<Stack.Screen name="Inbox List" component={InboxList}
options={{
headerStyle: { backgroundColor: "#CFB368" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign: 'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 20,
},
title: i18n.t('headerInboxList')
}} />
<Stack.Screen name="Inbox Detail" component={InboxDetail} options={{ headerShown: false }} />
<Stack.Screen name="Transaction History" component={TransactionHistory}
options={{
headerStyle: { backgroundColor: "#CFB368" },
......
view/Home.js
View file @ 27c51e81
......@@ -241,7 +241,7 @@ class Home extends React.Component {
<Text style={styles.titleText}>{i18n.t('promotion')}</Text>
</View>
<View style={{ margin: 15, flex: 0.15, alignItems: 'flex-end' }}>
<TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Inbox List')}>
<SimpleLineIcons name="bell" size={24} color="white" />
</TouchableOpacity>
</View>
......
view/InboxDetail.js 0 → 100644
View file @ 27c51e81
import React from 'react';
import { View, Text, StyleSheet, Alert} from 'react-native';
import { Image } from 'react-native-elements';
import Axios from 'axios';
import { TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
import HTML from 'react-native-render-html';
import { connect } from 'react-redux';
import i18n from 'i18n-js';
import { FontAwesome, AntDesign } from '@expo/vector-icons';
import Toast from 'react-native-tiny-toast';
class InboxDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
subtitle: '',
image: '',
content: '',
image_height: 400,
statusbar_height: 50
}
}
componentDidMount() {
this.getInboxDetail()
}
getInboxDetail() {
let params = {
session_id: this.props.session_id,
message_id: this.props.route.params.idInbox
}
// console.log(params)
Axios.post(this.props.BASE_URL + 'crm/v2/inbox/get_detail', params).then(res => {
let data = res.data.message
// console.log(data)
this.setState({
title: data.message.title,
subtitle: data.message.title,
image: data.message.content_image,
content: data.message.content,
})
// console.log(this.state.content)
}).catch(error => {
let response = error.response.data;
Alert.alert(error, response.msg);
this.setState({
indicator: false,
})
// Alert.alert(response.msg);
})
}
handleDeleteInbox(){
Alert.alert(
"",
"Are you sure want to delete this message ?",
[
{
text: 'No',
onPress: () => console.log('Cancel Renewal'),
style: 'cancel',
},
{
text: 'Yes', onPress: () => this.deleteInbox()
},
],
{ cancelable: false },
)
}
deleteInbox() {
let params = {
session_id: this.props.session_id,
message_id: this.props.route.params.idInbox
}
// console.log(params)
Axios.post(this.props.BASE_URL + 'crm/v2/inbox/delete', params).then(res => {
let data = res.data
console.log(data)
Toast.show("deleted successfully")
this.props.navigation.goBack()
}).catch(error => {
let response = error.response.data;
Alert.alert(error, response.msg);
this.setState({
indicator: false,
})
// Alert.alert(response.msg);
})
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={{ margin: 15, flex: 0.1, alignItems: 'flex-start' }}>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<AntDesign name="arrowleft" size={22} color="white" />
</TouchableOpacity>
</View>
<View style={{ flex: 0.8, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: 'white' }}>{i18n.t('headerInboxDetail')}</Text>
</View>
<View style={{ margin: 15, flex: 0.1, alignItems: 'flex-end' }}>
<TouchableOpacity onPress={() => this.handleDeleteInbox()}>
<FontAwesome name="trash-o" size={24} color="white" />
</TouchableOpacity>
</View>
</View>
<ScrollView style={styles.body}>
<View style={{ flex: 1 }}>
<Image style={{ height: 250, width: '100%' }} source={this.state.image ? { uri: this.state.image } : null} />
</View>
<View style={styles.content}>
<Text style={styles.title}>{this.state.title}</Text>
<View style={{ backgroundColor: '#adadad', height: 1.5, flex: 1, marginBottom: 5 }} />
<HTML html={this.state.content} tagsStyles={{
p: { fontSize: 12, color: '#838383', fontFamily: 'Gotham-Light', margin: 1.5 },
blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 0 },
li: { fontSize: 12, color: '#838383', fontFamily: 'Gotham-Light', marginBottom: 0 },
ul: { fontSize: 12, color: '#838383', fontFamily: 'Gotham-Light', marginVertical: 5, marginBottom: -10 },
}}
ignoredTags={['br']}
ignoredStyles={['font-family', '&nbsp;', '&amp;']} />
</View>
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
header: {
flex: 0.1,
flexDirection: 'row',
backgroundColor: '#CFB368',
alignItems: 'center'
},
headerTitle: {
flex: 1,
textAlign: 'center',
margin: 20,
fontSize: 23,
alignSelf: 'center',
color: 'white',
fontFamily: 'Gotham-Black'
},
image_container: (height) => ({
height: height,
backgroundColor: 'gray'
}),
image: (height) => ({
width: '100%',
height: height
}),
title: {
textAlign: 'center',
fontFamily: 'Gotham-Black',
fontSize: 22,
marginBottom: 10,
color: '#CFB368'
},
content: {
paddingHorizontal: 25,
paddingVertical: 30
},
body: {
flex: 0.9
}
})
const mapStateToProps = (state) => {
return {
session_id: state.session_id,
language: state.language,
BASE_URL: state.BASE_URL,
}
}
export default connect(mapStateToProps)(InboxDetail);
\ No newline at end of file
view/InboxList.js 0 → 100644
View file @ 27c51e81
import React from 'react';
import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import Axios from 'axios';
import i18n from 'i18n-js';
import moment from 'moment'
class InboxList extends React.Component {
constructor(props) {
super(props)
this.state = {
inbox_list: [],
indicator: true
}
}
componentDidMount() {
this.getInbox()
this._unsubscribe = this.props.navigation.addListener('focus', () => {
this.setState({
indicator: true,
})
this.getInbox()
});
}
componentWillUnmount() {
this._unsubscribe()
}
getInbox() {
let params = {
session_id: this.props.session_id
}
Axios.post(this.props.BASE_URL + 'crm/v2/inbox/get_list', params).then(res => {
let data = res.data.messages
// console.log(data)
this.setState({
inbox_list: data,
indicator: false
})
}).catch(error => {
let response = error.response.data
Alert.alert('', response.msg);
this.setState({
indicator: false,
})
})
}
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.body}>
{
this.state.indicator ? (<ActivityIndicator style={{ justifyContent: "center", marginTop: 100 }} size="large" color="#c9af6d" />) :
this.state.inbox_list.length ? (
this.state.inbox_list.map((item, key) => (
<TouchableOpacity key={key} onPress={() => this.props.navigation.navigate('Inbox Detail', { idInbox: item.id })}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', borderBottomWidth: 1, borderColor: '#838383', padding: 15 }} key={key}>
<View style={{ flex: 0.7 }}>
<Text style={{ textAlign: 'left', fontSize: 18, fontFamily: 'Gotham-Black', color: 'grey' }}>{item.message.title}</Text>
<Text style={{ textAlign: 'left', fontSize: 14, fontFamily: 'Gotham-Black', color: 'grey' }}>{item.message.subtitle}</Text>
</View>
<View style={{ flex: 0.3, justifyContent:'center', alignItems:'flex-end' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'grey', fontSize: 18}}>{moment(item.sent_time).format("DD MMM")}</Text>
</View>
</View>
</TouchableOpacity>
))
) : (
<View style={{ justifyContent: 'center', alignItems: 'center', marginTop: 100 }}>
<Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>{i18n.t('noInboxData')}</Text>
</View>
)
}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
header: {
flex: 0.1,
backgroundColor: '#ccb46c',
justifyContent: 'center'
},
body: {
flex: 3,
margin: 10,
},
list_detail_order: {
flex: 1,
margin: 20,
borderWidth: 1,
}
})
const mapStateToProps = (state) => {
return {
session_id: state.session_id,
language: state.language,
BASE_URL: state.BASE_URL,
}
}
export default connect(mapStateToProps)(InboxList);
\ No newline at end of file
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