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:
@@ -45,6 +45,7 @@ export interface SetupStepProps {
|
||||
onPrevious: () => void;
|
||||
onComplete: (data?: any) => void;
|
||||
onSkip?: () => void;
|
||||
onUpdate?: (state: { itemsCount?: number; canContinue?: boolean }) => void;
|
||||
isFirstStep: boolean;
|
||||
isLastStep: boolean;
|
||||
canContinue?: boolean;
|
||||
@@ -141,6 +142,13 @@ export const SetupWizard: React.FC = () => {
|
||||
const [isInitialized, setIsInitialized] = 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
|
||||
const { data: userProgress, isLoading: isLoadingProgress } = useUserProgress(
|
||||
user?.id || '',
|
||||
@@ -352,6 +360,7 @@ export const SetupWizard: React.FC = () => {
|
||||
onPrevious={handlePrevious}
|
||||
onComplete={handleStepComplete}
|
||||
onSkip={handleSkip}
|
||||
onUpdate={handleStepUpdate}
|
||||
isFirstStep={currentStepIndex === 0}
|
||||
isLastStep={currentStepIndex === SETUP_STEPS.length - 1}
|
||||
canContinue={canContinue}
|
||||
|
||||
@@ -262,8 +262,12 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, check_type: option.value })}
|
||||
className={`p-3 text-left border rounded-lg transition-colors ${
|
||||
onClick={(e) => {
|
||||
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
|
||||
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
|
||||
: 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]'
|
||||
@@ -302,8 +306,12 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => toggleStage(option.value)}
|
||||
className={`p-2 text-sm text-left border rounded-lg transition-colors ${
|
||||
onClick={(e) => {
|
||||
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)
|
||||
? '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)]'
|
||||
|
||||
@@ -13,6 +13,7 @@ export const SuppliersSetupStep: React.FC<SetupStepProps> = ({
|
||||
onPrevious,
|
||||
onComplete,
|
||||
onSkip,
|
||||
onUpdate,
|
||||
isFirstStep,
|
||||
isLastStep
|
||||
}) => {
|
||||
@@ -47,6 +48,14 @@ export const SuppliersSetupStep: React.FC<SetupStepProps> = ({
|
||||
// Track if minimum requirement is met
|
||||
const canContinue = suppliers.length >= 1;
|
||||
|
||||
// Notify parent when count changes
|
||||
useEffect(() => {
|
||||
onUpdate?.({
|
||||
itemsCount: suppliers.length,
|
||||
canContinue: suppliers.length >= 1,
|
||||
});
|
||||
}, [suppliers.length, onUpdate]);
|
||||
|
||||
// Validation
|
||||
const validateForm = (): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
Reference in New Issue
Block a user