feat: out of stock checker for internal voucher
This commit is contained in:
parent
cccca5a774
commit
ca421722e4
79
package-lock.json
generated
79
package-lock.json
generated
|
|
@ -1329,11 +1329,11 @@
|
|||
"integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
|
||||
},
|
||||
"@material-ui/core": {
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.8.1.tgz",
|
||||
"integrity": "sha512-YhVanMT+DBaw8te6WbpU+RGm/wPYwT2FXlz0JGEexSOReDK3zVuyQJ7mTyDEE+HZQH6p1s6CTXXIH4CoivpogQ==",
|
||||
"version": "3.9.1",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.1.tgz",
|
||||
"integrity": "sha512-26GtjuwxPPfSsUnYrTOC8zuCuhWPVhc4SsUSFTZq0n1QvpGi9UEZRFe8yp6FykQE+PmqyyY+eWdrfiXKSUKZ0w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.2.0",
|
||||
"@babel/runtime": "^7.2.0",
|
||||
"@material-ui/system": "^3.0.0-alpha.0",
|
||||
"@material-ui/utils": "^3.0.0-alpha.2",
|
||||
"@types/jss": "^9.5.6",
|
||||
|
|
@ -1353,7 +1353,6 @@
|
|||
"jss-nested": "^6.0.1",
|
||||
"jss-props-sort": "^6.0.0",
|
||||
"jss-vendor-prefixer": "^7.0.0",
|
||||
"keycode": "^2.1.9",
|
||||
"normalize-scroll-left": "^0.1.2",
|
||||
"popper.js": "^1.14.1",
|
||||
"prop-types": "^15.6.0",
|
||||
|
|
@ -1364,13 +1363,18 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz",
|
||||
"integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==",
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
|
||||
"integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
|
||||
"requires": {
|
||||
"react-is": "^16.3.2"
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.7.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
|
||||
"integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g=="
|
||||
},
|
||||
"recompose": {
|
||||
"version": "0.30.0",
|
||||
"resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
|
||||
|
|
@ -1394,41 +1398,22 @@
|
|||
}
|
||||
},
|
||||
"@material-ui/system": {
|
||||
"version": "3.0.0-alpha.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.0.tgz",
|
||||
"integrity": "sha512-Zvpk3OteKd1Q4kvp0MqNoVH/wWqOee1wXxx4j4f3Go5nvdhcATATpN6SmAFG34goLJHlGTQT2k3Srxij/hOyVQ==",
|
||||
"version": "3.0.0-alpha.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz",
|
||||
"integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.1.2",
|
||||
"deepmerge": "^2.0.1",
|
||||
"@babel/runtime": "^7.2.0",
|
||||
"deepmerge": "^3.0.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"warning": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.2.tgz",
|
||||
"integrity": "sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.12.0"
|
||||
}
|
||||
},
|
||||
"deepmerge": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
|
||||
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
|
||||
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/utils": {
|
||||
"version": "3.0.0-alpha.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.2.tgz",
|
||||
"integrity": "sha512-dnxwCXMSLFFXiQm3EK/Ikxm4oYvr3WxxVoPZ0Uh4CBqZNr0J8nzDNlDcGP/0UeC134UUz2ZwgbTL/smxrGZ8sg==",
|
||||
"version": "3.0.0-alpha.3",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz",
|
||||
"integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==",
|
||||
"requires": {
|
||||
"@babel/runtime": "7.2.0",
|
||||
"@babel/runtime": "^7.2.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"react-is": "^16.6.3"
|
||||
}
|
||||
|
|
@ -1490,9 +1475,9 @@
|
|||
"integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "16.7.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.7.18.tgz",
|
||||
"integrity": "sha512-Tx4uu3ppK53/iHk6VpamMP3f3ahfDLEVt3ZQc8TFm30a1H3v9lMsCntBREswZIW/SKrvJjkb3Hq8UwO6GREBng==",
|
||||
"version": "16.7.21",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.7.21.tgz",
|
||||
"integrity": "sha512-8BPxwygC83LgaIjOVVLrzB4mpP2u1ih01fbfy76L3h9OgKN+fNyMVPXj/0mGpWnxImjiM/2lqb3YOeT2Ca+NYQ==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^2.2.0"
|
||||
|
|
@ -4572,9 +4557,9 @@
|
|||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.0.tgz",
|
||||
"integrity": "sha512-by8hi8BlLbowQq0qtkx54d9aN73R9oUW20HISpka5kmgsR9F7nnxgfsemuR2sdCKZh+CDNf5egW9UZMm4mgJRg=="
|
||||
"version": "2.6.1",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.1.tgz",
|
||||
"integrity": "sha512-wv7IRqCGsL7WGKB8gPvrl+++HlFM9kxAM6jL1EXNPNTshEJYilMkbfS2SnuHha77uosp/YVK0wAp2jmlBzn1tg=="
|
||||
},
|
||||
"currently-unhandled": {
|
||||
"version": "0.4.1",
|
||||
|
|
@ -4738,9 +4723,9 @@
|
|||
"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
|
||||
},
|
||||
"deepmerge": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.0.0.tgz",
|
||||
"integrity": "sha512-a8z8bkgHsAML+uHLqmMS83HHlpy3PvZOOuiTQqaa3wu8ZVg3h0hqHk6aCsGdOnZV2XMM/FRimNGjUh0KCcmHBw=="
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.1.0.tgz",
|
||||
"integrity": "sha512-/TnecbwXEdycfbsM2++O3eGiatEFHjjNciHEwJclM+T5Kd94qD1AP+2elP/Mq0L5b9VZJao5znR01Mz6eX8Seg=="
|
||||
},
|
||||
"default-gateway": {
|
||||
"version": "2.7.2",
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@firebase/app": "^0.3.4",
|
||||
"@material-ui/core": "^3.8.1",
|
||||
"@material-ui/core": "^3.9.1",
|
||||
"@mdi/font": "^2.3.54",
|
||||
"antd": "^3.9.3",
|
||||
"async-validator": "^1.8.2",
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@ imageUrl = "https://giift-api.asacreative.com";
|
|||
|
||||
type = 'localhost';
|
||||
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
|
||||
appUrl = 'http://localhost:7700'
|
||||
appUrl = 'http://localhost:7700';
|
||||
apiUrl = "http://localhost:4001/"
|
||||
}else{
|
||||
appUrl = 'https://sillyfish.asacreative.com';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,16 +28,16 @@ export class ItemCard extends React.Component {
|
|||
|
||||
render() {
|
||||
const {data = {}} = this.props;
|
||||
let image = ''
|
||||
if(data.images.logo.includes('http')){
|
||||
image = data.images.logo;
|
||||
}else{
|
||||
image = this.http.appendImagePath(data.images.logo);
|
||||
|
||||
let image = get(data, 'images.logo', '');
|
||||
|
||||
if (!image.includes('http')) {
|
||||
image = this.http.appendImagePath(image);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={'itemCard'}>
|
||||
<img className={'imageCard'} src={image} />
|
||||
<img className={'imageCard'} src={image}/>
|
||||
<p className={'titleCard'}>{data.name}</p>
|
||||
</Card>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {Link} from 'react-router';
|
||||
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';
|
||||
|
||||
const Option = Select.Option;
|
||||
|
||||
@withRouter
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class ModalVouchersComponent extends React.Component {
|
||||
|
|
@ -26,17 +29,25 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
this.vouchersStore = props.appstate.vouchers;
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
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 = ''
|
||||
if(data.images.logo.includes('http')){
|
||||
image = data.images.logo;
|
||||
}else{
|
||||
image = this.http.appendImagePath(data.images.logo);
|
||||
let image = get(data, 'images.logo', '');
|
||||
|
||||
if (!image.includes('http')) {
|
||||
image = this.http.appendImagePath(image);
|
||||
}
|
||||
|
||||
// console.log(item.selectedData);
|
||||
|
||||
const additional_data = get(data, 'additional_data', {}) || {};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={title}
|
||||
|
|
@ -74,10 +85,10 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
}}>
|
||||
<p className={'descriptionModal'} >{data.description}</p>
|
||||
|
||||
{(data.additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
||||
{(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
|
||||
<div className={'informationContainerModal'}>
|
||||
<p className={'informationTitleModal'}>Information</p>
|
||||
<p className={'informationBodyModal'}>{data.additional_data.information}</p>
|
||||
<p className={'informationBodyModal'}>{additional_data.information}</p>
|
||||
</div>
|
||||
} type="success" />}
|
||||
|
||||
|
|
@ -88,11 +99,10 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
placeholder="Please Select your Option"
|
||||
optionFilterProp="children"
|
||||
onChange={(value) => {
|
||||
this.setState({selectedOption: value})
|
||||
this.setState({hidden: 'none'})
|
||||
this.setState({selectedOption: value});
|
||||
this.setState({hidden: 'none'});
|
||||
// console.log('onChange',value);
|
||||
const points = data.sku.filter(item => item.id == value);
|
||||
console.log(points[0].price,'points',points[0].name);
|
||||
const points = item.selectedData.sku.filter(item => item.id == value);
|
||||
this.setState({
|
||||
skuName :points[0].name,
|
||||
skuPrice : points[0].price,
|
||||
|
|
@ -104,9 +114,27 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
this.setState({hidden: 'inline'})
|
||||
}}
|
||||
>
|
||||
{data.sku.map((item, index) => {
|
||||
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).toFixed(0)} displayType={'text'} thousandSeparator={true}/> </span></div></Option>
|
||||
// return <Option value={item.id}>{item.price}</Option>
|
||||
{(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>
|
||||
|
||||
|
|
@ -117,16 +145,21 @@ export default class ModalVouchersComponent extends React.Component {
|
|||
</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.VERIFY_VOUCHERS);
|
||||
}
|
||||
}
|
||||
type="primary" disabled={this.state.buttonDisbaled} 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"
|
||||
disabled={this.state.buttonDisbaled}
|
||||
size={"large"}
|
||||
block>
|
||||
Buy
|
||||
</Button>
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -89,13 +89,17 @@ export default class VouchersComponent extends React.Component {
|
|||
} */}
|
||||
</Row>
|
||||
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
/>
|
||||
{this.state.isOpened && (
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user