Skip to content

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

paymentttt

parent 8ae2a84f
Hide whitespace changes
Inline Side-by-side
Showing with 297 additions and 35 deletions
App/Containers/ChatScreen.js 0 → 100644
View file @ a2d793c1
import React, { Component } from 'react'
import { ScrollView, Text, View, Image } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
// Styles
import styles from './Styles/ChatScreenStyle'
import BaseHeader from '../Components/BaseHeader'
import BaseText from '../Components/BaseText'
import { Images } from '../Themes'
class ChatScreen extends Component {
constructor(props) {
super(props)
this.state = {
chatDummy: [
{
tanggal: "Thursday, 09 July 2020",
data: [
{
chat: [
{ isi: "Apakah produk 88Rising x Guess Hooded Sweatshirt size L ready?", jam: '08:00 AM', status: 'read', sender: 1, produk: {
nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', image: Images.jaket
} },
{ isi: "Selamat pagi, untuk produk tersebut stock masih tersedia, silahkan melakukan order", jam: '08:02 AM', status: 'read', sender: 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 }
],
}
]
}
}
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>
{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 (
<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: 0, }}>
<BaseText text={i.isi} type={'regular'} style={{ fontSize: 12, color: '#4b4b4b' }} />
</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: '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>
</View>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ChatScreen)
App/Containers/DeliveryScreen.js
View file @ a2d793c1
......@@ -10,17 +10,22 @@ import { NavigationEvents } from 'react-navigation';
import BaseHeader from '../Components/BaseHeader';
import { BarIndicator } from 'react-native-indicators';
import BaseButton from '../Components/BaseButton';
import DropDownPicker from 'react-native-dropdown-picker';
import Api from '../Services/Api';
import BaseText from '../Components/BaseText';
class DeliveryScreen extends Component {
constructor(props) {
super(props)
this.state = {
loading: false
loading: false,
listCourier: []
}
}
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.backAction);
this.getCourier()
}
backAction = () => {
......@@ -31,20 +36,62 @@ class DeliveryScreen extends Component {
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
render () {
getCourier() {
let listCourier = [
{ label: "Perkiraan barang tiba terhitung saat barang dikirimkan.", value: 0 }
]
Api.create().getCategoryCourier().then(response => {
if (response.data.status == "success") {
response.data.data.map((item, index) => {
listCourier.push({
label: item.ratecat_name + '+' + item.estimate,
value: item.ratecat_id
})
})
setTimeout(() => {
this.setState({
listCourier
})
}, 200);
}
})
}
render() {
return (
<View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
{/* <NavigationEvents onDidFocus={() => this.refreshScreen()}/> */}
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Opsi Pengiriman'} />
{this.state.loading?
<View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<ScrollView showsVerticalScrollIndicator={false} style={[styles.scrollContent, {zIndex: 1}]}>
</ScrollView>}
<View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
<BaseButton text={'Tetapkan'} onPress={() => this.props.navigation.goBack()} fontSizeText={14}/>
{this.state.loading && (
<View style={{ flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32 }}>
<BarIndicator count={5} color='#4cc9f0' size={25} />
</View>)}
<View style={{ flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32, }}>
<View style={{ marginTop: 20, paddingHorizontal: 20 }}>
<BaseText type={"regular"} text={'Durasi'} style={{ fontSize: 12, color: 'black', opacity: .7 }} />
<DropDownPicker
items={this.state.listCourier}
placeholder={"Pilih Durasi Pengiriman"}
placeholderStyle={{ margin: 0, padding: 0 }}
// defaultValue={this.state.provinsi}
containerStyle={{ height: 40 }}
style={{ marginHorizontal: 0, paddingHorizontal: 0, backgroundColor: '#fff', zIndex: 1, borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomColor: "#d8d8d8" }}
itemStyle={{
justifyContent: 'flex-start'
}}
labelStyle={{ color: 'grey' }}
activeLabelStyle={{ color: '#4cc9f0' }}
dropDownMaxHeight={200}
dropDownStyle={{ backgroundColor: '#fff', height: 200 }}
onChangeItem={item => this.setState({
provinsi: item.value,
})}
/>
</View>
</View>
<View style={{ padding: 20, backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8', position: 'absolute', bottom: 0 }}>
<BaseButton text={'Tetapkan'} onPress={() => this.props.navigation.goBack()} fontSizeText={14} />
</View>
</View>
)
......
App/Containers/HomePageScreen.js
View file @ a2d793c1
......@@ -57,7 +57,9 @@ class HomePageScreen extends Component {
navigate('AboutAppScreen')
} else if (type == 'Komplain Pesanan') {
navigate('ComplainOrderScreen')
}
} else if (type == 'Chat') {
navigate('ChatScreen')
}
}
handleLogin() {
......
App/Containers/PaymentMethodScreen.js
View file @ a2d793c1
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, BackHandler, View, AsyncStorage } from 'react-native'
import { ScrollView, Text, KeyboardAvoidingView, BackHandler, View, AsyncStorage, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
......@@ -13,18 +13,24 @@ import BaseButton from '../Components/BaseButton';
import BaseText from '../Components/BaseText';
import { formatRp } from '../Lib/Utils';
import Constant from '../Lib/Constant';
import RadioForm, { RadioButton, RadioButtonInput, RadioButtonLabel } from 'react-native-simple-radio-button';
import Api from '../Services/Api';
class PaymentMethodScreen extends Component {
constructor(props) {
super(props)
this.state = {
loading: false,
currency: ''
currency: '',
paymentMethod: [],
paymentID: 0
}
}
componentDidMount() {
this.getCurrency()
this.getPaymentMethod()
BackHandler.addEventListener("hardwareBackPress", this.backAction);
}
......@@ -39,32 +45,69 @@ class PaymentMethodScreen extends Component {
async getCurrency() {
let currency = await AsyncStorage.getItem(Constant.GLOBAL_CURRENCY)
this.setState({currency})
this.setState({ currency })
}
getPaymentMethod() {
this.setState({ loading: true})
Api.create().getPaymentMethod().then(response => {
if (response.data.status == "success") {
this.setState({
paymentMethod: response.data.data.reverse(),
loading: false
})
}
})
}
render () {
render() {
return (
<View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
{/* <NavigationEvents onDidFocus={() => this.refreshScreen()}/> */}
<BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Metode Pembayaran'} />
<View style={[styles.scrollContent]}>
<BaseText type={'bold'} text={'Payment'}/>
<View style={{flexDirection:'row', justifyContent: 'space-between', marginTop: 10}}>
<BaseText text={'Order Amount'} type={'regular'} style={{opacity: .5, fontSize: 12}}/>
<BaseText text={formatRp(this.state.currency, 2400000)} type={'bold'} style={{opacity: .5,fontSize: 12}}/>
<BaseText type={'bold'} text={'Payment'} />
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<BaseText text={'Order Amount'} type={'regular'} style={{ opacity: .5, fontSize: 12 }} />
<BaseText text={formatRp(this.state.currency, 2400000)} type={'bold'} style={{ opacity: .5, fontSize: 12 }} />
</View>
<View style={{flexDirection:'row', marginTop: 10}}>
<BaseText text={'Use'} type={'regular'} style={{opacity: .7, fontSize: 12}}/>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<BaseText text={'Use'} type={'regular'} style={{ opacity: .7, fontSize: 12 }} />
</View>
</View>
{this.state.loading?
<View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
<View style={{ flex: 1, backgroundColor: '#ececec'}}>
{this.state.loading ?
<View style={{ flex: 1, backgroundColor: 'white' }}>
<BarIndicator count={5} color='#4cc9f0' size={25} />
</View> :
<ScrollView showsVerticalScrollIndicator={false} style={{flex:1, backgroundColor:'white'}}>
</ScrollView>}
<View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
<BaseButton text={'Tetapkan'} onPress={() => this.props.navigation.goBack()} fontSizeText={14}/>
null
// <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1, backgroundColor: 'white' }}>
// </ScrollView>
}
{this.state.paymentMethod.map((item, index) => {
return (
<View style={{ flexDirection: 'row', backgroundColor: 'white', padding: 20, borderBottomWidth: 1, borderBottomColor: '#e0e0e0', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
style={this.state.paymentID == item.payment_method_id ? styles.radioCircleClick : styles.radioCircle}
onPress={() => {
this.setState({
paymentID: item.payment_method_id,
});
}}>
{this.state.paymentID == item.payment_method_id && <View style={styles.selectedRb} />}
</TouchableOpacity>
<BaseText text={item.payment_method_name} type={'regular'} style={{ opacity: .7, fontSize: 12, marginLeft: 20 }} />
</View>
{item.value != 0 && index == 0 ?
<BaseText text={item.value} type={'regular'} style={{ opacity: .7, fontSize: 12, marginLeft: 20 }} /> :
null}
</View>
)
})}
</View>
<View style={{ padding: 20, backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8', position: 'absolute', bottom: 0 }}>
<BaseButton text={'Tetapkan'} onPress={() => this.props.navigation.goBack()} fontSizeText={14} />
</View>
</View>
)
......
App/Containers/Styles/ChatScreenStyle.js 0 → 100644
View file @ a2d793c1
import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen,
containerView: {
flex: 1,
backgroundColor: 'white',
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
paddingHorizontal: 20,
}
})
App/Containers/Styles/PaymentMethodScreenStyle.js
View file @ a2d793c1
......@@ -5,11 +5,47 @@ export default StyleSheet.create({
...ApplicationStyles.screen,
scrollContent: {
paddingVertical: 20,
backgroundColor: 'white',
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
backgroundColor: 'white',
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
paddingHorizontal: 25,
borderBottomWidth: 1,
borderBottomWidth: 1,
borderBottomColor: '#e0e0e0'
},
radioText: {
marginRight: 35,
fontSize: 20,
color: '#000',
fontWeight: '700'
},
radioCircle: {
height: 20,
width: 20,
borderRadius: 100,
borderWidth: 2,
borderColor: '#d8d8d8',
alignItems: 'center',
justifyContent: 'center',
},
radioCircleClick: {
height: 20,
width: 20,
borderRadius: 100,
borderWidth: 2,
borderColor: '#4cc9f0',
alignItems: 'center',
justifyContent: 'center',
},
selectedRb: {
width: 10,
height: 10,
borderRadius: 50,
backgroundColor: '#4cc9f0',
},
result: {
marginTop: 20,
color: 'white',
fontWeight: '600',
backgroundColor: '#F3FBFE',
},
})
App/Navigation/AppNavigation.js
View file @ a2d793c1
import { createAppContainer } from 'react-navigation'
import ChatScreen from '../Containers/ChatScreen'
import DeliveryScreen from '../Containers/DeliveryScreen'
import DetailProductScreen from '../Containers/DetailProductScreen'
import ComplainOrderScreen from '../Containers/ComplainOrderScreen'
......@@ -44,6 +45,7 @@ import HomeNavigation from './HomeNavigation'
// Manifest of possible screens
const PrimaryNav = createStackNavigator({
ChatScreen: { screen: ChatScreen },
DeliveryScreen: { screen: DeliveryScreen },
DetailProductScreen: { screen: DetailProductScreen },
ComplainOrderScreen: { screen: ComplainOrderScreen },
......
App/Services/Api.js
View file @ a2d793c1
......@@ -74,6 +74,8 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
const getReward = () => api.get('get_rewards')
const getWallet = () => api.get('get_wallet')
const topUpWallet = (body) => api.post('topup_wallet', body)
const getPaymentMethod = () => api.get('get_payment_method')
const getCategoryCourier = () => api.get('get_category_courier')
// Deal Of The Day
const getPeriodeDeal = (body) => api.post('get_deal_product_per_periode', body)
......@@ -177,6 +179,8 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
getWallet,
topUpWallet,
getPeriodeDeal,
getPaymentMethod,
getCategoryCourier
}
}
......
App/Themes/Images.js
View file @ a2d793c1
......@@ -35,6 +35,7 @@ const images = {
berhasil: require('../Images/Icons/berhasil.png'),
add: require('../Images/Icons/add.png'),
map: require('../Images/Icons/map.png'),
read: require('../Images/Icons/read.png'),
mapgray: require('../Images/Icons/mapgray.png'),
filter: require('../Images/Icons/filter.png'),
icon_pesanansaya_gray: require('../Images/Icons/icon_pesanansaya_gray.png'),
......
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