feat: billing page in dashboard and setup.

client/src/containers/Setup/SetupRightSection.js

@@ -1,56 +1,52 @@
-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 React from 'react';
+
+import { Wizard } from 'react-albus';
+import { useHistory } from 'react-router-dom';
 
-import WizardSetupSteps from './WizardSetupSteps';
 import withSubscriptions from 'containers/Subscriptions/withSubscriptions';
 
-import SetupSubscriptionForm from './SetupSubscriptionForm';
-import SetupOrganizationForm from './SetupOrganizationForm';
-import SetupInitializingForm from './SetupInitializingForm';
-import SetupCongratsPage from './SetupCongratsPage';
+import SetupDialogs from './SetupDialogs';
+import SetupWizardContent from './SetupWizardContent';
+
+import withOrganization from 'containers/Organization/withOrganization';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+import withSetupWizard from '../../store/organizations/withSetupWizard';
 
-import withAuthentication from 'containers/Authentication/withAuthentication';
-import withOrganization from 'containers/Organization/withOrganization'
 import { compose } from 'utils';
 
 /**
  * Wizard setup right section.
  */
-function SetupRightSection ({
-  // #withAuthentication
-  currentOrganizationId,
-
+function SetupRightSection({
   // #withOrganization
   isOrganizationInitialized,
   isOrganizationSeeded,
   isOrganizationSetupCompleted,
 
+  // #withSetupWizard
+  isCongratsStep,
+  isSubscriptionStep,
+  isInitializingStep,
+  isOrganizationStep,
+
   // #withSubscriptions
-  isSubscriptionActive
+  isSubscriptionActive,
 }) {
   const history = useHistory();
 
-  const handleSkip = useCallback(({ step, push }) => {
+  const handleSkip = ({ step, push }) => {
     const scenarios = [
-      { condition: isOrganizationSetupCompleted, redirectTo: 'congrats' },
-      { condition: !isSubscriptionActive, redirectTo: 'subscription' },
-      { condition: isSubscriptionActive && !isOrganizationInitialized, redirectTo: 'initializing' },
-      { condition: isSubscriptionActive && !isOrganizationSeeded, redirectTo: 'organization' },
+      { condition: isCongratsStep, redirectTo: 'congrats' },
+      { condition: isSubscriptionStep, redirectTo: 'subscription' },
+      { condition: isInitializingStep, redirectTo: 'initializing' },
+      { condition: isOrganizationStep, redirectTo: 'organization' },
     ];
     const scenario = scenarios.find((scenario) => scenario.condition);
 
     if (scenario) {
       push(scenario.redirectTo);
     }
-  }, [
-    isSubscriptionActive,
-    isOrganizationInitialized,
-    isOrganizationSeeded,
-    isOrganizationSetupCompleted
-  ]);
+  };
 
   return (
     <section className={'setup-page__right-section'}>
@@ -58,58 +54,47 @@ function SetupRightSection ({
         onNext={handleSkip}
         basename={'/setup'}
         history={history}
-        render={({ step, steps }) => (
-          <div class="setup-page__content">
-            <WizardSetupSteps currentStep={steps.indexOf(step) + 1} />
-
-            <TransitionGroup>
-              <CSSTransition key={step.id} timeout={{ enter: 500, exit: 500 }}>
-                <div class="register-page-form">
-                  <Steps key={step.id} step={step}>
-                    <Step id="subscription">
-                      <SetupSubscriptionForm />
-                    </Step>
-
-                    <Step id={'initializing'}>
-                      <SetupInitializingForm />
-                    </Step>
-
-                    <Step id="organization">
-                      <SetupOrganizationForm />
-                    </Step>
-
-                    <Step id="congrats">
-                      <SetupCongratsPage />
-                    </Step>
-                  </Steps>
-                </div>
-              </CSSTransition>
-            </TransitionGroup>
-        </div>
-      )} />
+        render={SetupWizardContent}
+      />
+      <SetupDialogs />
     </section>
-  )
+  );
 }
 
 export default compose(
-  withAuthentication(({ currentOrganizationId }) => ({ currentOrganizationId })),
-  connect((state, props) => ({
-    organizationId: props.currentOrganizationId,
+  withCurrentOrganization(({ organizationTenantId }) => ({
+    organizationId: organizationTenantId,
   })),
-  withOrganization(({
-    organization,
-    isOrganizationInitialized,
-    isOrganizationSeeded,
-    isOrganizationSetupCompleted
-  }) => ({
-    organization,
-    isOrganizationInitialized,
-    isOrganizationSeeded,
-    isOrganizationSetupCompleted
-  })),
-  withSubscriptions(({
-    isSubscriptionActive,
-  }) => ({
-    isSubscriptionActive
-  }), 'main'),
-)(SetupRightSection);
+  withOrganization(
+    ({
+      organization,
+      isOrganizationInitialized,
+      isOrganizationSeeded,
+      isOrganizationSetupCompleted,
+    }) => ({
+      organization,
+      isOrganizationInitialized,
+      isOrganizationSeeded,
+      isOrganizationSetupCompleted,
+    }),
+  ),
+  withSubscriptions(
+    ({ isSubscriptionActive }) => ({
+      isSubscriptionActive,
+    }),
+    'main',
+  ),
+  withSetupWizard(
+    ({
+      isCongratsStep,
+      isSubscriptionStep,
+      isInitializingStep,
+      isOrganizationStep,
+    }) => ({
+      isCongratsStep,
+      isSubscriptionStep,
+      isInitializingStep,
+      isOrganizationStep,
+    }),
+  ),
+)(SetupRightSection);