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;
|
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}
|
||||||
|
|||||||
@@ -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)]'
|
||||||
|
|||||||
@@ -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> = {};
|
||||||
|
|||||||
Reference in New Issue
Block a user