payment vouchers page
This commit is contained in:
parent
fc901caca7
commit
e00438a8de
|
|
@ -13,6 +13,7 @@ import ItemsComponent from '../Items/index';
|
|||
import VouchersComponent from '../Vouchers/index';
|
||||
import VerifyVouchers from '../Vouchers/Verify';
|
||||
import CheckoutVouchers from '../Vouchers/Checkout';
|
||||
import PaymentVouchers from '../Vouchers/Payment';
|
||||
import FormItems from "../Items/FormItems/FormItems";
|
||||
import FormItemAdmin from "../Items/FormItems/FormItemAdmin";
|
||||
import FormPromotion from "../Items/FormItems/FormPromotion";
|
||||
|
|
@ -87,6 +88,7 @@ export default class ComponentName extends React.Component {
|
|||
<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={PaymentVouchers} path={LINKS.PAYMENT_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}/>
|
||||
|
|
|
|||
|
|
@ -516,7 +516,7 @@ export default class All extends React.Component {
|
|||
|
||||
<InfiniteScroll pageStart={0} loadMore={this.loadMore} hasMore={true}>
|
||||
<Row className="row rowItem" gutter={8}>
|
||||
{(this.userData.role === 'store' && this.userData.entity_permission.can_store_change_item) ?
|
||||
{/* {(this.userData.role === 'store' && this.userData.entity_permission.can_store_change_item) ?
|
||||
<Col className="gutter-row col animated fadeIn" span={4}>
|
||||
<Link to={`${LINKS.FORM_ITEMS}`} style={{color: '#424770'}}>
|
||||
<div className="flex add-new"
|
||||
|
|
@ -552,7 +552,7 @@ export default class All extends React.Component {
|
|||
</div>
|
||||
</Link>
|
||||
</Col> : ""
|
||||
}
|
||||
} */}
|
||||
|
||||
{data.map(item => {
|
||||
return (<Col key={item.id} className="gutter-row col" span={6} style={{marginBottom: 20}}>
|
||||
|
|
|
|||
|
|
@ -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
132
src/common/pages/Vouchers/Payment/index.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -113,6 +113,7 @@ export const LINKS = {
|
|||
VOUCHERS: '/app/vouchers',
|
||||
VERIFY_VOUCHERS: '/app/vouchers/verify',
|
||||
CHECKOUT_VOUCHERS: '/app/vouchers/checkout',
|
||||
PAYMENT_VOUCHERS: '/app/vouchers/payment',
|
||||
CART_DETAIL: '/app/cart',
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user