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

ini lah vouchers sesungguhnya

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-06 18:10:57 +07:00
parent 6572d4609e
commit 21c56ad40f
5 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,10 +28,14 @@ export default class CheckoutVouchers extends React.Component {
this.http = props.appstate.http; this.http = props.appstate.http;
this.authStore = props.appstate.auth; this.authStore = props.appstate.auth;
this.globalUI = props.appstate.globalUI; this.globalUI = props.appstate.globalUI;
this.vouchersStore = props.appstate.vouchers;
} }
componentDidMount() { 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() { render() {
@ -68,19 +72,20 @@ export default class CheckoutVouchers extends React.Component {
</div> </div>
<Divider style={{marginBottom:10,marginTop:10}} /> <Divider style={{marginBottom:10,marginTop:10}} />
<div className="row" style={{marginTop:30}}> <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'}}> <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> </div>
<div className="col s4 m8 l8"> <div className="col s4 m7 l7">
<div style={{alignItems:'center'}}> <div style={{alignItems:'center'}}>
<Row> <Row>
<div className="col s12 m6 6"> <div className="col s12 m6 6">
<h3>Jenis Layanan :</h3> <h3>Jenis Layanan :</h3>
</div> </div>
<div className="col s12 m6 6"> <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> </div>
</Row> </Row>
<Row> <Row>
@ -88,7 +93,7 @@ export default class CheckoutVouchers extends React.Component {
<h3>Point :</h3> <h3>Point :</h3>
</div> </div>
<div className="col s12 m6 6"> <div className="col s12 m6 6">
<h3 style={{color:'#FF6F00'}}>50 Points</h3> <h3 style={{color:'#FF6F00'}}>{this.vouchersStore.skuPrice} Points</h3>
</div> </div>
</Row> </Row>
</div> </div>
@ -108,7 +113,7 @@ export default class CheckoutVouchers extends React.Component {
<div className="row"> <div className="row">
<div style={{display:'flex',justifyContent:'space-between'}}> <div style={{display:'flex',justifyContent:'space-between'}}>
<h3>Total Pembayaran Point</h3> <h3>Total Pembayaran Point</h3>
<h3 style={{color:'#FF6F00'}}>50 Points</h3> <h3 style={{color:'#FF6F00'}}>{this.vouchersStore.skuPrice} Points</h3>
</div> </div>
</div> </div>
<div className="row"> <div className="row">

39
src/common/pages/Vouchers/Modal/index.js
View File

@ -15,11 +15,14 @@ export default class ModalVouchersComponent extends React.Component {
super(props); super(props);
this.props = props; this.props = props;
this.state = { this.state = {
selectedOption: '0', selectedOption: '',
hidden:'inline' hidden:'inline',
skuName:'',
skuPrice:'0'
}; };
this.defaultState = Object.assign({}, this.state); this.defaultState = Object.assign({}, this.state);
this.http = props.appstate.http; this.http = props.appstate.http;
this.vouchersStore = props.appstate.vouchers;
} }
componentDidMount() {} componentDidMount() {}
@ -60,7 +63,7 @@ export default class ModalVouchersComponent extends React.Component {
flex: 0.3 flex: 0.3
}}> }}>
<img className={'imageModal'} src={image} /> <img className={'imageModal'} src={image} />
<p className={'titleModal'}>{data.name} }</p> <p className={'titleModal'}>{data.name}</p>
</div> </div>
<div style={{ <div style={{
display: 'flex', display: 'flex',
@ -79,33 +82,49 @@ export default class ModalVouchersComponent extends React.Component {
<Select <Select
showSearch showSearch
// labelInValue
className={'optionSelectModal'} className={'optionSelectModal'}
placeholder="Please Select your Option" placeholder="Please Select your Option"
optionFilterProp="children" optionFilterProp="children"
onChange={(e) => { onChange={(value) => {
this.setState({selectedOption: e}) this.setState({selectedOption: value})
this.setState({hidden: 'none'}) 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) => { onDropdownVisibleChange={(value) => {
this.setState({hidden: 'inline'}) this.setState({hidden: 'inline'})
console.log(this.state.hidden,'onDropdownVisibleChange')
}} }}
> >
{data.sku.map((item, index) => { {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> </Select>
<div className={'costContainerModal'}> <div className={'costContainerModal'}>
<div className={'costLeftPaneModal'}> <div className={'costLeftPaneModal'}>
<p className={'costTitleModal'}>Points</p> <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>
<div className={'costRightPaneModal'}> <div className={'costRightPaneModal'}>
<Route render={({ history}) => ( <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>
</div> </div>

33
src/common/pages/Vouchers/Payment/index.js
View File

@ -29,6 +29,7 @@ export default class PaymentVouchers extends React.Component {
this.http = props.appstate.http; this.http = props.appstate.http;
this.authStore = props.appstate.auth; this.authStore = props.appstate.auth;
this.globalUI = props.appstate.globalUI; this.globalUI = props.appstate.globalUI;
this.vouchersStore = props.appstate.vouchers;
} }
componentDidMount() { 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 ( return (
<div className="wallet containerMiddle"> <div className="wallet containerMiddle">
<div className="row"> <div className="row">
@ -67,7 +72,7 @@ export default class PaymentVouchers extends React.Component {
<Panel style={{backgroundColor:'white'}} showArrow={false} header={ <Panel style={{backgroundColor:'white'}} showArrow={false} header={
<div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}> <div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
<h3 style={{color:'#FF6F00'}}> <h3 style={{color:'#FF6F00'}}>
50 Points {price} Points
</h3> </h3>
<h3 style={{color:'#6772e5'}}> <h3 style={{color:'#6772e5'}}>
Detail Tagihan Detail Tagihan
@ -76,21 +81,21 @@ export default class PaymentVouchers extends React.Component {
} key="1"> } key="1">
<Row> <Row>
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}> <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
<p>KFC - Rp. 50,000</p> <p>{this.vouchersStore.dataItems.name} - {this.vouchersStore.skuName}</p>
<p>50 Points</p> <p>{price} Points</p>
</div> </div>
</Row> </Row>
<Row> <Row>
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}> <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
<p>1 x Rp. 50 Points</p> <p>{qty} x {price} Points</p>
<p>50 Points</p> <p>{total} Points</p>
</div> </div>
</Row> </Row>
<Divider dashed={true} /> <Divider dashed={true} />
<Row> <Row>
<div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}> <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
<p>Tagihan</p> <p>Tagihan</p>
<p>50 Points</p> <p>{total} Points</p>
</div> </div>
</Row> </Row>
</Panel> </Panel>
@ -120,8 +125,20 @@ export default class PaymentVouchers extends React.Component {
</div> </div>
<div className="row"> <div className="row">
<Button type="primary" block onClick={() => { <Button type="primary" block onClick={() => {
this.props.history.push(LINKS.VOUCHERS) this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
openNotificationWithIcon('success') .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> }}>Pakai Points</Button>
</div> </div>
</div> </div>

1
src/common/pages/Vouchers/index.js
View File

@ -36,6 +36,7 @@ export default class VouchersComponent extends React.Component {
// ], // ],
sku: [ sku: [
{ {
id:'',
name: '', name: '',
price: '' price: ''
}, },

20
src/common/stores/vouchers.js
View File

@ -7,6 +7,15 @@ export default class Vouchers {
@observable istLoading = false; @observable istLoading = false;
@observable isSearching = false; @observable isSearching = false;
@observable filtered = []; @observable filtered = [];
@observable skuId = {} ;
@observable skuName = {} ;
@observable skuPrice = {} ;
@observable dataItems = {
name :'',
images : {
logo: ''
}
} ;
constructor(context) { constructor(context) {
this.http = context.http; this.http = context.http;
@ -19,7 +28,6 @@ export default class Vouchers {
this.isLoading = true; this.isLoading = true;
return this.http.get("items") return this.http.get("items")
.then(res => { .then(res => {
console.log(res.data,'res list')
this.list = res.data; this.list = res.data;
this.isLoading = false; this.isLoading = false;
}) })
@ -44,12 +52,16 @@ export default class Vouchers {
} }
@action @action
post(data){ buyVoucher(data){
console.log('data',data)
this.isLoading = true; this.isLoading = true;
return this.http.post("stores", data) return this.http.post("shop/buy_voucher", {
.then(res => { item_sku_id : data
}
).then(res => {
this.isLoading = false; this.isLoading = false;
this.getList(); this.getList();
console.log('res',res)
return res; return res;
}) })
.catch(err => { .catch(err => {