WIP: register setup wizard pages.

client/src/containers/Authentication/withAuthentication.js

@@ -6,7 +6,7 @@ export default (mapState) => {
     const mapped = {
       isAuthorized: isAuthenticated(state),
       user: state.authentication.user,
-      currentOrganizationId: state.authentication?.tenant?.organization_id,
+      currentOrganizationId: state.authentication?.organizationId,
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Organization/withOrganization.js

@@ -0,0 +1,37 @@
+import { connect } from 'react-redux';
+import {
+  getOrganizationByIdFactory,
+  isOrganizationReadyFactory,
+  isOrganizationSeededFactory,
+  isOrganizationBuiltFactory,
+  isOrganizationSeedingFactory,
+  isOrganizationInitializingFactory,
+  isOrganizationSubscribedFactory,
+} from 'store/organizations/organizations.selectors';
+
+export default (mapState) => {
+  const getOrganizationById = getOrganizationByIdFactory();
+  const isOrganizationReady = isOrganizationReadyFactory();
+
+  const isOrganizationSeeded = isOrganizationSeededFactory();
+  const isOrganizationBuilt = isOrganizationBuiltFactory();
+
+  const isOrganizationInitializing = isOrganizationInitializingFactory();
+  const isOrganizationSeeding = isOrganizationSeedingFactory();
+
+  const isOrganizationSubscribed = isOrganizationSubscribedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      organization: getOrganizationById(state, props),
+      isOrganizationReady: isOrganizationReady(state, props),
+      isOrganizationSeeded: isOrganizationSeeded(state, props),
+      isOrganizationInitialized: isOrganizationBuilt(state, props),
+      isOrganizationSeeding: isOrganizationInitializing(state, props),
+      isOrganizationInitializing: isOrganizationSeeding(state, props),
+      isOrganizationSubscribed: isOrganizationSubscribed(state, props),
+    };
+    return (mapState) ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/Organization/withOrganizationActions.js

@@ -5,10 +5,10 @@ import {
   seedTenant,
 } from 'store/organizations/organizations.actions';
 
-export const mapDispatchToProps = (dispatch) => ({
-  requestOrganizationsList: () => dispatch(fetchOrganizations()),
-  requestBuildTenant: () => dispatch(buildTenant()),
-  requestSeedTenant: () => dispatch(seedTenant()),
+const mapDispatchToProps = (dispatch) => ({
+  requestOrganizationBuild: () => dispatch(buildTenant()),
+  requestOrganizationSeed: () => dispatch(seedTenant()),
+  requestAllOrganizations: () => dispatch(fetchOrganizations()),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Organization/withOrganizationByOrgId.js

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  getOrganizationByOrgIdFactory,
-} from 'store/organizations/organizations.selectors';
-
-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

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  getOrganizationByTenantIdFactory,
-} from 'store/organizations/organizations.selectors';
-
-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);
-};

client/src/containers/Setup/EnsureOrganizationIsNotReady.js

@@ -3,23 +3,25 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import { compose } from 'utils';
 import withAuthentication from 'containers/Authentication/withAuthentication';
-import withOrganizationByOrgId from 'containers/Organization/withOrganizationByOrgId';
+import withOrganization from 'containers/Organization/withOrganization';
 
 function EnsureOrganizationIsNotReady({
   children,
 
-  // #withOrganizationByOrgId
-  organization,
+  // #withOrganization
+  isOrganizationReady,
 }) {
-  return (organization.is_ready) ? (
+  return (isOrganizationReady) ? (
     <Redirect to={{ pathname: '/' }} />
   ) : children;
 }
 
 export default compose(
-  withAuthentication(),
+  withAuthentication(({ currentOrganizationId }) => ({
+    currentOrganizationId,
+  })),
   connect((state, props) => ({
     organizationId: props.currentOrganizationId,
   })),
-  withOrganizationByOrgId(),
+  withOrganization(({ isOrganizationReady }) => ({ isOrganizationReady })),
 )(EnsureOrganizationIsNotReady);

client/src/containers/Setup/SetupInitializingForm.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useQuery } from 'react-query';
+
+import withOrganizationActions from 'containers/Organization/withOrganizationActions';
+import withOrganization from 'containers/Organization/withOrganization'
+
+import { compose } from 'utils';
+
+/**
+ * Setup initializing step form.
+ */
+function SetupInitializingForm({
+
+  // #withOrganizationActions
+  requestOrganizationBuild,
+}) {
+  const requestBuildOrgnization = useQuery(
+    ['build-tenant'], () => requestOrganizationBuild(),
+  );
+
+  return (
+    <div class="setup-initializing-form">
+      <h1>You organization is initializin...</h1>
+    </div>
+  );
+}
+
+export default compose(
+  withOrganizationActions
+)(SetupInitializingForm);

client/src/containers/Setup/SetupLeftSection.js

@@ -1,8 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { Icon, If } from 'components';
+import { Icon } from 'components';
 import { FormattedMessage as T } from 'react-intl';
 
-import withAuthentication from 'containers/Authentication/withAuthentication';
 import withAuthenticationActions from 'containers/Authentication/withAuthenticationActions';
 
 import { compose } from 'utils';
@@ -11,8 +10,8 @@ import { compose } from 'utils';
  * Wizard setup left section.
  */
 function SetupLeftSection({
+  // #withAuthenticationActions
   requestLogout,
-  isAuthorized
 }) {
   const [org] = useState('LibyanSpider');
 
@@ -40,17 +39,15 @@ function SetupLeftSection({
           <T id={'you_have_a_bigcapital_account'} />
         </p>
 
-        <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-org'}>
+          <span>
+            <T id={'welcome'} />
+            {org},
+          </span>
+          <span>
+            <a onClick={onClickLogout} href="#"><T id={'sign_out'} /></a>
+          </span>
+        </div>
 
         <div className={'content-contact'}>
           <a href={'#!'}>
@@ -70,6 +67,5 @@ function SetupLeftSection({
 }
 
 export default compose(
-  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
   withAuthenticationActions,
 )(SetupLeftSection);

client/src/containers/Setup/SetupOrganizationForm.js

@@ -26,7 +26,10 @@ import withOrganizationActions from 'containers/Organization/withOrganizationAct
 
 import { compose, optionsMapToArray } from 'utils';
 
-function SetupOrganizationForm({ requestSubmitOptions, requestSeedTenant }) {
+function SetupOrganizationForm({
+  requestSubmitOptions,
+  requestSeedTenant
+}) {
   const { formatMessage } = useIntl();
   const [selected, setSelected] = useState();
   const history = useHistory();

client/src/containers/Setup/SetupRightSection.js

@@ -2,33 +2,48 @@ import React, { useCallback } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Wizard, Steps, Step } from 'react-albus';
 import { useHistory } from "react-router-dom";
+import { connect } from 'react-redux';
+
 import WizardSetupSteps from './WizardSetupSteps';
 
 import SetupSubscriptionForm from './SetupSubscriptionForm';
 import SetupOrganizationForm from './SetupOrganizationForm';
+import SetupInitializingForm from './SetupInitializingForm';
 
 import withAuthentication from 'containers/Authentication/withAuthentication';
-
+import withOrganization from 'containers/Organization/withOrganization'
 import { compose } from 'utils';
 
 /**
  * Wizard setup right section.
  */
 function SetupRightSection ({
-  isTenantHasSubscriptions: hasSubscriptions = false,
+  // #withAuthentication
+  currentOrganizationId,
+
+  // #withOrganization
+  isOrganizationInitialized,
+  isOrganizationSubscribed: hasSubscriptions,
+  isOrganizationSeeded
 }) {
   const history = useHistory();
+
   const handleSkip = useCallback(({ step, push }) => {
     const scenarios = [
-      { condition: hasSubscriptions, redirectTo: 'organization' },
       { condition: !hasSubscriptions, redirectTo: 'subscription' },
+      // { condition: , redirectTo: 'initializing' }
+      { condition: !hasSubscriptions, redirectTo: 'organization' },
     ];
     const scenario = scenarios.find((scenario) => scenario.condition);
 
     if (scenario) {
       push(scenario.redirectTo);
     }
-  }, [hasSubscriptions]);
+  }, [
+    hasSubscriptions,
+    isOrganizationInitialized,
+    isOrganizationSeeded,
+  ]);
 
   return (
     <section className={'setup-page__right-section'}>
@@ -48,6 +63,10 @@ function SetupRightSection ({
                       <SetupSubscriptionForm />
                     </Step>
 
+                    <Step id={'initializing'}>
+                      <SetupInitializingForm />
+                    </Step>
+
                     <Step id="organization">
                       <SetupOrganizationForm />
                     </Step>
@@ -66,5 +85,19 @@ function SetupRightSection ({
 }
 
 export default compose(
-  withAuthentication(({ isAuthorized }) => ({ isAuthorized })),
+  withAuthentication(({ currentOrganizationId }) => ({ currentOrganizationId })),
+  connect((state, props) => ({
+    organizationId: props.currentOrganizationId,
+  })),
+  withOrganization(({
+    organization,
+    isOrganizationInitialized,
+    isOrganizationSubscribed,
+    isOrganizationSeeded,
+  }) => ({
+    organization,
+    isOrganizationInitialized,
+    isOrganizationSubscribed,
+    isOrganizationSeeded,
+  })),
 )(SetupRightSection);

client/src/containers/Setup/SetupSubscriptionForm.js

@@ -5,6 +5,9 @@ import { FormattedMessage as T } from 'react-intl';
 import { Button, Intent } from '@blueprintjs/core';
 import BillingTab from 'containers/Subscriptions/BillingTab';
 
+/**
+ * Subscription step of wizard setup.
+ */
 export default function SetupSubscriptionForm({
 
 }) {

client/src/containers/Setup/WizardSetupPage.js

@@ -5,9 +5,7 @@ import SetupRightSection from './SetupRightSection';
 import SetupLeftSection from './SetupLeftSection';
 
 
-export default function WizardSetupPage({
-  organizationId,
-}) {
+export default function WizardSetupPage() {
   return (
     <EnsureOrganizationIsNotReady>
       <div class="setup-page">