Fix cyclic object error in onboarding step completion

**Issue:**
When clicking Continue button in setup steps (quality, inventory, recipes,
team, review), got error: "cyclic object value"

**Root Cause:**
Button onClick handlers were passing React event object directly to onComplete:
```tsx
onClick={onComplete}  // Passes event as first argument
```

React event objects have circular references (target, currentTarget, etc.)
which cannot be JSON.stringify'd for API calls.

**Solution:**
Wrap all onComplete calls in arrow functions to prevent event from being passed:
```tsx
onClick={() => onComplete()}  // Calls with no arguments
```

**Files Fixed:**
- QualitySetupStep.tsx:436
- InventorySetupStep.tsx:1014
- RecipesSetupStep.tsx:801
- ReviewSetupStep.tsx:314
- TeamSetupStep.tsx:318

**Error Log (Before Fix):**
```
Completing step: "quality-setup" with data:
Object { _reactName: "onClick", _targetInst: null, type: "click", ...
 API error: "cyclic object value"
```

**After Fix:**
 onComplete() called with no arguments
 No event object passed to API
 Step completion works correctly

**Build Status:** ✓ Successful in 22.11s
This commit is contained in:
Claude
2025-11-07 08:32:39 +00:00
parent 4c647f4182
commit 98fc7a6749
5 changed files with 5 additions and 5 deletions

View File

@@ -1011,7 +1011,7 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
{onComplete && (
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
<button
onClick={onComplete}
onClick={() => onComplete()}
disabled={canContinue === false}
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>

View File

@@ -433,7 +433,7 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
{onComplete && (
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
<button
onClick={onComplete}
onClick={() => onComplete()}
disabled={canContinue === false}
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>

View File

@@ -798,7 +798,7 @@ export const RecipesSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
{onComplete && (
<div className="flex justify-end mt-6 pt-6 border-[var(--border-secondary)]">
<button
onClick={onComplete}
onClick={() => onComplete()}
disabled={canContinue === false}
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>

View File

@@ -311,7 +311,7 @@ export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete
{onComplete && (
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
<button
onClick={onComplete}
onClick={() => onComplete()}
disabled={canContinue === false}
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>

View File

@@ -315,7 +315,7 @@ export const TeamSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete,
{onComplete && (
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
<button
onClick={onComplete}
onClick={() => onComplete()}
disabled={canContinue === false}
className="px-6 py-3 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>