From 98fc7a6749b213ee3ef4e617f128648b2f64ca91 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 7 Nov 2025 08:32:39 +0000
Subject: [PATCH] Fix cyclic object error in onboarding step completion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**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
---
 .../components/domain/setup-wizard/steps/InventorySetupStep.tsx | 2 +-
 .../components/domain/setup-wizard/steps/QualitySetupStep.tsx   | 2 +-
 .../components/domain/setup-wizard/steps/RecipesSetupStep.tsx   | 2 +-
 .../components/domain/setup-wizard/steps/ReviewSetupStep.tsx    | 2 +-
 .../src/components/domain/setup-wizard/steps/TeamSetupStep.tsx  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/domain/setup-wizard/steps/InventorySetupStep.tsx b/frontend/src/components/domain/setup-wizard/steps/InventorySetupStep.tsx
index f78dd217..b864fd46 100644
--- a/frontend/src/components/domain/setup-wizard/steps/InventorySetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/InventorySetupStep.tsx
@@ -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"
           >
diff --git a/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx b/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx
index fc989454..5ecd4aa7 100644
--- a/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx
@@ -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"
           >
diff --git a/frontend/src/components/domain/setup-wizard/steps/RecipesSetupStep.tsx b/frontend/src/components/domain/setup-wizard/steps/RecipesSetupStep.tsx
index 74f99621..562a39ee 100644
--- a/frontend/src/components/domain/setup-wizard/steps/RecipesSetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/RecipesSetupStep.tsx
@@ -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"
           >
diff --git a/frontend/src/components/domain/setup-wizard/steps/ReviewSetupStep.tsx b/frontend/src/components/domain/setup-wizard/steps/ReviewSetupStep.tsx
index 55672265..14d475e5 100644
--- a/frontend/src/components/domain/setup-wizard/steps/ReviewSetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/ReviewSetupStep.tsx
@@ -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"
           >
diff --git a/frontend/src/components/domain/setup-wizard/steps/TeamSetupStep.tsx b/frontend/src/components/domain/setup-wizard/steps/TeamSetupStep.tsx
index b61431c3..fcdec192 100644
--- a/frontend/src/components/domain/setup-wizard/steps/TeamSetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/TeamSetupStep.tsx
@@ -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"
           >