feat: register pages routes guards.

feat: retrieve all organizations details to authenticated user.
feat: redux organization reducers and actions.

client/src/containers/Authentication/Login.js

@@ -19,6 +19,7 @@ import Icon from 'components/Icon';
 import { If } from 'components';
 
 import withAuthenticationActions from './withAuthenticationActions';
+import withOrganizationsActions from 'containers/Organization/withOrganizationActions';
 
 import { compose } from 'utils';
 
@@ -29,6 +30,7 @@ const ERRORS_TYPES = {
 };
 function Login({
   requestLogin,
+  requestOrganizationsList,
 }) {
   const { formatMessage } = useIntl();
   const history = useHistory();
@@ -168,4 +170,5 @@ function Login({
 
 export default compose(
   withAuthenticationActions,
+  withOrganizationsActions,
 )(Login);

client/src/containers/Authentication/Register/RegisterLeftSection.js

@@ -1,12 +1,23 @@
-import React, { useState } from 'react';
-import { Icon } from 'components';
+import React, { useState, useCallback } from 'react';
+import { Icon, If } from 'components';
 import { FormattedMessage as T } from 'react-intl';
 
-export default function RegisterLeftSection({
+import withAuthentication from 'containers/Authentication/withAuthentication';
+import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
 
+import { compose } from 'utils';
+
+
+function RegisterLeftSection({
+  requestLogout,
+  isAuthorized
 }) {
   const [org] = useState('LibyanSpider');
 
+  const onClickLogout = useCallback(() => {
+    requestLogout();
+  }, [requestLogout]);
+
   return (
     <section className={'register-page__left-section'}>
       <div className={'content'}>
@@ -27,17 +38,18 @@ export default function RegisterLeftSection({
           <T id={'you_have_a_bigcapital_account'} />
         </p>
 
-        <div className={'content-org'}>
-          <span>
-            <T id={'welcome'} />
-            {org},
-          </span>
-          <span>
-            <a href={'#!'}>
-              <T id={'sign_out'} />
-            </a>
-          </span>
-        </div>
+
+        <If condition={!!isAuthorized}>
+          <div className={'content-org'}>
+            <span>
+              <T id={'welcome'} />
+              {org},
+            </span>
+            <span>
+              <a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a>
+            </span>
+          </div>
+        </If>
 
         <div className={'content-contact'}>
           <a href={'#!'}>
@@ -54,4 +66,9 @@ export default function RegisterLeftSection({
       </div>
     </section>
   )
-}
+}
+
+export default compose(
+  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
+  withAuthenticationActions,
+)(RegisterLeftSection);

client/src/containers/Authentication/Register/RegisterRightSection.js

@@ -1,26 +1,55 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { Wizard, Steps, Step } from 'react-albus';
+import { useHistory } from "react-router-dom";
 import RegisterWizardSteps from './RegisterWizardSteps';
-import registerRoutes from 'routes/register';
+import PrivateRoute from 'components/PrivateRoute';
+
+import RegisterUserForm from 'containers/Authentication/Register/RegisterUserForm';
+import RegisterSubscriptionForm from 'containers/Authentication/Register/RegisterSubscriptionForm';
+import RegisterOrganizationForm from 'containers/Authentication/Register/RegisterOrganizationForm';
 
 export default function RegisterRightSection () {
+  const history = useHistory();
 
   return (
     <section className={'register-page__right-section'}>
-      <RegisterWizardSteps />
+      <Wizard
+        basename={'/register'}
+        history={history}
+        render={({ step, steps }) => (
+          <div>
+            <RegisterWizardSteps currentStep={steps.indexOf(step) + 1} />
 
-      <div class="register-page-form">
-        <Switch>
-          { registerRoutes.map((route, index) => (
-            <Route
-              exact={route.exact}
-              key={index}
-              path={`${route.path}`}
-              component={route.component}
-            />
-          )) }
-        </Switch>
-      </div>
+            <TransitionGroup>
+              <CSSTransition
+                key={step.id}
+                classNames="example"
+                timeout={{ enter: 500, exit: 500 }}
+              >
+                <div class="register-page-form">
+                  <Steps key={step.id} step={step}>
+                    <Step id="user">
+                      <RegisterUserForm />
+                    </Step>
+
+                    <Step id="subscription">
+                      <PrivateRoute component={RegisterSubscriptionForm} />
+                    </Step>
+
+                    <Step id="organization">
+                      <PrivateRoute component={RegisterOrganizationForm} />
+                    </Step>
+
+                    <Step id="congratulations">
+                      <h1 className="text-align-center">Ice King</h1>
+                    </Step>
+                  </Steps>
+                </div>
+              </CSSTransition>
+            </TransitionGroup>
+        </div>
+      )} />
     </section>
   )
 }

client/src/containers/Authentication/Register/RegisterUserForm.js

@@ -77,17 +77,12 @@ function RegisterUserForm({ requestRegister, requestLogin }) {
     onSubmit: (values, { setSubmitting, setErrors }) => {
       requestRegister(values)
         .then((response) => {
-          // AppToaster.show({
-          //   message: formatMessage({
-          //     id: 'welcome_organization_account_has_been_created',
-          //   }),
-          //   intent: Intent.SUCCESS,
-          // });
           requestLogin({
             crediential: values.email,
             password: values.password,
           })
             .then(() => {
+              history.push('/register/subscription');
               setSubmitting(false);
             })
             .catch((errors) => {
@@ -98,7 +93,6 @@ function RegisterUserForm({ requestRegister, requestLogin }) {
                 intent: Intent.SUCCESS,
               });
             });
-          // history.push('/auth/login');
         })
         .catch((errors) => {
           if (errors.some((e) => e.type === 'PHONE_NUMBER_EXISTS')) {

client/src/containers/Organization/withOrganizationActions.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import {
+  fetchOrganizations,
+} from 'store/organizations/organizations.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  requestOrganizationsList: () => dispatch(fetchOrganizations()),
+});
+
+export default connect(null, mapDispatchToProps);

client/src/containers/Organization/withOrganizationByOrgId.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  getOrganizationByOrgIdFactory,
+} from 'store/organizations/organizations.selector';
+
+export default (mapState) => {
+  const getOrganizationByOrgId = getOrganizationByOrgIdFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      organization: getOrganizationByOrgId(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/Organization/withOrganizationByTenId.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import {
+  getOrganizationByTenantIdFactory,
+} from 'store/organizations/organizations.selector';
+
+export default (mapState) => {
+  const getOrgByTenId = getOrganizationByTenantIdFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      organization: getOrgByTenId(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};