fix: clicking on previous step navigates to correct step instead of next (#22146)

* fix: clicking on previous step navigates to correct step instead of next

* fix: implement step navigation in WizardForm and disable navigation in WizardLayout

* fix: adjust step navigation logic in WizardForm and useWizardState

* fix: add clarification comment in goToStep function

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>

apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx

@@ -125,6 +125,13 @@ const OnboardingPage = (props: PageProps) => {
   };
   const currentStepIndex = steps.indexOf(currentStep);
 
+  const goToStep = (step: number) => {
+    const newStep = steps[step];
+    startTransition(() => {
+      router.push(`/getting-started/${stepTransform(newStep)}`);
+    });
+  };
+
   const goToNextStep = () => {
     const nextIndex = currentStepIndex + 1;
     const newStep = steps[nextIndex];
@@ -159,7 +166,7 @@ const OnboardingPage = (props: PageProps) => {
                   </p>
                 ))}
               </header>
-              <Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} nextStep={goToNextStep} />
+              <Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} navigateToStep={goToStep} />
             </div>
             <StepCard>
               <Suspense fallback={<Icon name="loader" />}>

packages/ui/components/form/step/Steps.tsx

@@ -3,7 +3,7 @@ import classNames from "@calcom/ui/classNames";
 type StepWithNav = {
   maxSteps: number;
   currentStep: number;
-  nextStep: () => void;
+  navigateToStep: (step: number) => void;
   disableNavigation?: false;
   stepLabel?: (currentStep: number, maxSteps: number) => string;
 };
@@ -11,7 +11,7 @@ type StepWithNav = {
 type StepWithoutNav = {
   maxSteps: number;
   currentStep: number;
-  nextStep?: undefined;
+  navigateToStep?: undefined;
   disableNavigation: true;
   stepLabel?: (currentStep: number, maxSteps: number) => string;
 };
@@ -23,7 +23,7 @@ const Steps = (props: StepsProps) => {
   const {
     maxSteps,
     currentStep,
-    nextStep,
+    navigateToStep,
     disableNavigation = false,
     stepLabel = (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}`,
   } = props;
@@ -35,7 +35,7 @@ const Steps = (props: StepsProps) => {
           return index <= currentStep - 1 ? (
             <div
               key={`step-${index}`}
-              onClick={() => nextStep?.()}
+              onClick={() => navigateToStep?.(index)}
               className={classNames(
                 "bg-inverted h-1 w-full rounded-[1px]",
                 index < currentStep - 1 && !disableNavigation ? "cursor-pointer" : ""

packages/ui/components/form/step/steps.test.tsx

@@ -13,7 +13,7 @@ const mockNavigateToStep = vi.fn();
 const Props = {
   maxSteps: MAX_STEPS,
   currentStep: CURRENT_STEP,
-  nextStep: mockNavigateToStep,
+  navigateToStep: mockNavigateToStep,
   stepLabel: (currentStep: number, totalSteps: number) => `Test Step ${currentStep} of ${totalSteps}`,
   disableNavigation: undefined,
 };

packages/ui/components/form/wizard/WizardForm.tsx

@@ -46,7 +46,7 @@ export function WizardForm({
   defaultStep = 1,
   disableNavigation = false,
 }: WizardFormProps) {
-  const { currentStep, maxSteps, nextStep, prevStep, isFirstStep, isLastStep } = useWizardState(
+  const { currentStep, maxSteps, nextStep, goToStep, prevStep, isFirstStep, isLastStep } = useWizardState(
     defaultStep,
     steps.length
   );
@@ -71,10 +71,9 @@ export function WizardForm({
             <Steps
               maxSteps={maxSteps}
               currentStep={currentStep}
-              nextStep={nextStep}
+              navigateToStep={goToStep}
               stepLabel={stepLabel}
               data-testid="wizard-step-component"
-              disableNavigation={disableNavigation}
             />
           )}
         </div>

packages/ui/components/form/wizard/useWizardState.ts

@@ -25,7 +25,8 @@ export function useWizardState(defaultStep = 1, maxSteps: number) {
 
   const goToStep = useCallback(
     (newStep: number) => {
-      setStep(Math.min(Math.max(newStep, 1), maxSteps));
+      // Convert 0-based newStep to 1-based for URL (?step=1), So actual step = newStep+1
+      setStep(Math.min(Math.max(newStep + 1, 1), maxSteps));
     },
     [setStep, maxSteps]
   );

packages/ui/components/layout/WizardLayout.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 // eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
 import { usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Toaster } from "sonner";
@@ -58,7 +57,7 @@ export function WizardLayout({
                   </>
                 )}
               </header>
-              <Steps maxSteps={maxSteps} currentStep={currentStep} nextStep={noop} />
+              <Steps maxSteps={maxSteps} currentStep={currentStep} disableNavigation />
             </div>
             <StepCard>{children}</StepCard>
           </div>