Merge branch 'master' of https://gitlab.com/asacreative/redemption-point/new-frontend-customer-redemption-point

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';
 }

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

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>

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>