# How to Add Conditional Steps

## Example: Payment Setup Step (only for Platform Collect plan)

### 1. Create your conditional step component

```javascript
// StepPaymentSetup.js
import React from "react";
import { Form, Input, Select } from "antd";
import { useOnboardingForm } from "./hooks/useOnboardingForm";
import { StepFormWrapper } from "./components/StepFormWrapper";

export default function StepPaymentSetup({
  onNext,
  onPrev,
  initialValues,
  instanceKey,
}) {
  const { form, handleSubmit } = useOnboardingForm({
    initialValues,
    instanceKey,
    currentStep: 2, // Adjust based on position
    onNext,
  });

  return (
    <StepFormWrapper form={form} onPrev={onPrev} onSubmit={handleSubmit}>
      <Form.Item name="payment_method" label="Payment Method">
        <Select>
          <Select.Option value="stripe">Stripe</Select.Option>
          <Select.Option value="paypal">PayPal</Select.Option>
        </Select>
      </Form.Item>
      
      <Form.Item name="bank_account" label="Bank Account">
        <Input placeholder="IBAN" />
      </Form.Item>
    </StepFormWrapper>
  );
}
```

### 2. Add to onboardingSteps.js

```javascript
import StepPaymentSetup from "../StepPaymentSetup";

export const createOnboardingSteps = ({ ... }) => {
  const data = record || formData || {};
  
  const allSteps = [
    // ... existing steps ...
    
    {
      key: "plan_selection",
      title: "Plan Selection",
      component: StepFormPlanSelection,
      props: { /* ... */ },
    },
    
    // CONDITIONAL STEP - Only shows if plan_id === 2
    {
      key: "payment_setup",
      title: "Payment Setup",
      description: "Configure payments",
      component: StepPaymentSetup,
      condition: (data) => {
        // Show only for Platform Collect plan (id: 2)
        return data.plan_id === 2;
      },
      props: {
        initialValues: record ? { ...record } : { ...formData },
        onNext: goNext,
        onPrev: goPrev,
        instanceKey,
      },
    },
    
    {
      key: "photos",
      title: "Photos",
      component: StepPhotosForm,
      props: { /* ... */ },
    },
    // ... rest of steps ...
  ];

  return allSteps.filter(step => {
    if (!step.condition) return true;
    return step.condition(data);
  });
};
```

### 3. Condition Examples

```javascript
// Show step only if plan is Platform Collect
condition: (data) => data.plan_id === 2

// Show step only if hotel has more than 10 rooms
condition: (data) => (data.room_count || 0) > 10

// Show step only if user selected "premium" tier
condition: (data) => data.tier === 'premium'

// Show step based on multiple conditions
condition: (data) => {
  return data.plan_id === 2 && data.country === 'US';
}

// Show step if user hasn't completed it before
condition: (data) => !data.payment_setup_completed
```

### 4. Benefits of This Approach

✅ **Dynamic**: Steps appear/disappear based on user data
✅ **Clean**: No complex routing logic needed
✅ **Maintainable**: Easy to add/remove conditional steps
✅ **Type-safe**: Conditions are evaluated in one place
✅ **Automatic**: Step numbers adjust automatically in UI

### 5. Testing Conditional Steps

```javascript
// To test, set the condition value in formData:
const formData = { plan_id: 2 }; // Payment step will appear
const formData = { plan_id: 1 }; // Payment step will be skipped
```

### 6. Advanced: Multi-condition Steps

```javascript
{
  key: "advanced_config",
  title: "Advanced Configuration",
  component: StepAdvancedConfig,
  // Show if EITHER condition is true
  condition: (data) => {
    const isPremiumPlan = data.plan_id === 3;
    const hasSpecialRequest = data.special_requirements === true;
    return isPremiumPlan || hasSpecialRequest;
  },
  props: { /* ... */ },
}
```

## That's it! 

Now when users select different plans, the appropriate steps will automatically show or hide.
The step navigation, URLs, and progress indicator all update automatically.