diff --git a/package-lock.json b/package-lock.json
index 67fd6a3..c50e7f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 8582e7c..bcb3ac8 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/common/config/app.js b/src/common/config/app.js
index 586ba81..e1a527b 100644
--- a/src/common/config/app.js
+++ b/src/common/config/app.js
@@ -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';
 }
diff --git a/src/common/pages/Vouchers/ItemCard/index.js b/src/common/pages/Vouchers/ItemCard/index.js
index 0fd52e6..79a60f5 100644
--- a/src/common/pages/Vouchers/ItemCard/index.js
+++ b/src/common/pages/Vouchers/ItemCard/index.js
@@ -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>
     )
diff --git a/src/common/pages/Vouchers/Modal/index.js b/src/common/pages/Vouchers/Modal/index.js
index 6d271ad..84e99a6 100644
--- a/src/common/pages/Vouchers/Modal/index.js
+++ b/src/common/pages/Vouchers/Modal/index.js
@@ -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>
diff --git a/src/common/pages/Vouchers/index.js b/src/common/pages/Vouchers/index.js
index e242667..c80b79b 100644
--- a/src/common/pages/Vouchers/index.js
+++ b/src/common/pages/Vouchers/index.js
@@ -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>