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

payment vouchers page

Browse Source
This commit is contained in:
enggar_ganteng
2019-01-04 01:29:53 +07:00
parent fc901caca7
commit e00438a8de
5 changed files with 149 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,8 +11,8 @@ import Loader from 'react-loader-advanced';
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';
import {LINKS} from "../../../routes";
import {Route} from "react-router-dom";
@inject('appstate')
@observer
@@ -52,7 +52,7 @@ export default class CheckoutVouchers extends React.Component {
/>
<Divider style={{ marginBottom: 20, marginTop: 20, marginLeft:20 }} />
<Card title={<div style={{display:'flex',justifyContent:'center'}}>
<h2 style={{color:'grey'}}>
<h2 style={{fontSize:20}}>
Detail Pembelian
</h2>
</div>}>
@@ -66,18 +66,18 @@ export default class CheckoutVouchers extends React.Component {
<div style={{alignItems:'center'}}>
<div className="row">
<div className="col s12 m6 6">
<h3>Jenis Layanan</h3>
<h3>Jenis Layanan :</h3>
</div>
<div className="col s12 m6 6">
<h3 style={{color:'grey'}}> : KFC Rp.50.000,00</h3>
<h3 style={{color:''}}>KFC Rp.50.000,00</h3>
</div>
</div>
<div className="row">
<div className="col s12 m6 6">
<h3>Point</h3>
<h3>Point :</h3>
</div>
<div className="col s12 m6 6">
<h3 style={{color:'grey'}}> : 150,000</h3>
<h3 style={{color:'#FF6F00'}}>50 Points</h3>
</div>
</div>
</div>
@@ -89,19 +89,19 @@ export default class CheckoutVouchers extends React.Component {
<Card >
<div className="row">
<div style={{display:'flex',justifyContent:'space-between'}}>
<h3 style={{color:'grey'}}>Poin</h3>
<h3 style={{color:'grey'}}>150,000</h3>
<h3 style={{color:''}}>Point</h3>
<h3 style={{color:'#FF6F00'}}>11,570 Points</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>
<h3>Total Pembayaran Point</h3>
<h3 style={{color:'#FF6F00'}}>50 Points</h3>
</div>
</div>
<div className="row">
<Button type="primary" block>Lanjut</Button>
<Button type="primary" block onClick={() => this.props.history.push(LINKS.PAYMENT_VOUCHERS)}>Lanjut</Button>
</div>
</Card>
</div>

132
src/common/pages/Vouchers/Payment/index.js Normal file
View File

@@ -0,0 +1,132 @@
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, Collapse, notification } 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 {LINKS} from "../../../routes";
const Panel = Collapse.Panel;
@inject('appstate')
@observer
export default class PaymentVouchers 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() {
const openNotificationWithIcon = (type) => {
notification[type]({
message: 'Success',
description: 'Selamat anda telah mendapatkan vouchers sebesar KFC Rp. 50,000',
placement:'topRight',
duration: 5,
});
};
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 }} />
</div>
<div className="row">
<Collapse bordered={true}>
<Panel style={{backgroundColor:'white'}} showArrow={false} header={
<div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
<h3 style={{color:'#FF6F00'}}>
50 Points
</h3>
<h3 style={{color:'#6772e5'}}>
Detail Tagihan
</h3>
</div>
} key="1">
<Row>
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
<p>KFC - Rp. 50,000</p>
<p>50 Points</p>
</div>
</Row>
<Row>
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
<p>1 x Rp. 50 Points</p>
<p>50 Points</p>
</div>
</Row>
<Divider dashed={true} />
<Row>
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
<p>Tagihan</p>
<p>50 Points</p>
</div>
</Row>
</Panel>
</Collapse>
</div>
<div className="row">
<Card title={<div style={{display:'flex',justifyContent:'space-between'}}>
<div>
<h3 style={{fontSize:20}}>
Points BTN
</h3>
</div>
<div>
<img style={{width:120, height:40}} src="http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png" />
</div>
</div>}>
<div className="row">
<Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
</div>
<div>
<ul>
<li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
<li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
</ul>
</div>
</Card>
</div>
<div className="row">
<Button type="primary" block onClick={() => {
this.props.history.push(LINKS.VOUCHERS)
openNotificationWithIcon('success')
}}>Bayar</Button>
</div>
</div>
<div className="col s0 m2 l2" />
</div>
</div>
)
}
}