last step mockup :godmode:

src/Components/Modal/PasswordModal.jsx

@@ -9,21 +9,27 @@ import {
 import { Puesto } from '../Password/Steps/puesto'
 import { Password } from '../Password/Steps/password'
 import { Candidato } from '../Password/Steps/candidato'
+import { Resume } from '../Password/Steps/resume'
 
 export function HelpModal(props) {
 
     let { visible, handleClose } = props
     const now = React.useRef(new Date());
 
-
     const [activeStep, setActiveStep] = React.useState(0);
     const [skipped, setSkipped] = React.useState(new Set());
 
     const [password, setPassword] = React.useState({
         puesto: [],
         pwd: "",
-        deadpwd: now,
-        dateToActived: now,
+        deadpwd: now.current,
+        dateToActived: now.current,
+        nombres:"",
+        apellidos:"",
+        mail:"",
+        sendmail:true,
+        nombrepuesto:"",
+        nombreEmpresa:"",
     });
 
     const isStepSkipped = (step) => {
@@ -83,7 +89,11 @@ export function HelpModal(props) {
         },
         {
             label: 'Confirmar',
-            operation: <h1>guardar</h1>
+            operation: 
+                <Resume
+                    handleBack={handleBack}
+                    password={password}
+                />
         },
     ];
 

src/Components/Password/Steps/candidato.jsx

@@ -11,31 +11,40 @@ import {
 export function Candidato(props) {
 
     const CandidatoSchema = Yup.object().shape({
-        firstName:
+        nombres:
             Yup.string()
                 .min(2, 'Demasiado corto!')
                 .max(50, 'Demasiado largo!')
                 .required("Ingresa un nombre válido"),
-        lastName:
+        apellidos:
             Yup.string()
                 .required("Ingresa un apellido válido")
                 .min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!'),
-        puesto:
+        mail:
             Yup.string()
+                .email("Correo no valido")
                 .required("Ingrea un puesto válido"),
-        niveles_educativo:
-            Yup.number('Ingresa un valor válido')
+        sendmail:
+            Yup.bool()
                 .required('Ingresa un nivel educativo válido'),
+        nombrepuesto:
+            Yup.string('Ingresa un valor válido')
+                .required('Ingresa un nombre válido'),
+        nombreEmpresa:
+            Yup.string('Ingresa un valor válido')
+                .required('Ingresa un nombre válido'),
     });
 
     let { handleNext, handleBack, password, setPassword } = props
 
     const formik = useFormik({
         initialValues: {
-            firstName: password.firstName,
-            lastName: password.lastName,
-            puesto: password.puesto,
-            niveles_educativo: password.niveles_educativo,
+            nombres: password.nombres,
+            apellidos: password.apellidos,
+            sendmail: password.sendmail,
+            mail : password.mail,
+            nombrepuesto: password.nombrepuesto,
+            nombreEmpresa: password.nombreEmpresa,
         },
         onSubmit: (fields) => {
             setPassword({ ...password, ...fields })
@@ -54,34 +63,35 @@ export function Candidato(props) {
                         <TextField
                             label="Nombre"
                             fullWidth
-                            {...getFieldProps('firstName')}
-                            error={Boolean(touched.firstName && errors.firstName)}
-                            helperText={touched.firstName && errors.firstName}
+                            {...getFieldProps('nombres')}
+                            error={Boolean(touched.nombres && errors.nombres)}
+                            helperText={touched.nombres && errors.nombres}
                         />
 
                         <TextField
                             label="Apellidos"
                             fullWidth
-                            {...getFieldProps('lastName')}
-                            error={Boolean(touched.lastName && errors.lastName)}
-                            helperText={touched.lastName && errors.lastName}
+                            {...getFieldProps('apellidos')}
+                            error={Boolean(touched.apellidos && errors.apellidos)}
+                            helperText={touched.apellidos && errors.apellidos}
                         />
                     </Stack>
 
                     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                         <TextField
                             fullWidth
-                            type="text"
+                            type="email"
                             label="Correo Electronico"
-                            {...getFieldProps('puesto')}
-                            error={Boolean(touched.puesto && errors.puesto)}
-                            helperText={touched.puesto && errors.puesto}
+                            {...getFieldProps('mail')}
+                            error={Boolean(touched.mail && errors.mail)}
+                            helperText={touched.mail && errors.mail}
                         />
                         <FormGroup>
 
                             <FormControlLabel
                                 control={
                                     <Checkbox
+                                        {...getFieldProps('sendmail')}
                                         defaultChecked
                                         color="default"
                                     />
@@ -98,17 +108,17 @@ export function Candidato(props) {
                             fullWidth
                             type="text"
                             label="Puesto"
-                            {...getFieldProps('puesto')}
-                            error={Boolean(touched.puesto && errors.puesto)}
-                            helperText={touched.puesto && errors.puesto}
+                            {...getFieldProps('nombrepuesto')}
+                            error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
+                            helperText={touched.nombrepuesto && errors.nombrepuesto}
                         />
                         <TextField
                             fullWidth
                             type="text"
                             label="Empresa"
-                            {...getFieldProps('puesto')}
-                            error={Boolean(touched.puesto && errors.puesto)}
-                            helperText={touched.puesto && errors.puesto}
+                            {...getFieldProps('nombreEmpresa')}
+                            error={Boolean(touched.nombreEmpresa && errors.nombreEmpresa)}
+                            helperText={touched.nombreEmpresa && errors.nombreEmpresa}
                         />
                     </Stack>
 

src/Components/Password/Steps/resume.jsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import {
+    Typography, Divider, Box, Button
+} from '@mui/material';
+
+const TAX_RATE = 0.07;
+
+function ccyFormat(num) {
+    return `${num.toFixed(2)}`;
+}
+
+function priceRow(qty, unit) {
+    return qty * unit;
+}
+
+function createRow(desc, qty, unit) {
+    const price = priceRow(qty, unit);
+    return { desc, qty, unit, price };
+}
+
+function subtotal(items) {
+    return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0);
+}
+
+const rows = [
+    createRow('Paperclips (Box)', 100, 1.15),
+    createRow('Paper (Case)', 10, 45.99),
+    createRow('Waste Basket', 2, 17.99),
+];
+
+const invoiceSubtotal = subtotal(rows);
+const invoiceTaxes = TAX_RATE * invoiceSubtotal;
+const invoiceTotal = invoiceTaxes + invoiceSubtotal;
+
+export function Resume(props) {
+    let {handleBack, password } = props
+    console.log("FINAL::", password)
+
+    return (
+        <React.Fragment>
+            <Typography  variant="h6">
+                Resumen:
+            </Typography>
+            <Divider sx={{paddingTop : 1}}/>
+            <TableContainer component={Paper}>
+                <Table sx={{ minWidth: 700 }} aria-label="spanning table">
+                    <TableBody>
+                        {rows.map((row) => (
+                            <TableRow key={row.desc}>
+                                <TableCell>{row.desc}</TableCell>
+                                <TableCell align="right">{row.qty}</TableCell>
+                                <TableCell align="right">{row.unit}</TableCell>
+                                <TableCell align="right">{ccyFormat(row.price)}</TableCell>
+                            </TableRow>
+                        ))}
+
+                        <TableRow>
+                            <TableCell rowSpan={3} />
+                            <TableCell colSpan={2}>Subtotal</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell>Tax</TableCell>
+                            <TableCell align="right">{`${(TAX_RATE * 100).toFixed(0)} %`}</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableCell colSpan={2}>Total</TableCell>
+                            <TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+            </TableContainer>
+
+                    <Box sx={{ mb: 2 }}>
+                        <div style={{ paddingTop: 15 }}>
+                            <Button
+                                type="submit"
+                                className="registerBtn"
+                                variant="contained"
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                {'Guardar'}
+                            </Button>
+                            <Button
+                                disabled={false}
+                                onClick={handleBack}
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                Regresar
+                            </Button>
+                        </div>
+                    </Box>
+
+        </React.Fragment>
+    );
+}