Fix setup wizard navigation and button interaction issues

Fixed two critical issues in the setup wizard:

1. **Missing onUpdate callback**:
   - Added onUpdate prop to SetupStepProps interface
   - Created handleStepUpdate callback in SetupWizard to receive canContinue updates
   - Passed onUpdate to all step components
   - Added onUpdate implementation in SuppliersSetupStep (was missing)
   - This fixes the issue where Continue/Skip buttons were incorrectly disabled for optional steps

2. **Button interaction issues in QualitySetupStep**:
   - Added explicit e.preventDefault() and e.stopPropagation() to Check Type buttons
   - Added explicit e.preventDefault() and e.stopPropagation() to Applicable Stages buttons
   - Added cursor-pointer class for better UX
   - This fixes the issue where buttons weren't responding to clicks

The Quality Setup and Suppliers Setup steps now properly:
- Show enabled Continue button when requirements are met
- Show Skip button for optional steps
- Allow clicking Check Type and Applicable Stages buttons without form submission interference
This commit is contained in:
Claude
2025-11-06 19:00:57 +00:00
parent 3823225df4
commit 5670601fbe
3 changed files with 30 additions and 4 deletions

View File

@@ -45,6 +45,7 @@ export interface SetupStepProps {
onPrevious: () => void; onPrevious: () => void;
onComplete: (data?: any) => void; onComplete: (data?: any) => void;
onSkip?: () => void; onSkip?: () => void;
onUpdate?: (state: { itemsCount?: number; canContinue?: boolean }) => void;
isFirstStep: boolean; isFirstStep: boolean;
isLastStep: boolean; isLastStep: boolean;
canContinue?: boolean; canContinue?: boolean;
@@ -141,6 +142,13 @@ export const SetupWizard: React.FC = () => {
const [isInitialized, setIsInitialized] = useState(false); const [isInitialized, setIsInitialized] = useState(false);
const [canContinue, setCanContinue] = useState(false); const [canContinue, setCanContinue] = useState(false);
// Handle updates from step components
const handleStepUpdate = (state: { itemsCount?: number; canContinue?: boolean }) => {
if (state.canContinue !== undefined) {
setCanContinue(state.canContinue);
}
};
// Get user progress from backend // Get user progress from backend
const { data: userProgress, isLoading: isLoadingProgress } = useUserProgress( const { data: userProgress, isLoading: isLoadingProgress } = useUserProgress(
user?.id || '', user?.id || '',
@@ -352,6 +360,7 @@ export const SetupWizard: React.FC = () => {
onPrevious={handlePrevious} onPrevious={handlePrevious}
onComplete={handleStepComplete} onComplete={handleStepComplete}
onSkip={handleSkip} onSkip={handleSkip}
onUpdate={handleStepUpdate}
isFirstStep={currentStepIndex === 0} isFirstStep={currentStepIndex === 0}
isLastStep={currentStepIndex === SETUP_STEPS.length - 1} isLastStep={currentStepIndex === SETUP_STEPS.length - 1}
canContinue={canContinue} canContinue={canContinue}

View File

@@ -262,8 +262,12 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
<button <button
key={option.value} key={option.value}
type="button" type="button"
onClick={() => setFormData({ ...formData, check_type: option.value })} onClick={(e) => {
className={`p-3 text-left border rounded-lg transition-colors ${ e.preventDefault();
e.stopPropagation();
setFormData({ ...formData, check_type: option.value });
}}
className={`p-3 text-left border rounded-lg transition-colors cursor-pointer ${
formData.check_type === option.value formData.check_type === option.value
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10' ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
: 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]' : 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]'
@@ -302,8 +306,12 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
<button <button
key={option.value} key={option.value}
type="button" type="button"
onClick={() => toggleStage(option.value)} onClick={(e) => {
className={`p-2 text-sm text-left border rounded-lg transition-colors ${ e.preventDefault();
e.stopPropagation();
toggleStage(option.value);
}}
className={`p-2 text-sm text-left border rounded-lg transition-colors cursor-pointer ${
formData.applicable_stages.includes(option.value) formData.applicable_stages.includes(option.value)
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)]' ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)]'
: 'border-[var(--border-secondary)] text-[var(--text-secondary)] hover:border-[var(--border-primary)]' : 'border-[var(--border-secondary)] text-[var(--text-secondary)] hover:border-[var(--border-primary)]'

View File

@@ -13,6 +13,7 @@ export const SuppliersSetupStep: React.FC<SetupStepProps> = ({
onPrevious, onPrevious,
onComplete, onComplete,
onSkip, onSkip,
onUpdate,
isFirstStep, isFirstStep,
isLastStep isLastStep
}) => { }) => {
@@ -47,6 +48,14 @@ export const SuppliersSetupStep: React.FC<SetupStepProps> = ({
// Track if minimum requirement is met // Track if minimum requirement is met
const canContinue = suppliers.length >= 1; const canContinue = suppliers.length >= 1;
// Notify parent when count changes
useEffect(() => {
onUpdate?.({
itemsCount: suppliers.length,
canContinue: suppliers.length >= 1,
});
}, [suppliers.length, onUpdate]);
// Validation // Validation
const validateForm = (): boolean => { const validateForm = (): boolean => {
const newErrors: Record<string, string> = {}; const newErrors: Record<string, string> = {};