// src/components/site/signup/signupPhases.ts
export const SIGNUP_PHASES: Record<number, string> =
{
	0: 'Email Entered',
	1: 'Email Verified',
	2: 'Password Complete',
	3: 'Business Category',
	4: 'Business Name',
	5: 'Business Description',
	6: 'Business Details',
	7: 'Business Card',
	8: 'Business Banner',
	9: 'Review',
	
} as const;// "as const" marks it readonly and types exact values

export type SignupPhase = typeof SIGNUP_PHASES[keyof typeof SIGNUP_PHASES];

export const SIGNUP_PHASE_LABELS: Record<SignupPhase, string> =
{
	[SIGNUP_PHASES.EMAIL]: 'Email Entered',
	[SIGNUP_PHASES.VERIFY]: 'Email Verified',
	[SIGNUP_PHASES.PASSWORD]: 'Password Complete',
	[SIGNUP_PHASES.BUSINESS_CATEGORY]: 'Business Category',
	[SIGNUP_PHASES.BUSINESS_NAME]: 'Business Name',
	[SIGNUP_PHASES.BUSINESS_DESCRIPTION]: 'Business Description',
	[SIGNUP_PHASES.BUSINESS_DETAILS]: 'Business Details',
	[SIGNUP_PHASES.BUSINESS_CARD]: 'Business Card',
	[SIGNUP_PHASES.BUSINESS_BANNER]: 'Business Banner',
	[SIGNUP_PHASES.REVIEW]: 'Review',
};

export const TOTAL_STEPS = Object.keys(SIGNUP_PHASES).length;


// src/components/site/signup/useSignup.ts
import { SIGNUP_PHASES, SIGNUP_PHASE_LABELS, TOTAL_STEPS } from './signupPhases';

// Setup Total Steps for the signup progress bar
export const TOTAL_STEPS = Object.keys(SIGNUP_PHASES).length;

export function useSignup()
{
	const [step, setStep] = useState<number>(0);
	const [step, setStep] = useState(SIGNUP_PHASES.EMAIL);
	

Before I was using a number, then you recommanded editing the signupPhase.ts

I dont fully understand whats going on but now the step is empty/undefined

function Signup()
{
	// Passing data to useSignup()
	const {
		step,
		//setStep,// Assigned but not used
		//userId,// Assigned but not used
		//setUserId,// Assigned but not used
		//categories,// Assigned but not used
		//setCategories,// Not passed from useSignup.ts to here
		signupData,
		//setSignupData,// Assigned but not used
		csrf,
		//setCsrf,// Not passed from useSignup.ts to here
		loading,
		//setLoading,// Not passed from useSignup.ts to here
		errorMessage,
		//setErrorMessage,// Not passed from useSignup.ts to here
		successMessage,
		//setSuccessMessage,// Not passed from useSignup.ts to here
		formValidationErrors,
		//setFormValidationErrors,// Not passed from useSignup.ts to here
		updateField,// function
		//handleFileChange,// function // Assigned but not used
		submitStage,// function
		handleBack,// function
		SIGNUP_PHASES,
		TOTAL_STEPS,
	} = useSignup();
	
	const renderStepFields = () =>
	{
		// TODO - Render step not match submit stage from useSignup.ts, this us causing conflict 
		logger.log('Signup.ts', 'renderStepFields:', step);
	
		switch (step)
		{
			//case 0 :
			case SIGNUP_PHASES.EMAIL :
			
				return (


thoughts? btw step is handled by this:

export const handleApiResponseWithState = <Type = any>(
	response: GenericResponse<Type>,
	setErrorMessage: Dispatch<SetStateAction<string | null>>,
	setSuccessMessage: Dispatch<SetStateAction<string | null>>,
	setFormValidationErrors: Dispatch<SetStateAction<ApiErrorDetail>>,
	setUserId: Dispatch<SetStateAction<number | null>>,
	setUserToken: Dispatch<SetStateAction<string | null>>,
	setStep: Dispatch<SetStateAction<number>>,
	// "nextStepMap" - Used as map for setting steps calls from backend data array next_step
	nextStepMap: Record<string, number> =
	{
		email_verification: 1,
		password_setup: 2,
		business_category: 3,
		// add other mappings if needed
	}
): boolean =>
{
	/**
	* Call HandleApiResponseWithState();
	*
	* 	HandleApiResponseWithState(
	*		response,
	*		setErrorMessage,
	*		setSuccessMessage,
	*		setFormValidationErrors,
	*		emitGlobalAlert: bool
	*	);
	*/
	const success = handleApiResponse(
		response,
		setErrorMessage,
		setSuccessMessage,
		setFormValidationErrors,
		false// using default true for emitGlobalAlert parameter, so omit here for brevity
	);
	
	if (success && response.data)
	{
		// Confirm passing setStep to handleApiResponseWithState
		if (typeof setStep === 'function')
		{
			if (typeof response.data.userId === 'number')
			{
				setUserId(response.data.userId);
			}
			if (typeof response.data.signup_phase === 'number')
			{
				setStep(response.data.signup_phase);
			}
			else if (
				typeof response.data.next_step === 'string' &&
				nextStepMap[response.data.next_step] !== undefined
			)
			{
				setStep(nextStepMap[response.data.next_step]);
			}
			else
			{
				setStep(0);
			}
		}
		
		if (
			'token' in response.data &&
			typeof response.data.token === 'string'
		)
		{
			logger.info('utils.ts', 'Signup utils handleApiResponseWithState() set token', response.data.token);
		
			setUserToken(response.data.token);
			localStorage.setItem('jwtToken', response.data.token);
		}
	}
		
	return success;
}

which makes a call to the backend api for signup_phase/