Revert "feat(webapp): deprecate the subscription step in onboarding process"

This reverts commit 0c1bf302e5.

packages/webapp/src/constants/registerWizard.tsx

@@ -2,6 +2,9 @@
 import intl from 'react-intl-universal';
 
 export const getSetupWizardSteps = () => [
+  {
+    label: intl.get('setup.plan.plans'),
+  },
   {
     label: intl.get('setup.plan.getting_started'),
   },

packages/webapp/src/containers/Setup/SetupRightSection.tsx

@@ -22,6 +22,9 @@ function SetupRightSection({
   // #withSetupWizard
   setupStepId,
   setupStepIndex,
+
+  // #withSubscriptions
+  isSubscriptionActive,
 }) {
   return (
     <section className={'setup-page__right-section'}>
@@ -53,6 +56,12 @@ export default compose(
       isOrganizationBuildRunning,
     }),
   ),
+  withSubscriptions(
+    ({ isSubscriptionActive }) => ({
+      isSubscriptionActive,
+    }),
+    'main',
+  ),
   withSetupWizard(({ setupStepId, setupStepIndex }) => ({
     setupStepId,
     setupStepIndex,

packages/webapp/src/containers/Setup/SetupWizardContent.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import SetupSteps from './SetupSteps';
 import WizardSetupSteps from './WizardSetupSteps';
 
+import SetupSubscription from './SetupSubscription';
 import SetupOrganizationPage from './SetupOrganizationPage';
 import SetupInitializingForm from './SetupInitializingForm';
 import SetupCongratsPage from './SetupCongratsPage';
@@ -18,6 +19,7 @@ export default function SetupWizardContent({ setupStepIndex, setupStepId }) {
 
       <div class="setup-page-form">
         <SetupSteps step={{ id: setupStepId }}>
+          <SetupSubscription id="subscription" />
           <SetupOrganizationPage id="organization" />
           <SetupInitializingForm id={'initializing'} />
           <SetupCongratsPage id="congrats" />

packages/webapp/src/containers/Setup/WizardSetupSteps.tsx

@@ -25,7 +25,6 @@ export default function WizardSetupSteps({ currentStep = 1 }) {
             <WizardSetupStep
               label={step.label}
               isActive={index + 1 === currentStep}
-              key={index}
             />
           ))}
         </ul>

packages/webapp/src/hooks/query/organization.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
-import { omit } from 'lodash';
 import { useMutation, useQueryClient } from 'react-query';
 import { batch } from 'react-redux';
 import t from './types';
 import useApiRequest from '../useRequest';
 import { useRequestQuery } from '../useQueryRequest';
-import { useSetOrganizations } from '../state';
+import { useSetOrganizations, useSetSubscriptions } from '../state';
+import { omit } from 'lodash';
 
 /**
  * Retrieve organizations of the authenticated user.
@@ -32,6 +32,7 @@ export function useOrganizations(props) {
  */
 export function useCurrentOrganization(props) {
   const setOrganizations = useSetOrganizations();
+  const setSubscriptions = useSetSubscriptions();
 
   return useRequestQuery(
     [t.ORGANIZATION_CURRENT],
@@ -43,6 +44,9 @@ export function useCurrentOrganization(props) {
         const organization = omit(data, ['subscriptions']);
 
         batch(() => {
+          // Sets subscriptions.
+          setSubscriptions(data.subscriptions);
+
           // Sets organizations.
           setOrganizations([organization]);
         });

packages/webapp/src/store/organizations/withSetupWizard.tsx

@@ -6,15 +6,18 @@ export default (mapState) => {
     const {
       isOrganizationSetupCompleted,
       isOrganizationReady,
+      isSubscriptionActive,
       isOrganizationBuildRunning
     } = props;
 
     const condits = {
       isCongratsStep: isOrganizationSetupCompleted,
+      isSubscriptionStep: !isSubscriptionActive,
       isInitializingStep: isOrganizationBuildRunning,
       isOrganizationStep: !isOrganizationReady && !isOrganizationBuildRunning,
     };
     const scenarios = [
+      { condition: condits.isSubscriptionStep, step: 'subscription' },
       { condition: condits.isOrganizationStep, step: 'organization' },
       { condition: condits.isInitializingStep, step: 'initializing' },
       { condition: condits.isCongratsStep, step: 'congrats' },