135 lines
4.6 KiB
JavaScript
135 lines
4.6 KiB
JavaScript
import React from 'react';
|
|
import {inject, observer} from 'mobx-react';
|
|
import {
|
|
Divider
|
|
} from '@material-ui/core';
|
|
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar} from 'antd';
|
|
import {startCase} from 'lodash';
|
|
import './style.scss';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import get from 'lodash.get';
|
|
import MediaQuery from 'react-responsive';
|
|
|
|
const styles = theme => ({
|
|
button: {
|
|
margin: theme.spacing.unit,
|
|
},
|
|
divider: {
|
|
marginBottom: 10,
|
|
marginTop: 10,
|
|
}
|
|
});
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export 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;
|
|
this.vouchersStore = props.appstate.vouchers;
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log(this.vouchersStore)
|
|
// console.log("skuid",this.vouchersStore.skuId);
|
|
// console.log("skuName",this.vouchersStore.skuName);
|
|
// console.log("skuPrice",this.vouchersStore.skuPrice);
|
|
// console.log("data",this.vouchersStore.dataItems);
|
|
}
|
|
|
|
render() {
|
|
const {classes} = this.props;
|
|
const logoUrl = (this.props.vouchersStore.dataItems.images.main) ? get(this.vouchersStore.dataItems, 'images.main', '') : 'http://lorempixel.com/400/200';
|
|
|
|
let image = logoUrl;
|
|
|
|
if (!image.includes('http')) {
|
|
image = this.http.appendImagePath(image);
|
|
}
|
|
|
|
return (
|
|
<div className="checkout-parent">
|
|
<div className="upper-card">
|
|
<Card>
|
|
<div className="">
|
|
<div style={{display:'flex',justifyContent:'center'}}>
|
|
<h3 style={{fontSize:18}}>
|
|
Detail Pembelian
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<Divider component={"div"} className={classes.divider} />
|
|
<div className="row" style={{marginTop:30}}>
|
|
<div className="col s12 m5 l5">
|
|
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
|
|
<img className={'imageCard'} src={image} />
|
|
{/* <Avatar size={74} src={this.http.appendImagePath(this.props.vouchersStore.dataItems.images.logo)} /> */}
|
|
</div>
|
|
</div>
|
|
<div className="col s12 m7 l7">
|
|
<div className={'right-container'}>
|
|
<Row>
|
|
<div className="col s12 m4">
|
|
<h3>Jenis Layanan</h3>
|
|
</div>
|
|
<MediaQuery query="(min-device-width: 800px)">
|
|
<div className="col s1 m1">
|
|
<h3>:</h3>
|
|
</div>
|
|
</MediaQuery>
|
|
<div className="col s12 m7">
|
|
<h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
|
|
</div>
|
|
</Row>
|
|
<Row>
|
|
<div className="col s12 m4">
|
|
<h3>Point</h3>
|
|
</div>
|
|
<MediaQuery query="(min-device-width: 800px)">
|
|
<div className="col s1 m1">
|
|
<h3>:</h3>
|
|
</div>
|
|
</MediaQuery>
|
|
<div className="col s12 m7">
|
|
<h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
|
|
</div>
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="bottom-card">
|
|
<Card>
|
|
<div className="row">
|
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
|
<h3 style={{color:''}}>Point</h3>
|
|
<h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point || 0} Points</h3>
|
|
</div>
|
|
</div>
|
|
<Divider component={"div"} className={classes.divider} />
|
|
<div className="row">
|
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
|
<h3>Total Pembayaran Point</h3>
|
|
<h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="row">
|
|
{this.props.button()}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(CheckoutVouchers);
|