diff --git a/packages/webapp/src/constants/registerWizard.tsx b/packages/webapp/src/constants/registerWizard.tsx index e901d5202..f1d971d2e 100644 --- a/packages/webapp/src/constants/registerWizard.tsx +++ b/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'), }, diff --git a/packages/webapp/src/containers/Setup/SetupRightSection.tsx b/packages/webapp/src/containers/Setup/SetupRightSection.tsx index c0ea49ef0..5abdff120 100644 --- a/packages/webapp/src/containers/Setup/SetupRightSection.tsx +++ b/packages/webapp/src/containers/Setup/SetupRightSection.tsx @@ -22,6 +22,9 @@ function SetupRightSection({ // #withSetupWizard setupStepId, setupStepIndex, + + // #withSubscriptions + isSubscriptionActive, }) { return (
@@ -53,6 +56,12 @@ export default compose( isOrganizationBuildRunning, }), ), + withSubscriptions( + ({ isSubscriptionActive }) => ({ + isSubscriptionActive, + }), + 'main', + ), withSetupWizard(({ setupStepId, setupStepIndex }) => ({ setupStepId, setupStepIndex, diff --git a/packages/webapp/src/containers/Setup/SetupWizardContent.tsx b/packages/webapp/src/containers/Setup/SetupWizardContent.tsx index 6e0a32b8c..57b162ccf 100644 --- a/packages/webapp/src/containers/Setup/SetupWizardContent.tsx +++ b/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 }) {
+ diff --git a/packages/webapp/src/containers/Setup/WizardSetupSteps.tsx b/packages/webapp/src/containers/Setup/WizardSetupSteps.tsx index 0381d11d9..36b53a37e 100644 --- a/packages/webapp/src/containers/Setup/WizardSetupSteps.tsx +++ b/packages/webapp/src/containers/Setup/WizardSetupSteps.tsx @@ -25,7 +25,6 @@ export default function WizardSetupSteps({ currentStep = 1 }) { ))} diff --git a/packages/webapp/src/hooks/query/organization.tsx b/packages/webapp/src/hooks/query/organization.tsx index 3945de70f..aea3ab96c 100644 --- a/packages/webapp/src/hooks/query/organization.tsx +++ b/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]); }); diff --git a/packages/webapp/src/store/organizations/withSetupWizard.tsx b/packages/webapp/src/store/organizations/withSetupWizard.tsx index 1a0b27f5b..7f39a2466 100644 --- a/packages/webapp/src/store/organizations/withSetupWizard.tsx +++ b/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' },