From 8935bca9b0f300c5c4f84bb067bd27ec89583a05 Mon Sep 17 00:00:00 2001
From: Hasta Ragil Saputra <hasta.ragil@gmail.com>
Date: Thu, 31 Jan 2019 19:31:49 +0700
Subject: [PATCH] fix: register flow

---
 src/common/pages/Register/index.js          |  10 +-
 src/common/pages/RegisterCompleted/index.js | 112 ++++++++++++++++++++
 src/common/pages/RegisterNew/index.js       |  19 +++-
 src/common/routes.js                        |   3 +
 4 files changed, 134 insertions(+), 10 deletions(-)
 create mode 100644 src/common/pages/RegisterCompleted/index.js

diff --git a/src/common/pages/Register/index.js b/src/common/pages/Register/index.js
index e7af026..0fb95aa 100644
--- a/src/common/pages/Register/index.js
+++ b/src/common/pages/Register/index.js
@@ -68,12 +68,12 @@ export default class ComponentName extends React.Component {
         .authStore
         .register(value)
         .then(res => {
-          notification.open({
-            message: 'Register Success',
-            description: 'Please check your email to continue'
-          });
+          // notification.open({
+          //   message: 'Register Success',
+          //   description: 'Please check your email to continue'
+          // });
           this.props.history.push({
-            pathname:LINKS.LOGIN
+            pathname:LINKS.REGISTER_COMPLETED
           });
           this.setState({isLoading: false, isSuccess: true})
           // this
diff --git a/src/common/pages/RegisterCompleted/index.js b/src/common/pages/RegisterCompleted/index.js
new file mode 100644
index 0000000..fc778ba
--- /dev/null
+++ b/src/common/pages/RegisterCompleted/index.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import withStyles from "@material-ui/core/styles/withStyles";
+import {styles} from '../Register/registerStyle';
+import {notification} from 'antd';
+
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import Button from '@material-ui/core/Button';
+import Hidden from '@material-ui/core/Hidden';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import IconButton from '@material-ui/core/IconButton';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Snackbar from '@material-ui/core/Snackbar';
+
+import { Link } from 'react-router-dom';
+import {inject, observer} from 'mobx-react';
+import {LINKS} from "../../routes";
+
+@withStyles(styles)
+@inject('appstate')
+@observer
+export default class RegisterCompletedComponent extends React.Component{
+
+    constructor(props) {
+        super(props);
+        this.props = props;
+        this.state = {
+          email: "",
+          password: "",
+          showPassword : false,
+          isLoading: false,
+          loginFailed: false,
+          isNeedEmailVerification: false,
+        };
+        this.defaultState = Object.assign({}, this.state);
+        this.authStore = props.appstate.auth;
+      }
+
+  componentDidMount() {
+
+  }
+
+  handleChange = name => event => {
+        this.setState({
+            [name]: event.target.value,
+        });
+    };
+
+    viewPassword = ()=>{
+        this.setState({
+            showPassword : !this.state.showPassword
+        })
+    };
+
+    render(){
+        const { classes } = this.props;
+        return (
+            <div className={classes.container}>
+                <Grid container spacing={0} className={classes.gridContainer}>
+                    <Grid item xs={12} className={classes.logoContainer}>
+                        <img src={require('../../../../assets/images/login/logo_new.png')} className={classes.logo} />
+                    </Grid>
+                    <Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
+                        <Grid container spacing={24} className={classes.registerPaper}>
+                            <Hidden smDown>
+                                <Grid item xs={6}>
+                                    <img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
+                                    <Typography style={{color : '#FFF'}} variant={"h6"}>
+                                        Welcome to BTN Points
+                                    </Typography>
+                                    <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
+                                        Sign in to get various voucher and items
+                                    </Typography>
+                                </Grid>
+                            </Hidden>
+                            <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
+                              <Paper className={classes.formRegister}>
+                                <Typography variant="h6" gutterBottom>
+                                  Registration Completed
+                                </Typography>
+                                <Typography variant="body1" gutterBottom>
+                                  We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.
+                                </Typography>
+
+                                <div style={{padding : 5,marginTop : 20}}>
+
+                                  <Link
+                                    to={LINKS.LOGIN}>
+                                    <Button fullWidth variant="contained" style={{background:'#ffeb3b'}}>
+                                      Back to Login
+                                    </Button>
+                                  </Link>
+                                </div>
+                              </Paper>
+
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </div>
+        )
+    }
+}
diff --git a/src/common/pages/RegisterNew/index.js b/src/common/pages/RegisterNew/index.js
index 88e3aaf..22b9208 100644
--- a/src/common/pages/RegisterNew/index.js
+++ b/src/common/pages/RegisterNew/index.js
@@ -139,6 +139,7 @@ class RegisterPage extends React.Component {
         }
 
         this.setState({ isLoading: true });
+
         let data = {
             fullname: this.state.full_name,
             email: this.state.email,
@@ -157,10 +158,14 @@ class RegisterPage extends React.Component {
             additional_data: {}
         };
         this.authStore.register(data).then(res => {
-            message.success("Please check your email to confirm your account");
+            // message.success("Please check your email to confirm your account");
+
+
+
             setTimeout(() => {
                 this.setState({ isLoading: false });
-                this.props.history.push(LINKS.LOGIN);
+              this.props.history.push(LINKS.REGISTER_COMPLETED);
+            //     this.props.history.push(LINKS.LOGIN);
             }, 250);
         }).catch(err => {
             this.setState({ isLoading: false });
@@ -214,11 +219,11 @@ class RegisterPage extends React.Component {
         name: 'file',
         multiple: false,
         action: appConfig.apiUrl + 'upload',
-        customRequest: ({file, onProgress}) => {
+        customRequest: ({file, onProgress, onSuccess}) => {
           this.setState({
             uploading: true
           });
-          return this.http.upload(file)
+          this.http.upload(file)
             .then(res => {
               this.setState({
                 [`upload_${key}`]: appConfig.apiUrl + res.path.slice(1,res.path.length)
@@ -236,7 +241,7 @@ class RegisterPage extends React.Component {
 
               fileList[selectedIndex].status = "done";
               fileList[selectedIndex].path = res.path;
-
+              onSuccess(fileList[selectedIndex]);
               // form.setFieldsValue({path: res.path});
 
               this.setState({
@@ -245,6 +250,10 @@ class RegisterPage extends React.Component {
                 [`fileList_${key}`]: [fileList[selectedIndex]]
               });
             });
+
+          return {
+            abort: () => {}
+          }
         },
         fileList: this.state[`fileList_${key}`],
         onChange: (info) => this.uploadOnChange(key, info),
diff --git a/src/common/routes.js b/src/common/routes.js
index 14e8ab8..1bf7d7d 100644
--- a/src/common/routes.js
+++ b/src/common/routes.js
@@ -11,6 +11,7 @@ import InviteConfirmationComponent from './pages/InviteConfirmation';
 import InviteConfirmationLoginComponent from './pages/InviteConfirmationLogin/index';
 import AcceptInvite from "./pages/AcceptInvite/index";
 import OtpPage from "./pages/Otp";
+import RegisterCompletedComponent from "./pages/RegisterCompleted";
 
 export const LINKS = {
   ROOT: '/',
@@ -78,6 +79,7 @@ export const LINKS = {
   ORDER_DETAIL_AIRLINES: '/app/order_detail_airline/:id',
   ORDER_DETAIL_AIRLINES_WO_ID: '/app/order_detail_airline',
   REGISTER: '/register',
+  REGISTER_COMPLETED: '/register_completed',
   LOGIN: '/login',
   FORGOT_PASSWORD: '/forgot_password',
   ACCEPT_INVITE: '/register_store',
@@ -159,6 +161,7 @@ export default class Routes extends React.Component {
               pathname: this.authStore.isLoggedIn ? LINKS.DASHBOARD : LINKS.LOGIN
             }}/>)}/>
           <Route exact path={LINKS.REGISTER} component={RegisterComponent}/>
+          <Route exact path={LINKS.REGISTER_COMPLETED} component={RegisterCompletedComponent}/>
           <Route exact path={LINKS.LOGIN} component={LoginBTNComponent}/>
           <Route exact path={LINKS.OTP} component={OtpPage}/>
           <Route exact path={LINKS.FORGOT_PASSWORD} component={ForgotPasswordComponent}/>