checkout page
This commit is contained in:
@@ -0,0 +1,114 @@
|
||||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {
|
||||
FlatButton
|
||||
} from 'material-ui';
|
||||
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker, Alert, Input ,Avatar} from 'antd';
|
||||
import {startCase} from 'lodash';
|
||||
import LoadingDialog from "../../LoadingDialog";
|
||||
import Loader from 'react-loader-advanced';
|
||||
// import './style.scss';
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import EmptyComponent from '../../EmptyComponent';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
import Search from 'material-ui/svg-icons/action/search';
|
||||
import Timer from 'react-compound-timer';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class CheckoutVouchers extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className="wallet containerMiddle">
|
||||
<div className="row">
|
||||
<div className="col s0 m2 l2" />
|
||||
<div className="col s12 m8 l8">
|
||||
<div className="row">
|
||||
<FlatButton
|
||||
className="headerMenu"
|
||||
hoverColor="#f1f5f9"
|
||||
style={{ background: '#ffffff00' }}
|
||||
onClick={() => this.props.history.goBack()}
|
||||
label="Back"
|
||||
primary={true}
|
||||
icon={<NavigationArrowBack />}
|
||||
/>
|
||||
<Divider style={{ marginBottom: 20, marginTop: 20, marginLeft:20 }} />
|
||||
<Card title={<div style={{display:'flex',justifyContent:'center'}}>
|
||||
<h2 style={{color:'grey'}}>
|
||||
Detail Pembelian
|
||||
</h2>
|
||||
</div>}>
|
||||
<div className="row">
|
||||
<div className="col s4 m4 l4">
|
||||
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
|
||||
<Avatar size={100} src="https://png.pngtree.com/element_origin_min_pic/17/09/17/d78f6e704459b24bcdd0f32943d29145.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s4 m8 l8">
|
||||
<div style={{alignItems:'center'}}>
|
||||
<div className="row">
|
||||
<div className="col s12 m6 6">
|
||||
<h3>Jenis Layanan</h3>
|
||||
</div>
|
||||
<div className="col s12 m6 6">
|
||||
<h3 style={{color:'grey'}}> : KFC Rp.50.000,00</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col s12 m6 6">
|
||||
<h3>Point</h3>
|
||||
</div>
|
||||
<div className="col s12 m6 6">
|
||||
<h3 style={{color:'grey'}}> : 150,000</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="row">
|
||||
<Card >
|
||||
<div className="row">
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<h3 style={{color:'grey'}}>Poin</h3>
|
||||
<h3 style={{color:'grey'}}>150,000</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="row">
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<h3>Total Pembayaran Poin</h3>
|
||||
<h3 style={{color:'#FF6F00'}}>150,000</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<Button type="primary" block>Lanjut</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s0 m2 l2" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user