Skip to content

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

complain pesanan

parent a446c17c
Hide whitespace changes
Inline Side-by-side
Showing with 200 additions and 36 deletions
App/Components/BaseHeader.js
View file @ 12fdfdba
......@@ -9,7 +9,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
const { StatusBarManager } = NativeModules;
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20: StatusBarManager.HEIGHT;
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;
export default class BaseHeader extends Component {
// Prop type warnings
static propTypes = {
......@@ -19,45 +19,57 @@ export default class BaseHeader extends Component {
onNextPress: PropTypes.func,
placeholder: PropTypes.string,
typeSearch: PropTypes.bool,
withBack: PropTypes.bool
withBack: PropTypes.bool,
complain: PropTypes.bool,
complainPress: PropTypes.func
}
// Defaults for props
static defaultProps = {
leftText: 'Title Screen',
rightText: '',
typeSearch: false,
withBack: true
withBack: true,
complain: false
}
render () {
render() {
return (
<View>
{!this.props.typeSearch && <View style={{alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == ''? 'flex-start' : 'space-between', backgroundColor:'#4cc9f0'}}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{this.props.withBack && <TouchableOpacity onPress={this.props.onBackPress} style={{marginBottom: -3}}>
<Image source={Images.icon_backwhite} style={{width: 20, height: 15}} />
{!this.props.typeSearch && !this.props.complain && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{this.props.withBack && <TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3 }}>
<Image source={Images.icon_backwhite} style={{ width: 20, height: 15 }} />
</TouchableOpacity>}
<BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16}}/>
<BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16 }} />
</View>
{this.props.rightText != '' && <TouchableOpacity onPress={this.props.onNextPress} style={{alignItems: 'center'}}>
<BaseText text={this.props.rightText} type={'bold'} style={{ fontSize: 16, color: 'white', textDecorationLine: 'underline',}}/>
{this.props.rightText != '' && <TouchableOpacity onPress={this.props.onNextPress} style={{ alignItems: 'center' }}>
<BaseText text={this.props.rightText} type={'bold'} style={{ fontSize: 16, color: 'white', textDecorationLine: 'underline', }} />
</TouchableOpacity>}
</View>}
{this.props.typeSearch && <View style={{alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'#4cc9f0'}}>
<TouchableOpacity onPress={this.props.onBackPress} style={{marginBottom: -3}}>
<Image source={Images.icon_backwhite} style={{width: 20, height: 15}} />
</TouchableOpacity>
<View style={{backgroundColor:'white', width: '90%', borderRadius: 18, paddingVertical: 10, paddingHorizontal: 15, flexDirection: 'row', justifyContent:'space-between'}}>
<Ionicons name={'ios-search'} size={20} color={"rgba(75, 75, 75, 0.6)"}/>
<View style={{width: '80%'}}>
<TextInput
placeholder={this.props.placeholder}
style={{color: 'black', width: '100%', padding: 0, fontFamily: 'Nunito-Bold'}}
/>
</View>
<FontAwesome name={'times-circle'} size={20} color={"rgba(75, 75, 75, 0.4)"}/>
{this.props.typeSearch && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#4cc9f0' }}>
<TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3 }}>
<Image source={Images.icon_backwhite} style={{ width: 20, height: 15 }} />
</TouchableOpacity>
<View style={{ backgroundColor: 'white', width: '90%', borderRadius: 18, paddingVertical: 10, paddingHorizontal: 15, flexDirection: 'row', justifyContent: 'space-between' }}>
<Ionicons name={'ios-search'} size={20} color={"rgba(75, 75, 75, 0.6)"} />
<View style={{ width: '80%' }}>
<TextInput
placeholder={this.props.placeholder}
style={{ color: 'black', width: '100%', padding: 0, fontFamily: 'Nunito-Bold' }}
/>
</View>
<FontAwesome name={'times-circle'} size={20} color={"rgba(75, 75, 75, 0.4)"} />
</View>
</View>}
{this.props.complain && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#4cc9f0' }}>
<TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3, flexDirection: 'row' }}>
<Image source={Images.icon_backwhite} style={{ width: 20, height: 15, alignSelf: 'center' }} />
<BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16, alignSelf: 'center' }} />
</TouchableOpacity>
<TouchableOpacity style={{ width: '30%', alignSelf: 'center', borderRadius: 20, height: 35, justifyContent: 'center', borderColor: '#fff', borderWidth: .6, backgroundColor: '#4cc9f0' }} onPress={this.props.complainPress}>
<BaseText type={"bold"} text={'+ Komplain'} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
</TouchableOpacity>
</View>}
</View>
)
......
App/Containers/ComplainOrderScreen.js 0 → 100644
View file @ 12fdfdba
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, View, BackHandler, Image, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import { Container, Header, Tab, Tabs, ScrollableTab, TabHeading } from 'native-base';
import FontAwesome from 'react-native-vector-icons/FontAwesome'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
// Styles
import styles from './Styles/MyOrderScreenStyle'
import BaseHeader from '../Components/BaseHeader';
import BaseText from '../Components/BaseText';
import { NavigationEvents } from 'react-navigation';
import { Images } from '../Themes';
class ComplainOrderScreen extends Component {
constructor(props) {
super(props)
this.state = {
activeTab: 0
}
}
backAction = () => {
this.props.navigation.goBack()
return true;
};
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.backAction);
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
render() {
return (
<Container style={{ backgroundColor: '#4cc9f0' }}>
{/* <NavigationEvents onDidFocus={() => alert('asdasd')}/> */}
<View style={{ zIndex: 99 }}>
<BaseHeader leftText={'Komplain Pesanan'} onBackPress={this.backAction} complain={true} complainPress={()=> this.props.navigation.navigate('ComplainScreen')}/>
</View>
<View style={{
flex: 1,
backgroundColor: 'white',
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
zIndex: 0,
paddingHorizontal: 10
// paddingTop: 20
}}>
<Tabs onChangeTab={({ i }) => this.setState({ activeTab: i })} initialPage={this.state.activeTab} tabBarUnderlineStyle={{ backgroundColor: '#4cc9f0' }} tabContainerStyle={{ borderTopLeftRadius: 32, borderTopRightRadius: 32, zIndex: 0 }} renderTabBar={() => <ScrollableTab backgroundColor={'transparent'} tabsContainerStyle={{ borderTopLeftRadius: 32, borderTopRightRadius: 32, backgroundColor: 'transparent', zIndex: 0 }} />}>
<Tab heading={
<TabHeading style={{ backgroundColor: 'transparent' }}>
<BaseText text={"Butuh Direspon Penjual (1)"} type={"bold"} style={{ fontSize: 12, color: this.state.activeTab == 0 ? 'black' : '#4b4b4b', opacity: this.state.activeTab == 0 ? 1 : .6, }} />
</TabHeading>}>
<View style={{ paddingHorizontal: 20, flex: 1, alignItems: 'center', backgroundColor: 'white' }}>
<View style={{ borderRadius: 10, width: '100%', elevation: 5, backgroundColor: 'white', marginTop: 20 }}>
<View style={{ paddingHorizontal: 20, paddingVertical: 10, backgroundColor: '#4cc9f0', borderTopLeftRadius: 10, borderTopRightRadius: 10, width: '100%', }}>
<View style={{ justifyContent: 'center' }}>
<BaseText text={"Komplain Diajukan"} type={"bold"} style={{ fontSize: 10, color: '#fff', alignSelf: 'center' }} />
</View>
</View>
<View style={{ padding: 20 }}>
<BaseText text={"No. Order"} type={"regular"} style={{ fontSize: 9, color: '#4b4b4b', opacity: .5 }} />
<BaseText text={"123456"} type={"regular"} style={{ fontSize: 10, color: '#4b4b4b' }} />
<BaseText text={"Penukaran Barang"} type={"bold"} style={{ fontSize: 12, color: '#4b4b4b', marginTop: 10 }} />
</View>
<View style={{ alignItems: 'flex-start', justifyContent: 'space-between', flexDirection: 'row', paddingHorizontal: 20, paddingVertical: 10, borderTopWidth: 1, borderTopColor: '#d8d8d8' }}>
<BaseText text={"1 Jenis Produk Bermasalah"} type={"bold"} style={{ fontSize: 11, color: '#4b4b4b', opacity: .5, alignSelf: 'center'}} />
<Image source={Images.jaket} style={{ width: 32, height: 32 }} />
</View>
</View>
</View>
</Tab>
<Tab heading={
<TabHeading style={{ backgroundColor: 'transparent' }}>
<BaseText text={"Menunggu Respon Pembeli (0)"} type={"bold"} style={{ fontSize: 12, color: this.state.activeTab == 1 ? 'black' : '#4b4b4b', opacity: this.state.activeTab == 1 ? 1 : .6, }} />
</TabHeading>}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
<BaseText text={"List Menunggu Konfirmasi"} type={"bold"} style={{ fontSize: 12, color: '#4b4b4b', opacity: .6, }} />
</View>
</Tab>
<Tab heading={
<TabHeading style={{ backgroundColor: 'transparent' }}>
<BaseText text={"Sedang Diproses"} type={"bold"} style={{ fontSize: 12, color: this.state.activeTab == 1 ? 'black' : '#4b4b4b', opacity: this.state.activeTab == 1 ? 1 : .6, }} />
</TabHeading>}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white' }}>
<BaseText text={"List Menunggu Konfirmasi"} type={"bold"} style={{ fontSize: 12, color: '#4b4b4b', opacity: .6, }} />
</View>
</Tab>
</Tabs>
</View>
<View style={{ width: '60%', backgroundColor: 'white', position: 'absolute', bottom: 25, alignSelf: 'center', borderRadius: 20, justifyContent: 'space-between', flexDirection: 'row', paddingVertical: 10, elevation: 5 }}>
<TouchableOpacity style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20 }}>
<Image source={Images.urutan} style={{ height: 16, width: 16, }} />
<BaseText type={"regular"} text={'Urutan'} style={{ fontSize: 12, color: '#4cc9f0', marginLeft: 10 }} />
</TouchableOpacity>
<View style={{ borderWidth: .4, borderColor: '#4cc9f0' }} />
<TouchableOpacity style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20 }}>
<Image source={Images.filter } style={{ height: 16, width: 16 }} resizeMode={"contain"} />
<BaseText type={"regular"} text={'Filter'} style={{ fontSize: 12, color: '#4cc9f0', marginLeft: 10 }} />
</TouchableOpacity>
</View>
</Container>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ComplainOrderScreen)
App/Containers/DealsOfTheDayScreen.js
View file @ 12fdfdba
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, View, Image, FlatList, Animated, TouchableOpacity } from 'react-native'
import { ScrollView, Text, KeyboardAvoidingView, View, Image, FlatList, Animated, TouchableOpacity, BackHandler } from 'react-native'
import { connect } from 'react-redux'
import * as Progress from 'react-native-progress';
// Add Actions - replace 'Your' with whatever your reducer is called :)
......@@ -28,8 +28,19 @@ class DealsOfTheDayScreen extends Component {
}
this.anim = new Animated.Value(0);
}
backAction = () => {
this.props.navigation.goBack()
return true;
};
componentDidMount() {
this.onAnimate();
BackHandler.addEventListener("hardwareBackPress", this.backAction);
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
onAnimate = () => {
this.anim.addListener(({ value }) => {
......
App/Containers/HomePageScreen.js
View file @ 12fdfdba
......@@ -52,7 +52,7 @@ class HomePageScreen extends Component {
} else if (type == 'Tentang Kami') {
navigate('AboutAppScreen')
} else if (type == 'Komplain Pesanan') {
navigate('ComplainScreen')
navigate('ComplainOrderScreen')
}
}
......
App/Containers/Styles/ComplainOrderScreenStyle.js 0 → 100644
View file @ 12fdfdba
import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen
})
App/Containers/WishlistScreen.js
View file @ 12fdfdba
......@@ -53,8 +53,12 @@ class WishlistScreen extends Component {
}
getWhistlist() {
Api.create().getWhislist().then((response) => {
// console.log('wls', response)
let body = {
"offset": 0,
"limit": 10
}
Api.create().getWhislist(body).then((response) => {
// console.log('wls', JSON.stringify(response))
if (response.data.status == "success") {
this.setState({
data: response.data.data
......@@ -65,6 +69,8 @@ class WishlistScreen extends Component {
search() {
let body = {
"offset": 0,
"limit": 10,
"keyword": this.state.text
}
Api.create().searchWhislist(body).then((response) => {
......@@ -77,6 +83,13 @@ class WishlistScreen extends Component {
})
}
number(num) {
var rupiah = '';
var angkarev = num.toString().split('').reverse().join('');
for (var i = 0; i < angkarev.length; i++) if (i % 3 == 0) rupiah += angkarev.substr(i, 3) + '.';
return 'Rp. ' + rupiah.split('', rupiah.length - 1).reverse().join('');
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
......@@ -95,19 +108,18 @@ class WishlistScreen extends Component {
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', marginTop: 20, paddingHorizontal: 20, }}>
<FlatList
showsVerticalScrollIndicator={false}
data={this.state.dummyList}
data={this.state.data}
renderItem={({ item, index }) => {
return (
<View style={{ flex: 1/2, flexDirection: 'column', margin: 10, backgroundColor: '#fff', borderRadius: 15, elevation: 3, marginTop: index == 0 ? 20 : index == 1 ? 20 : 0, marginRight: index == this.state.dummyList.length - 1 && this.state.isSecondColumn == false ? 30 : 10 }}>
<TouchableOpacity style={{ flex: 1 }} onPress={()=> alert(index)}>
<View style={{ flex: 1 / 2, flexDirection: 'column', margin: 10, backgroundColor: '#fff', borderRadius: 15, elevation: 3, marginTop: index == 0 ? 20 : index == 1 ? 20 : 0, marginRight: index == this.state.dummyList.length - 1 && this.state.isSecondColumn == false ? 30 : 10 }}>
<TouchableOpacity style={{ flex: 1 }} onPress={() => alert(index)}>
<View style={{ backgroundColor: item.color, width: '100%', height: 148, borderRadius: 10 }}>
{/* <Image source={{ uri: item.product_image }} style={{ width: '100%', height: '100%' }} /> */}
<Image source={{ uri: item.product_image }} style={{ width: '100%', height: '100%' }} />
<Image source={Images.wishlistBulat} style={{ width: 24, height: 24, alignSelf: 'flex-end', position: 'absolute', right: 10, top: 10 }} />
</View>
<View style={{ paddingHorizontal: 10, marginVertical: 10, justifyContent: 'space-between', flex: 1 }}>
<BaseText type={"regular"} text={item.product_name} style={{ fontSize: 14, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
<BaseText type={"regular"} text={item.price} style={{ fontSize: 10, color: 'black', textAlign: 'left', marginTop: 5 }} />
<BaseText type={"regular"} text={this.number(item.price)} style={{ fontSize: 10, color: 'black', textAlign: 'left', marginTop: 5 }} />
</View>
</TouchableOpacity>
</View>
......
App/Navigation/AppNavigation.js
View file @ 12fdfdba
import { createAppContainer } from 'react-navigation'
import ComplainOrderScreen from '../Containers/ComplainOrderScreen'
import ForgotPasswordScreen from '../Containers/ForgotPasswordScreen'
import TransactionResultScreen from '../Containers/TransactionResultScreen'
import ShippingScreen from '../Containers/ShippingScreen'
......@@ -41,6 +42,7 @@ import HomeNavigation from './HomeNavigation'
// Manifest of possible screens
const PrimaryNav = createStackNavigator({
ComplainOrderScreen: { screen: ComplainOrderScreen },
ForgotPasswordScreen: { screen: ForgotPasswordScreen },
TransactionResultScreen: { screen: TransactionResultScreen },
ShippingScreen: { screen: ShippingScreen },
......
App/Services/Api.js
View file @ 12fdfdba
......@@ -71,7 +71,7 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
const editProfile = (body) => api.post('edit_profile', body)
const editPhotoProfile = (body) => api.post('edit_photo', body)
const getAddress = () => api.get('get_address')
const getWhislist = () => api.get('get_wishlist')
const getWhislist = (body) => api.post('get_wishlist', body)
const searchWhislist = (body) => api.post('search_wishlist', body)
// Address
......
App/Themes/Images.js
View file @ 12fdfdba
......@@ -35,6 +35,7 @@ const images = {
berhasil: require('../Images/Icons/berhasil.png'),
add: require('../Images/Icons/add.png'),
map: require('../Images/Icons/map.png'),
filter: require('../Images/Icons/filter.png'),
icon_pesanansaya_gray: require('../Images/Icons/icon_pesanansaya_gray.png'),
icon_close: require('../Images/Icons/icon_close.png'),
map_addpin: require('../Images/Icons/map_addpin.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