feat: restrict stepper navigation to only visited steps

- Added maxVisitedStep tracking to QuoteState to record the furthest step reached
- Modified goToStep to prevent navigation beyond maxVisitedStep
- Updated QuoteStepper to use maxVisitedStep for determining clickable steps instead of currentStep
- Ensures users can only navigate back to steps they've already visited, preventing skipping ahead

Author: daniel-iliesh

app/hire-me/page.tsx

@@ -31,6 +31,7 @@ export default function HireMePage() {
     nextStep,
     prevStep,
     goToStep,
+    maxVisitedStep,
   } = useQuoteBuilder();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -71,6 +72,7 @@ export default function HireMePage() {
       onNext={nextStep}
       onPrev={prevStep}
       onStepChange={goToStep}
+      maxClickableStep={maxVisitedStep}
       canGoNext={
         state.currentStep === 6
           ? false

src/features/hireme/components/QuoteStepper.tsx

@@ -11,6 +11,7 @@ interface QuoteStepperProps {
   onPrev: () => void;
   canGoNext: boolean;
   helperText?: string | null;
+  maxClickableStep?: number;
   onStepChange?: (step: number) => void;
 }
 
@@ -23,6 +24,7 @@ export function QuoteStepper({
   onPrev,
   canGoNext,
   helperText,
+  maxClickableStep,
   onStepChange,
 }: QuoteStepperProps) {
   return (
@@ -46,9 +48,10 @@ export function QuoteStepper({
           {Array.from({ length: totalSteps }, (_, index) => {
             const stepNumber = index + 1;
             const isCurrent = stepNumber === currentStep;
-            const isVisited = stepNumber <= currentStep;
+            const effectiveMax = maxClickableStep ?? currentStep;
+            const isVisited = stepNumber <= effectiveMax;
 
-            const canClick = !!onStepChange && stepNumber <= currentStep;
+            const canClick = !!onStepChange && stepNumber <= effectiveMax;
 
             return (
               <button

src/features/hireme/types.ts

@@ -48,6 +48,7 @@ export interface ContactDetails {
 
 export interface QuoteState {
   currentStep: number;
+  maxVisitedStep: number;
   projectType: ProjectType | null;
   basePrice: number;
   baseTimeline: TimelineRange | null;

src/features/hireme/useQuoteBuilder.ts

@@ -34,6 +34,7 @@ const INITIAL_CONTACT = {
 
 const INITIAL_STATE: QuoteState = {
   currentStep: 1,
+  maxVisitedStep: 1,
   projectType: null,
   basePrice: 0,
   baseTimeline: null,
@@ -242,6 +243,7 @@ export function useQuoteBuilder() {
     setState((prev) => ({
       ...prev,
       currentStep: Math.min(prev.currentStep + 1, 6),
+      maxVisitedStep: Math.max(prev.maxVisitedStep, Math.min(prev.currentStep + 1, 6)),
     }));
   }, []);
 
@@ -255,7 +257,7 @@ export function useQuoteBuilder() {
   const goToStep = useCallback((step: number) => {
     setState((prev) => ({
       ...prev,
-      currentStep: Math.min(Math.max(step, 1), 6),
+      currentStep: Math.min(Math.max(step, 1), prev.maxVisitedStep),
     }));
   }, []);
 
@@ -283,6 +285,7 @@ export function useQuoteBuilder() {
     priceAfterComplexity,
     priceAfterTimeline,
     roundedFinalPrice,
+    maxVisitedStep: state.maxVisitedStep,
     projectTypes: PROJECT_TYPES,
     budgetRanges: BUDGET_RANGES,
     featuresByProjectType: FEATURES_BY_PROJECT_TYPE,