241 lines
10 KiB
JavaScript
241 lines
10 KiB
JavaScript
import React from 'react';
|
|
import {inject, observer} from 'mobx-react';
|
|
import {
|
|
FlatButton,
|
|
Divider as DividerMaterialUI
|
|
} from 'material-ui';
|
|
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar, Collapse, notification, Divider } 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";
|
|
import {APP_TYPE} from "../../../config/app";
|
|
import get from "lodash.get";
|
|
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
|
|
|
|
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;
|
|
this.vouchersStore = props.appstate.vouchers;
|
|
}
|
|
|
|
componentDidMount() {
|
|
console.log(this.props.vouchersStore, 'this.props.vouchersStore this.props.vouchersStore this.props.vouchersStore')
|
|
}
|
|
|
|
render() {
|
|
const openNotificationWithIcon = (type) => {
|
|
notification[type]({
|
|
message: 'Berhasil',
|
|
description: 'Selamat anda telah mendapatkan vouchers sebesar KFC Rp. 50,000',
|
|
placement:'topRight',
|
|
duration: 5,
|
|
});
|
|
};
|
|
|
|
const price = (+this.props.vouchersStore.skuPrice).toFixed(0);
|
|
const qty = 1;
|
|
const total = price * qty;
|
|
|
|
// let applicationName = 'Giift';
|
|
// let applicationLogo = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
|
|
// if(APP_TYPE === 'btn') {
|
|
// applicationName = 'BTN';
|
|
// applicationLogo = 'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png';
|
|
// }
|
|
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>
|
|
<div className="upper-card">
|
|
<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'}}>
|
|
{price} Points
|
|
</h3>
|
|
<h3 style={{color:'#6772e5'}}>
|
|
Detail Tagihan
|
|
</h3>
|
|
</div>
|
|
} key="1">
|
|
<Row>
|
|
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
|
<p>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</p>
|
|
<p>{price} Points</p>
|
|
</div>
|
|
</Row>
|
|
<Row>
|
|
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
|
<p>{qty} x {price} Points</p>
|
|
<p>{total} Points</p>
|
|
</div>
|
|
</Row>
|
|
<Divider dashed={true} />
|
|
<Row>
|
|
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
|
<p>Tagihan</p>
|
|
<p>{total} Points</p>
|
|
</div>
|
|
</Row>
|
|
</Panel>
|
|
</Collapse>
|
|
</div>
|
|
<div className="bottom-card">
|
|
<Card title={<div style={{display:'flex',justifyContent:'space-between', alignItems: 'center'}}>
|
|
<div className={'item-container'}>
|
|
<h3 className={'item-name'}>
|
|
{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}
|
|
</h3>
|
|
<h3 className={'item-points'}>
|
|
BTN Points Payment
|
|
</h3>
|
|
</div>
|
|
<img className={'image-logo'} src={image} />
|
|
</div>}>
|
|
<div className="row">
|
|
<Alert message="Pastikan data anda sudah terverifikasi dan vouchers yang anda pilih sudah benar sebelum melakukan konfirmasi transaksi ini" type="warning" />
|
|
</div>
|
|
<div>
|
|
<div>
|
|
{ReactHtmlParser(this.props.vouchersStore.dataItems.description)}
|
|
{/*<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>*/}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="row">
|
|
{this.props.button()}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="wallet containerMiddle">
|
|
<div className="row">
|
|
<div className="col s0 m2 l2" />
|
|
<div className="col s12 m8 l8">
|
|
<div className="">
|
|
<FlatButton
|
|
className="headerMenu"
|
|
hoverColor="#f1f5f9"
|
|
style={{ background: '#ffffff00' }}
|
|
onClick={() => this.props.history.goBack()}
|
|
label="Back"
|
|
primary={true}
|
|
icon={<NavigationArrowBack />}
|
|
/>
|
|
<DividerMaterialUI style={{ marginBottom:10,marginTop:10 }} />
|
|
</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'}}>
|
|
{price} Points
|
|
</h3>
|
|
<h3 style={{color:'#6772e5'}}>
|
|
Detail Tagihan
|
|
</h3>
|
|
</div>
|
|
} key="1">
|
|
<Row>
|
|
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
|
<p>{this.vouchersStore.dataItems.name} - {this.vouchersStore.skuName}</p>
|
|
<p>{price} Points</p>
|
|
</div>
|
|
</Row>
|
|
<Row>
|
|
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
|
<p>{qty} x {price} Points</p>
|
|
<p>{total} Points</p>
|
|
</div>
|
|
</Row>
|
|
<Divider dashed={true} />
|
|
<Row>
|
|
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
|
<p>Tagihan</p>
|
|
<p>{total} 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 {applicationName}
|
|
</h3>
|
|
</div>
|
|
<div>
|
|
<img style={{width:120, height:40}} src={applicationLogo} />
|
|
</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.globalUI.hideDialogLoading();
|
|
this.props.history.push(LINKS.TRANSACTION)
|
|
openNotificationWithIcon('success')
|
|
|
|
return;
|
|
this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
|
|
.then(res => {
|
|
this.globalUI.hideDialogLoading();
|
|
this.props.history.push(LINKS.TRANSACTION)
|
|
openNotificationWithIcon('success')
|
|
})
|
|
.catch(err => {
|
|
this.globalUI.openSnackbar(err.message);
|
|
console.error(err, 'ini errornya');
|
|
});
|
|
}}
|
|
>
|
|
Pakai Points
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="col s0 m2 l2" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|