Skip to content

E
eCartPro-Customer
Commit 15cb4e61 authored by d.arizona's avatar d.arizona
Browse files
Options

update

parent 70171da7
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 210 deletions
App/Components/BaseHeader.js
View file @ 15cb4e61
......@@ -85,7 +85,7 @@ export default class BaseHeader extends Component {
</View>}
{this.props.notification && <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' }} />
{/* <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={{ justifyContent: 'center', alignSelf: 'center', marginBottom: -3, }} onPress={this.props.notificationPress}>
......
App/Containers/CartScreen.js
View file @ 15cb4e61
......@@ -17,6 +17,7 @@ import { formatRp, handlePhone, titleCase } from '../Lib/Utils';
import Constant from '../Lib/Constant';
import Toast from 'react-native-toast-message';
import { BarIndicator } from 'react-native-indicators';
import FontAwesome from 'react-native-vector-icons/FontAwesome'
class CartScreen extends Component {
constructor(props) {
......@@ -149,7 +150,7 @@ class CartScreen extends Component {
let listCartCopy = Object.assign([] , this.state.listCart)
if (inputText) {
listCartCopy[indexId].quantity = type
listCartCopy[indexId].quantity = type >= 15? 15 : type
} else {
listCartCopy[indexId].quantity = type == '-'? (listCartCopy[indexId].quantity <= 1? 1 : listCartCopy[indexId].quantity-1) : (listCartCopy[indexId].quantity >= 15 ? 15 : listCartCopy[indexId].quantity + 1)
}
......@@ -180,9 +181,11 @@ class CartScreen extends Component {
getTotalCart() {
let total = 0
this.state.listCart.map((item) => {
total += item.total_price
})
if (this.state.dataCheckout.length > 0) {
this.state.dataCheckout.map((item) => {
total += item.total_price
})
}
return String(formatRp(this.state.currency, total))
}
......@@ -253,110 +256,137 @@ class CartScreen extends Component {
{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}]}>
{this.state.listCart.map((item,index) => {
return (
<View key={index}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
<View style={{flexDirection: 'row', alignItems: 'center',}}>
<TouchableOpacity onPress={() => this.handleDataCheckout(item)}>
{ this.state.arrayCheck.includes(item.cart_id) ?
<Image source={Images.radioOn} style={{width: 20, height: 20}}/> :
<Image source={Images.radioOff} style={{width: 20, height: 20, tintColor: 'gray'}}/>
}
<View style={[styles.scrollContent]}>
<View style={{padding: 20, flexDirection:'row', justifyContent: 'space-between', borderBottomColor: '#ececec', borderBottomWidth: 1}}>
<View style={{flexDirection:'row'}}>
<TouchableOpacity onPress={() => {
this.state.arrayCheck.length > 0 && this.state.arrayCheck.length == this.state.listCart.length?
this.setState({arrayCheck: [], dataCheckout: []}) : this.handleCheckAll()
}}>
{this.state.arrayCheck.length > 0 && this.state.arrayCheck.length == this.state.listCart.length?
<Image source={Images.radioOn} style={{width: 20, height: 20}}/>:
<Image source={Images.radioOff} style={{width: 20, height: 20, tintColor: 'gray'}}/>
}
</TouchableOpacity>
<BaseText onPress={() => {
this.state.arrayCheck.length > 0 && this.state.arrayCheck.length == this.state.listCart.length?
this.setState({arrayCheck: [], dataCheckout: []}) : this.handleCheckAll()
}} text={"Pilih Semua Orang"} type={"bold"} style={{opacity: .7, fontSize: 12, marginLeft: 15, alignSelf: 'flex-end',}}/>
</View>
<View>
<BaseText text={'Hapus'} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/>
</View>
</View>
<ScrollView showsVerticalScrollIndicator={false} style={{backgroundColor:'white'}}>
{this.state.listCart.map((item,index) => {
return (
<View key={index}>
{/* <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
<View style={{flexDirection: 'row', alignItems: 'center',}}>
<TouchableOpacity onPress={() => this.handleDataCheckout(item)}>
{ this.state.arrayCheck.includes(item.cart_id) ?
<Image source={Images.radioOn} style={{width: 20, height: 20}}/> :
<Image source={Images.radioOff} style={{width: 20, height: 20, tintColor: 'gray'}}/>
}
</TouchableOpacity>
<Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
</View>
<View style={{paddingLeft: 10, flexGrow: 1}}>
<BaseText text={"Paket 1"} type={"bold"}/>
<BaseText text={"Dijual oleh e-CartPro"} type={"regular"} style={{opacity: .8}}/>
</View>
<TouchableOpacity onPress={() => this.deleteCart(item.cart_id)} style={{alignItems:'center', justifyContent: 'center',}}>
<Image source={Images.icon_close} style={{width: 35, height: 35, resizeMode:'stretch'}}/>
</TouchableOpacity>
<Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
</View>
<View style={{paddingLeft: 10, flexGrow: 1}}>
<BaseText text={"Paket 1"} type={"bold"}/>
<BaseText text={"Dijual oleh e-CartPro"} type={"regular"} style={{opacity: .8}}/>
</View>
<TouchableOpacity onPress={() => this.deleteCart(item.cart_id)} style={{alignItems:'center', justifyContent: 'center',}}>
<Image source={Images.icon_close} style={{width: 35, height: 35, resizeMode:'stretch'}}/>
</TouchableOpacity>
</View>
<View style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1}}>
<View style={{flexDirection:'row'}}>
<View style={{width: '25%', alignItems:'center', justifyContent: 'center'}}>
<Image source={{uri: item.product_image}} style={{width: 75, height: 75, resizeMode: 'cover', borderRadius: 10}}/>
</View> */}
<View style={{flexDirection: 'row'}}>
<View style={{width: '10%', paddingVertical: 20, alignItems: 'center', paddingLeft: 20}}>
<TouchableOpacity onPress={() => this.handleDataCheckout(item)}>
{ this.state.arrayCheck.includes(item.cart_id) ?
<Image source={Images.radioOn} style={{width: 20, height: 20}}/> :
<Image source={Images.radioOff} style={{width: 20, height: 20, tintColor: 'gray'}}/>
}
</TouchableOpacity>
</View>
<View style={{marginLeft: 5, flexDirection: 'column', justifyContent: 'space-between', flexGrow: 1, width: '70%'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', marginLeft: 5 }}>
<View style={{width: '60%'}}>
<BaseText text={titleCase(item.product_name)} type={"bold"} style={{opacity: .6}}/>
</View>
<View style={{alignItems: 'flex-end', width: '40%', flexGrow: 1}}>
<BaseText text={String(formatRp(this.state.currency, item.total_price))} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/>
<BaseText text={"Grosir"} type={"bold"} style={{opacity: .5, fontSize: 12}}/>
<View style={{width: '90%'}}>
<View style={{padding: 20}}>
<View style={{flexDirection:'row'}}>
<View style={{width: '25%'}}>
<Image source={{uri: item.product_image}} style={{width: 75, height: 75, resizeMode: 'cover', borderRadius: 10}}/>
</View>
<View style={{marginLeft: 5, flexDirection: 'column', justifyContent: 'space-between', flexGrow: 1, width: '70%'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', marginLeft: 5 }}>
<View style={{width: '60%'}}>
<BaseText text={titleCase(item.product_name)} type={"bold"} style={{fontSize: 12, opacity: .5}} ellipsizeMode={'tail'} numberOfLines={2}/>
<BaseText text={String(formatRp(this.state.currency, item.total_price))} type={"bold"} style={{fontSize: 12, opacity: .8, color: '#4cc9f0'}}/>
<BaseText text={"Grosir"} type={"bold"} style={{opacity: .2, fontSize: 12}}/>
</View>
<View style={{alignItems: 'flex-end', width: '40%', flexGrow: 1}}>
<TouchableOpacity onPress={() => this.deleteCart(item.cart_id)} style={{alignItems:'center', justifyContent: 'center',}}>
<Image source={Images.icon_delete} style={{width: 17, height: 20, resizeMode: 'stretch'}}/>
</TouchableOpacity>
</View>
</View>
<View>
<Image source={Images.icon_freedeliv} style={{width: 55, height: 22, resizeMode: 'stretch'}}/>
</View>
</View>
</View>
</View>
<View>
<Image source={Images.icon_freedeliv} style={{width: 50, height: 22, resizeMode: 'stretch'}}/>
<View style={{paddingHorizontal: 20, paddingBottom: 20}}>
<View style={{flexDirection:'row', alignItems: 'center',}}>
<BaseText text={"Jumlah"} type={"regular"} style={{opacity: .4, width: '25%'}}/>
<View style={{flexDirection:'row', marginLeft: 5}}>
<TouchableOpacity onPress={() => this.handleQty(false, '-', item)} style={{backgroundColor:'#f1f1f1', width: 25, padding: 5, alignItems: 'center', justifyContent: 'center',}}>
<BaseText type={'bold'} text={'-'}/>
</TouchableOpacity>
<TextInput
style={{width: 50, padding: 0, margin: 0, textAlign:'center', paddingHorizontal: 5}}
maxLength={3}
value={String(item.quantity)}
keyboardType={'number-pad'}
onChangeText={(text) => this.handleQty(true, handlePhone(text), item)}
/>
<TouchableOpacity onPress={() => this.handleQty(false, '+', item)} style={{backgroundColor:'#f1f1f1', width: 25, padding: 5, alignItems: 'center', justifyContent: 'center',}}>
<BaseText type={'bold'} text={'+'}/>
</TouchableOpacity>
</View>
</View>
{item.default_size.length > 0 && <View style={{flexDirection:'row', alignItems: 'center',}}>
<BaseText text={"Ukuran"} type={"regular"} style={{opacity: .4, width: '25%'}}/>
<View style={{width: 100, marginLeft: 5}}>
<DropDownPicker
items={item.default_size}
placeholder={"Pilih Ukuran"}
placeholderStyle={{ margin: 0, padding: 0}}
defaultValue={this.handleDefaultSize(item)}
containerStyle={{ height: 40, alignItems: 'center',}}
style={{ marginHorizontal: 0, paddingHorizontal: 0, backgroundColor: '#fff', zIndex: 1, borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0,}}
itemStyle={{
justifyContent: 'center'
}}
labelStyle={{ color: 'grey', textAlign: 'center'}}
selectedLabelStyle={{ marginLeft: 15}}
activeLabelStyle={{ color: '#4cc9f0' }}
dropDownMaxHeight={200}
dropDownStyle={{ backgroundColor: '#fff', height: 200 }}
onChangeItem={items => this.hanldeSize(item, items.value)}
/>
</View>
</View>}
</View>
</View>
</View>
<View style={{width: '100%', height: 15, backgroundColor: '#ececec'}}/>
{index == this.state.listCart.length -1 && item.default_size.length > 0 && <View style={{height: 200, backgroundColor:'#ececec', width: '100%'}}/>}
</View>
<View style={{paddingHorizontal: 20, paddingBottom: 20}}>
<View style={{flexDirection:'row', alignItems: 'center',}}>
<BaseText text={"Jumlah"} type={"regular"} style={{opacity: .4, width: '20%'}}/>
<View style={{flexDirection:'row', marginLeft: 10}}>
<TouchableOpacity onPress={() => this.handleQty(false, '-', item)} style={{backgroundColor:'#f1f1f1', width: 25, padding: 5, alignItems: 'center', justifyContent: 'center',}}>
<BaseText type={'bold'} text={'-'}/>
</TouchableOpacity>
<TextInput
style={{width: 50, padding: 0, margin: 0, textAlign:'center', paddingHorizontal: 5}}
maxLength={3}
value={String(item.quantity)}
keyboardType={'number-pad'}
onChangeText={(text) => this.handleQty(true, handlePhone(text), item)}
/>
<TouchableOpacity onPress={() => this.handleQty(false, '+', item)} style={{backgroundColor:'#f1f1f1', width: 25, padding: 5, alignItems: 'center', justifyContent: 'center',}}>
<BaseText type={'bold'} text={'+'}/>
</TouchableOpacity>
</View>
</View>
{item.default_size.length > 0 && <View style={{flexDirection:'row', alignItems: 'center',}}>
<BaseText text={"Ukuran"} type={"regular"} style={{opacity: .4, width: '20%'}}/>
<View style={{width: 100, marginLeft: 10}}>
<DropDownPicker
items={item.default_size}
placeholder={"Pilih Ukuran"}
placeholderStyle={{ margin: 0, padding: 0}}
defaultValue={this.handleDefaultSize(item)}
containerStyle={{ height: 40, alignItems: 'center',}}
style={{ marginHorizontal: 0, paddingHorizontal: 0, backgroundColor: '#fff', zIndex: 1, borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0,}}
itemStyle={{
justifyContent: 'center'
}}
labelStyle={{ color: 'grey', textAlign: 'center'}}
selectedLabelStyle={{ marginLeft: 15}}
activeLabelStyle={{ color: '#4cc9f0' }}
dropDownMaxHeight={200}
dropDownStyle={{ backgroundColor: '#fff', height: 200 }}
onChangeItem={items => this.hanldeSize(item, items.value)}
/>
</View>
</View>}
</View>
<View style={{width: '100%', height: 10, backgroundColor: '#ececec'}}/>
{index == this.state.listCart.length -1 && item.default_size.length > 0 && <View style={{height: 200, backgroundColor:'transparent', width: '100%'}}/>}
</View>
)
})}
</ScrollView>}
)
})}
</ScrollView>
</View>
}
<View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: 1, borderTopColor: '#d8d8d8'}}>
<View style={{flexDirection:'row'}}>
<TouchableOpacity onPress={() => {
this.state.arrayCheck.length > 0 && this.state.arrayCheck.length == this.state.listCart.length?
this.setState({arrayCheck: [], dataCheckout: []}) : this.handleCheckAll()
}}>
{this.state.arrayCheck.length > 0 && this.state.arrayCheck.length == this.state.listCart.length?
<Image source={Images.radioOn} style={{width: 20, height: 20}}/>:
<Image source={Images.radioOff} style={{width: 20, height: 20, tintColor: 'gray'}}/>
}
</TouchableOpacity>
<BaseText text={"Pilih Semua"} type={"bold"} style={{opacity: .5, fontSize: 12, marginLeft: 5, alignSelf: 'flex-end',}}/>
</View>
<View style={{flexDirection:'row', justifyContent: 'space-between', alignItems:'center'}}>
<View style={{width: '60%'}}>
<BaseText text={"Subtotal"} type={"bold"} style={{opacity: .5, fontSize: 12, marginTop: 5}}/>
......
App/Containers/CheckOutScreen.js
View file @ 15cb4e61
......@@ -27,6 +27,8 @@ class CheckOutScreen extends Component {
address: {},
dataCheckout: [],
totalCheckout: 0,
delivery: null,
paymentMethod : null
}
}
......@@ -87,6 +89,38 @@ class CheckOutScreen extends Component {
this.setState({totalCheckout})
}
onSelect = (data) => {
this.setState(data)
}
createOrder() {
let payloadCart = []
this.state.dataCheckout.map((item, index) => {
payloadCart.push({
"cart_id": item.cart_id,
"varient_id": item.varient_id,
"product_id": item.product_id,
"quantity": item.quantity,
"price": item.price,
"total_price": item.total_price,
"cart_date": null
})
})
let payload = {
"address_id": this.state.address.address_id,
"payment_method": 1,
"delivery_charge": "1000",
"is_wallet": 0,
"coupon_id": null,
"coupon_discount": null,
"discount": 1000,
"lat": this.state.address.lat,
"long": this.state.address.long,
"cart": payloadCart,
"courier_rate_id": 1
}
}
render () {
return (
<View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
......@@ -119,72 +153,68 @@ class CheckOutScreen extends Component {
</View>
<View style={{height: 10, width: '100%', backgroundColor: '#e0e0e0'}}/>
</View>
{/* Product */}
{this.state.dataCheckout.map((item,index) => {
<View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
<View style={{alignItems:'center', justifyContent: 'center',}}>
<Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
</View>
<View style={{paddingLeft: 10, flexGrow: 1}}>
<BaseText text={"Paket 1"} type={"bold"}/>
<BaseText text={"Dijual oleh e-CartPro"} type={"regular"} style={{opacity: .8}}/>
</View>
</View>
{this.state.dataCheckout.map((item,index) => {
return (
<View key={index}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 20}}>
<View style={{alignItems:'center', justifyContent: 'center',}}>
<Image source={Images.icon_pesanansaya_gray} style={{width: 25, height: 30, resizeMode:'stretch', marginLeft: 10}}/>
</View>
<View style={{paddingLeft: 10, flexGrow: 1}}>
<BaseText text={"Paket 1"} type={"bold"}/>
<BaseText text={"Dijual oleh e-CartPro"} type={"regular"} style={{opacity: .8}}/>
</View>
<View key={index} style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1, backgroundColor: '#f5f5f5'}}>
<View style={{flexDirection:'row'}}>
<View style={{width: '25%', alignItems:'center', justifyContent: 'center'}}>
<Image source={{uri: item.varient_image}} style={{width: 75, height: 75, resizeMode: 'cover', borderRadius: 10}}/>
</View>
<View style={{padding: 20, borderTopColor: '#ececec', borderTopWidth: 1, backgroundColor: '#f5f5f5'}}>
<View style={{flexDirection:'row'}}>
<View style={{width: '25%', alignItems:'center', justifyContent: 'center'}}>
<Image source={{uri: item.varient_image}} style={{width: 75, height: 75, resizeMode: 'cover', borderRadius: 10}}/>
<View style={{marginLeft: 5, flexDirection: 'column', justifyContent: 'space-between', flexGrow: 1, width: '70%'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{width: '60%'}}>
<BaseText text={titleCase(item.product_name)} type={"bold"} style={{opacity: .6}}/>
</View>
<View style={{marginLeft: 5, flexDirection: 'column', justifyContent: 'space-between', flexGrow: 1, width: '70%'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{width: '60%'}}>
<BaseText text={titleCase(item.product_name)} type={"bold"} style={{opacity: .6}}/>
</View>
<View style={{alignItems: 'flex-end', width: '40%', flexGrow: 1}}>
<BaseText text={`x${item.quantity}`} type={"bold"} style={{opacity: .5, fontSize: 12, color: 'gray'}}/>
</View>
</View>
<View>
<BaseText text={String(formatRp(this.state.currency, item.total_price))} type={"bold"} style={{opacity: .5, color: 'gray'}}/>
</View>
<View style={{alignItems: 'flex-end', width: '40%', flexGrow: 1}}>
<BaseText text={`x${item.quantity}`} type={"bold"} style={{opacity: .5, fontSize: 12, color: 'gray'}}/>
</View>
</View>
</View>
<View style={{borderTopColor: '#4cc9f0', borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: '#4cc9f0'}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('DeliveryScreen')} style={{flexDirection: 'row', justifyContent: 'space-between', padding: 20, backgroundColor: 'rgba(76, 201, 240, .2)'}}>
<BaseText type={'regular'} text={'Opsi Pengiriman'}/>
<FontAwesome name={'angle-right'} size={20}/>
</TouchableOpacity>
<View style={{padding: 20, borderTopColor: '#e0e0e0', borderTopWidth: 1, backgroundColor: 'rgba(76, 201, 240, .2)'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',}}>
<BaseText text={'Reguler'} type={'bold'}/>
<BaseText text={'Akan diterima pada tanggal 27 Mei - 30 Mei 2020'} type={'italic'} style={{fontSize: 10, color: 'gray'}}/>
</View>
<BaseText text={'Anter Aja'} type={'regular'} style={{opacity: .6, fontSize: 12, marginTop: 5}}/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10}}>
<BaseText text={'Biaya Pengiriman'} type={'regular'} style={{opacity: .6, fontSize: 12}}/>
<View style={{flexDirection:'row', alignItems:'center'}}>
<View>
<Image source={Images.icon_freedeliv} style={{width: 60, height: 26, resizeMode: 'stretch'}}/>
</View>
<BaseText text={formatRp(this.state.currency, 10000)} type={'regular'} style={{fontSize: 10, color: 'gray', textDecorationLine: 'line-through', marginLeft: 5}}/>
</View>
</View>
<View>
<BaseText text={String(formatRp(this.state.currency, item.total_price))} type={"bold"} style={{opacity: .5, color: 'gray'}}/>
</View>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', padding: 20}}>
<BaseText text={'Total Pesanan'} type={'regular'} style={{opacity: .9}}/>
<BaseText text={formatRp(this.state.currency, item.price)} type={'bold'} style={{color: '#4cc9f0'}}/>
</View>
<View style={{height: 10, width: '100%', backgroundColor: '#e0e0e0'}}/>
</View>
)
})}
</View> )
})}
<View style={{borderTopColor: '#4cc9f0', borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: '#4cc9f0'}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('DeliveryScreen', {setProps: this.onSelect.bind(this), delivery: this.state.delivery})} style={{flexDirection: 'row', justifyContent: 'space-between', padding: 20, backgroundColor: 'rgba(76, 201, 240, .2)'}}>
<BaseText type={'regular'} text={'Opsi Pengiriman'}/>
<FontAwesome name={'angle-right'} size={20}/>
</TouchableOpacity>
{this.state.delivery != null && <View style={{padding: 20, borderTopColor: '#e0e0e0', borderTopWidth: 1, backgroundColor: 'rgba(76, 201, 240, .2)'}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',}}>
<BaseText text={this.state.delivery.rate_name} type={'bold'}/>
<BaseText text={'Akan diterima pada tanggal 27 Mei - 30 Mei 2020'} type={'italic'} style={{fontSize: 10, color: 'gray'}}/>
</View>
<BaseText text={this.state.delivery.courier_name} type={'regular'} style={{opacity: .6, fontSize: 12, marginTop: 5}}/>
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10}}>
<BaseText text={'Biaya Pengiriman'} type={'regular'} style={{opacity: .6, fontSize: 12}}/>
<View style={{flexDirection:'row', alignItems:'center'}}>
{this.state.delivery.rate_value == 0 && <View>
<Image source={Images.icon_freedeliv} style={{width: 60, height: 26, resizeMode: 'stretch', marginRight: 5}}/>
</View>}
<BaseText text={formatRp(this.state.currency, this.state.delivery.rate_value)} type={'regular'} style={{fontSize: 10, color: 'gray', textDecorationLine: this.state.delivery.rate_value == 0? 'line-through' : 'none'}}/>
</View>
</View>
</View>}
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between', padding: 20}}>
<BaseText text={'Total Pesanan'} type={'regular'} style={{opacity: .9}}/>
<BaseText text={formatRp(this.state.currency, this.state.totalCheckout)} type={'bold'} style={{color: '#4cc9f0'}}/>
</View>
<View style={{height: 10, width: '100%', backgroundColor: '#e0e0e0'}}/>
</View>
{/* Kupon and Rewards */}
<View>
<View style={{flexDirection:'row', justifyContent: 'space-between', padding: 20}}>
......@@ -222,7 +252,7 @@ class CheckOutScreen extends Component {
{/* Metode Pembayaran */}
<View>
<View style={{padding: 20}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('PaymentMethodScreen')} style={{flexDirection:'row', justifyContent: 'space-between'}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('PaymentMethodScreen', {setProps: this.onSelect.bind(this), paymentMethod: this.state.paymentMethod})} style={{flexDirection:'row', justifyContent: 'space-between'}}>
<View style={{flexDirection: 'row',alignItems: 'center'}}>
<Image source={Images.icon_pembayaran} style={{width: 30, height: 20, resizeMode: 'stretch'}}/>
<BaseText text={'Pilih Metode Pembayaran'} style={{marginLeft: 10, fontSize: 12}}/>
......@@ -231,7 +261,7 @@ class CheckOutScreen extends Component {
<FontAwesome name={'angle-right'} size={20}/>
</View>
</TouchableOpacity>
<BaseText text={'Pembayaran menggunakan metode COD'} type={'regular'} style={{opacity: .6, fontSize: 12, marginTop: 10}}/>
{this.state.paymentMethod != null && <BaseText text={`Pembayaran menggunakan metode ${this.state.paymentMethod.payment_method_name}`} type={'regular'} style={{opacity: .6, fontSize: 12, marginTop: 10}}/>}
</View>
<View style={{borderTopColor: '#e0e0e0', borderTopWidth: 1, padding: 20}}>
<View style={{flexDirection:'row', justifyContent: 'space-between'}}>
......
App/Containers/DeliveryScreen.js
View file @ 15cb4e61
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, BackHandler, View } from 'react-native'
import { ScrollView, Text, KeyboardAvoidingView, BackHandler, View, TouchableOpacity, Image } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
......@@ -13,19 +13,26 @@ import BaseButton from '../Components/BaseButton';
import DropDownPicker from 'react-native-dropdown-picker';
import Api from '../Services/Api';
import BaseText from '../Components/BaseText';
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import { Images } from '../Themes';
class DeliveryScreen extends Component {
constructor(props) {
super(props)
this.state = {
loading: false,
listCourier: []
listDurasiCourier: [],
viewChildDurasi: false,
viewChildKurir: false,
listCourier: [],
itemDurasi: null,
itemKurir: null
}
}
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.backAction);
this.getCourier()
this.getDurationCourier()
}
backAction = () => {
......@@ -37,23 +44,24 @@ class DeliveryScreen extends Component {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
getCourier() {
let listCourier = [
{ label: "Perkiraan barang tiba terhitung saat barang dikirimkan.", value: 0 }
]
getDurationCourier() {
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
})
this.setState({
listDurasiCourier: response.data.data
})
}
})
}
getEstimateCourier() {
this.setState({itemKurir: null})
Api.create().getEstimateCourier(this.state.itemDurasi.ratecat_id).then(response => {
console.log(response.data)
if (response.data.status == "success") {
this.setState({
listCourier: response.data.data
})
setTimeout(() => {
this.setState({
listCourier
})
}, 200);
}
})
}
......@@ -69,29 +77,84 @@ class DeliveryScreen extends Component {
</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 style={{zIndex: 2}}>
<BaseText type={"regular"} text={'Durasi'} style={{ fontSize: 12, color: 'black', opacity: .7 }} />
<View style={{backgroundColor: 'white', width: '100%'}}>
<TouchableOpacity
onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout;
this.setState({heightParent: height})
}} onPress={() => this.setState({viewChildDurasi: !this.state.viewChildDurasi})} style={{width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems:'center', borderBottomColor: '#cecece', borderBottomWidth: this.state.viewChildDurasi? 0 : .5, paddingBottom: 5}}>
<BaseText type={"regular"} text={this.state.itemDurasi == null? 'Pilih Durasi Pengiriman' : this.state.itemDurasi.ratecat_name} style={{ fontSize: 14, color: 'black', opacity: .4, marginTop: 5}} />
<FontAwesome name={this.state.viewChildDurasi? 'caret-up' : 'caret-down'} size={20} color={'#4b4b4b'} style={{marginBottom: -10}}/>
</TouchableOpacity>
{this.state.viewChildDurasi &&
<View style={{width: '100%', padding: 15, borderColor: '#cecece', borderWidth: .5, backgroundColor: 'white'}}>
<View style={{paddingVertical: 10, borderRadius: 2, backgroundColor:'rgba(76, 201, 240, .2)', alignItems: 'center'}}>
<BaseText text={'Perkiraan barang tiba terhitung saat barang dikirimkan.'} type={'regular'} style={{fontSize: 10, opacity: .5,}}/>
</View>
<ScrollView style={{marginTop: 10}}>
{this.state.listDurasiCourier.map((item,index) => {
return (
<TouchableOpacity key={index} onPressIn={() => this.setState({viewChildDurasi: !this.state.viewChildDurasi, itemDurasi: item}, () => this.getEstimateCourier())} style={{flexDirection:'row', justifyContent: 'space-between', paddingVertical: 10, borderBottomColor: '#cecece', borderBottomWidth: .5, marginBottom: index == this.state.listDurasiCourier.length -1? 10 : 0}}>
<View style={{flexDirection:'row', alignItems: 'center',}}>
{String(item.estimate).includes('Internal') && <Image source={Images.icon_freedeliv} style={{width: 30, height: 15, resizeMode: 'stretch', marginRight: 5}}/>}
<BaseText type={"regular"} text={item.ratecat_name} style={{ fontSize: 12, color: 'black',}} />
</View>
<View style={{flexDirection:'row', alignItems: 'center',}}>
<BaseText type={"regular"} text={item.estimate} style={{ fontSize: 12, color: 'black', opacity: .5 }} />
{this.state.itemDurasi != null && this.state.itemDurasi.ratecat_id == item.ratecat_id && <FontAwesome name={'check'} size={15} color={'#4cc9f0'} style={{marginLeft: 5}}/>}
</View>
</TouchableOpacity>
)
})}
</ScrollView>
</View>}
</View>
</View>
<View style={{marginTop: 20}}>
<BaseText type={"regular"} text={'Kurir'} style={{ fontSize: 12, color: 'black', opacity: .7 }} />
<View style={{backgroundColor: 'white', width: '100%'}}>
<TouchableOpacity
onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout;
this.setState({heightParent2: height})
}} onPress={() => this.state.itemDurasi == null? null : this.setState({viewChildKurir: !this.state.viewChildKurir})} style={{width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems:'center', borderBottomColor: '#cecece', borderBottomWidth: this.state.viewChildKurir? 0 : .5, paddingBottom: 5}}>
<BaseText type={"regular"} text={this.state.itemKurir == null? 'Pilih Kurir' : `${this.state.itemKurir.courier_name} ${String(this.state.itemKurir.rate_name).includes('Internal')? '' : `(${this.state.itemKurir.rate_name})`}`} style={{ fontSize: 14, color: 'black', opacity: this.state.itemDurasi == null? .1 : .4, marginTop: 5}} />
{/* <BaseText type={"regular"} text={'Durasi'} style={{ fontSize: 12, color: 'black', opacity: .7 }} /> */}
<FontAwesome name={this.state.viewChildKurir? 'caret-up' : 'caret-down'} size={20} color={'#4b4b4b'} style={{marginBottom: -10}}/>
</TouchableOpacity>
{this.state.viewChildKurir &&
<View style={{width: '100%', padding: 15, borderColor: '#cecece', borderWidth: .5, backgroundColor: 'white'}}>
<ScrollView>
{this.state.listCourier.map((item,index) => {
return (
<TouchableOpacity key={index} onPressIn={() => this.setState({viewChildKurir: !this.state.viewChildKurir, itemKurir: item})} style={{flexDirection:'row', justifyContent: 'space-between', paddingVertical: 10, borderBottomColor: '#cecece', borderBottomWidth: .5, marginBottom: index == this.state.listCourier.length -1? 10 : 0}}>
<View style={{flexDirection:'row', alignItems: 'center',}}>
<BaseText type={"regular"} text={`${item.courier_name} ${String(item.rate_name).includes('Internal')? '' : `(${item.rate_name})`}`} style={{ fontSize: 12, color: 'black',}} />
</View>
<View style={{flexDirection:'row', alignItems: 'center',}}>
{String(item.rate_name).includes('Internal')?
<Image source={Images.icon_freedeliv} style={{width: 30, height: 15, resizeMode: 'stretch', marginRight: 5, marginBottom: -10}}/>
:
<BaseText type={"regular"} text={item.rate_value} style={{ fontSize: 12, color: 'black', opacity: .5 }} />
}
{this.state.itemKurir != null && this.state.itemKurir.courier_rate_id == item.courier_rate_id && <FontAwesome name={'check'} size={15} color={'#4cc9f0'} style={{marginLeft: 5}}/>}
</View>
</TouchableOpacity>
)
})}
</ScrollView>
</View>}
</View>
</View>
</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} />
<BaseButton text={'Tetapkan'}
onPress={() => {
this.props.navigation.state.params.setProps({delivery: this.state.itemKurir})
this.props.navigation.goBack()}} fontSizeText={14} />
</View>
</View>
)
......
App/Containers/HomePageScreen.js
View file @ 15cb4e61
......@@ -20,6 +20,7 @@ import { NavigationEvents } from 'react-navigation';
import Toast from 'react-native-toast-message';
import Api from '../Services/Api';
import Constant from '../Lib/Constant'
import { titleCase } from '../Lib/Utils';
class HomePageScreen extends Component {
constructor(props) {
......@@ -83,9 +84,9 @@ class HomePageScreen extends Component {
<View style={{width: '50%', paddingTop: 30}}>
<Image source={Images.logo_eCart} style={{width: 120, height: 35}}/>
<View style={{elevation: 5, width: 85, height: 85, borderRadius: 85, borderWidth: 46, borderColor: 'white', marginTop: 25, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center',}}>
<Image source={Images.beautyProduct} style={{width: 85, height: 85, borderRadius: 85}}/>
<Image source={{uri: this.state.user != null? 'https://apiecart.eksad.com/' + this.state.user.data.user_image : Images.beautyProduct}} style={{width: 85, height: 85, borderRadius: 85}}/>
</View>
<BaseText type={"bold"} text={'Kang Dadang'} style={{fontSize: 18, color: '#4b4b4b', marginLeft: 5, marginTop: 10}}/>
<BaseText type={"bold"} text={this.state.user != null? titleCase(this.state.user.data.user_name) : 'Kang Dadang'} style={{fontSize: 18, color: '#4b4b4b', marginLeft: 5, marginTop: 10}}/>
</View>
<View style={{width: '50%', alignItems:'flex-end'}}>
{/* <Image source={Images.sliceCircleBlue} style={{width: '100%', height: 150}}/> */}
......
App/Containers/PaymentMethodScreen.js
View file @ 15cb4e61
......@@ -23,7 +23,8 @@ class PaymentMethodScreen extends Component {
loading: false,
currency: '',
paymentMethod: [],
paymentID: 0
paymentID: 0,
paymentName: ''
}
}
......@@ -51,6 +52,7 @@ class PaymentMethodScreen extends Component {
this.setState({ loading: true})
Api.create().getPaymentMethod().then(response => {
if (response.data.status == "success") {
console.log(response.data)
this.setState({
paymentMethod: response.data.data.reverse(),
loading: false
......@@ -72,6 +74,7 @@ class PaymentMethodScreen extends Component {
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<BaseText text={'Use'} type={'regular'} style={{ opacity: .7, fontSize: 12 }} />
<BaseText text={this.state.paymentName} type={'bold'} style={{ opacity: .7, fontSize: 12, marginLeft: 10}} />
</View>
</View>
<View style={{ flex: 1, backgroundColor: '#ececec'}}>
......@@ -85,23 +88,26 @@ class PaymentMethodScreen extends Component {
}
{this.state.paymentMethod.map((item, index) => {
return (
<View style={{ flexDirection: 'row', backgroundColor: 'white', padding: 20, borderBottomWidth: 1, borderBottomColor: '#e0e0e0', justifyContent: 'space-between' }}>
<TouchableOpacity
onPress={() => {
this.props.navigation.state.params.setProps({paymentMethod: item})
this.setState({
paymentID: item.payment_method_id,
paymentName: item.payment_method_name
});
}}
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,
});
}}>
<View
style={this.state.paymentID == item.payment_method_id ? styles.radioCircleClick : styles.radioCircle}>
{this.state.paymentID == item.payment_method_id && <View style={styles.selectedRb} />}
</TouchableOpacity>
</View>
<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>
</TouchableOpacity>
)
})}
</View>
......
App/Services/Api.js
View file @ 15cb4e61
......@@ -75,7 +75,12 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
const getWallet = () => api.get('get_wallet')
const topUpWallet = (body) => api.post('topup_wallet', body)
const getPaymentMethod = () => api.get('get_payment_method')
// Courier
const getCategoryCourier = () => api.get('get_category_courier')
const getEstimateCourier = (rateId) => api.get(`get_estimate_courier/${rateId}`)
const getEstimateDelivery = (courierId) => api.get(`get_estimate_delivery/${courierId}`)
// Deal Of The Day
const getPeriodeDeal = (body) => api.post('get_deal_product_per_periode', body)
......@@ -189,7 +194,9 @@ const create = (baseURL = 'https://apiecart.eksad.com/mobile/') => {
getNotification,
getDetailNotif,
readNotification,
readAllNotification
readAllNotification,
getEstimateCourier,
getEstimateDelivery,
}
}
......
App/Themes/Images.js
View file @ 15cb4e61
......@@ -52,6 +52,7 @@ const images = {
icon_coupon: require('../Images/Icons/icon_coupon.png'),
icon_check: require('../Images/Icons/icon_check.png'),
icon_pembayaran: require('../Images/Icons/icon_pembayaran.png'),
icon_delete: require('../Images/Icons/icon_delete.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