verify

package-lock.json

@@ -13262,14 +13262,25 @@
       }
     },
     "react": {
-      "version": "16.6.3",
+      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
-      "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==",
+      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.11.2"
+        "scheduler": "^0.12.0"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.12.0",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
+          "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
       }
     },
     "react-addons-create-fragment": {
@@ -13333,6 +13344,15 @@
         "tinycolor2": "^1.4.1"
       }
     },
+    "react-compound-timer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/react-compound-timer/-/react-compound-timer-1.0.7.tgz",
+      "integrity": "sha512-WDGkuSJWgEHYSfZ0pXRowcaInoAWkNWI6ax/RebOIvGloQXtUK63Xw+pNWewPxAJDOqSaOGdtPBNHmiIQ+K0Hw==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "react": "^16.4.1"
+      }
+    },
     "react-confirm": {
       "version": "0.1.18",
       "resolved": "https://registry.npmjs.org/react-confirm/-/react-confirm-0.1.18.tgz",

package.json

@@ -84,9 +84,9 @@
     "rc-queue-anim": "^1.4.0",
     "rc-table": "^6.1.0",
     "rc-util": "^4.3.0",
-    "react": "^16.2.0",
     "react-addons-shallow-compare": "^15.6.2",
     "react-color": "^2.13.8",
+    "react-compound-timer": "^1.0.7",
     "react-confirm": "^0.1.16",
     "react-dom": "^16.5.2",
     "react-drag-sortable": "^1.0.5",

src/common/pages/App/index.js

@@ -505,7 +505,7 @@ export default class App extends React.Component {
                     );
                   }) :  <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
               }
-                <Link to={`${LINKS.INBOX}/notification`}>
+                <Link to={`${LINKS.CART_DETAIL}`}>
                     <ListItem
                       primaryText={
                         <div style={{textAlign:'center'}}>
@@ -589,7 +589,7 @@ export default class App extends React.Component {
                     );
                   }) :  <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
               }
-                <Link to={`${LINKS.INBOX}/notification`}>
+                <Link to={`${LINKS.CART_DETAIL}`}>
                     <ListItem
                       primaryText={
                         <div style={{textAlign:'center'}}>

src/common/pages/App/routes.js

@@ -11,6 +11,7 @@ import SettingComponent from './../Setting';
 import WalletComponent from '../Wallet';
 import ItemsComponent from '../Items/index';
 import VouchersComponent from '../Vouchers/index';
+import VerifyVouchers from '../Vouchers/Verify';
 import FormItems from "../Items/FormItems/FormItems";
 import FormItemAdmin from "../Items/FormItems/FormItemAdmin";
 import FormPromotion from "../Items/FormItems/FormPromotion";
@@ -83,6 +84,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={VerifyVouchers} path={LINKS.VERIFY_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}/>

src/common/pages/Vouchers/Verify/index.js

@@ -0,0 +1,122 @@
+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 } 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 VerifyVouchers extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      value: 1,
+      valueMinimal: 0,
+      valueMaximal: 0,
+      changeSearch:false,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+  }
+
+  componentDidMount() {
+
+  }
+
+  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">
+        <div className="row">
+            <div className="col s0 m2 l2" />
+            <div className="col s12 m8 l8">
+                <Card>
+                    <div className="row">
+                        <div style={{display:'flex',justifyContent:'center'}}>
+                            <h2 style={{color:'grey'}}>
+                                Verifikasi Keamanan
+                            </h2>
+                        </div>
+                    </div>
+                    <div className="row">
+                        <Alert message="Untuk melanjutkan transaksi, masukan 6-digit kode verifikasi yang telah dikirim." type="info" />
+                    </div>
+                    <div className="row">
+                        <p>Kode verifikasi telah dikirim ke ****.****.6523</p>
+                    </div>
+                    <div className="row">
+                        <Input placeholder="Masukan Kode Verifikasi" />
+                    </div>
+                    <div className="row">
+
+                    <Button style={{marginRight:10}}>Kirim ulang melalui SMS (<Timer
+                        initialTime={70000}
+                        lastUnit="s"
+                        direction="backward"
+                    >
+                        {() => (
+                            <React.Fragment>
+                                <Timer.Seconds />
+                            </React.Fragment>
+                        )}
+                    </Timer>)</Button>
+                    <Button>Telepon Saya</Button>
+                    </div>
+                    <div className="row">
+                        <div style={{display:'flex',justifyContent:'flex-end'}}>
+                            <Button type="danger">Batal</Button>
+                            <Button type="primary" style={{marginLeft:10}}>OK</Button>
+                        </div>
+                    </div>
+                </Card>
+            </div>
+            <div className="col s0 m2 l2" />
+        </div>
+    </div>
+    )
+  }
+}

src/common/routes.js

@@ -111,6 +111,7 @@ export const LINKS = {
   CAR:'/app/car',
   CAR_SEARCH:'/app/car/search',
   VOUCHERS: '/app/vouchers',
+  VERIFY_VOUCHERS: '/app/vouchers/verify',
   CART_DETAIL: '/app/cart',
 };