Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

checkout page

Browse Source
This commit is contained in:
enggar_ganteng
2019-01-03 18:44:27 +07:00
parent f143af983b
commit e7012b3382
4 changed files with 122 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/pages/App/routes.js
View File

@@ -12,6 +12,7 @@ import WalletComponent from '../Wallet';
import ItemsComponent from '../Items/index';
import VouchersComponent from '../Vouchers/index';
import VerifyVouchers from '../Vouchers/Verify';
import CheckoutVouchers from '../Vouchers/Checkout';
import FormItems from "../Items/FormItems/FormItems";
import FormItemAdmin from "../Items/FormItems/FormItemAdmin";
import FormPromotion from "../Items/FormItems/FormPromotion";
@@ -85,6 +86,7 @@ export default class ComponentName extends React.Component {
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
<Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
<Route exact component={VerifyVouchers} path={LINKS.VERIFY_VOUCHERS}/>
<Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
<Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
<Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
<Route exact component={UploadItems} path={LINKS.FORM_UPLOAD}/>

114
src/common/pages/Vouchers/Checkout/index.js
View File

@@ -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>
)
}
}

37
src/common/pages/Vouchers/Verify/index.js
View File

@@ -13,6 +13,7 @@ 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';
import {LINKS} from "../../../routes";
@inject('appstate')
@observer
@@ -22,9 +23,6 @@ export default class VerifyVouchers extends React.Component {
this.props = props;
this.state = {
value: 1,
valueMinimal: 0,
valueMaximal: 0,
changeSearch:false,
};
this.defaultState = Object.assign({}, this.state);
this.http = props.appstate.http;
@@ -36,38 +34,10 @@ export default class VerifyVouchers extends React.Component {
}
handleChangeMinimal = (valueMinimal) => {
this.setState({ valueMinimal });
};
handleChangeMaximal = (valueMaximal) => {
this.setState({ valueMaximal });
};
handleBlur = () => {
console.log('blur');
}
handleFocus = () => {
console.log('focus');
}
handleChangeSearch = () => {
this.setState({
changeSearch : true
})
}
handleChangeSearchFalse = () => {
this.setState({
changeSearch : false
})
}
render() {
const { valueMinimal, valueMaximal } = this.state;
return (
<div className="wallet containerMiddle">
@@ -109,7 +79,10 @@ export default class VerifyVouchers extends React.Component {
<div className="row">
<div style={{display:'flex',justifyContent:'flex-end'}}>
<Button type="danger">Batal</Button>
<Button type="primary" style={{marginLeft:10}}>OK</Button>
<Button type="primary" style={{marginLeft:10}} onClick={() => {
this.props.history.push(LINKS.CHECKOUT_VOUCHERS);
console.log('checkout');
}}>OK</Button>
</div>
</div>
</Card>