Files
bukopin-redemption-client-r…/src/common/pages/Order/OrderDetail/GojekDelivery/index.js
Rifqy Zacky Ariadhy 1a000700e6 Initial commit
2019-01-02 18:39:53 +07:00

125 lines
4.4 KiB
JavaScript

import React from 'react';
import {observer, inject} from 'mobx-react';
import {Dialog, FlatButton, TextField} from "material-ui";
import {DIALOG} from "../../../../stores/global_ui";
import NumberFormat from 'react-number-format';
import get from 'lodash/get';
@inject('appstate')
@observer
export default class GojekDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
this.props = props;
this.order = props.appstate.order;
}
// componentDidUpdate(prevState, prevProps){
// if(this.props !== prevProps){
// console.log(this.order.gojekPrice, 'this.order.gojekPrice this.order.gojekPrice')
// }
// }
render() {
const actions = [
<FlatButton
label="Cancel"
primary={true}
onClick={() => {
this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.GOJEK_DELIVERY);
this.setState({
value: ''
});
}}
/>,
<FlatButton
label="Submit"
primary={true}
keyboardFocused={true}
onClick={() => {
this.props.appstate.order.bookingGojek();
this.props.appstate.odoo.createSales(this.props.appstate.order.selectedOrder.id);
this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.GOJEK_DELIVERY);
this.setState({
value: ''
});
}}
/>,
];
const actionsError = [
<FlatButton
label="Cancel"
primary={true}
onClick={() => {
this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.GOJEK_DELIVERY);
this.setState({
value: ''
});
}}
/>
];
return (<Dialog
title="Booking Gojek Delivery"
actions={(this.order.gojekPrice.serviceable) ? actions : actionsError}
modal={false}
open={this.props.appstate.globalUI[DIALOG.ORDER.GOJEK_DELIVERY]}
onRequestClose={() => {
this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.GOJEK_DELIVERY);
this.setState({
value: ''
});
}}
>
{(this.order.gojekPrice.serviceable) ? <div>
<div>
<div className="center-align"><p style={{ lineHeight: "1.6rem" }}>You will find driver to pick up and send your package</p></div>
<div className="center-align"><p style={{ lineHeight: "1.6rem", marginTop: "0px", marginBottom: "0px" }}>Total Amount</p></div>
<div className="center-align"><h4 className="black-text" style={{ lineHeight: "1.6rem", marginTop: "0px", fontSize: "26px", marginBottom: "0px" }}><NumberFormat value={get(this.order.gojekPrice, 'price.total_price',0)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></h4></div>
<div className="row" style={{marginTop: 20}}>
<div className="col s12">
<h4 className="center-align" style={{ fontSize: '14px', marginBottom: "8px" }}>To</h4>
<div style={{
boxShadow: "none",
border: "1px solid #d4d4d4",
backgroundColor: "#f9f9f9",
padding: "10px 10px 10px 20px",
marginTop: 0,
marginBottom: 0,
textAlign: 'center'
}} className="card-panel">
<p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
Shipment Method: {get(this.order.gojekPrice, 'shipment_method','-')}
</p>
<p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
Estimate time: {get(this.order.gojekPrice, 'shipment_method_description','-')}
</p>
<p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
Distance : {get(this.order.gojekPrice, 'distance',0)} KM
</p>
</div>
</div>
</div>
</div>
</div> : <div>
<div className="center-align"><p style={{ lineHeight: "1.6rem" }}>GO-SEND Service are <strong>Unavailable</strong> because</p></div>
{/*<div className="center-align"><p style={{ lineHeight: "1.6rem", marginTop: "0px", marginBottom: "0px" }}>Total Amount</p></div>*/}
<div className="center-align"><h4 className="black-text" style={{ lineHeight: "1.6rem", marginTop: "0px", fontSize: "26px", marginBottom: "0px" }}>
{get(this.order.gojekPrice, 'shipment_method_description','-')}
</h4></div>
</div>}
</Dialog>);
}
}