295 lines
11 KiB
JavaScript
295 lines
11 KiB
JavaScript
import React from 'react';
|
|
import {inject, observer} from 'mobx-react';
|
|
import {Link, withRouter} from 'react-router';
|
|
import { Modal, Button, Alert, Select } from 'antd';
|
|
import './style.scss';
|
|
import { Route } from 'react-router-dom'
|
|
import {LINKS} from "../../../routes";
|
|
import NumberFormat from 'react-number-format';
|
|
import get from 'lodash.get';
|
|
import ReactHtmlParser from "react-html-parser";
|
|
import MediaQuery from 'react-responsive';
|
|
|
|
const Option = Select.Option;
|
|
|
|
@withRouter
|
|
@inject('appstate')
|
|
@observer
|
|
export default class ModalVouchersComponent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
selectedOption: '',
|
|
hidden:'inline',
|
|
skuName:'',
|
|
skuPrice:'0',
|
|
buttonDisbaled:true
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.http = props.appstate.http;
|
|
this.vouchersStore = props.appstate.vouchers;
|
|
}
|
|
|
|
componentDidMount() {
|
|
const {item} = this.props.appstate;
|
|
|
|
item.getDetail(this.props.data.id);
|
|
}
|
|
|
|
render() {
|
|
const {item} = this.props.appstate;
|
|
const {data = {}, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Modal'} = this.props;
|
|
let image = get(data, 'images.main', '');
|
|
|
|
if (!image.includes('http')) {
|
|
image = this.http.appendImagePath(image);
|
|
}
|
|
|
|
// console.log(item.selectedData);
|
|
|
|
const additional_data = get(data, 'additional_data', {}) || {};
|
|
|
|
return (
|
|
<div>
|
|
<MediaQuery query="(min-device-width: 800px)">
|
|
<Modal
|
|
title={title}
|
|
visible={isVisible}
|
|
onOk={onOk}
|
|
onCancel={onCancel}
|
|
footer={null}
|
|
bodyStyle={{
|
|
padding: 0,
|
|
margin: 0,
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
}}
|
|
style={{
|
|
minWidth: '50vw'
|
|
}}
|
|
>
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
background: `linear-gradient(${data.background_color_1}, ${data.background_color_2})` || '#aaa',
|
|
// background: data.background_color || '#aaa',
|
|
flex: 0.3
|
|
}}>
|
|
<img className={'imageModal'} src={image} />
|
|
<p className={'titleModal'}>{data.name}</p>
|
|
</div>
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flex: 0.7,
|
|
padding: 30
|
|
}}>
|
|
<div className={'descriptionModal'} >{ReactHtmlParser(data.description)}</div>
|
|
{(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
|
<div className={'informationContainerModal'}>
|
|
<p className={'informationTitleModal'}>Information</p>
|
|
<p className={'informationBodyModal'}>{additional_data.information}</p>
|
|
</div>
|
|
} type="success" />}
|
|
|
|
<Select
|
|
showSearch
|
|
// labelInValue
|
|
className={'optionSelectModal'}
|
|
placeholder="Please Select your Option"
|
|
optionFilterProp="children"
|
|
onChange={(value) => {
|
|
console.log({value})
|
|
this.setState({selectedOption: value});
|
|
this.setState({hidden: 'none'});
|
|
// console.log('onChange',value);
|
|
// const points = item.selectedData.sku.filter(item => item.id == value);
|
|
this.setState({
|
|
skuName : get(data, 'name', '').name,
|
|
skuPrice : get(data, 'regular_price', '0.0'),
|
|
buttonDisbaled: false
|
|
})
|
|
}}
|
|
onDropdownVisibleChange={(value) => {
|
|
this.setState({hidden: 'inline'})
|
|
}}
|
|
>
|
|
{(item.selectedData.sku || [{
|
|
vouchers: [{count: +get(data, 'stock', '0.0')}],
|
|
price: get(data, 'regular_price', '0.0'),
|
|
id: get(data, 'id', ''),
|
|
name: get(data, 'name', '')
|
|
}]).map((selectedItem, index) => {
|
|
// const {vouchers:[{count}]} = item;
|
|
|
|
console.log({item: selectedItem})
|
|
|
|
let count = 1;
|
|
|
|
if (data.source === 'internal') {
|
|
count = get(selectedItem, 'vouchers[0].count', 0) || 0;
|
|
}
|
|
console.log(count);
|
|
const outOfStock = !(+count > 0);
|
|
|
|
return (
|
|
<Option disabled={outOfStock} value={selectedItem.id}>
|
|
<div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
|
|
<span>{selectedItem.name} {outOfStock ? " - Out of Stock" : ""}</span>
|
|
<span style={{color:'#FF6F00', display:this.state.hidden}}>
|
|
Rp. <NumberFormat value={(+selectedItem.price).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
|
|
</span>
|
|
</div>
|
|
</Option>
|
|
)
|
|
})}
|
|
</Select>
|
|
|
|
<div className={'costContainerModal'}>
|
|
<div className={'costLeftPaneModal'}>
|
|
<p className={'costTitleModal'}>Points</p>
|
|
<p className={'costValueModal'}>
|
|
<NumberFormat value={(+this.state.skuPrice).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
|
|
</p>
|
|
</div>
|
|
<div className={'costRightPaneModal'}>
|
|
<Route render={({ history}) => (
|
|
<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.VOUCHER_STEPPER);
|
|
}}
|
|
type="primary"
|
|
disabled={this.state.buttonDisbaled}
|
|
size={"large"}
|
|
block>
|
|
Buy
|
|
</Button>
|
|
)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</MediaQuery>
|
|
<MediaQuery query="(max-device-width: 800px)">
|
|
<Modal
|
|
title={title}
|
|
visible={isVisible}
|
|
onOk={onOk}
|
|
onCancel={onCancel}
|
|
footer={null}
|
|
bodyStyle={{
|
|
padding: 0,
|
|
margin: 0,
|
|
}}
|
|
style={{
|
|
minWidth: '50vw'
|
|
}}
|
|
>
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
// flex: 0.7,
|
|
padding: 30
|
|
}}>
|
|
<div className={'descriptionModal'} >{ReactHtmlParser(data.description)}</div>
|
|
{(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
|
<div className={'informationContainerModal'}>
|
|
<p className={'informationTitleModal'}>Information</p>
|
|
<p className={'informationBodyModal'}>{additional_data.information}</p>
|
|
</div>
|
|
} type="success" />}
|
|
|
|
<Select
|
|
showSearch
|
|
// labelInValue
|
|
className={'optionSelectModal'}
|
|
placeholder="Please Select your Option"
|
|
optionFilterProp="children"
|
|
onChange={(value) => {
|
|
console.log({value})
|
|
this.setState({selectedOption: value});
|
|
this.setState({hidden: 'none'});
|
|
// console.log('onChange',value);
|
|
const points = item.selectedData.sku.filter(item => item.id == value);
|
|
this.setState({
|
|
skuName : get(data, 'name', '').name,
|
|
skuPrice : get(data, 'regular_price', '0.0'),
|
|
buttonDisbaled: false
|
|
})
|
|
}}
|
|
onDropdownVisibleChange={(value) => {
|
|
this.setState({hidden: 'inline'})
|
|
}}
|
|
>
|
|
{(item.selectedData.sku || [{
|
|
vouchers: [{count: +get(data, 'stock', '0.0')}],
|
|
price: get(data, 'regular_price', '0.0'),
|
|
id: get(data, 'id', ''),
|
|
name: get(data, 'name', '')
|
|
}]).map((selectedItem, index) => {
|
|
// const {vouchers:[{count}]} = item;
|
|
|
|
console.log({item: selectedItem})
|
|
|
|
let count = 1;
|
|
|
|
if (data.source === 'internal') {
|
|
count = get(selectedItem, 'vouchers[0].count', 0) || 0;
|
|
}
|
|
console.log(count);
|
|
const outOfStock = !(+count > 0);
|
|
|
|
return (
|
|
<Option disabled={outOfStock} value={selectedItem.id}>
|
|
<div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
|
|
<span>{selectedItem.name} {outOfStock ? " - Out of Stock" : ""}</span>
|
|
<span style={{color:'#FF6F00', display:this.state.hidden}}>
|
|
Rp. <NumberFormat value={(+selectedItem.price).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
|
|
</span>
|
|
</div>
|
|
</Option>
|
|
)
|
|
})}
|
|
</Select>
|
|
|
|
<div className={'costContainerModal'}>
|
|
<div className={'costLeftPaneModal'}>
|
|
<p className={'costTitleModal'}>Points</p>
|
|
<p className={'costValueModal'}><NumberFormat value={(+this.state.skuPrice).toFixed(0)} displayType={'text'} thousandSeparator={true}/> </p>
|
|
</div>
|
|
<div className={'costRightPaneModal'}>
|
|
<Route render={({ history}) => (
|
|
<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.VOUCHER_STEPPER);
|
|
}}
|
|
type="primary"
|
|
disabled={this.state.buttonDisbaled}
|
|
size={"large"}
|
|
block>
|
|
Buy
|
|
</Button>
|
|
)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</MediaQuery>
|
|
</div>
|
|
)
|
|
}
|
|
}
|