fix : merge

2019-01-28 20:28:46 +07:00
parent 62696a3a80 3605365c0b
commit 7368bc5b07
18 changed files with 2089 additions and 1132 deletions
--- a/src/common/config/app.js
+++ b/src/common/config/app.js
@@ -29,13 +29,13 @@ imageUrl = "https://giift-api.asacreative.com";

 type = 'localhost';
 if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
-  appUrl = 'http://localhost:7700';
-  apiUrl = "http://localhost:4001/"
+  // appUrl = 'http://localhost:7700';
+  // apiUrl = "http://localhost:4001/"
 }else{
  appUrl = 'https://sillyfish.asacreative.com';
 }

-export const APP_TYPE = 'giift';
+export const APP_TYPE = 'btn';

 export const appConfig = {
  apiUrl: apiUrl,
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -322,7 +322,8 @@ export default class App extends React.Component {

    const {userData} = this.appstate;
    // const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
-    let applicationIcon =  "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
+    // let applicationIcon =  "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
+    let applicationIcon = require('../../../../assets/images/logo_new.png');
    let applicationName = 'Giift';
    if(APP_TYPE === 'btn') {
      applicationIcon = "http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png";
@@ -379,8 +380,8 @@ export default class App extends React.Component {
                  .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
                  <img
                    style={{
-                      width: 150,
-                      height: 50
+                      width: 100,
+                      height: 30
                    }}
                       src={applicationIcon}/>
                </Link>
--- a/src/common/pages/App/routes.js
+++ b/src/common/pages/App/routes.js
@@ -62,6 +62,7 @@ import DataTab from '../Data';
 import LayoutTab from '../Layout';
 import ContentTab from '../Content';
 import TransactionPage from "../Transaction";
+import VoucherStepperComponent from "../Vouchers/Stepper";

 export default class ComponentName extends React.Component {
  constructor(props) {
@@ -87,6 +88,7 @@ export default class ComponentName extends React.Component {
        <Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
        <Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
        <Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
+        <Route exact component={VoucherStepperComponent} path={LINKS.VOUCHER_STEPPER}/>
        <Route exact component={VerifyVouchers} path={LINKS.VERIFY_VOUCHERS}/>
        <Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
        <Route exact component={PaymentVouchers} path={LINKS.PAYMENT_VOUCHERS}/>
--- a/src/common/pages/App/style.scss
+++ b/src/common/pages/App/style.scss
@@ -55,10 +55,10 @@
  }

  .mainContent {
-    width: calc(100vw - 14vw);
-    margin-left: 2.5vw;
-    margin-right: 2.5vw;
-    position: relative;
+    //width: calc(100vw - 14vw);
+    //margin-left: 2.5vw;
+    //margin-right: 2.5vw;
+    //position: relative;
  }
  @media screen and (max-width: 780px) {
    .mainContent {
@@ -135,7 +135,7 @@
    width: 100%;
    top: 0;
    z-index: 1000;
-    background-color: #f1f5f9 !important;
+    background-color: #ffeb3b !important;
    height: 70px !important;
    padding: 8px 24px;
    border-bottom: 1px solid rgb(223, 223, 223);
--- a/src/common/pages/Dashboard/index.js
+++ b/src/common/pages/Dashboard/index.js
@@ -1,14 +1,15 @@
 import React from "react";
-import { inject, observer } from "mobx-react";
+import {inject, observer} from "mobx-react";
+import withStyles from "@material-ui/core/styles/withStyles";
 import QueueAnim from 'rc-queue-anim';
 import "./style.scss";
 import NumberFormat from 'react-number-format';
-import { LINKS } from './../../routes'
-import { Link } from 'react-router-dom';
+import {LINKS} from './../../routes'
+import {Link} from 'react-router-dom';
 import CardAdmin from './CardAdmin';
 import CardAgent from './CardAgent';
 import moment from 'moment';
-import { Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row, } from 'antd';
+import {Icon, Button, notification, Table, Tooltip as TooltipAntd, Col, Row,} from 'antd';
 import DC from 'decimal.js-light';
 import {
  Paper,
@@ -24,13 +25,17 @@ import {
  Divider, ListItem, List
 } from 'material-ui';
 import Grid from '@material-ui/core/Grid';
+import {default as MuiCard} from '@material-ui/core/Card'
+import {default as MuiCardContent} from '@material-ui/core/CardContent';
+import {default as MuiCardActions} from '@material-ui/core/CardActions';
+import {default as MuiCardButton} from '@material-ui/core/Button';
 import EmptyComponent from '../EmptyComponent';
 import * as _ from 'lodash';
-import { grey400, darkBlack, lightBlack, black } from 'material-ui/styles/colors';
+import {grey400, darkBlack, lightBlack, black} from 'material-ui/styles/colors';
 import './style.scss';
-import { Carousel } from 'react-responsive-carousel'
-import { ActionGrade, ContentDrafts, ContentInbox, ContentSend } from "material-ui/svg-icons/index";
-import { constant } from "../../config/const";
+import {Carousel} from 'react-responsive-carousel'
+import {ActionGrade, ContentDrafts, ContentInbox, ContentSend} from "material-ui/svg-icons/index";
+import {constant} from "../../config/const";
 import Slider from "react-slick";
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -40,12 +45,14 @@ import slider2 from '../../../../assets/images/slider/2.jpg';
 import slider3 from '../../../../assets/images/slider/3.jpg';
 import slider4 from '../../../../assets/images/slider/4.jpg';
 import slider5 from '../../../../assets/images/slider/5.jpg';
-import { ItemCard } from "../Vouchers/ItemCard";
+import {ItemCard} from "../Vouchers/ItemCard";
 import ModalVouchersComponent from "../Vouchers/Modal";
 import PopularItemCardComponent from "./PopularItemCard";
 import NewItemCardComponent from "./NewItemCard";
 import '../Vouchers/style.scss';
 import ModalTopupComponent from "../Wallet/Modal";
+import Typography from '@material-ui/core/Typography';
+import {styles} from "../RegisterNew/styles";

 const {
  LineChart,
@@ -65,7 +72,7 @@ const {

@inject('appstate')
@observer
-export default class DashboardComponent extends React.Component {
+class DashboardComponent extends React.Component {

  constructor(props) {
    super(props);
@@ -74,18 +81,18 @@ export default class DashboardComponent extends React.Component {
      modalTopup: false,
      data: {
        name: '',
-        background_color_1:'',
-        background_color_2:'',
+        background_color_1: '',
+        background_color_2: '',
        images: {
-          logo:''
+          logo: ''
        },
        description: '',
        additional_data: {
-          information:''
+          information: ''
        },
        sku: [
          {
-            id:'',
+            id: '',
            name: '',
            price: ''
          },
@@ -104,6 +111,7 @@ export default class DashboardComponent extends React.Component {
  };

  render() {
+    const {classes} = this.props;
    const settings = {
      arrows: true,
      infinite: true,
@@ -114,120 +122,117 @@ export default class DashboardComponent extends React.Component {
    };

    return (
-      <div>
-        <div className="dashboard animated fadeIn" style={{marginLeft: '8%',marginRight:'7%'}}>
-          <div className="row ">
-            <div className="col s12 m12 l12 col-leftDashboard" style={{ marginBottom: 0 }}>
-              <div className="row no-margin">
-              {this.props.appstate.wallet.data.wallet ? (
-                <div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
-                <Card className="cardLite cardDashboard">
+      <Grid className={classes.root}>
+        <Grid
+          container
+          direction="row"
+          justify="center"
+          alignItems="center"
+          spacing={24}
+          style={{marginTop: 30}}>
+          <Grid item xs={12} sm={3} md={3} lg={3}>
+            {this.props.appstate.wallet.data.wallet ? (
+              <MuiCard className={classes.card}>
+                <MuiCardContent>
+                  <Typography variant="h5" component="h2">
+                    Voucher
+                  </Typography>
+                  <Typography component="p">
+                    <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+                  </Typography>
+                </MuiCardContent>
+                <MuiCardActions>
+                  <MuiCardButton type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</MuiCardButton>
+                </MuiCardActions>
+              </MuiCard>
+            ) : ''}
+          </Grid>
+          <Grid item xs={12} sm={3} md={3} lg={3}>
+            {this.props.appstate.wallet.data.wallet ? (
+              <MuiCard className={classes.card}>
+                <MuiCardContent>
                  <h3 style={{
                    display: 'block',
                    fontSize: '1rem',
                    textTransform: 'uppercase',
                    color: '#0006',
                    letterSpacing: 1
-                  }}>Voucher</h3>
-                  <div className="value">
-                  {/* <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/> */}
-                  <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
-                  </div>
-                  <div style={{marginTop:10}}>
-                    <Button type="primary" icon="plus" onClick={() => this.setModalTopup(true)}>Add Voucher</Button>
-                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
-                      <span>Add Voucher</span>
-                      <Icon className="ml-8" type="right" />
-                    </a> */}
-                  </div>
-                </Card>
-              </div>
-              ) : ''}
-                
-                {this.props.appstate.wallet.data.wallet ? (
-                <div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
-                  <Card className="cardLite cardDashboard">
-                    <h3 style={{
-                      display: 'block',
-                      fontSize: '1rem',
-                      textTransform: 'uppercase',
-                      color: '#0006',
-                      letterSpacing: 1
-                    }}> Profile</h3>
-                    <div className="value">Please complete your profile</div>
-                    <div style={{marginTop:10}}>
+                  }}> Profile</h3>
+                  <div className="value">Please complete your profile</div>
+                  <div style={{marginTop: 10}}>
                    <Button type="primary" icon="edit">Edit Profile</Button>
-                      {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
+                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
                        <span>Edit Profile</span>
                        <Icon className="ml-8" type="right" />
                      </a> */}
-                    </div>
-                  </Card>
-                </div>
-                ) : ''}
-
-
-                {this.props.appstate.wallet.data.wallet ? (
-                <div className="col s12 m4 l4" style={{ marginBottom: 0 }}>
-                  <Card className="cardLite cardDashboard">
-                    <h3 style={{
-                      display: 'block',
-                      fontSize: '1rem',
-                      textTransform: 'uppercase',
-                      color: '#0006',
-                      letterSpacing: 1
-                    }}>Credit Card</h3>
-                    <div className="value ">Please add your credit card</div>
-                    <div style={{marginTop:10}}>
+                  </div>
+                </MuiCardContent>
+              </MuiCard>
+            ) : ''}
+          </Grid>
+          <Grid item xs={12} sm={3} md={3} lg={3}>
+            {this.props.appstate.wallet.data.wallet ? (
+              <MuiCard className={classes.card}>
+                <MuiCardContent>
+                  <h3 style={{
+                    display: 'block',
+                    fontSize: '1rem',
+                    textTransform: 'uppercase',
+                    color: '#0006',
+                    letterSpacing: 1
+                  }}>Credit Card</h3>
+                  <div className="value ">Please add your credit card</div>
+                  <div style={{marginTop: 10}}>
                    <Button type="primary" icon="plus">Add Credit Card</Button>
-                        {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
+                    {/* <a className="btnFlatUnderline" onClick={() => this.setModalTopup(true)}>
                        <span>Add Credit Car</span>
                        <Icon className="ml-8" type="right" />
                      </a> */}
-                    </div>
-                  </Card>
-                </div>
-                ) : ''}
-              </div>
-            </div>
-          </div>
-        </div>
+                  </div>
+                </MuiCardContent>
+              </MuiCard>
+            ) : ''}
+          </Grid>
+        </Grid>

+        <Grid
+          container
+          direction="row"
+          justify="center"
+          alignItems="center"
+          spacing={24}
+          style={{marginTop: 30}}>

-
-
-        <div style={{ marginLeft: '10%', marginRight: '10%', marginTop: 20, flexGrow: 1, minHeight: window.innerHeight - 70, backgroundColor: '#fff' }}>
-          <div>
+          <Grid item xs={12} sm={12} md={12} lg={12}>
            <Slider {...settings}>
              <div>
-                <img src={slider1} width={'100%'} />
+                <img src={slider1} width={'100%'}/>
              </div>
              <div>
-                <img src={slider2} width={'100%'} />
+                <img src={slider2} width={'100%'}/>
              </div>
              <div>
-                <img src={slider3} width={'100%'} />
+                <img src={slider3} width={'100%'}/>
              </div>
              <div>
-                <img src={slider4} width={'100%'} />
+                <img src={slider4} width={'100%'}/>
              </div>
              <div>
-                <img src={slider5} width={'100%'} />
+                <img src={slider5} width={'100%'}/>
              </div>
            </Slider>
-          </div>
+          </Grid>

-          <div>
-            <Grid container spacing={0} style={{}}>
-              {/* <Grid item xs={12}>
+          <Grid item xs={12} sm={12} md={12} lg={12}>
+            {/* <Grid item xs={12}>
                <div>
                  <div className="row">
                    <div className="col l12 m12 s12 padding">
                      <h3>
                        Popular Items
-                    </h3>
+                      </h3>
                      <Row gutter={10}>
-                        <PopularItemCardComponent />
+                        <PopularItemCardComponent/>
                      </Row>
                    </div>
                  </div>
@@ -239,52 +244,54 @@ export default class DashboardComponent extends React.Component {
                    <div className="col l12 m12 s12 padding">
                      <h3>
                        New Products
-                    </h3>
+                      </h3>
                      <Row gutter={10}>
-                        <NewItemCardComponent />
+                        <NewItemCardComponent/>
                      </Row>
                    </div>
                  </div>
                </div>
              </Grid> */}
-              <Grid item xs={12}>
-                <div className={"voucher"} style={{ marginTop: 0 }}>
-                  <div className="row">
-                    <div className="col l12 m12 s12 padding">
-                      <h3>
-                        Voucher & Gift Card
+
+            <Grid item xs={12}>
+              <div className={"voucher"} style={{marginTop: 0}}>
+                <div className="row">
+                  <div className="col l12 m12 s12 padding">
+                    <h3>
+                      Voucher & Gift Card
                    </h3>

-                      <Row gutter={10}>
+                    <Row gutter={10}>
                      {
-                        ( this.vouchersStore.list.length > 0) ?
-                        this.vouchersStore.list.map((item, index) => {
-                          return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
-                            <ItemCard data={item}/>
-                          </Col>)
-                        })
-                        : (
-                          <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
-                        )
+                        (this.vouchersStore.list.length > 0) ?
+                          this.vouchersStore.list.map((item, index) => {
+                            return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
+                              <ItemCard data={item}/>
+                            </Col>)
+                          })
+                          : (
+                            <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
+                          )
                      }
-                      </Row>
+                    </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})}
-                      />
-                    </div>
+                    <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>
-              </Grid>
+              </div>
            </Grid>
-          </div>
-        </div>
-        <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
-      </div>
+          </Grid>
+        </Grid>
+        <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup}/>
+      </Grid>
    );
  }
 }
+
+export default withStyles(styles)(DashboardComponent);
--- a/src/common/pages/Vouchers/Checkout/index.js
+++ b/src/common/pages/Vouchers/Checkout/index.js
@@ -8,6 +8,7 @@ import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox
 import {startCase} from 'lodash';
 import LoadingDialog from "../../LoadingDialog";
 import Loader from 'react-loader-advanced';
+import './style.scss';
 import {DIALOG} from "../../../stores/global_ui";
 import EmptyComponent from '../../EmptyComponent';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
@@ -32,105 +33,92 @@ export default class CheckoutVouchers extends React.Component {
  }

  componentDidMount() {
-    console.log("skuid",this.vouchersStore.skuId);
-    console.log("skuName",this.vouchersStore.skuName);
-    console.log("skuPrice",this.vouchersStore.skuPrice);
-    console.log("data",this.vouchersStore.dataItems);
+    console.log(this.vouchersStore)
+    // console.log("skuid",this.vouchersStore.skuId);
+    // console.log("skuName",this.vouchersStore.skuName);
+    // console.log("skuPrice",this.vouchersStore.skuPrice);
+    // console.log("data",this.vouchersStore.dataItems);
  }

  render() {

-    let image = get(this.vouchersStore.dataItems, 'images.logo', '');
+    const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';
+
+    let image = logoUrl;

    if (!image.includes('http')) {
      image = this.http.appendImagePath(image);
    }

    return (
-    <div className="wallet containerMiddle">
+      <div className="row">
        <div className="row">
-            <div className="col s0 m3 l3" />
-            <div className="col s12 m6 l6">
-                <div className="row">
-                <FlatButton
-                    className="headerMenu"
-                    hoverColor="#f1f5f9"
-                    style={{ background: '#ffffff00' }}
-                    onClick={() => this.props.history.goBack()}
-                    label="Back"
-                    primary={true}
-                    icon={<NavigationArrowBack />}
-                />
-                <Divider style={{marginBottom:10,marginTop:10}} />
-                    <Card
-                    // title={<div style={{display:'flex',justifyContent:'center'}}>
-                    //             <p style={{fontSize:20}}>
-                    //                 Detail Pembelian
-                    //             </p>
-                    //         </div>}
-                            >
-                        <div className="">
-                            <div style={{display:'flex',justifyContent:'center'}}>
-                                <h3 style={{fontSize:18}}>
-                                    Detail Pembelian
-                                </h3>
-                            </div>
-                        </div>
-                        <Divider style={{marginBottom:10,marginTop:10}} />
-                        <div className="row" style={{marginTop:30}}>
-                            <div className="col s5 m5 l5">
-                                <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
-                                <img className={'imageCard'} src={this.http.appendImagePath(image)} />
-                                    {/* <Avatar size={74} src={this.http.appendImagePath(this.vouchersStore.dataItems.images.logo)} /> */}
-                                </div>
-                            </div>
-                            <div className="col s4 m7 l7">
-                            <div style={{alignItems:'center'}}>
-                                <Row>
-                                    <div className="col s12 m6 6">
-                                        <h3>Jenis Layanan :</h3>
-                                    </div>
-                                    <div className="col s12 m6 6">
-                                        <h3 style={{color:''}}>{this.vouchersStore.dataItems.name} {this.vouchersStore.skuName}</h3>
-                                    </div>
-                                </Row>
-                                <Row>
-                                    <div className="col s12 m6 6">
-                                        <h3>Point :</h3>
-                                    </div>
-                                    <div className="col s12 m6 6">
-                                        <h3 style={{color:'#FF6F00'}}>{(+this.vouchersStore.skuPrice).toFixed(0)} Points</h3>
-                                    </div>
-                                </Row>
-                            </div>
-                            </div>
-                        </div>
-                    </Card>
-                </div>
-                <div className="row">
-                    <Card >
-                        <div className="row">
-                            <div style={{display:'flex',justifyContent:'space-between'}}>
-                                <h3 style={{color:''}}>Point</h3>
-                                <h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point} Points</h3>
-                            </div>
-                        </div>
-                        <Divider style={{marginBottom:10,marginTop:10}} />
-                        <div className="row">
-                            <div style={{display:'flex',justifyContent:'space-between'}}>
-                                <h3>Total Pembayaran Point</h3>
-                                <h3 style={{color:'#FF6F00'}}>{(+this.vouchersStore.skuPrice).toFixed(0)} Points</h3>
-                            </div>
-                        </div>
-                        <div className="row">
-                            <Button type="primary" block onClick={() => this.props.history.push(LINKS.PAYMENT_VOUCHERS)}>Lanjut</Button>
-                        </div>
-                    </Card>
-                </div>
+          <Card>
+            <div className="">
+              <div style={{display:'flex',justifyContent:'center'}}>
+                <h3 style={{fontSize:18}}>
+                  Detail Pembelian
+                </h3>
+              </div>
            </div>
-            <div className="col s0 m3 l3" />
+            <Divider style={{marginBottom:10,marginTop:10}} />
+            <div className="row" style={{marginTop:30}}>
+              <div className="col s12 m5 l5">
+                <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
+                  <img className={'imageCard'} src={image} />
+                  {/* <Avatar size={74} src={this.http.appendImagePath(this.props.vouchersStore.dataItems.images.logo)} /> */}
+                </div>
+              </div>
+              <div className="col s12 m7 l7">
+                <div style={{alignItems:'center', justifyContent: 'center'}}>
+                  <Row>
+                    <div className="col s4 m4">
+                      <h3>Jenis Layanan</h3>
+                    </div>
+                    <div className="col s1 m1">
+                      <h3>:</h3>
+                    </div>
+                    <div className="col s7 m7">
+                      <h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
+                    </div>
+                  </Row>
+                  <Row>
+                    <div className="col s4 m4">
+                      <h3>Point</h3>
+                    </div>
+                    <div className="col s1 m1">
+                      <h3>:</h3>
+                    </div>
+                    <div className="col s7 m7">
+                      <h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
+                    </div>
+                  </Row>
+                </div>
+              </div>
+            </div>
+          </Card>
        </div>
-    </div>
+        <div className="row">
+          <Card >
+            <div className="row">
+              <div style={{display:'flex',justifyContent:'space-between'}}>
+                <h3 style={{color:''}}>Point</h3>
+                <h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point || 0} Points</h3>
+              </div>
+            </div>
+            <Divider style={{marginBottom:10,marginTop:10}} />
+            <div className="row">
+              <div style={{display:'flex',justifyContent:'space-between'}}>
+                <h3>Total Pembayaran Point</h3>
+                <h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
+              </div>
+            </div>
+          </Card>
+        </div>
+        <div className="row">
+          {this.props.button()}
+        </div>
+      </div>
    )
  }
 }
--- a/src/common/pages/Vouchers/Checkout/style.scss
+++ b/src/common/pages/Vouchers/Checkout/style.scss
@@ -0,0 +1,4 @@
+.imageCard{
+  max-width: 20vw;
+  max-height: 20vw;
+}
--- a/src/common/pages/Vouchers/Finish/index.js
+++ b/src/common/pages/Vouchers/Finish/index.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {
+  FlatButton,
+  Divider
+} from 'material-ui';
+import {Card} from 'antd';
+import {startCase} from 'lodash';
+import './style.scss';
+
+@inject('appstate')
+@observer
+export default class FinishVouchers extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      value: 1,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+    this.vouchersStore = props.appstate.vouchers;
+  }
+
+  componentDidMount() {
+    console.log(this.vouchersStore)
+    // console.log("skuid",this.vouchersStore.skuId);
+    // console.log("skuName",this.vouchersStore.skuName);
+    // console.log("skuPrice",this.vouchersStore.skuPrice);
+    // console.log("data",this.vouchersStore.dataItems);
+  }
+
+  render() {
+
+    return (
+      <div className="row">
+        <div className="row">
+          <Card>
+            <div className="">
+              <div style={{display:'flex',justifyContent:'center'}}>
+                <h3 style={{fontSize:18}}>
+                  Berhasil menukarkan voucher
+                </h3>
+              </div>
+            </div>
+            <Divider style={{marginBottom:10,marginTop:10}} />
+            <div className="row" style={{marginTop:30}}>
+              <div className="col s12">
+                <div className={'textContainer'}>
+                  <p>Anda akan dialihkan ke page voucher dengan menekan tombol finish dibawah ini. Selamat Berbelanja!</p>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+        <div className="row">
+          {this.props.button()}
+        </div>
+      </div>
+    )
+  }
+}
--- a/src/common/pages/Vouchers/Finish/style.scss
+++ b/src/common/pages/Vouchers/Finish/style.scss
@@ -0,0 +1,4 @@
+.textContainer{
+  text-align: center;
+  font-size: 1.25em;
+}
--- a/src/common/pages/Vouchers/Modal/index.js
+++ b/src/common/pages/Vouchers/Modal/index.js
@@ -152,7 +152,7 @@ export default class ModalVouchersComponent extends React.Component {
                    this.vouchersStore.skuName = this.state.skuName;
                    this.vouchersStore.skuPrice = this.state.skuPrice;
                    console.log('enak',this.state);
-                    history.push(LINKS.VERIFY_VOUCHERS);
+                    history.push(LINKS.VOUCHER_STEPPER);
                  }}
                  type="primary"
                  disabled={this.state.buttonDisbaled}
--- a/src/common/pages/Vouchers/Payment/index.js
+++ b/src/common/pages/Vouchers/Payment/index.js
@@ -47,7 +47,7 @@ export default class PaymentVouchers extends React.Component {
        });
      };

-      const price = (+this.vouchersStore.skuPrice).toFixed(0);
+      const price = (+this.props.vouchersStore.skuPrice).toFixed(0);
      const qty = 1;
      const total = price * qty;

@@ -58,8 +58,72 @@ export default class PaymentVouchers extends React.Component {
      applicationLogo = 'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png';
    }

+    return(
+      <div>
+        <div className="row">
+          <Collapse bordered={true}>
+            <Panel style={{backgroundColor:'white'}} showArrow={false} header={
+              <div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
+                <h3 style={{color:'#FF6F00'}}>
+                  {price} Points
+                </h3>
+                <h3 style={{color:'#6772e5'}}>
+                  Detail  Tagihan
+                </h3>
+              </div>
+            } key="1">
+              <Row>
+                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                  <p>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</p>
+                  <p>{price} Points</p>
+                </div>
+              </Row>
+              <Row>
+                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                  <p>{qty} x  {price} Points</p>
+                  <p>{total} Points</p>
+                </div>
+              </Row>
+              <Divider dashed={true} />
+              <Row>
+                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                  <p>Tagihan</p>
+                  <p>{total} Points</p>
+                </div>
+              </Row>
+            </Panel>
+          </Collapse>
+        </div>
+        <div className="row">
+          <Card  title={<div style={{display:'flex',justifyContent:'space-between'}}>
+            <div>
+              <h3 style={{fontSize:20}}>
+                Points {applicationName}
+              </h3>
+            </div>
+            <div>
+              <img  style={{width:120, height:40}} src={applicationLogo} />
+            </div>
+          </div>}>
+            <div className="row">
+              <Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
+            </div>
+            <div>
+              <ul>
+                <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+                <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+              </ul>
+            </div>
+          </Card>
+        </div>
+        <div className="row">
+          {this.props.button()}
+        </div>
+      </div>
+    );
+
    return (
-    <div className="wallet containerMiddle">
+      <div className="wallet containerMiddle">
        <div className="row">
            <div className="col s0 m2 l2" />
            <div className="col s12 m8 l8">
--- a/src/common/pages/Vouchers/Stepper/index.js
+++ b/src/common/pages/Vouchers/Stepper/index.js
@@ -0,0 +1,186 @@
+import {inject, observer} from "mobx-react";
+import React from "react";
+import './style.scss';
+import {
+  Step,
+  Stepper,
+  StepLabel,
+} from 'material-ui/Stepper';
+import RaisedButton from 'material-ui/RaisedButton';
+import FlatButton from 'material-ui/FlatButton';
+import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
+import {Divider} from "material-ui";
+import CheckoutVouchers from "../Checkout";
+import PaymentVouchers from "../Payment";
+import {LINKS} from "../../../routes";
+import {notification, Modal} from "antd";
+import FinishVouchers from "../Finish";
+
+const confirm = Modal.confirm;
+
+@inject('appstate')
+@observer
+export default class VoucherStepperComponent extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      finished: false,
+      stepIndex: 0,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+    this.vouchersStore = props.appstate.vouchers;
+  }
+
+  componentWillMount() {
+    if(!this.vouchersStore.dataItems.name){
+      // alert('jalan')
+      this.props.history.push(LINKS.VOUCHERS);
+    }
+    // alert('engga')
+  }
+
+  handleNext = () => {
+    const {stepIndex} = this.state;
+
+    if(stepIndex === 1){
+      confirm({
+        title: 'Anda yakin mau menukarkan voucher?',
+        content: 'Sistem akan langsung memotong point anda ketika anda menekan tombol konfirmasi dibawah.',
+        onOk: () => {
+          this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
+            .then(res => {
+              const openNotificationWithIcon = (type) => {
+                notification[type]({
+                  message: 'Berhasil',
+                  description: `Selamat anda telah mendapatkan vouchers ${this.vouchersStore.dataItems.name} - ${this.vouchersStore.skuName}`,
+                  placement:'topRight',
+                  duration: 5,
+                });
+              };
+              this.globalUI.hideDialogLoading();
+              // this.props.history.push(LINKS.TRANSACTION)
+              openNotificationWithIcon('success');
+              this.setState({
+                stepIndex: stepIndex + 1,
+                finished: stepIndex >= 2,
+              });
+            })
+            .catch(err => {
+              this.globalUI.openSnackbar(err.message);
+              console.error(err, 'ini errornya');
+            });
+        },
+        onCancel: () => {},
+      });
+    }else if(stepIndex === 2){
+      this.props.history.push(LINKS.TRANSACTION);
+    }else{
+      this.setState({
+        stepIndex: stepIndex + 1,
+        finished: stepIndex >= 2,
+      });
+    }
+  };
+
+  handlePrev = () => {
+    const {stepIndex} = this.state;
+    if (stepIndex > 0) {
+      this.setState({stepIndex: stepIndex - 1});
+    }
+  };
+
+  renderButton = () => {
+    return(
+      <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
+        <FlatButton
+          label="Back"
+          disabled={this.state.stepIndex === 2}
+          onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}
+          style={{marginRight: 12}}
+        />
+        <RaisedButton
+          label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
+          primary={true}
+          onClick={this.handleNext}
+        />
+      </div>
+    );
+  };
+
+  getStepContent(stepIndex) {
+    switch (stepIndex) {
+      case 0:
+        return <CheckoutVouchers button={this.renderButton} vouchersStore={this.vouchersStore} />;
+      case 1:
+        return <PaymentVouchers button={this.renderButton} vouchersStore={this.vouchersStore}/>;
+      case 2:
+        return <FinishVouchers button={this.renderButton}/>;
+      default:
+        return 'You\'re a long way from home sonny jim!';
+    }
+  }
+
+  render() {
+    const {finished, stepIndex} = this.state;
+    const contentStyle = {margin: '0 16px'};
+
+    if(!this.vouchersStore.dataItems.name){
+      return <div></div>
+    }
+
+    return(
+      <div className={'stepper'}>
+        {/*<div className={'divider-container'}>*/}
+          {/*<FlatButton*/}
+            {/*className="headerMenu"*/}
+            {/*hoverColor="#f1f5f9"*/}
+            {/*style={{ background: '#ffffff00' }}*/}
+            {/*onClick={() => this.props.history.goBack()}*/}
+            {/*label="Back"*/}
+            {/*primary={true}*/}
+            {/*icon={<NavigationArrowBack />}*/}
+          {/*/>*/}
+          {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
+        {/*</div>*/}
+        <div className={'stepper-container'}>
+          <Stepper activeStep={stepIndex}>
+            <Step>
+              <StepLabel>Checkout your Voucher</StepLabel>
+            </Step>
+            <Step>
+              <StepLabel>Process your Payment</StepLabel>
+            </Step>
+            <Step>
+              <StepLabel>Finish</StepLabel>
+            </Step>
+          </Stepper>
+          <Divider style={{marginBottom:10,marginTop:10}} />
+          <div style={contentStyle}>
+            {finished ? (
+              <p>
+                <a
+                  href="#"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    this.setState({stepIndex: 0, finished: false});
+                  }}
+                >
+                  Click here
+                </a> to reset the example.
+              </p>
+            ) : (
+              <div>
+                <p>{this.getStepContent(stepIndex)}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
--- a/src/common/pages/Vouchers/Stepper/style.scss
+++ b/src/common/pages/Vouchers/Stepper/style.scss
@@ -0,0 +1,9 @@
+.stepper{
+  margin-top: 5vh;
+  .divider-container{
+    max-width: 65vw;
+  }
+  .stepper-container{
+    max-width: 65vw;
+  }
+}
--- a/src/common/routes.js
+++ b/src/common/routes.js
@@ -118,7 +118,8 @@ export const LINKS = {
  PAYMENT_VOUCHERS: '/app/vouchers/payment',
  CART_DETAIL: '/app/cart',
  TRANSACTION: '/app/transaction',
-  OTP : '/login/otp'
+  OTP : '/login/otp',
+  VOUCHER_STEPPER: '/app/vouchers/buy',
 };

@inject('appstate')