Merge pull request #80 from JincorTech/feature/issue-77

Feature/issue 77

src/components/auth/ConfirmEmailForm/index.js

@@ -9,9 +9,13 @@ import Button from '../../common/Button';
 
 class ConfirmEmailForm extends Component {
   componentWillMount() {
-    const { email, verificationId } = this.props;
+    const { email, verificationId, code } = this.props;
     this.props.change('verificationId', verificationId);
     this.props.change('email', email);
+
+    if (code !== '') {
+      this.props.change('code', code);
+    }
   }
 
   render() {

src/containers/auth/AuthWrapper/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import s from './styles.css';
+
+import Alert from '../../../components/app/Alert';
+
+const AuthWrapper = (props) => {
+  const { children, step } = props;
+
+  const renderAlert = () => {
+    if (step === 'wallet') {
+      return (
+        <Alert>
+          Save this information in a secure place.
+          The access to your funds will be irrecoverable in case you lose it.
+        </Alert>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div className={s.wrapper}>
+      {renderAlert()}
+      <div className={s.form}>
+        <div className={s.logo}>
+          <img src={require('../../../assets/images/logo.svg')}/>
+        </div>
+
+        <div className={s.body}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default connect((state) => ({
+  step: state.auth.signUp.step
+}))(AuthWrapper);

src/containers/auth/SignUp/index.js

@@ -1,66 +1,98 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { signUp, confirmEmail, endSignup } from '../../../redux/modules/auth/signUp';
+import {
+  signUp,
+  confirmEmail,
+  endSignup,
+  changeStep,
+  setActivationData
+} from '../../../redux/modules/auth/signUp';
 
 import SignUpForm from '../../../components/auth/SignUpForm';
 import ConfirmEmailForm from '../../../components/auth/ConfirmEmailForm';
 import WalletData from '../../../components/auth/WalletData';
 
-const SignUp = (props) => {
-  const {
-    step,
-    spinner,
-    verificationId,
-    email,
-    accessToken,
-    wallets,
-    params: {
-      referralCode
-    },
-    endSignup
-  } = props;
+class SignUp extends Component {
+  componentWillMount() {
+    const {
+      location: {
+        query
+      },
+      changeStep,
+      setActivationData
+    } = this.props;
 
-  const renderStep = (currentStep) => {
-    switch (currentStep) {
-      case 'signup':
-        return (
-          <SignUpForm
-            spinner={spinner}
-            onSubmit={signUp}
-            referralCode={referralCode}/>
-        );
+    if (query.type === 'activate') {
+      setActivationData({
+        email: query.email,
+        verificationId: query.verificationId,
+        code: query.code
+      });
 
-      case 'pin':
-        return (
-          <ConfirmEmailForm
-            spinner={spinner}
-            onSubmit={confirmEmail}
-            email={email}
-            verificationId={verificationId}/>
-        );
+      changeStep('pin');
+    }
+  }
 
-      case 'wallet':
-        return (
-          <WalletData
-            accessToken={accessToken}
-            wallets={wallets}
-            endSignup={endSignup}/>
-        );
+  render() {
+    const {
+      step,
+      spinner,
+      verificationId,
+      email,
+      accessToken,
+      wallets,
+      code,
+      params: {
+        referralCode
+      },
+      endSignup
+    } = this.props;
 
-      default:
-        return <div>Something went wrong</div>;
-    }
-  };
+    const renderStep = (currentStep) => {
+      switch (currentStep) {
+        case 'signup':
+          return (
+            <SignUpForm
+              spinner={spinner}
+              onSubmit={signUp}
+              referralCode={referralCode}/>
+          );
+
+        case 'pin':
+          return (
+            <ConfirmEmailForm
+              code={code}
+              spinner={spinner}
+              onSubmit={confirmEmail}
+              email={email}
+              verificationId={verificationId}/>
+          );
 
-  return renderStep(step);
-};
+        case 'wallet':
+          return (
+            <WalletData
+              accessToken={accessToken}
+              wallets={wallets}
+              endSignup={endSignup}/>
+          );
+
+        default:
+          return <div>Something went wrong</div>;
+      }
+    };
+
+    return renderStep(step);
+  }
+}
 
 export default connect(
   (state) => ({
     ...state.auth.signUp
   }),
   {
-    endSignup
+    endSignup,
+    changeStep,
+    setActivationData
   }
 )(SignUp);

src/containers/dashboard/BalanceInfo/index.js

@@ -90,10 +90,12 @@ class BalanceInfo extends Component {
           </div>
         </div>
 
-        <div className={s.block}>
-          <div className={s.val}>{dashboard.daysLeft}</div>
-          <div className={s.label}>Days to go</div>
-        </div>
+        {dashboard.daysLeft > 0
+          ? (<div className={s.block}>
+            <div className={s.val}>{dashboard.daysLeft}</div>
+            <div className={s.label}>Days to go</div>
+          </div>)
+          : null}
       </div>
     );
   }

src/redux/modules/auth/signUp.js

@@ -5,11 +5,15 @@ export const SIGN_UP = 'auth/signUp/SIGN_UP';
 export const CONFIRM_EMAIL = 'auth/signUp/CONFIRM_EMAIL';
 export const END_SIGNUP = 'auth/signUp/END_SIGNUP';
 export const RESET_STORE = 'auth/signUp/RESET_STORE';
+export const CHANGE_STEP = 'auth/signUp/CHANGE_STEP';
+export const SET_ACTIVATION_DATA = 'auth/signUp/SET_ACTIVATION_DATA';
 
 export const signUp = createSubmitAction(SIGN_UP);
 export const confirmEmail = createSubmitAction(CONFIRM_EMAIL);
 export const endSignup = createAction(END_SIGNUP);
 export const resetStore = createAction(RESET_STORE);
+export const changeStep = createAction(CHANGE_STEP);
+export const setActivationData = createAction(SET_ACTIVATION_DATA);
 
 const initialState = from({
   step: 'signup',
@@ -62,6 +66,20 @@ export default createReducer({
     })
   ),
 
+  [SET_ACTIVATION_DATA]: (state, { payload }) => (
+    state.merge({
+      email: payload.email,
+      verificationId: payload.verificationId,
+      code: payload.code
+    })
+  ),
+
+  [CHANGE_STEP]: (state, { payload }) => (
+    state.merge({
+      step: payload
+    })
+  ),
+
   [RESET_STORE]: (state) => (
     state.merge(initialState)
   )

src/routes.js

@@ -5,7 +5,7 @@ import { connectedRouterRedirect } from 'redux-auth-wrapper/history3/redirect';
 
 import App from './containers/app/App';
 
-import AuthWrapper from './components/auth/AuthWrapper';
+import AuthWrapper from './containers/auth/AuthWrapper';
 import SignUp from './containers/auth/SignUp';
 import SignIn from './containers/auth/SignIn';
 import RestorePassword from './containers/auth/RestorePassword';