feat: optimize the onboarding subscription experience.

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

@@ -1,30 +1,50 @@
 // @ts-nocheck
 import React from 'react';
 
-import SetupSteps from './SetupSteps';
-import WizardSetupSteps from './WizardSetupSteps';
-
-import SetupSubscription from './SetupSubscription';
+import SetupSubscription from './SetupSubscription/SetupSubscription';
 import SetupOrganizationPage from './SetupOrganizationPage';
 import SetupInitializingForm from './SetupInitializingForm';
 import SetupCongratsPage from './SetupCongratsPage';
+import { Stepper } from '@/components/Stepper';
+import styles from './SetupWizardContent.module.scss';
+
+interface SetupWizardContentProps {
+  stepIndex: number;
+  stepId: string;
+}
 
 /**
  * Setup wizard content.
  */
-export default function SetupWizardContent({ setupStepIndex, setupStepId }) {
+export default function SetupWizardContent({
+  stepIndex,
+  stepId,
+}: SetupWizardContentProps) {
   return (
     <div class="setup-page__content">
-      <WizardSetupSteps currentStep={setupStepIndex} />
+      <Stepper
+        active={stepIndex}
+        classNames={{
+          content: styles.content,
+          items: styles.items,
+        }}
+      >
+        <Stepper.Step label={'Subscription'}>
+          <SetupSubscription />
+        </Stepper.Step>
 
-      <div class="setup-page-form">
-        <SetupSteps step={{ id: setupStepId }}>
-          <SetupSubscription id="subscription" />
+        <Stepper.Step label={'Organization'}>
           <SetupOrganizationPage id="organization" />
+        </Stepper.Step>
+
+        <Stepper.Step label={'Initiializing'}>
           <SetupInitializingForm id={'initializing'} />
+        </Stepper.Step>
+
+        <Stepper.Step label={'Congrats'}>
           <SetupCongratsPage id="congrats" />
-        </SetupSteps>
-      </div>
+        </Stepper.Step>
+      </Stepper>
     </div>
   );
 }