Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import CustomerForm from './../../Customers/CustomerDialog/CustomerForm';
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import {Dialog, FlatButton, RaisedButton} from "material-ui";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class UpdateDialogCompenent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
|
||||
this.customer = props.appstate.customer;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
onChangeForm(formData) {
|
||||
this.setState({formData});
|
||||
}
|
||||
|
||||
save() {
|
||||
this.customer.update(this.customer.selectedCustomer.id, this.state.formData)
|
||||
.then(res => {
|
||||
this.globalUI.hideDialog(DIALOG.CUSTOMER.UPDATE);
|
||||
this.customer.getAll();
|
||||
this.customer.getDetail(this.customer.selectedCustomer.id);
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
style={{marginRight: 10}}
|
||||
onClick={() => this.globalUI.hideDialog(DIALOG.CUSTOMER.UPDATE)}
|
||||
/>,
|
||||
<RaisedButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onClick={() => this.save()}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
title="Update Costumer"
|
||||
modal={false}
|
||||
actions={actions}
|
||||
open={this.globalUI[DIALOG.CUSTOMER.UPDATE]}
|
||||
onRequestClose={this.handleClose}>
|
||||
<CustomerForm defaultValue={this.customer.selectedCustomer} onChangeData={this.onChangeForm.bind(this)} />
|
||||
</Dialog> )
|
||||
}
|
||||
}
|
||||
561
src/common/pages/CustomerDetail/GeneralInformation/index.js
Normal file
561
src/common/pages/CustomerDetail/GeneralInformation/index.js
Normal file
@@ -0,0 +1,561 @@
|
||||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {
|
||||
Paper,
|
||||
SelectField,
|
||||
CardMedia,
|
||||
Card,
|
||||
CardText,
|
||||
CardTitle,
|
||||
Divider,
|
||||
MenuItem,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
ToolbarTitle,
|
||||
FlatButton,
|
||||
Dialog,
|
||||
TextField,
|
||||
DatePicker
|
||||
} from 'material-ui';
|
||||
import AddIcon from 'material-ui/svg-icons/image/edit';
|
||||
import moment from "moment";
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../../routes";
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import UpdateDialog from './UpdateDialog';
|
||||
import IdentificationPassport from './../../Customers/CustomerDialog/IdentificationPassport';
|
||||
|
||||
// import './style.scss';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class GeneralInformation extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.customer = props.appstate.customer;
|
||||
this.state = {
|
||||
value: 1,
|
||||
searchText: '',
|
||||
slideIndex: 0,
|
||||
openedDialog:false,
|
||||
gender:this.customer.CustomerData.gender,
|
||||
marital:this.customer.CustomerData.martial_status,
|
||||
openedDialogPhoto:false
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!');
|
||||
|
||||
}
|
||||
editData = (id) => {
|
||||
this.customer.update(id);
|
||||
this.setState({openedDialog: false});
|
||||
this.setState({openedDialogPhoto: false});
|
||||
};
|
||||
|
||||
handleOpenDialog = () => {
|
||||
this.setState({
|
||||
openedDialog:true
|
||||
});
|
||||
};
|
||||
|
||||
handleCloseDialog = () =>{
|
||||
this.setState({
|
||||
openedDialog:false
|
||||
});
|
||||
}
|
||||
|
||||
handleOpenPhoto = () => {
|
||||
this.setState({
|
||||
openedDialogPhoto:true,
|
||||
oldPassportPhoto : this.customer.CustomerData.passport_photo,
|
||||
oldIdPhoto : this.customer.CustomerData.id_photo,
|
||||
});
|
||||
console.log
|
||||
|
||||
}
|
||||
|
||||
handleClosePhoto = () =>{
|
||||
this.setState({
|
||||
openedDialogPhoto:false
|
||||
});
|
||||
this.customer.CustomerData.passport_photo = this.state.oldPassportPhoto;
|
||||
this.customer.CustomerData.id_photo = this.state.oldIdPhoto;
|
||||
}
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
tabsHandleChange = (value) => {
|
||||
this.setState({
|
||||
slideIndex: value,
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
handleChangeName = (event) =>{
|
||||
this.customer.CustomerData.name = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeEmail = (event) =>{
|
||||
this.customer.CustomerData.email = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeDate = (event, value) =>{
|
||||
this.customer.CustomerData.date_of_birth = value;
|
||||
};
|
||||
|
||||
handleChangeGender = (event, index, value) =>{
|
||||
this.customer.CustomerData.gender = value;
|
||||
};
|
||||
|
||||
handleChangePassport = (event) =>{
|
||||
this.customer.CustomerData.passport_number = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeOccupation = (event) =>{
|
||||
this.customer.CustomerData.occupation = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeAddress = (event) =>{
|
||||
this.customer.CustomerData.address = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeBirthPlace = (event) =>{
|
||||
this.customer.CustomerData.birth_place = event.target.value;
|
||||
};
|
||||
|
||||
handleChangePhone = (event) =>{
|
||||
this.customer.CustomerData.phone = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeHandphone = (event) =>{
|
||||
this.customer.CustomerData.handphone = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeMarital = (event, index, value) =>{
|
||||
this.customer.CustomerData.martial_status = value;
|
||||
};
|
||||
|
||||
handleChangeTaxNumber = (event) =>{
|
||||
this.customer.CustomerData.id_tax_number = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeType = (event) =>{
|
||||
this.customer.CustomerData.id_type = event.target.value;
|
||||
};
|
||||
|
||||
handleChangeNumber= (event) =>{
|
||||
this.customer.CustomerData.id_number = event.target.value;
|
||||
};
|
||||
|
||||
render() {
|
||||
const styles = {
|
||||
|
||||
radioButton: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
|
||||
const gender = [
|
||||
<MenuItem key={0} value={0} primaryText="Choose Gender"/>,
|
||||
<MenuItem key={1} value={"Man"} primaryText="Man"/>,
|
||||
<MenuItem key={2} value={"Woman"} primaryText="Woman"/>,
|
||||
];
|
||||
|
||||
const marital_status = [
|
||||
<MenuItem key={0} value={0} primaryText="Choose Marital Status"/>,
|
||||
<MenuItem key={1} value={"Married"} primaryText="Married"/>,
|
||||
<MenuItem key={2} value={"Single"} primaryText="Single"/>,
|
||||
<MenuItem key={2} value={"Divorced"} primaryText="Divorced"/>,
|
||||
<MenuItem key={2} value={"Widowed"} primaryText="Widowed"/>,
|
||||
];
|
||||
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleCloseDialog}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onClick={() => this.editData(this.customer.CustomerData.id)}
|
||||
/>,
|
||||
];
|
||||
|
||||
const actionsPhoto = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleClosePhoto}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onClick={() => this.editData(this.customer.CustomerData.id)}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<UpdateDialog/>
|
||||
<Card className="row" style={{marginBottom: 10}}>
|
||||
<div className="flexSpaceBetween" style={{padding: 16}}>
|
||||
<CardTitle style={{padding: 0, fontSize: 22}} titleStyle={{fontSize: 22}}
|
||||
title={this.customer.CustomerData.name}
|
||||
subtitle={<code>{this.customer.CustomerData.id}</code>}/>
|
||||
<ToolbarGroup>
|
||||
<RaisedButton
|
||||
icon={<AddIcon/>}
|
||||
label="Edit"
|
||||
onClick={this.handleOpenDialog}
|
||||
primary={true}/>
|
||||
</ToolbarGroup>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
<Card style={{marginBottom: 10}}>
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}
|
||||
text={'Details'}/>
|
||||
</ToolbarGroup>
|
||||
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<CardTitle style={{paddingBottom: 0}}
|
||||
subtitle={<p style={{color: '#32325d', fontSize: 12, paddingLeft: 10}}>ACCOUNT INFORMATION</p>}/>
|
||||
<CardText>
|
||||
<div className="row">
|
||||
<div className="col s12 m12 l12">
|
||||
<div className="listCustDetail">
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">ID</p>
|
||||
<code className="listCustomerDetailItemValue">{this.customer.CustomerData.id}</code>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Created</p>
|
||||
<p
|
||||
className="listCustomerDetailItemValue">{moment(this.customer.CustomerData.created_at).format('DD MMMM YYYY, HH:mm:ss')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Email</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.email}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Birth Place</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.birth_place}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Date of Birth</p>
|
||||
<p
|
||||
className="listCustomerDetailItemValue">{moment(this.customer.CustomerData.date_of_birth).format('DD MMMM YYYY')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Gender</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.gender}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Address</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.address}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Occupation</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.occupation}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Phone</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.phone}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Handphone</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.handphone}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Marital Status</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.martial_status}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">ID Tax Number</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_tax_number}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">ID Type</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_type}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">ID Number</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.id_number}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Passport Number</p>
|
||||
<p className="listCustomerDetailItemValue">{this.customer.CustomerData.passport_number}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Agent</p>
|
||||
<p className="listCustomerDetailItemValue"><Link to={`${LINKS.MEMBER}/${this.customer.CustomerData.agent_id}`}
|
||||
key={this.customer.CustomerData.agent_id}>{this.customer.CustomerData.agent}</Link> - <code
|
||||
style={{color: '#424770'}}>{this.customer.CustomerData.agent_id}</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardText>
|
||||
</Card>
|
||||
<Card className="row" style={{marginBottom: 10}}>
|
||||
<ToolbarGroup className="flexSpaceBetween" style={{padding: "0px 16px 0px 16px"}}>
|
||||
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}
|
||||
text={'Identification & Passport'}/>
|
||||
<RaisedButton
|
||||
icon={<AddIcon/>}
|
||||
label="Edit"
|
||||
onClick={this.handleOpenPhoto}
|
||||
primary={true}/>
|
||||
</ToolbarGroup>
|
||||
<Divider/>
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<CardTitle style={{paddingBottom: 0}}
|
||||
subtitle={<p style={{color: '#32325d', fontSize: 12}}>IDENTIFICATION</p>}/>
|
||||
<CardText>
|
||||
<Paper zDepth={1} style={{padding: 8}}>
|
||||
<CardMedia style={{minHeight: '222px'}}>
|
||||
<img src={this.http.appendImagePath(this.customer.CustomerData.id_photo)}/>
|
||||
</CardMedia>
|
||||
</Paper>
|
||||
</CardText>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<CardTitle style={{paddingBottom: 0}}
|
||||
subtitle={<p style={{color: '#32325d', fontSize: 12}}>PASSPORT</p>}/>
|
||||
<CardText>
|
||||
<Paper zDepth={1} style={{padding: 8}}>
|
||||
<CardMedia style={{minHeight: '222px'}}>
|
||||
<img src={this.http.appendImagePath(this.customer.CustomerData.passport_photo)}/>
|
||||
</CardMedia>
|
||||
</Paper>
|
||||
</CardText>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Dialog
|
||||
title="Update Customer Data"
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.openedDialog}
|
||||
onRequestClose={() => this.handleCloseDialog()}
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Name</p>
|
||||
<TextField
|
||||
fullWidth={true}
|
||||
onChange={this.handleChangeName}
|
||||
hintText="E.g. Michael Jordan"
|
||||
value={this.customer.CustomerData.name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Email</p>
|
||||
<TextField
|
||||
fullWidth={true}
|
||||
onChange={this.handleChangeEmail}
|
||||
hintText="E.g. Michael.Jordan@domain.com"
|
||||
value={this.customer.CustomerData.email}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Date of Birth</p>
|
||||
<DatePicker
|
||||
fullWidth={true}
|
||||
mode="landscape"
|
||||
onChange={this.handleChangeDate}
|
||||
hintText="2017-08-17"
|
||||
openToYearSelection={true}
|
||||
value={this.customer.CustomerData.date_of_birth}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Gender</p>
|
||||
<SelectField
|
||||
value={this.customer.CustomerData.gender}
|
||||
onChange={this.handleChangeGender}
|
||||
fullWidth={true}
|
||||
>
|
||||
{gender}
|
||||
</SelectField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Passport Number</p>
|
||||
<TextField
|
||||
hintText="E.g. X000000"
|
||||
onChange={this.handleChangePassport}
|
||||
fullWidth={true}
|
||||
value={this.customer.CustomerData.passport_number}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Occupation</p>
|
||||
<TextField
|
||||
hintText="E.g. PNS"
|
||||
onChange={this.handleChangeOccupation}
|
||||
fullWidth={true}
|
||||
value={this.customer.CustomerData.occupation}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Address</p>
|
||||
<TextField
|
||||
hintText="E.g. Jl. Kemanggisan No.25 Jakarta Barat"
|
||||
multiLine={true}
|
||||
fullWidth={true}
|
||||
rows={1}
|
||||
rowsMax={4}
|
||||
onChange={this.handleChangeAddress}
|
||||
value={this.customer.CustomerData.address}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Birth Place</p>
|
||||
<TextField
|
||||
hintText="E.g. Bandung"
|
||||
fullWidth={true}
|
||||
onChange={this.handleChangeBirthPlace}
|
||||
value={this.customer.CustomerData.birth_place}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Phone</p>
|
||||
<TextField
|
||||
hintText="E.g. 88954361"
|
||||
onChange={this.handleChangePhone}
|
||||
fullWidth={true}
|
||||
value={this.customer.CustomerData.phone}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Handphone</p>
|
||||
<TextField
|
||||
hintText="E.g. 0899976487"
|
||||
onChange={this.handleChangeHandphone}
|
||||
fullWidth={true}
|
||||
value={this.customer.CustomerData.handphone}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">Marital Status</p>
|
||||
<SelectField
|
||||
value={this.customer.CustomerData.martial_status}
|
||||
onChange={this.handleChangeMarital}
|
||||
fullWidth={true}
|
||||
>
|
||||
{marital_status}
|
||||
</SelectField>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">ID Tax Number</p>
|
||||
<TextField
|
||||
hintText="E.g. 00000000000000000"
|
||||
onChange={this.handleChangeTaxNumber}
|
||||
fullWidth={true}
|
||||
value={this.customer.CustomerData.id_tax_number}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">ID Type</p>
|
||||
<TextField
|
||||
hintText="E.g. KTP"
|
||||
onChange={this.handleChangeType}
|
||||
fullWidth={true}
|
||||
value={this.customer.CustomerData.id_type}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s12 m6 l6">
|
||||
<div>
|
||||
<p className="label-form">ID Number</p>
|
||||
<TextField
|
||||
hintText="E.g. 00000000000000"
|
||||
onChange={this.handleChangeNumber}
|
||||
fullWidth={true}
|
||||
value={this.customer.CustomerData.id_number}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog
|
||||
title="Update Agent"
|
||||
actions={actionsPhoto}
|
||||
modal={true}
|
||||
open={this.state.openedDialogPhoto}
|
||||
onRequestClose={() => this.handleClosePhoto()}
|
||||
>
|
||||
<IdentificationPassport/>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
197
src/common/pages/CustomerDetail/Order/index.js
Normal file
197
src/common/pages/CustomerDetail/Order/index.js
Normal file
@@ -0,0 +1,197 @@
|
||||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {
|
||||
Card,
|
||||
Divider,
|
||||
MenuItem,
|
||||
RaisedButton,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
TextField,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
ToolbarSeparator
|
||||
} from 'material-ui';
|
||||
import SearchIcon from 'material-ui/svg-icons/action/search';
|
||||
import AddIcon from 'material-ui/svg-icons/content/add';
|
||||
import moment from "moment";
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../../routes";
|
||||
import get from 'lodash.get';
|
||||
import EmptyComponent from "../../EmptyComponent/index";
|
||||
|
||||
// import './style.scss';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CustomerOrder extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
searchText: '',
|
||||
slideIndex: 0,
|
||||
customers: [
|
||||
{
|
||||
id: 'ATT001',
|
||||
package: 'The Exoticsm Of Minang',
|
||||
registered: moment(),
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
id: 'ATT002',
|
||||
package: 'Weh Island Wonderful Adventure',
|
||||
registered: moment(),
|
||||
status: 'blocked'
|
||||
},
|
||||
{
|
||||
id: 'ATT003',
|
||||
package: 'Holy Land',
|
||||
registered: moment(),
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
id: 'ATT004',
|
||||
package: 'Legoland & Gardens By The Bay 4D',
|
||||
registered: moment(),
|
||||
status: 'clear'
|
||||
},
|
||||
]
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.customer = props.appstate.customer;
|
||||
this.order = props.appstate.order;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!', this.props);
|
||||
this.customer.getOrder()
|
||||
|
||||
}
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
tabsHandleChange = (value) => {
|
||||
this.setState({
|
||||
slideIndex: value,
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
const styles = {
|
||||
|
||||
radioButton: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
|
||||
const colors = [
|
||||
'Jakarta - Soekarno - Hatta (CGK)',
|
||||
'Bali',
|
||||
'Surabaya',
|
||||
'Yogyakarta',
|
||||
'Aceh',
|
||||
'Kalimantan',
|
||||
'Medan',
|
||||
'Papua',
|
||||
];
|
||||
|
||||
const items = [
|
||||
<MenuItem key={1} value={1} primaryText="All Maskapai"/>,
|
||||
<MenuItem key={2} value={2} primaryText="Air Asia"/>,
|
||||
<MenuItem key={3} value={3} primaryText="Weeknights"/>,
|
||||
<MenuItem key={4} value={4} primaryText="Weekends"/>,
|
||||
<MenuItem key={5} value={5} primaryText="Weekly"/>,
|
||||
];
|
||||
|
||||
const count = [
|
||||
<MenuItem key={1} value={1} primaryText="1"/>,
|
||||
<MenuItem key={2} value={2} primaryText="2"/>,
|
||||
<MenuItem key={3} value={3} primaryText="3"/>,
|
||||
<MenuItem key={4} value={4} primaryText="4"/>,
|
||||
<MenuItem key={5} value={5} primaryText="5"/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<Card>
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
||||
<TextField
|
||||
hintText="Search Order"
|
||||
style={{fontSize: 14}}
|
||||
hintStyle={{fontSize: 14}}
|
||||
underlineShow={false}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
{/*<ToolbarGroup className="ToolbarGroupLast">*/}
|
||||
{/*<ToolbarSeparator/>*/}
|
||||
{/*<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Customer" primary={true} />*/}
|
||||
{/*</ToolbarGroup>*/}
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div>
|
||||
<Table selectable={false}>
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Order
|
||||
Id</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Type</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Name</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Ordered</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Status</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
{(this.customer.orders.length > 0) ?
|
||||
this.customer.orders.map(cust => {
|
||||
return (
|
||||
<TableRow key={cust.id}>
|
||||
<TableRowColumn><Link to={(cust.type === 'airline') ? `${LINKS.ORDER_DETAIL_AIRLINES_WO_ID}/${cust.id}` : `${LINKS.ORDER}/${cust.id}`} key={cust.id} onClick={() => {
|
||||
this.order.setOrderDetail(cust);
|
||||
// this.props.history.push();
|
||||
}}>{cust.id}</Link></TableRowColumn>
|
||||
<TableRowColumn>{cust.type}</TableRowColumn>
|
||||
<TableRowColumn>{cust.name}</TableRowColumn>
|
||||
<TableRowColumn>{moment(cust.created_at).format("DD MMMM YYYY, HH:mm:ss")}</TableRowColumn>
|
||||
<TableRowColumn>{cust.status}</TableRowColumn>
|
||||
</TableRow>
|
||||
)
|
||||
}) : <EmptyComponent type="empty" header="" content="There is no data in sight"/>
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {Dialog, FlatButton, Stepper, Step, StepLabel, Snackbar} from "material-ui";
|
||||
import {DIALOG} from "../../../../stores/global_ui";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CancelPaymentDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
currentStep: 0,
|
||||
prevText: "Cancel",
|
||||
nextText: "Submit"
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.order = props.appstate.order;
|
||||
this.http = props.appstate.http;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
makePayment() {
|
||||
return this.http.post("payments/cancel", {
|
||||
package_transaction_id: this.order.selectedOrder.id
|
||||
})
|
||||
.then(res => {
|
||||
this.order.getDetail(this.order.selectedOrder.id);
|
||||
this.globalUI.hideDialog(DIALOG.ORDER.CANCEL_PAYMENT);
|
||||
})
|
||||
}
|
||||
|
||||
handleNext = () => this.makePayment();
|
||||
handleClose = () => this.globalUI.hideDialog(DIALOG.ORDER.CANCEL_PAYMENT);
|
||||
|
||||
render() {
|
||||
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label={this.state.prevText}
|
||||
primary={true}
|
||||
onClick={() => this.globalUI.hideDialog(DIALOG.ORDER.CANCEL_PAYMENT)}
|
||||
/>,
|
||||
<FlatButton
|
||||
label={this.state.nextText}
|
||||
primary={true}
|
||||
onClick={() => this.handleNext().catch(err => this.props.appstate.globalUI.openSnackbar(err.message))}
|
||||
/>,
|
||||
];
|
||||
|
||||
const actionsCancelOnly = [
|
||||
<FlatButton
|
||||
label={"Ok"}
|
||||
primary={true}
|
||||
onClick={() => this.globalUI.hideDialog(DIALOG.ORDER.CANCEL_PAYMENT)}
|
||||
/>,
|
||||
]
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
title="Cancel a Payment"
|
||||
modal={false}
|
||||
actions={actions}
|
||||
open={this.globalUI[DIALOG.ORDER.CANCEL_PAYMENT]}
|
||||
onRequestClose={this.handleClose}>
|
||||
Are you sure want to cancel this book?
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {DIALOG} from "../../../../stores/global_ui";
|
||||
import NumberFormat from 'react-number-format';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class BookedOrder extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
|
||||
this.http = props.appstate.http;
|
||||
this.order = props.appstate.order;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
}
|
||||
|
||||
makePayment() {
|
||||
return this.http.post("payments/add_payment", {
|
||||
package_transaction_id: this.order.selectedOrder.id
|
||||
})
|
||||
.then(res => {
|
||||
this.order.getDetail(this.order.selectedOrder.id);
|
||||
this.globalUI.hideDialog(DIALOG.ORDER.MAKE_PAYMENT);
|
||||
})
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
const {parent} = this.props;
|
||||
|
||||
setTimeout(() => {
|
||||
parent.setState({
|
||||
handleNext: () => this.makePayment()
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
You'll pay <NumberFormat value={this.order.selectedOrder.installment_amount} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {DIALOG} from "../../../../stores/global_ui";
|
||||
import NumberFormat from 'react-number-format';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CompletedOrder extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
|
||||
this.http = props.appstate.http;
|
||||
this.order = props.appstate.order;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
}
|
||||
|
||||
// makePayment() {
|
||||
// this.http.post("payments/add_payment", {
|
||||
// package_transaction_id: this.order.selectedOrder.id
|
||||
// })
|
||||
// .then(res => {
|
||||
// this.order.getDetail(this.order.selectedOrder.id);
|
||||
// this.globalUI.hideDialog(DIALOG.ORDER.MAKE_PAYMENT);
|
||||
// })
|
||||
// }
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
const {parent} = this.props;
|
||||
|
||||
setTimeout(() => {
|
||||
parent.setState({
|
||||
handleNext: () => {return true}
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
Your payment is already completed
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {DIALOG} from "../../../../stores/global_ui";
|
||||
import NumberFormat from 'react-number-format';
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class OrderedOrder extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
amount: 0,
|
||||
isLoading: true
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
|
||||
this.http = props.appstate.http;
|
||||
this.order = props.appstate.order;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
}
|
||||
|
||||
makePayment() {
|
||||
return this.http.post("payments/initial_payment", {
|
||||
package_transaction_id: this.order.selectedOrder.id
|
||||
})
|
||||
.then(res => {
|
||||
this.order.getDetail(this.order.selectedOrder.id);
|
||||
this.globalUI.hideDialog(DIALOG.ORDER.MAKE_PAYMENT);
|
||||
})
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
const {parent} = this.props;
|
||||
|
||||
this.setState({isLoading: true});
|
||||
|
||||
this.http.post("payments/initial_payment_preview", {
|
||||
package_transaction_id: this.order.selectedOrder.id
|
||||
})
|
||||
.then(res => {
|
||||
|
||||
parent.setState({
|
||||
handleNext: () => this.makePayment()
|
||||
});
|
||||
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
amount: res.amount
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
You'll pay <NumberFormat value={this.state.amount} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/> as DownPayment
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {MenuItem, SelectField} from "material-ui";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class SelectPaymentType extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<SelectField>
|
||||
<MenuItem value={"cash"} primaryText="Cash" />
|
||||
</SelectField>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {Dialog, FlatButton, Stepper, Step, StepLabel, Snackbar} from "material-ui";
|
||||
import {DIALOG} from "../../../../stores/global_ui";
|
||||
import SelectPaymentType from "./SelectPaymentType";
|
||||
|
||||
import BookedOrder from './BookedOrder';
|
||||
import OrderedOrder from './OrderedOrder';
|
||||
import CompleteOrder from './CompleteOrder';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class MakePaymentDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
currentStep: 0,
|
||||
handleNext: () => {},
|
||||
prevText: "Cancel",
|
||||
nextText: "Submit"
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.order = props.appstate.order;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
getContent() {
|
||||
switch (this.order.selectedOrder.status) {
|
||||
case "ordered":
|
||||
return <OrderedOrder parent={this} />;
|
||||
case "booked":
|
||||
return <BookedOrder parent={this} />;
|
||||
case "payment_complete":
|
||||
return <CompleteOrder parent={this} />;
|
||||
default:
|
||||
return <div/>;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label={this.state.prevText}
|
||||
primary={true}
|
||||
onClick={() => this.globalUI.hideDialog(DIALOG.ORDER.MAKE_PAYMENT)}
|
||||
/>,
|
||||
<FlatButton
|
||||
label={this.state.nextText}
|
||||
primary={true}
|
||||
onClick={() => this.state.handleNext().catch(err => this.props.appstate.globalUI.openSnackbar(err.message))}
|
||||
/>,
|
||||
];
|
||||
|
||||
const actionsCancelOnly = [
|
||||
<FlatButton
|
||||
label={"Ok"}
|
||||
primary={true}
|
||||
onClick={() => this.globalUI.hideDialog(DIALOG.ORDER.MAKE_PAYMENT)}
|
||||
/>,
|
||||
]
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
title="Make a Payment"
|
||||
modal={false}
|
||||
actions={(this.order.selectedOrder.status === 'payment_complete') ? actionsCancelOnly : actions}
|
||||
open={this.globalUI[DIALOG.ORDER.MAKE_PAYMENT]}
|
||||
onRequestClose={this.handleClose}>
|
||||
{this.getContent()}
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
}
|
||||
413
src/common/pages/CustomerDetail/OrderDetail/index.js
Normal file
413
src/common/pages/CustomerDetail/OrderDetail/index.js
Normal file
@@ -0,0 +1,413 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {
|
||||
Card, CardTitle, CardText,
|
||||
Divider,
|
||||
MenuItem,
|
||||
FlatButton,
|
||||
RaisedButton,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
TextField,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
ToolbarSeparator, ToolbarTitle, CardHeader, Dialog,
|
||||
} from 'material-ui';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../../routes";
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import AddIcon from 'material-ui/svg-icons/content/add';
|
||||
import RemoveIcon from 'material-ui/svg-icons/content/remove';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
|
||||
import MakePaymentDialog from './MakePaymentDialog/index';
|
||||
import CancelPaymentDialog from './CancelPaymentDialog/index';
|
||||
import moment from "moment";
|
||||
import get from 'lodash.get';
|
||||
import DC from 'decimal.js-light';
|
||||
import NumberFormat from 'react-number-format';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class OrderDetailComponent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
searchText: '',
|
||||
slideIndex: 0,
|
||||
tabSelected: 'gi',
|
||||
openModal: false
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.order = props.appstate.order;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.order.getDetail(this.props.match.params.id);
|
||||
}
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
tabsHandleChange = (value) => {
|
||||
this.setState({
|
||||
slideIndex: value,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
handleChange = (tabSelected) => {
|
||||
this.setState({
|
||||
tabSelected: tabSelected,
|
||||
});
|
||||
// this.props.history.push(tabSelected);
|
||||
};
|
||||
|
||||
handleCloseModal = () => {
|
||||
this.setState({
|
||||
openModal: false
|
||||
})
|
||||
};
|
||||
|
||||
handleOpenModal = () => {
|
||||
this.setState({
|
||||
openModal: true
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const customer = {
|
||||
name: 'Ridwan Abadi',
|
||||
identity_number: '98261536156313561',
|
||||
email: 'welove6215@einrot.com',
|
||||
address: 'Jalan Pramuka No. 81, Marga Jaya, Bekasi Selatan, Marga Jaya, Bekasi Sel., Kota Bks, Jawa Barat 17141',
|
||||
handphone: '081190876',
|
||||
phone: '0',
|
||||
place_birth: 'Jakarta',
|
||||
birth_date: moment().format('DD MMM YYYY'),
|
||||
gender: 'Male',
|
||||
tax_id: '98261536156313561',
|
||||
martial_status: 'Married'
|
||||
}
|
||||
|
||||
const order = {
|
||||
id: '467d6b50-ade0-4dd0-98ca-35cd083e16e0',
|
||||
order_id: 'book_461a1df5',
|
||||
package: 'The Exoticsm Of Minang',
|
||||
description: 'Feel the joy of wonderful world of exotic, culture, and outstanding view that will amaze you to the bone. Enjoy your holiday in very nice and peaceful place to clear your mind. With great hotel and profesional tour guide, we ensure you that you will have a unforgetable memories and happiness.\n',
|
||||
registered: moment(),
|
||||
detail_package: [
|
||||
{
|
||||
name: 'Destination',
|
||||
value: 'Bukittinggi, Minangkabau'
|
||||
},
|
||||
{
|
||||
name: 'Transport',
|
||||
value: 'Custom'
|
||||
},
|
||||
{
|
||||
name: 'Duration',
|
||||
value: '4 day 3 night'
|
||||
}
|
||||
],
|
||||
payment_type: 'Instalment',
|
||||
status: 'active'
|
||||
}
|
||||
|
||||
const totalPaid = get(this.order.selectedOrder, 'payments', [])
|
||||
.map(pay => (pay.type == 'cancel_payment') ? pay.amount = 0 : pay.amount)
|
||||
.reduce((total, v) => total.add(v), new DC(0));
|
||||
|
||||
const priceAfterDisc = get(this.order.selectedOrder, 'price_after_discount', 0);
|
||||
const disc = new DC(get(this.order.selectedOrder, 'price') || 0).minus(priceAfterDisc || 0);
|
||||
|
||||
const amountDue = new DC(priceAfterDisc || 0).minus(totalPaid);
|
||||
// const amountDue = new DC(0);
|
||||
|
||||
const actionsModals = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleCloseModal}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Ok"
|
||||
primary={true}
|
||||
onClick={() => {
|
||||
this.order.payAirlineTicket().then((airlineTicket) => {
|
||||
this.order.setOrderStatus('ticketed');
|
||||
this.globalUI.openSnackbar('Payment success');
|
||||
});
|
||||
}}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="customerDetail containerMiddle animated fadeIn">
|
||||
<Dialog
|
||||
title="Are you sure that all data is correct?"
|
||||
actions={actionsModals}
|
||||
modal={true}
|
||||
open={this.state.openModal}
|
||||
>
|
||||
You will be charged
|
||||
</Dialog>
|
||||
|
||||
<div style={{marginBottom: '10px', marginLeft: '-15px'}}>
|
||||
<FlatButton
|
||||
className="headerMenu"
|
||||
inkBarStyle={{background: 'transparent'}}
|
||||
hoverColor="#f1f5f9"
|
||||
style={{background: '#ffffff00'}}
|
||||
onClick={() => this.props.history.goBack()}
|
||||
label="Back"
|
||||
primary={true}
|
||||
icon={<NavigationArrowBack />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MakePaymentDialog/>
|
||||
|
||||
<CancelPaymentDialog/>
|
||||
|
||||
<Card className="row">
|
||||
|
||||
<div className="flexSpaceBetween" style={{padding: 16}}>
|
||||
<div className="">
|
||||
<CardTitle style={{padding: 0, fontSize: 22}}
|
||||
titleStyle={{fontSize: 22}}
|
||||
title="Order Form"
|
||||
/>
|
||||
<div className="listCustDetail">
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">Order Id</p>
|
||||
<p className="listHeaderCustomerDetailItemValue"><code>{this.order.selectedOrder.id}</code></p>
|
||||
</div>
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">Order Date</p>
|
||||
<p className="listHeaderCustomerDetailItemValue">{moment(this.order.selectedOrder.created_at).format("DD MMMM YYYY, HH:mm:ss")}</p>
|
||||
</div>
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">Payment Method</p>
|
||||
<p className="listHeaderCustomerDetailItemValue">{get(this.order.selectedOrder, 'paymentMethod.name', '-')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ToolbarGroup>
|
||||
{
|
||||
this.order.orderDetail.type === 'packages' && this.order.orderDetail.status != 'canceled' && (<RaisedButton icon={<AddIcon/>} label="Make Payment" primary={true}
|
||||
onClick={() => this.globalUI.showDialog(DIALOG.ORDER.MAKE_PAYMENT)}/>)
|
||||
}
|
||||
{
|
||||
this.order.orderDetail.type === 'packages' && this.order.orderDetail.status != 'canceled' && (<RaisedButton icon={<RemoveIcon/>} label="Cancel Booking" primary={false}
|
||||
onClick={() => this.globalUI.showDialog(DIALOG.ORDER.CANCEL_PAYMENT)}/>)
|
||||
}
|
||||
{
|
||||
this.order.orderDetail.type === 'airline' && this.order.orderDetail.status === 'booked' &&
|
||||
(<RaisedButton icon={<AddIcon/>} label="Pay" primary={true}
|
||||
onClick={() => this.handleOpenModal()}/>)
|
||||
}
|
||||
{
|
||||
this.order.orderDetail.type === 'airline' && this.order.orderDetail.status === 'ticketed' &&
|
||||
(<RaisedButton icon={<AddIcon/>} label="Print Ticket" primary={true} onClick={() => this.globalUI.showDialog(DIALOG.ORDER.MAKE_PAYMENT)}/>)
|
||||
}{
|
||||
this.order.orderDetail.type === 'packages' && this.order.orderDetail.status == 'canceled' && (<p>This order is already Cancelled</p>)
|
||||
}
|
||||
</ToolbarGroup>
|
||||
</div>
|
||||
<Divider/>
|
||||
<CardHeader actAsExpander={true}
|
||||
showExpandableButton={false} style={{paddingBottom: 0}}
|
||||
subtitle={<a style={{fontSize: 12}}>CUSTOMER INFORMATION</a>}/>
|
||||
<CardText expandable={true} style={{paddingBottom: 0}}>
|
||||
<div className="row no-margin">
|
||||
<div className="col s12 m12 l6">
|
||||
<div className="listCustDetail">
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Name</p>
|
||||
<p className="listCustomerDetailItemValue">{get(this.order.selectedOrder, 'customer.name', '-')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Identity Number</p>
|
||||
<p className="listCustomerDetailItemValue">{get(this.order.selectedOrder, 'customer.passport_number', '-')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Email</p>
|
||||
<p className="listCustomerDetailItemValue">{get(this.order.selectedOrder, 'customer.email', '-')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Address</p>
|
||||
<p className="listCustomerDetailItemValue">{get(this.order.selectedOrder, 'customer.address', '-')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Phone</p>
|
||||
<p
|
||||
className="listCustomerDetailItemValue">{get(this.order.selectedOrder, 'customer.phone_number', '-')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Handphone</p>
|
||||
<p className="listCustomerDetailItemValue">-</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col s12 m12 l6">
|
||||
<div className="listCustDetail">
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Place & Birth Date</p>
|
||||
<p className="listCustomerDetailItemValue">{customer.place_birth}, {moment(get(this.order.selectedOrder, 'customer.date_of_birth', moment())).format("DD MMMM YYYY")}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Gender</p>
|
||||
<p className="listCustomerDetailItemValue">{get(this.order.selectedOrder, 'customer.gender', '-')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Tax Id</p>
|
||||
<p className="listCustomerDetailItemValue">-</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Martial Status</p>
|
||||
<p className="listCustomerDetailItemValue">-</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</CardText>
|
||||
|
||||
|
||||
<div style={{marginTop: 18}}>
|
||||
<Table selectable={false} className="TableOrder">
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Package</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Description</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Price</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Amount</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
<TableRow>
|
||||
<TableRowColumn>
|
||||
{get(this.order.selectedOrder, 'packageSchedule.package.name', '-')}
|
||||
<p style={{margin: '2px 0', fontSize: 10}}>
|
||||
Detail: <Link to={LINKS.SERVICE} target="_blank">View details</Link>
|
||||
</p>
|
||||
</TableRowColumn>
|
||||
<TableRowColumn>{get(this.order.selectedOrder, 'packageSchedule.package.description', '-')}</TableRowColumn>
|
||||
<TableRowColumn><NumberFormat value={get(this.order.selectedOrder, 'price', '0')} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></TableRowColumn>
|
||||
<TableRowColumn><NumberFormat value={get(this.order.selectedOrder, 'price_after_discount', '0')} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></TableRowColumn>
|
||||
</TableRow>
|
||||
|
||||
<TableRow displayBorder={false} className="TableRowCondensed TableRowCondensedFirst">
|
||||
<TableRowColumn colSpan={2} className="TableRowColumnCondensed TableRowColumnCondensedFirst"></TableRowColumn>
|
||||
<TableRowColumn className="align-right font-500 TableRowColumnCondensed TableRowColumnCondensedFirst">Subtotal</TableRowColumn>
|
||||
<TableRowColumn className="TableRowColumnCondensed TableRowColumnCondensedFirst"><NumberFormat value={get(this.order.selectedOrder, 'price_after_discount', '0')} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow displayBorder={false} className="TableRowCondensed">
|
||||
<TableRowColumn colSpan={2} className="TableRowColumnCondensed"></TableRowColumn>
|
||||
<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Discount</TableRowColumn>
|
||||
<TableRowColumn className="TableRowColumnCondensed"><NumberFormat value={disc.toString()} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow displayBorder={false} className="TableRowCondensed">
|
||||
<TableRowColumn colSpan={2} className="TableRowColumnCondensed"></TableRowColumn>
|
||||
<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Total</TableRowColumn>
|
||||
<TableRowColumn className="TableRowColumnCondensed"><NumberFormat value={get(this.order.selectedOrder, 'price_after_discount', '0')} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow displayBorder={false} className="TableRowCondensed">
|
||||
<TableRowColumn colSpan={2} className="TableRowColumnCondensed"></TableRowColumn>
|
||||
<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Total Paid</TableRowColumn>
|
||||
<TableRowColumn className="TableRowColumnCondensed"><NumberFormat value={totalPaid.toString()} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow displayBorder={false} className="TableRowCondensed TableRowCondensedLast">
|
||||
<TableRowColumn colSpan={2} className="TableRowColumnCondensed TableRowColumnCondensedLast"></TableRowColumn>
|
||||
<TableRowColumn className="align-right font-500 TableRowColumnCondensed TableRowColumnCondensedLast">Amount
|
||||
Due </TableRowColumn>
|
||||
<TableRowColumn className="TableRowColumnCondensed TableRowColumnCondensedLast"><NumberFormat value={amountDue.toString()} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></TableRowColumn>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Divider/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
{/*<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>*/}
|
||||
{/*<ToolbarGroup>*/}
|
||||
{/*<ToolbarTitle actAsExpander={true}*/}
|
||||
{/*showExpandableButton={false} style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}*/}
|
||||
{/*text={'Payments'}/>*/}
|
||||
{/*</ToolbarGroup>*/}
|
||||
|
||||
{/*</Toolbar>*/}
|
||||
|
||||
<CardHeader actAsExpander={true}
|
||||
showExpandableButton={false} style={{paddingBottom: 16}}
|
||||
subtitle={<a style={{fontSize: 12, paddingLeft: 10}}>Payments History</a>}/>
|
||||
<Divider/>
|
||||
|
||||
<CardText className="no-padding" expandable={true}>
|
||||
<Table selectable={false}>
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Date</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Description</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Amount</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Status</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
{get(this.order.selectedOrder, 'payments', []).map(pay => {
|
||||
return (
|
||||
<TableRow>
|
||||
<TableRowColumn>{moment(pay.created_at).format("DD MMMM YYYY, HH:mm:ss")}</TableRowColumn>
|
||||
<TableRowColumn>{pay.name}</TableRowColumn>
|
||||
<TableRowColumn><NumberFormat value={pay.amount} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/></TableRowColumn>
|
||||
<TableRowColumn>{pay.status}</TableRowColumn>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardText>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
292
src/common/pages/CustomerDetail/OrderDetailAirlines/index.js
Normal file
292
src/common/pages/CustomerDetail/OrderDetailAirlines/index.js
Normal file
@@ -0,0 +1,292 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {
|
||||
Card, CardTitle, CardText,
|
||||
Divider,
|
||||
MenuItem,
|
||||
FlatButton,
|
||||
RaisedButton,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
TextField,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
ToolbarSeparator, ToolbarTitle, CardHeader, Dialog,
|
||||
} from 'material-ui';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../../routes";
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import AddIcon from 'material-ui/svg-icons/content/add';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
|
||||
import moment from "moment";
|
||||
import get from 'lodash.get';
|
||||
import DC from 'decimal.js-light';
|
||||
import NumberFormat from 'react-number-format';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class OrderDetailAirlinesComponent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
searchText: '',
|
||||
slideIndex: 0,
|
||||
tabSelected: 'gi',
|
||||
openModal: false
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.order = props.appstate.order;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.order.getAirlineDetail(this.props.match.params.id);
|
||||
}
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
tabsHandleChange = (value) => {
|
||||
this.setState({
|
||||
slideIndex: value,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
handleChange = (tabSelected) => {
|
||||
this.setState({
|
||||
tabSelected: tabSelected,
|
||||
});
|
||||
// this.props.history.push(tabSelected);
|
||||
};
|
||||
|
||||
handleCloseModal = () => {
|
||||
this.setState({
|
||||
openModal: false
|
||||
})
|
||||
};
|
||||
|
||||
handleOpenModal = () => {
|
||||
this.setState({
|
||||
openModal: true
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const customer = {
|
||||
name: 'Ridwan Abadi',
|
||||
identity_number: '98261536156313561',
|
||||
email: 'welove6215@einrot.com',
|
||||
address: 'Jalan Pramuka No. 81, Marga Jaya, Bekasi Selatan, Marga Jaya, Bekasi Sel., Kota Bks, Jawa Barat 17141',
|
||||
handphone: '081190876',
|
||||
phone: '0',
|
||||
place_birth: 'Jakarta',
|
||||
birth_date: moment().format('DD MMM YYYY'),
|
||||
gender: 'Male',
|
||||
tax_id: '98261536156313561',
|
||||
martial_status: 'Married'
|
||||
}
|
||||
|
||||
const order = {
|
||||
id: '467d6b50-ade0-4dd0-98ca-35cd083e16e0',
|
||||
order_id: 'book_461a1df5',
|
||||
package: 'The Exoticsm Of Minang',
|
||||
description: 'Feel the joy of wonderful world of exotic, culture, and outstanding view that will amaze you to the bone. Enjoy your holiday in very nice and peaceful place to clear your mind. With great hotel and profesional tour guide, we ensure you that you will have a unforgetable memories and happiness.\n',
|
||||
registered: moment(),
|
||||
detail_package: [
|
||||
{
|
||||
name: 'Destination',
|
||||
value: 'Bukittinggi, Minangkabau'
|
||||
},
|
||||
{
|
||||
name: 'Transport',
|
||||
value: 'Custom'
|
||||
},
|
||||
{
|
||||
name: 'Duration',
|
||||
value: '4 day 3 night'
|
||||
}
|
||||
],
|
||||
payment_type: 'Instalment',
|
||||
status: 'active'
|
||||
}
|
||||
|
||||
const totalPaid = get(this.order.selectedOrder, 'payments', [])
|
||||
.map(pay => pay.amount)
|
||||
.reduce((total, v) => total.add(v), new DC(0));
|
||||
|
||||
const priceAfterDisc = get(this.order.selectedOrder, 'price_after_discount', 0);
|
||||
const disc = new DC(get(this.order.selectedOrder, 'price') || 0).minus(priceAfterDisc || 0);
|
||||
|
||||
const amountDue = new DC(priceAfterDisc || 0).minus(totalPaid);
|
||||
|
||||
const actionsModals = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleCloseModal}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Ok"
|
||||
primary={true}
|
||||
onClick={() => {
|
||||
this.order.payAirlineTicket().then((airlineTicket) => {
|
||||
this.order.setOrderStatus('ticketed');
|
||||
this.globalUI.openSnackbar('Payment success');
|
||||
});
|
||||
}}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="customerDetail containerMiddle animated fadeIn">
|
||||
<Dialog
|
||||
title="Are you sure that all data is correct?"
|
||||
actions={actionsModals}
|
||||
modal={true}
|
||||
open={this.state.openModal}
|
||||
>
|
||||
You will be charged
|
||||
</Dialog>
|
||||
|
||||
<div style={{marginBottom: '10px', marginLeft: '-15px'}}>
|
||||
<FlatButton
|
||||
className="headerMenu"
|
||||
inkBarStyle={{background: 'transparent'}}
|
||||
hoverColor="#f1f5f9"
|
||||
style={{background: '#ffffff00'}}
|
||||
onClick={() => this.props.history.goBack()}
|
||||
label="Back"
|
||||
primary={true}
|
||||
icon={<NavigationArrowBack />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card className="row">
|
||||
|
||||
<div className="flexSpaceBetween" style={{padding: 16}}>
|
||||
<div className="">
|
||||
<CardTitle style={{padding: 0, fontSize: 22}}
|
||||
titleStyle={{fontSize: 22}}
|
||||
title="Airlines Order Form"
|
||||
/>
|
||||
<div className="listCustDetail">
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">PNR ID</p>
|
||||
<p className="listHeaderCustomerDetailItemValue"><code>{this.order.orderAirlineDetail.pnrid}</code></p>
|
||||
</div>
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">Booking Code</p>
|
||||
<p className="listHeaderCustomerDetailItemValue">{this.order.orderAirlineDetail.retrieve.bookingcode}</p>
|
||||
</div>
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">Status</p>
|
||||
<p className="listHeaderCustomerDetailItemValue">{this.order.orderAirlineDetail.retrieve.status}</p>
|
||||
</div>
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">Time Limit</p>
|
||||
<p className="listHeaderCustomerDetailItemValue">{this.order.orderAirlineDetail.retrieve.timelimit}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ToolbarGroup>
|
||||
<RaisedButton icon={<AddIcon/>} label="Pay" primary={true}
|
||||
onClick={() => this.handleOpenModal()}/>
|
||||
</ToolbarGroup>
|
||||
</div>
|
||||
<Divider/>
|
||||
|
||||
<CardHeader actAsExpander={true}
|
||||
showExpandableButton={false} style={{paddingBottom: 0}}
|
||||
subtitle={<a style={{fontSize: 12}}>PASSENGER INFORMATION</a>}/>
|
||||
<div style={{marginTop: 18}}>
|
||||
<Table selectable={false} className="TableOrder">
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>No. </TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Title</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Name</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Ticket No</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Date of Birth</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
{this.order.orderAirlineDetail.retrieve.pax.map(pax => {
|
||||
return (<TableRow>
|
||||
<TableRowColumn>{pax.paxno}</TableRowColumn>
|
||||
<TableRowColumn>{pax.title}</TableRowColumn>
|
||||
<TableRowColumn>{pax.name}</TableRowColumn>
|
||||
<TableRowColumn>{pax.ticketno}</TableRowColumn>
|
||||
<TableRowColumn>{pax.dob}</TableRowColumn>
|
||||
</TableRow>)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Divider/>
|
||||
</div>
|
||||
|
||||
<Divider/>
|
||||
|
||||
<CardHeader actAsExpander={true}
|
||||
showExpandableButton={false} style={{paddingBottom: 0}}
|
||||
subtitle={<a style={{fontSize: 12}}>PAX CONTACT INFORMATION</a>}/>
|
||||
<div style={{marginTop: 18}}>
|
||||
<Table selectable={false} className="TableOrder">
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>First Name</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Last Name</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Phone 1</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Phone 2</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
<TableRow>
|
||||
<TableRowColumn>{this.order.orderAirlineDetail.retrieve.paxcontact.firstname}</TableRowColumn>
|
||||
<TableRowColumn>{this.order.orderAirlineDetail.retrieve.paxcontact.lastname}</TableRowColumn>
|
||||
<TableRowColumn>{this.order.orderAirlineDetail.retrieve.paxcontact.phone1}</TableRowColumn>
|
||||
<TableRowColumn>{this.order.orderAirlineDetail.retrieve.paxcontact.phone2}</TableRowColumn>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Divider/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
171
src/common/pages/CustomerDetail/Wallet/index.js
Normal file
171
src/common/pages/CustomerDetail/Wallet/index.js
Normal file
@@ -0,0 +1,171 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
AutoComplete,
|
||||
CardText,
|
||||
FlatButton,
|
||||
Divider,
|
||||
Tabs, Tab,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
DatePicker,
|
||||
FontIcon,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
FloatingActionButton,
|
||||
ToolbarSeparator,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
RadioButton,
|
||||
TextField,
|
||||
Paper,
|
||||
RadioButtonGroup
|
||||
} from 'material-ui';
|
||||
import {LINKS} from "../../../routes";
|
||||
import {Link} from 'react-router-dom';
|
||||
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
import SearchIcon from 'material-ui/svg-icons/action/search';
|
||||
import AddIcon from 'material-ui/svg-icons/content/add';
|
||||
|
||||
|
||||
import '../style.scss';
|
||||
import {appConfig} from "../../../config/app";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class WalletCustomer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
searchText: '',
|
||||
slideIndex: 0
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!');
|
||||
|
||||
}
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
tabsHandleChange = (value) => {
|
||||
this.setState({
|
||||
slideIndex: value,
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
const styles = {
|
||||
|
||||
radioButton: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
|
||||
const colors = [
|
||||
'Jakarta - Soekarno - Hatta (CGK)',
|
||||
'Bali',
|
||||
'Surabaya',
|
||||
'Yogyakarta',
|
||||
'Aceh',
|
||||
'Kalimantan',
|
||||
'Medan',
|
||||
'Papua',
|
||||
];
|
||||
|
||||
const items = [
|
||||
<MenuItem key={1} value={1} primaryText="All Maskapai"/>,
|
||||
<MenuItem key={2} value={2} primaryText="Air Asia"/>,
|
||||
<MenuItem key={3} value={3} primaryText="Weeknights"/>,
|
||||
<MenuItem key={4} value={4} primaryText="Weekends"/>,
|
||||
<MenuItem key={5} value={5} primaryText="Weekly"/>,
|
||||
];
|
||||
|
||||
const count = [
|
||||
<MenuItem key={1} value={1} primaryText="1"/>,
|
||||
<MenuItem key={2} value={2} primaryText="2"/>,
|
||||
<MenuItem key={3} value={3} primaryText="3"/>,
|
||||
<MenuItem key={4} value={4} primaryText="4"/>,
|
||||
<MenuItem key={5} value={5} primaryText="5"/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<Card>
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
||||
<TextField
|
||||
hintText="Search Transaction"
|
||||
style={{fontSize: 14}}
|
||||
hintStyle={{fontSize: 14}}
|
||||
underlineShow={false}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div>
|
||||
<Table selectable={false}>
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Id</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Date</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Tyoe</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Status</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Amount</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
<TableRow>
|
||||
<TableRowColumn><Link to={`${LINKS.CUSTOMER}/1827381/wallet/1827381`}
|
||||
key={1827381}>#1827381</Link></TableRowColumn>
|
||||
<TableRowColumn>12/02/2017 20:10:30</TableRowColumn>
|
||||
<TableRowColumn>Package Down Payment</TableRowColumn>
|
||||
<TableRowColumn style={{color: "green"}}>Approved</TableRowColumn>
|
||||
<TableRowColumn>3.000.000</TableRowColumn>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
374
src/common/pages/CustomerDetail/WalletDetail/index.js
Normal file
374
src/common/pages/CustomerDetail/WalletDetail/index.js
Normal file
@@ -0,0 +1,374 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
AutoComplete,
|
||||
CardText,
|
||||
FlatButton,
|
||||
Divider,
|
||||
Tabs, Tab,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
DatePicker,
|
||||
FontIcon,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
FloatingActionButton,
|
||||
ToolbarSeparator,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
RadioButton,
|
||||
TextField,
|
||||
Paper,
|
||||
RadioButtonGroup
|
||||
} from 'material-ui';
|
||||
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
import SearchIcon from 'material-ui/svg-icons/action/search';
|
||||
import AddIcon from 'material-ui/svg-icons/content/add';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
import NavigationCancel from 'material-ui/svg-icons/navigation/cancel';
|
||||
import CommunicationNoSim from 'material-ui/svg-icons/communication/no-sim';
|
||||
|
||||
import '../style.scss';
|
||||
import {appConfig} from "../../../config/app";
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import {LINKS} from "../../../routes";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class WalletCustomerDetail extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
searchText: '',
|
||||
slideIndex: 0
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log('Profile loaded!');
|
||||
|
||||
}
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
tabsHandleChange = (value) => {
|
||||
this.setState({
|
||||
slideIndex: value,
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
const styles = {
|
||||
|
||||
radioButton: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
|
||||
const colors = [
|
||||
'Jakarta - Soekarno - Hatta (CGK)',
|
||||
'Bali',
|
||||
'Surabaya',
|
||||
'Yogyakarta',
|
||||
'Aceh',
|
||||
'Kalimantan',
|
||||
'Medan',
|
||||
'Papua',
|
||||
];
|
||||
|
||||
const items = [
|
||||
<MenuItem key={1} value={1} primaryText="All Maskapai"/>,
|
||||
<MenuItem key={2} value={2} primaryText="Air Asia"/>,
|
||||
<MenuItem key={3} value={3} primaryText="Weeknights"/>,
|
||||
<MenuItem key={4} value={4} primaryText="Weekends"/>,
|
||||
<MenuItem key={5} value={5} primaryText="Weekly"/>,
|
||||
];
|
||||
|
||||
const count = [
|
||||
<MenuItem key={1} value={1} primaryText="1"/>,
|
||||
<MenuItem key={2} value={2} primaryText="2"/>,
|
||||
<MenuItem key={3} value={3} primaryText="3"/>,
|
||||
<MenuItem key={4} value={4} primaryText="4"/>,
|
||||
<MenuItem key={5} value={5} primaryText="5"/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="customerDetail containerMiddle animated fadeIn">
|
||||
<div style={{marginBottom: '10px', marginLeft: '-15px'}}>
|
||||
<FlatButton
|
||||
className="headerMenu"
|
||||
inkBarStyle={{background: 'transparent'}}
|
||||
hoverColor="#f1f5f9"
|
||||
style={{background: '#ffffff00'}}
|
||||
onClick={() => this.props.history.goBack()}
|
||||
label="Back"
|
||||
primary={true}
|
||||
icon={<NavigationArrowBack/>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card className="row">
|
||||
|
||||
<div className="flexSpaceBetween" style={{padding: 16}}>
|
||||
<div className="">
|
||||
<CardTitle style={{padding: 0, fontSize: 22}}
|
||||
titleStyle={{fontSize: 22}}
|
||||
title="Transaction #1827381"
|
||||
/>
|
||||
<div className="listCustDetail">
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">Type</p>
|
||||
<p className="listHeaderCustomerDetailItemValue"><code>Package Down Payment</code></p>
|
||||
</div>
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">Date</p>
|
||||
<p className="listHeaderCustomerDetailItemValue">10 October 2017</p>
|
||||
</div>
|
||||
<div className="listHeaderCustDetailItem flex">
|
||||
<p className="listHeaderCustomerDetailItemKey">To</p>
|
||||
<p className="listHeaderCustomerDetailItemValue">Agent #6767567</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ToolbarGroup>
|
||||
<IconButton tooltip="Cancel">
|
||||
<NavigationCancel />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Void">
|
||||
<CommunicationNoSim />
|
||||
</IconButton>
|
||||
</ToolbarGroup>
|
||||
</div>
|
||||
<Divider/>
|
||||
{/*<CardHeader actAsExpander={true}*/}
|
||||
{/*showExpandableButton={false} style={{paddingBottom: 0}}*/}
|
||||
{/*subtitle={<a style={{fontSize: 12}}>CUSTOMER INFORMATION</a>}/>*/}
|
||||
{/*<CardText expandable={true} style={{paddingBottom:0}}>*/}
|
||||
{/*<div className="row no-margin">*/}
|
||||
{/*<div className="col l6">*/}
|
||||
{/*<div className="listCustDetail">*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Name</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Identity Number</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Email</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Address</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Phone</p>*/}
|
||||
{/*<p*/}
|
||||
{/*className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Handphone</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*</div>*/}
|
||||
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<div className="col l6">*/}
|
||||
{/*<div className="listCustDetail">*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Place & Birth Date</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue">, </p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Gender</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Tax Id</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Martial Status</p>*/}
|
||||
{/*<p className="listCustomerDetailItemValue"></p>*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*</div>*/}
|
||||
|
||||
{/*</div>*/}
|
||||
{/*</CardText>*/}
|
||||
|
||||
|
||||
<div style={{marginTop: 0}}>
|
||||
<Table selectable={false}>
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Description</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Qty</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Price</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Discount</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Amount</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
|
||||
<TableRow>
|
||||
<TableRowColumn>Package #92839 Payment</TableRowColumn>
|
||||
<TableRowColumn>1</TableRowColumn>
|
||||
<TableRowColumn>2.000.000</TableRowColumn>
|
||||
<TableRowColumn>500.000</TableRowColumn>
|
||||
<TableRowColumn>1.500.000</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>Package #92839 Payment</TableRowColumn>
|
||||
<TableRowColumn>1</TableRowColumn>
|
||||
<TableRowColumn>2.000.000</TableRowColumn>
|
||||
<TableRowColumn>500.000</TableRowColumn>
|
||||
<TableRowColumn>1.500.000</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn></TableRowColumn>
|
||||
<TableRowColumn></TableRowColumn>
|
||||
<TableRowColumn></TableRowColumn>
|
||||
<TableRowColumn><b>Total</b></TableRowColumn>
|
||||
<TableRowColumn><b>3.000.000</b></TableRowColumn>
|
||||
</TableRow>
|
||||
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn><p style={{margin:'2px 0', fontSize:10}}>Detail: <Link to={LINKS.SERVICE} target="_blank">View details</Link></p>*/}
|
||||
{/*{order.detail_package.map((deta) => {*/}
|
||||
{/*return (*/}
|
||||
{/*<p key={deta.name}>{deta.name} - {deta.value}</p>*/}
|
||||
{/*)*/}
|
||||
{/*})}*/}
|
||||
|
||||
{/*</TableRowColumn>*/}
|
||||
{/*<TableRowColumn></TableRowColumn>*/}
|
||||
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn colSpan={2} ></TableRowColumn>*/}
|
||||
{/*<TableRowColumn className="align-right" >Subtotal</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn>Discount</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>0.00</TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn>Total (IDR)</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn>Total Paid (IDR)</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>0.00</TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn>Amount Due (IDR)</TableRowColumn>*/}
|
||||
{/*<TableRowColumn>Rp. 19.000.000.00</TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<Divider/>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
{/*<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>*/}
|
||||
{/*<ToolbarGroup>*/}
|
||||
{/*<ToolbarTitle actAsExpander={true}*/}
|
||||
{/*showExpandableButton={false} style={{fontSize: 14, fontWeight: 500, color: '#32325d', textTransform: 'capitalize'}}*/}
|
||||
{/*text={'Payments'}/>*/}
|
||||
{/*</ToolbarGroup>*/}
|
||||
|
||||
{/*</Toolbar>*/}
|
||||
|
||||
<CardHeader actAsExpander={true}
|
||||
showExpandableButton={false} style={{paddingBottom: 16}}
|
||||
subtitle={<a style={{fontSize: 12, paddingLeft: 10}}>Transaction History</a>}/>
|
||||
<Divider/>
|
||||
|
||||
<CardText className="no-padding" expandable={true}>
|
||||
<Table selectable={false}>
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Date</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Description</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Amount</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto'}}>Status</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
<TableRow>
|
||||
<TableRowColumn>10/02/2017 22:30:10</TableRowColumn>
|
||||
<TableRowColumn>Awaiting Approval</TableRowColumn>
|
||||
<TableRowColumn>Rp. 3.000.000.00</TableRowColumn>
|
||||
<TableRowColumn>Approved</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableRowColumn>10/02/2017 20:30:10</TableRowColumn>
|
||||
<TableRowColumn>Awaiting Approval</TableRowColumn>
|
||||
<TableRowColumn>Rp. 3.000.000.00</TableRowColumn>
|
||||
<TableRowColumn>Pending</TableRowColumn>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardText>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
88
src/common/pages/CustomerDetail/index.js
Normal file
88
src/common/pages/CustomerDetail/index.js
Normal file
@@ -0,0 +1,88 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {FlatButton, Tab, Tabs} from "material-ui";
|
||||
import GeneralInformation from "./GeneralInformation/index";
|
||||
import CustomerOrder from "./Order/index";
|
||||
import WalletCustomer from "./Wallet/index";
|
||||
import {
|
||||
Card,
|
||||
Divider
|
||||
} from 'material-ui';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../routes";
|
||||
import './style.scss'
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CustomerDetail extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
tabSelected: 'gi',
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.customer = props.appstate.customer;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log(this.props);
|
||||
this.customer.selectedCustomer = {
|
||||
id : this.props.match.params.id
|
||||
}
|
||||
this.customer.getDetail(this.props.match.params.id);
|
||||
}
|
||||
|
||||
handleChange = (tabSelected) => {
|
||||
this.setState({
|
||||
tabSelected: tabSelected,
|
||||
});
|
||||
// this.props.history.push(tabSelected);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="customerDetail containerMiddle animated fadeIn">
|
||||
<div style={{marginBottom: '10px', marginLeft: '-15px'}}>
|
||||
<FlatButton
|
||||
className="headerMenu"
|
||||
hoverColor="#f1f5f9"
|
||||
style={{background: '#ffffff00'}}
|
||||
onClick={() => this.props.history.goBack()}
|
||||
label="Back"
|
||||
primary={true}
|
||||
icon={<NavigationArrowBack />}
|
||||
/>
|
||||
{/*<h3 className="headerMenu"><Link to={LINKS.CUSTOMER}>Customers</Link></h3>*/}
|
||||
</div>
|
||||
|
||||
<Divider style={{marginBottom: 20, marginTop: 15}} />
|
||||
<div className="row">
|
||||
<Tabs
|
||||
value={this.state.tabSelected}
|
||||
onChange={this.handleChange}
|
||||
inkBarStyle={{background: 'transparent'}}
|
||||
className="tabsAkun"
|
||||
style={{background: '#ffffff00'}}>
|
||||
<Tab
|
||||
label="General"
|
||||
value="gi"
|
||||
className={(this.state.tabSelected === 'gi') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>
|
||||
{this.state.tabSelected === 'gi' && <GeneralInformation/>}
|
||||
</Tab>
|
||||
<Tab label="Order" value="order"
|
||||
className={(this.state.tabSelected === 'order') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>
|
||||
{(this.state.tabSelected === 'order' && <CustomerOrder history={this.props.history}/>)}
|
||||
</Tab>
|
||||
<Tab label="Wallet" value="wallet"
|
||||
className={(this.state.tabSelected === 'wallet') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>
|
||||
{(this.state.tabSelected === 'wallet') && <WalletCustomer/>}
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
50
src/common/pages/CustomerDetail/style.scss
Normal file
50
src/common/pages/CustomerDetail/style.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
.customerDetail {
|
||||
margin-top: 35px;
|
||||
.listCustomerDetailItemKey {
|
||||
flex: 0 0 180px;
|
||||
color: #6b7c93;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
padding: 2px 0 2px 0;
|
||||
}
|
||||
.listCustomerDetailItemValue {
|
||||
flex: 1 1 auto;
|
||||
font-size: 12px;
|
||||
color: #32325d;
|
||||
line-height: 1.6;
|
||||
padding: 2px 0 2px 0;
|
||||
font-weight: 300;
|
||||
|
||||
}
|
||||
|
||||
.listCustDetailItem code {
|
||||
color: #32325d;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
.listHeaderCustomerDetailItemKey {
|
||||
flex: 0 0 180px;
|
||||
color: #6b7c93;
|
||||
line-height: 1.6;
|
||||
font-size: 12px;
|
||||
}
|
||||
.listHeaderCustomerDetailItemValue {
|
||||
flex: 0 0 180px;
|
||||
font-size: 12px;
|
||||
color: #32325d;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
|
||||
}
|
||||
|
||||
.listHeaderCustDetailItem code {
|
||||
color: #32325d;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user