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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>