edited
This commit is contained in:
587
app/containers/MyOrders/confirmOrder.js
Executable file
587
app/containers/MyOrders/confirmOrder.js
Executable file
@@ -0,0 +1,587 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Platform,
|
||||
StyleSheet,
|
||||
View,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
SafeAreaView,
|
||||
TextInput,
|
||||
Alert
|
||||
} from "react-native";
|
||||
import { observable } from "mobx";
|
||||
import Text from "react-native-text";
|
||||
import { Button } from "react-native-elements";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
import Header from "../../components/Public/header";
|
||||
import Toast, { DURATION } from "react-native-easy-toast";
|
||||
import { width, height } from "../../config/screen";
|
||||
import FoodsRow from "../../components/MyOrders/foodsRow";
|
||||
import FastImage from "react-native-fast-image";
|
||||
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
|
||||
import Log from "../../config/log";
|
||||
import Size from "../../config/size";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
import { Dropdown } from "react-native-material-dropdown";
|
||||
import CommonTextView from "../../components/Public/commonTextView";
|
||||
import theme from "../../config/colors";
|
||||
import Loader from "../../components/Public/loader";
|
||||
import { Popup } from "react-native-map-link";
|
||||
import { Fonts } from "../../config/fonts";
|
||||
import { colors } from "react-native-elements";
|
||||
const size = new Size();
|
||||
const log = new Log();
|
||||
const time = [
|
||||
{
|
||||
value: "12:10 - 12:40",
|
||||
format: "12101240"
|
||||
},
|
||||
{
|
||||
value: "13:10 - 13:40",
|
||||
format: "13101340"
|
||||
},
|
||||
{
|
||||
value: "14:10 - 14:40",
|
||||
format: "14101440"
|
||||
}
|
||||
];
|
||||
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class ConfirmOrder extends Component {
|
||||
@observable
|
||||
message = "";
|
||||
@observable
|
||||
tel = "1234556";
|
||||
@observable
|
||||
pomoCode = "";
|
||||
@observable
|
||||
total = 0;
|
||||
@observable
|
||||
discount = 0;
|
||||
@observable
|
||||
subVaule = 0;
|
||||
@observable
|
||||
options = {
|
||||
latitude: 38.8976763,
|
||||
longitude: -77.0387185,
|
||||
title: "",
|
||||
dialogTitle: "Select the map",
|
||||
dialogMessage: "",
|
||||
cancelText: "Cancel"
|
||||
};
|
||||
timeIndex = null;
|
||||
couponLabel = [];
|
||||
static navigationOptions = {
|
||||
drawerLabel: "My Orders"
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.menuStore;
|
||||
this.userStore = this.props.userStore;
|
||||
this.state = {
|
||||
isVisible: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
log.firebaseClass("ConfirmOrder");
|
||||
this.total = this.store.totalMoney.toFixed(2);
|
||||
this.tel = this.userStore.userData.data.member.mobile;
|
||||
console.log(this.store.couponLabel);
|
||||
}
|
||||
|
||||
navigatieAction(page) {
|
||||
this.props.navigation.navigate(page);
|
||||
}
|
||||
|
||||
renderFoodsList() {
|
||||
return this.store.orderList.map(items => {
|
||||
console.log(items.cuisine.nameEn);
|
||||
return (
|
||||
<FoodsRow
|
||||
items={items}
|
||||
key={items.id}
|
||||
lang={this.userStore.languageSelection}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
dateFormat() {
|
||||
var cutoffDate = this.store.cutoffDateTime;
|
||||
console.log(this.store.cutoffDateTime);
|
||||
var today = new Date();
|
||||
var tomorrowOrToday = "";
|
||||
if (today.getUTCDate() == cutoffDate.getUTCDate()) {
|
||||
var tomorrowOrToday = "(Today)";
|
||||
}
|
||||
var options = {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric"
|
||||
};
|
||||
return cutoffDate.toLocaleDateString("En", options) + tomorrowOrToday;
|
||||
}
|
||||
|
||||
discountText() {
|
||||
if (this.discount > 0) {
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize: 13
|
||||
}}
|
||||
>
|
||||
Discount {this.discount + "%" + " off"}
|
||||
</Text>
|
||||
);
|
||||
} else if (this.subVaule > 0) {
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize: 13
|
||||
}}
|
||||
>
|
||||
Total {"- " + this.subVaule}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
orderAction() {
|
||||
var today = new Date();
|
||||
yymmdd =
|
||||
today.getFullYear() +
|
||||
"-" +
|
||||
("0" + (today.getMonth() + 1)).slice(-2) +
|
||||
"-" +
|
||||
("0" + (today.getDay() + 1)).slice(-2);
|
||||
console.log(yymmdd);
|
||||
var token = this.userStore.userData.data.token;
|
||||
console.log(token);
|
||||
var orderData = {
|
||||
pickUpLocation: {
|
||||
id: this.userStore.pickupPointId
|
||||
},
|
||||
// "pickUpDate": yymmdd,
|
||||
// "pickUpTime": time[this.timeIndex].format,
|
||||
items: this.store.items,
|
||||
coupon: this.pomoCode,
|
||||
mobile: this.tel,
|
||||
remark: this.message
|
||||
};
|
||||
console.log(orderData);
|
||||
this.store.order(token, orderData, this);
|
||||
}
|
||||
onChangeText(text) {
|
||||
this.pomoCode = text;
|
||||
this.pressYeahButton();
|
||||
}
|
||||
|
||||
pay() {
|
||||
this.store.loading = false;
|
||||
Alert.alert("", "Pay now? ", [
|
||||
{
|
||||
text: "Cancel",
|
||||
onPress: () => {
|
||||
log.firebaseLog("press_cancel_button_on_confirmOrder", {}),
|
||||
this.store.cancelOrder(this.userStore.userData.data.token);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "Pay",
|
||||
onPress: () => {
|
||||
log.firebaseLog("press_pay_button_on_confirmOrder", {}),
|
||||
this.store.pay(
|
||||
this.userStore.userData.data.token,
|
||||
this,
|
||||
this.userStore.creditCardinfo.id
|
||||
);
|
||||
}
|
||||
}
|
||||
]);
|
||||
}
|
||||
// type 0 all user can use, type 1 all user can use once
|
||||
|
||||
discountAction(data) {
|
||||
if (data.value == 0) {
|
||||
this.discount = data.percent;
|
||||
if (this.discount == null || this.discount == 0) {
|
||||
this.total = this.store.totalMoney.toFixed(2);
|
||||
} else {
|
||||
var total = (this.store.totalMoney * (100 - this.discount)) / 100;
|
||||
this.total = total.toFixed(2);
|
||||
}
|
||||
} else {
|
||||
this.subVaule = data.value;
|
||||
if (this.subVaule == null || this.subVaule == 0) {
|
||||
this.total = this.store.totalMoney.toFixed(2);
|
||||
} else {
|
||||
var total = this.store.totalMoney - this.subVaule;
|
||||
this.total = total.toFixed(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pressYeahButton() {
|
||||
log.firebaseLog("press_yeah_button_on_confirmOrder", {}),
|
||||
this.store.coupon(
|
||||
this.userStore.userData.data.token,
|
||||
this,
|
||||
this.pomoCode
|
||||
);
|
||||
this.subVaule = 0;
|
||||
this.discount = 0;
|
||||
}
|
||||
|
||||
back() {
|
||||
this.props.navigation.goBack();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
|
||||
<Loader loading={this.store.loading} />
|
||||
<View style={styles.container}>
|
||||
<View style={{ width: width, marginTop: 15 }}>
|
||||
<Icon
|
||||
name="chevron-left"
|
||||
size={size.getSize(40)}
|
||||
color={theme.foodNameColor}
|
||||
style={{ marginLeft: 10 }}
|
||||
onPress={() => this.back()}
|
||||
/>
|
||||
</View>
|
||||
<ScrollView style={{ width: width, flex: 1 }}>
|
||||
<View style={{ marginRight: 20, marginLeft: 20 }}>
|
||||
{this.renderFoodsList()}
|
||||
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
<Image
|
||||
resizeMode={"contain"}
|
||||
source={require("../../images/promo.png")}
|
||||
/>
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: theme.inputBgc,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: 110,
|
||||
height: 20,
|
||||
marginLeft: 5
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
style={{
|
||||
width: 100,
|
||||
color: theme.coolGrey,
|
||||
...Platform.select({
|
||||
ios: {
|
||||
height: 20
|
||||
},
|
||||
android: {
|
||||
paddingBottom: 5,
|
||||
height: 30
|
||||
}
|
||||
})
|
||||
}}
|
||||
value={this.pomoCode}
|
||||
underlineColorAndroid="rgba(0,0,0,0)"
|
||||
onChangeText={text => (this.pomoCode = text)}
|
||||
placeholder={"Promo Code"}
|
||||
placeholderStyle={{
|
||||
fontWeight: "bold",
|
||||
fontFamily: Fonts.century
|
||||
}}
|
||||
placeholderTextColor={theme.coolGrey}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ marginLeft: 5, marginTop: -5 }}>
|
||||
<Dropdown
|
||||
label={this.userStore.text.coupon}
|
||||
onChangeText={text => {
|
||||
this.onChangeText(text);
|
||||
}}
|
||||
data={this.store.couponLabel}
|
||||
fontSize={12}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
backgroundColor: theme.mainColor,
|
||||
height: 20,
|
||||
width: 60,
|
||||
alignItems: "center",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
onPress={() => {
|
||||
this.pressYeahButton();
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: Fonts.century,
|
||||
color: "white",
|
||||
fontSize: 13,
|
||||
fontWeight: "bold"
|
||||
}}
|
||||
>
|
||||
Yeah
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{this.discountText()}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize: 15
|
||||
}}
|
||||
>
|
||||
TOTAL
|
||||
</Text>
|
||||
<View
|
||||
style={{ flexDirection: "row", justifyContent: "flex-end" }}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize: 15
|
||||
}}
|
||||
>
|
||||
HKD ${this.total}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold"
|
||||
}}
|
||||
>
|
||||
Delivery Details
|
||||
</Text>
|
||||
<View>
|
||||
<CommonTextView
|
||||
title="Pickup Date"
|
||||
content={this.dateFormat()}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
this.options.latitude = this.userStore.pickupPointLabel[
|
||||
this.userStore.pickupIndex
|
||||
].lat;
|
||||
this.options.longitude = this.userStore.pickupPointLabel[
|
||||
this.userStore.pickupIndex
|
||||
].lng;
|
||||
this.setState({ isVisible: true });
|
||||
}}
|
||||
>
|
||||
<CommonTextView
|
||||
title="Pickup Location"
|
||||
content={this.userStore.dataLanguage(
|
||||
this.userStore.pickupPointLabel[
|
||||
this.userStore.pickupIndex
|
||||
],
|
||||
"name"
|
||||
)}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
<CommonTextView
|
||||
title="Pickup Time"
|
||||
content={
|
||||
this.userStore.pickupPointLabel[this.userStore.pickupIndex]
|
||||
.pickupStartTime +
|
||||
" - " +
|
||||
this.userStore.pickupPointLabel[this.userStore.pickupIndex]
|
||||
.pickupEndTime
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
borderBottomColor: "black",
|
||||
borderBottomWidth: 1,
|
||||
marginTop: 15,
|
||||
marginBottom: 10,
|
||||
width: "70%"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontSize: 13
|
||||
}}
|
||||
>
|
||||
Mobile phone
|
||||
</Text>
|
||||
<TextInput
|
||||
style={{
|
||||
width: "60%",
|
||||
color: theme.coolGrey,
|
||||
fontSize: size.getSize(13),
|
||||
paddingVertical: 0
|
||||
}}
|
||||
value={this.tel}
|
||||
keyboardType={"numeric"}
|
||||
underlineColorAndroid="rgba(0,0,0,0)"
|
||||
onChangeText={tel => (this.tel = tel)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<FastImage
|
||||
style={{
|
||||
width: width - 40,
|
||||
marginTop: 15,
|
||||
marginBottom: 15,
|
||||
height: verticalScale(200),
|
||||
backgroundColor: theme.mainColor
|
||||
}}
|
||||
source={{
|
||||
uri: this.userStore.pickupPointLabel[
|
||||
this.userStore.pickupIndex
|
||||
].photo
|
||||
}}
|
||||
/>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
fontSize: 13,
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century
|
||||
}}
|
||||
>
|
||||
Message box
|
||||
</Text>
|
||||
<TextInput
|
||||
style={{
|
||||
// backgroundColor:theme.inputBgc,
|
||||
color: theme.foodNameColor,
|
||||
width: width - 40,
|
||||
height: verticalScale(100),
|
||||
marginBottom: 20,
|
||||
paddingBottom: 0,
|
||||
paddingRight: 5,
|
||||
paddingLeft: 5,
|
||||
fontSize: size.getSize(13),
|
||||
fontFamily: Fonts.century,
|
||||
borderColor: theme.foodNameColor,
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
paddingVertical: 0
|
||||
}}
|
||||
multiline={true}
|
||||
value={this.message}
|
||||
underlineColorAndroid="rgba(0,0,0,0)"
|
||||
onChangeText={text => (this.message = text)}
|
||||
placeholder={"Tell me any requires"}
|
||||
placeholderStyle={{
|
||||
fontWeight: "bold",
|
||||
fontFamily: Fonts.century
|
||||
}}
|
||||
placeholderTextColor={theme.foodNameColor}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Button
|
||||
title="confirm order"
|
||||
fontWeight="bold"
|
||||
fontSize={size.getSize(15)}
|
||||
fontFamily={Fonts.century}
|
||||
titleStyle={{
|
||||
color: "white",
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold"
|
||||
}}
|
||||
loadingProps={{
|
||||
size: "large",
|
||||
color: "rgba(111, 202, 186, 1)"
|
||||
}}
|
||||
buttonStyle={styles.signupButton}
|
||||
onPress={() => this.orderAction()}
|
||||
/>
|
||||
|
||||
<Toast ref="toast" />
|
||||
</View>
|
||||
<Popup
|
||||
isVisible={this.state.isVisible}
|
||||
onCancelPressed={() => this.setState({ isVisible: false })}
|
||||
onAppPressed={() => this.setState({ isVisible: false })}
|
||||
onBackButtonPressed={() => this.setState({ isVisible: false })}
|
||||
options={this.options}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "white"
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: "center",
|
||||
margin: 10
|
||||
},
|
||||
instructions: {
|
||||
textAlign: "center",
|
||||
color: "#333333",
|
||||
marginBottom: 5
|
||||
},
|
||||
signupButton: {
|
||||
width: width,
|
||||
height: verticalScale(50),
|
||||
backgroundColor: theme.mainColor
|
||||
}
|
||||
});
|
||||
165
app/containers/MyOrders/myOrders.js
Executable file
165
app/containers/MyOrders/myOrders.js
Executable file
@@ -0,0 +1,165 @@
|
||||
import React, { Component } from "react";
|
||||
import { Platform, StyleSheet, Text, View, SafeAreaView } from "react-native";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
import { observable } from "mobx";
|
||||
import DrawerNavigationHeader from "../../components/Public/drawerNavigationHeader";
|
||||
import OrderFlatList from "../../components/MyOrders/orderFlatList";
|
||||
import ScrollableTabView from "react-native-scrollable-tab-view";
|
||||
import AsyncStorageHelper from "../../config/asyncStorageHelper";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
import Loader from "../../components/Public/loader";
|
||||
import Login from "../Login/login";
|
||||
import Log from "../../config/log"
|
||||
import { width, height } from "../../config/screen";
|
||||
import Header from '../../components/Public/signInUpHeader'
|
||||
import theme from "../../config/colors";
|
||||
import language from "../../config/language";
|
||||
const log = new Log()
|
||||
const asyncStorageHelper = new AsyncStorageHelper();
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class MyOrders extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.menuStore;
|
||||
this.userStore = this.props.userStore;
|
||||
}
|
||||
static navigationOptions = {
|
||||
drawerLabel: "My Orders",
|
||||
swipeEnabled: false,
|
||||
tabBarLabel: "My Order"
|
||||
};
|
||||
|
||||
componentWillMount() {
|
||||
// this.init();
|
||||
}
|
||||
|
||||
|
||||
|
||||
init() {
|
||||
if (this.userStore.logined == false) {
|
||||
// this.props.navigation.navigate('Login')
|
||||
} else {
|
||||
var token = this.userStore.userData.data.token;
|
||||
this.store.getOrder(this, token);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
log.firebaseClass('orders')
|
||||
console.log('componentDidMount')
|
||||
this.props.navigation.addListener('willFocus', (route) => {this.init()});
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.store.passOrder);
|
||||
return (
|
||||
<SafeAreaView style={{ backgroundColor: theme.mainColor, flex: 1 }}>
|
||||
<Loader loading={this.store.loading} />
|
||||
<View style={styles.container}>
|
||||
|
||||
<ScrollableTabView
|
||||
tabBarActiveTextColor={theme.mainColor}
|
||||
tabBarUnderlineStyle={{ backgroundColor: "white", height: 1 }}
|
||||
tabBarBackgroundColor={"white"}
|
||||
>
|
||||
<CurrentOrder
|
||||
tabLabel="Current Order"
|
||||
orderHistory={this.store.currentOrder}
|
||||
navigation={this.props.navigation}
|
||||
whichOrder = {true}
|
||||
/>
|
||||
<PassOrder
|
||||
tabLabel="Past Order"
|
||||
orderHistory={this.store.passOrder}
|
||||
navigation={this.props.navigation}
|
||||
whichOrder = {false}
|
||||
/>
|
||||
</ScrollableTabView>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const PassOrder = props => {
|
||||
return (
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
marginTop: 20,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
backgroundColor: "white",
|
||||
width: width - 1
|
||||
}}
|
||||
>
|
||||
|
||||
</View>
|
||||
<View style={styles.flatViewContainer}>
|
||||
<OrderFlatList
|
||||
whichOrder = {props.whichOrder}
|
||||
data={props.orderHistory}
|
||||
navigation={props.navigation}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
const CurrentOrder = props => {
|
||||
return (
|
||||
<View>
|
||||
{/* <View
|
||||
style={{
|
||||
marginTop: 20,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
backgroundColor: "white",
|
||||
width: width - 1
|
||||
}}
|
||||
>
|
||||
<View style={{ width: "65%" }}>
|
||||
<Text
|
||||
style={[styles.textView, { fontWeight: "bold" }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
Order details
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={{ width: "45%" }}>
|
||||
<Text style={[styles.textView, { fontWeight: "bold" }]}>Status</Text>
|
||||
</View>
|
||||
</View> */}
|
||||
<View style={styles.flatViewContainer}>
|
||||
<OrderFlatList
|
||||
data={props.orderHistory}
|
||||
navigation={props.navigation}
|
||||
whichOrder = {props.whichOrder}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "white",
|
||||
...Platform.select({
|
||||
android: {
|
||||
marginTop: verticalScale(30)
|
||||
}
|
||||
})
|
||||
},
|
||||
flatViewContainer: {
|
||||
height: "98%",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
marginBottom: 40
|
||||
},
|
||||
textView: {
|
||||
marginLeft: scale(15),
|
||||
marginBottom: scale(5)
|
||||
}
|
||||
});
|
||||
394
app/containers/MyOrders/orderDetails.js
Executable file
394
app/containers/MyOrders/orderDetails.js
Executable file
@@ -0,0 +1,394 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Platform,
|
||||
StyleSheet,
|
||||
View,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
SafeAreaView
|
||||
} from "react-native";
|
||||
import { observable } from "mobx";
|
||||
import { Button } from "react-native-elements";
|
||||
import Text from "react-native-text";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
import Header from "../../components/Public/header";
|
||||
import Toast, { DURATION } from "react-native-easy-toast";
|
||||
import { width, height } from "../../config/screen";
|
||||
import FoodsRow from "../../components/MyOrders/foodsRow";
|
||||
import moment from "moment";
|
||||
import FoodsRowForOrderDetails from "../../components/MyOrders/foodsRowForOrderDetails";
|
||||
import Icon from "react-native-vector-icons/dist/MaterialCommunityIcons";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
import { Dropdown } from "react-native-material-dropdown";
|
||||
import FastImage from "react-native-fast-image";
|
||||
import { Popup } from "react-native-map-link";
|
||||
import theme from "../../config/colors";
|
||||
import { Fonts } from "../../config/fonts";
|
||||
import CommonTextView from "../../components/Public/commonTextView";
|
||||
import Size from "../../config/size";
|
||||
const size = new Size();
|
||||
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class OrderDetails extends Component {
|
||||
@observable
|
||||
buttonColor = theme.mainColor;
|
||||
@observable
|
||||
buttonDisabled = false;
|
||||
@observable
|
||||
options = {
|
||||
latitude: 38.8976763,
|
||||
longitude: -77.0387185,
|
||||
title: "",
|
||||
dialogTitle: "Select the map",
|
||||
dialogMessage: "",
|
||||
cancelText: "Cancel"
|
||||
};
|
||||
timeIndex = null;
|
||||
data = {};
|
||||
static navigationOptions = {
|
||||
drawerLabel: "My Orders"
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.menuStore;
|
||||
this.userStore = this.props.userStore;
|
||||
this.state = {
|
||||
isVisible: false
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const { navigation } = this.props;
|
||||
this.data = navigation.getParam("data", {});
|
||||
this.time = navigation.getParam("time", {});
|
||||
//console.log(this.data+" "+this.time);
|
||||
|
||||
this.options.latitude = this.data.pickUpLocation.lat;
|
||||
this.options.longitude = this.data.pickUpLocation.lng;
|
||||
this.options.title = this.data.pickUpLocation.name;
|
||||
this.canCancelOrNot();
|
||||
}
|
||||
|
||||
navigatieAction(page) {
|
||||
this.props.navigation.navigate(page);
|
||||
}
|
||||
|
||||
dateFormat() {
|
||||
var momentDate = moment(this.data.items[0].pickupEnd);
|
||||
var timestamp = momentDate.toDate();
|
||||
var options = {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric"
|
||||
};
|
||||
return timestamp.toLocaleDateString("En", options);
|
||||
}
|
||||
|
||||
pickupTime(){
|
||||
var pickupTimeStartString = this.data.items[0].pickupStart.substring(11,16)
|
||||
var pickupTimeEndString = this.data.items[0].pickupEnd.substring(11,16)
|
||||
return pickupTimeStartString + " - " + pickupTimeEndString
|
||||
}
|
||||
|
||||
canCancelOrNot() {
|
||||
if (this.data.status != "D") {
|
||||
if (this.time) {
|
||||
this.buttonColor = theme.inputBgc;
|
||||
this.buttonDisabled = true;
|
||||
} else {
|
||||
console.log('this')
|
||||
this.buttonColor = theme.mainColor;
|
||||
this.buttonDisabled = false;
|
||||
}
|
||||
} else {
|
||||
this.buttonColor = theme.inputBgc;
|
||||
this.buttonDisabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
renderFoodsList() {
|
||||
return this.data.items.map(items => {
|
||||
return (
|
||||
<FoodsRowForOrderDetails
|
||||
items={items}
|
||||
key={items.id}
|
||||
lang={this.userStore.languageSelection}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
back() {
|
||||
this.props.navigation.goBack();
|
||||
}
|
||||
|
||||
goLocationAction() {
|
||||
this.props.navigation.navigate("Location", {
|
||||
location: {
|
||||
latitude: this.data.pickUpLocation.lat,
|
||||
longitude: this.data.pickUpLocation.lng
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
discountText() {
|
||||
if (this.data.discount > 0) {
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize: 10
|
||||
}}
|
||||
>
|
||||
{"- "+this.data.discount}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
cancelAction() {}
|
||||
|
||||
cancelOrderAlert() {
|
||||
Alert.alert("", "Are you sure to cancel this order?", [
|
||||
{ text: "Cancel", onPress: () => console.log("Cancel") },
|
||||
{ text: "Cancel order", onPress: () => this.cancelOrder() }
|
||||
]);
|
||||
}
|
||||
|
||||
cancelOrder() {
|
||||
var token = this.userStore.userData.data.token;
|
||||
this.store.voidOrder(token, this.data.id, this);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
|
||||
<View style={styles.container}>
|
||||
<View style={{ width: width, marginTop: 15 }}>
|
||||
<Icon
|
||||
name="chevron-left"
|
||||
size={size.getSize(40)}
|
||||
color={theme.foodNameColor}
|
||||
style={{ marginLeft: 10 }}
|
||||
onPress={() => this.back()}
|
||||
/>
|
||||
</View>
|
||||
<ScrollView style={{ width: width, flex: 1 }}>
|
||||
<View style={{ marginRight: 20, marginLeft: 20 }}>
|
||||
{this.renderFoodsList()}
|
||||
{this.discountText()}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize:15,
|
||||
}}
|
||||
>
|
||||
TOTAL
|
||||
</Text>
|
||||
<View
|
||||
style={{ flexDirection: "row", justifyContent: "flex-end" }}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize:15
|
||||
}}
|
||||
>
|
||||
HKD ${this.data.payAmount.toFixed(2)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10,
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold",
|
||||
fontSize:15
|
||||
}}
|
||||
>
|
||||
Delivery Details
|
||||
</Text>
|
||||
<View>
|
||||
<CommonTextView
|
||||
title="Pickup Date"
|
||||
content={this.dateFormat()}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
this.setState({ isVisible: true });
|
||||
}}
|
||||
>
|
||||
<CommonTextView
|
||||
title="Pickup Location"
|
||||
content={this.userStore.dataLanguage(
|
||||
this.data.pickUpLocation,
|
||||
"name"
|
||||
)}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
<CommonTextView
|
||||
title="Pickup Time"
|
||||
content={
|
||||
this.pickupTime()
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
borderBottomColor: "black",
|
||||
borderBottomWidth: 1,
|
||||
marginTop: 15,
|
||||
marginBottom: 10,
|
||||
width: "70%"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century,
|
||||
fontSize: 13
|
||||
}}
|
||||
>
|
||||
Mobile phone
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
width: "60%",
|
||||
color: theme.coolGrey,
|
||||
fontSize: 13
|
||||
}}
|
||||
>
|
||||
{this.data.mobile}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<FastImage
|
||||
style={{
|
||||
width: width - 40,
|
||||
marginTop: 15,
|
||||
marginBottom: 15,
|
||||
height: verticalScale(200),
|
||||
backgroundColor: theme.mainColor
|
||||
}}
|
||||
source={{
|
||||
uri: this.data.pickUpLocation.photo
|
||||
}}
|
||||
/>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
marginTop: 15,
|
||||
marginBottom: 5,
|
||||
fontSize: 13,
|
||||
color: theme.coolGrey,
|
||||
fontFamily: Fonts.century
|
||||
}}
|
||||
>
|
||||
Message box
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
// backgroundColor:theme.inputBgc,
|
||||
color: theme.foodNameColor,
|
||||
width: width - 40,
|
||||
height: verticalScale(100),
|
||||
marginBottom: 20,
|
||||
paddingBottom: 0,
|
||||
paddingRight: 5,
|
||||
paddingLeft: 5,
|
||||
fontSize: 13,
|
||||
fontFamily: Fonts.century,
|
||||
borderColor: theme.foodNameColor,
|
||||
borderWidth: 1,
|
||||
borderRadius: 5
|
||||
}}
|
||||
>
|
||||
{this.data.remark}
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Button
|
||||
title="Cancel order"
|
||||
fontWeight="bold"
|
||||
disabled={ this.buttonDisabled}
|
||||
fontSize={size.getSize(15)}
|
||||
fontFamily={Fonts.century}
|
||||
titleStyle={{
|
||||
color: "white",
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold"
|
||||
}}
|
||||
loadingProps={{
|
||||
size: "large",
|
||||
color: "rgba(111, 202, 186, 1)"
|
||||
}}
|
||||
buttonStyle={{
|
||||
width: width,
|
||||
height: verticalScale(50),
|
||||
backgroundColor: this.buttonColor
|
||||
}}
|
||||
onPress={() => this.cancelOrderAlert()}
|
||||
/>
|
||||
|
||||
<Toast ref="toast" />
|
||||
</View>
|
||||
<Popup
|
||||
isVisible={this.state.isVisible}
|
||||
onCancelPressed={() => this.setState({ isVisible: false })}
|
||||
onAppPressed={() => this.setState({ isVisible: false })}
|
||||
onBackButtonPressed={() => this.setState({ isVisible: false })}
|
||||
options={this.options}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "white"
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: "center",
|
||||
margin: 10
|
||||
},
|
||||
instructions: {
|
||||
textAlign: "center",
|
||||
color: "#333333",
|
||||
marginBottom: 5
|
||||
},
|
||||
signupButton: {
|
||||
width: width,
|
||||
height: verticalScale(50),
|
||||
backgroundColor: theme.mainColor
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user