From e7012b3382e2463894839c503a8f78f1d46c3391 Mon Sep 17 00:00:00 2001
From: enggar_ganteng <enggardamarsaraswata@gmail.com>
Date: Thu, 3 Jan 2019 18:44:27 +0700
Subject: [PATCH] checkout page

---
 src/common/pages/App/routes.js              |   2 +
 src/common/pages/Vouchers/Checkout/index.js | 114 ++++++++++++++++++++
 src/common/pages/Vouchers/Verify/index.js   |  37 +------
 src/common/routes.js                        |   1 +
 4 files changed, 122 insertions(+), 32 deletions(-)

diff --git a/src/common/pages/App/routes.js b/src/common/pages/App/routes.js
index c917b35..b52a227 100644
--- a/src/common/pages/App/routes.js
+++ b/src/common/pages/App/routes.js
@@ -12,6 +12,7 @@ import WalletComponent from '../Wallet';
 import ItemsComponent from '../Items/index';
 import VouchersComponent from '../Vouchers/index';
 import VerifyVouchers from '../Vouchers/Verify';
+import CheckoutVouchers from '../Vouchers/Checkout';
 import FormItems from "../Items/FormItems/FormItems";
 import FormItemAdmin from "../Items/FormItems/FormItemAdmin";
 import FormPromotion from "../Items/FormItems/FormPromotion";
@@ -85,6 +86,7 @@ export default class ComponentName extends React.Component {
         <Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
         <Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
         <Route exact component={VerifyVouchers} path={LINKS.VERIFY_VOUCHERS}/>
+        <Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
         <Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
         <Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
         <Route exact component={UploadItems} path={LINKS.FORM_UPLOAD}/>
diff --git a/src/common/pages/Vouchers/Checkout/index.js b/src/common/pages/Vouchers/Checkout/index.js
index e69de29..c61d8dc 100644
--- a/src/common/pages/Vouchers/Checkout/index.js
+++ b/src/common/pages/Vouchers/Checkout/index.js
@@ -0,0 +1,114 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {
+    FlatButton
+} from 'material-ui';
+import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker, Alert, Input ,Avatar} from 'antd';
+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';
+import Search from 'material-ui/svg-icons/action/search';
+import Timer from 'react-compound-timer';
+
+@inject('appstate')
+@observer
+export default class CheckoutVouchers 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;
+  }
+
+  componentDidMount() {
+
+  }
+
+  render() {
+
+    return (
+    <div className="wallet containerMiddle">
+        <div className="row">
+            <div className="col s0 m2 l2" />
+            <div className="col s12 m8 l8">
+                <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: 20, marginTop: 20, marginLeft:20 }} />
+                    <Card title={<div style={{display:'flex',justifyContent:'center'}}>
+                                <h2 style={{color:'grey'}}>
+                                    Detail Pembelian
+                                </h2>
+                            </div>}>
+                        <div className="row">
+                            <div className="col s4 m4 l4">
+                                <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
+                                    <Avatar size={100} src="https://png.pngtree.com/element_origin_min_pic/17/09/17/d78f6e704459b24bcdd0f32943d29145.jpg" />
+                                </div>
+                            </div>
+                            <div className="col s4 m8 l8">
+                            <div style={{alignItems:'center'}}>
+                                <div className="row">
+                                    <div className="col s12 m6 6">
+                                        <h3>Jenis Layanan</h3>
+                                    </div>
+                                    <div className="col s12 m6 6">
+                                        <h3 style={{color:'grey'}}> : KFC Rp.50.000,00</h3>
+                                    </div>
+                                </div>
+                                <div className="row">
+                                    <div className="col s12 m6 6">
+                                        <h3>Point</h3>
+                                    </div>
+                                    <div className="col s12 m6 6">
+                                        <h3 style={{color:'grey'}}> : 150,000</h3>
+                                    </div>
+                                </div>
+                            </div>
+                            </div>
+                        </div>
+                    </Card>
+                </div>
+                <div className="row">
+                    <Card >
+                        <div className="row">
+                            <div style={{display:'flex',justifyContent:'space-between'}}>
+                                <h3 style={{color:'grey'}}>Poin</h3>
+                                <h3 style={{color:'grey'}}>150,000</h3>
+                            </div>
+                        </div>
+                        <Divider />
+                        <div className="row">
+                            <div style={{display:'flex',justifyContent:'space-between'}}>
+                                <h3>Total Pembayaran Poin</h3>
+                                <h3 style={{color:'#FF6F00'}}>150,000</h3>
+                            </div>
+                        </div>
+                        <div className="row">
+                            <Button type="primary" block>Lanjut</Button>
+                        </div>
+                    </Card>
+                </div>
+            </div>
+            <div className="col s0 m2 l2" />
+        </div>
+    </div>
+    )
+  }
+}
diff --git a/src/common/pages/Vouchers/Verify/index.js b/src/common/pages/Vouchers/Verify/index.js
index ca9ed31..a99a169 100644
--- a/src/common/pages/Vouchers/Verify/index.js
+++ b/src/common/pages/Vouchers/Verify/index.js
@@ -13,6 +13,7 @@ import EmptyComponent from '../../EmptyComponent';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 import Search from 'material-ui/svg-icons/action/search';
 import Timer from 'react-compound-timer';
+import {LINKS} from "../../../routes";
 
 @inject('appstate')
 @observer
@@ -22,9 +23,6 @@ export default class VerifyVouchers extends React.Component {
     this.props = props;
     this.state = {
       value: 1,
-      valueMinimal: 0,
-      valueMaximal: 0,
-      changeSearch:false,
     };
     this.defaultState = Object.assign({}, this.state);
     this.http = props.appstate.http;
@@ -36,38 +34,10 @@ export default class VerifyVouchers extends React.Component {
 
   }
 
-  handleChangeMinimal = (valueMinimal) => {
-    this.setState({ valueMinimal });
-  };
-
-  handleChangeMaximal = (valueMaximal) => {
-    this.setState({ valueMaximal });
-  };
-
-  handleBlur = () => {
-    console.log('blur');
-  }
-
-  handleFocus = () => {
-    console.log('focus');
-  }
-
-  handleChangeSearch = () => {
-    this.setState({
-        changeSearch : true
-    })
-  }
-
-  handleChangeSearchFalse = () => {
-    this.setState({
-        changeSearch : false
-    })
-  }
 
   
 
   render() {
-    const { valueMinimal, valueMaximal } = this.state;
 
     return (
     <div className="wallet containerMiddle">
@@ -109,7 +79,10 @@ export default class VerifyVouchers extends React.Component {
                     <div className="row">
                         <div style={{display:'flex',justifyContent:'flex-end'}}>
                             <Button type="danger">Batal</Button>
-                            <Button type="primary" style={{marginLeft:10}}>OK</Button>
+                            <Button type="primary" style={{marginLeft:10}} onClick={() => {
+                        this.props.history.push(LINKS.CHECKOUT_VOUCHERS);
+                        console.log('checkout');
+                      }}>OK</Button>
                         </div>
                     </div>
                 </Card>
diff --git a/src/common/routes.js b/src/common/routes.js
index 22034bb..12dff0e 100644
--- a/src/common/routes.js
+++ b/src/common/routes.js
@@ -112,6 +112,7 @@ export const LINKS = {
   CAR_SEARCH:'/app/car/search',
   VOUCHERS: '/app/vouchers',
   VERIFY_VOUCHERS: '/app/vouchers/verify',
+  CHECKOUT_VOUCHERS: '/app/vouchers/checkout',
   CART_DETAIL: '/app/cart',
 };