display the email, firstName, lastName or last_name of the user in th…

…e last step, StepFive component

client/src/components/Users/Auth/SignUpCitizen/SignUpCitizen.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Box, Typography } from '@mui/material';
 import { useMutation } from 'react-query';
 
@@ -14,8 +14,8 @@ import StepTwo from './StepTwo';
 import StepThree from './StepThree';
 import StepFour from './StepFour';
 import StepFive from './StepFive';
-
 import Endpoints from './apis/backend';
+
 import { AxiosError } from 'axios';
 
 const imgHeight = '569px';
@@ -39,15 +39,19 @@ const initialFormData: UserSignupData = {
 function SignupCitizen() {
   const [activeStep, setActiveStep] = useState<number>(0);
   const [formData, setFormData] = useState(initialFormData);
-  const [user, setUser] = useState<UserSignupData | null>(null);
-  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [user, setUser] = useState(null);
+  const [errorMsg, setErrorMsg] = useState(null);
+
+  useEffect(() => {
+    if (user) {
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    }
+  }, [user]);
 
   const registerUserMutation = useMutation({
     mutationFn: Endpoints.userRegister,
-    onSuccess: (user) => {
-      // @ts-ignore
+    onSuccess: ({ data: user }) => {
       setUser(user);
-      setActiveStep((prevActiveStep) => prevActiveStep + 1);
     },
     onError: (error: AxiosError) => {
       console.log('WE HAVE AN ERROR', { error });

client/src/components/Users/Auth/SignUpCitizen/StepFive.tsx

@@ -3,17 +3,20 @@ import { Box, Typography } from '@mui/material';
 
 import { useStyles } from './styles/styles';
 
-interface StepFiveType {
+export interface IStepFive {
   user?: {
     firstName?: string;
     lastName?: string;
+    last_name?: string;
     email?: string;
   } | null;
 }
 
-export default function StepFive({ user }: StepFiveType) {
+export default function StepFive({ user }: IStepFive) {
   const { classes } = useStyles();
 
+  console.log('StepFive: ', { user });
+
   return (
     <Box sx={{ height: '100%', minWidth: '780px' }}>
       <Typography
@@ -26,7 +29,7 @@ export default function StepFive({ user }: StepFiveType) {
         Sign up almost complete!
       </Typography>
       <Typography className={classes.label} sx={{ fontWeight: 'bold', marginTop: '60px' }}>
-        {user && user.firstName} {user && user.lastName}
+        {user && user.firstName} {user && (user.lastName || user.last_name)}
       </Typography>
       <Typography>{user && user.email}</Typography>
       <Typography sx={{ marginBottom: '60px' }}>

client/src/components/Users/Auth/SignUpCitizen/StepTwo.tsx

@@ -24,7 +24,8 @@ const initialFormData = {
     error: null,
     rule: string()
       .required('Required.')
-      .min(5, 'Zipcode is too short - should be 5 digits minimum.'),
+      .min(5, 'Zipcode should be 5 digits minimum.')
+      .matches(/^\d{5}(?:[-\s]\d{4})?$/, 'Must be a valid zip code.'),
   },
 };