Skip to content

E
eCartPro-Customer
Commit 3add0435 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'didam' into 'master' 

finishing ngantuk

See merge request !52
parents 34e5dab7 53e898dc
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 55 deletions
App/Containers/CartScreen.js
View file @ 3add0435
......@@ -262,7 +262,7 @@ class CartScreen extends Component {
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :
<View style={[styles.scrollContent]}>
<View style={{padding: 20, flexDirection:'row', justifyContent: 'space-between', borderBottomColor: '#ececec', borderBottomWidth: 1}}>
{this.state.listCart.length != 0 && <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?
......@@ -276,13 +276,13 @@ class CartScreen extends Component {
<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',}}/>
}} text={"Pilih Semua Barang"} 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'}}>
</View>}
<ScrollView showsVerticalScrollIndicator={false} style={this.state.listCart.length == 0? styles.scrollContent : {backgroundColor:'white'}}>
{this.state.listCart.map((item,index) => {
return (
<View key={index}>
......@@ -384,7 +384,7 @@ class CartScreen extends Component {
</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%'}}/>}
{index == this.state.listCart.length -1 && item.default_size.length > 0 && <View style={{height: 200, backgroundColor:'white', width: '100%'}}/>}
</View>
)
})}
......@@ -398,7 +398,7 @@ class CartScreen extends Component {
<BaseText text={this.getTotalCart()} type={"bold"} style={{opacity: .8, color: '#4cc9f0'}}/>
</View>
<View style={{width: '40%'}}>
<BaseButton text={'Checkout'} onPress={() => this.handleNavigateCheckout()} fontSizeText={14}/>
<BaseButton text={'Checkout'} color={this.state.listCart.length == 0? '#dedede' : '#4cc9f0'} onPress={() => this.state.listCart.length == 0? null : this.handleNavigateCheckout()} fontSizeText={14}/>
</View>
</View>
</View>
......
App/Containers/DetailOrderScreen.js
View file @ 3add0435
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, View, BackHandler, Image } from 'react-native'
import { ScrollView, Text, KeyboardAvoidingView, View, BackHandler, Image, AsyncStorage, Clipboard } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
......@@ -12,13 +12,18 @@ import { Images } from '../Themes'
import BaseButton from '../Components/BaseButton'
import Api from '../Services/Api'
import moment from 'moment';
import Constant from '../Lib/Constant'
import { formatRp, titleCase } from '../Lib/Utils'
import { BarIndicator } from 'react-native-indicators'
class DetailOrderScreen extends Component {
constructor(props) {
super(props)
this.state = {
orderId: this.props.navigation.state.params.orderId,
dataOrder: null
dataOrder: null,
currency: '',
loading: false
}
}
......@@ -28,6 +33,7 @@ class DetailOrderScreen extends Component {
};
componentDidMount() {
this.getCurrency()
this.getDetailOrder()
BackHandler.addEventListener("hardwareBackPress", this.backAction);
}
......@@ -37,67 +43,70 @@ class DetailOrderScreen extends Component {
}
getDetailOrder() {
this.setState({loading: true})
Api.create().getDetailOrder(this.state.orderId).then((response) => {
if (response.data.status == 'success') {
this.setState({dataOrder: response.data.data})
}
this.setState({loading: false})
console.log('ini data nya', moment(response.data.data.order_date).format('LLL'))
})
}
async getCurrency() {
let currency = await AsyncStorage.getItem(Constant.GLOBAL_CURRENCY)
this.setState({currency})
console.log('yeeeeeeeee', currency)
}
writeToClipboard(){
Clipboard.setString(this.state.dataOrder.courier.no_resi);
alert('Copied to Clipboard!');
};
render () {
return (
<View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
<BaseHeader leftText={`No. Order {}`} onBackPress={this.backAction}/>
<ScrollView style={[styles.scrollContent]}>
<BaseHeader leftText={`No. Order ${this.state.dataOrder == null? '' : this.state.dataOrder.order_id}`} onBackPress={this.backAction}/>
{this.state.loading && <View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View>}
{this.state.dataOrder != null && !this.state.loading && <ScrollView style={[styles.scrollContent]}>
{/* Tanggal */}
<View style={{padding: 15, borderRadius: 10, elevation: 5, backgroundColor: 'white', marginVertical: 20, marginHorizontal: 5}}>
<BaseText text={"Tanggal"} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
<BaseText text={this.state.dataOrder == null? '' : `${moment(String(this.state.dataOrder.order_date).substr(0,10)).format('DD MMMM YYYY')}, ${moment(String(this.state.dataOrder.order_date).substr(11,19)).format('LT')}`} type={"regular"} style={{fontSize: 12, opacity: .9}}/>
<BaseText text={this.state.dataOrder == null? '' : `${moment(this.state.dataOrder.order_date).format('DD MMMM YYYY, hh:mm a')}`} type={"regular"} style={{fontSize: 12, opacity: .9}}/>
<View style={{marginVertical: 10, height: 1, width: '100%', backgroundColor: '#d8d8d8'}}/>
<BaseText text={"Status Pesanan"} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
<BaseText text={"MENUNGGU KONFIRMASI"} type={"regular"} style={{fontSize: 12, opacity: .9}}/>
<BaseText text={this.state.dataOrder.order_status} type={"regular"} style={{fontSize: 12, opacity: .9}}/>
</View>
{/* Produk */}
<View>
<BaseText text={"Produk"} type={"bold"} style={{fontSize: 16, color: '#4b4b4b', paddingHorizontal: 5}}/>
<View style={{padding: 15, borderRadius: 10, elevation: 5, backgroundColor: 'white', marginTop: 20, marginHorizontal: 5}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{width: 90}}>
<Image source={Images.jaket} style={{resizeMode: 'stretch', height: 90, width: '100%', borderRadius: 40}}/>
</View>
<View style={{flexGrow: 1, justifyContent: 'space-between', paddingLeft: 10}}>
<BaseText text={"88Rising x Guess Hooded Sweatshirt"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b'}}/>
<BaseText text={"Rp. 2.400.000"} type={"bold"} style={{fontSize: 12, color: '#4cc9f0'}}/>
<BaseText text={`Ukuran: L\nJumlah: 1 (1kg)`} type={"bold"} style={{fontSize: 10, color: '#4b4b4b', opacity: .5,}}/>
{this.state.dataOrder.order_detail.map((item,index) => {
return (
<View key={index} style={{padding: 15, borderRadius: 10, elevation: 5, backgroundColor: 'white', marginTop: 20, marginHorizontal: 5}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', width: '100%'}}>
<View style={{width: '25%'}}>
<Image source={{uri: item.product_image}} style={{resizeMode: 'stretch', height: 90, width: '100%', borderRadius: 40}}/>
</View>
<View style={{flexGrow: 1, justifyContent: 'space-between', paddingLeft: 10, width: '75%'}}>
<BaseText text={titleCase(item.product_name)} type={"bold"} style={{fontSize: 12, opacity: .5}} ellipsizeMode={'tail'} numberOfLines={2}/>
<BaseText text={formatRp(this.state.currency, item.price)} type={"bold"} style={{fontSize: 12, color: '#4cc9f0'}}/>
<BaseText text={`Ukuran: ${item.varient_size}\nJumlah: ${item.quantity}`} type={"bold"} style={{fontSize: 10, color: '#4b4b4b', opacity: .5,}}/>
</View>
</View>
<View style={{marginVertical: 20, height: 1, width: '100%', backgroundColor: '#d8d8d8'}}/>
<BaseText text={"Total Harga"} type={"bold"} style={{fontSize: 10, color: '#4b4b4b', opacity: .5}}/>
<BaseText text={formatRp(this.state.currency, item.total_price)} type={"bold"} style={{fontSize: 12, color: '#4cc9f0'}}/>
</View>
</View>
<View style={{marginVertical: 20, height: 1, width: '100%', backgroundColor: '#d8d8d8'}}/>
<BaseText text={"Total Harga"} type={"bold"} style={{fontSize: 10, color: '#4b4b4b', opacity: .5}}/>
<BaseText text={"Rp. 2.400.000"} type={"bold"} style={{fontSize: 12, color: '#4cc9f0'}}/>
</View>
<View style={{padding: 15, borderRadius: 10, elevation: 5, backgroundColor: 'white', marginVertical: 10, marginHorizontal: 5}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{width: 90}}>
<Image source={Images.sepatu} style={{resizeMode: 'stretch', height: 90, width: '100%', borderRadius: 40}}/>
</View>
<View style={{flexGrow: 1, justifyContent: 'space-between', paddingLeft: 10}}>
<BaseText text={"Compass x Pot Meets Pop"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b'}}/>
<BaseText text={"Rp. 3.700.000"} type={"bold"} style={{fontSize: 12, color: '#4cc9f0'}}/>
<BaseText text={`Ukuran: 43\nJumlah: 1 (1kg)`} type={"bold"} style={{fontSize: 10, color: '#4b4b4b', opacity: .5,}}/>
</View>
</View>
<View style={{marginVertical: 20, height: 1, width: '100%', backgroundColor: '#d8d8d8'}}/>
<BaseText text={"Total Harga"} type={"bold"} style={{fontSize: 10, color: '#4b4b4b', opacity: .5}}/>
<BaseText text={"Rp. 3.700.000"} type={"bold"} style={{fontSize: 12, color: '#4cc9f0'}}/>
</View>
)
})}
</View>
{/* Detail Pengiriman */}
<View>
<View style={{marginTop: 10}}>
<BaseText text={"Detail Pengiriman"} type={"bold"} style={{fontSize: 16, color: '#4b4b4b', paddingHorizontal: 5, marginTop: 10}}/>
<View style={{padding: 15, borderRadius: 10, elevation: 5, backgroundColor: 'white', marginTop: 20, marginHorizontal: 5}}>
<BaseText text={"Kurir Pengiriman"} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
......@@ -105,13 +114,13 @@ class DetailOrderScreen extends Component {
<View style={{marginVertical: 25}}>
<BaseText text={"No. Resi"} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
<View style={{flexDirection: 'row'}}>
<BaseText text={"00987089860"} type={"bold"} style={{fontSize: 12}}/>
<BaseText text={"Salin No. Resi"} type={"bold"} style={{fontSize: 12, color: '#4cc9f0', marginLeft: 20, textDecorationLine: 'underline', textDecorationColor: '#4cc9f0'}}/>
<BaseText text={this.state.dataOrder.courier.no_resi} type={"bold"} style={{fontSize: 12}}/>
<BaseText text={"Salin No. Resi"} onPress={() => this.writeToClipboard()} type={"bold"} style={{fontSize: 12, color: '#4cc9f0', marginLeft: 20, textDecorationLine: 'underline', textDecorationColor: '#4cc9f0'}}/>
</View>
</View>
<BaseText text={"Alamat Pengiriman"} type={"regular"} style={{fontSize: 10, color: '#4b4b4b', opacity: .7}}/>
<BaseText text={"Rizal Firnando (Rumah)\n08129986899"} type={"bold"} style={{fontSize: 12, color: '#4b4b4b', opacity: .9, marginVertical: 5}}/>
<BaseText text={"Jl. Pejompongan IV No.136, RT.2/RW.5, Bend. Hilir,\nKecamatan Tanah Abang, Kota Jakarta Pusat,\nDKI Jakarta, 10210"} type={"regular"} style={{fontSize: 11, color: '#4b4b4b', opacity: 1}}/>
<BaseText text={`${this.state.dataOrder.address.receiver_name} (${this.state.dataOrder.address.type_address})\n${this.state.dataOrder.address.receiver_phone}`} type={"bold"} style={{fontSize: 12, color: '#4b4b4b', opacity: .9, marginVertical: 5}}/>
<BaseText text={`${this.state.dataOrder.address.address}, ${this.state.dataOrder.address.kelurahan_name}, ${this.state.dataOrder.address.kecamatan_name}, ${this.state.dataOrder.address.kabupaten_kota_name}, ${this.state.dataOrder.address.provinsi_name} ${this.state.dataOrder.address.kode_pos}`} type={"regular"} style={{fontSize: 11, color: '#4b4b4b', opacity: 1}}/>
</View>
</View>
......@@ -121,23 +130,23 @@ class DetailOrderScreen extends Component {
<View style={{padding: 15, borderRadius: 10, elevation: 5, backgroundColor: 'white', marginVertical: 20, marginHorizontal: 5}}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<BaseText text={"Metode Pembayaran"} type={"regular"} style={{fontSize: 12, color: '#4b4b4b', opacity: .7}}/>
<BaseText text={"COD"} type={"bold"} style={{fontSize: 12, opacity: .9}}/>
<BaseText text={this.state.dataOrder.payment_method} type={"bold"} style={{fontSize: 12, opacity: .9}}/>
</View>
<View style={{marginVertical: 10, height: 1, width: '100%', backgroundColor: '#d8d8d8'}}/>
<View style={{paddingVertical: 10}}>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<BaseText text={"Total Harga (2 Produk)"} type={"regular"} style={{fontSize: 12, color: '#4b4b4b', opacity: .7}}/>
<BaseText text={"Rp. 6.100.000"} type={"bold"} style={{fontSize: 12, opacity: .9}}/>
<BaseText text={formatRp(this.state.currency, this.state.dataOrder.total_price)} type={"bold"} style={{fontSize: 12, opacity: .9}}/>
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop: 5}}>
<BaseText text={"Total Ongkos Kirim (1kg)"} type={"regular"} style={{fontSize: 12, color: '#4b4b4b', opacity: .7}}/>
<BaseText text={"Rp. 10.000"} type={"bold"} style={{fontSize: 12, opacity: .9}}/>
<BaseText text={formatRp(this.state.currency, this.state.dataOrder.delivery_charge)} type={"bold"} style={{fontSize: 12, opacity: .9}}/>
</View>
</View>
<View style={{marginVertical: 10, height: 1, width: '100%', backgroundColor: '#d8d8d8'}}/>
<View style={{flexDirection:'row', justifyContent:'space-between', marginTop: 5, paddingVertical: 5}}>
<BaseText text={"Total Bayar"} type={"bold"} style={{color: '#4b4b4b', opacity: .9}}/>
<BaseText text={"Rp. 6.110.000"} type={"bold"} style={{opacity: .9, color: '#4cc9f0'}}/>
<BaseText text={formatRp(this.state.currency, this.state.dataOrder.total_price + this.state.dataOrder.delivery_charge)} type={"bold"} style={{opacity: .9, color: '#4cc9f0'}}/>
</View>
</View>
</View>
......@@ -151,7 +160,7 @@ class DetailOrderScreen extends Component {
<BaseButton text={'Pesanan Diterima'} onPress={() => null} fontSizeText={12} />
</View>
</View>
</ScrollView>
</ScrollView>}
<View style={{padding: 20, alignSelf:'flex-end', justifyContent: 'flex-end', backgroundColor: 'white', elevation: 5, width: '100%', borderTopWidth: .5, borderTopColor: '#d8d8d8'}}>
<BaseButton text={'Lacak Pesanan'} onPress={() => this.props.navigation.navigate('TrackOrderScreen')}/>
</View>
......
App/Containers/MyOrderScreen.js
View file @ 3add0435
......@@ -16,6 +16,7 @@ import Api from '../Services/Api';
import moment from 'moment';
import Constant from '../Lib/Constant';
import { formatRp } from '../Lib/Utils';
import { BarIndicator } from 'react-native-indicators';
class MyOrderScreen extends Component {
constructor(props) {
......@@ -23,7 +24,8 @@ class MyOrderScreen extends Component {
this.state = {
activeTab: 0,
listOrder: [],
currency: ''
currency: '',
loading: false
}
}
backAction = () => {
......@@ -38,10 +40,12 @@ class MyOrderScreen extends Component {
}
getListOrder() {
this.setState({loading: true})
Api.create().getOrder().then((response) => {
if (response.data.status == 'success') {
this.setState({listOrder: response.data.data})
}
this.setState({loading: false})
})
}
......@@ -98,6 +102,9 @@ class MyOrderScreen extends Component {
<View style={{zIndex: 99}}>
<BaseHeader leftText={'Pesanan Saya'} onBackPress={this.backAction}/>
</View>
{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',
......@@ -194,7 +201,7 @@ class MyOrderScreen extends Component {
</View>
</Tab>
</Tabs>
</View>
</View>}
</Container>
)
}
......
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