ini lah vouchers sesungguhnya
This commit is contained in:
parent
6572d4609e
commit
21c56ad40f
|
|
@ -28,10 +28,14 @@ export default class CheckoutVouchers extends React.Component {
|
|||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.vouchersStore = props.appstate.vouchers;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
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() {
|
||||
|
|
@ -68,19 +72,20 @@ export default class CheckoutVouchers extends React.Component {
|
|||
</div>
|
||||
<Divider style={{marginBottom:10,marginTop:10}} />
|
||||
<div className="row" style={{marginTop:30}}>
|
||||
<div className="col s4 m4 l4">
|
||||
<div className="col s5 m5 l5">
|
||||
<div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
|
||||
<Avatar size={74} src="https://png.pngtree.com/element_origin_min_pic/17/09/17/d78f6e704459b24bcdd0f32943d29145.jpg" />
|
||||
<img className={'imageCard'} src={this.http.appendImagePath(this.vouchersStore.dataItems.images.logo)} />
|
||||
{/* <Avatar size={74} src={this.http.appendImagePath(this.vouchersStore.dataItems.images.logo)} /> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col s4 m8 l8">
|
||||
<div className="col s4 m7 l7">
|
||||
<div style={{alignItems:'center'}}>
|
||||
<Row>
|
||||
<div className="col s12 m6 6">
|
||||
<h3>Jenis Layanan :</h3>
|
||||
</div>
|
||||
<div className="col s12 m6 6">
|
||||
<h3 style={{color:''}}>KFC Rp.50.000,00</h3>
|
||||
<h3 style={{color:''}}>{this.vouchersStore.dataItems.name} {this.vouchersStore.skuName}</h3>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
|
|
@ -88,7 +93,7 @@ export default class CheckoutVouchers extends React.Component {
|
|||
<h3>Point :</h3>
|
||||
</div>
|
||||
<div className="col s12 m6 6">
|
||||
<h3 style={{color:'#FF6F00'}}>50 Points</h3>
|
||||
<h3 style={{color:'#FF6F00'}}>{this.vouchersStore.skuPrice} Points</h3>
|
||||
</div>
|
||||
</Row>
|
||||
</div>
|
||||
|
|
@ -108,7 +113,7 @@ export default class CheckoutVouchers extends React.Component {
|
|||
<div className="row">
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<h3>Total Pembayaran Point</h3>
|
||||
<h3 style={{color:'#FF6F00'}}>50 Points</h3>
|
||||
<h3 style={{color:'#FF6F00'}}>{this.vouchersStore.skuPrice} Points</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
|
|
|
|||
|
|
@ -15,11 +15,14 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
selectedOption: '0',
|
||||
hidden:'inline'
|
||||
selectedOption: '',
|
||||
hidden:'inline',
|
||||
skuName:'',
|
||||
skuPrice:'0'
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.vouchersStore = props.appstate.vouchers;
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
|
|
@ -60,7 +63,7 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
flex: 0.3
|
||||
}}>
|
||||
<img className={'imageModal'} src={image} />
|
||||
<p className={'titleModal'}>{data.name} }</p>
|
||||
<p className={'titleModal'}>{data.name}</p>
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
|
|
@ -79,33 +82,49 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
|
||||
<Select
|
||||
showSearch
|
||||
// labelInValue
|
||||
className={'optionSelectModal'}
|
||||
placeholder="Please Select your Option"
|
||||
optionFilterProp="children"
|
||||
onChange={(e) => {
|
||||
this.setState({selectedOption: e})
|
||||
onChange={(value) => {
|
||||
this.setState({selectedOption: value})
|
||||
this.setState({hidden: 'none'})
|
||||
console.log(this.state.hidden,'onChange')
|
||||
// console.log('onChange',value);
|
||||
const points = data.sku.filter(item => item.id == value);
|
||||
console.log(points[0].price,'points',points[0].name);
|
||||
this.setState({
|
||||
skuName :points[0].name,
|
||||
skuPrice : points[0].price
|
||||
})
|
||||
}
|
||||
}
|
||||
onDropdownVisibleChange={(value) => {
|
||||
this.setState({hidden: 'inline'})
|
||||
console.log(this.state.hidden,'onDropdownVisibleChange')
|
||||
}}
|
||||
>
|
||||
{data.sku.map((item, index) => {
|
||||
return <Option value={item.price}><div style={{display:'flex',justifyContent:'space-between', width:'100%'}}><span>{item.name}</span> <span style={{color:'#FF6F00', display:this.state.hidden}}><NumberFormat value={(item.price)} displayType={'text'} thousandSeparator={true}/> </span></div></Option>
|
||||
return <Option value={item.id}><div style={{display:'flex',justifyContent:'space-between', width:'100%'}}><span>{item.name}</span> <span style={{color:'#FF6F00', display:this.state.hidden}}><NumberFormat value={(item.price)} displayType={'text'} thousandSeparator={true}/> </span></div></Option>
|
||||
// return <Option value={item.id}>{item.price}</Option>
|
||||
})}
|
||||
</Select>
|
||||
|
||||
<div className={'costContainerModal'}>
|
||||
<div className={'costLeftPaneModal'}>
|
||||
<p className={'costTitleModal'}>Points</p>
|
||||
<p className={'costValueModal'}><NumberFormat value={(this.state.selectedOption)} displayType={'text'} thousandSeparator={true}/> </p>
|
||||
<p className={'costValueModal'}><NumberFormat value={(this.state.skuPrice)} displayType={'text'} thousandSeparator={true}/> </p>
|
||||
</div>
|
||||
<div className={'costRightPaneModal'}>
|
||||
<Route render={({ history}) => (
|
||||
<Button onClick={() => history.push(LINKS.VERIFY_VOUCHERS)} type="primary" size={"large"} block>Buy</Button>
|
||||
<Button onClick={() => {
|
||||
this.vouchersStore.dataItems = data;
|
||||
this.vouchersStore.skuId = this.state.selectedOption;
|
||||
this.vouchersStore.skuName = this.state.skuName;
|
||||
this.vouchersStore.skuPrice = this.state.skuPrice;
|
||||
console.log('enak',this.state);
|
||||
history.push(LINKS.VERIFY_VOUCHERS);
|
||||
}
|
||||
}
|
||||
type="primary" size={"large"} block>Buy</Button>
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export default class PaymentVouchers extends React.Component {
|
|||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.vouchersStore = props.appstate.vouchers;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -45,6 +46,10 @@ export default class PaymentVouchers extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
const price = this.vouchersStore.skuPrice;
|
||||
const qty = 1;
|
||||
const total = price * qty;
|
||||
|
||||
return (
|
||||
<div className="wallet containerMiddle">
|
||||
<div className="row">
|
||||
|
|
@ -67,7 +72,7 @@ export default class PaymentVouchers extends React.Component {
|
|||
<Panel style={{backgroundColor:'white'}} showArrow={false} header={
|
||||
<div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
|
||||
<h3 style={{color:'#FF6F00'}}>
|
||||
50 Points
|
||||
{price} Points
|
||||
</h3>
|
||||
<h3 style={{color:'#6772e5'}}>
|
||||
Detail Tagihan
|
||||
|
|
@ -76,21 +81,21 @@ export default class PaymentVouchers extends React.Component {
|
|||
} key="1">
|
||||
<Row>
|
||||
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
|
||||
<p>KFC - Rp. 50,000</p>
|
||||
<p>50 Points</p>
|
||||
<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>1 x Rp. 50 Points</p>
|
||||
<p>50 Points</p>
|
||||
<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>50 Points</p>
|
||||
<p>{total} Points</p>
|
||||
</div>
|
||||
</Row>
|
||||
</Panel>
|
||||
|
|
@ -120,8 +125,20 @@ export default class PaymentVouchers extends React.Component {
|
|||
</div>
|
||||
<div className="row">
|
||||
<Button type="primary" block onClick={() => {
|
||||
this.props.history.push(LINKS.VOUCHERS)
|
||||
openNotificationWithIcon('success')
|
||||
this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
|
||||
.then(res => {
|
||||
this.globalUI.hideDialogLoading();
|
||||
this.props.history.push(LINKS.VOUCHERS)
|
||||
openNotificationWithIcon('success')
|
||||
// this.globalUI.openSnackbar("Success Added New Store");
|
||||
// this.setState({
|
||||
// stepIndex: 0
|
||||
// })
|
||||
})
|
||||
.catch(err => {
|
||||
this.globalUI.openSnackbar(err.message);
|
||||
console.error(err, 'ini errornya');
|
||||
});
|
||||
}}>Pakai Points</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export default class VouchersComponent extends React.Component {
|
|||
// ],
|
||||
sku: [
|
||||
{
|
||||
id:'',
|
||||
name: '',
|
||||
price: ''
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,6 +7,15 @@ export default class Vouchers {
|
|||
@observable istLoading = false;
|
||||
@observable isSearching = false;
|
||||
@observable filtered = [];
|
||||
@observable skuId = {} ;
|
||||
@observable skuName = {} ;
|
||||
@observable skuPrice = {} ;
|
||||
@observable dataItems = {
|
||||
name :'',
|
||||
images : {
|
||||
logo: ''
|
||||
}
|
||||
} ;
|
||||
|
||||
constructor(context) {
|
||||
this.http = context.http;
|
||||
|
|
@ -19,7 +28,6 @@ export default class Vouchers {
|
|||
this.isLoading = true;
|
||||
return this.http.get("items")
|
||||
.then(res => {
|
||||
console.log(res.data,'res list')
|
||||
this.list = res.data;
|
||||
this.isLoading = false;
|
||||
})
|
||||
|
|
@ -44,12 +52,16 @@ export default class Vouchers {
|
|||
}
|
||||
|
||||
@action
|
||||
post(data){
|
||||
buyVoucher(data){
|
||||
console.log('data',data)
|
||||
this.isLoading = true;
|
||||
return this.http.post("stores", data)
|
||||
.then(res => {
|
||||
return this.http.post("shop/buy_voucher", {
|
||||
item_sku_id : data
|
||||
}
|
||||
).then(res => {
|
||||
this.isLoading = false;
|
||||
this.getList();
|
||||
console.log('res',res)
|
||||
return res;
|
||||
})
|
||||
.catch(err => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user