update: adjust stepper component to using material-ui v3

package-lock.json

@@ -7894,6 +7894,7 @@
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7905,15 +7906,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -8003,7 +8007,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -8012,6 +8017,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -8034,6 +8040,7 @@
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -8120,7 +8127,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -8129,6 +8137,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8214,6 +8223,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

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

@@ -1,26 +1,40 @@
 import {inject, observer} from "mobx-react";
+import PropTypes from 'prop-types';
 import React from "react";
 import './style.scss';
-import {
+import Button from '@material-ui/core/Button';
-  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 {Divider} from "@material-ui/core";
 import CheckoutVouchers from "../Checkout";
 import PaymentVouchers from "../Payment";
 import {LINKS} from "../../../routes";
 import {notification, Modal} from "antd";
 import FinishVouchers from "../Finish";
+import { withStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
 
 const confirm = Modal.confirm;
 
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+  },
+  input: {
+    display: 'none',
+  },
+  divider: {
+    marginBottom: 10,
+    marginTop: 10,
+  }
+});
+
 @inject('appstate')
 @observer
-export default class VoucherStepperComponent extends React.Component {
+export class VoucherStepper extends React.Component {
 
   constructor(props) {
     super(props);
@@ -38,7 +52,7 @@ export default class VoucherStepperComponent extends React.Component {
   componentWillMount() {
     if(!this.vouchersStore.dataItems.name){
       // alert('jalan')
-      this.props.history.push(LINKS.VOUCHERS);
+      this.props.history.push(LINKS.DASHBOARD);
     }
     // alert('engga')
   }
@@ -94,19 +108,24 @@ export default class VoucherStepperComponent extends React.Component {
   };
 
   renderButton = () => {
+    const {classes} = this.props;
     return(
       <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
-        <FlatButton
+        {/*<FlatButton*/}
-          label="Back"
+          {/*label="Back"*/}
-          disabled={this.state.stepIndex === 2}
+          {/*disabled={this.state.stepIndex === 2}*/}
-          onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}
+          {/*onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}*/}
-          style={{marginRight: 12}}
+          {/*style={{marginRight: 12}}*/}
-        />
+        {/*/>*/}
-        <RaisedButton
+        <Button disabled={this.state.stepIndex === 2} onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev} className={classes.button}>Back</Button>
-          label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
+        <Button variant="contained" color="primary" className={classes.button} onClick={this.handleNext}>
-          primary={true}
+          {this.state.stepIndex === 2 ? 'Finish' : 'Next'}
-          onClick={this.handleNext}
+        </Button>
-        />
+        {/*<RaisedButton*/}
+          {/*label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}*/}
+          {/*primary={true}*/}
+          {/*onClick={this.handleNext}*/}
+        {/*/>*/}
       </div>
     );
   };
@@ -126,6 +145,7 @@ export default class VoucherStepperComponent extends React.Component {
 
   render() {
     const {finished, stepIndex} = this.state;
+    const {classes} = this.props;
     const contentStyle = {margin: '0 16px'};
 
     if(!this.vouchersStore.dataItems.name){
@@ -158,25 +178,10 @@ export default class VoucherStepperComponent extends React.Component {
               <StepLabel>Finish</StepLabel>
             </Step>
           </Stepper>
-          <Divider style={{marginBottom:10,marginTop:10}} />
+          <Divider component="div" className={classes.divider} />
+          {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
           <div style={contentStyle}>
-            {finished ? (
+            {this.getStepContent(stepIndex)}
-              <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>
@@ -184,3 +189,9 @@ export default class VoucherStepperComponent extends React.Component {
   }
 
 }
+
+VoucherStepper.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(VoucherStepper);

src/common/pages/Vouchers/Stepper/style.scss

@@ -1,9 +1,13 @@
 .stepper{
   margin-top: 5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  //background-color: #fff;
   .divider-container{
-    max-width: 65vw;
+    max-width: 75vw;
   }
   .stepper-container{
-    max-width: 65vw;
+    max-width: 75vw;
   }
 }