update: responsive layout modal voucher
This commit is contained in:
Rifqy Zacky Ariadhy
parent
7a5f61029a
commit
cdea24f10e
|
|
@ -8,6 +8,7 @@ import {LINKS} from "../../../routes";
|
||||||
import NumberFormat from 'react-number-format';
|
import NumberFormat from 'react-number-format';
|
||||||
import get from 'lodash.get';
|
import get from 'lodash.get';
|
||||||
import ReactHtmlParser from "react-html-parser";
|
import ReactHtmlParser from "react-html-parser";
|
||||||
|
import MediaQuery from 'react-responsive';
|
||||||
|
|
||||||
const Option = Select.Option;
|
const Option = Select.Option;
|
||||||
|
|
||||||
|
|
@ -50,122 +51,228 @@ export default class ModalVouchersComponent extends React.Component {
|
||||||
const additional_data = get(data, 'additional_data', {}) || {};
|
const additional_data = get(data, 'additional_data', {}) || {};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<div>
|
||||||
title={title}
|
<MediaQuery query="(min-device-width: 800px)">
|
||||||
visible={isVisible}
|
<Modal
|
||||||
onOk={onOk}
|
title={title}
|
||||||
onCancel={onCancel}
|
visible={isVisible}
|
||||||
footer={null}
|
onOk={onOk}
|
||||||
bodyStyle={{
|
onCancel={onCancel}
|
||||||
padding: 0,
|
footer={null}
|
||||||
margin: 0,
|
bodyStyle={{
|
||||||
display: 'flex',
|
padding: 0,
|
||||||
flexDirection: 'row',
|
margin: 0,
|
||||||
}}
|
display: 'flex',
|
||||||
style={{
|
flexDirection: 'row',
|
||||||
minWidth: '50vw'
|
}}
|
||||||
}}
|
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
|
|
||||||
}}>
|
|
||||||
<p className={'descriptionModal'} >{ReactHtmlParser(data.description)}</p>
|
|
||||||
|
|
||||||
{(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) => {
|
|
||||||
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 :points[0].name,
|
|
||||||
skuPrice : points[0].price,
|
|
||||||
buttonDisbaled:false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onDropdownVisibleChange={(value) => {
|
|
||||||
this.setState({hidden: 'inline'})
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{(item.selectedData.sku || []).map((item, index) => {
|
<div style={{
|
||||||
// const {vouchers:[{count}]} = item;
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
let count = 1;
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
if (data.source === 'internal') {
|
background: `linear-gradient(${data.background_color_1}, ${data.background_color_2})` || '#aaa',
|
||||||
count = get(item, 'vouchers[0].count', 0) || 0;
|
// background: data.background_color || '#aaa',
|
||||||
}
|
flex: 0.3
|
||||||
console.log(count);
|
}}>
|
||||||
const outOfStock = !(+count > 0);
|
<img className={'imageModal'} src={image} />
|
||||||
|
<p className={'titleModal'}>{data.name}</p>
|
||||||
return (
|
|
||||||
<Option disabled={outOfStock} value={item.id}>
|
|
||||||
<div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
|
|
||||||
<span>{item.name} {outOfStock ? " - Out of Stock" : ""}</span>
|
|
||||||
<span style={{color:'#FF6F00', display:this.state.hidden}}>
|
|
||||||
Rp. <NumberFormat value={(+item.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>
|
||||||
<div className={'costRightPaneModal'}>
|
<div style={{
|
||||||
<Route render={({ history}) => (
|
display: 'flex',
|
||||||
<Button
|
flexDirection: 'column',
|
||||||
onClick={() => {
|
flex: 0.7,
|
||||||
this.vouchersStore.dataItems = data;
|
padding: 30
|
||||||
this.vouchersStore.skuId = this.state.selectedOption;
|
}}>
|
||||||
this.vouchersStore.skuName = this.state.skuName;
|
<div className={'descriptionModal'} >{ReactHtmlParser(data.description)}</div>
|
||||||
this.vouchersStore.skuPrice = this.state.skuPrice;
|
{(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
||||||
console.log('enak',this.state);
|
<div className={'informationContainerModal'}>
|
||||||
history.push(LINKS.VOUCHER_STEPPER);
|
<p className={'informationTitleModal'}>Information</p>
|
||||||
}}
|
<p className={'informationBodyModal'}>{additional_data.information}</p>
|
||||||
type="primary"
|
</div>
|
||||||
disabled={this.state.buttonDisbaled}
|
} type="success" />}
|
||||||
size={"large"}
|
|
||||||
block>
|
<Select
|
||||||
Buy
|
showSearch
|
||||||
</Button>
|
// labelInValue
|
||||||
)} />
|
className={'optionSelectModal'}
|
||||||
|
placeholder="Please Select your Option"
|
||||||
|
optionFilterProp="children"
|
||||||
|
onChange={(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 :points[0].name,
|
||||||
|
skuPrice : points[0].price,
|
||||||
|
buttonDisbaled:false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onDropdownVisibleChange={(value) => {
|
||||||
|
this.setState({hidden: 'inline'})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(item.selectedData.sku || []).map((item, index) => {
|
||||||
|
// const {vouchers:[{count}]} = item;
|
||||||
|
|
||||||
|
let count = 1;
|
||||||
|
|
||||||
|
if (data.source === 'internal') {
|
||||||
|
count = get(item, 'vouchers[0].count', 0) || 0;
|
||||||
|
}
|
||||||
|
console.log(count);
|
||||||
|
const outOfStock = !(+count > 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Option disabled={outOfStock} value={item.id}>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
|
||||||
|
<span>{item.name} {outOfStock ? " - Out of Stock" : ""}</span>
|
||||||
|
<span style={{color:'#FF6F00', display:this.state.hidden}}>
|
||||||
|
Rp. <NumberFormat value={(+item.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>
|
</div>
|
||||||
</div>
|
</Modal>
|
||||||
</div>
|
</MediaQuery>
|
||||||
</Modal>
|
<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) => {
|
||||||
|
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 :points[0].name,
|
||||||
|
skuPrice : points[0].price,
|
||||||
|
buttonDisbaled:false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onDropdownVisibleChange={(value) => {
|
||||||
|
this.setState({hidden: 'inline'})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(item.selectedData.sku || []).map((item, index) => {
|
||||||
|
// const {vouchers:[{count}]} = item;
|
||||||
|
|
||||||
|
let count = 1;
|
||||||
|
|
||||||
|
if (data.source === 'internal') {
|
||||||
|
count = get(item, 'vouchers[0].count', 0) || 0;
|
||||||
|
}
|
||||||
|
console.log(count);
|
||||||
|
const outOfStock = !(+count > 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Option disabled={outOfStock} value={item.id}>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
|
||||||
|
<span>{item.name} {outOfStock ? " - Out of Stock" : ""}</span>
|
||||||
|
<span style={{color:'#FF6F00', display:this.state.hidden}}>
|
||||||
|
Rp. <NumberFormat value={(+item.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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,13 @@
|
||||||
.imageModal{
|
@media(min-width: 800px){
|
||||||
width: 120px;
|
.imageModal{
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 800px){
|
||||||
|
.imageModal{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleModal{
|
.titleModal{
|
||||||
|
|
@ -10,7 +18,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.descriptionModal{
|
.descriptionModal{
|
||||||
|
max-height: 25vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
//z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.additionalInformationModal{
|
||||||
|
//z-index: 100;
|
||||||
|
//background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.informationAlertModal{
|
.informationAlertModal{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user