Skip to content

E
eCartPro-Customer
Commit 802e12ca authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

chat + komen Filter

parent d5ddadbc
Show whitespace changes
Inline Side-by-side
Showing with 132 additions and 43 deletions
App/Containers/ChatScreen.js
View file @ 802e12ca
import React, { Component } from 'react'
import { ScrollView, Text, View, Image } from 'react-native'
import { ScrollView, Text, View, Image, AsyncStorage, BackHandler, TextInput, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
......@@ -9,6 +9,9 @@ import styles from './Styles/ChatScreenStyle'
import BaseHeader from '../Components/BaseHeader'
import BaseText from '../Components/BaseText'
import { Images } from '../Themes'
import { formatRp } from '../Lib/Utils'
import Constant from '../Lib/Constant'
import BaseButton from '../Components/BaseButton'
class ChatScreen extends Component {
constructor(props) {
......@@ -16,48 +19,110 @@ class ChatScreen extends Component {
this.state = {
chatDummy: [
{
tanggal: "Thursday, 09 July 2020",
data: [
{ image: Images.jaket, isi: "", jam: '08:00 AM', status: 'read', sender: 1, imageName: "88Rising x Guess Hooded Sweatshirt", itemHarga: 2400000 },
{ image: null, isi: "Apakah produk 88Rising x Guess Hooded Sweatshirt size L ready?", jam: '08:00 AM', status: 'read', sender: 1, imageName: "", itemHarga: 0 },
{ image: null, isi: "Selamat pagi, untuk produk tersebut stock masih tersedia, silahkan melakukan order", jam: '08:02 AM', status: 'read', sender: 0, imageName: "", itemHarga: 0 }
],
},
{
tanggal: "Today",
data: [
{ isi: "Apakah produk sudah dikirm?", jam: '08:00 AM', status: 'read', sender: 1 },
{ isi: "Selamat pagi, untuk produk tersebut stock masih tersedia, silahkan melakukan order", jam: '08:02 AM', status: 'read', sender: 0 }
{ image: Images.jaket, isi: "Apakah produk sudah dikirim?", jam: '09:00 AM', status: 'read', sender: 1, imageName: "", itemHarga: 0, noOrder: 12345, statusOrder: 'PESANAN DIKIRIM', total: 2400000 },
{ image: null, isi: "Apakah produk sudah dikirim?", jam: '09:00 AM', status: 'read', sender: 1, imageName: "", itemHarga: 0, noOrder: null, statusOrder: null },
{ image: null, isi: "Selamat pagi, untuk produk tersebut stock masih tersedia, silahkan melakukan order", jam: '09:02 AM', status: 'read', sender: 0, imageName: "", itemHarga: 0, noOrder: null, statusOrder: null }
],
}
],
currency: '',
intent: '',
product: null
}
}
componentDidMount() {
this.getCurrency()
BackHandler.addEventListener("hardwareBackPress", this.backAction);
if (this.props.navigation.state) {
if (this.props.navigation.state.params) {
if (this.props.navigation.state.params.intent == 'chat') {
this.setState({
intent: 'chat',
product: this.props.navigation.state.params.product
})
}
}
]
}
}
backAction = () => {
this.props.navigation.goBack()
return true;
};
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
async getCurrency() {
let currency = await AsyncStorage.getItem(Constant.GLOBAL_CURRENCY)
this.setState({ currency })
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
{/* <NavigationEvents onDidFocus={() => this.refreshScreen()}/> */}
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Chat With Us'} />
<View style={styles.containerView}>
<ScrollView>
<ScrollView showsVerticalScrollIndicator={false}>
{this.state.chatDummy.map((item, index) => {
return (
// item.sender == 0 ?
// <View style={{ marginTop: 10 }} key={index}>
// <View style={{ backgroundColor: '#4cc9f0', alignSelf: 'center', borderRadius: 20, paddingHorizontal: 20, paddingVertical: 5 }}>
// <BaseText text={item.tanggal} type={'bold'} style={{ fontSize: 12, color: 'white' }} />
// </View>
// <View style={{ width: '80%', alignSelf: 'flex-end', marginTop: 20 }}>
// <View style={{ justifyContent: 'center', padding: 15, backgroundColor: '#ccf3ff', borderRadius: 100, borderBottomRightRadius: 0, }}>
// <BaseText text={item.isi} type={'regular'} style={{ fontSize: 12 }} />
// </View>
// <View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 5 }}>
// <Image source={Images.read} style={{ width: 14, height: 14, marginRight: 10, alignSelf: 'center' }} />
// <BaseText text={item.jam} type={'regular'} style={{ fontSize: 12, color: '#4b4b4b', opacity: .5 }} />
// </View>
// </View>
// </View>
// :
<View style={{ marginTop: 10 }} key={index}>
<View style={{ backgroundColor: '#4cc9f0', alignSelf: 'center', borderRadius: 20, paddingHorizontal: 20, paddingVertical: 5 }}>
<BaseText text={item.tanggal} type={'bold'} style={{ fontSize: 12, color: 'white' }} />
</View>
{item.data.map((i, indexs) => {
return (
i.image ?
<View style={{ width: '80%', alignSelf: i.sender == 0 ? 'flex-start' : 'flex-end', marginTop: 20 }}>
{i.noOrder != null ?
<View style={{ justifyContent: 'center', backgroundColor: '#fff', elevation: 2, borderRadius: 12, margin: 5 }}>
<View style={{ height: 24, backgroundColor: '#cdedf7', justifyContent: 'center', borderTopLeftRadius: 12, borderTopRightRadius: 12 }}>
<BaseText text={i.statusOrder} type={'regular'} style={{ fontSize: 10, color: '#4cc9f0', alignSelf: 'center' }} />
</View>
<View style={{ flexDirection: 'row', flex: 1, padding: 10 }}>
<Image source={i.image} style={{ width: 64, height: 64, borderRadius: 15, marginRight: 10 }} />
<View style={{ flex: 1 }}>
<BaseText text={`No Order: ${i.noOrder}`} type={'regular'} style={{ fontSize: 10, color: '#4b4b4b', opacity: .5 }} />
<BaseText text={`Total: ${formatRp(this.state.currency, i.total)}`} type={'bold'} style={{ fontSize: 12, color: '#4b4b4b' }} />
</View>
</View>
</View>
:
<View style={{ justifyContent: 'center', padding: 15, backgroundColor: '#fff', elevation: 2, borderRadius: 12, margin: 5 }}>
<View style={{ flexDirection: 'row', flex: 1 }}>
<Image source={i.image} style={{ width: 64, height: 64, borderRadius: 15, marginRight: 10 }} />
<View style={{ flex: 1 }}>
<View>
</View>
<BaseText text={i.imageName} type={'regular'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<BaseText text={formatRp(this.state.currency, i.itemHarga)} type={'bold'} style={{ fontSize: 12, color: '#4b4b4b' }} />
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<BaseButton text={'+ Keranjang'} onPress={() => null} style={{ width: '46%', height: 30, justifyContent: 'center', backgroundColor: '#fff', borderColor: '#4cc9f0', borderWidth: 1 }} textColor={'#4cc9f0'} fontSizeText={12} />
<BaseButton text={'Beli Sekarang'} onPress={() => null} style={{ width: '46%', height: 30, justifyContent: 'center' }} fontSizeText={12} />
</View>
</View>
}
<View style={{ flexDirection: 'row', justifyContent: i.sender == 0 ? 'flex-start' : 'flex-end', marginTop: 5 }}>
{i.sender == 0 ? null : <Image source={Images.read} style={{ width: 14, height: 14, marginRight: 10, alignSelf: 'center' }} />}
<BaseText text={i.jam} type={'regular'} style={{ fontSize: 12, color: '#4b4b4b', opacity: .5 }} />
</View>
</View>
:
<View style={{ width: '80%', alignSelf: i.sender == 0 ? 'flex-start' : 'flex-end', marginTop: 20 }}>
<View style={{ justifyContent: 'center', padding: 15, backgroundColor: i.sender == 0 ? '#e8e8e8' : '#ccf3ff', borderRadius: 100, borderBottomLeftRadius: i.sender == 0 ? 0 : null, borderBottomRightRadius: i.sender == 0 ? null : 0, }}>
<BaseText text={i.isi} type={'regular'} style={{ fontSize: 12, color: '#4b4b4b' }} />
......@@ -69,22 +134,38 @@ class ChatScreen extends Component {
</View>
)
})}
{/* :
<View style={{ width: '80%', alignSelf: 'flex-end', marginTop: 20 }}>
<View style={{ justifyContent: 'center', padding: 15, backgroundColor: '#ccf3ff', borderRadius: 100, borderBottomRightRadius: 0, }}>
<BaseText text={item.isi} type={'regular'} style={{ fontSize: 12 }} />
</View>
<View style={{ flexDirection: 'row', justifyContent: 'flex-end', marginTop: 5 }}>
<Image source={Images.read} style={{ width: 14, height: 14, marginRight: 10, alignSelf: 'center' }} />
<BaseText text={item.jam} type={'regular'} style={{ fontSize: 12, color: '#4b4b4b', opacity: .5 }} />
</View>
</View> */}
</View>
)
})}
</ScrollView>
</View>
{this.state.intent == 'chat' ?
<View style={{ alignSelf: 'flex-end', backgroundColor: '#ededed', width: '100%', flexDirection: 'row' }}>
<View style={{ elevation: 3, borderRadius: 10, margin: 5, backgroundColor: '#fff', padding: 10, flexDirection: 'row', width: '60%', }}>
<Image source={{ uri: this.state.product.image }} style={{ height: 64, width: 64, borderRadius: 15, marginRight: 10 }} />
<View style={{ flex: 1 }}>
<BaseText text={this.state.product.imageName} type={'regular'} style={{ fontSize: 12, color: 'black' }} ellipsizeMode={'tail'} numberOfLines={2} />
<BaseText text={formatRp(this.state.currency, this.state.product.itemHarga)} type={'bold'} style={{ fontSize: 12, color: 'black' }} />
</View>
</View>
<TouchableOpacity style={{ backgroundColor: 'white', borderRadius: 10, width: 20, height: 20, justifyContent: 'center', marginLeft: -20, elevation: 5 }} onPress={()=> this.setState({ intent: ""})}>
<Image source={Images.icon_close} style={{ width: 14, height: 14, alignSelf: 'center' }} />
</TouchableOpacity>
</View> :
null
}
<View style={{ alignSelf: 'flex-end', padding: 10, backgroundColor: '#fff', width: '100%', borderTopColor: '#d8d8d8', borderTopWidth: .6, elevation: 6, paddingHorizontal: 20 }}>
<View style={{ borderColor: '#4cc9f0', borderWidth: 1, backgroundColor: '#fff', padding: 10, paddingHorizontal: 20, borderRadius: 30, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', width: '70%', flex: 1 }}>
<Image source={Images.icon_close} style={{ alignSelf: 'center', width: 28, height: 28, marginRight: 10, transform: [{ rotate: '45deg' }] }} />
<TextInput placeholder="Type a message" style={{ padding: 0, width: 200 }}></TextInput>
</View>
<View style={{ width: '30%', justifyContent: 'center' }}>
<BaseButton text={'Send'} onPress={() => null} style={{ width: 60, height: 28, justifyContent: 'center', alignSelf: 'flex-end' }} fontSizeText={12} />
</View>
</View>
</View>
</View >
)
}
}
......
App/Containers/DetailProductScreen.js
View file @ 802e12ca
......@@ -262,7 +262,15 @@ class DetailProductScreen extends Component {
</ScrollView>}
<View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: .5, borderTopColor: '#d8d8d8'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
<TouchableOpacity style={{width: '10%', alignItems:'center'}}>
<TouchableOpacity style={{width: '10%', alignItems:'center'}}
onPress={()=> this.props.navigation.navigate('ChatScreen', {
product: {
imageName: this.state.dataProduct.product_name,
itemHarga: this.state.dataProduct.price,
image: this.state.varient[0].varient_image
},
intent: 'chat'
})}>
<Image source={Images.icon_chat} style={{width: 50, height: 50}}/>
</TouchableOpacity>
<View style={{width: '40%'}}>
......
App/Containers/ListSearchScreen.js
View file @ 802e12ca
......@@ -203,10 +203,10 @@ class ListSearchScreen extends Component {
<Image source={!this.state.thumbnail ? Images.icon_thumbnailon : Images.icon_thumbnailoff} style={{ width: 20, height: 20, marginLeft: 20 }} />
</TouchableOpacity>
</View>
<View style={{ flexDirection: 'row' }}>
{/* <View style={{ flexDirection: 'row' }}>
<BaseText type={"bold"} text={'Filter'} style={{ fontSize: 14, color: '#fff', marginRight: 20, textAlign: 'center' }} />
<Image source={Images.icon_filter} style={{ width: 20, height: 20, alignSelf: 'center' }} resizeMode={"contain"} />
</View>
</View> */}
</View>
{!this.state.thumbnail && (
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 10 }}>
......
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