Skip to content

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

update

parent fda11f2a
Show whitespace changes
Inline Side-by-side
Showing with 217 additions and 97 deletions
App/Containers/ComplainScreen.js
View file @ 8e0392ed
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
import { ScrollView, Image, View, Text, TouchableOpacity } 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/ComplainScreenStyle'
import BaseHeader from '../Components/BaseHeader'
import BaseInput from '../Components/BaseInput'
import BaseText from '../Components/BaseText'
import { Images } from '../Themes'
import { CheckBox } from 'native-base'
class ComplainScreen extends Component {
render () {
render() {
return (
<ScrollView style={styles.container}>
<KeyboardAvoidingView behavior='position'>
<Text>ComplainScreen</Text>
</KeyboardAvoidingView>
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Komplain Pesanan'} onBackPress={() => this.props.navigation.goBack()} />
<ScrollView style={[styles.scrollContent]}>
<View style={{ marginTop: 20, paddingHorizontal: 10 }}>
<BaseInput
title={"Jenis Komplain"}
placeholder={"Jenis Komplain"}
blurOnSubmit={false}
/>
<View style={{ marginTop: 20 }}>
<BaseText type={"regular"} text={'Produk Yang Dikomplain'} style={{ fontSize: 10, color: '#4b4b4b', fontWeight: '600', opacity: .5 }} />
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ justifyContent: 'center'}}>
<Image source={Images.radioOn} style={{ height: 24, width: 24}} />
</View>
<View style={{ width: '85%', backgroundColor: 'white', elevation: 2, borderRadius: 15, flexDirection: 'row', padding: 10 }}>
<Image source={Images.jaket} style={{ width: 60, height: 60, borderRadius: 15 }} />
<View style={{ flex: 1, justifyContent: 'space-around' }}>
<BaseText type={"regular"} text={'88Rising x Guess Hooded Sweatshirts'} style={{ fontSize: 10, color: '#4b4b4b', fontWeight: '600', marginHorizontal: 10, flexWrap: 'wrap' }} />
<BaseText type={"regular"} text={'Rp. 2.400.000'} style={{ fontSize: 11, color: '#4cc9f0', fontWeight: '600', marginHorizontal: 10, flexWrap: 'wrap' }} />
</View>
</View>
</View>
</View>
<View style={{ marginTop: 20 }}>
<BaseInput
title={"Deskripsi"}
placeholder={"Tuliskan Subjek Keluhan Anda"}
blurOnSubmit={false}
/>
</View>
<BaseText type={"regular"} text={'Bukti Komplain'} style={{ fontSize: 10, color: '#4b4b4b', fontWeight: '600', marginTop: 20, opacity: .5 }} />
<View style={{ width: 56, height: 56, justifyContent: 'center', backgroundColor: '#4b4b4b', borderRadius: 10, marginTop: 20, opacity: .7 }}>
<BaseText type={"bold"} text={'+'} style={{ fontSize: 10, color: '#fff', textAlign: 'center' }} />
<BaseText type={"bold"} text={'Unggah Bukti'} style={{ fontSize: 10, color: '#fff', textAlign: 'center' }} />
</View>
</View>
</ScrollView>
<View style={{ position: 'absolute', bottom: 0, width: '100%', justifyContent: 'center', paddingVertical: 20, borderTopWidth: .5, borderTopColor: 'rgba(0, 0, 0, 0.1)', elevation: 10, backgroundColor: 'white' }}>
<TouchableOpacity style={{ width: '80%', alignSelf: 'center', backgroundColor: '#4cc9f0', borderRadius: 20, height: 40, justifyContent: 'center' }}>
<BaseText type={"bold"} text={'Kirim Komplain'} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
</TouchableOpacity>
</View>
</View >
)
}
}
......
App/Containers/DealsOfTheDayScreen.js
View file @ 8e0392ed
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, View, Image, FlatList, Animated } from 'react-native'
import { ScrollView, Text, KeyboardAvoidingView, View, Image, FlatList, Animated, TouchableOpacity } 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 :)
......@@ -11,7 +11,6 @@ import CountDown from 'react-native-countdown-component';
import BaseHeader from '../Components/BaseHeader'
import { Images } from '../Themes'
import BaseText from '../Components/BaseText';
import { TouchableOpacity } from 'react-native-gesture-handler';
class DealsOfTheDayScreen extends Component {
constructor(props) {
......@@ -77,7 +76,7 @@ class DealsOfTheDayScreen extends Component {
<BaseText type={"regular"} text={item.harga} style={{ fontSize: 10, color: '#d8d8d8', textAlign: 'left', textDecorationLine: 'line-through', marginTop: 10 }} />
<BaseText type={"bold"} text={item.diskon} style={{ fontSize: 12, color: '#4cc9f0', textAlign: 'left', marginTop: 5 }} />
<BaseText type={"bold"} text={`${item.jual} TERJUAL`} style={{ fontSize: 10, color: 'black', textAlign: 'left', marginTop: 5 }} />
<Progress.Bar progress={this.state.progressStatus/100} color={'#ffe500'} width={120} height={12} style={{ justifyContent: 'center', marginTop: 5, borderColor: '#fff', backgroundColor: '#eaeaea', borderRadius: 10}}>
<Progress.Bar progress={this.state.progressStatus / 100} color={'#ffe500'} width={120} height={12} style={{ justifyContent: 'center', marginTop: 5, borderColor: '#fff', backgroundColor: '#eaeaea', borderRadius: 10 }}>
<Animated.Text style={{
fontSize: 10,
color: "white",
......@@ -85,7 +84,7 @@ class DealsOfTheDayScreen extends Component {
zIndex: 1,
alignSelf: "center",
}}>
{this.state.progressStatus > 75 ? 'SEGERA HABIS': ''}
{this.state.progressStatus > 75 ? 'SEGERA HABIS' : ''}
</Animated.Text>
</Progress.Bar>
{/* <View style={{
......
App/Containers/HomePageScreen.js
View file @ 8e0392ed
......@@ -51,6 +51,8 @@ class HomePageScreen extends Component {
navigate('TermAndPrivacyScreen')
} else if (type == 'Tentang Kami') {
navigate('AboutAppScreen')
} else if (type == 'Komplain Pesanan') {
navigate('ComplainScreen')
}
}
......@@ -182,10 +184,10 @@ class HomePageScreen extends Component {
<TouchableOpacity onPress={() => this.setState({open: true})} style={{width: '10%'}}>
<FontAwesome name="bars" size={20} color={this.state.opacity >= .5? '#e3e3e3' : '#FFF'}/>
</TouchableOpacity>
<View style={{width: '70%', elevation: this.state.opacity == 1? 0 : 5, alignItems:'center', flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 15, backgroundColor: this.state.opacity >= .5? '#f1f1f1' : '#FFF', borderRadius: 25}}>
<TouchableOpacity style={{width: '70%', elevation: this.state.opacity == 1? 0 : 5, alignItems:'center', flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 15, backgroundColor: this.state.opacity >= .5? '#f1f1f1' : '#FFF', borderRadius: 25}} onPress={()=> this.props.navigation.navigate('ListSearchScreen')}>
<FontAwesome name="search" size={15} color={'#4b4b4b'}/>
<Image source={Images.logo_eCart} style={{width: 75, height: 22, marginLeft: 15, resizeMode:'stretch'}}/>
</View>
</TouchableOpacity>
<View style={{width: '15%'}}>
<Image source={Images.icon_chart} style={{width: 25, height: 20, marginLeft: 20, tintColor: this.state.opacity >= .5? '#e3e3e3' : '#FFF'}}/>
</View>
......
App/Containers/ListSearchScreen.js
View file @ 8e0392ed
import React, { Component } from 'react'
import { ScrollView, Text, View, StatusBar, Image, ListView, FlatList, TouchableOpacity } from 'react-native'
import { ScrollView, BackHandler, View, StatusBar, Image, ListView, FlatList, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
......@@ -16,22 +16,37 @@ class ListSearchScreen extends Component {
this.state = {
thumbnail: false,
dummyList: [
{ nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: 'rgba(210, 231, 243, 0.5)' },
{ nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: 'rgba(158, 212, 185, 0.44)' },
{ nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: 'rgba(158, 212, 185, 0.44)' },
{ nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: 'rgba(210, 231, 243, 0.5)' },
{ nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: 'rgba(210, 231, 243, 0.5)' },
{ nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: 'rgba(158, 212, 185, 0.44)' },
{ nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: '#a6cae3' },
{ nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: '#569a78' },
{ nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: '#569a78' },
{ nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: '#a6cae3' },
{ nama: '88Rising x Guess Hooded Sweatshirt', harga: 'Rp. 2.400.000', color: '#a6cae3' },
{ nama: 'Compass x Pot Meets Pop', harga: 'Rp. 3.700.000', color: '#569a78' },
]
}
}
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.backAction);
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
backAction = () => {
this.props.navigation.goBack()
return true;
};
render() {
return (
<View style={{ flex: 1 }}>
<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'} />
<BaseHeader typeSearch={true} />
<BaseHeader typeSearch={true} onBackPress={() => this.props.navigation.goBack()} />
<View style={{ backgroundColor: '#4cc9f0', flex: 1 }}>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', paddingHorizontal: 30, paddingVertical: 20 }}>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', paddingHorizontal: 20, paddingVertical: 20 }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.setState({ thumbnail: true })} activeOpacity={this.state.thumbnail ? 1 : 0}>
<Image source={!this.state.thumbnail ? Images.icon_listoff : Images.icon_liston} style={{ width: 20, height: 20 }} />
......@@ -46,12 +61,12 @@ class ListSearchScreen extends Component {
</View>
</View>
{!this.state.thumbnail && (
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', padding: 20 }}>
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 10 }}>
<FlatList
showsVerticalScrollIndicator={false}
data={this.state.dummyList}
renderItem={({ item }) => (
<View style={{ flex: 1, flexDirection: 'column', margin: 10, backgroundColor: item.color, borderRadius: 15 }}>
renderItem={({ item, index }) => (
<View style={{ flex: 1, flexDirection: 'column', margin: 10, backgroundColor: item.color, borderRadius: 15, marginTop: index == 0 ? 20 : index == 1 ? 20 : 0 }}>
<View style={{ width: 148, height: 270, justifyContent: 'flex-end', padding: 20 }}>
<BaseText type={"regular"} text={item.nama} style={{ fontSize: 14, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
<BaseText type={"regular"} text={item.harga} style={{ fontSize: 10, color: 'black', textAlign: 'left', marginTop: 5 }} />
......@@ -65,15 +80,15 @@ class ListSearchScreen extends Component {
</View>
)}
{this.state.thumbnail && (
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', padding: 20 }}>
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 20 }}>
<FlatList
showsVerticalScrollIndicator={false}
data={this.state.dummyList}
renderItem={({ item, index }) => (
<View style={{ flex: 1, flexDirection: 'row', marginTop:index == 0? 0: 10, borderRadius: 15 }}>
<View style={{ width: '40%', backgroundColor: item.color, borderTopLeftRadius: 15, borderBottomLeftRadius: 15 }}/>
<View style={{ width: '60%', height: 140, justifyContent: 'flex-start', padding: 20 }}>
<View style={{ flex: 1, flexDirection: 'row', marginTop: index == 0 ? 20 : 10, borderRadius: 15, elevation: 2, margin: 5 }}>
<View style={{ width: '40%', backgroundColor: item.color, borderTopLeftRadius: 15, borderBottomLeftRadius: 15 }} />
<View style={{ width: '60%', height: 140, justifyContent: 'flex-start', padding: 20, backgroundColor: 'white', borderTopRightRadius: 15, borderBottomRightRadius: 15 }}>
<BaseText type={"regular"} text={item.nama} style={{ fontSize: 12, color: 'black', textAlign: 'left', }} ellipsizeMode={"tail"} numberOfLines={2} />
<BaseText type={"bold"} text={item.harga} style={{ fontSize: 14, color: 'black', textAlign: 'left', marginTop: 5 }} />
</View>
......@@ -86,6 +101,18 @@ class ListSearchScreen extends Component {
</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.kategori} style={{ height: 16, width: 16, }} />
<BaseText type={"regular"} text={'Kategori'} 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.urutan} style={{ height: 16, width: 16 }} />
<BaseText type={"regular"} text={'Urutan'} style={{ fontSize: 12, color: '#4cc9f0', marginLeft: 10 }} />
</TouchableOpacity>
</View>
</View>
</View>
)
......
App/Containers/NotificationScreen.js
View file @ 8e0392ed
......@@ -44,7 +44,7 @@ class NotificationScreen extends Component {
render() {
return (
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Notifikasi'} onBackPress={() => this.props.navigation.goBack()} />
<BaseHeader leftText={'Notifikasi'} withBack={false} />
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', marginTop: 20 }}>
<FlatList
style={{ borderTopLeftRadius: 30, borderTopRightRadius: 30, marginTop: 20}}
......
App/Containers/ProfileScreen.js
View file @ 8e0392ed
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, Image, View, BackHandler, Alert, StatusBar } from 'react-native'
import { ScrollView, Text, KeyboardAvoidingView, Image, View, BackHandler, TouchableOpacity, StatusBar } from 'react-native'
import { connect } from 'react-redux'
import { withNavigationFocus, NavigationEvents } from 'react-navigation';
// Add Actions - replace 'Your' with whatever your reducer is called :)
......@@ -10,13 +10,13 @@ import styles from './Styles/ProfileScreenStyle'
import { Images } from '../Themes'
import BaseText from '../Components/BaseText'
import BaseHeader from '../Components/BaseHeader'
import { TouchableOpacity } from 'react-native-gesture-handler'
class ProfileScreen extends Component {
constructor(props) {
super(props)
this.state = {
// activeIndex: this.props.activeIndex
data: this.props.auth.user.data
}
}
backAction = () => {
......@@ -26,6 +26,8 @@ class ProfileScreen extends Component {
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.backAction);
console.log('auth', this.props.auth.user.data)
}
componentWillUnmount() {
......@@ -40,10 +42,11 @@ class ProfileScreen extends Component {
// }
render() {
let { data } = this.state
return (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'}/>
<BaseHeader leftText={'Data Diri'} onBackPress={this.backAction}/>
<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'} />
<BaseHeader leftText={'Data Diri'} onBackPress={this.backAction} />
<View style={{ backgroundColor: '#4cc9f0', borderBottomLeftRadius: 80, borderBottomRightRadius: 80, width: '100%', alignSelf: 'center' }}>
{/* <BaseText text={this.state.activeIndex} type={"bold"} style={{color: 'red', fontSize: 16, backgroundColor: 'yellow', width: '100%'}}/> */}
<View style={{ justifyContent: 'center', flexDirection: 'row', marginBottom: 20 }}>
......@@ -59,33 +62,33 @@ class ProfileScreen extends Component {
<View style={{ paddingHorizontal: 40, marginTop: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View>
<BaseText type={"regular"} text={'Nama'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<BaseText type={"bold"} text={'Rizal Firnando'} style={{ fontSize: 14, color: 'black' }} />
<BaseText type={"regular"} text={'Nama'} style={{ fontSize: 10, color: '#4b4b4b' }} />
<BaseText type={"regular"} text={data.user_name} style={{ fontSize: 12, color: 'black', fontWeight: '600' }} />
</View>
<View style={{ justifyContent: 'center', }}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={()=> this.props.navigation.navigate('RincianProfilScreen')}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={() => this.props.navigation.navigate('RincianProfilScreen')}>
<BaseText type={"regular"} text={'Ganti'} style={{ fontSize: 12, color: '#4cc9f0', textAlign: 'center' }} />
</TouchableOpacity>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
<View>
<BaseText type={"regular"} text={'Email'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<BaseText type={"bold"} text={'rizal.f@gmail.com'} style={{ fontSize: 14, color: 'black' }} />
<BaseText type={"regular"} text={'Email'} style={{ fontSize: 10, color: '#4b4b4b' }} />
<BaseText type={"regular"} text={data.user_email} style={{ fontSize: 12, color: 'black', fontWeight: '600' }} />
</View>
<View style={{ justifyContent: 'center', }}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={()=> this.props.navigation.navigate('RincianProfilScreen', {intent: 'email'})}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={() => this.props.navigation.navigate('RincianProfilScreen', { intent: 'email' })}>
<BaseText type={"regular"} text={'Ganti'} style={{ fontSize: 12, color: '#4cc9f0', textAlign: 'center' }} />
</TouchableOpacity>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
<View>
<BaseText type={"regular"} text={'Nomor HP'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<BaseText type={"bold"} text={'08129986899'} style={{ fontSize: 14, color: 'black' }} />
<BaseText type={"regular"} text={'Nomor HP'} style={{ fontSize: 10, color: '#4b4b4b' }} />
<BaseText type={"regular"} text={data.user_phone} style={{ fontSize: 12, color: 'black', fontWeight: '600' }} />
</View>
<View style={{ justifyContent: 'center', }}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={()=> this.props.navigation.navigate('RincianProfilScreen', {intent: 'hp'})}>
<TouchableOpacity style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', borderColor: '#4cc9f0', borderWidth: 1.3, width: 70, height: 24, borderRadius: 5 }} onPress={() => this.props.navigation.navigate('RincianProfilScreen', { intent: 'hp' })}>
<BaseText type={"regular"} text={'Ganti'} style={{ fontSize: 12, color: '#4cc9f0', textAlign: 'center' }} />
</TouchableOpacity>
</View>
......@@ -101,12 +104,15 @@ class ProfileScreen extends Component {
const mapStateToProps = (state) => {
return {
auth: state.auth
}
}
const mapDispatchToProps = (dispatch) => {
return {
authRequest: obj => dispatch(AuthAction.authRequest(obj))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ProfileScreen)
App/Containers/RewardScreen.js
View file @ 8e0392ed
import React, { Component } from 'react'
import { ScrollView, View, StatusBar, BackHandler, Image, NativeModules, Platform, TouchableOpacity as Touch, TextInput } from 'react-native'
import { ScrollView, View, StatusBar, BackHandler, Image, NativeModules, Platform, TouchableOpacity, TextInput } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
......@@ -11,7 +11,6 @@ import BaseText from '../Components/BaseText';
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import { Images } from '../Themes';
import Modal from 'react-native-modal';
import { TouchableOpacity, TouchableHighlight } from 'react-native-gesture-handler';
import BaseHeader from '../Components/BaseHeader';
const { StatusBarManager } = NativeModules;
......@@ -125,9 +124,9 @@ class RewardScreen extends Component {
<View style={{ backgroundColor: 'white', width: '100%' }}>
<View style={{ padding: 15, borderBottomColor: 'd8d8d8', borderBottomWidth: .6, justifyContent: 'space-between', flexDirection: 'row' }}>
<BaseText type={"regular"} text={'Isi Saldo Dompet Saya'} stsyle={{ fontSize: 16, marginLeft: 5, marginTop: 20 }} />
<Touch style={{ alignSelf: 'flex-start' }} activeOpacity={.8} onPress={() => this.setState({ modalIsiUlang: false })}>
<TouchableOpacity style={{ alignSelf: 'flex-start' }} activeOpacity={.8} onPress={() => this.setState({ modalIsiUlang: false })}>
<Image source={Images.closeBlack} style={{ width: 20, height: 20 }} />
</Touch>
</TouchableOpacity>
</View>
<View style={{ padding: 15, paddingBottom: 25 }}>
<BaseText type={"regular"} text={'Nominal Saldo'} style={{ fontSize: 12, marginLeft: 5, color: '#4b4b4b' }} />
......@@ -138,9 +137,9 @@ class RewardScreen extends Component {
maxLength={40}
underlineColorAndroid={'#d8d8d8'}
/>
<Touch style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '100%', alignSelf: 'center', marginTop: 20 }} onPress={() => this.setState({ modalIsiUlang: false, modalTopUp: true })}>
<TouchableOpacity style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '100%', alignSelf: 'center', marginTop: 20 }} onPress={() => this.setState({ modalIsiUlang: false, modalTopUp: true })}>
<BaseText type={"regular"} text={'Lanjutkan'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: 'white' }} />
</Touch>
</TouchableOpacity>
</View>
</View>
</Modal>
......@@ -151,12 +150,12 @@ class RewardScreen extends Component {
<Image source={Images.failed} style={{ width: 80, height: 80, alignSelf: 'center', marginTop: 20 }} />
<BaseText type={"bold"} text={'Maaf, pembayaran Top Up Anda gagal.\nSIlahkan coba lagi.'} style={{ fontSize: 16, textAlign: 'center', marginTop: 20 }} />
<View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 30 }}>
<Touch style={{ backgroundColor: '#fff', height: 45, borderRadius: 30, width: '40%', borderColor: '#4cc9f0', borderWidth: 1 }} onPress={() => this.setState({ modalTopUp: false })}>
<TouchableOpacity style={{ backgroundColor: '#fff', height: 45, borderRadius: 30, width: '40%', borderColor: '#4cc9f0', borderWidth: 1 }} onPress={() => this.setState({ modalTopUp: false })}>
<BaseText type={"regular"} text={'Batal'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: '#4cc9f0' }} />
</Touch>
<Touch style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '40%' }} onPress={() => this.setState({ modalTopUp: false })}>
</TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: '#4cc9f0', height: 45, borderRadius: 30, width: '40%' }} onPress={() => this.setState({ modalTopUp: false })}>
<BaseText type={"regular"} text={'Lanjutkan'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: 'white' }} />
</Touch>
</TouchableOpacity>
</View>
</View>
</View>
......
App/Containers/RincianProfilScreen.js
View file @ 8e0392ed
import React, { Component } from 'react'
import { ScrollView, Text, TouchableOpacity, TextInput } from 'react-native'
import { BackHandler, Text, TouchableOpacity, TextInput } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
......@@ -9,16 +9,19 @@ import styles from './Styles/RincianProfilScreenStyle'
import { View } from 'react-native-animatable'
import BaseHeader from '../Components/BaseHeader'
import BaseText from '../Components/BaseText'
import BaseInput from '../Components/BaseInput'
class RincianProfilScreen extends Component {
constructor(props) {
super(props)
this.state = {
intent: ""
intent: "",
data: this.props.auth.user.data
}
}
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.backAction);
if (this.props.navigation.state.params) {
if (this.props.navigation.state.params.intent == 'email') {
this.setState({ intent: 'email' })
......@@ -27,7 +30,19 @@ class RincianProfilScreen extends Component {
}
}
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
backAction = () => {
this.props.navigation.goBack()
return true;
};
render() {
let { data } = this.state
return (
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Rincian Profil'} onBackPress={() => this.props.navigation.goBack()} />
......@@ -36,13 +51,15 @@ class RincianProfilScreen extends Component {
<View style={{ padding: 40 }}>
<BaseText type={"bold"} text={'Harap diisi sesuai dengan email Anda yang aktif untuk\nmempermudah proses verifikasi'} style={{ fontSize: 12, color: '#4b4b4b', alignSelf: 'center', textAlign: 'center' }} />
<View style={{ marginTop: 30 }}>
<BaseText type={"regular"} text={'Masukkan Email'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<TextInput
placeholder={"Masukkan Email Anda"}
// editable={false}
style={{ fontSize: 14, paddingHorizontal: 0, color: 'black', }}
maxLength={40}
underlineColorAndroid={'#d8d8d8'}
<BaseInput
title={"Email"}
placeholder={"Masukan Email Anda"}
// value={this.state.email}
keyboardType={Platform.OS === 'android' ? 'email-address' : 'ascii-capable'}
blurOnSubmit={false}
// lineColor={this.state.errorEmail ? 'red' : '#d8d8d8'}
// notes={this.state.errorEmail ? this.state.errorEmail : 'Contoh: test@gmail.com'}
// notesColor={this.state.errorEmail ? 'red' : '#4b4b4b'}
/>
<View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 30, width: '100%' }}>
<TouchableOpacity style={{ backgroundColor: '#fff', height: 45, borderRadius: 30, width: '45%', borderColor: '#4cc9f0', borderWidth: 1 }}>
......@@ -60,21 +77,30 @@ class RincianProfilScreen extends Component {
<View style={{ padding: 40 }}>
<BaseText type={"bold"} text={'Harap diisi sesuai dengan nomor handphone Anda yang aktif untuk mempermudah proses verifikasi'} style={{ fontSize: 12, color: '#4b4b4b', alignSelf: 'center', textAlign: 'center' }} />
<View style={{ marginTop: 30 }}>
<BaseText type={"regular"} text={'No. Handphone'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<View style={{ flexDirection: 'row', borderBottomColor: '#d8d8d8', borderBottomWidth: 1 }}>
<View style={{ justifyContent: 'center'}}>
<BaseText type={"regular"} text={'+62'} style={{ fontSize: 14, color: 'black', alignSelf: 'center', textAlign: 'center' }} />
<BaseText text={"No. Handphone"} type={"bold"} style={{ fontSize: 12, color: '#4b4b4b', opacity: .6 }} />
<View style={{ flexDirection: 'row', flexGrow: 1, borderBottomColor: this.state.errorPhone ? 'red' : '#d8d8d8', borderBottomWidth: 1, alignItems: 'center', }}>
<View style={{ width: '15%', flexDirection: 'row' }}>
<BaseText text={"+62"} type={"bold"} style={{ fontSize: 14, color: '#4b4b4b', opacity: .8 }} />
<BaseText text={"|"} type={"light"} style={{ fontSize: 18, color: '#4b4b4b', opacity: .5, marginHorizontal: 10, marginTop: -3 }} />
</View>
<View style={{ borderRightColor: '#cecece', borderRightWidth: 1, height: 24, alignSelf: 'center', marginLeft: 10}}/>
<View style={{ width: '85%' }}>
<TextInput
placeholder={"8xxxxxxxxxx"}
keyboardType={"phone-pad"}
// editable={false}
style={{ fontSize: 14, paddingHorizontal: 0, color: 'black', marginLeft: 10 }}
placeholder={"8xxxxxxxxx"}
style={{ padding: 0 }}
// value={this.state.phone}
keyboardType={'phone-pad'}
// ref={(ref) => { this.phone = ref; }}
maxLength={13}
underlineColorAndroid={'transparent'}
onChangeText={(phone) => {
// this.setState({ phone: handlePhone(phone) }, () => this.refreshValidasi())
}}
// onSubmitEditing={() => {
// this.focusNextField('password');
// }}
blurOnSubmit={false}
/>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 30, width: '100%' }}>
<TouchableOpacity style={{ backgroundColor: '#fff', height: 45, borderRadius: 30, width: '45%', borderColor: '#4cc9f0', borderWidth: 1 }}>
<BaseText type={"regular"} text={'Tidak'} style={{ fontSize: 16, textAlign: 'center', marginTop: 10, color: '#4cc9f0' }} />
......@@ -89,24 +115,27 @@ class RincianProfilScreen extends Component {
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%' }}>
<View style={{ padding: 40 }}>
<View>
<BaseText type={"regular"} text={'Nama Depan'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<TextInput
<BaseInput
title={"Nama Depan"}
placeholder={"Nama Depan"}
// editable={false}
style={{ fontSize: 14, paddingHorizontal: 0, color: 'black', }}
maxLength={40}
underlineColorAndroid={'#d8d8d8'}
// value={this.state.name}
// onChangeText={(name) => this.setState({ name: name.replace(/[^a-zA-Z.', ]/g, "") }, () => this.refreshValidasi())}
blurOnSubmit={false}
// lineColor={this.state.errorName ? 'red' : '#d8d8d8'}
// notes={this.state.errorName ? 'Nama Tidak Boleh Kosong' : ''}
// notesColor={this.state.errorName ? 'red' : '#4b4b4b'}
/>
</View>
<View style={{ marginTop: 20 }}>
<BaseText type={"regular"} text={'Nama Belakang'} style={{ fontSize: 12, color: '#4b4b4b' }} />
<TextInput
<BaseInput
title={"Nama Belakang"}
placeholder={"Nama Belakang"}
// editable={false}
style={{ fontSize: 14, paddingHorizontal: 0, color: 'black' }}
maxLength={40}
underlineColorAndroid={'#d8d8d8'}
// value={this.state.name}
// onChangeText={(name) => this.setState({ name: name.replace(/[^a-zA-Z.', ]/g, "") }, () => this.refreshValidasi())}
blurOnSubmit={false}
// lineColor={this.state.errorName ? 'red' : '#d8d8d8'}
// notes={this.state.errorName ? 'Nama Tidak Boleh Kosong' : ''}
// notesColor={this.state.errorName ? 'red' : '#4b4b4b'}
/>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 30, width: '100%' }}>
......@@ -126,11 +155,13 @@ class RincianProfilScreen extends Component {
const mapStateToProps = (state) => {
return {
auth: state.auth
}
}
const mapDispatchToProps = (dispatch) => {
return {
authRequest: obj => dispatch(AuthAction.authRequest(obj))
}
}
......
App/Containers/Styles/ComplainScreenStyle.js
View file @ 8e0392ed
......@@ -2,5 +2,13 @@ import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen
...ApplicationStyles.screen,
scrollContent: {
flex: 1,
backgroundColor: 'white',
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
paddingHorizontal: 20,
// paddingTop: 50,
},
})
App/Containers/WishlistScreen.js
View file @ 8e0392ed
......@@ -49,7 +49,7 @@ class WishlistScreen extends Component {
render() {
return (
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Whistlist'} onBackPress={() => this.props.navigation.goBack()} />
<BaseHeader leftText={'Whistlist'} withBack={false} />
<View style={{ backgroundColor: 'white', width: '90%', borderRadius: 18, paddingVertical: 10, paddingHorizontal: 15, flexDirection: 'row', justifyContent: 'space-between', alignSelf: 'center' }}>
<Ionicons name={'ios-search'} size={20} color={"rgba(75, 75, 75, 0.6)"} style={{ alignSelf: 'center' }} />
<View style={{ width: '80%' }}>
......@@ -60,12 +60,12 @@ class WishlistScreen extends Component {
</View>
<FontAwesome name={'times-circle'} size={20} color={"rgba(75, 75, 75, 0.4)"} style={{ alignSelf: 'center' }} />
</View>
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingTop: 20, marginTop: 20, paddingHorizontal: 15 }}>
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', marginTop: 20, paddingHorizontal: 15 }}>
<FlatList
showsVerticalScrollIndicator={false}
data={this.state.dummyList}
renderItem={({ item }) => (
<View style={{ flex: 1, flexDirection: 'column', margin: 10, backgroundColor: '#fff', borderRadius: 15, elevation: 1 }}>
renderItem={({ item, index }) => (
<View style={{ flex: 1, flexDirection: 'column', margin: 10, backgroundColor: '#fff', borderRadius: 15, elevation: 1, marginTop: index == 0 ? 20 : index == 1 ? 20: 0 }}>
<View style={{}}>
<View style={{ backgroundColor: item.color, width: '100%', height: 148, borderRadius: 10, padding: 10 }}>
<Image source={Images.wishlistBulat} style={{width: 24, height: 24, alignSelf: 'flex-end' }}/>
......
App/Themes/Images.js
View file @ 8e0392ed
......@@ -28,6 +28,10 @@ const images = {
categorySale: require('../Images/categorySale.png'),
categorySepatu: require('../Images/categorySepatu.png'),
categoryTas: require('../Images/categoryTas.png'),
kategori: require('../Images/Icons/kategori.png'),
urutan: require('../Images/Icons/urutan.png'),
radioOff: require('../Images/Icons/radiobutton-off.png'),
radioOn: require('../Images/Icons/radiobutton-on.png'),
// big image
letter: require('../Images/letter.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